@limcpf/everything-is-a-markdown 0.6.3 → 0.6.5

package/README.ko.md

@@ -193,7 +193,8 @@ flowchart LR
 
 문서 전환 시에도 해당 블록을 다시 렌더링합니다.
 Mermaid fence는 일반 코드 블록 UI와 분리된 전용 컨테이너(`.mermaid-block`)에서 렌더링되므로 코드 헤더/파일명/복사 버튼이 표시되지 않습니다.
-렌더된 SVG는 데스크톱/모바일 모두에서 컨테이너 기준으로 중앙 정렬되고 폭이 자동 보정됩니다.
+렌더된 SVG는 데스크톱/모바일 모두에서 중앙 정렬되며 `min(100%, 720px)` 기준으로 자동 축소됩니다.
+본문 이미지도 동일한 폭 정책을 적용해 글 읽기 흐름을 유지합니다.
 설정에서 Mermaid를 비활성화하거나 CDN 로드가 실패하면, 같은 컨테이너 안에서 소스 코드 텍스트를 유지하고 하단에 경고 메시지를 표시합니다.
 
 `blog.config.ts`에서 설정:

package/README.md

@@ -193,7 +193,8 @@ flowchart LR
 
 Rendering happens in the browser on first load and when navigating to another document.
 Mermaid fences are rendered inside a dedicated diagram container (`.mermaid-block`) instead of the regular code block UI, so they do not show code headers, filenames, or copy buttons.
-Rendered SVG output is centered and constrained to the container width on both desktop and mobile.
+Rendered SVG output is centered and automatically constrained to `min(100%, 720px)` on both desktop and mobile.
+Regular content images inside the viewer follow the same width policy to keep reading flow stable.
 If Mermaid is disabled in config or CDN loading fails, the source block is shown as-is in the same container and a warning message appears below it.
 
 Configuration options (`blog.config.ts`):

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@limcpf/everything-is-a-markdown",
-	"version": "0.6.3",
+	"version": "0.6.5",
 	"license": "MIT",
 	"private": false,
 	"type": "module",

package/src/build.ts

