Skip to content

Astro site rebuild: parameterised component library#28

Closed
jawache wants to merge 38 commits intomainfrom
claude
Closed

Astro site rebuild: parameterised component library#28
jawache wants to merge 38 commits intomainfrom
claude

Conversation

@jawache
Copy link
Contributor

@jawache jawache commented Feb 26, 2026

Summary

  • Moved legacy Gatsby site to _legacy/ directory, making the Astro 5 rebuild the primary project
  • Integrated component-showcase from .microsites/ into the project root
  • Built 16 parameterised components (Navbar, Hero, LogoMarquee, Testimonial, TextBlock, TabbedSection, FeatureGrid, CardGrid, StatsGrid, CommunityReach, ArticleCarousel, ResourceCards, CTABanner, CTACard, Footer, TextWithImage) — all content via props, never hardcoded
  • Composed the new homepage (src/pages/index.astro) using parameterised components with full GSF content
  • Wired up legacy Notion fetch script (scripts/fetch-notion-data.cjs) to source member logos, team photos, and stats from Notion into src/data/ and public/assets/
  • Separated old catalogue components into src/components/_catalogue/ for reference
  • Set up build pipeline: npm run build uses cached data, npm run build:full fetches from Notion first (used by Netlify)

Test plan

  • Verify Netlify deploy preview builds successfully
  • Check homepage renders with all sections (hero, logo marquee, tabbed sections, article carousel, etc.)
  • Verify logo marquee displays member logos
  • Check component catalogue page at /catalogue
  • Confirm legacy Gatsby files preserved in _legacy/

🤖 Generated with Claude Code

jawache and others added 18 commits February 23, 2026 23:07
- CLAUDE.md: project context for Claude Code sessions
- ARCH.md: architecture documentation
- .nvmrc: pin Node to 18.5.0

Co-Authored-By: Claude <noreply@anthropic.com>
- TASKS.md: tracks all planned work across DatoCMS migration, Notion integration, CI/CD, and UI/UX
- ARCH.md: documents data sources for every page (DatoCMS vs local)
- docs/features/datocms-migration.md: full spec for migrating content to local Markdown with i18n and Netlify Image CDN
- docs/features/notion-integration.md: full spec for sourcing members/team data from Notion via pre-build script

Co-Authored-By: Claude <noreply@anthropic.com>
- Extract 196 articles, 7 manifestos, 4 flat pages, 7 press items,
  433 team members, and 65 member logos from DatoCMS into local files
- Rewrite gatsby-node.js with onCreateNode for collection/lang/slug
  derivation and createPages for all content types
- Rewrite all templates (article, articles-list, manifesto, flat-page)
  to use MarkdownRemark GraphQL queries instead of DatoCMS
- Add i18n URL scheme: English at current URLs, translations at /{lang}/path
- Integrate NetlifyImage component across all image-rendering components
  for Netlify Image CDN in production with localhost fallback
- Fix article list image sizing with object-fit: cover
- Replace gatsby-source-datocms with gatsby-source-filesystem +
  gatsby-transformer-remark + gatsby-transformer-json
- Remove DatoCMS, react-datocms, and gatsby-plugin-image/sharp dependencies
- Remove onboarding, projects, and subscribe pages
- Add redirects for old translated URLs and removed pages in netlify.toml
- Add Netlify build configuration (yarn build, Node 18.5.0)
- Update SEO component to use siteMetadata instead of DatoCMS
- Update Algolia queries for MarkdownRemark

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add .netlify to .gitignore (Netlify CLI local config)
- Deploy previews were disabled (skip_prs: true), now enabled via CLI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add fetch-notion-data.js script to pull members, team, and stats from Notion
- Homepage: steering members, general members, academic/government members as separate sections
- Logo sizing: aspect-ratio-based horizontal/vertical CSS classes for balanced display
- Team page: admin team sourced from GSF Team DB, cross-referenced with Volunteers for photos/LinkedIn
- Stats: organisation count from Members DB, individual count from active Volunteers
- NetlifyImage: use build-time GATSBY_NETLIFY env var instead of runtime window check (fixes SSR)
- Split build commands: `yarn build` (Gatsby only) vs `yarn build:full` (fetch + build)
- Netlify configured with build:full and NOTION_API_KEY env var

Co-Authored-By: Claude <noreply@anthropic.com>
dotenv is not in package.json dependencies and crashes on Netlify
where env vars come from the dashboard directly.

