add image path #11

.env

@@ -2,16 +2,17 @@
 # For others consider to use .env.local
 
 # Disable google analytics when running app in dev mode
-NEXT_PUBLIC_DISABLE_GA_IN_DEV_MODE=true
+DISABLE_GA_IN_DEV_MODE=true
 
-NEXT_PUBLIC_INSTAGRAM_ADDRESS="https://www.instagram.com/salsavivayerevan/"
-NEXT_PUBLIC_FACEBOOK_ADDRESS="https://www.facebook.com/SalsaVivaYerevan/"
-NEXT_PUBLIC_WHATSAPP_ADDRESS="https://wa.me/37443108588"
-NEXT_PUBLIC_TELEGRAM_ADDRESS="https://t.me/SV_Yerevan"
-NEXT_PUBLIC_CONTACT_EMAIL="sv.yerevan@gmail.com"
-NEXT_PUBLIC_CONTACT_PHONE="+374 431 085 88"
-
-NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK="https://shorturl.at/gsuK5"
-NEXT_PUBLIC_LOCATION_ADDRESS_TEXT=" 41, 4 Abovyan St, Yerevan 0009"
+# Socials
+INSTAGRAM_ADDRESS="https://www.instagram.com/salsavivayerevan/"
+FACEBOOK_ADDRESS="https://www.facebook.com/SalsaVivaYerevan/"
+WHATSAPP_ADDRESS="https://wa.me/37443108588"
+TELEGRAM_ADDRESS="https://t.me/SV_Yerevan"
+CONTACT_EMAIL="sv.yerevan@gmail.com"
+CONTACT_PHONE="+374 431 085 88"
+LOCATION_GOOGLE_MAPS_LINK="https://shorturl.at/gsuK5"
+LOCATION_ADDRESS_TEXT=" 41, 4 Abovyan St, Yerevan 0009"
 
+# Base path to load assets, used in production on github pages
 BASE_PATH="/salsaviva"

.env.sample

@@ -2,7 +2,12 @@
 # Copy contents of this file to .env.local
 # Replace values with your own
 
-NEXT_PUBLIC_GA_TRACKING_ID=""
-NEXT_PUBLIC_HOTJAR_ID=""
-NEXT_PUBLIC_HOTJAR_SNIPPET_VERSION=""
-NEXT_PUBLIC_FORMSPREE_ID=""
+# Google analytics tracking id
+GA_TRACKING_ID=""
+
+# Hotjar id and version
+HOTJAR_ID=""
+HOTJAR_SNIPPET_VERSION=""
+
+# Fromspree id to send form data
+FORMSPREE_ID=""

.eslintrc.json

@@ -57,7 +57,8 @@
         "newlines-between": "never",
         "warnOnUnassignedImports": true
       }
-    ]
+    ],
+    "no-duplicate-imports": 1
   },
   "overrides": [
     {

.github/workflows/build.yml

@@ -10,11 +10,6 @@ on:
         description: 'Inject public path'
         required: false
         default: ''
-      branch:
-        type: string
-        description: 'Branch to build'
-        required: true
-        default: 'master'
 
 jobs:
   build:
@@ -23,8 +18,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.inputs.branch }}
 
       - name: Setup Nodejs
         uses: actions/setup-node@v3
@@ -36,17 +29,18 @@ jobs:
           npm pkg delete scripts.prepare
           npm ci
 
