# joeseesun/learnui architecture

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

- Interactive diagram: https://gitdiagram.com/joeseesun/learnui
- Repository: https://github.com/joeseesun/learnui

## Overview

Learn UI Name is a bilingual visual dictionary and style atlas, delivered as a static website. Visitors browse interactive UI specimens, learn their names and implementation terminology, and can explore style references, guides, search, and quizzes. The documented build workflow combines structured English/Chinese content and specimen HTML into site pages; browser scripts provide interactive features, while the service worker supports offline reading. Runtime source excerpts are limited, so interaction links below rely on README documentation rather than inspected JavaScript.

Main entry points: [`build.py`](https://github.com/joeseesun/learnui/blob/main/build.py) (Static site builder), [`assets/site.js`](https://github.com/joeseesun/learnui/blob/main/assets/site.js) (Site interactions), [`assets/quiz.js`](https://github.com/joeseesun/learnui/blob/main/assets/quiz.js) (Quiz interactions), [`sw.js`](https://github.com/joeseesun/learnui/blob/main/sw.js) (Offline service worker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Dictionary content"]
  node_entries["UI entries<br/>[entries.json]"]
  node_translations["Chinese translations"]
  node_guides["Guides and terms<br/>[guides.json]"]
  node_translation_table["Framework translation table"]
  node_specimens["Interactive specimens"]
end

subgraph group_styles["Style atlas"]
  node_style_data["Style references<br/>[styles.json]"]
  node_style_meta["Atlas metadata<br/>[styles-meta.json]"]
  node_style_pages["Style atlas pages<br/>[build.py]"]
end

subgraph group_generation["Site generation"]
  node_builder["Static site builder<br/>[build.py]"]
  node_ui_copy["Bilingual UI copy<br/>[ui.json]"]
end

subgraph group_experience["Browser experience"]
  node_pages["Dictionary pages<br/>[build.py]"]
  node_site_js["Site interactions<br/>[site.js]"]
  node_quiz_js["Quiz interactions<br/>[quiz.js]"]
  node_site_css["Site styling<br/>[site.css]"]
  node_browser_state[("Local progress")]
end

subgraph group_offline["Offline support"]
  node_service_worker["Offline service worker<br/>[sw.js]"]
  node_cache[("Offline cache")]
end

node_visitor(("Visitor"))
node_dictionary_api["Dictionary API"]

node_visitor -->|"browses"| node_pages
node_visitor -->|"explores styles"| node_style_pages
node_visitor -->|"searches and copies"| node_site_js
node_visitor -->|"takes quiz"| node_quiz_js
node_entries -->|"supplies entries"| node_builder
node_translations -->|"supplies translations"| node_builder
node_guides -->|"supplies guides"| node_builder
node_translation_table -->|"supplies terms"| node_builder
node_specimens -->|"supplies specimens"| node_builder
node_style_data -->|"supplies styles"| node_builder
node_style_meta -->|"supplies atlas copy"| node_builder
node_ui_copy -->|"supplies UI text"| node_builder
node_builder -->|"generates pages"| node_pages
node_builder -->|"generates atlas"| node_style_pages
node_pages -.->|"enables interactions"| node_site_js
node_pages -.->|"uses styling"| node_site_css
node_site_js -.->|"looks up words"| node_dictionary_api
node_quiz_js -.->|"stores mastery"| node_browser_state
node_site_js -.->|"persists reading mode"| node_browser_state
node_service_worker -->|"caches pages"| node_cache
node_visitor -.->|"reads offline"| node_service_worker

click node_pages "https://github.com/joeseesun/learnui/blob/main/build.py"
click node_entries "https://github.com/joeseesun/learnui/blob/main/data/entries.json"
click node_translations "https://github.com/joeseesun/learnui/tree/main/data/zh"
click node_guides "https://github.com/joeseesun/learnui/blob/main/data/guides.json"
click node_translation_table "https://github.com/joeseesun/learnui/blob/main/data/translate-table.json"
click node_specimens "https://github.com/joeseesun/learnui/tree/main/demos"
click node_style_data "https://github.com/joeseesun/learnui/blob/main/data/styles.json"
click node_style_meta "https://github.com/joeseesun/learnui/blob/main/data/styles-meta.json"
click node_style_pages "https://github.com/joeseesun/learnui/blob/main/build.py"
click node_builder "https://github.com/joeseesun/learnui/blob/main/build.py"
click node_ui_copy "https://github.com/joeseesun/learnui/blob/main/data/ui.json"
click node_site_js "https://github.com/joeseesun/learnui/blob/main/assets/site.js"
click node_quiz_js "https://github.com/joeseesun/learnui/blob/main/assets/quiz.js"
click node_site_css "https://github.com/joeseesun/learnui/blob/main/assets/site.css"
click node_service_worker "https://github.com/joeseesun/learnui/blob/main/sw.js"

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_entries,node_translations,node_guides,node_translation_table,node_specimens toneBlue
class node_style_data,node_style_meta,node_style_pages toneAmber
class node_builder,node_ui_copy,node_dictionary_api toneMint
class node_pages,node_site_js,node_quiz_js,node_site_css,node_browser_state toneRose
class node_service_worker,node_cache,node_visitor toneIndigo
```

## Components

### Dictionary content

- [UI entries](https://github.com/joeseesun/learnui/blob/main/data/entries.json): `data/entries.json`
- [Chinese translations](https://github.com/joeseesun/learnui/tree/main/data/zh): `data/zh`
- [Guides and terms](https://github.com/joeseesun/learnui/blob/main/data/guides.json): `data/guides.json`
- [Framework translation table](https://github.com/joeseesun/learnui/blob/main/data/translate-table.json): `data/translate-table.json`
- [Interactive specimens](https://github.com/joeseesun/learnui/tree/main/demos): `demos`

### Style atlas

- [Style references](https://github.com/joeseesun/learnui/blob/main/data/styles.json): `data/styles.json`
- [Atlas metadata](https://github.com/joeseesun/learnui/blob/main/data/styles-meta.json): `data/styles-meta.json`
- [Style atlas pages](https://github.com/joeseesun/learnui/blob/main/build.py): `build.py`

### Site generation

- [Static site builder](https://github.com/joeseesun/learnui/blob/main/build.py): `build.py`
- [Bilingual UI copy](https://github.com/joeseesun/learnui/blob/main/data/ui.json): `data/ui.json`

### Browser experience

- [Dictionary pages](https://github.com/joeseesun/learnui/blob/main/build.py): `build.py`
- [Site interactions](https://github.com/joeseesun/learnui/blob/main/assets/site.js): `assets/site.js`
- [Quiz interactions](https://github.com/joeseesun/learnui/blob/main/assets/quiz.js): `assets/quiz.js`
- [Site styling](https://github.com/joeseesun/learnui/blob/main/assets/site.css): `assets/site.css`
- **Local progress**

### Offline support

- [Offline service worker](https://github.com/joeseesun/learnui/blob/main/sw.js): `sw.js`
- **Offline cache**

### Other components

- **Visitor**
- **Dictionary API**

## Connections

- Visitor → Dictionary pages: browses (evidence: `README.md`)
- Visitor → Style atlas pages: explores styles (evidence: `README.md`)
- Visitor → Site interactions: searches and copies (evidence: `README.md`)
- Visitor → Quiz interactions: takes quiz (evidence: `README.md`)
- UI entries → Static site builder: supplies entries (evidence: `README.md`)
- Chinese translations → Static site builder: supplies translations (evidence: `README.md`)
- Guides and terms → Static site builder: supplies guides (evidence: `README.md`)
- Framework translation table → Static site builder: supplies terms (evidence: `README.md`)
- Interactive specimens → Static site builder: supplies specimens (evidence: `README.md`)
- Style references → Static site builder: supplies styles (evidence: `README.md`)
- Atlas metadata → Static site builder: supplies atlas copy (evidence: `README.md`)
- Bilingual UI copy → Static site builder: supplies UI text (evidence: `README.md`)
- Static site builder → Dictionary pages: generates pages (evidence: `README.md`)
- Static site builder → Style atlas pages: generates atlas (evidence: `README.md`)
- Dictionary pages → Site interactions: enables interactions
- Dictionary pages → Site styling: uses styling
- Site interactions → Dictionary API: looks up words (evidence: `README.md`)
- Quiz interactions → Local progress: stores mastery (evidence: `README.md`)
- Site interactions → Local progress: persists reading mode (evidence: `README.md`)
- Offline service worker → Offline cache: caches pages (evidence: `sw.js`)
- Visitor → Offline service worker: reads offline (evidence: `README.md`)