@limcpf/everything-is-a-markdown 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limcpf/everything-is-a-markdown",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "bin": {

package/src/build.ts

@@ -1042,6 +1042,7 @@ function buildInitialView(doc: DocRecord, docs: DocRecord[], contentHtml: string
 async function writeShellPages(
   context: OutputWriteContext,
   docs: DocRecord[],
+  manifest: Manifest,
   options: BuildOptions,
   runtimeAssets: RuntimeAssets,
   contentByDocId: Map<string, string>,
@@ -1053,6 +1054,7 @@ async function writeShellPages(
     buildShellMeta("/", null, options),
     buildAppShellAssetsForOutput(indexOutputPath, runtimeAssets),
     indexInitialView,
+    manifest,
   );
   await writeOutputIfChanged(context, "_app/index.html", shell);
   await writeOutputIfChanged(context, indexOutputPath, shell);
@@ -1072,6 +1074,7 @@ async function writeShellPages(
         buildShellMeta(doc.route, doc, options),
         buildAppShellAssetsForOutput(routeOutputPath, runtimeAssets),
         initialView,
+        manifest,
       ),
     );
   }
@@ -1256,7 +1259,7 @@ export async function buildSite(options: BuildOptions): Promise<BuildResult> {
     renderedDocs += 1;
   }
 
-  await writeShellPages(outputContext, docs, options, runtimeAssets, contentByDocId);
+  await writeShellPages(outputContext, docs, manifest, options, runtimeAssets, contentByDocId);
   await writeSeoArtifacts(outputContext, docs, options);
 
   await writeCache(cachePath, nextCache);

package/src/runtime/app.css

@@ -5,8 +5,8 @@
   --latte-crust: #dce0e8;
   --latte-text: #4c4f69;
   --latte-subtext0: #6c6f85;
-  --latte-subtext1: #5c5f77;
-  --latte-overlay0: #9ca0b0;
+  --latte-subtext1: #555974;
+  --latte-overlay0: #5f637a;
   --latte-surface0: #ccd0da;
   --latte-surface1: #bcc0cc;
   --latte-surface2: #acb0be;
@@ -30,7 +30,7 @@
   --mocha-text: #cdd6f4;
   --mocha-subtext0: #a6adc8;
   --mocha-subtext1: #bac2de;
-  --mocha-overlay0: #6c7086;
+  --mocha-overlay0: #a0a7c6;
   --mocha-surface0: #313244;
   --mocha-surface1: #45475a;
   --mocha-surface2: #585b70;
