Add a table of contents option to my markdown posts

Author: offbyone

content/posts/2025-07-07-jujutsu.md

@@ -13,6 +13,8 @@ I was inspired to try [Jujutsu](https://github.com/martinvonz/jj) when I saw a l
 
 Note: unlike some of my other posts, this one will be updated as I notice things.
 
+[TOC]
+
 ## The Good
 
 * I am really appreciating the sense of safety that comes with versioning the working copy. I've done that before, by integrating tiny commits into my editor, but that got cumbersome with always having to rebase and manage those changes. 

pelicanconf.py

@@ -207,6 +207,19 @@ def __post_init__(self):
 REPOSITORY_ROOT = f"file://{ Path(__file__).parent.resolve() }/{ PATH }"
 EDIT_CONTENT_URL = "https://github.com/offbyone/ideas/edit/main/{file_path}"
 
+MARKDOWN = {
+    "extension_configs": {
+        "markdown.extensions.codehilite": {"css_class": "highlight"},
+        "markdown.extensions.extra": {},
+        "markdown.extensions.meta": {},
+        "markdown.extensions.toc": {
+            "permalink": True,
+            "title": "Table of Contents",
+        },
+    },
+    "output_format": "html5",
+}
+
 if "IDEAS_EMIT_TIMING" in os.environ:
     import sqlite3
     import time

themes/offby1/scss/toc.scss

@@ -0,0 +1,43 @@
+.toc {
+    border-radius: 0.5em;
+    margin-bottom: 1em;
+    background: var(--color-codebg);
+    padding: 0.5em;
+    margin-top: 1em;
+    top: 30px;
+    box-shadow: var(--color-divider) 0px 2px 8px 0px;
+    border: 1px solid var(--color-divider);
+}
+
+.toc ul {
+    list-style: none;
+    padding: 0.5rem 1rem;
+    margin: 0;
+}
+
+.toc ul li {
+    padding: 0.25em;
+}
+
+.toc ul li a {
+    color: var(--color-primary);
+    font-weight: 500;
+    transition: color 0.4s;
+    text-decoration: none;
+}
+
+.toc ul li a:hover {
+    color: var(--color-secondary);
+    transition: color 0.4s;
+    border-bottom: 1px solid var(--color-secondary);
+}
+
+.toc ul li ul {
+    font-size: 0.75em;
+    font-weight: 500;
+    margin-left: 5px;
+}
+
+.toc ul li ul a {
+    color: var(--color-mute);
+}

themes/offby1/templates/base.html.j2

@@ -57,7 +57,7 @@
           {% assets filters="scss",
           output="css/style.css",
           depends=["**/_*.scss"],
-          "fuji.scss", "bigfoot-default.scss", "magnific-popup.css", "nativeads.js.scss", "adblock-detect.scss" %}
+          "fuji.scss", "toc.scss", "bigfoot-default.scss", "magnific-popup.css", "nativeads.js.scss", "adblock-detect.scss" %}
           <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}" type="text/css" />
       {% endassets %}