fix: site base from Astro config and horizontal Bopomofo in UX

Read href/img base from astro.config for snapshots; rebase snapshot
HTML to import.meta.env.BASE_URL at serve time. Map vertical 丨 to ㄧ
in legacyPlainText (volume ranges, rails). Remove volume hub split
notice; add site-base tests.

Author: audreyt

lib/site/legacy-text.ts

@@ -1,5 +1,6 @@
 import { stripPe2Tags, wrapKaiFont } from "../dic/pe2-text.ts";
 import { jadeUnescapeLine, loadFontMaps } from "../dic/unescape.ts";
+import { normalizeSiteBase } from "./site-base.ts";
 
 const fontMaps = loadFontMaps(process.cwd());
 const ASTRAL_PUA = /[\u{f0000}-\u{fffff}]/gu;
@@ -10,12 +11,17 @@ function stripKaiTagFragments(text: string): string {
   return text.replace(RAW_K_TAG, "").replace(STRAY_K_BEFORE_CJK, "$1");
 }
 
-/** Site-root absolute paths for k/m3 glyph PNGs (section pages are nested under /NN/M/). */
-export function absolutizeDictionaryImgSrc(html: string, base = "/koktai/"): string {
-  const b = base.endsWith("/") ? base : `${base}/`;
+/** Site-root paths for k/m3 glyph PNGs (nested section pages need a base prefix). */
+export function absolutizeDictionaryImgSrc(html: string, base: string): string {
+  const b = normalizeSiteBase(base);
   return html.replace(/src=(["'])img\/(k|m3)\//g, `src=$1${b}img/$2/`);
 }
 
+/** UX: show horizontal Bopomofo (ㄧ), not vertical stroke forms (丨) from legacy data. */
+export function horizontalBopomofo(text: string): string {
+  return text.replaceAll("丨", "ㄧ").replaceAll("ㆳ", "ㆪ");
+}
+
 
 function puaCode(ch: string): string {
   return (ch.codePointAt(0)! - 0xf0000).toString(16).padStart(4, "0");
@@ -35,10 +41,11 @@ export function legacyPlainText(text: string): string {
     out = out.replace(ASTRAL_PUA, plainPua);
   }
   ASTRAL_PUA.lastIndex = 0;
-  return stripKaiTagFragments(out.replace(ASTRAL_PUA, "□"));
+  out = stripKaiTagFragments(out.replace(ASTRAL_PUA, "□"));
+  return horizontalBopomofo(out);
 }
 
-export function renderLegacyText(text: string, assetBase = "/koktai/"): string {
+export function renderLegacyText(text: string, assetBase: string): string {
   const raw = stripKaiTagFragments(jadeUnescapeLine(stripPe2Tags(wrapKaiFont(text)), fontMaps, true));
   return absolutizeDictionaryImgSrc(raw, assetBase);
 }

lib/site/search-data.ts

@@ -2,6 +2,7 @@ import { legacyPlainText, renderLegacyText } from "./legacy-text.ts";
 import type { Reading, SinogramEntry, Token, WordRecord } from "../extract/types.ts";
 import { VOLUME_IDS } from "../dic/pipeline.ts";
 import type { Corpus } from "./corpus.ts";
+import { readAstroBaseFromConfig } from "./site-base.ts";
 
 
 export type SuggestRow = [t: string, z: string, v: string, l: number, k: 0 | 1, s: number, h?: string];
@@ -33,7 +34,7 @@ export function stripHeadwordMarkup(t: string): string {
 function headwordFields(raw: string): { text: string; html?: string } {
   const stripped = stripHeadwordMarkup(raw);
   const text = legacyPlainText(stripped);
-  const html = renderLegacyText(stripped);
+  const html = renderLegacyText(stripped, readAstroBaseFromConfig(process.cwd()));
   return html.includes("<img") ? { text, html } : { text };
 }
 

lib/site/site-base.ts

@@ -0,0 +1,32 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+/** Trailing slash, for concatenating `base + "01/3/index.html"`. */
+export function normalizeSiteBase(base: string): string {
+  if (!base || base === "/") return "/";
+  return base.endsWith("/") ? base : `${base}/`;
+}
+
+/** Read `base` from `astro.config.mjs` (build-time / snapshot scripts). */
+export function readAstroBaseFromConfig(root: string): string {
+  const raw = readFileSync(join(root, "astro.config.mjs"), "utf8");
+  const m = raw.match(/base:\s*["']([^"']*)["']/);
+  const configured = m?.[1] ?? "/";
+  return normalizeSiteBase(configured === "" ? "/" : configured.startsWith("/") ? configured : `/${configured}`);
+}
+
+/**
+ * Rebase dictionary snapshot markup to the active site prefix (Astro `import.meta.env.BASE_URL`).
+ * Snapshots may have been generated with a different configured base.
+ */
+export function rebaseDictionarySnapshotHtml(html: string, targetBase: string): string {
+  const b = normalizeSiteBase(targetBase);
+  let out = html;
+  out = out.replace(/href="\/koktai\//g, `href="${b}`);
+  out = out.replace(/src="\/koktai\/img\//g, `src="${b}img/`);
+  if (b !== "/") {
+    out = out.replace(/href="\/(0[1-9]|1[0-9]|2[0-6])\//g, `href="${b}$1/`);
+    out = out.replace(/href="\/(0[1-9]|1[0-9]|2[0-6])\/index\.html/g, `href="${b}$1/index.html`);
+  }
+  return out;
+}

lib/site/volume-rail.ts

@@ -1,4 +1,5 @@
 import { getVolumeData } from "../compile-pug.ts";
+import { horizontalBopomofo } from "./legacy-text.ts";
 import type { SectionInfo } from "../compile-pug.ts";
 import { getStructuredVolume } from "./structured-volume.ts";
 
@@ -11,7 +12,7 @@ export interface RailSection {
   sinogramCount: number;
 }
 
-const horizontalI = (s: string) => s.replaceAll("丨", "ㄧ");
+const horizontalI = horizontalBopomofo;
 
 export function buildRailSections(root: string, base: string): RailSection[] {
   const { sections: pugSections } = getVolumeData(root, base);

scripts/write-section-snapshots.ts

@@ -14,12 +14,13 @@ import {
   buildSectionEntryIndex,
   volumeSectionPath,
 } from "../lib/site/volume-paths.ts";
+import { readAstroBaseFromConfig } from "../lib/site/site-base.ts";
 import { renderStructuredSection } from "../lib/site/structured-render.ts";
 
 const root = process.cwd();
 const outRoot = join(root, "public", "sections");
 const corpus = getCorpus(root);
-const hrefBase = "/koktai/";
+const hrefBase = readAstroBaseFromConfig(root);
 
 mkdirSync(outRoot, { recursive: true });
 

src/pages/[volume]/[section]/index.astro

@@ -8,6 +8,7 @@ import { buildRailSections } from "../../../../lib/site/volume-rail.ts";
 import { legacyPlainText } from "../../../../lib/site/structured-render.ts";
 import { volumeHubPath, volumeSectionPath } from "../../../../lib/site/volume-paths.ts";
 import { VOLUME_IDS } from "../../../../lib/dic/pipeline.ts";
+import { rebaseDictionarySnapshotHtml } from "../../../../lib/site/site-base.ts";
 import { volumeNav, volumeRangeText } from "../../../../lib/site/volume-astro-shared.ts";
 
 export function getStaticPaths() {
@@ -36,11 +37,11 @@ const snapshotPath = join(root, "public", "sections", volumeSectionPath(volume,
 if (!existsSync(snapshotPath)) {
   throw new Error(`missing section snapshot ${snapshotPath} — run bun run section:snapshots`);
 }
-const sectionHtml = readFileSync(snapshotPath, "utf8");
 const baseUrl = import.meta.env.BASE_URL.endsWith("/")
   ? import.meta.env.BASE_URL
   : `${import.meta.env.BASE_URL}/`;
 const href = (path = "") => `${baseUrl}${path}`;
+const sectionHtml = rebaseDictionarySnapshotHtml(readFileSync(snapshotPath, "utf8"), baseUrl);
 const { prev, next, volName } = volumeNav(volNo, href);
 const sylText = legacyPlainText(rail.syllable);
 const title = `${volName} ${sylText}・國臺對照活用辭典`;

src/pages/[volume]/index.astro

@@ -57,9 +57,6 @@ const description = `國臺對照活用辭典${volName}（${rangeText}），共
         <p class="vol-meta">
           {railSections.length} 音節・{structured.entryCount.toLocaleString("en-US")} 條目
         </p>
-        <p class="vol-hub-note">
-          本卷依音節拆頁以加快載入；請由左側索引或下方連結進入各音節。
-        </p>
         <nav class="vol-nav" aria-label="卷次">
           {prev && <a href={href(volumeHubPath(prev))}>◀ 卷{chineseNumeral(volNo - 1)}</a>}
           <a href={href("#volumes")}>卷目</a>

tests/site/site-base.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { rebaseDictionarySnapshotHtml } from "../../lib/site/site-base.ts";
+
+describe("rebaseDictionarySnapshotHtml", () => {
+  test("rewrites /koktai/ links to configured base", () => {
+    const html =
+      '<a href="/koktai/21/24/index.html#c-1"><img src="/koktai/img/k/faca.png">';
+    expect(rebaseDictionarySnapshotHtml(html, "/")).toBe(
+      '<a href="/21/24/index.html#c-1"><img src="/img/k/faca.png">',
+    );
+  });
+
+  test("leaves already-correct base unchanged", () => {
+    const html = '<a href="/koktai/01/1/index.html#w-1">';
+    expect(rebaseDictionarySnapshotHtml(html, "/koktai/")).toBe(html);
+  });
+});
+
+import { legacyPlainText } from "../../lib/site/legacy-text.ts";
+
+describe("horizontalBopomofo via legacyPlainText", () => {
+  test("maps vertical 丨 to ㄧ in plain syllable labels", () => {
+    expect(legacyPlainText("丨～丨ㄥˋ")).toBe("ㄧ～ㄧㄥˋ");
+  });
+});

tests/site/structured-render.test.ts

@@ -126,7 +126,7 @@ describe("structured dictionary render", () => {
   test("legacy text consumes k tags and emits horizontal zhuyin ruby", () => {
     const kai = String.fromCodePoint(0xf8d44);
     const horizontalI = String.fromCodePoint(0xf8265);
-    const html = renderLegacyText(`祀<k>${kai}</k>人${horizontalI}`);
+    const html = renderLegacyText(`祀<k>${kai}</k>人${horizontalI}`, "/koktai/");
 
     expect(html).not.toContain("&lt;k&gt;");
     expect(html).not.toContain("&lt;/k&gt;");
@@ -137,7 +137,7 @@ describe("structured dictionary render", () => {
 
   test("legacy text renders high k PUA fallback as bitmap image", () => {
     const highK = String.fromCodePoint(0xffa44);
-    const html = renderLegacyText(`<k>${highK}</k>`);
+    const html = renderLegacyText(`<k>${highK}</k>`, "/koktai/");
 
     expect(html).toContain('src="/koktai/img/k/fa44.png"');
     expect(html).not.toContain("&#xffa44;");
@@ -186,7 +186,7 @@ describe("structured dictionary render", () => {
 
   test("legacy text strips raw PE2 control tags from prose", () => {
     const raw = "~fk;;~fm3;;食~fk;ㄆ~fm3;;~fk;;~fm3;;緊(等)煮較爛咧則(/即)即付汝~bt180;·~bt0;;食。枵鬼氐氐。";
-    const html = renderLegacyText(raw);
+    const html = renderLegacyText(raw, "/koktai/");
 
     expect(html).toContain("食");
     expect(html).toContain("枵鬼氐氐");
@@ -232,7 +232,7 @@ describe("structured dictionary render", () => {
   });
 
   test("standalone zhuyin fragments get an explicit class", () => {
-    const html = renderLegacyText("<rt>ㄧ</rt>");
+    const html = renderLegacyText("<rt>ㄧ</rt>", "/koktai/");
 
     expect(html).toBe('<ruby class="zhuyin zhuyin-standalone"><rt>ㄧ</rt></ruby>');
   });