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

package/package.json

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

package/src/build.ts

@@ -737,7 +737,11 @@ function pickHomeDoc(docs: DocRecord[]): DocRecord | null {
   const inDefaultBranch = docs.filter((doc) => doc.branch == null || doc.branch === DEFAULT_BRANCH);
   const candidates = inDefaultBranch.length > 0 ? inDefaultBranch : docs;
   const byRoute = candidates.find((doc) => doc.route === "/index/");
-  return byRoute ?? candidates[0] ?? null;
+  if (byRoute) {
+    return byRoute;
+  }
+
+  return [...candidates].sort(compareByRecentDateThenPath)[0] ?? null;
 }
 
 function buildPinnedMenuFolder(docs: DocRecord[], options: BuildOptions): FolderNode | null {

package/src/runtime/app.css

@@ -67,6 +67,8 @@
   --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;
@@ -1102,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));
@@ -1142,6 +1147,14 @@ body.mobile-toggle-left .mobile-menu-toggle {
   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;

package/src/runtime/app.js

@@ -22,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,
@@ -109,16 +113,47 @@ function normalizeRenderedMermaidSvg(block) {
     return;
   }
 
+  const container = block.parentElement instanceof HTMLElement ? block.parentElement : null;
   const svg = block.querySelector("svg");
   if (!(svg instanceof SVGElement)) {
     return;
   }
 
+  if (container) {
+    container.classList.remove(MERMAID_BLOCK_WIDE_CLASS, MERMAID_BLOCK_TALL_CLASS);
+  }
+
   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))";
+  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() {
@@ -134,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);
     }
   }
@@ -472,6 +508,37 @@ function isDocVisibleInBranch(doc, branch, defaultBranch) {
   return docBranch === branch;
 }
 
+function parseDateToEpochMs(value) {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return null;
+  }
+
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function getRecentSortEpochMs(doc) {
+  return parseDateToEpochMs(doc.updatedDate) ?? parseDateToEpochMs(doc.date);
+}
+
+function compareDocsByRecentDateThenRoute(left, right) {
+  const leftEpoch = getRecentSortEpochMs(left);
+  const rightEpoch = getRecentSortEpochMs(right);
+
+  if (leftEpoch != null && rightEpoch != null) {
+    const byDate = rightEpoch - leftEpoch;
+    if (byDate !== 0) {
+      return byDate;
+    }
+  } else if (leftEpoch != null && rightEpoch == null) {
+    return -1;
+  } else if (leftEpoch == null && rightEpoch != null) {
+    return 1;
+  }
+
+  return left.route.localeCompare(right.route, "ko-KR");
+}
+
 function cloneFilteredTree(nodes, visibleDocIds) {
   const filteredNodes = [];
 
@@ -523,7 +590,7 @@ function pickHomeRoute(view) {
   if (view.routeMap["/index/"]) {
     return "/index/";
   }
-  return view.docs[0]?.route || "/";
+  return [...view.docs].sort(compareDocsByRecentDateThenRoute)[0]?.route || "/";
 }
 
 function loadExpandedSet() {