fossbook 0.0.8 → 0.0.9

package/README.md

@@ -13,6 +13,7 @@ It was originally part of the [F/OSS Comics blog](https://fosscomics.com) and is
 - **GitHub Pages** — Built-in CNAME support for custom domains
 - **Dev server** — Local preview server with Express
 - **Syntax highlighting** — Code block highlighting via highlight.js
+- **Mermaid diagrams** — ` ```mermaid ` code blocks render as diagrams
 
 ## Quick Start
 
@@ -147,6 +148,20 @@ This affects the generated output directory, the post URL, post links on the
 home/all-posts/tag pages, and image paths. The on-disk source layout under
 `content/posts/` does not change.
 
+### Mermaid diagrams
+
+Fenced code blocks tagged `mermaid` are rendered as diagrams instead of code.
+The [Mermaid](https://mermaid.js.org) script is loaded from a CDN only on pages
+that contain a diagram.
+
+````markdown
+```mermaid
+sequenceDiagram
+    Alice->>Bob: Hello Bob
+    Bob-->>Alice: Hi Alice
+```
+````
+
 ## CLI Reference
 
 ```

package/lib/mod/marked.js

@@ -18,6 +18,27 @@ marked.setOptions({
 
 // Override function
 const renderer = {
+  code(code, infostring) {
+    // marked >=15 passes a token object; older versions pass positional args.
+    let text = code;
+    let lang = infostring;
+    if (code && typeof code === "object") {
+      text = code.text;
+      lang = code.lang;
+    }
+    const language = (lang || "").trim().split(/\s+/)[0];
+    // Emit mermaid fenced blocks as <pre class="mermaid"> so the mermaid
+    // client script can render them as diagrams instead of code.
+    if (language === "mermaid") {
+      const escaped = text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+      return `<pre class="mermaid">${escaped}</pre>`;
+    }
+    // Fall back to marked's default code rendering for everything else.
+    return false;
+  },
   image(href, title, text) {
     let size = null;
     // Check if the title contains a size specification

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fossbook",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A lightweight static blog site generator for GitHub Pages",
   "main": "lib/index.js",
   "scripts": {

package/themes/archie/layouts/post.html

@@ -78,5 +78,9 @@
               ${page.footer()}
             </footer>
         </div>
+        ${page.body.includes('class="mermaid"') ? `<script type="module">
+            import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
+            mermaid.initialize({ startOnLoad: true });
+        </script>` : ""}
     </body>
 </html>