Merge pull request #220 from hughrun/toc

Table of Contents

Author: hughrun

generate.py

@@ -5,7 +5,7 @@
 import sys
 
 from jinja2 import Environment, FileSystemLoader
-from markdown import markdown
+from markdown import Markdown
 import yaml
 
 import i18n
@@ -103,6 +103,15 @@ def format_markdown(file_path):
         dashed_header_format = first_line == "---\n"
 
     with open(file_path, "r", encoding="utf-8") as markdown_content:
+
+        md = Markdown(
+            extensions=["tables", "fenced_code", "codehilite", "toc", "sane_lists"],
+            extension_configs={
+                "codehilite": {"css_class": "highlight"},
+                "toc": {"anchorlink": True, "anchorlink_class": "headerlink"},
+            },
+        )
+
         if dashed_header_format:
             headerless = []
             header_block_open = False
@@ -111,22 +120,12 @@ def format_markdown(file_path):
                     header_block_open = not header_block_open
                 elif not header_block_open:
                     headerless.append(line)
-            return markdown(
-                "".join(headerless),
-                extensions=["tables", "fenced_code", "codehilite", "toc", "sane_lists"],
-                extension_configs={
-                    "codehilite": {"css_class": "highlight"},
-                    "toc": {"anchorlink": True, "anchorlink_class": "headerlink"},
-                },
-            )
-        return markdown(
-            "".join(markdown_content.readlines()[3:]),
-            extensions=["tables", "fenced_code", "codehilite", "toc", "sane_lists"],
-            extension_configs={
-                "codehilite": {"css_class": "highlight"},
-                "toc": {"anchorlink": True, "anchorlink_class": "headerlink"},
-            },
-        )
+
+            body = md.convert("".join(headerless))
+            return {"body": body, "toc": md.toc_tokens}
+
+        body = md.convert("".join(markdown_content.readlines()[3:]))
+        return {"body": body, "toc": md.toc}
 
 
 if __name__ == "__main__":
@@ -168,7 +167,9 @@ def format_markdown(file_path):
                     f"{LOCALIZED_SITE_PATH}{output_path}", "w+", encoding="utf-8"
                 ) as render_file:
                     data = get_site_data(SLUG, locale["code"], content_path, version)
-                    data["content"] = format_markdown(content_path)
+                    formatted_md = format_markdown(content_path)
+                    data["content"] = formatted_md["body"]
+                    data["toc"] = formatted_md["toc"]
                     data["path"] = (
                         f"/{SLUG}{output_path}"
                         if not version

requirements.txt

@@ -1,5 +1,5 @@
 black==24.3.0
 Jinja2==3.1.6
-Markdown==3.3.4
+Markdown==3.9.0
 PyYAML==6.0.2
 pygments==2.16.1

site/static/js/bookwyrm.js

@@ -60,4 +60,14 @@ document.addEventListener('DOMContentLoaded', () => {
             $menuTarget.classList.toggle('is-hidden-touch');
         });
     });
+
+    // Table of contents
+    const $tocController = document.getElementById("toc");
+    $tocController.addEventListener('click', () => {
+        $tocController.classList.toggle('is-active');
+        const target = $tocController.dataset.target;
+        const $target = document.getElementById(target);
+        $target.classList.toggle('is-hidden-touch');
+    })
+
 });

templates/layout.html

@@ -68,7 +68,7 @@
 {% endif %}
 
 <div class="columns">
-    <nav class="menu column is-one-quarter is-hidden-touch pl-6 mt-4" id="menu">
+    <nav class="menu column is-one-quarter is-hidden-touch pl-6" id="menu">
         <h2 class="menu-label">Language & Version</a></h2>
         <div class="select">
             <select aria-label="{{ _("Select a language") }}" id="language_selection">
@@ -96,7 +96,8 @@ <h2 class="menu-label">{{ category.title }}</h2>
         {% endfor %}
     </nav>
 
-    <div class="column">
+    <div class="column pt-0">
+        {% block toc %}{% endblock %}
         <div class="container is-max-desktop">
             <section class="section">
                 <header class="content block column is-offset-one-quarter pl-2">

templates/page.html

@@ -7,6 +7,30 @@
 <h1 class="title is-1">{{ headers.Title }}</h1>
 {% endblock %}
 
+{% block toc %}
+{% if toc %}
+<nav class="navbar is-dark" role="table-of-contents-navigation" aria-label="dropdown navigation">
+    <div class="navbar-start">
+        <div class="navbar-item has-dropdown" id="toc" data-target="toc-dropdown">
+            <a class="navbar-link">
+              {{ _("Page Contents") }}
+            </a>
+
+            <div class="navbar-dropdown is-hidden-touch " id="toc-dropdown">
+              {% for entry in toc %}
+                  <a class="navbar-item" href="#{{entry.id}}">{{entry.name}}</a>
+                  {% if entry.children %}
+                      {% for child in entry.children %}
+                      <a class="navbar-item" href="#{{child.id}}"><span class="pl-4">{{child.name}}</span></a>
+                      {% endfor %}
+                  {% endif %}
+              {% endfor %}
+            </div>
+          </div>
+    </div>
+  </nav>
+{% endif %}
+{% endblock %}
 
 {% block content %}
 <section class="block content">