Add breadcrumb navigation support and update related configurations

markdoc-config.ts

@@ -3,6 +3,7 @@ import HeadingNode from "./nodes/heading/schema.js";
 import DiagramTag from "./tags/diagram/schema.js";
 import TableOfContentsTag from "./tags/table-of-contents/schema.js";
 import HtmlTagTag from "./tags/html-tag/schema.js";
+import BreadCrumbNavigationTag from "./tags/breadcrumb-navigation/schema.js";
 
 const config: Config = {
   nodes: {
@@ -12,6 +13,7 @@ const config: Config = {
     diagram: DiagramTag,
     "table-of-contents": TableOfContentsTag,
     "html-tag": HtmlTagTag,
+    "breadcrumb-navigation": BreadCrumbNavigationTag,
   },
 };
 

schemas/variables.json

@@ -11,6 +11,9 @@
     "destinationDirectory": {
       "type": "string"
     },
+    "contentDirectory": {
+      "type": "string"
+    },
     "filename": {
       "type": "string"
     },
@@ -21,6 +24,7 @@
   "required": [
     "frontmatter",
     "sourceDirectory",
+    "contentDirectory",
     "destinationDirectory",
     "filename"
   ],

scripts/build.ts

@@ -9,6 +9,7 @@ import { FilterProcessor } from "../middleware/filter-processor.js";
 import { SequentialProcessor } from "../middleware/sequential-processor.js";
 
 const destinationDirectory = Path.resolve("dist");
+const contentDirectory = Path.resolve("content");
 
 await compileStaticAssets({
   destinationDirectory,
@@ -26,6 +27,7 @@ await compileStaticAssets({
 
 await compileMarkdocDocuments({
   destinationDirectory,
+  contentDirectory,
   sourceGlobs: [
     {
       pattern: "**/*.md",

scripts/compile-markdoc-documents.ts

@@ -111,13 +111,15 @@ type Glob = {
 
 export const compileMarkdocDocuments = async ({
   destinationDirectory,
+  contentDirectory,
   sourceGlobs,
   layoutGlobs,
   partialGlobs,
   defaultLayout,
   renderMiddleware,
 }: {
   destinationDirectory: string;
+  contentDirectory: string;
   sourceGlobs: Glob[];
   layoutGlobs: Glob[];
   partialGlobs: Glob[];
@@ -188,6 +190,7 @@ export const compileMarkdocDocuments = async ({
         frontmatter,
         sourceDirectory: sourcePath.dir,
         destinationDirectory: destinationPath.dir,
+        contentDirectory,
         filename: sourcePath.base,
       };
 

static/index.css

@@ -1,10 +1,12 @@
 body {
+    margin: 3rem auto;
+    max-width: 60ch;
     font-family: "Inter", sans-serif;
     line-height: 2rem;
-    margin: 6rem 0;
 }
 
-article {
-    margin: 1rem auto;
-    max-width: 60ch;
+.breadcrumb.navigation {
+    .arrow {
+        padding: 0 0.5rem;
+    }
 }

tags/breadcrumb-navigation/schema.ts

@@ -0,0 +1,93 @@
+import FileSystem from "node:fs";
+import Path from "node:path";
+import JSYAML from "js-yaml";
+import Markdoc, { Schema } from "@markdoc/markdoc";
+import { validateTypeUsingSchema } from "../../validate-type-using-schema.js";
+import {
+    default as variablesSchema,
+    Schema as Variables,
+} from "../../schemas/variables.json.js";
+import {
+    default as frontmatterSchema,
+    Schema as Frontmatter,
+} from "../../schemas/frontmatter.json.js";
+
+const getVariablesFromConfig = (config: Markdoc.Config) =>
+    validateTypeUsingSchema<Variables>(
+        config.variables,
+        variablesSchema,
+    );
+
+const addBreadcrumbs = async (navTag: Markdoc.Tag, config: Markdoc.Config) => {
+    const { sourceDirectory, contentDirectory, filename } =  getVariablesFromConfig(config);
+
+    const pathname = Path.join(sourceDirectory.replace(contentDirectory, ""), filename);
+    const pathparts = pathname.split("/");
+
+    let breadcrumbPathParts = [];
+
+    console.log({contentDirectory, pathname, pathparts})
+
+    for (const pathpart of pathparts) {
+        breadcrumbPathParts.push(pathpart);
+        const breadcrumbRelativePath = Path.join(...breadcrumbPathParts);
+
+        console.log({breadcrumbPathParts, breadcrumbRelativePath})
+
+        let path = Path.resolve(contentDirectory);
+
+        // If the paths are the same and end in an index, we are at a directory, otherwise we need to continue
+        if (breadcrumbPathParts.join("/") === pathname) {
+            if (breadcrumbRelativePath.endsWith("index.md")) {
+                break;
+            }
+            path = Path.resolve(path, breadcrumbRelativePath);
+        } else {
+            path = Path.resolve(path, breadcrumbRelativePath, "index.md");
+        }
+
+        console.log({path})
+
+        const articleContents = await FileSystem.promises.readFile(
+            path,
+            "utf8"
+        );
+
+        const articleNode = Markdoc.parse(articleContents);
+
+        const frontmatter = validateTypeUsingSchema<Frontmatter>(
+            JSYAML.load(articleNode.attributes.frontmatter),
+            frontmatterSchema,
+        );
+
+        const anchorTag = new Markdoc.Tag("a");
+
+        anchorTag.children.push(frontmatter.title || "");
+
+        anchorTag.attributes.href = `${breadcrumbPathParts.join("/")}/`;
+
+        navTag.children.push(anchorTag);
+
+        navTag.children.push(new Markdoc.Tag("span", { class: "arrow" }, ["→"]));
+    }
+
+    navTag.children.pop();
+
+    if (navTag.children.length > 0) {
+        const lastChild = navTag.children[navTag.children.length - 1];
+        if (lastChild instanceof Markdoc.Tag) {
+            delete lastChild.attributes.href;
+        }
+    }
+}
+
+const schema: Schema = {
+    render: "nav",
+    async transform(node, config) {
+        const navTag = new Markdoc.Tag("nav", { class: "breadcrumb navigation" });
+        await addBreadcrumbs(navTag, config);
+        return navTag;
+    }
+};
+
+export default schema;

templates/layouts/article.md

@@ -4,6 +4,8 @@
 
 <body>
 
+{% breadcrumb-navigation /%}
+
 <article class="article">
 
 <header>

templates/layouts/default.md

@@ -4,6 +4,8 @@
 
 <body>
 
+{% breadcrumb-navigation /%}
+
 <article>
 
 # {% $frontmatter.title %}

templates/layouts/note.md

@@ -4,6 +4,8 @@
 
 <body>
 
+{% breadcrumb-navigation /%}
+
 <article class="note">
 
 <header>