trigger Lighthouse CI via workflow_dispatch

LEO0331 · LEO0331 · commit 34eab2884076 · 2026-04-23T16:08:07.000+08:00
diff --git a/.github/workflows/lighthouse-dashboard.yml b/.github/workflows/lighthouse-dashboard.yml
@@ -0,0 +1,54 @@
+name: Lighthouse Dashboard
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build static site
+        run: npm run web:build
+
+      - name: Run Lighthouse CI
+        id: lighthouse
+        uses: treosh/lighthouse-ci-action@v12
+        with:
+          configPath: ./.lighthouserc.json
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+
+      - name: Publish dashboard links
+        env:
+          LINKS_JSON: ${{ steps.lighthouse.outputs.links }}
+        run: |
+          node -e '
+          const links = JSON.parse(process.env.LINKS_JSON || "[]");
+          const lines = ["## Lighthouse Temporary Dashboard", ""];
+          if (links.length === 0) {
+            lines.push("No public links were produced by Lighthouse CI.");
+          } else {
+            for (const link of links) {
+              lines.push(`- ${link}`);
+            }
+          }
+          require("node:fs").appendFileSync(process.env.GITHUB_STEP_SUMMARY, `${lines.join("\n")}\n`);
+          '
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 /test-results
 /playwright-report
 /coverage
+.omx
diff --git a/.lighthouserc.json b/.lighthouserc.json
@@ -0,0 +1,20 @@
+{
+  "ci": {
+    "collect": {
+      "staticDistDir": "./dist",
+      "url": ["http://localhost:8080/"],
+      "numberOfRuns": 3
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["warn", { "minScore": 0.9 }],
+        "categories:accessibility": ["warn", { "minScore": 0.9 }],
+        "categories:best-practices": ["warn", { "minScore": 0.9 }],
+        "categories:seo": ["warn", { "minScore": 0.9 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}
diff --git a/index.html b/index.html
@@ -3,7 +3,32 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Interactive Toy Robot simulator with command presets, script mode, and live board updates."
+    />
+    <meta name="theme-color" content="#08122e" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=Bungee:wght@400&family=DM+Sans:wght@400;500;700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Bungee:wght@400&family=DM+Sans:wght@400;500;700&display=swap"
+      media="print"
+      onload="this.media='all'"
+    />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Bungee:wght@400&family=DM+Sans:wght@400;500;700&display=swap"
+      />
+    </noscript>
     <title>Toy Robot Game</title>
+    <link rel="preload" href="./web/styles.css" as="style" />
     <link rel="stylesheet" href="./web/styles.css" />
   </head>
   <body>
diff --git a/scripts/serve-static.js b/scripts/serve-static.js
@@ -58,7 +58,12 @@ function resolveFilePath(rootDir, requestUrl = "/") {
 function sendFile(filePath, requestMethod, response) {
   const ext = path.extname(filePath).toLowerCase();
   const contentType = mimeType[ext] || "application/octet-stream";
-  setHeaders(response, 200, { "Content-Type": contentType });
+  const cacheControl =
+    ext === ".html" ? "no-cache" : "public, max-age=31536000, immutable";
+  setHeaders(response, 200, {
+    "Content-Type": contentType,
+    "Cache-Control": cacheControl,
+  });
 
   if (requestMethod === "HEAD") {
     response.end();
diff --git a/web/styles.css b/web/styles.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Bungee:wght@400&family=DM+Sans:wght@400;500;700&display=swap");
-
 :root {
   --bg: #08122e;
   --bg-alt: #0f214f;
@@ -75,6 +73,8 @@ body::after {
   transform: translateY(18px) scale(0.98);
   opacity: 0;
   animation: reveal-panel 620ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
+  content-visibility: auto;
+  contain-intrinsic-size: 420px;
 }
 
 .panel:nth-child(1) {
@@ -338,6 +338,18 @@ button:active {
   transform: translateY(-2px);
 }
 
+.cell:has(.robot) {
+  background:
+    linear-gradient(170deg, #fff, #eef6ff),
+    repeating-linear-gradient(
+      45deg,
+      rgba(24, 56, 120, 0.03),
+      rgba(24, 56, 120, 0.03) 5px,
+      transparent 5px,
+      transparent 10px
+    );
+}
+
 .coord {
   font-size: 0.7rem;
   color: #5e739c;
@@ -443,3 +455,18 @@ button:active {
     grid-template-columns: repeat(2, minmax(90px, 1fr));
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel,
+  .robot,
+  .cell,
+  button,
+  .latest-status,
+  input,
+  textarea,
+  select {
+    animation: none !important;
+    transition: none !important;
+    transform: none !important;
+  }
+}
