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

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.4",
 	"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,7 @@
   --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;
   --desktop-sidebar-default: 420px;
   --desktop-sidebar-min: 320px;
   --desktop-viewer-min: 680px;
@@ -1135,8 +1136,8 @@ 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;
 }
@@ -1200,8 +1201,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";
@@ -103,28 +104,6 @@ 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;
@@ -135,12 +114,11 @@ function normalizeRenderedMermaidSvg(block) {
     return;
   }
 
-  const intrinsicWidth = parseSvgSize(svg.getAttribute("width"));
   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))";
 }
 
 function parseMermaidNodes() {
@@ -1101,7 +1079,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 +1909,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 +1917,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);