Deploy multi-page Astro site with dark themes and CI data pipeline

[Copilot]

Resolves 404 at https://cywf.github.io/ctf-kit/ by deploying a modern static site built with Astro + React + Tailwind + daisyUI.

Architecture

Framework: Astro 4.16 with Islands architecture for zero-JS SSR pages, selective hydration for interactive components (Chart.js visualizations, Mermaid diagrams, theme switcher).

Base path: Configured /ctf-kit base with proper asset prefixing for GitHub Pages subdirectory deployment.

CI data pipeline: Workflow fetches live repo data (stars/forks/languages, discussions, project boards) via GitHub APIs at build time, writes JSON snapshots to site/public/data/, consumed client-side. Graceful fallbacks on rate limits.

Theme System

7 dark/neon variants (nightfall, dracula, cyberpunk, dark-neon, hackerman, gamecore, neon-accent) with daisyUI tokens. localStorage persistence + prefers-color-scheme detection. Keyboard-accessible dropdown with visual active state.

Pages

• Home: README content extraction with hero + quick links
• Statistics: Chart.js pie (languages) + bar (12-week commits), metric cards
• Discussions: Searchable list from GraphQL API snapshot, empty state guidance
• Dev Board: Projects v2 Kanban with issues-by-label fallback
• Create Issue: Template shortcuts with prefilled URLs (bug/feature/docs/tool/challenge)
• Docs: Dynamic routes for /docs/**/*.md with inline code highlighting, GitHub edit links
• Visualizer: Mermaid renderer with dark theme config, tab selection, includes CTF workflow + contribution flow examples
• 404: Custom error page with navigation

CI Workflow

.github/workflows/pages.yml runs on push to main:

1. Setup Node 20 with npm cache
2. Execute TypeScript scripts: fetch_repo_data.ts, fetch_discussions.ts, fetch_projects.ts, scan_scripts.ts
3. Build Astro site (19 static pages)
4. Deploy via actions/deploy-pages@v4

Scripts use GITHUB_TOKEN server-side only, never exposed client-side.

Accessibility

• Skip-to-content link
• ARIA labels on interactive elements
• Keyboard navigation throughout
• prefers-reduced-motion support
• Semantic HTML with breadcrumb navigation

File Structure

site/
├── astro.config.mjs          # base: /ctf-kit, site URL config
├── scripts/                  # TypeScript data fetchers
├── src/
│   ├── components/           # React: ThemeSwitcher, Statistics, Discussions, etc.
│   ├── layouts/Layout.astro  # Shared nav/footer
│   └── pages/                # Route files + [...slug] for docs
└── public/data/              # JSON snapshots (generated at build)

Additional Changes

• Enhanced issue templates: documentation, script/tool contributions
• README: Live site link, contribution guides for docs and Mermaid diagrams
• Example diagrams: mermaid/ctf-workflow.mmd, mermaid/contribution-flow.mmd
• .gitignore: Excludes site/node_modules, site/dist, site/.astro

Deployment

Merge triggers automatic deployment. Site live at https://cywf.github.io/ctf-kit/ within 2-5 minutes. Requires GitHub Pages enabled with source set to "GitHub Actions" in repository settings.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: /usr/local/bin/node --require /home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/preflight.cjs --import file:///home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/loader.mjs scripts/fetch_discussions.ts (http block)
  • Triggering command: /usr/local/bin/node --require /home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/preflight.cjs --import file:///home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/loader.mjs scripts/fetch_projects.ts (http block)
• https://api.github.com/repos/cywf/ctf-kit
  • Triggering command: /usr/local/bin/node --require /home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/preflight.cjs --import file:///home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/loader.mjs scripts/fetch_repo_data.ts (http block)
• https://api.github.com/repos/cywf/ctf-kit/issues
  • Triggering command: /usr/local/bin/node --require /home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/preflight.cjs --import file:///home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/tsx/dist/loader.mjs scripts/fetch_projects.ts (http block)
• https://api.github.com/repos/withastro/astro/tarball/examples/minimal
  • Triggering command: node /home/REDACTED/.npm/_npx/abdb4b598af046c4/node_modules/.bin/create-astro site --template minimal --install --git false --typescript strictest --yes (http block)
• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/.bin/astro build (dns block)
  • Triggering command: node /home/REDACTED/work/ctf-kit/ctf-kit/site/node_modules/.bin/astro preview (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

You are working in the public repository cywf/ctf-kit (default branch: main).
The current Pages URL https://cywf.github.io/ctf-kit/ returns 404.
Create and deploy a modern, multi-page site (no single static index.html) built with Astro + React + Tailwind + daisyUI.
Include selectable dark/neon themes and pages wired to this repo’s data via CI snapshots.

1) Framework & Project Layout

