chore: update built frontend (#31)

Author: yejiyang

.github/workflows/frontend-image.yml

@@ -17,6 +17,19 @@ jobs:
       - uses: actions/checkout@v4
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+      - name: Bump frontend version
+        run: |
+          cd frontend
+          npm ci
+          npm version patch --no-git-tag-version
+          echo "VERSION=$(node -p 'require(\"./package.json\").version')" >> $GITHUB_ENV
+          cd ..
+      - name: Commit version bump
+        run: |
+          git config user.name "GitHub Actions"
+          git config user.email "actions@github.com"
+          git add frontend/package.json
+          git commit -m "chore: bump frontend version to $VERSION" && git push || echo "No changes to commit"
       - name: Log in to GHCR
         uses: docker/login-action@v3
         with:
@@ -30,5 +43,5 @@ jobs:
           push: true
           tags: |
             ghcr.io/${{ github.repository_owner }}/global-tsunami-risk-map-frontend:latest
-            ghcr.io/${{ github.repository_owner }}/global-tsunami-risk-map-frontend:${{ github.sha }}
+            ghcr.io/${{ github.repository_owner }}/global-tsunami-risk-map-frontend:${{ env.VERSION }}
 

frontend/build.js

@@ -0,0 +1,20 @@
+const fs = require("fs");
+const path = require("path");
+const pkg = require("./package.json");
+
+// prepare dist directories
+fs.mkdirSync(path.join(__dirname, "dist", "js"), { recursive: true });
+
+// Read and process HTML
+const srcHtmlPath = path.join(__dirname, "src", "index.html");
+let html = fs.readFileSync(srcHtmlPath, "utf8");
+html = html.replace("{{VERSION}}", pkg.version);
+const distHtmlPath = path.join(__dirname, "dist", "index.html");
+fs.writeFileSync(distHtmlPath, html);
+
+// Copy JS files
+const srcJsDir = path.join(__dirname, "src", "js");
+const distJsDir = path.join(__dirname, "dist", "js");
+fs.readdirSync(srcJsDir).forEach((file) => {
+  fs.copyFileSync(path.join(srcJsDir, file), path.join(distJsDir, file));
+});

frontend/bump_version.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+set -e
+npm version patch --no-git-tag-version

frontend/dist/index.html

@@ -139,5 +139,18 @@
         // addNorwayHazardTiles(map);
       });
     </script>
+    <div
+      id="version"
+      style="
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 4px;
+        font-size: 12px;
+      "
+    >
+      Version: 1.0.0
+    </div>
   </body>
 </html>

frontend/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "format": "prettier --write \"src/**/*.{js,html,css}\"",
-    "build": "mkdir -p dist && cp src/index.html dist/index.html && mkdir -p dist/js && cp src/js/*.js dist/js/"
+    "build": "node build.js"
   },
   "keywords": [],
   "author": "",

frontend/src/index.html

@@ -139,5 +139,18 @@
         // addNorwayHazardTiles(map);
       });
     </script>
+    <div
+      id="version"
+      style="
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 4px;
+        font-size: 12px;
+      "
+    >
+      Version: {{VERSION}}
+    </div>
   </body>
 </html>