# calmchang/easy-js architecture

> Architecture diagram of the GitHub repository calmchang/easy-js, 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/calmchang/easy-js
- Repository: https://github.com/calmchang/easy-js

## Overview

EasyJs is a personal JavaScript-learning blog, accompanied by standalone browser demonstrations. The principal reader workflow is to open the blog, navigate topic material, and view rendered documentation; the bundled Docsify runtime includes routing/fetching and Markdown rendering. Separate interactive branches demonstrate DOM layout controls and 3D perspective manipulation. The README identifies the blog but does not document detailed navigation or content wiring, so those connections are shown as unverified; sampled source supports the demo interactions and plugins.

Main entry points: [`pluginJs/docsify.js`](https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify.js) (Docsify runtime), [`layout`](https://github.com/calmchang/easy-js/tree/master/layout) (Layout demo), [`transform3d/index.js`](https://github.com/calmchang/easy-js/blob/master/transform3d/index.js) (3D transform demo), [`transform3d/theatre/index.js`](https://github.com/calmchang/easy-js/blob/master/transform3d/theatre/index.js) (Perspective controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_docs["Blog runtime"]
  node_runtime["Docsify runtime<br/>[docsify.js]"]
end

subgraph group_topics["Learning topics"]
  node_basic["JavaScript basics"]
  node_browser["Browser topics"]
  node_cssdom["CSS and DOM"]
  node_dom["DOM topics"]
  node_react["React topics"]
  node_vue["Vue topics"]
  node_node["Node.js topics"]
  node_git["Git topics"]
  node_vscode["VS Code topics"]
end

subgraph group_demos["Browser demos"]
  node_layoutdemo["Layout demo"]
  node_drag["Resize control<br/>[drag.js]"]
  node_size["Size overlay<br/>[domsize.js]"]
  node_guide["Guide navigation<br/>[guide.js]"]
  node_transform["3D transform demo<br/>[index.js]"]
  node_theatre["Perspective controls<br/>[index.js]"]
  node_hammer["Gesture recognizer<br/>[hammer.js]"]
  node_axis["Axis display<br/>[index.js]"]
  node_log["Perspective readout<br/>[index.js]"]
end

subgraph group_extensions["Docsify extensions"]
  node_copy["Copy-code plugin"]
  node_panels["Example panels"]
end

node_reader(("Blog reader"))

node_reader -.->|"opens blog"| node_runtime
node_runtime -.->|"loads topics"| node_basic
node_runtime -.->|"loads topics"| node_browser
node_runtime -.->|"loads topics"| node_cssdom
node_runtime -.->|"loads topics"| node_dom
node_runtime -.->|"loads topics"| node_react
node_runtime -.->|"loads topics"| node_vue
node_runtime -.->|"loads topics"| node_node
node_runtime -.->|"loads topics"| node_git
node_runtime -.->|"loads topics"| node_vscode
node_layoutdemo -->|"uses control"| node_drag
node_layoutdemo -->|"shows dimensions"| node_size
node_layoutdemo -->|"adds navigation"| node_guide
node_theatre -->|"recognizes gestures"| node_hammer
node_transform -.->|"configures perspective"| node_theatre
node_transform -.->|"shows axis"| node_axis
node_transform -.->|"shows values"| node_log
node_runtime -.->|"supports plugin"| node_copy
node_runtime -.->|"supports plugin"| node_panels

click node_runtime "https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify.js"
click node_basic "https://github.com/calmchang/easy-js/tree/master/basic"
click node_browser "https://github.com/calmchang/easy-js/tree/master/browser"
click node_cssdom "https://github.com/calmchang/easy-js/tree/master/css"
click node_dom "https://github.com/calmchang/easy-js/tree/master/dom"
click node_react "https://github.com/calmchang/easy-js/tree/master/react"
click node_vue "https://github.com/calmchang/easy-js/tree/master/vue"
click node_node "https://github.com/calmchang/easy-js/tree/master/nodejs"
click node_git "https://github.com/calmchang/easy-js/tree/master/git"
click node_vscode "https://github.com/calmchang/easy-js/tree/master/vscode"
click node_layoutdemo "https://github.com/calmchang/easy-js/tree/master/layout"
click node_drag "https://github.com/calmchang/easy-js/blob/master/layout/drag.js"
click node_size "https://github.com/calmchang/easy-js/blob/master/layout/domsize.js"
click node_guide "https://github.com/calmchang/easy-js/blob/master/layout/guide.js"
click node_transform "https://github.com/calmchang/easy-js/blob/master/transform3d/index.js"
click node_theatre "https://github.com/calmchang/easy-js/blob/master/transform3d/theatre/index.js"
click node_hammer "https://github.com/calmchang/easy-js/blob/master/transform3d/hammer.js"
click node_axis "https://github.com/calmchang/easy-js/blob/master/transform3d/axis/index.js"
click node_log "https://github.com/calmchang/easy-js/blob/master/transform3d/log/index.js"
click node_copy "https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify-copy-code.js"
click node_panels "https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify-example-panels.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_runtime toneBlue
class node_basic,node_browser,node_cssdom,node_dom,node_react,node_vue,node_node,node_git,node_vscode toneAmber
class node_layoutdemo,node_drag,node_size,node_guide,node_transform,node_theatre,node_hammer,node_axis,node_log toneMint
class node_copy,node_panels toneRose
class node_reader toneIndigo
```

## Components

### Blog runtime

- [Docsify runtime](https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify.js): `pluginJs/docsify.js`

### Learning topics

- [JavaScript basics](https://github.com/calmchang/easy-js/tree/master/basic): `basic`
- [Browser topics](https://github.com/calmchang/easy-js/tree/master/browser): `browser`
- [CSS and DOM](https://github.com/calmchang/easy-js/tree/master/css): `css`
- [DOM topics](https://github.com/calmchang/easy-js/tree/master/dom): `dom`
- [React topics](https://github.com/calmchang/easy-js/tree/master/react): `react`
- [Vue topics](https://github.com/calmchang/easy-js/tree/master/vue): `vue`
- [Node.js topics](https://github.com/calmchang/easy-js/tree/master/nodejs): `nodejs`
- [Git topics](https://github.com/calmchang/easy-js/tree/master/git): `git`
- [VS Code topics](https://github.com/calmchang/easy-js/tree/master/vscode): `vscode`

### Browser demos

- [Layout demo](https://github.com/calmchang/easy-js/tree/master/layout): `layout`
- [Resize control](https://github.com/calmchang/easy-js/blob/master/layout/drag.js): `layout/drag.js`
- [Size overlay](https://github.com/calmchang/easy-js/blob/master/layout/domsize.js): `layout/domsize.js`
- [Guide navigation](https://github.com/calmchang/easy-js/blob/master/layout/guide.js): `layout/guide.js`
- [3D transform demo](https://github.com/calmchang/easy-js/blob/master/transform3d/index.js): `transform3d/index.js`
- [Perspective controls](https://github.com/calmchang/easy-js/blob/master/transform3d/theatre/index.js): `transform3d/theatre/index.js`
- [Gesture recognizer](https://github.com/calmchang/easy-js/blob/master/transform3d/hammer.js): `transform3d/hammer.js`
- [Axis display](https://github.com/calmchang/easy-js/blob/master/transform3d/axis/index.js): `transform3d/axis/index.js`
- [Perspective readout](https://github.com/calmchang/easy-js/blob/master/transform3d/log/index.js): `transform3d/log/index.js`

### Docsify extensions

- [Copy-code plugin](https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify-copy-code.js): `pluginJs/docsify-copy-code.js`
- [Example panels](https://github.com/calmchang/easy-js/blob/master/pluginJs/docsify-example-panels.js): `pluginJs/docsify-example-panels.js`

### Other components

- **Blog reader**

## Connections

- Blog reader → Docsify runtime: opens blog (evidence: `README.md`)
- Docsify runtime → JavaScript basics: loads topics
- Docsify runtime → Browser topics: loads topics
- Docsify runtime → CSS and DOM: loads topics
- Docsify runtime → DOM topics: loads topics
- Docsify runtime → React topics: loads topics
- Docsify runtime → Vue topics: loads topics
- Docsify runtime → Node.js topics: loads topics
- Docsify runtime → Git topics: loads topics
- Docsify runtime → VS Code topics: loads topics
- Layout demo → Resize control: uses control (evidence: `layout/drag.js`)
- Layout demo → Size overlay: shows dimensions (evidence: `layout/domsize.js`)
- Layout demo → Guide navigation: adds navigation (evidence: `layout/guide.js`)
- Perspective controls → Gesture recognizer: recognizes gestures (evidence: `transform3d/theatre/index.js`)
- 3D transform demo → Perspective controls: configures perspective
- 3D transform demo → Axis display: shows axis
- 3D transform demo → Perspective readout: shows values
- Docsify runtime → Copy-code plugin: supports plugin
- Docsify runtime → Example panels: supports plugin