# sugarlabs/www-v2 architecture

> Architecture diagram of the GitHub repository sugarlabs/www-v2, 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/sugarlabs/www-v2
- Repository: https://github.com/sugarlabs/www-v2

## Overview

SugarWeb is Sugar Labs’ client-side informational and discovery site. Visitors enter through the React app’s route table, then browse mission/about content, product introductions and download links, community participation and donation pages, news, and contact resources. News author views load and parse bundled Markdown content; contributor discovery additionally queries GitHub’s public repositories API. The tree and excerpts establish the routing and selected component interactions; unsampled page implementations are represented at their exact page paths, and their internal wiring is not inferred.

Main entry points: [`src/routes.tsx`](https://github.com/sugarlabs/www-v2/blob/main/src/routes.tsx) (Route table), [`src/pages/MainPage.tsx`](https://github.com/sugarlabs/www-v2/blob/main/src/pages/MainPage.tsx) (Home page), [`src/pages/TryNow/MusicBlocks.tsx`](https://github.com/sugarlabs/www-v2/blob/main/src/pages/TryNow/MusicBlocks.tsx) (Music Blocks page), [`src/pages/News/NewsPage.tsx`](https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/NewsPage.tsx) (News pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["React app<br/>[App.tsx]"]
  node_routes["Route table<br/>[routes.tsx]"]
  node_notfound["Not found<br/>[NotFoundPage.tsx]"]
end

subgraph group_mission["About and community"]
  node_home["Home page<br/>[MainPage.tsx]"]
  node_about["About pages<br/>[AboutUs.tsx]"]
  node_community["Community pages<br/>[Contributors.tsx]"]
  node_donations["Donation page<br/>[Donate.tsx]"]
  node_matrix["Contact matrix<br/>[Matrix.tsx]"]
end

subgraph group_products["Products and discovery"]
  node_products["Products listing<br/>[Products.tsx]"]
  node_try["Try Sugar<br/>[TrySugar.tsx]"]
  node_product_pages["Product showcases"]
  node_musicblocks["Music Blocks page<br/>[MusicBlocks.tsx]"]
  node_music_data["Music Blocks content<br/>[musicBlocksData.ts]"]
  node_banner["Home banner<br/>[Banner.tsx]"]
end

subgraph group_news["News and publishing"]
  node_news["News pages<br/>[NewsPage.tsx]"]
  node_news_detail["News detail<br/>[NewsDetailPage.tsx]"]
  node_authors["Author directory<br/>[AuthorsPage.tsx]"]
  node_author_page["Author profile<br/>[AuthorPage.tsx]"]
  node_tags["Tag archive<br/>[TagPage.tsx]"]
  node_author_utils["Author content<br/>[author-utils.ts]"]
  node_posts_utils["Post utilities<br/>[posts-utils.ts]"]
  node_markdown["Markdown renderer"]
end

subgraph group_shared["Shared presentation"]
  node_header["Site header<br/>[Header.tsx]"]
  node_footer["Site footer<br/>[Footer.tsx]"]
  node_paragraph["Product paragraphs<br/>[Paragraph.tsx]"]
  node_animations["Animation presets<br/>[Animations.ts]"]
end

node_visitor(("Site visitor"))
node_github["GitHub API"]

node_visitor -->|"opens site"| node_app
node_app -->|"mounts router"| node_routes
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_about
node_routes -->|"routes to"| node_community
node_routes -->|"routes to"| node_donations
node_routes -->|"routes to"| node_matrix
node_routes -->|"routes to"| node_products
node_routes -->|"routes to"| node_try
node_routes -->|"routes to"| node_product_pages
node_routes -->|"routes to"| node_musicblocks
node_routes -->|"routes to"| node_news
node_routes -->|"routes to"| node_news_detail
node_routes -->|"routes to"| node_authors
node_routes -->|"routes to"| node_author_page
node_routes -->|"routes to"| node_tags
node_routes -->|"fallback route"| node_notfound
node_community -->|"fetches repositories"| node_github
node_musicblocks -->|"renders content"| node_music_data
node_musicblocks -->|"renders sections"| node_paragraph
node_paragraph -->|"uses presets"| node_animations
node_authors -->|"loads authors"| node_author_utils
node_authors -->|"counts author posts"| node_posts_utils
node_author_page -->|"loads profile"| node_author_utils
node_author_page -->|"renders biography"| node_markdown
node_author_utils -->|"parses frontmatter"| node_posts_utils
node_home -.->|"shows banner"| node_banner
node_about -.->|"uses site header"| node_header
node_news -.->|"loads post data"| node_posts_utils
node_news_detail -.->|"renders article"| node_markdown
node_news -.->|"uses site header"| node_header
node_home -.->|"uses site footer"| node_footer

click node_app "https://github.com/sugarlabs/www-v2/blob/main/src/App.tsx"
click node_routes "https://github.com/sugarlabs/www-v2/blob/main/src/routes.tsx"
click node_home "https://github.com/sugarlabs/www-v2/blob/main/src/pages/MainPage.tsx"
click node_about "https://github.com/sugarlabs/www-v2/blob/main/src/pages/About/AboutUs.tsx"
click node_community "https://github.com/sugarlabs/www-v2/blob/main/src/pages/Contributors.tsx"
click node_donations "https://github.com/sugarlabs/www-v2/blob/main/src/pages/Donate.tsx"
click node_matrix "https://github.com/sugarlabs/www-v2/blob/main/src/pages/Matrix.tsx"
click node_products "https://github.com/sugarlabs/www-v2/blob/main/src/pages/Products.tsx"
click node_try "https://github.com/sugarlabs/www-v2/blob/main/src/pages/TrySugar.tsx"
click node_product_pages "https://github.com/sugarlabs/www-v2/tree/main/src/pages/TryNow"
click node_musicblocks "https://github.com/sugarlabs/www-v2/blob/main/src/pages/TryNow/MusicBlocks.tsx"
click node_music_data "https://github.com/sugarlabs/www-v2/blob/main/src/constants/TryNowData/musicBlocksData.ts"
click node_banner "https://github.com/sugarlabs/www-v2/blob/main/src/sections/Banner.tsx"
click node_news "https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/NewsPage.tsx"
click node_news_detail "https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/NewsDetailPage.tsx"
click node_authors "https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/AuthorsPage.tsx"
click node_author_page "https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/AuthorPage.tsx"
click node_tags "https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/TagPage.tsx"
click node_author_utils "https://github.com/sugarlabs/www-v2/blob/main/src/utils/author-utils.ts"
click node_posts_utils "https://github.com/sugarlabs/www-v2/blob/main/src/utils/posts-utils.ts"
click node_markdown "https://github.com/sugarlabs/www-v2/blob/main/src/utils/MarkdownRenderer.tsx"
click node_header "https://github.com/sugarlabs/www-v2/blob/main/src/sections/Header.tsx"
click node_footer "https://github.com/sugarlabs/www-v2/blob/main/src/sections/Footer.tsx"
click node_paragraph "https://github.com/sugarlabs/www-v2/blob/main/src/components/TryNow/Paragraph.tsx"
click node_animations "https://github.com/sugarlabs/www-v2/blob/main/src/styles/Animations.ts"
click node_notfound "https://github.com/sugarlabs/www-v2/blob/main/src/pages/NotFoundPage.tsx"

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_app,node_routes,node_notfound toneBlue
class node_home,node_about,node_community,node_donations,node_matrix toneAmber
class node_products,node_try,node_product_pages,node_musicblocks,node_music_data,node_banner,node_github toneMint
class node_news,node_news_detail,node_authors,node_author_page,node_tags,node_author_utils,node_posts_utils,node_markdown toneRose
class node_header,node_footer,node_paragraph,node_animations,node_visitor toneIndigo
```

## Components

### Application shell

- [React app](https://github.com/sugarlabs/www-v2/blob/main/src/App.tsx): `src/App.tsx`
- [Route table](https://github.com/sugarlabs/www-v2/blob/main/src/routes.tsx): `src/routes.tsx`
- [Not found](https://github.com/sugarlabs/www-v2/blob/main/src/pages/NotFoundPage.tsx): `src/pages/NotFoundPage.tsx`

### About and community

- [Home page](https://github.com/sugarlabs/www-v2/blob/main/src/pages/MainPage.tsx): `src/pages/MainPage.tsx`
- [About pages](https://github.com/sugarlabs/www-v2/blob/main/src/pages/About/AboutUs.tsx): `src/pages/About/AboutUs.tsx`
- [Community pages](https://github.com/sugarlabs/www-v2/blob/main/src/pages/Contributors.tsx): `src/pages/Contributors.tsx`
- [Donation page](https://github.com/sugarlabs/www-v2/blob/main/src/pages/Donate.tsx): `src/pages/Donate.tsx`
- [Contact matrix](https://github.com/sugarlabs/www-v2/blob/main/src/pages/Matrix.tsx): `src/pages/Matrix.tsx`

### Products and discovery

- [Products listing](https://github.com/sugarlabs/www-v2/blob/main/src/pages/Products.tsx): `src/pages/Products.tsx`
- [Try Sugar](https://github.com/sugarlabs/www-v2/blob/main/src/pages/TrySugar.tsx): `src/pages/TrySugar.tsx`
- [Product showcases](https://github.com/sugarlabs/www-v2/tree/main/src/pages/TryNow): `src/pages/TryNow`
- [Music Blocks page](https://github.com/sugarlabs/www-v2/blob/main/src/pages/TryNow/MusicBlocks.tsx): `src/pages/TryNow/MusicBlocks.tsx`
- [Music Blocks content](https://github.com/sugarlabs/www-v2/blob/main/src/constants/TryNowData/musicBlocksData.ts): `src/constants/TryNowData/musicBlocksData.ts`
- [Home banner](https://github.com/sugarlabs/www-v2/blob/main/src/sections/Banner.tsx): `src/sections/Banner.tsx`

### News and publishing

- [News pages](https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/NewsPage.tsx): `src/pages/News/NewsPage.tsx`
- [News detail](https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/NewsDetailPage.tsx): `src/pages/News/NewsDetailPage.tsx`
- [Author directory](https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/AuthorsPage.tsx): `src/pages/News/AuthorsPage.tsx`
- [Author profile](https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/AuthorPage.tsx): `src/pages/News/AuthorPage.tsx`
- [Tag archive](https://github.com/sugarlabs/www-v2/blob/main/src/pages/News/TagPage.tsx): `src/pages/News/TagPage.tsx`
- [Author content](https://github.com/sugarlabs/www-v2/blob/main/src/utils/author-utils.ts): `src/utils/author-utils.ts`
- [Post utilities](https://github.com/sugarlabs/www-v2/blob/main/src/utils/posts-utils.ts): `src/utils/posts-utils.ts`
- [Markdown renderer](https://github.com/sugarlabs/www-v2/blob/main/src/utils/MarkdownRenderer.tsx): `src/utils/MarkdownRenderer.tsx`

### Shared presentation

- [Site header](https://github.com/sugarlabs/www-v2/blob/main/src/sections/Header.tsx): `src/sections/Header.tsx`
- [Site footer](https://github.com/sugarlabs/www-v2/blob/main/src/sections/Footer.tsx): `src/sections/Footer.tsx`
- [Product paragraphs](https://github.com/sugarlabs/www-v2/blob/main/src/components/TryNow/Paragraph.tsx): `src/components/TryNow/Paragraph.tsx`
- [Animation presets](https://github.com/sugarlabs/www-v2/blob/main/src/styles/Animations.ts): `src/styles/Animations.ts`

### Other components

- **Site visitor**
- **GitHub API**

## Connections

- Site visitor → React app: opens site
- React app → Route table: mounts router (evidence: `src/App.tsx`)
- Route table → Home page: routes to (evidence: `src/routes.tsx`)
- Route table → About pages: routes to (evidence: `src/routes.tsx`)
- Route table → Community pages: routes to (evidence: `src/routes.tsx`)
- Route table → Donation page: routes to (evidence: `src/routes.tsx`)
- Route table → Contact matrix: routes to (evidence: `src/routes.tsx`)
- Route table → Products listing: routes to (evidence: `src/routes.tsx`)
- Route table → Try Sugar: routes to (evidence: `src/routes.tsx`)
- Route table → Product showcases: routes to (evidence: `src/routes.tsx`)
- Route table → Music Blocks page: routes to (evidence: `src/routes.tsx`)
- Route table → News pages: routes to (evidence: `src/routes.tsx`)
- Route table → News detail: routes to (evidence: `src/routes.tsx`)
- Route table → Author directory: routes to (evidence: `src/routes.tsx`)
- Route table → Author profile: routes to (evidence: `src/routes.tsx`)
- Route table → Tag archive: routes to (evidence: `src/routes.tsx`)
- Route table → Not found: fallback route (evidence: `src/routes.tsx`)
- Community pages → GitHub API: fetches repositories (evidence: `src/pages/Contributors.tsx`)
- Music Blocks page → Music Blocks content: renders content (evidence: `src/pages/TryNow/MusicBlocks.tsx`)
- Music Blocks page → Product paragraphs: renders sections (evidence: `src/pages/TryNow/MusicBlocks.tsx`)
- Product paragraphs → Animation presets: uses presets (evidence: `src/components/TryNow/Paragraph.tsx`)
- Author directory → Author content: loads authors (evidence: `src/pages/News/AuthorsPage.tsx`)
- Author directory → Post utilities: counts author posts (evidence: `src/pages/News/AuthorsPage.tsx`)
- Author profile → Author content: loads profile (evidence: `src/pages/News/AuthorPage.tsx`)
- Author profile → Markdown renderer: renders biography (evidence: `src/pages/News/AuthorPage.tsx`)
- Author content → Post utilities: parses frontmatter (evidence: `src/utils/author-utils.ts`)
- Home page → Home banner: shows banner
- About pages → Site header: uses site header
- News pages → Post utilities: loads post data
- News detail → Markdown renderer: renders article
- News pages → Site header: uses site header
- Home page → Site footer: uses site footer