From 2d4c9e3f38964b97f103aeee5d150c9fdd9463fa Mon Sep 17 00:00:00 2001
From: nanxingw <nanxingw@users.noreply.github.com>
Date: Mon, 27 Apr 2026 17:00:24 +0800
Subject: [PATCH] fix(wiki): prefix gacha iframe src with Astro base path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Knowledge Atlas Draw button opens a modal that loads the picked
card via an <iframe>. The src was hardcoded as
`/card-fragment/<lang>/<kind>/<slug>`, missing the Astro `base` prefix.

Locally (base="") it worked. On GitHub Pages, where the site lives
under `/advanced-agentic-dev-patterns/`, the iframe requested
`/card-fragment/...` against the domain root, so Pages served its
default "There isn't a GitHub Pages site here." 404 inside the modal —
which is exactly what issue #14's screenshot shows.

Fix: pass BASE through `.gacha[data-base]` (mirroring the existing
`data-lang` channel for client-side script) and prepend it when
building the iframe src. Build verified: with SITE_BASE set, the
emitted HTML carries `data-base="/advanced-agentic-dev-patterns"`,
and a preview server confirms the prefixed URL returns 200 while the
old prefix-less URL still 404s.

Closes #14

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 site/src/components/WikiAtlas.astro | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/site/src/components/WikiAtlas.astro b/site/src/components/WikiAtlas.astro
index 4e0a74a..7e540a3 100644
--- a/site/src/components/WikiAtlas.astro
+++ b/site/src/components/WikiAtlas.astro
@@ -16,7 +16,7 @@
  */
 
 import type { Locale } from "~/i18n/strings";
-import { wikiEntry } from "~/lib/urls";
+import { BASE, wikiEntry } from "~/lib/urls";
 import manifest from "~/content/wiki/_manifest.json";
 import { getCollection } from "astro:content";
 import OneShotCard from "~/components/card/OneShotCard.astro";
@@ -167,7 +167,7 @@ const cardEntries = [...byKind.concepts, ...byKind.entities].sort((a, b) => a.sl
   </section>
 
   {/* ── Gacha overlay (hidden until 抽卡 clicked) ───────────────── */}
-  <div class="gacha" role="dialog" aria-modal="true" hidden data-lang={locale}>
+  <div class="gacha" role="dialog" aria-modal="true" hidden data-lang={locale} data-base={BASE}>
     <button class="gacha__backdrop" aria-label={locale === "zh" ? "关闭" : "close"}></button>
     <div class="gacha__card">
       <iframe class="gacha__frame" title={locale === "zh" ? "卡片" : "card"} src="about:blank"></iframe>
@@ -257,6 +257,11 @@ const cardEntries = [...byKind.concepts, ...byKind.entities].sort((a, b) => a.sl
     const gachaAgain = gacha.querySelector<HTMLButtonElement>(".gacha__again")!;
     const gachaBackdrop = gacha.querySelector<HTMLElement>(".gacha__backdrop")!;
     const lang = gacha.dataset.lang ?? "zh";
+    // Astro `base` (e.g. "/advanced-agentic-dev-patterns" on GitHub Pages,
+    // "" on local dev). Without this prefix the iframe would request
+    // `/card-fragment/...` against the domain root and Pages would serve
+    // its default 404 page inside the modal.
+    const base = gacha.dataset.base ?? "";
 
     function syncFrameTheme() {
       if (!gachaFrame.contentDocument) return;
@@ -273,7 +278,7 @@ const cardEntries = [...byKind.concepts, ...byKind.entities].sort((a, b) => a.sl
       const pick = candidates[Math.floor(Math.random() * candidates.length)];
       gachaCard.dataset.kind = pick.kind;
       gachaGo.href = pick.href;
-      const nextSrc = `/card-fragment/${lang}/${pick.kind}/${pick.slug}`;
+      const nextSrc = `${base}/card-fragment/${lang}/${pick.kind}/${pick.slug}`;
       gachaFrame.src = nextSrc;
       gachaFrame.addEventListener("load", syncFrameTheme, { once: true });
       gachaCard.classList.remove("is-flipping");