#9 - ADD automated anchors for headers - toc module for IDs and slugified header with python + ADD dummy content for display

items/2025-10-06_long_your-first-article_tutorial.md

@@ -3,3 +3,15 @@
 This is a `long` form articles. In the main feed, it is a simple link to the rest of the content. 
 
 Please check the [official documentation](https://git.uphillsecurity.com/cf7/picopaper) for more details.
+
+## This is a secondary header
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa porta accumsan eros aliquet consequat elit tincidunt imperdiet in adipiscing diam integer risus. Dapibus bibendum adipiscing rhoncus parturient fusce ultrices in accumsan phasellus tempus est senectus felis. Donec placerat porta lobortis magna consectetur hac pretium eleifend tempor cum nulla fusce aliquet.
+
+Primis amet nullam dictum ridiculus neque ipsum elit volutpat mauris posuere pellentesque euismod felis. Cum nunc ullamcorper dictum metus maecenas accumsan elit purus convallis vulputate mauris sollicitudin diam. Diam iaculis aliquet eleifend sociosqu nostra massa malesuada feugiat sit penatibus dolor montes purus. Porta vulputate dictumst sodales dolor ad euismod consequat interdum mus porttitor erat torquent consequat.
+
+## Third header
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa porta accumsan eros aliquet consequat elit tincidunt imperdiet in adipiscing diam integer risus. Dapibus bibendum adipiscing rhoncus parturient fusce ultrices in accumsan phasellus tempus est senectus felis. Donec placerat porta lobortis magna consectetur hac pretium eleifend tempor cum nulla fusce aliquet.
+
+Primis amet nullam dictum ridiculus neque ipsum elit volutpat mauris posuere pellentesque euismod felis. Cum nunc ullamcorper dictum metus maecenas accumsan elit purus convallis vulputate mauris sollicitudin diam. Diam iaculis aliquet eleifend sociosqu nostra massa malesuada feugiat sit penatibus dolor montes purus. Porta vulputate dictumst sodales dolor ad euismod consequat interdum mus porttitor erat torquent consequat.

picopaper.py

@@ -24,8 +24,8 @@ class SSGGGenerator:
         # Setup Jinja2
         self.env = Environment(loader=FileSystemLoader(self.templates_dir))
 
-        # Setup markdown
+        # Setup markdown with toc extension for header anchors
-        self.md = markdown.Markdown(extensions=['extra'])
+        self.md = markdown.Markdown(extensions=['extra', 'toc'])
 
     def parse_filename(self, filename):
         """Parse filename format: YYYY-MM-DD_type_name[_feed].md"""
@@ -47,6 +47,20 @@ class SSGGGenerator:
             'filename': filename
         }
 
+    def add_header_anchors(self, html_content):
+        """Add anchor links to headers with IDs"""
+        # Pattern to match headers with id attributes: <h2 id="some-id">Text</h2>
+        def replace_header(match):
+            tag = match.group(1)
+            header_id = match.group(2)
+            text = match.group(3)
+            # Add anchor link with # symbol
+            return f'<{tag} id="{header_id}">{text} <a href="#{header_id}" class="header-anchor">#</a></{tag}>'
+
+        # Match h2-h6 tags with id attributes
+        pattern = r'<(h[2-6]) id="([^"]+)">([^<]+)<\/\1>'
+        return re.sub(pattern, replace_header, html_content)
+
     def read_post(self, filepath):
         """Read markdown file and extract title and content"""
         with open(filepath, 'r', encoding='utf-8') as f:
@@ -63,6 +77,9 @@ class SSGGGenerator:
         # Convert markdown to HTML
         html_content = self.md.convert(content)
 
+        # Add anchor links to headers
+        html_content = self.add_header_anchors(html_content)
+
         return title, html_content
 
     def collect_posts(self):