Try a fix. [skip CI]

4 files changed, 50 insertions, 15 deletions

diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index 4e79a61..c67c7da 100644
--- a/.github/workflows/static.yml
+++ b/.github/workflows/static.yml
@@ -6,20 +6,16 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
   group: "pages"
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
   deploy:
     environment:
       name: github-pages
diff --git a/doc/docs/.vitepress/config.mts b/doc/docs/.vitepress/config.mts
index b458501..635d087 100644
--- a/doc/docs/.vitepress/config.mts
+++ b/doc/docs/.vitepress/config.mts
@@ -21,6 +21,15 @@ const yuescriptLanguage = {
   aliases: ["yue"],
 };
 
+const docsBase = process.env.DOCS_BASE ?? "/";
+
+function withBase(path: string) {
+  if (!path.startsWith("/") || docsBase === "/") {
+    return path;
+  }
+  return `${docsBase.replace(/\/$/, "")}${path}`;
+}
+
 const sidebarText = {
   de: {
     introduction: "Einführung",
@@ -415,7 +424,7 @@ function createSidebar(basePath: string, locale: SidebarLocale) {
 export default defineConfig({
   title: "YueScript",
   description: "A language that compiles to Lua",
-  base: "/",
+  base: docsBase,
   head: [
     ["meta", { name: "theme-color", content: "#b4ac8f" }],
     ["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
@@ -432,10 +441,13 @@ export default defineConfig({
       },
     ],
     ["meta", { property: "og:type", content: "website" }],
-    ["meta", { property: "og:image", content: "/image/yuescript.png" }],
+    ["meta", { property: "og:image", content: withBase("/image/yuescript.png") }],
     [
       "meta",
-      { property: "og:image:secure_url", content: "/image/yuescript.png" },
+      {
+        property: "og:image:secure_url",
+        content: withBase("/image/yuescript.png"),
+      },
     ],
     ["meta", { property: "og:image:type", content: "image/png" }],
     ["meta", { property: "og:image:width", content: "1200" }],
@@ -444,7 +456,7 @@ export default defineConfig({
       "link",
       {
         rel: "icon",
-        href: "/image/favicon/favicon-16x16.png",
+        href: withBase("/image/favicon/favicon-16x16.png"),
         sizes: "16x16",
         type: "image/png",
       },
@@ -453,7 +465,7 @@ export default defineConfig({
       "link",
       {
         rel: "icon",
-        href: "/image/favicon/favicon-32x32.png",
+        href: withBase("/image/favicon/favicon-32x32.png"),
         sizes: "32x32",
         type: "image/png",
       },
@@ -462,7 +474,7 @@ export default defineConfig({
       "link",
       {
         rel: "apple-touch-icon",
-        href: "/image/favicon/apple-touch-icon.png",
+        href: withBase("/image/favicon/apple-touch-icon.png"),
         sizes: "180x180",
         type: "image/png",
       },
@@ -471,7 +483,7 @@ export default defineConfig({
       "link",
       {
         rel: "android-chrome",
-        href: "/image/favicon/android-chrome-192x192.png",
+        href: withBase("/image/favicon/android-chrome-192x192.png"),
         sizes: "192x192",
         type: "image/png",
       },
@@ -480,7 +492,7 @@ export default defineConfig({
       "link",
       {
         rel: "android-chrome",
-        href: "/image/favicon/android-chrome-512x512.png",
+        href: withBase("/image/favicon/android-chrome-512x512.png"),
         sizes: "512x512",
         type: "image/png",
       },
@@ -505,7 +517,7 @@ export default defineConfig({
     window.dispatchEvent(new Event('yue:ready'));
   }
   var s = document.createElement('script');
-  s.src = '/js/yuescript.js';
+  s.src = '${withBase("/js/yuescript.js")}';
   s.async = true;
   document.head.appendChild(s);
 })();`,
diff --git a/doc/docs/.vitepress/theme/index.ts b/doc/docs/.vitepress/theme/index.ts
index 70145d5..7e9882e 100644
--- a/doc/docs/.vitepress/theme/index.ts
+++ b/doc/docs/.vitepress/theme/index.ts
@@ -12,6 +12,19 @@ import YueCompiler from "./components/YueCompiler.vue";
 // @ts-ignore
 import YueDisplay from "./components/YueDisplay.vue";
 
+function applyShikiInlineColorFallback() {
+  if (typeof document === "undefined") return;
+  const isDark = document.documentElement.classList.contains("dark");
+  const varName = isDark ? "--shiki-dark" : "--shiki-light";
+  const spans = document.querySelectorAll<HTMLElement>(".vp-code span");
+  spans.forEach((span) => {
+    const color = span.style.getPropertyValue(varName).trim();
+    if (color) {
+      span.style.color = color;
+    }
+  });
+}
+
 const theme: Theme = {
   extends: DefaultTheme,
   Layout: () =>
@@ -22,6 +35,18 @@ const theme: Theme = {
     app.component("CompilerModal", CompilerModal);
     app.component("YueCompiler", YueCompiler);
     app.component("YueDisplay", YueDisplay);
+
+    if (typeof window !== "undefined") {
+      const run = () => requestAnimationFrame(applyShikiInlineColorFallback);
+      window.addEventListener("DOMContentLoaded", run, { once: true });
+      window.addEventListener("load", run, { once: true });
+
+      const observer = new MutationObserver(run);
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"],
+      });
+    }
   },
 };
 
diff --git a/doc/scripts/fix-css-link-rel.mjs b/doc/scripts/fix-css-link-rel.mjs
index 9cbc9ea..4c48868 100644
--- a/doc/scripts/fix-css-link-rel.mjs
+++ b/doc/scripts/fix-css-link-rel.mjs
@@ -2,7 +2,8 @@ import { readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 
 const distRoot = "docs/.vitepress/dist";
-const cssRelPattern = /rel="preload stylesheet"/g;
+const preloadStylesheetRelPattern = /rel="preload stylesheet"/g;
+const stylesheetAsPattern = /(<link[^>]*rel="stylesheet"[^>]*?)\s+as="style"/g;
 
 function walk(dir, files = []) {
   for (const entry of readdirSync(dir)) {
@@ -20,7 +21,8 @@ function walk(dir, files = []) {
 let updated = 0;
 for (const filePath of walk(distRoot)) {
   const original = readFileSync(filePath, "utf8");
-  const fixed = original.replace(cssRelPattern, 'rel="stylesheet"');
+  let fixed = original.replace(preloadStylesheetRelPattern, 'rel="stylesheet"');
+  fixed = fixed.replace(stylesheetAsPattern, "$1");
   if (fixed !== original) {
     writeFileSync(filePath, fixed, "utf8");
     updated += 1;