Co-Authored-By: Claude <noreply@anthropic.com>
Documents the plan to upload 422 DatoCMS team photos to the Notion
Volunteers database Photo field using the Notion File Upload API.
Includes API details, implementation plan, and edge cases.

Co-Authored-By: Claude <noreply@anthropic.com>
- Fix XSS in newsletter-form.js: strip HTML from Mailchimp error messages
  instead of using dangerouslySetInnerHTML
- Delete redirect.js: open redirect vulnerability, page was unused
- Archive 3 unused components to archive/ directory:
  chairs-section, members-section, member-blob (+ their SCSS)

Co-Authored-By: Claude <noreply@anthropic.com>
Integrate Notion as data source for members and team
Never commit directly to main — all work goes into the claude branch.

Co-Authored-By: Claude <noreply@anthropic.com>
- upload-photos-to-notion.js: staged script for uploading team photos
  to Notion Volunteers DB (match CSV first, then upload)
- photo-upload-plan.csv: mapping of 94 matched volunteers to local photos
- photo-upload-review.md: visual review file with inline images
- All 94 photos successfully uploaded to Notion

Co-Authored-By: Claude <noreply@anthropic.com>
- Rewrite CLAUDE.md to document the Astro 5 component library approach,
  three-tier architecture, parameterised components table, and dev commands
- Add site-rebuild-componentisation feature spec
- Add component catalogue screenshots and homepage/membership content docs

Co-Authored-By: Claude <noreply@anthropic.com>
- Add new components to parameterised components table (TabbedSection,
  ArticleCarousel, ResourceCards, CommunityReach, CTACard, FeatureGrid variants)
- Document heading *accent* pattern for inline accent text
- Update homepage composition description with full section breakdown
- Update homepage content doc

Co-Authored-By: Claude <noreply@anthropic.com>
Remove inner .git from .microsites/component-showcase/ and bring all
source files into this repository. Fix root .gitignore to scope `public`
to root only (was blocking microsites public assets).

Includes the full parameterised component library: Navbar, Hero, Footer,
LogoMarquee, Testimonial, TextBlock, TabbedSection, FeatureGrid,
CardGrid, StatsGrid, CommunityReach, ArticleCarousel, ResourceCards,
CTABanner, CTACard, TextWithImage — plus the homepage composition.

Co-Authored-By: Claude <noreply@anthropic.com>
- Moved .microsites/component-showcase/ contents (src/, public/, config)
  to project root — Astro site is now the primary project
- Moved Gatsby files (gatsby-*.js, src/, content/, assets/, package.json,
  yarn.lock, netlify.toml) to _legacy/
- Updated .gitignore: scope public to Astro dist, ignore .microsites/
  reference repos, ignore dev screenshots
- Updated CLAUDE.md with new directory structure
- Build verified: both pages compile successfully

Co-Authored-By: Claude <noreply@anthropic.com>
- Homepage is now / (was /homepage)
- Component catalogue is now /catalogue (was /)
- Old microsite components moved to src/components/_catalogue/
  (20 hardcoded components + 3 React islands)
- Clean parameterised components stay in src/components/
  (16 components + 3 React islands)
- Fixed internal imports in catalogue components to use new paths
- Build verified: both pages compile successfully

Co-Authored-By: Claude <noreply@anthropic.com>
- Updated scripts/fetch-notion-data.cjs to write to src/data/ and
  public/assets/ (logos, team photos) instead of content/
- Added logos.json generation for the logo marquee component
- Removed src/lib/fetch-logos.mjs (replaced by comprehensive legacy script)
- Replicated build:full pattern: dev/build use cached data,
  build:full fetches from Notion first (used by Netlify)
- Added netlify.toml for Astro deployment (npm run build:full, dist/)

Co-Authored-By: Claude <noreply@anthropic.com>
@netlify
Copy link

netlify bot commented Feb 26, 2026

Deploy Preview for green-software-foundation ready!

Name Link
🔨 Latest commit f7fbc96
🔍 Latest deploy log https://app.netlify.com/projects/green-software-foundation/deploys/69a31bf17438370008a8286d
😎 Deploy Preview https://deploy-preview-28--green-software-foundation.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

