# zhan-zip/zhan-blog architecture

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

- Interactive diagram: https://gitdiagram.com/zhan-zip/zhan-blog
- Repository: https://github.com/zhan-zip/zhan-blog

## Overview

Zhan-Blog is a static personal-brand and technical-blog site. Its main visitor workflow is browsing published Markdown content and using the client-side Pagefind search to find pages; the site also publishes RSS and supports contact and email-subscription conversion. The README documents further capabilities—including services, analytics, and a GitHub-API-backed admin editor—that are not fully represented in the supplied tree or sampled implementation. The graph includes those only where a concrete path or documented integration supports them; it does not infer their internal wiring.

Main entry points: [`src`](https://github.com/zhan-zip/zhan-blog/tree/main/src) (Static blog site), [`src/content`](https://github.com/zhan-zip/zhan-blog/tree/main/src/content) (Markdown content), [`src/pages/rss.xml.ts`](https://github.com/zhan-zip/zhan-blog/blob/main/src/pages/rss.xml.ts) (RSS feed), [`src/components/Search.svelte`](https://github.com/zhan-zip/zhan-blog/blob/main/src/components/Search.svelte) (Offline search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Content and publishing"]
  node_markdown["Markdown content"]
  node_content_utils["Post utilities<br/>[content-utils.ts]"]
  node_rss["RSS feed<br/>[rss.xml.ts]"]
  node_markdown_plugins["Markdown enhancements"]
  node_github_card["Repository cards"]
end

subgraph group_site["Visitor experience"]
  node_site["Static blog site"]
  node_search["Offline search<br/>[Search.svelte]"]
  node_theme["Display preferences"]
  node_archive["Archive browsing"]
  node_translations["Translations<br/>[translation.ts]"]
  node_contact["Contact form"]
  node_subscription["Email subscription<br/>[notify.js]"]
end

subgraph group_integrations["External services"]
  node_pagefind[("Pagefind index")]
  node_web3forms["Web3Forms"]
  node_mail["SMTP mail<br/>[mail.js]"]
  node_analytics["Umami analytics"]
  node_github_api["GitHub API"]
end

subgraph group_authoring["Authoring tools"]
  node_editor["Markdown editor<br/>[editormd.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"browses"| node_site
node_markdown -->|"renders as pages"| node_site
node_visitor -->|"searches"| node_search
node_search -->|"queries index"| node_pagefind
node_rss -->|"gets sorted posts"| node_content_utils
node_rss -->|"serves feed"| node_visitor
node_markdown -->|"uses directives"| node_markdown_plugins
node_visitor -->|"changes hue"| node_theme
node_visitor -->|"browses archive"| node_archive
node_site -->|"localizes UI"| node_translations
node_visitor -.->|"submits inquiry"| node_contact
node_contact -.->|"sends form"| node_web3forms
node_visitor -.->|"subscribes"| node_subscription
node_subscription -.->|"sends mail"| node_mail
node_site -.->|"reports usage"| node_analytics
node_editor -.->|"writes content"| node_github_api
node_github_card -.->|"fetches repository"| node_github_api

click node_markdown "https://github.com/zhan-zip/zhan-blog/tree/main/src/content"
click node_site "https://github.com/zhan-zip/zhan-blog/tree/main/src"
click node_search "https://github.com/zhan-zip/zhan-blog/blob/main/src/components/Search.svelte"
click node_content_utils "https://github.com/zhan-zip/zhan-blog/blob/main/src/utils/content-utils.ts"
click node_rss "https://github.com/zhan-zip/zhan-blog/blob/main/src/pages/rss.xml.ts"
click node_markdown_plugins "https://github.com/zhan-zip/zhan-blog/tree/main/src/plugins"
click node_theme "https://github.com/zhan-zip/zhan-blog/blob/main/src/components/widget/DisplaySettings.svelte"
click node_archive "https://github.com/zhan-zip/zhan-blog/blob/main/src/components/ArchivePanel.svelte"
click node_translations "https://github.com/zhan-zip/zhan-blog/blob/main/src/i18n/translation.ts"
click node_contact "https://github.com/zhan-zip/zhan-blog/tree/main/src/content"
click node_subscription "https://github.com/zhan-zip/zhan-blog/blob/main/scripts/notify.js"
click node_mail "https://github.com/zhan-zip/zhan-blog/blob/main/scripts/mail.js"
click node_editor "https://github.com/zhan-zip/zhan-blog/blob/main/public/lib/editormd/editormd.js"
click node_github_card "https://github.com/zhan-zip/zhan-blog/blob/main/src/plugins/rehype-component-github-card.mjs"

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_markdown,node_content_utils,node_rss,node_markdown_plugins,node_github_card toneBlue
class node_site,node_search,node_theme,node_archive,node_translations,node_contact,node_subscription toneAmber
class node_pagefind,node_web3forms,node_mail,node_analytics,node_github_api toneMint
class node_editor toneRose
class node_visitor toneIndigo
```

## Components

### Content and publishing

- [Markdown content](https://github.com/zhan-zip/zhan-blog/tree/main/src/content): `src/content`
- [Post utilities](https://github.com/zhan-zip/zhan-blog/blob/main/src/utils/content-utils.ts): `src/utils/content-utils.ts`
- [RSS feed](https://github.com/zhan-zip/zhan-blog/blob/main/src/pages/rss.xml.ts): `src/pages/rss.xml.ts`
- [Markdown enhancements](https://github.com/zhan-zip/zhan-blog/tree/main/src/plugins): `src/plugins`
- [Repository cards](https://github.com/zhan-zip/zhan-blog/blob/main/src/plugins/rehype-component-github-card.mjs): `src/plugins/rehype-component-github-card.mjs`

### Visitor experience

- [Static blog site](https://github.com/zhan-zip/zhan-blog/tree/main/src): `src`
- [Offline search](https://github.com/zhan-zip/zhan-blog/blob/main/src/components/Search.svelte): `src/components/Search.svelte`
- [Display preferences](https://github.com/zhan-zip/zhan-blog/blob/main/src/components/widget/DisplaySettings.svelte): `src/components/widget/DisplaySettings.svelte`
- [Archive browsing](https://github.com/zhan-zip/zhan-blog/blob/main/src/components/ArchivePanel.svelte): `src/components/ArchivePanel.svelte`
- [Translations](https://github.com/zhan-zip/zhan-blog/blob/main/src/i18n/translation.ts): `src/i18n/translation.ts`
- [Contact form](https://github.com/zhan-zip/zhan-blog/tree/main/src/content): `src/content`
- [Email subscription](https://github.com/zhan-zip/zhan-blog/blob/main/scripts/notify.js): `scripts/notify.js`

### External services

- **Pagefind index**
- **Web3Forms**
- [SMTP mail](https://github.com/zhan-zip/zhan-blog/blob/main/scripts/mail.js): `scripts/mail.js`
- **Umami analytics**
- **GitHub API**

### Authoring tools

- [Markdown editor](https://github.com/zhan-zip/zhan-blog/blob/main/public/lib/editormd/editormd.js): `public/lib/editormd/editormd.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → Static blog site: browses
- Markdown content → Static blog site: renders as pages
- Site visitor → Offline search: searches
- Offline search → Pagefind index: queries index
- RSS feed → Post utilities: gets sorted posts
- RSS feed → Site visitor: serves feed
- Markdown content → Markdown enhancements: uses directives
- Site visitor → Display preferences: changes hue
- Site visitor → Archive browsing: browses archive
- Static blog site → Translations: localizes UI
- Site visitor → Contact form: submits inquiry
- Contact form → Web3Forms: sends form
- Site visitor → Email subscription: subscribes
- Email subscription → SMTP mail: sends mail
- Static blog site → Umami analytics: reports usage
- Markdown editor → GitHub API: writes content
- Repository cards → GitHub API: fetches repository