How sugarlabs/www-v2 works
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: routes.tsx Route table · MainPage.tsx Home page · MusicBlocks.tsx Music Blocks page · NewsPage.tsx News pages
Components 28
Application shell
- React app
src/App.tsx - Route table
src/routes.tsx - Not found
src/pages/NotFoundPage.tsx
About and community
- Home page
src/pages/MainPage.tsx - About pages
src/pages/About/AboutUs.tsx - Community pages
src/pages/Contributors.tsx - Donation page
src/pages/Donate.tsx - Contact matrix
src/pages/Matrix.tsx
Products and discovery
- Products listing
src/pages/Products.tsx - Try Sugar
src/pages/TrySugar.tsx - Product showcases
src/pages/TryNow - Music Blocks page
src/pages/TryNow/MusicBlocks.tsx - Music Blocks content
src/constants/TryNowData/musicBlocksData.ts - Home banner
src/sections/Banner.tsx
News and publishing
- News pages
src/pages/News/NewsPage.tsx - News detail
src/pages/News/NewsDetailPage.tsx - Author directory
src/pages/News/AuthorsPage.tsx - Author profile
src/pages/News/AuthorPage.tsx - Tag archive
src/pages/News/TagPage.tsx - Author content
src/utils/author-utils.ts - Post utilities
src/utils/posts-utils.ts - Markdown renderer
src/utils/MarkdownRenderer.tsx
Shared presentation
- Site header
src/sections/Header.tsx - Site footer
src/sections/Footer.tsx - Product paragraphs
src/components/TryNow/Paragraph.tsx - Animation presets
src/styles/Animations.ts
Other components
- Site visitor
- GitHub API
Connections 32
- Site visitor → React app: opens site
- React app → Route table: mounts router
src/App.tsx - Route table → Home page: routes to
src/routes.tsx - Route table → About pages: routes to
src/routes.tsx - Route table → Community pages: routes to
src/routes.tsx - Route table → Donation page: routes to
src/routes.tsx - Route table → Contact matrix: routes to
src/routes.tsx - Route table → Products listing: routes to
src/routes.tsx - Route table → Try Sugar: routes to
src/routes.tsx - Route table → Product showcases: routes to
src/routes.tsx - Route table → Music Blocks page: routes to
src/routes.tsx - Route table → News pages: routes to
src/routes.tsx - Route table → News detail: routes to
src/routes.tsx - Route table → Author directory: routes to
src/routes.tsx - Route table → Author profile: routes to
src/routes.tsx - Route table → Tag archive: routes to
src/routes.tsx - Route table → Not found: fallback route
src/routes.tsx - Community pages → GitHub API: fetches repositories
src/pages/Contributors.tsx - Music Blocks page → Music Blocks content: renders content
src/pages/TryNow/MusicBlocks.tsx - Music Blocks page → Product paragraphs: renders sections
src/pages/TryNow/MusicBlocks.tsx - Product paragraphs → Animation presets: uses presets
src/components/TryNow/Paragraph.tsx - Author directory → Author content: loads authors
src/pages/News/AuthorsPage.tsx - Author directory → Post utilities: counts author posts
src/pages/News/AuthorsPage.tsx - Author profile → Author content: loads profile
src/pages/News/AuthorPage.tsx - Author profile → Markdown renderer: renders biography
src/pages/News/AuthorPage.tsx - Author content → Post utilities: parses frontmatter
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