# b-3llum/writing architecture

> Architecture diagram of the GitHub repository b-3llum/writing, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/b-3llum/writing
- Repository: https://github.com/b-3llum/writing

## Overview

CISA Write-ups is a static publishing site: members add Markdown write-ups and list them in a manifest; visitors browse, search or filter the index, then open and read a rendered write-up. The browser app also provides navigation, post enhancements, and theme selection, while the repository includes a committed Atom feed. The README documents math rendering and other presentation features; unsampled implementation details and absent vendor paths are not expanded here.

Main entry points: [`index.html`](https://github.com/b-3llum/writing/blob/main/index.html) (Page structure), [`app.js`](https://github.com/b-3llum/writing/blob/main/app.js) (Browser app), [`theme.js`](https://github.com/b-3llum/writing/blob/main/theme.js) (Theme toggle), [`posts.json`](https://github.com/b-3llum/writing/blob/main/posts.json) (Post manifest)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_publishing["Write-up content"]
  node_manifest["Post manifest<br/>[posts.json]"]
  node_writeups["Markdown write-ups"]
  node_attachments["Post images"]
end

subgraph group_site["Browser site"]
  node_entry["Page structure<br/>[index.html]"]
  node_app["Browser app<br/>[app.js]"]
  node_theme["Theme toggle<br/>[theme.js]"]
  node_styles["Visual styling<br/>[styles.css]"]
end

subgraph group_distribution["Published outputs"]
  node_feed["Atom feed<br/>[feed.xml]"]
  node_fonts["Self-hosted fonts"]
  node_images["Site logo assets"]
end

node_member(("Club member"))
node_visitor(("Site visitor"))
node_reader(("Feed reader"))
node_pages{{"GitHub Pages"}}
node_browser(("Browser"))
node_localstorage[("Theme preference")]

node_member -->|"writes"| node_writeups
node_member -->|"lists post"| node_manifest
node_pages -->|"serves"| node_entry
node_pages -->|"serves"| node_app
node_pages -->|"serves"| node_styles
node_pages -->|"serves"| node_theme
node_pages -->|"serves"| node_manifest
node_pages -->|"serves"| node_writeups
node_pages -->|"serves"| node_attachments
node_pages -->|"serves"| node_feed
node_pages -->|"serves"| node_fonts
node_pages -->|"serves"| node_images
node_visitor -->|"uses"| node_browser
node_browser -->|"loads"| node_entry
node_entry -->|"starts"| node_app
node_entry -->|"starts"| node_theme
node_entry -->|"loads"| node_styles
node_app -->|"fetches"| node_manifest
node_app -->|"fetches"| node_writeups
node_app -->|"renders index and posts"| node_browser
node_browser -->|"loads referenced images"| node_attachments
node_theme -->|"reads and writes"| node_localstorage
node_reader -->|"reads"| node_feed

click node_manifest "https://github.com/b-3llum/writing/blob/main/posts.json"
click node_writeups "https://github.com/b-3llum/writing/tree/main/posts"
click node_attachments "https://github.com/b-3llum/writing/tree/main/posts/Attachments"
click node_entry "https://github.com/b-3llum/writing/blob/main/index.html"
click node_app "https://github.com/b-3llum/writing/blob/main/app.js"
click node_theme "https://github.com/b-3llum/writing/blob/main/theme.js"
click node_styles "https://github.com/b-3llum/writing/blob/main/styles.css"
click node_feed "https://github.com/b-3llum/writing/blob/main/feed.xml"
click node_fonts "https://github.com/b-3llum/writing/tree/main/fonts"
click node_images "https://github.com/b-3llum/writing/tree/main/img"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_manifest,node_writeups,node_attachments,node_browser toneBlue
class node_entry,node_app,node_theme,node_styles,node_localstorage toneAmber
class node_feed,node_fonts,node_images toneMint
class node_member,node_visitor,node_reader,node_pages toneIndigo
```

## Components

### Write-up content

- [Post manifest](https://github.com/b-3llum/writing/blob/main/posts.json): `posts.json`
- [Markdown write-ups](https://github.com/b-3llum/writing/tree/main/posts): `posts`
- [Post images](https://github.com/b-3llum/writing/tree/main/posts/Attachments): `posts/Attachments`

### Browser site

- [Page structure](https://github.com/b-3llum/writing/blob/main/index.html): `index.html`
- [Browser app](https://github.com/b-3llum/writing/blob/main/app.js): `app.js`
- [Theme toggle](https://github.com/b-3llum/writing/blob/main/theme.js): `theme.js`
- [Visual styling](https://github.com/b-3llum/writing/blob/main/styles.css): `styles.css`

### Published outputs

- [Atom feed](https://github.com/b-3llum/writing/blob/main/feed.xml): `feed.xml`
- [Self-hosted fonts](https://github.com/b-3llum/writing/tree/main/fonts): `fonts`
- [Site logo assets](https://github.com/b-3llum/writing/tree/main/img): `img`

### Other components

- **Club member**
- **Site visitor**
- **Feed reader**
- **GitHub Pages**
- **Browser**
- **Theme preference**

## Connections

- Club member → Markdown write-ups: writes
- Club member → Post manifest: lists post
- GitHub Pages → Page structure: serves
- GitHub Pages → Browser app: serves
- GitHub Pages → Visual styling: serves
- GitHub Pages → Theme toggle: serves
- GitHub Pages → Post manifest: serves
- GitHub Pages → Markdown write-ups: serves
- GitHub Pages → Post images: serves
- GitHub Pages → Atom feed: serves
- GitHub Pages → Self-hosted fonts: serves
- GitHub Pages → Site logo assets: serves
- Site visitor → Browser: uses
- Browser → Page structure: loads
- Page structure → Browser app: starts
- Page structure → Theme toggle: starts
- Page structure → Visual styling: loads
- Browser app → Post manifest: fetches
- Browser app → Markdown write-ups: fetches
- Browser app → Browser: renders index and posts
- Browser → Post images: loads referenced images
- Theme toggle → Theme preference: reads and writes
- Feed reader → Atom feed: reads