Add Astro GitHub Pages site showcasing the extensions (#14)

* Add Astro GitHub Pages site for extensions showcase

Scaffold an Astro site under site/ that showcases the six Copilot canvas
extensions, with per-card copy-to-clipboard install prompts and screenshot
placeholders that fall back to a shared SVG until real images are added.
Deploys via the official withastro/action flow from a root workflow pointed
at the site/ subfolder; base path is set to /copilot-extensions/.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Add live canvas screenshots to the showcase cards

Capture each of the six canvas extensions running with real, seeded content
(live Yahoo quotes, Google News headlines, a Wikipedia article, a generated
Spanish course, a random animal, and the code-tutor onboarding) and drop them
into site/public/screenshots/ so the cards render real product shots instead of
the placeholder.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Add card lightbox and group/reorder the extensions

Clicking a card now opens a lightbox with a big version of it (large screenshot,
title, description, install prompt + copy, View on GitHub) and prev/next
navigation across all extensions via side arrows, arrow keys, Esc to close, and a
position counter.

Reorder into three groups — Tutors (code-tutor first, then language-tutor),
Live & discover (stock-ticker, news-aggregator, wiki-discover), and Just for fun
(random-animal) — each rendered as its own labeled section.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Add dependency-free smoke test for the showcase site + CI

Cover the new interactive site: a build-and-assert smoke test (test/smoke.test.mjs,
npm test) verifies the base path, all six extension cards, group order with
code-tutor first, the embedded lightbox data, the lightbox markup, and that every
card has a real screenshot. Add a site job to the Validate workflow so it runs on
every push and PR. Matches the repo's zero-dependency, self-contained test style.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Improve code-tutor screenshot with a seeded curriculum

Replace the empty onboarding shot with a populated Learn view (five topics,
reading-level slider, progress chips, code-review findings) so the card reflects
what the extension does once a codebase is analyzed.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Recapture code-tutor from the top (header + logo, no scroll)

* Add hover zoom on card screenshots; recapture language-tutor from top

Card thumbnails scale to 1.08 on hover/focus with a smooth transition (and a
reduced-motion guard). Recapture the language-tutor shot anchored at the top so
the profile bar and course header aren't clipped.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Make card hover zoom more pronounced (1.12)

* Add sticky topbar with light/dark toggle, GitHub icon, and author byline

Match the other gh-pages sites: a sticky header with a brand, nav, a persisted
light/dark theme switcher (no-flash, data-theme + localStorage), and a GitHub
repo icon. Add a 'by Jon Gallant (jongio)' byline + footer credit. Extend the
smoke test to assert the title, theme toggle, and repo link.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: jongio

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Deploy Astro site to GitHub Pages
+
+# Official Astro → GitHub Pages flow.
+# https://docs.astro.build/en/guides/deploy/github/
+# Set Settings → Pages → Source to "GitHub Actions".
+#
+# The Astro project lives in the site/ subfolder, so the build step points at it
+# via `path: ./site`.
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "site/**"
+      - ".github/workflows/deploy.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install, build, and upload your site
+        uses: withastro/action@v2
+        with:
+          path: ./site # root of the Astro project
+          # node-version: 24         # Node version (default 24)
+          # package-manager: npm     # auto-detected from your lockfile
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/validate.yml

@@ -53,3 +53,24 @@ jobs:
 
       - name: actionlint
         uses: raven-actions/actionlint@3d39aea434753780c3b3d4a1a31c854b4dbf49d7 # v2.2.0
+
+  site:
+    name: Build & test site
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: 22
+
+      - run: npm ci || npm install
+        working-directory: site
+
+      - run: npm test
+        working-directory: site

site/.gitignore

@@ -0,0 +1,13 @@
+# build output
+dist/
+# generated types
+.astro/
+# dependencies
+node_modules/
+# logs
+*.log*
+# environment
+.env
+.env.production
+# macOS
+.DS_Store

site/README.md

@@ -0,0 +1,44 @@
+# Copilot Extensions
+
+A statically-rendered **[Astro](https://astro.build)** site for GitHub Pages.
+
+Site URL: https://jongio.github.io/copilot-extensions/
+
+## Why this template
+
+- **Fast by default.** Astro ships zero JavaScript unless a component opts into
+  hydration ("islands").
+- **Base path solved.** `site` and `base` in `astro.config.mjs` are set from your
+  repo, and links use `import.meta.env.BASE_URL`, so a project site at
+  `/REPO/` and a user site at `/` both work unchanged.
+- **Official deploy.** Uses `withastro/action` + `actions/deploy-pages` — the
+  flow Astro itself documents.
+
+## Develop locally
+
+```sh
+npm install
+npm run dev      # http://localhost:4321
+npm run build    # outputs to dist/
+npm run preview  # serve the production build
+```
+
+## Deploy
+
+1. Push to a GitHub repo's `main` branch.
+2. **Settings → Pages → Source → GitHub Actions**.
+3. `.github/workflows/deploy.yml` builds and publishes on every push to `main`.
+
+> If you rename the repo, update `base` in `astro.config.mjs` to `/NEW-NAME/`.
+
+## Structure
+
+```
+astro.config.mjs           site + base for GitHub Pages
+src/
+  pages/                   file-based routes (index.astro, about.astro)
+  layouts/Layout.astro     HTML shell + base-aware nav
+  components/Card.astro    example component
+public/                    static assets copied verbatim (favicon.svg)
+.github/workflows/deploy.yml
+```

site/astro.config.mjs

@@ -0,0 +1,15 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+
+// https://docs.astro.build/en/guides/deploy/github/
+//
+//   site  — the origin of your deployed site (no path), e.g. https://USER.github.io
+//   base  — the subpath the site is served from. For a *project* site this is
+//           "/REPO/"; for a *user* site (USER.github.io) it is "/".
+//
+// The generator fills these in from your repo. Internal links use
+// `import.meta.env.BASE_URL` so they stay correct at any base.
+export default defineConfig({
+  site: "https://jongio.github.io",
+  base: "/copilot-extensions/",
+});