Side Projects

The SHTF Playbook Wrapper

2 min read

📕 The SHTF Playbook Wrapper

We had an internal playbook called “Scale, Hire, Train, Fire” (SHTF) — a comprehensive guide for founders on building and managing teams. The content lived in Notion, and while Notion is great for editing, it’s not great as a reading experience for someone outside the organisation. Public Notion pages are clunky, slow, and don’t feel polished.

So I built a custom web wrapper that takes raw Notion HTML exports and presents them in a purpose-built reader — without modifying the exports themselves.

Architecture

The project has a key design constraint: zero modification of source exports. The Notion HTML files are used as-is. All styling and behaviour is applied externally. This means updating the playbook is as simple as re-exporting from Notion and dropping the file in.

The system has two views:

  1. Landing page — a dark-themed marketing-style homepage with a hero section and card grid linking to the five pillars (Scale, Hire, Train, Fire, Reflect)
  2. Reader — the actual reading experience, which fetches a Notion export via fetch(), parses it with DOMParser, strips Notion’s inline styles and built-in TOC, generates heading IDs and anchor links, and builds a sidebar table of contents from the h2/h3 headings

A manifest.json acts as the routing config, mapping section keys to their corresponding export file paths. Python scripts handle the housekeeping — cataloguing new exports, splitting monolithic files into sections, and building the static output for GitHub Pages.

Reader features

  • Sticky sidebar TOC with IntersectionObserver-based active heading tracking
  • Client-side full-text search with match highlighting
  • Linear and circular progress indicators
  • Previous/next section navigation with keyboard shortcuts
  • Dark/light theme toggle with localStorage persistence
  • Mobile-responsive sidebar

What I like about it

The separation of concerns is clean — Notion is the CMS, the wrapper is the presentation layer. No build step, no framework, no npm. Just vanilla HTML/CSS/JS and some Python scripts for automation. And the acronym is a happy coincidence.

Tech: Vanilla HTML/CSS/JS, Python scripts, hosted on GitHub Pages.