docnest 0.1.21 → 0.1.23

package/README.md

@@ -84,6 +84,8 @@ export default defineConfig({
 
 受限模式只移除 DocNest 提供的页面入口和脚本，不承诺对浏览器开发者工具或系统级截图提供绝对防护。
 
+页面水印使用 4% 透明度，保持可辨识而不遮挡正文和图表。Mermaid 代码围栏按独立图表渲染，不继承普通代码块的等宽字体；节点内的 HTML 换行与图表字体测量保持一致。
+
 ### 极简单口令授权
 
 需要让文档中心只对知道口令的人开放时，可以启用单口令授权：

package/dist/server.js

@@ -188,10 +188,6 @@ const md = new MarkdownIt({
     linkify: true,
     typographer: true,
     highlight: function (str, lang) {
-        // 特殊处理 Mermaid 图表
-        if (lang === 'mermaid') {
-            return `<div class="mermaid">${str}</div>`;
-        }
         // 其他代码块使用 highlight.js
         if (lang && hljs.getLanguage(lang)) {
             try {
@@ -202,6 +198,16 @@ const md = new MarkdownIt({
         return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
     },
 });
+// Mermaid is a diagram, not highlighted code. A code/pre ancestor changes
+// the inherited font after Mermaid measures HTML labels, clipping their text.
+const renderCodeFence = md.renderer.rules.fence;
+md.renderer.rules.fence = function (tokens, index, options, env, renderer) {
+    const token = tokens[index];
+    if (token.info.trim().split(/\s+/)[0] === 'mermaid') {
+        return `<div class="mermaid">${md.utils.escapeHtml(token.content)}</div>\n`;
+    }
+    return renderCodeFence(tokens, index, options, env, renderer);
+};
 function slugifyHeading(text) {
     return (text || '')
         .replace(/`([^`]+)`/g, '$1')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docnest",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "可复用的本地 Markdown 文档中心",
   "repository": {
     "type": "git",

package/server/static/css/styles.css

@@ -51,6 +51,42 @@ body {
   gap: 1rem;
 }
 
+/* Equal side columns keep search centered in the entire header. */
+.header-content-with-search {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.header-content-with-search > .doc-search-trigger {
+  justify-self: center;
+}
+
+.header-content-with-search > .header-meta {
+  justify-self: end;
+  max-width: 100%;
+}
+
+@media (max-width: 1200px) {
+  .header-content-with-search {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .header-content-with-search > .header-title-group {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .header-content-with-search > .header-meta {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .header-content-with-search > .doc-search-trigger {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
 .header h1 {
   font-size: 1.25rem;
   font-weight: 600;
@@ -1303,6 +1339,9 @@ body[data-theme="dark"] .not-found-path {
 
 /* Mermaid 图表样式 */
 .markdown-body .mermaid {
+  /* Match Mermaid's measurement fallback when a diagram font is omitted or
+     rejected by its directive sanitizer. Explicit SVG fonts still take priority. */
+  font-family: "trebuchet ms", verdana, arial, sans-serif;
   margin: 24px 0;
   text-align: center;
   background: var(--linear-bg-subtle);
@@ -1918,6 +1957,21 @@ body[data-theme="dark"] .diagram-viewer-content {
     gap: 0.5rem;
   }
 
+  .header-content-with-search {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .header-content-with-search > .header-title-group,
+  .header-content-with-search > .header-meta,
+  .header-content-with-search > .doc-search-trigger {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .header-content-with-search > .doc-search-trigger .header-action-text {
+    display: inline;
+  }
+
   .header-meta {
     width: 100%;
     align-items: flex-start;

package/server/static/css/themes.css

@@ -89,7 +89,7 @@ html.docnest-restricted .markdown-body .mermaid-download-btn {
   color: var(--linear-text, rgba(15, 23, 42, 0.42));
   font: 700 clamp(0.75rem, 1.5vw, 1.5rem)/1 var(--doc-font-mono);
   letter-spacing: 0.08em;
-  opacity: 0.12;
+  opacity: 0.04;
   transform: rotate(-24deg);
   white-space: nowrap;
 }

package/server/views/partials/header.ejs

@@ -1,5 +1,5 @@
 <header class="header">
-  <div class="header-content">
+  <div class="header-content<%= !docsRestrictedMode ? ' header-content-with-search' : '' %>">
     <div class="header-title-group">
       <h1>
         <% if (docsLogo) { %><img class="brand-logo" src="<%= docsLogo %>" alt=""><% } else { %><span class="brand-fallback" aria-hidden="true"><span class="brand-fallback-emoji">📚</span><span class="brand-fallback-shape"></span></span><% } %>
@@ -11,8 +11,6 @@
         <p class="subtitle"><%= docsSubtitle %></p>
       <% } %>
     </div>
-    <div class="header-meta">
-      <div class="header-actions">
         <% if (!docsRestrictedMode) { %>
           <button type="button" id="doc-search-trigger" class="header-action-btn doc-search-trigger" aria-haspopup="dialog" aria-controls="doc-search-modal" title="搜索文档（⌘K / Ctrl K）">
             <span class="doc-search-icon" aria-hidden="true">⌕</span>
@@ -20,6 +18,8 @@
             <kbd class="doc-search-shortcut" aria-label="打开搜索快捷键">⌘ K</kbd>
           </button>
         <% } %>
+    <div class="header-meta">
+      <div class="header-actions">
         <% if (typeof showPrintButton !== 'undefined' && showPrintButton && !docsRestrictedMode) { %>
           <button type="button" id="print-doc-btn" class="header-action-btn print-btn" title="打印当前文章">
             <span class="print-icon">🖨️</span>