Blog: Add generated section "On this page"

blog/games.md

@@ -6,6 +6,7 @@ authors:
     username: "EthanThatOneKid"
 topics: ["Games"]
 date: 2024-06-05
+toc: false
 ---
 
 At FartLabs, we're passionate about developer tools, but we also love creating

components/blog_page/markdown.ts

@@ -1,5 +1,6 @@
 import MarkdownIt from "markdown-it";
 import anchorPlugin from "markdown-it-anchor";
+import tocDoneRightPlugin from "markdown-it-toc-done-right";
 import hljs from "highlight.js";
 
 /**
@@ -35,3 +36,5 @@ renderer.use(anchorPlugin, {
     class: "fart-link-visible-on-hover",
   }),
 });
+
+renderer.use(tocDoneRightPlugin);

components/blog_page/posts.ts

@@ -66,12 +66,16 @@ export function readPostSync(entry: WalkEntry): Post {
   return {
     id,
     attrs: extracted.attrs,
-    html: renderHTML(extracted.body),
+    html: renderHTML(
+      `${(extracted.attrs.toc ?? true) ? tocPrefix : ""}${extracted.body}`,
+    ),
   };
 }
 
+const tocPrefix = "## On this page\n\n[[toc]]\n";
+
 /**
- * constTopics counts the topics.
+ * countTopics counts the topics.
  */
 export function countTopics(posts: Post[]): Map<string, number> {
   const topics = new Map<string, number>();
@@ -115,6 +119,7 @@ export interface PostAttrs {
   topics: string[];
   date: Date;
   aliases?: string[];
+  toc?: boolean;
 }
 
 /**

deno.json

@@ -16,6 +16,7 @@
     "highlight.js": "npm:highlight.js@^11.9.0",
     "markdown-it": "npm:markdown-it@^14.1.0",
     "markdown-it-anchor": "npm:markdown-it-anchor@^9.0.0",
+    "markdown-it-toc-done-right": "npm:markdown-it-toc-done-right@^4.2.0",
     "simplex-noise": "npm:simplex-noise@^4.0.1"
   },
   "tasks": {