@@ -121,7 +121,7 @@ body {
 body {
   background: var(--latte-base);
   color: var(--latte-text);
-  font-family: "Inter", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
   overflow: hidden;
 }
@@ -192,11 +192,21 @@ a:hover {
 }
 
 .material-symbols-outlined {
+  font-family: "Material Symbols Outlined", "Material Icons", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1em;
-  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
   flex: 0 0 auto;
   font-size: 20px;
   line-height: 1;
@@ -571,7 +581,7 @@ a:hover {
 }
 
 .status-encoding {
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   color: var(--latte-overlay0);
 }
 
@@ -752,7 +762,7 @@ body.mobile-toggle-left .mobile-menu-toggle {
   align-items: center;
   gap: 4px;
   font-size: 0.85rem;
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   color: var(--latte-overlay0);
   margin-bottom: 24px;
   flex-wrap: nowrap;
@@ -818,7 +828,7 @@ body.mobile-toggle-left .mobile-menu-toggle {
   gap: 16px;
   min-height: 22px;
   font-size: 0.85rem;
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   color: var(--latte-subtext0);
 }
 
@@ -914,7 +924,7 @@ body.mobile-toggle-left .mobile-menu-toggle {
   border: 1px solid var(--latte-surface0);
   border-radius: 4px;
   padding: 2px 6px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.88em;
   color: var(--latte-mauve);
 }
@@ -955,7 +965,7 @@ body.mobile-toggle-left .mobile-menu-toggle {
 
 .code-filename {
   flex: 1;
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.75rem;
   color: #aeb7c2;
   text-align: center;
@@ -1000,7 +1010,7 @@ body.mobile-toggle-left .mobile-menu-toggle {
   display: block;
   padding: 18px 20px;
   overflow-x: auto;
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.95rem;
   font-weight: 500;
   line-height: 1.72;
@@ -1041,7 +1051,7 @@ body.mobile-toggle-left .mobile-menu-toggle {
   display: block;
   padding: 16px;
   overflow-x: auto;
-  font-family: "JetBrains Mono", monospace;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.875rem;
   line-height: 1.6;
 }

package/src/runtime/app.js

@@ -82,6 +82,37 @@ function loadInitialViewData() {
   }
 }
 
+function loadInitialManifestData() {
+  const script = document.getElementById("initial-manifest-data");
+  if (!(script instanceof HTMLScriptElement)) {
+    return null;
+  }
+
+  const raw = script.textContent;
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") {
+      return null;
+    }
+
+    if (!Array.isArray(parsed.docs) || !Array.isArray(parsed.tree)) {
+      return null;
+    }
+
+    if (!parsed.routeMap || typeof parsed.routeMap !== "object") {
+      return null;
+    }
+
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
 function resolveRouteFromLocation(routeMap) {
   const direct = normalizeRoute(location.pathname);
   if (routeMap[direct]) {
@@ -1077,12 +1108,14 @@ async function start() {
     }
   });
 
-  const manifestRes = await fetch("/manifest.json");
-  if (!manifestRes.ok) {
-    throw new Error(`Failed to load manifest: ${manifestRes.status}`);
+  let manifest = loadInitialManifestData();
+  if (!manifest) {
+    const manifestRes = await fetch("/manifest.json");
+    if (!manifestRes.ok) {
+      throw new Error(`Failed to load manifest: ${manifestRes.status}`);
+    }
+    manifest = await manifestRes.json();
   }
-
-  const manifest = await manifestRes.json();
   const defaultBranch = normalizeBranch(manifest.defaultBranch) || DEFAULT_BRANCH;
   const availableBranchSet = new Set([defaultBranch]);
   for (const doc of manifest.docs) {

package/src/template.ts

@@ -1,4 +1,5 @@
 import { escapeHtmlAttribute } from "./seo";
+import type { Manifest } from "./types";
 
 const DEFAULT_TITLE = "File-System Blog";
 const DEFAULT_DESCRIPTION = "File-system style static blog with markdown explorer UI.";
@@ -44,6 +45,8 @@ interface AppShellInitialViewPayload {
   title: string;
 }
 
+interface AppShellManifestPayload extends Manifest {}
+
 const DEFAULT_ASSETS: AppShellAssets = {
   cssHref: "/assets/app.css",
   jsSrc: "/assets/app.js",
@@ -137,14 +140,6 @@ function renderHeadMeta(meta: AppShellMeta): string {
   return headTags.join("\n");
 }
 
-function renderDeferredStylesheet(href: string): string {
-  return [
-    `    <link rel="preload" href="${escapeHtmlAttribute(href)}" as="style" />`,
-    `    <link rel="stylesheet" href="${escapeHtmlAttribute(href)}" media="print" onload="this.media='all'" />`,
-    `    <noscript><link rel="stylesheet" href="${escapeHtmlAttribute(href)}" /></noscript>`,
-  ].join("\n");
-}
-
 function renderInitialViewScript(initialView: AppShellInitialView | null): string {
   if (!initialView) {
     return "";
@@ -164,17 +159,30 @@ function renderInitialViewScript(initialView: AppShellInitialView | null): strin
   return `\n    <script id="initial-view-data" type="application/json">${payload}</script>`;
 }
 
+function renderInitialManifestScript(manifest: AppShellManifestPayload | null): string {
+  if (!manifest) {
+    return "";
+  }
+
+  const payload = JSON.stringify(manifest)
+    .replaceAll("<", "\\u003c")
+    .replaceAll("\u2028", "\\u2028")
+    .replaceAll("\u2029", "\\u2029");
+
+  return `\n    <script id="initial-manifest-data" type="application/json">${payload}</script>`;
+}
+
 export function renderAppShellHtml(
   meta: AppShellMeta = {},
   assets: AppShellAssets = DEFAULT_ASSETS,
   initialView: AppShellInitialView | null = null,
+  manifest: AppShellManifestPayload | null = null,
 ): string {
   const headMeta = renderHeadMeta(meta);
   const initialViewScript = renderInitialViewScript(initialView);
-  const textFontStylesheet =
-    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;700&display=optional";
+  const initialManifestScript = renderInitialManifestScript(manifest);
   const symbolFontStylesheet =
-    "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=optional";
+    "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap";
   const initialTitle = initialView ? escapeHtmlAttribute(initialView.title) : "문서를 선택하세요";
   const initialBreadcrumb = initialView ? initialView.breadcrumbHtml : "";
   const initialMeta = initialView ? initialView.metaHtml : "";
@@ -191,8 +199,7 @@ export function renderAppShellHtml(
 ${headMeta}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-${renderDeferredStylesheet(textFontStylesheet)}
-${renderDeferredStylesheet(symbolFontStylesheet)}
+    <link rel="stylesheet" href="${escapeHtmlAttribute(symbolFontStylesheet)}" />
     <link rel="stylesheet" href="${escapeHtmlAttribute(assets.cssHref)}" />
   </head>
   <body>
@@ -298,12 +305,13 @@ ${renderDeferredStylesheet(symbolFontStylesheet)}
             <div id="viewer-meta" class="viewer-meta">${initialMeta}</div>
           </header>
           <article id="viewer-content" class="viewer-content">${initialContent}</article>
-          <nav id="viewer-nav" class="viewer-nav">${initialNav}</nav>
+          <nav id="viewer-nav" class="viewer-nav" aria-label="문서 이전/다음 탐색">${initialNav}</nav>
         </div>
       </main>
     </div>
     <div id="tree-label-tooltip" class="tree-label-tooltip" role="tooltip" hidden></div>
 ${initialViewScript}
+${initialManifestScript}
     <script type="module" src="${escapeHtmlAttribute(assets.jsSrc)}"></script>
   </body>
 </html>
@@ -311,10 +319,8 @@ ${initialViewScript}
 }
 
 export function render404Html(assets: AppShellAssets = DEFAULT_ASSETS): string {
-  const textFontStylesheet =
-    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;700&display=optional";
   const symbolFontStylesheet =
-    "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=optional";
+    "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap";
 
   return `<!doctype html>
 <html lang="ko">
@@ -324,8 +330,7 @@ export function render404Html(assets: AppShellAssets = DEFAULT_ASSETS): string {
     <title>404 - File-System Blog</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-${renderDeferredStylesheet(textFontStylesheet)}
-${renderDeferredStylesheet(symbolFontStylesheet)}
+    <link rel="stylesheet" href="${escapeHtmlAttribute(symbolFontStylesheet)}" />
     <link rel="stylesheet" href="${escapeHtmlAttribute(assets.cssHref)}" />
   </head>
   <body>