Site Architecture & Content Sitemap
This page is a visual guide to how content is organized on barbhs.com.
I use diagrams (rendered from Mermaid and exported as SVG) to keep the site structure understandable both for myself and for visitors.
Below, you’ll see a layered approach:
- A high-level top‑level structure diagram
- Focused diagrams for modern collections and blog architecture
- An interactive full sitemap that exposes all the detail
I try to keep this page current, which doesn’t always happen, but see Last Updated date at the bottom. See also this post about how to generate these diagrams and related workflow tips.
1. Top‑Level Site Structure: High‑Level Overview
This diagram shows only the primary navigation hubs and major content areas.
It’s the fastest way to understand what lives where on barbhs.com and what’s being transitioned.
Click to open the high-resolution diagram in a new tab.
Color convention for diagram nodes:
🟣 Home
🔵 Modern Collections/Hubs: Projects, Data Stories, Thinking, Resources
🟠 Legacy Collections: Portfolio and Supplementary Content (content being migrated, as of Nov 2025)
2. Content Hubs: Projects, Data Stories, Thinking, Resources
The heart of the site is a set of modern content collections:
- Projects –> Hands‑on, end‑to‑end builds with demos and documenation
- Data Stories –> Narrative-style, visual walkthroughs of real datasets
- Thinking –> Essays and conceptual pieces
- Resources – reusable templates, guides, and references
The diagram below zooms into these collections and their key items, plus the legacy Portfolio.
Click to open the high-resolution diagram in a new tab.
Color convention for diagram nodes:
🔵 Content hubs: Projects, Data Stories Thinking, Resources
🟣 Data Stories: Technical narratives and case studies
🟢 Thinking: Writing, e.g. essays and conceptual pieces
🔴 WIP: Projects, mostly, in progress but sharable-state
🟠 Legacy Content: Largely blogs including series and individual posts
3. Blog Architecture: Series, Individual Posts, and Archives
The Blog is the longest-running part of the site and contains:
- multi‑part series (like Website Building and Sensor Fleet),
- individual posts (e.g., project write‑ups, reflections),
- and archive pages (by tag and category).
This diagram shows how the pieces fit together:
Click to open the full blog architecture diagram in a new tab.
4. Full Detailed Sitemap, with Clickable Links 🔗
The diagrams above give you usable mental models without overwhelming detail.
If you’d like to see everything at once, the full sitemap below exposes all the nodes and links.
One cool think about the diagram is that (many) of the nodes are clickable links! Hover over nodes to see tooltips with additional context:
Open the full‑size sitemap in a new tab to zoom and explore every branch.
How I Maintain This Map
account_tree This sitemap isn’t a one‑off artifact; it’s part of my content workflow:
- I keep the Mermaid source files for each diagram in a
/diagrams/folder. - I export updated SVGs whenever the structure changes.
- I treat this page as a living document that evolves as the site does.
bookmark_check In practice, when I…
- Add a major new section (e.g., a new collection or series), I update the relevant diagram and regenerate the SVG.
- Refactor navigation, this page is where I sanity‑check whether the new structure is still coherent..
If you’re building your own site or knowledge base, I recommend:
keyboard_arrow_right
Starting with a high‑level diagram like the one at the top of this page
keyboard_arrow_right
Adding focused sub‑maps for your most important content hubs
keyboard_arrow_right
Keeping one full, detailed sitemap off to the side for periodic review
It’s a small investment that makes your content ecosystem much easier to grow and maintain.
Last updated: 2025-11-21