-      - name: Make envfile
-        uses: SpicyPizza/create-envfile@v2.0
-        with:
-            envkey_NEXT_PUBLIC_GA_TRACKING_ID: "${{ secrets.NEXT_PUBLIC_GA_TRACKING_ID }}"
-            envkey_NEXT_PUBLIC_FORMSPREE_ID: "${{ secrets.NEXT_PUBLIC_FORMSPREE_ID }}"
-            envkey_NEXT_PUBLIC_HOTJAR_ID: ${{ secrets.NEXT_PUBLIC_HOTJAR_ID }}
-            envkey_NEXT_PUBLIC_HOTJAR_SNIPPET_VERSION: ${{ secrets.NEXT_PUBLIC_HOTJAR_SNIPPET_VERSION }}
-            envkey_PUBLIC_PATH: ${{ github.event.inputs.public_path }}
-            directory: '.'
-            file_name: .env.local
-            fail_on_empty: false
+      - name: Setup envfile
+        run: |
+          config='
+            PUBLIC_PATH = "${{ github.event.inputs.public_path }}""
+
+            GA_TRACKING_ID = "${{ secrets.GA_TRACKING_ID }}"
+            FORMSPREE_ID = "${{ secrets.FORMSPREE_ID }}"
+            HOTJAR_ID = "${{ secrets.HOTJAR_ID }}"
+            HOTJAR_SNIPPET_VERSION = "${{ secrets.HOTJAR_SNIPPET_VERSION }}"
+          '
+          echo "$config" > env.production
+          echo env.production
 
       - name: Lint
         run: |

.github/workflows/deploy.yml

@@ -42,12 +42,12 @@ jobs:
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@3.6.2
         with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: gh-pages
-          FOLDER: out
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages
+          folder: out
           CLEAN: true
-          TARGET_FOLDER: .
-          GIT_CONFIG_NAME: ${{ github.actor }}
-          GIT_CONFIG_EMAIL: ${{ github.actor }}@users.noreply.github.com
-          COMMIT_MESSAGE: Deploy from commit ${{ github.sha }}
+          target-folder: .
+          git-config-name: ${{ github.actor }}
+          git-config-email: ${{ github.actor }}@users.noreply.github.com
+          commit-message: Deploy from commit ${{ github.sha }}
 

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
+npx --no-install lint-staged

app/env.mjs

@@ -1,36 +1,44 @@
 import {createEnv} from '@t3-oss/env-nextjs';
 import {z} from 'zod';
 
+/**
+ * Checks if a string is not empty.
+ */
 const notEmptyString = z.string().min(1);
