Landing page for SpicyRegs — an open-source Civic Tech DC project for searching, analyzing, and understanding federal regulatory dockets and public comments — and its build event, Civic Hack DC: Part 2 — Making public comments count (September 12, 2026).
Built with Astro. It's a static marketing site that ships zero
JavaScript: every call-to-action is a mailto: link and section scrolling is pure CSS.
npm install
npm run dev # local dev server at http://localhost:4321
npm run build # static build to ./dist
npm run preview # serve the built ./distPushing to main triggers .github/workflows/deploy.yml, which builds with the
official withastro/action and publishes
to GitHub Pages at the custom domain → https://spicyregs.civictechdc.org/
- Pages source is set to GitHub Actions (Settings → Pages).
- The custom domain is set by
public/CNAME+ the Pages settings; DNS is aCNAMErecordspicyregs→civictechdc.github.ioon thecivictechdc.orgzone. siteinastro.config.mjsis the full subdomain and there is nobase(the site is served at the domain root).
src/
consts.ts # event date, contact email, mail-subject links
styles/tokens.css # SpicyRegs design tokens (color, type, spacing, effects, base)
layouts/Layout.astro # <head>, fonts, global page + responsive styles
components/
Button.astro # primary/secondary/ghost/danger · sm/md/lg · fullWidth
Badge.astro # status/label pill
Icon.astro # inlined Lucide stroke icons (no CDN)
Nav / Hero / WhyItMatters / WhatIsSpicyRegs /
Hackathon / ProductOwners / GetInvolved / Footer
pages/index.astro # composes the sections
public/
favicon.svg
Colors, typography, spacing, and effects come from the SpicyRegs design system and live in
src/styles/tokens.css. Button, Badge, and Icon reproduce the corresponding design
system primitives as native Astro components.
- Fonts load from Google Fonts (Libre Franklin + IBM Plex Mono) with full system
fallback stacks. For CDN-blocked networks (common on gov networks), self-host them as
woff2
@font-faceand update the@importat the top ofsrc/styles/tokens.css. - Icons use a curated inlined subset of Lucide; add glyphs to the
PATHSmap inIcon.astro. - Event date, contact email, and CTA subjects are centralized in
src/consts.ts.