How joeseesun/learnui works
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 Static site builder · site.js Site interactions · quiz.js Quiz interactions · sw.js Offline service worker
Components 19
Dictionary content
- UI entries
data/entries.json - Chinese translations
data/zh - Guides and terms
data/guides.json - Framework translation table
data/translate-table.json - Interactive specimens
demos
Style atlas
- Style references
data/styles.json - Atlas metadata
data/styles-meta.json - Style atlas pages
build.py
Site generation
- Static site builder
build.py - Bilingual UI copy
data/ui.json
Browser experience
- Dictionary pages
build.py - Site interactions
assets/site.js - Quiz interactions
assets/quiz.js - Site styling
assets/site.css - Local progress
Offline support
- Offline service worker
sw.js - Offline cache
Other components
- Visitor
- Dictionary API
Connections 21
- Visitor → Dictionary pages: browses
README.md - Visitor → Style atlas pages: explores styles
README.md - Visitor → Site interactions: searches and copies
README.md - Visitor → Quiz interactions: takes quiz
README.md - UI entries → Static site builder: supplies entries
README.md - Chinese translations → Static site builder: supplies translations
README.md - Guides and terms → Static site builder: supplies guides
README.md - Framework translation table → Static site builder: supplies terms
README.md - Interactive specimens → Static site builder: supplies specimens
README.md - Style references → Static site builder: supplies styles
README.md - Atlas metadata → Static site builder: supplies atlas copy
README.md - Bilingual UI copy → Static site builder: supplies UI text
README.md - Static site builder → Dictionary pages: generates pages
README.md - Static site builder → Style atlas pages: generates atlas
README.md - Dictionary pages → Site interactions: enables interactions
- Dictionary pages → Site styling: uses styling
- Site interactions → Dictionary API: looks up words
README.md - Quiz interactions → Local progress: stores mastery
README.md - Site interactions → Local progress: persists reading mode
README.md - Offline service worker → Offline cache: caches pages
sw.js - Visitor → Offline service worker: reads offline
README.md