Skip to content

Migrate from Pagex/Voidcannon to Astro 5 SSG#31

Open
juthing wants to merge 10 commits into
v2from
claude/lucid-mccarthy-w4dAo
Open

Migrate from Pagex/Voidcannon to Astro 5 SSG#31
juthing wants to merge 10 commits into
v2from
claude/lucid-mccarthy-w4dAo

Conversation

@juthing

@juthing juthing commented Jun 2, 2026

Copy link
Copy Markdown
Member

Summary

Complete migration of the documentation site from a custom Pagex/Voidcannon-based system to Astro 5 with Material Design 3 components. This modernizes the tech stack, improves maintainability, and provides a cleaner content structure.

Key Changes

  • Framework Migration: Replaced custom Pagex/Voidcannon build system with Astro 5 for static site generation
  • Component Library: Integrated @material/web (Material Design 3) via CDN with importmap for modern UI components
  • Content Structure: Refactored content from .pagex.js files to JSON metadata + Markdown:
    • Articles: meta.json + fr.md + en.md per article
    • Authors: JSON files with Discord integration support
    • Labels/Collections: Simple JSON definitions
  • New Pages & Routes:
    • /articles/[id] - Article detail pages with bilingual support (FR/EN)
    • /authors/[id] - Author profile pages with article listings
    • /collections/[id] - Label/collection pages with filtered articles
    • / - Home page with featured articles and search index
    • /[slug] - Catch-all redirect for canonical URL handling
    • /404 - Custom 404 page
  • Internationalization: Implemented i18n system with French/English support via translations.ts
  • Dynamic Theming:
    • Material Design 3 token generation from seed colors
    • Light/dark mode toggle with localStorage persistence
    • Per-label theme colors
  • Discord Integration: Utility functions to fetch and resolve Discord user data (avatars, banners, decorations)
  • Search: Generated /search-index.json endpoint for client-side search functionality
  • Navigation: Fixed header with language selector, theme toggle, and search trigger
  • Styling: Material Design 3 compliant CSS with CSS custom properties for theming

Implementation Details

  • Content loading happens at build time via src/utils/content.ts (filesystem-based)
  • Authors support "DISCORD" placeholder values that resolve to actual Discord data at build time
  • Articles support three referencing levels (1=public, 2=internal, 3=hidden)
  • Bilingual content with fallback to French if English not available
  • Related articles feature based on shared labels
  • Static paths pre-generated for all articles, authors, and collections

Removed

  • All Pagex/Voidcannon configuration and dependencies
  • Git submodules (webfont, pagex, voidcannon, gm3, pagex_commons, webicons)
  • Old playground and test articles
  • Legacy author/collection definitions

https://claude.ai/code/session_01VoeFttV1L6oTb2vFVbhrpN

Remplace le stack PageX/Voidcannon par une architecture propre :
- Framework Astro 5 (SSG statique)
- Composants @material/web via CDN importmap
- Contenu JSON/Markdown dans /content/
- i18n fr/en auto-détectée + switcher manuel
- Thématisation MD3 dynamique par couleur seed
- Pages : accueil, article, auteur, collection, 404
- Redirections /{id} → /articles|authors|collections/{id}
- Index de recherche JSON + client-side search
- API Discord au build pour les champs "DISCORD"
- Design calqué sur les maquettes /examples/
- Documentation complète dans /docs/
- CLAUDE.md pour sessions futures

https://claude.ai/code/session_01VoeFttV1L6oTb2vFVbhrpN
@vercel

vercel Bot commented Jun 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
moddy_documentation Ready Ready Preview, Comment Jun 2, 2026 9:13pm

Complete rewrite of all layout and page components to mirror the exact
HTML/CSS structure from the /examples/ maquette files, replacing
blognutty branding with Moddy Docs content system.

Key structural changes:
- Nav: logo + "/" breadcrumb + page slug + theme toggle only
- Home: editorial intro + xYSxXU section header + wUTVKK card grid
- ArticleCard: vNoZxk/uPd4UK/zv98UQ/uHxFYS/wCqovU exact structure
- Article page: yzxB9O header (512px) + voRrnK image + single-column prose
- Author page: ykKuca/yCfcFC/zMARbA avatar card + w1fZiO links + w2Ym6Y grid
- Collections page: vQDqKq/xrrrHQ/vCEVuQ icon box + vFPEhk grid
- Footer: site-footer with icon buttons + logo link

https://claude.ai/code/session_01VoeFttV1L6oTb2vFVbhrpN
esm.run CDN is blocked by network policy, causing all @material/web
components (md-icon, md-text-button, etc.) to fail loading and show
plain text instead of rendered components.

- Install @material/web as npm dependency
- Replace CDN importmap with Astro-bundled script imports
- Remove nav border-bottom to match maquette (borderless nav)
- Simplify LabelChip to exact maquette pattern

https://claude.ai/code/session_01VoeFttV1L6oTb2vFVbhrpN
Remove 726px max-width constraint on article title and prose content
so text spans the full content area instead of being left-aligned in
a narrow column.

https://claude.ai/code/session_01VoeFttV1L6oTb2vFVbhrpN
Updated author information in juthing.json
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants