chore(ci): add new Github action for build Docker images

.dockerignore

@@ -1,3 +1,3 @@
 node_modules
 npm-debug.log
-build
+# build

.github/workflows/build-push-docker.yml

@@ -0,0 +1,99 @@
+name: Build and push Docker images on hub
+
+on:
+  push:
+    branches:
+      - "github-action-docker-build"
+
+env:
+  REGISTRY_IMAGE: spout8301/holoplay
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        platform:
+          - linux/amd64
+          - linux/arm/v7
+          - linux/arm64
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # arm/v7 request an timeout error on npm install.
+      # Setup Node.js and build the project from outside Docker container.
+      # HoloPlay is an client only app, so we don't need to build it for other platforms.
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: npm i
+      - run: npm run build
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY_IMAGE }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,name=${{ env.REGISTRY_IMAGE }},push-by-digest=true,name-canonical=true,push=true
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+      - name: Upload digest
+        uses: actions/upload-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY_IMAGE }}
+      - name: get-npm-version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@v1.3.1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+          $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.package-version.outputs.current-version }}

Dockerfile

@@ -1,17 +1,8 @@
-FROM --platform=linux/amd64 node:20-alpine as build
+FROM nginx:stable-alpine
 
-WORKDIR /app
-
-COPY package.json .
-COPY package-lock.json .
-
-RUN npm i
-
-COPY . .
-
-RUN npm run build
-RUN npm i -g serve
+COPY ./build /usr/share/nginx/html
+COPY ./docker/nginx/nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 3000
 
-CMD ["serve", "/app/build"]
+CMD ["nginx", "-g", "daemon off;"]

docker/nginx/nginx.conf

@@ -0,0 +1,17 @@
+server {# Compression config
+    gzip on;
+    gzip_min_length 1000;
+    gzip_buffers 4 32k;
+    gzip_proxied any;
+    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
+    gzip_vary on;
+    gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+
+    listen 3000;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html =404;
+    }
+}

src/components/Card.tsx

@@ -28,7 +28,6 @@ import {
 } from "../providers/Player";
 import { useTranslation } from "react-i18next";
 import { CardImage } from "./CardImage";
-import { useColorScheme } from "@mantine/hooks";
 
 const useStyles = createStyles((theme) => ({
   card: {