Minor deploy and workflow changes

.env

@@ -11,5 +11,8 @@ 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_GOOGLE_MAPS_LINK="https://www.google.com/maps/place/SalsaViva+Social+Dance+School/@40.1896507,44.5247736,18.92z/data=!4m6!3m5!1s0x406abda9a2d5a441:0x6a2fd39de89a2d4f!8m2!3d40.1897789!4d44.5248407!16s%2Fg%2F11rkp1t8xs?entry=ttu"
 LOCATION_ADDRESS_TEXT=41, 4 Abovyan St, Yerevan 0009
+
+# Origin
+ORIGIN=https://salsaviva.am

.env.sample

@@ -12,5 +12,5 @@ HOTJAR_SNIPPET_VERSION=""
 # Fromspree id to send form data
 FORMSPREE_ID=""
 
-# Base path to load assets, for instance used in production on github pages
-ASSETS_BASE_PATH=""
+# Base path to load assets and static files
+BASE_PATH=""

.github/actions/build/action.yml

@@ -0,0 +1,9 @@
+name: "Build"
+description: "Build the project."
+
+runs:
+  using: "composite"
+  steps:
+    - name: Build
+      shell: bash
+      run: npm run build

.github/actions/deploy/action.yml

@@ -0,0 +1,20 @@
+name: 'Deploy'
+description: 'Deploy the project.'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: No jekyll
+      run: touch out/.nojekyll
+    - name: Deploy
+      uses: JamesIves/github-pages-deploy-action@v4
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        branch: gh-pages
+        folder: out
+        clean: true
+        clean-exclude: .nojekyll
+        target-folder: .
+        git-config-name: ${{ github.actor }}
+        git-config-email: ${{ github.actor }}@users.noreply.github.com
+        commit-message: Deploy from commit ${{ github.sha }}

.github/workflows/actions/test/action.yml → .github/actions/test/action.yml

@@ -1,14 +1,16 @@
-name: "Test"
-description: "Lint and test the project."
+name: 'Test'
+description: 'Lint and test the project.'
 
 runs:
-  using: "composite"
+  using: 'composite'
   steps:
     - name: Lint
+      shell: bash
       run: |
         npm run lint
         npm run lint:editorconfig
     - name: Prettier rules check
+      shell: bash
       run: npm run prettier-check
     - name: e2e
       uses: cypress-io/github-action@v5
@@ -17,4 +19,5 @@ runs:
         start: npm start
         record: false
     - name: Check seo
+      shell: bash
       run: npm run check-seo

.github/workflows/build.yml

@@ -10,8 +10,13 @@ concurrency:
 
 jobs:
   build:
-    name: Build
+    name: Build on Node.js ${{ matrix.version }}
     runs-on: ubuntu-latest
+    env:
+      GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
+      FORMSPREE_ID: ${{ secrets.FORMSPREE_ID }}
+      HOTJAR_ID: ${{ secrets.HOTJAR_ID }}
+      HOTJAR_SNIPPET_VERSION: ${{ secrets.HOTJAR_SNIPPET_VERSION }}
     strategy:
       matrix:
         version: [18, 20, 22]
@@ -26,4 +31,3 @@ jobs:
         uses: ./.github/actions/test
       - name: Build
         uses: ./.github/actions/build
-

.github/workflows/deploy.yml

@@ -19,6 +19,13 @@ jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
+    env:
+      GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
+      FORMSPREE_ID: ${{ secrets.FORMSPREE_ID }}
+      HOTJAR_ID: ${{ secrets.HOTJAR_ID }}
+      HOTJAR_SNIPPET_VERSION: ${{ secrets.HOTJAR_SNIPPET_VERSION }}
+      BASE_PATH: ''
+      ORIGIN: salsaviva.am
     steps:
       - name: Clone repository
         uses: actions/checkout@v4
@@ -28,16 +35,5 @@ jobs:
           node_version: 18
       - name: Build
         uses: ./.github/actions/build
-        with:
-          assets_path: 'assets'
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          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 }}
+        uses: ./.github/actions/deploy

app/env.mjs

@@ -35,6 +35,8 @@ const server = {
   CONTACT_PHONE: notEmptyString,
   LOCATION_GOOGLE_MAPS_LINK: notEmptyString.url(),
   LOCATION_ADDRESS_TEXT: notEmptyString,
+  BASE_PATH: z.string().optional(),
+  ORIGIN: notEmptyString.url(),
 };
 
 const client = {};
@@ -62,5 +64,7 @@ export const env = createEnv({
     CONTACT_PHONE: process.env.CONTACT_PHONE,
     LOCATION_GOOGLE_MAPS_LINK: process.env.LOCATION_GOOGLE_MAPS_LINK,
     LOCATION_ADDRESS_TEXT: process.env.LOCATION_ADDRESS_TEXT,
+    BASE_PATH: process.env.BASE_PATH,
+    ORIGIN: process.env.ORIGIN,
   },
 });

app/layout.tsx

@@ -44,9 +44,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en">
       <body className={bodyCn}>
-        <WithGtagScript />
-        <WithHotjarScript />
-        <CustomCursor />
         <main className={mainCn}>
           <MotoinProvider>
             <ScrollToTopButton
@@ -61,6 +58,9 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
           </MotoinProvider>
         </main>
         <Footer />
