# penguinmod/penguinmod-extensionsgallery architecture

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

- Interactive diagram: https://gitdiagram.com/penguinmod/penguinmod-extensionsgallery
- Repository: https://github.com/penguinmod/penguinmod-extensionsgallery

## Overview

Extension Gallery is a Svelte site for discovering PenguinMod/Scratch extensions and trying them in a project. A visitor searches the gallery, browses extension cards and their metadata, then can use a card’s project-loading action; the README also describes adding extension code and optional banners and tutorials. The graph captures documented and excerpted relationships; route-to-component wiring and some loader behavior are not shown, so those links are marked unverified.

Main entry points: [`src/lib/Extension/Component.svelte`](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/Extension/Component.svelte) (Extension Card), [`src/lib/NavigationBar/Component.svelte`](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Component.svelte) (Navigation Bar), [`src/routes/+page.svelte`](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/routes/%2Bpage.svelte) (Gallery Page), [`src/lib/state/searchBar.svelte.js`](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/state/searchBar.svelte.js) (Search State)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gallery["Gallery UI"]
  node_gallery_page["Gallery Page<br/>[+page.svelte]"]
  node_navigation["Navigation Bar<br/>[Component.svelte]"]
  node_nav_page["Navigation Page Button<br/>[Page.svelte]"]
  node_nav_button["Navigation Button<br/>[Button.svelte]"]
  node_extension_card["Extension Card<br/>[Component.svelte]"]
end

subgraph group_catalog["Catalog Data"]
  node_search_state["Search State"]
  node_app_state["App State<br/>[app.svelte.js]"]
  node_extension_catalog["Extension Catalog<br/>[extensions.js]"]
  node_tag_definitions["Tag Definitions<br/>[extension-tags.js]"]
end

subgraph group_runtime["Project Loading"]
  node_load_page["Load Page<br/>[+page.svelte]"]
  node_extension_loader["Extension Loader"]
end

subgraph group_extensions["Extension Code"]
  node_extension_files["Extension Files"]
end

node_visitor(("Visitor"))

node_visitor -.->|"browses"| node_gallery_page
node_gallery_page -.->|"renders"| node_extension_card
node_navigation -->|"renders"| node_nav_page
node_navigation -->|"renders"| node_nav_button
node_navigation -->|"updates"| node_search_state
node_extension_card -->|"updates"| node_search_state
node_extension_card -->|"reads"| node_app_state
node_extension_card -->|"reads"| node_tag_definitions
node_extension_card -.->|"loads"| node_extension_loader
node_load_page -.->|"uses"| node_extension_loader
node_extension_catalog -.->|"describes"| node_extension_files
node_visitor -->|"submits code"| node_extension_files

click node_gallery_page "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/routes/%2Bpage.svelte"
click node_navigation "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Component.svelte"
click node_nav_page "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Page.svelte"
click node_nav_button "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Button.svelte"
click node_extension_card "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/Extension/Component.svelte"
click node_load_page "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/routes/load/%2Bpage.svelte"
click node_extension_loader "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/extension-loader.js"
click node_search_state "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/state/searchBar.svelte.js"
click node_app_state "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/state/app.svelte.js"
click node_extension_catalog "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/extensions.js"
click node_tag_definitions "https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/extension-tags.js"
click node_extension_files "https://github.com/penguinmod/penguinmod-extensionsgallery/tree/main/static/extensions"

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_gallery_page,node_navigation,node_nav_page,node_nav_button,node_extension_card toneBlue
class node_search_state,node_app_state,node_extension_catalog,node_tag_definitions toneAmber
class node_load_page,node_extension_loader toneMint
class node_extension_files toneRose
class node_visitor toneIndigo
```

## Components

### Gallery UI

- [Gallery Page](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [Navigation Bar](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Component.svelte): `src/lib/NavigationBar/Component.svelte`
- [Navigation Page Button](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Page.svelte): `src/lib/NavigationBar/Page.svelte`
- [Navigation Button](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/NavigationBar/Button.svelte): `src/lib/NavigationBar/Button.svelte`
- [Extension Card](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/Extension/Component.svelte): `src/lib/Extension/Component.svelte`

### Catalog Data

- [Search State](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/state/searchBar.svelte.js): `src/lib/state/searchBar.svelte.js`
- [App State](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/state/app.svelte.js): `src/lib/state/app.svelte.js`
- [Extension Catalog](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/extensions.js): `src/lib/extensions.js`
- [Tag Definitions](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/extension-tags.js): `src/lib/extension-tags.js`

### Project Loading

- [Load Page](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/routes/load/%2Bpage.svelte): `src/routes/load/+page.svelte`
- [Extension Loader](https://github.com/penguinmod/penguinmod-extensionsgallery/blob/main/src/lib/extension-loader.js): `src/lib/extension-loader.js`

### Extension Code

- [Extension Files](https://github.com/penguinmod/penguinmod-extensionsgallery/tree/main/static/extensions): `static/extensions`

### Other components

- **Visitor**

## Connections

- Visitor → Gallery Page: browses
- Gallery Page → Extension Card: renders
- Navigation Bar → Navigation Page Button: renders (evidence: `src/lib/NavigationBar/Component.svelte`)
- Navigation Bar → Navigation Button: renders (evidence: `src/lib/NavigationBar/Component.svelte`)
- Navigation Bar → Search State: updates (evidence: `src/lib/NavigationBar/Component.svelte`)
- Extension Card → Search State: updates (evidence: `src/lib/Extension/Component.svelte`)
- Extension Card → App State: reads (evidence: `src/lib/Extension/Component.svelte`)
- Extension Card → Tag Definitions: reads (evidence: `src/lib/Extension/Component.svelte`)
- Extension Card → Extension Loader: loads
- Load Page → Extension Loader: uses
- Extension Catalog → Extension Files: describes
- Visitor → Extension Files: submits code (evidence: `README.md`)