Blogstage

[margaretdu]

Summary

Adds a complete blog system to the site: a searchable, filterable post list and individual post pages with syntax-highlighted code, an auto-generated index, and read-time / last-updated metadata derived at build time.

What's new

Blog list page (blog_list.html)

• Card grid of all posts with date pill, read-time pill, title, author, "Last updated on…" line, and a temporary 25-word preview
• Full-width search bar (matches against title, author, preview, and date)
• Date range filter (From / To)
• Read time filter (Min / Max minutes)
• Single Reset filters button styled to match the site's primary button language

Individual post page (blog.html)

• Typography pass: reading column capped at 760px, serif headings, tuned line-height and vertical rhythm, meta block (author · read time) with a divider below the "Last updated on" line
• Syntax highlighting via highlight.js (Atom One Dark theme), supporting both explicit language hints (e.g. ```python) and auto-detection across 30+ languages
• Custom thin scrollbars (Firefox + WebKit) for in-page elements

Build pipeline

• scripts/build_blog_index.py walks blogs/<YYYY-MM-DD>/*.md, parses frontmatter, and writes data/blogs.json with:
  • title, author, preview (first 25 words, markdown stripped)
  • date / date_display (parsed from folder name)
  • last_updated (max mtime of any file in the folder)
  • word_count and read_time_min (238 wpm, ceiling, minimum 1)
• Read time renders as N min read up to 60 min, then H hr M min read (or H hr read on round hours)

Tooling

• scripts/gen_stress_post.py generates a long, structured lorem-ipsum post (mixed headings, paragraphs, lists, blockquotes, code blocks in Python/JS/Bash, inline code, links, bold/italic, horizontal rules) for visually stress-testing long-form rendering

Authoring a post

1. Create a folder blogs/YYYY-MM-DD/ (the date in the folder name drives the post's date tag and sort order)
2. Add a markdown file inside it with frontmatter:

   ---
   title: "Your post title"
   author: "Author Name"
   ---
   
   Body content goes here…

   Include images inside the folder
3. Run python scripts/build_blog_index.py to regenerate data/blogs.json
4. The post appears automatically on the blog list

Sample images with fake blog posts (credit to Jane for first two):

[janezdu]

Lol my bad, didn't change the author metadata in the `.md`. We can publish the instructions for testing locally somewhere, later:

python3 scripts/build_blog_index.py
python3 -m http.server 8080