From 7e3ceb56367eb8e62cc06d6babbe7497a3ab5389 Mon Sep 17 00:00:00 2001
From: Nick Foscarini <50146659+codemile@users.noreply.github.com>
Date: Sat, 1 Jun 2024 17:45:27 -0400
Subject: [PATCH] Fix/deploy-issues (#41)

* chore: Update installation and cache actions in GitHub workflows

* chore: Update installation and cache actions in GitHub workflows

* chore: Fix if condition in GitHub workflows to compare string values

* refactor: Optimize GameMusic component for better performance

The GameMusic component has been refactored to improve performance. Instead of rendering the GameAudio component conditionally within a fragment, it now directly returns the GameAudio component if the 'music' prop is truthy, and returns null otherwise. This change reduces unnecessary rendering and improves the efficiency of the component.

* chore: Remove deprecated code and environment variables

This commit removes deprecated code and environment variables that are no longer used in the application. The `.env`, `.env.local`, and `.env.production` files have been updated to remove the `NEXT_PUBLIC_BASE` and `NEXT_PUBLIC_ANALYTICS` variables. Additionally, the `inter` font import in the `layout.tsx` file has been removed, as it is no longer needed. The `useTitle` hook in the `useTitle.tsx` file has been marked as deprecated and a comment has been added to suggest using Next.js metadata instead. Finally, the `base` property in the `environment.ts` file has been removed, as it is no longer used.

* Update manifest.json path in index.html to fix broken link

* chore: Update font import in layout.tsx for better performance

This commit updates the font import in the layout.tsx file to improve performance. The deprecated 'inter' font import has been removed and replaced with a local font import using the 'next/font/local' package. This change reduces unnecessary network requests and improves the efficiency of the component.
---
 .env                                         |   2 --
 .env.local                                   |   1 -
 .env.production                              |   2 +-
 .github/actions/install/action.yml           |  19 +++++++++++
 .github/actions/next-cache/action.yml        |  13 ++++++++
 .github/workflows/build.yml                  |  33 ++++++++-----------
 .github/workflows/deploy.yml                 |  11 ++++---
 old/public/index.html                        |   2 +-
 {public/fonts => src/app}/Segment7-4Gml.otf  | Bin
 public/logo512.png => src/app/apple-icon.png | Bin
 {public => src/app}/favicon.ico              | Bin
 src/app/globals.css                          |  10 +++---
 public/logo192.png => src/app/icon.png       | Bin
 src/app/layout.tsx                           |  17 ++++++----
 {public => src/app}/manifest.json            |   4 +--
 {public => src/app}/robots.txt               |   0
 src/components/molecules/game/GameMusic.tsx  |  18 ++++------
 src/components/particles/audio.types.tsx     |  21 ++++++------
 src/components/particles/hooks/useTitle.tsx  |   3 ++
 src/environment/environment.ts               |  13 +-------
 tailwind.config.ts                           |   2 +-
 21 files changed, 92 insertions(+), 79 deletions(-)
 create mode 100644 .github/actions/install/action.yml
 create mode 100644 .github/actions/next-cache/action.yml
 rename {public/fonts => src/app}/Segment7-4Gml.otf (100%)
 rename public/logo512.png => src/app/apple-icon.png (100%)
 rename {public => src/app}/favicon.ico (100%)
 rename public/logo192.png => src/app/icon.png (100%)
 rename {public => src/app}/manifest.json (88%)
 rename {public => src/app}/robots.txt (100%)

diff --git a/.env b/.env
index b79058f..50cd003 100644
--- a/.env
+++ b/.env
@@ -1,6 +1,4 @@
 NEXT_PUBLIC_BRAND_NAME=Tetromino
 NEXT_PUBLIC_GITHUB=https://github.com/reactgular/tetromino
 NEXT_PUBLIC_STORAGE_KEY=tetromino
-# Base path for loading audio files
-NEXT_PUBLIC_BASE=/tetromino
 NEXT_PUBLIC_ANALYTICS=
diff --git a/.env.local b/.env.local
index 47a22fa..f3220f6 100644
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1 @@
-NEXT_PUBLIC_BASE=/
 NEXT_PUBLIC_ANALYTICS=
diff --git a/.env.production b/.env.production
index d25c161..6618bd2 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,2 @@
 # Please change to your Google Analytics ID
-NEXT_PUBLIC_ANALYTICS=UA-141015392-3
+NEXT_PUBLIC_ANALYTICS=
diff --git a/.github/actions/install/action.yml b/.github/actions/install/action.yml
new file mode 100644
index 0000000..4220036
--- /dev/null
+++ b/.github/actions/install/action.yml
@@ -0,0 +1,19 @@
+name: "📥 Install"
+description: "📥 Install dependencies"
+
+runs:
+  using: "composite"
+  steps:
+    - name: "💽 Restore node_modules cache"
+      uses: actions/cache@v4
+      id: cache-node-modules
+      with:
+        path: "node_modules"
+        key: ${{ runner.os }}-${{ runner.arch }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-${{ runner.arch }}-node-modules-
+
+    - name: "📥 Install dependencies"
+      if: ${{ steps.cache-node-modules.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: yarn install --frozen-lockfile
diff --git a/.github/actions/next-cache/action.yml b/.github/actions/next-cache/action.yml
new file mode 100644
index 0000000..9fe38c1
--- /dev/null
+++ b/.github/actions/next-cache/action.yml
@@ -0,0 +1,13 @@
+name: "📥 NestJS cache"
+description: "📥 Cache NestJS dependencies"
+
+runs:
+  using: "composite"
+  steps:
+    - name: "💽 Restore .next/cache cache"
+      uses: actions/cache@v4
+      with:
+        path: ${{ github.workspace }}/.next/cache
+        key: ${{ runner.os }}-${{ runner.arch }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+        restore-keys: |
+          ${{ runner.os }}-${{ runner.arch }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 48249e6..ac96126 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -31,9 +31,7 @@ jobs:
           cache: "yarn"
 
       - name: "📦 Install dependencies"
-        uses: reactgular/cache@v1
-        with:
-          mode: "install"
+        uses: ./.github/actions/install
 
   lint:
     runs-on: ubuntu-latest
@@ -48,10 +46,8 @@ jobs:
           node-version: "20"
           cache: "yarn"
 
-      - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@v1
-        with:
-          mode: "restore"
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
 
       - name: "🔨 Lint"
         run: yarn lint
@@ -70,10 +66,8 @@ jobs:
           node-version: "20"
           cache: "yarn"
 
-      - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@v1
-        with:
-          mode: "restore"
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
 
       - name: "🔨 Test"
         run: ${{ env.NX }} affected -t test
@@ -92,10 +86,8 @@ jobs:
           node-version: "20"
           cache: "yarn"
 
-      - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
-        with:
-          mode: "restore"
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
 
       - name: "🔨 Build storybooks"
         run: yarn build-storybook
@@ -103,7 +95,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     needs: [ install ]
-    if: ${{ github.event.inputs.testOnly == false }}
+    if: ${{ github.event.inputs.testOnly == 'false' }}
     steps:
       - name: "📥 Checkout code"
         uses: actions/checkout@v4
@@ -114,10 +106,11 @@ jobs:
           node-version: "20"
           cache: "yarn"
 
-      - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@v1
-        with:
-          mode: "restore"
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
+
+      - name: "💽 Restore .next/cache cache"
+        uses: ./.github/actions/next-cache
 
       - name: "🔨 Build"
         run: yarn build
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 9ab2e36..e07d210 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -36,10 +36,11 @@ jobs:
           node-version: "20"
           cache: "yarn"
 
-      - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@v1
-        with:
-          mode: "restore"
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
+
+      - name: "💽 Restore .next/cache cache"
+        uses: ./.github/actions/next-cache
 
       - name: "🔧 Setup Pages"
         uses: actions/configure-pages@v5
@@ -63,7 +64,7 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     needs: [ artifacts ]
-    if: ${{ github.event.inputs.skipDeploy == false }}
+    if: ${{ github.event.inputs.skipDeploy == 'false' }}
     steps:
       - name: "🚀 Deploy to GitHub Pages"
         id: deployment
diff --git a/old/public/index.html b/old/public/index.html
index 6183f24..86a6c92 100644
--- a/old/public/index.html
+++ b/old/public/index.html
@@ -14,7 +14,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/src/app/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/fonts/Segment7-4Gml.otf b/src/app/Segment7-4Gml.otf
similarity index 100%
rename from public/fonts/Segment7-4Gml.otf
rename to src/app/Segment7-4Gml.otf
diff --git a/public/logo512.png b/src/app/apple-icon.png
similarity index 100%
rename from public/logo512.png
rename to src/app/apple-icon.png
diff --git a/public/favicon.ico b/src/app/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
index e7a89fd..ec49cbd 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,11 +4,11 @@
 @tailwind screens;
 
 @layer base {
-    @font-face {
-        font-family: 'digits';
-        /** @todo: this will break on GitHub pages, but /tetrimino/ is the root */
-        src: url('/fonts/Segment7-4Gml.otf') format('opentype');
-    }
+    /*@font-face {*/
+    /*    font-family: 'digits';*/
+    /*    !** @todo: this will break on GitHub pages, but /tetrimino/ is the root *!*/
+    /*    src: url('/fonts/Segment7-4Gml.otf') format('opentype');*/
+    /*}*/
 
     html,
     body {
diff --git a/public/logo192.png b/src/app/icon.png
similarity index 100%
rename from public/logo192.png
rename to src/app/icon.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 84ef736..95d94df 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,22 +1,25 @@
 import type {Metadata} from 'next';
-import {Inter} from 'next/font/google';
 import './globals.css';
+import localFont from 'next/font/local';
+import {PropsWithChildren} from 'react';
+import {environment} from '../environment/environment';
 
-const inter = Inter({subsets: ['latin']});
+const segment = localFont({
+    src: './Segment7-4Gml.otf',
+    variable: '--font-segment'
+});
 
 export const metadata: Metadata = {
-    title: 'Create Next App',
+    title: `${environment.brandName}`,
     description: 'Generated by create next app'
 };
 
 export default function RootLayout({
     children
-}: Readonly<{
-    children: React.ReactNode;
-}>) {
+}: Readonly<PropsWithChildren>) {
     return (
         <html lang="en">
-        <body className={inter.className}>{children}</body>
+        <body className={segment.className}>{children}</body>
         </html>
     );
 }
diff --git a/public/manifest.json b/src/app/manifest.json
similarity index 88%
rename from public/manifest.json
rename to src/app/manifest.json
index 729e2a9..ba85289 100644
--- a/public/manifest.json
+++ b/src/app/manifest.json
@@ -8,12 +8,12 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "icon.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "apple-icon.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/public/robots.txt b/src/app/robots.txt
similarity index 100%
rename from public/robots.txt
rename to src/app/robots.txt
diff --git a/src/components/molecules/game/GameMusic.tsx b/src/components/molecules/game/GameMusic.tsx
index 1c3bafa..c33b5ca 100644
--- a/src/components/molecules/game/GameMusic.tsx
+++ b/src/components/molecules/game/GameMusic.tsx
@@ -8,15 +8,11 @@ export const GameMusic: FC = () => {
     const music = useSelector(AppSelectors.music);
     const musicVolume = useSelector(AppSelectors.musicVolume);
     const musicType = useSelector(AppSelectors.musicType);
-    return (
-        <>
-            {music && (
-                <GameAudio
-                    src={AUDIO_FILES[musicType]}
-                    volume={musicVolume / 100}
-                    loop={true}
-                />
-            )}
-        </>
-    );
+    return music ? (
+        <GameAudio
+            src={AUDIO_FILES[musicType]}
+            volume={musicVolume / 100}
+            loop={true}
+        />
+    ) : null;
 };
diff --git a/src/components/particles/audio.types.tsx b/src/components/particles/audio.types.tsx
index 6eb954e..d474a5c 100644
--- a/src/components/particles/audio.types.tsx
+++ b/src/components/particles/audio.types.tsx
@@ -1,21 +1,20 @@
 import {ReactElement} from 'react';
 import {FaMusic, FaVolumeMute, FaVolumeUp} from 'react-icons/fa';
-import {environment} from '../../environment/environment';
 import {UiOption} from './ui/UiSelect';
 
 export const AUDIO_FILES = [
-    `${environment.base}audio/music/bonkers-for-arcades.mp3`,
-    `${environment.base}audio/music/the-ice-cream-man.mp3`,
-    `${environment.base}audio/music/8-bit-perplexion.mp3`,
-    `${environment.base}audio/music/its-raining-pixels.mp3`,
-    `${environment.base}audio/music/arcade-puzzler.mp3`
+    'audio/music/bonkers-for-arcades.mp3',
+    'audio/music/the-ice-cream-man.mp3',
+    'audio/music/8-bit-perplexion.mp3',
+    'audio/music/its-raining-pixels.mp3',
+    'audio/music/arcade-puzzler.mp3'
 ];
 
-export const SOUND_FINISHED = `${environment.base}audio/sounds/power-down-13.mp3`;
-export const SOUND_LEVEL = `${environment.base}audio/sounds/retro-chip-power.mp3`;
-export const SOUND_SCORE = `${environment.base}audio/sounds/ui-quirky-19.mp3`;
-export const SOUND_DROP = `${environment.base}audio/sounds/zapsplat_bambo_swoosh.mp3`;
-export const SOUND_LEVEL_10 = `${environment.base}audio/sounds/zapsplat_level_up.mp3`;
+export const SOUND_FINISHED = 'audio/sounds/power-down-13.mp3';
+export const SOUND_LEVEL = 'audio/sounds/retro-chip-power.mp3';
+export const SOUND_SCORE = 'audio/sounds/ui-quirky-19.mp3';
+export const SOUND_DROP = 'audio/sounds/zapsplat_bambo_swoosh.mp3';
+export const SOUND_LEVEL_10 = 'audio/sounds/zapsplat_level_up.mp3';
 
 export const PRELOAD_AUDIO = [
     SOUND_FINISHED,
diff --git a/src/components/particles/hooks/useTitle.tsx b/src/components/particles/hooks/useTitle.tsx
index f0e9e55..a21e91d 100644
--- a/src/components/particles/hooks/useTitle.tsx
+++ b/src/components/particles/hooks/useTitle.tsx
@@ -13,6 +13,9 @@ const STATUS_TITLE = {
     [GameStatus.FINISHED]: 'Game Over'
 };
 
+/**
+ * @deprecated use NextJs metadata instead
+ */
 export const useTitle = () => {
     const status = useSelector(GameSelectors.status);
     const title = useMemo(
diff --git a/src/environment/environment.ts b/src/environment/environment.ts
index 94b5230..b8f89a4 100644
--- a/src/environment/environment.ts
+++ b/src/environment/environment.ts
@@ -1,27 +1,16 @@
-const endsInSlash = (str: string): string => str.endsWith('/') ? str : `${str}/`;
-
 export interface Environment {
     analytics: string;
 
-    base: string;
-
     brandName: string;
 
     github: string;
 
     storageKey: string;
-
-    /**
-     * @deprecated
-     */
-    version: string;
 }
 
 export const environment: Environment = {
     analytics: process.env.NEXT_PUBLIC_ANALYTICS as string,
     brandName: process.env.NEXT_PUBLIC_BRAND_NAME as string,
     github: process.env.NEXT_PUBLIC_GITHUB as string,
-    storageKey: process.env.NEXT_PUBLIC_STORAGE_KEY as string,
-    version: process.env.NEXT_PUBLIC_VERSION as string,
-    base: endsInSlash(process.env.NEXT_PUBLIC_BASE as string ?? '/')
+    storageKey: process.env.NEXT_PUBLIC_STORAGE_KEY as string
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7ec12fd..1f82000 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -33,7 +33,7 @@ const config: Config = {
                     'monospace'
                 ],
                 logo: ['"Black Ops One"', 'cursive'],
-                digits: ['digits']
+                digits: ['var(--font-segment)']
             },
             gridTemplateColumns: {
                 desktop: '7rem 20rem 7rem',