-const number = z
-  .string()
-  .refine(v => !Number.isNaN(Number(v)))
+/**
+ * Checks if a value is a number.
+ */
+const number = notEmptyString
+  .refine(v => {
+    return !isNaN(Number(v)) || !isNaN(Number(v.replace(/"'/g, '')));
+  })
   .transform(Number);
+/**
+ * Checks if a value is a boolean.
+ */
 const boolean = z
   .string()
   .refine(v => v === 'true' || v === 'false' || v === '')
   .transform(value => value === 'true');
 
-const server = {};
-
-const client = {
-  NEXT_PUBLIC_GA_TRACKING_ID: notEmptyString,
-  NEXT_PUBLIC_FORMSPREE_ID: notEmptyString,
-  NEXT_PUBLIC_DISABLE_GA_IN_DEV_MODE: boolean,
-  NEXT_PUBLIC_INSTAGRAM_ADDRESS: notEmptyString.url(),
-  NEXT_PUBLIC_FACEBOOK_ADDRESS: notEmptyString.url(),
-  NEXT_PUBLIC_WHATSAPP_ADDRESS: notEmptyString.url(),
-  NEXT_PUBLIC_TELEGRAM_ADDRESS: notEmptyString.url(),
-  NEXT_PUBLIC_CONTACT_EMAIL: notEmptyString.email(),
-  NEXT_PUBLIC_CONTACT_PHONE: notEmptyString,
-  NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK: notEmptyString.url(),
-  NEXT_PUBLIC_LOCATION_ADDRESS_TEXT: notEmptyString,
-  NEXT_PUBLIC_GA_TRACKING_ID: notEmptyString,
-  NEXT_PUBLIC_HOTJAR_ID: notEmptyString,
-  NEXT_PUBLIC_HOTJAR_SNIPPET_VERSION: number,
-  NEXT_PUBLIC_FORMSPREE_ID: notEmptyString,
+const server = {
+  INSTAGRAM_ADDRESS: notEmptyString.url(),
+  FACEBOOK_ADDRESS: notEmptyString.url(),
+  WHATSAPP_ADDRESS: notEmptyString.url(),
+  TELEGRAM_ADDRESS: notEmptyString.url(),
+  DISABLE_GA_IN_DEV_MODE: boolean,
+  GA_TRACKING_ID: notEmptyString,
+  HOTJAR_ID: notEmptyString,
+  HOTJAR_SNIPPET_VERSION: number,
+  FORMSPREE_ID: notEmptyString,
+  CONTACT_EMAIL: notEmptyString.email(),
+  CONTACT_PHONE: notEmptyString,
+  LOCATION_GOOGLE_MAPS_LINK: notEmptyString.url(),
+  LOCATION_ADDRESS_TEXT: notEmptyString,
 };
 
+const client = {};
+
 const shared = {
   NODE_ENV: z.enum(['development', 'production']),
 };
@@ -39,20 +47,20 @@ export const env = createEnv({
   server,
   client,
   shared,
-  experimental__runtimeEnv: {
+  runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
-    NEXT_PUBLIC_GA_TRACKING_ID: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
-    NEXT_PUBLIC_FORMSPREE_ID: process.env.NEXT_PUBLIC_FORMSPREE_ID,
-    NEXT_PUBLIC_DISABLE_GA_IN_DEV_MODE: process.env.NEXT_PUBLIC_DISABLE_GA_IN_DEV_MODE,
-    NEXT_PUBLIC_INSTAGRAM_ADDRESS: process.env.NEXT_PUBLIC_INSTAGRAM_ADDRESS,
-    NEXT_PUBLIC_FACEBOOK_ADDRESS: process.env.NEXT_PUBLIC_FACEBOOK_ADDRESS,
-    NEXT_PUBLIC_WHATSAPP_ADDRESS: process.env.NEXT_PUBLIC_WHATSAPP_ADDRESS,
-    NEXT_PUBLIC_TELEGRAM_ADDRESS: process.env.NEXT_PUBLIC_TELEGRAM_ADDRESS,
-    NEXT_PUBLIC_CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL,
-    NEXT_PUBLIC_CONTACT_PHONE: process.env.NEXT_PUBLIC_CONTACT_PHONE,
-    NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK: process.env.NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK,
-    NEXT_PUBLIC_LOCATION_ADDRESS_TEXT: process.env.NEXT_PUBLIC_LOCATION_ADDRESS_TEXT,
-    NEXT_PUBLIC_HOTJAR_SNIPPET_VERSION: process.env.NEXT_PUBLIC_HOTJAR_SNIPPET_VERSION,
-    NEXT_PUBLIC_HOTJAR_ID: process.env.NEXT_PUBLIC_HOTJAR_ID,
+    INSTAGRAM_ADDRESS: process.env.INSTAGRAM_ADDRESS,
+    FACEBOOK_ADDRESS: process.env.FACEBOOK_ADDRESS,
+    WHATSAPP_ADDRESS: process.env.WHATSAPP_ADDRESS,
+    TELEGRAM_ADDRESS: process.env.TELEGRAM_ADDRESS,
+    DISABLE_GA_IN_DEV_MODE: process.env.DISABLE_GA_IN_DEV_MODE,
+    GA_TRACKING_ID: process.env.GA_TRACKING_ID,
+    HOTJAR_ID: process.env.HOTJAR_ID,
+    HOTJAR_SNIPPET_VERSION: process.env.HOTJAR_SNIPPET_VERSION,
+    FORMSPREE_ID: process.env.FORMSPREE_ID,
+    CONTACT_EMAIL: process.env.CONTACT_EMAIL,
+    CONTACT_PHONE: process.env.CONTACT_PHONE,
+    LOCATION_GOOGLE_MAPS_LINK: process.env.LOCATION_GOOGLE_MAPS_LINK,
+    LOCATION_ADDRESS_TEXT: process.env.LOCATION_ADDRESS_TEXT,
   },
 });

app/error.tsx

@@ -1,29 +1,19 @@
 'use client';
 
-import {useEffect} from 'react';
+import clsx from 'clsx';
+import Button from '@/components/shared/Button/Button';
+
+const errContainerCn = clsx('pt-64', 'flex', 'flex-col', 'gap-8');
 
 /**
  * @param {{error: Error; reset: () => void}} props Props.
  * @returns React component.
  */
-export default function Error({error, reset}: {error: Error; reset: () => void}) {
-  useEffect(() => {
-    // Log the error to an error reporting service
-    // eslint-disable-next-line no-console
-    console.error(error);
-  }, [error]);
-
+export default function Error({reset}: {error: Error; reset: () => void}) {
   return (
-    <div>
+    <div className={errContainerCn}>
       <h2>Something went wrong!</h2>
-      <button
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
-        Try again
-      </button>
+      <Button onClick={() => reset()}>Try again</Button>
     </div>
   );
 }

app/gallery/page.tsx

@@ -5,6 +5,7 @@ import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewp
 import SocialIcons from '@/components/shared/SocialIcons/SocialIcons';
 import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 import metadataBase from '../metadata';
+import getSocialicons from '../socialIcons';
 import './styles.css';
 
 export const metadata: Metadata = {
@@ -68,7 +69,7 @@ export default function GalleryPage() {
         >
           Want more? Follow us on social media!
         </AppearInViewport>
-        <SocialIcons iconSize="2x" />
+        <SocialIcons icons={getSocialicons('2x')} />
       </div>
     </div>
   );

app/layout.tsx

@@ -1,12 +1,17 @@
 import clsx from 'clsx';
 import '@/lib/fontawesome/configure';
 import Footer from '@/components/shared/Footer/Footer';
-import WithGtag from '@/lib/gtag/WithGtag';
+import WithGtagScript from '@/lib/gtag/WithGtagScript';
 import CustomCursor from '@/lib/customCursor/CustomCursor';
 import WebVitals from '@/components/shared/WebVitals/WebVitals';
+import WithHotjarScript from '@/lib/hotjar/WithHotjarScript';
+import {LocationChangeTracker} from '@/lib/gtag/LocationChangeTracker';
+import TopMenu from '@/components/shared/TopMenu/TopMenu';
 import meta from './metadata';
 import viewportData from './viewport';
 import {kumbhSans, robotoMono} from './fonts';
+import {env} from './env.mjs';
+import {menuItems, socialLinks} from './topMenuConfig';
 import './styles.css';
 
 export const metadata = meta;
@@ -33,14 +38,25 @@ const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-start', 'grow')
  * @returns Global layout.
  */
 export default function RootLayout({children}: {children: React.ReactNode}) {
+  const {GA_TRACKING_ID, DISABLE_GA_IN_DEV_MODE} = env;
   return (
     <html lang="en">
       <body className={bodyCn}>
-        <WithGtag />
+        <WithGtagScript />
+        <WithHotjarScript />
         <CustomCursor />
-        <WebVitals />
+        <TopMenu
+          menuItems={menuItems}
+          socialLinks={socialLinks}
+        />
         <main className={mainCn}>{children}</main>
         <Footer />
+        {!DISABLE_GA_IN_DEV_MODE && (
+          <>
+            <WebVitals />
+            <LocationChangeTracker trackingId={GA_TRACKING_ID} />
+          </>
+        )}
       </body>
     </html>
   );

app/page.tsx

@@ -3,9 +3,10 @@ import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewp
 import MainPageVideoPlayer from '@/components/pages/MainPageVideoPlayer/MainPageVideoPlayer';
 import CATLink from '@/components/shared/CATLink/CATLink';
 import SocialIcons from '@/components/shared/SocialIcons/SocialIcons';
+import getSocialicons from './socialIcons';
 
 const containerCn = clsx('relative', 'z-10', 'flex', 'flex-col', 'items-center', 'grow');
-const titleCn = clsx('font-light', 'text-8xl', 'mt-24');
+const titleCn = clsx('font-light', 'text-8xl', 'mt-24', 'text-center');
 const subtitleCn = clsx('text-1.5xl', 'font-light', 'tracking-widest', 'text-center');
 const titleContainerCn = clsx('font-sans', 'select-none');
 const exploreCn = clsx('mt-auto');
@@ -31,9 +32,9 @@ export default function Home() {
         />
       </div>
       <SocialIcons
-        iconSize="2xl"
         direction="column"
         className={iconsCn}
+        icons={getSocialicons('xl')}
       />
       <MainPageVideoPlayer />
     </>