jawache and others added 11 commits February 26, 2026 22:06
Creates fallback empty data files so the Astro build succeeds
even without NOTION_API_KEY configured (e.g. on deploy previews).

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Asim Hussain <jawache@gmail.com>
Legacy .nvmrc had Node 18.5.0 which is too old for Astro 5.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Asim Hussain <jawache@gmail.com>
- Restructure nav into 4 panels: Standards, Adoption, Community, About
- Add icon support: SVG marks for SCI/SOFT/WDPC, Lucide icons for others
- Add panel-level footer links (All standards, All research, About our community)
- Support iconSrc (image URL) and icon (Lucide name) on nav links
- Mobile menu uses Radix Accordion for collapsible sections
- Mark external links (podcasts, tools, directories) with indicators
- Update sitemap spec to match new navigation structure

Co-Authored-By: Claude <noreply@anthropic.com>
- New membership page with hero, steering proposition, member stories,
  general membership benefits, how-it-works steps, and CTA
- Add compact prop to FeatureGrid component (matches TextBlock pattern)
  for reduced vertical padding when sections need tighter spacing
- Add member-stories component for story card grid
- Update membership content spec with how-it-works section

Co-Authored-By: Claude <noreply@anthropic.com>
…migration

- Site search: Pagefind for keyword search, Supabase pgvector for future semantic search
- Internationalisation: Astro i18n for UI chrome, LLM machine translation for articles
- HTML lang & canonical: Prep for i18n with lang="en" and canonical link tags
- Content pages migration: Legacy markdown pages, articles, and manifesto into Astro content collections using remark/rehype plugins with remark-directive for image treatments

Co-Authored-By: Claude <noreply@anthropic.com>
Research and planning files for future content work:
- Article index JSON files (188 articles indexed with metadata)
- Directory data (members, projects, people)
- Member stories markdown files and planning docs

Co-Authored-By: Claude <noreply@anthropic.com>
- Add dynamic canonical URL using Astro.url.pathname
- Fix title from "GSF Component Catalogue" to "Green Software Foundation"
- lang="en" was already present on both layouts

Co-Authored-By: Claude <noreply@anthropic.com>
- Install remark-gfm, remark-directive, rehype-slug, rehype-autolink-headings, @tailwindcss/typography
- Configure markdown plugins in astro.config.mjs
- Add custom remark-directives-handler plugin for :::note, :::full-width, :::float-*, :::columns, :::figure
- Add GSF-branded prose styles with callouts, full-width breakouts, floats, columns, and figure captions
- Add comprehensive markdown demo to component catalogue at /catalogue#markdown

Co-Authored-By: Claude <noreply@anthropic.com>
- Define article and page schemas in src/content.config.ts using Astro 5 Content Layer API
- Copy 195 articles (188 EN, 4 JA, 1 PT, 2 ZH) from legacy into src/content/articles/
- Copy 4 policy pages from legacy into src/content/pages/
- Copy article images (68MB) into public/assets/articles/
- Rewrite image paths in frontmatter from relative legacy paths to absolute public paths
- Add dynamic article route at /articles/[...slug].astro with header, prose body, author bios
- Add dynamic page route at /[...page].astro for policy/flat pages
- Build produces 202 pages with no errors

Co-Authored-By: Claude <noreply@anthropic.com>
- Add proper Navbar props matching homepage (full GSF nav, search, CTA)
- Add breadcrumb navigation to article pages
- Extract shared navItems into src/lib/nav-items.ts (DRY across pages)
- Fix HTML img src paths still pointing to legacy ../images/ (16 articles)
- Update page template with same navbar treatment
- Add Phase 4a (Legacy Markdown Cleanup) to feature spec documenting
  DatoCMS export artefacts: broken italic spacing, bold-wrapped headings,
  unnecessary <u> tags, raw HTML figures

Co-Authored-By: Claude <noreply@anthropic.com>
- Beige background (accent-lightest-2) matching rest of site
- Wider header (max-w-4xl) with narrower body column (max-w-3xl)
- Home icon in breadcrumbs
- Layout order: breadcrumbs → title → teaser → date/origin → rule → authors
- Add CTABanner at bottom of article pages
- Authors and date handle multi-author articles gracefully

Co-Authored-By: Claude <noreply@anthropic.com>
jawache and others added 9 commits February 27, 2026 17:27
- Extend showcase layout with props for title, description, OG image, article metadata
- Add Open Graph tags (og:type, og:title, og:description, og:image, article:published_time, article:author)
- Add Twitter card tags (summary_large_image when image present)
- Add JSON-LD Article structured data with author, publisher, datePublished
- Add head slot to layout for page-specific structured data
- Falls back to summary/teaserText when description not in frontmatter

