convert to react

.github/copilot-instructions.md

@@ -1,33 +1,40 @@
-# Copilot instructions for `website`
-
-## Project snapshot
-- This repo is a **Jekyll** site published on **GitHub Pages**.
-- Site-wide config lives in `_config.yml` (notably `baseurl: /visualstudio-wallpapers`).
-- Most pages are top-level HTML files with Jekyll front matter: `index.html`, `desktop.html`, `phone.html`, `watch.html`, `archive.html`.
-- Shared layout/CSS/JS is in `_layouts/default.html` (nav + theme toggle + a11y helpers like skip link/focus styles).
-
-## Local dev workflow
-- Ruby/Jekyll deps are in `Gemfile`.
-- Preferred local run is the VS Code task **“Serve Jekyll Site”** (`bundle exec jekyll serve`).
-
-## URL + asset conventions (important for GH Pages)
-- Use `{{ site.baseurl }}` when linking to pages/assets so paths work under the GitHub Pages subpath.
-	- Example: `{{ site.baseurl }}/wallpapers/desktop/thumbnails/022.jpg` (see `index.html`).
-
-## Wallpapers: file layout + naming
-- Assets are served from `wallpapers/`.
-- Desktop gallery renders from `wallpapers/desktop/thumbnails/*.jpg` (see `desktop.html`).
-	- Downloads assume a matching filename exists at `wallpapers/desktop/<size>/<same-name>.jpg`.
-- Phone gallery lists images from `wallpapers/phone/320x568/*.jpg` (see `phone.html`) and assumes the same filename exists in all phone size folders.
-- Watch gallery lists images from `wallpapers/watch/368x448/*.jpg` (see `watch.html`).
-- Community archive (`archive.html`) is JS-rendered with pagination; it expects `wallpapers/archive/###.jpg` and `wallpapers/archive/thumbnail/###.jpg` and uses a hard-coded `total_items` for page count.
-- Keep filenames **consistent across sizes** and prefer **zero-padded numeric names** (e.g. `024.jpg`) because pages sort by `basename`.
-
-## Device sizes source of truth
-- Download size buttons are generated from `_data/sizes.yml` via `site.data.sizes.<device>`.
-- If you add a new resolution folder, update `_data/sizes.yml` so UI download options match.
-
-## SEO + accessibility patterns to preserve
-- Pages may set `social_image` and `social_image_alt` in front matter; layout uses `{% seo %}`.
-- Preserve keyboard accessibility patterns used in galleries/modals: Enter/Space handlers, focus trapping, and `prefers-reduced-motion` fallbacks.
-- Default to semantic HTML, descriptive link text, and meaningful `alt` attributes.
+# Copilot instructions for `website`
+
+## Project snapshot
+- This repo is a **React + Vite + TypeScript** static site deployed to **GitHub Pages**.
+- Vite config is in `vite.config.ts` (notably `base: '/visualstudio-wallpapers/'`).
+- Pages live in `src/pages/`: `Home.tsx`, `Desktop.tsx`, `Phone.tsx`, `Watch.tsx`, `Archive.tsx`, `SweepstakesRules.tsx`.
+- Shared components in `src/components/`: `Layout.tsx` (nav + theme toggle + a11y helpers), `WallpaperGrid.tsx`, `PreviewModal.tsx`, `DownloadOptions.tsx`.
+- Theme context in `src/contexts/ThemeContext.tsx` (VS Purple / VS Code Blue, persisted in localStorage).
+- Routing in `src/App.tsx` via React Router with `basename="/visualstudio-wallpapers"`.
+
+## Local dev workflow
+- Node.js 20+, npm 9+.
+- `npm install` then `npm run dev` starts the Vite dev server.
+- `npm run build` runs the manifest generator (`scripts/generate-manifest.js`) automatically via `prebuild`, then builds to `dist/`.
+
+## URL + asset conventions (important for GH Pages)
+- Use `import.meta.env.BASE_URL` when referencing static assets in components.
+  - Example: ` ${import.meta.env.BASE_URL}wallpapers/desktop/thumbnails/022.jpg `
+- Use React Router `<Link to="/desktop">` for internal navigation (basename is handled by the router).
+
+## Wallpapers: file layout + naming
+- Assets live in `public/wallpapers/` and are copied to `dist/wallpapers/` on build.
+- Image lists are auto-generated by `scripts/generate-manifest.js` into `src/data/wallpaper-manifest.json`.
+- Desktop gallery reads from `manifest.desktop.images` (thumbnails in `wallpapers/desktop/thumbnails/`).
+  - Downloads assume a matching filename exists at `wallpapers/desktop/<size>/<same-name>.jpg`.
+- Phone gallery reads from `manifest.phone.images` (smallest size `320x568` used as thumbnails).
+- Watch gallery reads from `manifest.watch.images` (single size `368x448`).
+- Community archive uses `manifest.archive.totalItems` for pagination; images are sequential `###.jpg`.
+- Keep filenames **consistent across sizes** and prefer **zero-padded numeric names** (e.g. `024.jpg`).
+
+## Device sizes source of truth
+- Download sizes are defined in `src/data/sizes.ts`.
+- If you add a new resolution folder, update `sizes.ts` so the UI download options match.
+- Then run `npm run generate-manifest` to pick up new folders.
+
+## SEO + accessibility patterns to preserve
+- Per-page `<title>` and `og:image` meta tags via `react-helmet-async`.
+- Preserve keyboard accessibility in galleries/modals: Enter/Space handlers, focus trapping, and `prefers-reduced-motion` fallbacks.
+- Default to semantic HTML, descriptive link text, and meaningful `alt` attributes.
+- Dark mode supported via `prefers-color-scheme: dark` CSS media query.

.github/workflows/deploy.yml

@@ -0,0 +1,56 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  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: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Generate wallpaper manifest
+        run: npm run generate-manifest
+
+      - name: Build
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -418,4 +418,8 @@ _site/
 .jekyll-cache/
 .jekyll-metadata
 vendor/
-.bundle/
+.bundle/
+
+# Vite / React
+dist/
+*.local

.vscode/tasks.json

@@ -2,11 +2,21 @@
 	"version": "2.0.0",
 	"tasks": [
 		{
-			"label": "Serve Jekyll Site",
+			"label": "Dev Server",
 			"type": "shell",
-			"command": "bundle exec jekyll serve",
+			"command": "npm run dev",
 			"isBackground": true,
 			"problemMatcher": []
+		},
+		{
+			"label": "Build",
+			"type": "shell",
+			"command": "npm run build",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": []
 		}
 	]
 }