+        <WithGtagScript />
+        <WithHotjarScript />
+        <CustomCursor />
         {!DISABLE_GA_IN_DEV_MODE && (
           <>
             <WebVitals />

app/manifest.ts

@@ -0,0 +1,38 @@
+import {MetadataRoute} from 'next';
+import tailwindConfig from '../tailwind.config';
+
+const colors = tailwindConfig.theme.extend.colors;
+const {alternate = 'black'} = colors;
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Salsaviva - Salsa, Bachata and Kizomba in Yerevan',
+    short_name: 'Salsaviva',
+    description: 'Social dance school in Yerevan',
+    theme_color: alternate,
+    background_color: alternate,
+    display: 'standalone',
+    orientation: 'portrait',
+    scope: '/',
+    start_url: '/',
+    icons: [
+      {
+        src: '/icons/logo_192.png',
+        type: 'image/png',
+        sizes: '192x192',
+      },
+      {
+        src: '/icons/logo_maskable_192.png',
+        type: 'image/png',
+        sizes: '192x192',
+        purpose: 'maskable',
+      },
+      {
+        src: '/icons/logo_512.png',
+        type: 'image/png',
+        sizes: '512x512',
+      },
+    ],
+  };
+}

app/metadata.ts

@@ -24,7 +24,6 @@ const metadata: Metadata = {
     'social dance',
   ],
   authors: [{name: 'Ukorvl', url: 'https://github.com/ukorvl'}],
-  manifest: '/manifest.json',
   metadataBase: new URL(origin),
   openGraph: {
     title: 'Salsaviva',

app/origin.ts

@@ -1,4 +1,3 @@
 import {env} from './env.mjs';
 
-export const origin =
-  env.NODE_ENV === 'production' ? 'https://salsaviva.am' : 'http://localhost:3000';
+export const origin = env.ORIGIN;

app/page.tsx

@@ -6,11 +6,19 @@ 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', 'text-center');
-const subtitleCn = clsx('text-1.5xl', 'font-light', 'tracking-widest', 'text-center');
+const titleCn = clsx('font-light', 'text-6xl', 'md:text-8xl', 'mt-24', 'text-center');
+const subtitleCn = clsx(
+  'text-lg',
+  'md:text-1.5xl',
+  'font-light',
+  'tracking-widest',
+  'text-center',
+  'p-12',
+  'md:p-0',
+);
 const titleContainerCn = clsx('font-sans', 'select-none');
-const exploreCn = clsx('mt-auto');
-const iconsCn = clsx('fixed', 'left-4', '-translate-y-2/4', 'top-2/4');
+const exploreCn = clsx('mt-auto', 'md:inline', 'hidden');
+const iconsCn = clsx('fixed', 'lg:left-4', 'lg:-translate-y-2/4', 'lg:top-2/4');
 
 /**
  * @returns React component.

app/teachers/page.tsx

@@ -27,8 +27,8 @@ const containerCn = clsx(
   'w-full',
 );
 const titleCn = clsx('text-8xl', 'mt-24', 'ml-4');
-const subTitleCn = clsx('text-4xl', 'my-4', 'w-2/3', 'ml-4');
-const CATLinkCn = clsx('mt-16');
+const subTitleCn = clsx('text-4xl', 'my-12', 'lg:my-4', 'lg:w-2/3', 'ml-4');
+const CATLinkCn = clsx('mt-32', 'lg:mt-16');
 
 const titleVariants = getTextSlideIntoViewVarinats('left');
 

app/topMenuConfig.tsx

@@ -16,7 +16,6 @@ const menuItems = [
       <UniversalLink
         href="/about"
         className={linkCn}
-        target="_blank"
         rel="noopener noreferrer"
       >
         ABOUT
@@ -28,7 +27,6 @@ const menuItems = [
       <UniversalLink
         href="/gallery"
         className={linkCn}
-        target="_blank"
         rel="noopener noreferrer"
       >
         GALLERY
@@ -41,7 +39,6 @@ const menuItems = [
       <UniversalLink
         href="/teachers"
         className={linkCn}
-        target="_blank"
         rel="noopener noreferrer"
       >
         TEACHERS
@@ -54,7 +51,6 @@ const menuItems = [
       <UniversalLink
         href="/contact"
         className={linkCn}
-        target="_blank"
         rel="noopener noreferrer"
       >
         CONTACT

components/pages/Teachers/TeacherDesktop.tsx

@@ -0,0 +1,24 @@
+import {useHover} from '@/lib/shared/useHover';
+import {TeachersListConfigItem} from './teachersListConfig';
+import TeacherTemplate from './TeacherTemplate';
+
+/**
+ * Props.
+ */
+type TeacherDesktopProps = TeachersListConfigItem;
+
+/**
+ * @param props Props.
+ * @returns React component.
+ */
+export default function TeacherDesktop(props: TeacherDesktopProps) {
+  const [ref, isHover] = useHover<HTMLDivElement>();
+
+  return (
+    <TeacherTemplate
+      {...props}
+      isDescriptionVisible={isHover}
+      ref={ref}
+    />
+  );
+}

components/pages/Teachers/TeacherMobile.tsx

@@ -0,0 +1,33 @@
+import {useMotionValueEvent, useScroll} from 'framer-motion';
+import {useRef, useState} from 'react';
+import {TeachersListConfigItem} from './teachersListConfig';
+import TeacherTemplate from './TeacherTemplate';
+
+/**
+ * Props.
+ */
+type TeacherMobileProps = TeachersListConfigItem;
+
+/**
+ * @param props Props.
+ * @returns React component.
+ */
+export default function TeacherMobile(props: TeacherMobileProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const {scrollYProgress} = useScroll({
+    target: ref,
+    offset: ['end end', 'start start'],
+  });
+  useMotionValueEvent(scrollYProgress, 'change', latest => {
+    setIsVisible(latest > 0.1 && latest < 1);
+  });
+
+  return (
+    <TeacherTemplate
+      {...props}
+      isDescriptionVisible={isVisible}
+      ref={ref}
+    />
+  );
+}