Co-Authored-By: Claude <noreply@anthropic.com>
- Mailchimp-integrated email signup form with bot protection
- Soft green card style (bg-accent-lighter) matching brand tokens
- Placed between article content and CTA banner

Co-Authored-By: Claude <noreply@anthropic.com>
- 2-column card grid with 12 articles per page
- Previous/Next pagination with page indicator
- Cards show date, title, summary, and hero image
- Hover effects on cards (shadow lift, image zoom, title colour change)

Co-Authored-By: Claude <noreply@anthropic.com>
Automated fixes:
- Remove 290 bold-wrapped headings (## **Title** → ## Title) in 68 files
- Strip 686 unnecessary <u> tags across 147 files
- Convert 42 <em> HTML tags to markdown *italic* syntax
- Remove 11 redundant quote marks inside blockquotes

Code screenshots replaced with code blocks:
- carbon-aware-kubernetes: YAML config screenshot → fenced code block
- green-coding-is-a-matter-of-code-quality: 3 screenshots → JS, XML, Dockerfile blocks

Image accessibility:
- Add descriptive alt text to 71 images across 40 articles

Co-Authored-By: Claude <noreply@anthropic.com>
Formatting fixes across 44 article files:
- Fix bold/italic markers with misplaced spaces (**text ** → **text**)
- Remove empty bold/italic blocks (** **)
- Fix multi-line broken markdown links (4 files)
- Fix italic markers with trailing spaces (*text * → *text*)

Quote improvements (8 articles, 20 quotes):
- Convert inline italic quotes to proper blockquotes
- Articles: carbon-hack-24, gsf-global-summit-2024, carmen,
  sci-iso-standard, ssia, carbonhack22, theory-of-change, sci-for-ai

Also adds commit policy to CLAUDE.md: never commit without explicit permission.

Co-Authored-By: Claude <noreply@anthropic.com>
Defines the full page structure for /governance:
- Introduction with governance hierarchy diagram
- Steering Committee / Board with chair and vice-chair highlighted
- Staff section (data needs adding to Notion fetch script)
- Chairs section covering WG chairs, committee chairs, and project leads
- Organisation Leads table
- Legal & registration transparency section

All people data sourced from Notion via the fetch script.

Co-Authored-By: Claude <noreply@anthropic.com>
Per-article review fixing:
- Non-breaking spaces (U+00A0) inside bold/italic markers (most common issue)
- Excessive blank lines (3+ consecutive) reduced to single separators
- Broken italic/bold markers with misplaced spaces
- Ordered lists with excess indentation rendering as code blocks
- Trailing spaces in link text
- Empty/orphaned links and stray markdown markers
- Unclosed italic markers
- Corrupted character-level formatting in honoring-abhishek-gupta.md (complete rewrite)

89 files changed across the review.

Co-Authored-By: Claude <noreply@anthropic.com>
- New governance page at /governance/ with 7 sections: hero, governance
  structure diagram, steering committee, staff, chairs & project leads,
  organisation leads table, and legal & registration info
- New team-grid.astro component for displaying team members with
  highlighted cards (chair/vice-chair) and role badge labels
- New governance-diagram.astro with responsive tree diagram showing
  foundation hierarchy (Linux Foundation → JDF → GSF → Steering
  Committee → Working Groups / Committees / Staff)
- Updated fetch-notion-data.cjs with new fetchChairsAndLeads() query
  sourcing leadership roles from Subscriptions database
- Updated fetchOrgLeads() to query Subscriptions database (Role =
  "Organization Lead", Status = "Active") instead of Volunteers
- Chairs section filters out pure Committee Members, keeping only
  chairs, leads, and vice-chairs with their role labels
- Moved feature spec from docs/pages/ to docs/features/

Co-Authored-By: Claude <noreply@anthropic.com>
- Make homepage Featured Content carousel data-driven from article frontmatter
- Add featured, organizations, and additionalOrgCount fields to article schema
- Mark 9 articles as featured with organisation attributions and steering member rules
- Update article-carousel component to display org logos and "+N more members"
- Resolve org logos automatically from logos.json by case-insensitive name matching
- Add how-to guide for articles and featured content (docs/how-to-featured-articles.md)
- Add how-to guide for governance page data pipeline (docs/how-to-governance-leadership.md)
- Replace legacy Gatsby README with proper project README linking to how-to guides

Co-Authored-By: Claude <noreply@anthropic.com>
@jawache jawache closed this Mar 4, 2026
@jawache jawache deleted the claude branch March 4, 2026 16:12
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.

1 participant