• Create a new app under site/ using Astro with React, TailwindCSS, and daisyUI.
• Use Node 20 LTS and npm.
• astro.config.mjs:
  • site: "https://cywf.github.io/ctf-kit"
  • base: "/ctf-kit"
• site/package.json scripts: dev, build, preview, typecheck.
• Keep the rest of the repo untouched (docs/, scripts/, etc. remain the source of content).

2) Theme System (user-selectable, dark-first)

• Implement <ThemeSwitcher /> (persists in localStorage; respects prefers-color-scheme on first load).
• Offer these themes:
  • nightfall, dracula, cyberpunk (daisyUI built-in), dark-neon, hackerman, gamecore, neon-accent.
• Support .env DEFAULT_THEME with safe fallback to nightfall.

3) Routes / Pages (with shared layout: top nav, breadcrumbs, footer)

A) / — Project Info

• Render an excerpt of README (intro + goals + how to use).
• Hero with quick links: Issues, Discussions, Projects, Releases, CONTRIBUTING.md, docs/.
• CTA: “Start a CTF Branch” (links to guidance in docs/ if present).

B) /statistics — Statistics

• Show stars, forks, watchers; languages breakdown; 12-week commit activity.
• Source: CI writes JSON snapshots to site/public/data/stats.json.
• Render via Chart.js.

C) /discussions — Discussions

• CI exports the latest N discussions (title, author, url, createdAt, category) to site/public/data/discussions.json.
• Client shows a searchable list; if none, show a friendly “no discussions yet” state.

D) /development-board — Development Board

• Prefer GitHub Projects (v2). CI exports items + status to site/public/data/projects.json.
• Client renders a read-only Kanban.
• Fallback: group open Issues by status labels (status:todo, status:doing, status:done) if Projects v2 not accessible.

E) /create-issue — Create Issue

• Guided shortcuts to:
  • https://github.com/cywf/ctf-kit/issues/new/choose
• Provide one-click URLs that prefill title/labels for “bug”, “feature”, “docs”.
• If templates are missing, add minimal templates in this PR.

F) /docs — Docs

• Render Markdown from /docs/** using Astro MD/MDX with dark code highlighting, TOC, and “Open in GitHub” buttons.
• Respect docs folder structure for sidebar navigation.

G) /visualizer — Project Visualizer (Mermaid)

• Discover .mmd files under /mermaid/** if present.
• Build step copies diagrams into site/public/diagrams/ (or fetch raw via API at build-time).
• React <MermaidViewer /> initializes Mermaid with a dark theme and lets the user choose among diagrams (tabs/dropdown), with deep-linkable IDs.
• If no .mmd files exist, render a helpful empty state that tells contributors to add diagrams under /mermaid/.

(H) Optional bonus: /scripts

• List files under /scripts/** (CI writes an index JSON) with short descriptions pulled from file headers and links to raw files.

4) CI/CD — GitHub Pages + Data Snapshots

Add .github/workflows/pages.yml that:

• Uses actions/checkout@v4
• actions/setup-node@v4 (Node 20)
• npm ci in site/
• Run Node scripts in site/scripts/ (create these):
  • fetch_repo_data.ts → site/public/data/stats.json
  • fetch_discussions.ts → site/public/data/discussions.json
  • fetch_projects.ts → site/public/data/projects.json (tolerate missing Projects v2; fallback to issues)
  • scan_scripts.ts → optional; site/public/data/scripts.json with path + brief header comments
• Then npm run build in site/
• actions/configure-pages@v5
• actions/upload-pages-artifact@v3 (path: site/dist)
• actions/deploy-pages@v4
  Workflow permissions: contents: read, pages: write, id-token: write.
  Cache npm intelligently.

Script implementation notes

• Use GitHub REST/GraphQL with the workflow’s GITHUB_TOKEN server-side only. Never expose tokens client-side.
• Stats: stars/forks/watchers, languages breakdown, weekly commit histogram.
• Discussions: latest 25 entries (title/author/url/createdAt/category).
• Projects v2: item title, status/column, labels, assignees, URL; fallback groups by issue labels.
• Scripts index: recursively list /scripts/** and read first comment block for description if present.

5) UX, Accessibility, Performance

• Keyboard-accessible nav + theme switcher; skip-to-content link.
• WCAG AA contrast across all themes; respect prefers-reduced-motion.
• Skeleton loaders for JSON-fed pages.
• Lighthouse targets ≥ 90 (Performance/Best Practices/SEO) and print summary in CI logs.

6) 404 & Base-Path Fix

• Ensure Astro base: "/ctf-kit" and rel...

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.