@@ -979,7 +979,7 @@ async function writeOutputIfChanged(
 
   const outputPath = path.join(context.outDir, relOutputPath);
   const unchanged = context.previousHashes[relOutputPath] === outputHash;
-  if (unchanged) {
+  if (unchanged && (await Bun.file(outputPath).exists())) {
     return;
   }
 

package/src/runtime/app.css

@@ -66,6 +66,9 @@
   --mobile-toggle-fg: #ffffff;
   --content-heading-accent-soft: rgba(136, 57, 239, 0.32);
   --content-heading-subtle: var(--latte-subtext1);
+  --content-visual-max-width: 720px;
+  --mermaid-wide-max-width: 640px;
+  --mermaid-tall-max-height: 560px;
   --desktop-sidebar-default: 420px;
   --desktop-sidebar-min: 320px;
   --desktop-viewer-min: 680px;
@@ -1101,6 +1104,9 @@ body.mobile-toggle-left .mobile-menu-toggle {
 .viewer-content .mermaid-block {
   margin: 1.5rem 0;
   padding: 16px 18px;
+  max-width: min(100%, var(--content-visual-max-width));
+  margin-left: auto;
+  margin-right: auto;
   border-radius: 12px;
   border: 1px solid var(--latte-surface0);
   background: linear-gradient(180deg, var(--latte-base), var(--latte-mantle));
@@ -1135,12 +1141,20 @@ body.mobile-toggle-left .mobile-menu-toggle {
 
 .viewer-content .mermaid-block pre.mermaid[data-mermaid-rendered="true"] svg {
   display: block;
-  width: 100%;
-  max-width: 100%;
+  width: auto;
+  max-width: min(100%, var(--content-visual-max-width));
   height: auto;
   margin: 0 auto;
 }
 
+.viewer-content .mermaid-block.is-wide pre.mermaid[data-mermaid-rendered="true"] svg {
+  max-width: min(100%, var(--mermaid-wide-max-width));
+}
+
+.viewer-content .mermaid-block.is-tall pre.mermaid[data-mermaid-rendered="true"] svg {
+  max-height: min(var(--mermaid-tall-max-height), 68vh);
+}
+
 .viewer-content .mermaid-block .mermaid-render-error {
   margin: 12px 0 0;
   padding: 10px 12px;
@@ -1200,8 +1214,10 @@ body.mobile-toggle-left .mobile-menu-toggle {
 /* Images */
 .viewer-content img {
   display: block;
-  max-width: 100%;
+  width: auto;
+  max-width: min(100%, var(--content-visual-max-width));
   height: auto;
+  margin: 0 auto;
   border-radius: 8px;
   border: 1px solid var(--latte-surface0);
 }

package/src/runtime/app.js

@@ -13,6 +13,7 @@ const DESKTOP_SPLITTER_STEP = 24;
 const DEFAULT_BRANCH = "dev";
 const DEFAULT_SITE_TITLE = "File-System Blog";
 const BRANCH_KEY = "fsblog.branch";
+const APP_READY_STATE_ATTR = "data-app-ready";
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const MERMAID_CDN = "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js";
@@ -21,6 +22,10 @@ const MERMAID_SELECTOR = "pre.mermaid";
 const MERMAID_ERROR_CLASS = "mermaid-render-error";
 const MERMAID_THEME_VALIDATION_RE = /^[a-zA-Z][a-zA-Z0-9._-]*$/;
 const MERMAID_URL_VALIDATION_RE = /^(https?:\/\/|\/|\.{1,2}\/)[^\s"'<>]+$/;
+const MERMAID_WIDE_RATIO = 2.4;
+const MERMAID_TALL_RATIO = 0.85;
+const MERMAID_BLOCK_WIDE_CLASS = "is-wide";
+const MERMAID_BLOCK_TALL_CLASS = "is-tall";
 const mermaidRuntime = {
   initialized: false,
   loadingPromise: null,
@@ -103,44 +108,52 @@ function showMermaidError(preview, message) {
   preview.parentElement.appendChild(createMermaidLoadError(message));
 }
 
-function parseSvgSize(value) {
-  const normalized = typeof value === "string" ? value.trim() : "";
-  if (!normalized) {
-    return null;
-  }
-  if (normalized.endsWith("%")) {
-    return null;
-  }
-
-  const match = normalized.match(/^(\d+(?:\.\d+)?)/);
-  if (!match) {
-    return null;
-  }
-
-  const parsed = Number(match[1]);
-  if (!Number.isFinite(parsed) || parsed <= 0) {
-    return null;
-  }
-
-  return parsed;
-}
-
 function normalizeRenderedMermaidSvg(block) {
   if (!(block instanceof HTMLElement)) {
     return;
   }
 
+  const container = block.parentElement instanceof HTMLElement ? block.parentElement : null;
   const svg = block.querySelector("svg");
   if (!(svg instanceof SVGElement)) {
     return;
   }
 
-  const intrinsicWidth = parseSvgSize(svg.getAttribute("width"));
+  if (container) {
+    container.classList.remove(MERMAID_BLOCK_WIDE_CLASS, MERMAID_BLOCK_TALL_CLASS);
+  }
+
   svg.style.display = "block";
-  svg.style.width = "100%";
+  svg.style.width = "auto";
   svg.style.height = "auto";
   svg.style.margin = "0 auto";
-  svg.style.maxWidth = intrinsicWidth ? `${intrinsicWidth}px` : "100%";
+  svg.style.maxWidth = "min(100%, var(--content-visual-max-width, 720px))";
+  svg.style.removeProperty("max-height");
+
+  const viewBox = svg.viewBox?.baseVal;
+  const intrinsicWidth =
+    viewBox && Number.isFinite(viewBox.width) && viewBox.width > 0
+      ? viewBox.width
+      : Number.parseFloat(svg.getAttribute("width") ?? "");
+  const intrinsicHeight =
+    viewBox && Number.isFinite(viewBox.height) && viewBox.height > 0
+      ? viewBox.height
+      : Number.parseFloat(svg.getAttribute("height") ?? "");
+
+  if (!(intrinsicWidth > 0) || !(intrinsicHeight > 0)) {
+    return;
+  }
+
+  const aspectRatio = intrinsicWidth / intrinsicHeight;
+  if (container && aspectRatio >= MERMAID_WIDE_RATIO) {
+    container.classList.add(MERMAID_BLOCK_WIDE_CLASS);
+    svg.style.maxWidth = "min(100%, var(--mermaid-wide-max-width, 640px))";
+  }
+
+  if (container && aspectRatio <= MERMAID_TALL_RATIO) {
+    container.classList.add(MERMAID_BLOCK_TALL_CLASS);
+    svg.style.maxHeight = "min(var(--mermaid-tall-max-height, 560px), 68vh)";
+  }
 }
 
 function parseMermaidNodes() {
@@ -156,6 +169,7 @@ function resetMermaidNodes(nodes) {
   for (const node of nodes) {
     node.removeAttribute("data-mermaid-rendered");
     if (node.parentElement instanceof HTMLElement) {
+      node.parentElement.classList.remove(MERMAID_BLOCK_WIDE_CLASS, MERMAID_BLOCK_TALL_CLASS);
       removeMermaidErrorMessage(node.parentElement);
     }
   }
@@ -1101,7 +1115,16 @@ function renderBacklinks(doc, pathBase) {
   return html;
 }
 
+function setAppReadyState(state) {
+  if (!(document.documentElement instanceof HTMLElement)) {
+    return;
+  }
+  document.documentElement.setAttribute(APP_READY_STATE_ATTR, state);
+}
+
 async function start() {
+  setAppReadyState("booting");
+
   const treeRoot = document.getElementById("tree-root");
   const appRoot = document.querySelector(".app-root");
   const splitter = document.getElementById("app-splitter");
@@ -1922,6 +1945,7 @@ async function start() {
   const initialRoute = currentRoute === "/" ? pickHomeRoute(view) : currentRoute;
   handleLayoutChange();
   await state.navigate(initialRoute, currentRoute === "/" && initialRoute !== "/");
+  setAppReadyState("ready");
 
   window.addEventListener("popstate", async () => {
     await state.navigate(resolveRouteFromLocation(view.routeMap, pathBase), false);
@@ -1929,6 +1953,8 @@ async function start() {
 }
 
 start().catch((error) => {
+  setAppReadyState("error");
+
   const contentEl = document.getElementById("viewer-content");
   if (contentEl) {
     const message = error instanceof Error ? error.message : String(error);