minor changes #11

.env

@@ -2,16 +2,14 @@
 # For others consider to use .env.local
 
 # Disable google analytics when running app in dev mode
-NEXT_PUBLIC_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"
-
-BASE_PATH="/salsaviva"
+DISABLE_GA_IN_DEV_MODE=true
+
+# 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

.env.sample

@@ -2,7 +2,15 @@
 # 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=""
+
+# Base path to load assets, for instance used in production on github pages
+ASSETS_BASE_PATH=""

.eslintrc.json

@@ -57,7 +57,8 @@
         "newlines-between": "never",
         "warnOnUnassignedImports": true
       }
-    ]
+    ],
+    "no-duplicate-imports": 1
   },
   "overrides": [
     {
@@ -79,5 +80,6 @@
         "project": "./tsconfig.json"
       }
     }
-  }
+  },
+  "env": {}
 }

.github/workflows/actions/build/action.yml

@@ -0,0 +1,21 @@
+name: "Build"
+description: "Build the project."
+
+inputs:
+  assets_path:
+    type: string
+    description: 'Path to load static assets'
+    required: false
+    default: ''
+
+runs:
+  using: "composite"
+  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 }}
+    ASSETS_BASE_PATH: /s
+  steps:
+    - name: Build
+      run: npm run build

.github/workflows/actions/install-dependencies/action.yml

@@ -0,0 +1,20 @@
+name: 'Install dependencies'
+description: 'Prepare repository and all dependencies'
+
+inputs:
+  node_version:
+    description: 'Node.js version'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Nodejs
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ inputs.node_version }}
+    - name: Install dependencies
+      shell: bash
+      run: |
+        npm pkg delete scripts.prepare
+        npm ci

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

@@ -0,0 +1,20 @@
+name: "Test"
+description: "Lint and test the project."
+
+runs:
+  using: "composite"
+  steps:
+    - name: Lint
+      run: |
+        npm run lint
+        npm run lint:editorconfig
+    - name: Prettier rules check
+      run: npm run prettier-check
+    - name: e2e
+      uses: cypress-io/github-action@v5
+      with:
+        build: npm run build
+        start: npm start
+        record: false
+    - name: Check seo
+      run: npm run check-seo

.github/workflows/build.yml

@@ -3,70 +3,27 @@ name: Build
 on:
   pull_request:
   workflow_dispatch:
-  workflow_call:
-    inputs:
-      public_path:
-        type: string
-        description: 'Inject public path'
-        required: false
-        default: ''
-      branch:
-        type: string
-        description: 'Branch to build'
-        required: true
-        default: 'master'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        version: [18, 20, 22]
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.inputs.branch }}
-
-      - name: Setup Nodejs
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-
+      - name: Clone repository
+        uses: actions/checkout@v4
       - name: Install dependencies
-        run: |
-          npm pkg delete scripts.prepare
-          npm ci
-
-      - name: Make envfile
-        uses: SpicyPizza/create-envfile@v2.0
+        uses: ./.github/actions/install-dependencies
         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: Lint
-        run: |
-          npm run lint
-          npm run lint:editorconfig
-
+          node_version: ${{ matrix.version }}
+      - name: Test
+        uses: ./.github/actions/test
       - name: Build
-        run: npm run build
-
-      - name: Check seo
-        run: npm run check-seo
+        uses: ./.github/actions/build
 
-      - name: e2e
-        uses: cypress-io/github-action@v5
-        with:
-          start: npm run start
-          record: false
-
-      - name: Upload build results
-        uses: actions/upload-artifact@v4
-        with:
-          name: build
-          path: out

.github/workflows/deploy.yml

@@ -12,42 +12,32 @@ permissions:
   id-token: write
 
 concurrency:
-  group: "pages"
-  cancel-in-progress: false
+  group: 'pages'
+  cancel-in-progress: true
 
 jobs:
-  build:
-    uses: ./.github/workflows/build.yml
-    with:
-      branch: ${{ github.event.head_commit.message }}
-      public_path: https://${{ github.repository_owner }}.github.io/${{ github.repository_name }}
-    secrets: inherit
-
   deploy:
     name: Deploy
-    needs: build
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Nodejs
-        uses: actions/setup-node@v3
+      - name: Clone repository
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/actions/install-dependencies
         with:
-          node-version: 18.x
-      - name: Download build results
-        uses: actions/download-artifact@v4
+          node_version: 18
+      - name: Build
+        uses: ./.github/actions/build
         with:
-          name: build
-          path: ./out
+          assets_path: 'assets'
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@3.6.2
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
-          GITHUB_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 }}
-
+          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 }}

.husky/pre-commit

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

.vscode/settings.json

@@ -19,5 +19,16 @@
   "editor.formatOnType": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  }
+  },
+  "json.schemas": [
+    {
+      "fileMatch": ["eslintrc.json"],
+      "url": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/eslintrc.json"
+    },
+    {
+      "fileMatch": ["prettierrc"],
+      "url": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/prettierrc-2.8.8.json"
+    }
+  ],
+  "json.schemaDownload.enable": true
 }

app/about/page.tsx

@@ -86,6 +86,7 @@ export default function About() {
         className={CATLinkCn}
         path="/contact"
         customTransition={{delay: 0.5}}
+        rel="noopener noreferrer"
       />
     </div>
   );

app/contact/page.tsx

@@ -5,6 +5,7 @@ import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
 import FormWrapper from '@/components/pages/Contact/FormWrapper/FormWrapper';
 import metadataBase from '../metadata';
+import {env} from '../env.mjs';
 
 export const metadata: Metadata = {
   title: 'Contact',
@@ -16,7 +17,7 @@ export const metadata: Metadata = {
 };
 
 const titleVariants = getTextSlideIntoViewVarinats('right');
-
+const {FORMSPREE_ID} = env;
 const containerCn = clsx('flex', 'flex-col', 'min-h-screen', 'w-full');
 const titleCn = clsx('text-8xl', 'mt-24', 'ml-4', 'text-center');
 
@@ -27,13 +28,14 @@ export default function Contact() {
   return (
     <div className={containerCn}>
       <AppearInViewport
+        as="h1"
         className={titleCn}
         variants={titleVariants}
         transition={{duration: TransitionDuration.LONG, type: 'spring', bounce: 0}}
       >
         CONTACT US
       </AppearInViewport>
-      <FormWrapper />
+      <FormWrapper formspreeId={FORMSPREE_ID} />
     </div>
   );
 }