add assets prefix #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/layout.tsx

@@ -1,12 +1,15 @@
 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 meta from './metadata';
 import viewportData from './viewport';
 import {kumbhSans, robotoMono} from './fonts';
+import {env} from './env.mjs';
 import './styles.css';
 
 export const metadata = meta;
@@ -33,12 +36,15 @@ 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} = env;
   return (
     <html lang="en">
       <body className={bodyCn}>
-        <WithGtag />
+        <WithGtagScript />
+        <WithHotjarScript />
         <CustomCursor />
         <WebVitals />
+        <LocationChangeTracker trackingId={GA_TRACKING_ID} />
         <main className={mainCn}>{children}</main>
         <Footer />
       </body>

app/page.tsx

@@ -5,7 +5,7 @@ import CATLink from '@/components/shared/CATLink/CATLink';
 import SocialIcons from '@/components/shared/SocialIcons/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');

app/sitemap.ts

@@ -1,30 +1,25 @@
+import fs from 'fs';
+import {default as pathModule} from 'node:path';
 import {MetadataRoute} from 'next';
 import {origin} from './origin';
 
+// eslint-disable-next-line jsdoc/require-jsdoc
+function getDirectories(path: string) {
+  return fs.readdirSync(path).filter(function (file) {
+    return fs.statSync(pathModule.join(path, file)).isDirectory();
+  });
+}
+
+const pageFolders = getDirectories(process.cwd() + '/app');
+
 /**
  * @returns Sitemap template.
  */
 export default function sitemap(): MetadataRoute.Sitemap {
-  return [
-    {
-      url: origin,
-      lastModified: new Date(),
-    },
-    {
-      url: `${origin}/about`,
-      lastModified: new Date(),
-    },
-    {
-      url: `${origin}/gallery`,
-      lastModified: new Date(),
-    },
-    {
-      url: `${origin}/contact`,
-      lastModified: new Date(),
-    },
-    {
-      url: `${origin}/teachers`,
+  return pageFolders.map(folder => {
+    return {
+      url: `${origin}/${folder}`,
       lastModified: new Date(),
-    },
-  ];
+    };
+  });
 }

app/template.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import {LazyMotion} from 'framer-motion';
-import {LocationChangeTracker} from '@/lib/gtag/LocationChangeTracker';
 import useDynamicFavicon from '@/lib/dynamicFavicon/useDynamicFavicon';
 import TopMenu from '@/components/shared/TopMenu/TopMenu';
 import {loadFeatures} from '@/lib/framerMotion/loadFeatures';
@@ -16,7 +15,6 @@ export default function Template({children}: {children: React.ReactNode}) {
 
   return (
     <LazyMotion features={loadFeatures}>
-      <LocationChangeTracker />
       <TopMenu />
       <ScrollToTopButton
         bottom={50}

components/pages/Contact/Form/Form.tsx

@@ -21,7 +21,7 @@ const initialValues = {
   message: '',
 } satisfies ContactFormData;
 
-const {NEXT_PUBLIC_FORMSPREE_ID} = env;
+const {FORMSPREE_ID} = env;
 
 /**
  * @param {FormProps} props Props.
@@ -30,7 +30,7 @@ const {NEXT_PUBLIC_FORMSPREE_ID} = env;
 export default function Form({onSubmit: onSuccessSubmit, onErrorSubmit}: FormProps) {
   const mottoCn = 'text-center text-gray-300 mt-16';
   const btnCn = 'mt-8';
-  const [{status}, submit] = useFormspree<ContactFormData>(NEXT_PUBLIC_FORMSPREE_ID!);
+  const [{status}, submit] = useFormspree<ContactFormData>(FORMSPREE_ID!);
   // eslint-disable-next-line jsdoc/require-jsdoc
   const onSubmit = async (values: ContactFormData) => {
     try {

components/shared/Footer/Location.tsx

@@ -3,7 +3,7 @@ import {memo} from 'react';
 import {env} from '@/app/env.mjs';
 import UniversalLink from '../UniversalLink/UniversalLink';
 
-const {NEXT_PUBLIC_LOCATION_ADDRESS_TEXT, NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK} = env;
+const {LOCATION_ADDRESS_TEXT, LOCATION_GOOGLE_MAPS_LINK} = env;
 
 const containerCn = clsx('flex', 'justify-center', 'flex-nowrap', 'gap-4');
 const addressCn = clsx('not-italic');
@@ -16,11 +16,11 @@ function Location() {
   return (
     <div className={containerCn}>
       <UniversalLink
-        href={NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK ?? ''}
+        href={LOCATION_GOOGLE_MAPS_LINK ?? ''}
         target="_blank"
         className={linkCn}
       >
-        <address className={addressCn}>{NEXT_PUBLIC_LOCATION_ADDRESS_TEXT}</address>
+        <address className={addressCn}>{LOCATION_ADDRESS_TEXT}</address>
       </UniversalLink>
     </div>
   );