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

@@ -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=

.env.local

@@ -1,2 +1 @@
-NEXT_PUBLIC_BASE=/
 NEXT_PUBLIC_ANALYTICS=

.env.production

@@ -1,2 +1,2 @@
 # Please change to your Google Analytics ID
-NEXT_PUBLIC_ANALYTICS=UA-141015392-3
+NEXT_PUBLIC_ANALYTICS=

.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

.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') }}-

.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,18 +86,16 @@ 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
 
   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

.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

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.

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 {

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>
     );
 }

public/manifest.json → 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"
     }

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;
 };

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,

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(

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
 };

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',