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

package/README.ko.md

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

package/README.md

@@ -191,7 +191,11 @@ flowchart LR
 ```
 ````
 
-Rendering happens in the browser on first load and when navigating to another document. If Mermaid is disabled in config or CDN loading fails, the source block is shown as-is and a warning message appears.
+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 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,42 +1,42 @@
 {
-  "name": "@limcpf/everything-is-a-markdown",
-  "version": "0.6.2",
-  "license": "MIT",
-  "private": false,
-  "type": "module",
-  "bin": {
-    "eiam": "src/cli.ts"
-  },
-  "files": [
-    "src",
-    "README.md",
-    "bun.lock",
-    "tsconfig.json"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "blog": "bun run src/cli.ts",
-    "build": "bun run src/cli.ts build",
-    "dev": "bun run src/cli.ts dev",
-    "clean": "bun run src/cli.ts clean",
-    "lint:md:publish": "bun run scripts/lint-published-markdown.ts",
-    "test:e2e": "playwright test",
-    "test:e2e:focus-trap": "playwright test tests/e2e/mobile-sidebar-focus-trap.spec.ts"
-  },
-  "dependencies": {
-    "chokidar": "^4.0.3",
-    "gray-matter": "^4.0.3",
-    "markdown-it": "^14.1.0",
-    "picomatch": "^4.0.2",
-    "shiki": "^3.2.1"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.58.2",
-    "@types/markdown-it": "^14.1.2",
-    "@types/picomatch": "^4.0.2",
-    "bun-types": "^1.3.8",
-    "markdownlint": "^0.40.0"
-  }
+	"name": "@limcpf/everything-is-a-markdown",
+	"version": "0.6.4",
+	"license": "MIT",
+	"private": false,
+	"type": "module",
+	"bin": {
+		"eiam": "src/cli.ts"
+	},
+	"files": [
+		"src",
+		"README.md",
+		"bun.lock",
+		"tsconfig.json"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"blog": "bun run src/cli.ts",
+		"build": "bun run src/cli.ts build",
+		"dev": "bun run src/cli.ts dev",
+		"clean": "bun run src/cli.ts clean",
+		"lint:md:publish": "bun run scripts/lint-published-markdown.ts",
+		"test:e2e": "playwright test",
+		"test:e2e:focus-trap": "playwright test tests/e2e/mobile-sidebar-focus-trap.spec.ts"
+	},
+	"dependencies": {
+		"chokidar": "^4.0.3",
+		"gray-matter": "^4.0.3",
+		"markdown-it": "^14.1.0",
+		"picomatch": "^4.0.2",
+		"shiki": "^3.2.1"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.58.2",
+		"@types/markdown-it": "^14.1.2",
+		"@types/picomatch": "^4.0.2",
+		"bun-types": "^1.3.8",
+		"markdownlint": "^0.40.0"
+	}
 }

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/markdown.ts

@@ -167,21 +167,9 @@ function createMarkdownIt<L extends string, T extends string>(
 
     if (lang === MERMAID_LANG) {
       const source = escapeHtmlText(token.content);
-      const filename = fileName ? escapeHtmlAttr(fileName) : MERMAID_LANG;
-      return `<div class="code-block mermaid-block">
-        <div class="code-header">
-          <div class="code-dots">
-            <span class="dot dot-red"></span>
-            <span class="dot dot-yellow"></span>
-            <span class="dot dot-green"></span>
-          </div>
-          <span class="code-filename">${filename}</span>
-          <button class="code-copy" title="Copy code" data-code="${escapeHtmlAttr(token.content)}">
-            <span class="material-symbols-outlined">content_copy</span>
-          </button>
-        </div>
+      return `<figure class="mermaid-block">
         <pre class="mermaid">${source}</pre>
-      </div>`;
+      </figure>`;
     }
 
     let codeHtml: string;

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;
@@ -1098,29 +1099,54 @@ body.mobile-toggle-left .mobile-menu-toggle {
   tab-size: 2;
 }
 
-.viewer-content .code-block pre.mermaid {
+.viewer-content .mermaid-block {
+  margin: 1.5rem 0;
+  padding: 16px 18px;
+  border-radius: 12px;
+  border: 1px solid var(--latte-surface0);
+  background: linear-gradient(180deg, var(--latte-base), var(--latte-mantle));
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
+}
+
+.viewer-content .mermaid-block pre.mermaid {
   margin: 0;
+  padding: 0;
   border: none;
   border-radius: 0;
-  padding: 0;
+  box-shadow: none;
   background: transparent !important;
-  color: inherit;
+  color: var(--latte-subtext1);
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9rem;
+  line-height: 1.6;
   white-space: pre-wrap;
   word-break: break-word;
+  overflow-wrap: anywhere;
+  overflow: visible;
 }
 
-.viewer-content .code-block pre.mermaid svg {
-  width: 100%;
-  height: auto;
+.viewer-content .mermaid-block pre.mermaid[data-mermaid-rendered="true"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: inherit;
+  font-family: inherit;
+  white-space: normal;
+}
+
+.viewer-content .mermaid-block pre.mermaid[data-mermaid-rendered="true"] svg {
   display: block;
+  width: auto;
+  max-width: min(100%, var(--content-visual-max-width));
+  height: auto;
+  margin: 0 auto;
 }
 
-.viewer-content .mermaid-render-error {
-  margin: 0;
-  padding: 10px 16px;
+.viewer-content .mermaid-block .mermaid-render-error {
+  margin: 12px 0 0;
+  padding: 10px 12px;
   border: 1px solid rgba(244, 63, 94, 0.35);
-  border-radius: 0 0 8px 8px;
-  border-top: none;
+  border-radius: 8px;
   color: var(--latte-red);
   background: rgba(244, 63, 94, 0.08);
   font-size: 0.84rem;
@@ -1175,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,6 +104,23 @@ function showMermaidError(preview, message) {
   preview.parentElement.appendChild(createMermaidLoadError(message));
 }
 
+function normalizeRenderedMermaidSvg(block) {
+  if (!(block instanceof HTMLElement)) {
+    return;
+  }
+
+  const svg = block.querySelector("svg");
+  if (!(svg instanceof SVGElement)) {
+    return;
+  }
+
+  svg.style.display = "block";
+  svg.style.width = "auto";
+  svg.style.height = "auto";
+  svg.style.margin = "0 auto";
+  svg.style.maxWidth = "min(100%, var(--content-visual-max-width, 720px))";
+}
+
 function parseMermaidNodes() {
   const contentEl = document.getElementById("viewer-content");
   if (!(contentEl instanceof HTMLElement)) {
@@ -231,10 +249,12 @@ async function renderMermaidBlocks(config) {
       try {
         if (typeof mermaid.run === "function") {
           await mermaid.run({ nodes: [block] });
+          normalizeRenderedMermaidSvg(block);
           continue;
         }
         if (typeof mermaid.init === "function") {
           await mermaid.init({ startOnLoad: false }, [block]);
+          normalizeRenderedMermaidSvg(block);
           continue;
         }
         throw new Error("Mermaid 렌더러 API가 존재하지 않습니다.");
@@ -1059,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");
@@ -1880,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);
@@ -1887,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);