fix: auto-version css/js assets to prevent stale cache issues

KristjanESPERANTO · KristjanESPERANTO · commit 295da9bf4cd4 · 2026-06-26T21:53:28.000+02:00
diff --git a/.github/workflows/container-build.yaml b/.github/workflows/container-build.yaml
@@ -55,6 +55,7 @@ jobs:
         run: mkdir -p website/data/cache
       - name: Build container
         run: |
+          VERSION="${GITHUB_SHA::12}"
           RUN_KIND="${{ github.event_name }}"
           case "$RUN_KIND" in
             workflow_dispatch|schedule)
@@ -77,6 +78,7 @@ jobs:
             --local context=. \
             --local dockerfile=container \
             --opt build-arg:GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} \
+            --opt build-arg:ASSET_VERSION="$VERSION" \
             $PARAMS \
             --output type=local,dest=build-output
           # The local exporter writes the final image filesystem; our website
diff --git a/container/Dockerfile b/container/Dockerfile
@@ -4,7 +4,7 @@ WORKDIR /workspace
 
 COPY . .
 
-ARG GITHUB_TOKEN WIKI_FILE
+ARG GITHUB_TOKEN WIKI_FILE ASSET_VERSION
 
 RUN <<EOF
 set -e
@@ -13,6 +13,11 @@ git log -1
 export GITHUB_TOKEN="${GITHUB_TOKEN}"
 npm clean-install
 node --run all
+
+# Replace cache-busting placeholder with the current commit SHA for deployed assets.
+ASSET_VERSION="${ASSET_VERSION:-dev}"
+find website -type f \( -name "*.html" -o -name "*.js" -o -name "*.css" \) \
+	-exec sed -i "s/__ASSET_VERSION__/${ASSET_VERSION}/g" {} +
 EOF
 
 FROM nginxinc/nginx-unprivileged:alpine-slim
diff --git a/website/card.js b/website/card.js
@@ -1,4 +1,4 @@
-import { openHintsDialog } from "./hints-dialog.js";
+import { openHintsDialog } from "./hints-dialog.js?v=__ASSET_VERSION__";
 
 const cardTemplate = document.getElementById("card-template");
 
diff --git a/website/index.html b/website/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MagicMirror² 3rd Party Modules</title>
     <link rel="icon" type="image/x-icon" href="favicon.svg" />
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="index.css?v=__ASSET_VERSION__" />
     <link
       rel="stylesheet"
       href="fonts/line-awesome-1.3.0/css/line-awesome.min.css"
@@ -196,6 +196,6 @@ <h3 id="hints-dialog-title"></h3>
       </div>
     </dialog>
 
-    <script src="script.js" type="module"></script>
+    <script src="script.js?v=__ASSET_VERSION__" type="module"></script>
   </body>
 </html>
diff --git a/website/result.html b/website/result.html
@@ -3,7 +3,7 @@
   <head>
     <title>Result of the module analysis</title>
     <link rel="icon" type="image/x-icon" href="favicon.svg" />
-    <link rel="stylesheet" href="result.css" />
+    <link rel="stylesheet" href="result.css?v=__ASSET_VERSION__" />
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   </head>
   <body>
diff --git a/website/script.js b/website/script.js
@@ -1,4 +1,4 @@
-import { createCard } from "./card.js";
+import { createCard } from "./card.js?v=__ASSET_VERSION__";
 
 let allModules = [];
 let skippedModules = [];

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { openHintsDialog } from "./hints-dialog.js";`
	`1`	`+import { openHintsDialog } from "./hints-dialog.js?v=__ASSET_VERSION__";`
`2`	`2`
`3`	`3`	`const cardTemplate = document.getElementById("card-template");`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { createCard } from "./card.js";`
	`1`	`+import { createCard } from "./card.js?v=__ASSET_VERSION__";`
`2`	`2`
`3`	`3`	`let allModules = [];`
`4`	`4`	`let skippedModules = [];`