preact + vanilla extract

[Vilos92]

Summary by CodeRabbit

• New Features

  • Hub now mounts a client-side Preact app and preserves the searchable hub UI with improved accessibility.

• Refactor

  • Moved styling to a zero-runtime CSS system and modernized frontend stack for a smaller, Workers-friendly runtime.

• Chores

  • Added supply-chain safety config restricting new installs to >=7 days old and updated build/tooling configs.

• Documentation

  • Updated workflow and validation checklist guidance.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 044da6d8-c172-4aed-9d1d-ed7040388309

📥 Commits

Reviewing files that changed from the base of the PR and between 174b90a and 6ff15c7.

📒 Files selected for processing (1)

• src/hub/HubSearch.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/hub/HubSearch.tsx

---

📝 Walkthrough

Walkthrough

The hub page is migrated from imperative DOM code to a Preact component tree with Vanilla Extract zero-runtime styles; build tooling (Vite/TS) and Bun config are updated, global and component styles are added, HTML/entrypoint simplified, and docs/plans adjusted for the new stack.

Changes

Preact + Vanilla Extract Hub Migration

Layer / File(s)	Summary
Build tooling and dependency configuration package.json, vite.config.ts, tsconfig.json, bunfig.toml	Preact and Vanilla Extract packages added; Vite plugins and TS JSX configured for Preact; Bun minimumReleaseAge set to 604,800.
Design tokens and global styling src/hub/tokens.ts, src/hub/global.css.ts	Immutable color palette exported; global styles set box-sizing, centered layout, system font stack, palette colors, and coarse-pointer responsive layout.
Component-scoped styling via Vanilla Extract src/hub/hub.css.ts	Exports semantic classes for main layout, header, search form, inputs/buttons (focus/hover/disabled), results container/links, per-result text, and empty-state styling with responsive rules.
Preact component tree and user interactions src/hub/HubApp.tsx, src/hub/HubHeader.tsx, src/hub/HubSearch.tsx	HubApp composes HubHeader and HubSearch; HubHeader renders external GitHub link and tagline; HubSearch manages query state, filters public projects, renders accessible results, and opens slugs in new tabs via globalThis.open.
Application entry point and HTML bootstrap src/hub-app.tsx, index.html	index.html reduced to a #root mount node; src/hub-app.tsx mounts <HubApp /> and errors if #root is missing.
Developer documentation and codebase conventions .cursor/plans/preact_vanilla_extract_hub_qq345m35.plan.md, AGENTS.md, src/routing.ts	Migration plan and AGENTS.md updated for the Preact/Vanilla Extract workflow; routing comment renamed from "API" to "Helpers".

Sequence Diagram

sequenceDiagram
  participant index as index.html
  participant hubApp as hub-app.tsx
  participant HubApp as HubApp
  participant HubHeader as HubHeader
  participant HubSearch as HubSearch

  index->>hubApp: mounts to root
  hubApp->>HubApp: renders component
  HubApp->>HubHeader: renders component
  HubApp->>HubSearch: renders component
  HubSearch->>HubSearch: user types query
  HubSearch->>HubSearch: filters projects
  HubSearch->>HubSearch: user selects result
  HubSearch->>HubSearch: opens slug in new tab

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Vilos92/grynthia.cat#4: Adds identical bunfig.toml minimumReleaseAge = 604_800 configuration.
• Vilos92/vilos92.com#1: Earlier hub refactor that overlaps with search and hub entry changes.

Poem

🐰 I hopped from DOM to JSX bright,

Components snug, styles tucked tight.
Vanilla tokens, Preact cheer,
The hub now springs and hops with cheer.
✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately reflects the main change: migrating the hub from vanilla DOM to Preact + Vanilla Extract for styling.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch preact-and-vanilla-extract

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/hub/HubSearch.tsx`:
- Around line 70-83: The ARIA roles are incorrect for plain link lists: remove
role="listbox" from the <ul> (currently using styles.results and aria-label
based on showEmptyState) and remove role="option" from each <li> rendered from
matches (and any other similar occurrences around the other block at lines
96-99), leaving standard semantic <ul>/<li>/<a> structure; keep the empty-state
<li role="presentation"> and the existing aria-label text if desired but do not
use listbox/option roles for links (adjust any tests/JSX that reference those
roles such as showEmptyState, trimmedQuery, matches, and styles.resultLink).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 15558769-4945-4194-8fde-290523dece03

📥 Commits

Reviewing files that changed from the base of the PR and between a151b55 and 174b90a.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (17)

• .cursor/plans/preact_vanilla_extract_hub_qq345m35.plan.md
• AGENTS.md
• bunfig.toml
• index.html
• package.json
• src/hub-app.ts
• src/hub-app.tsx
• src/hub.css
• src/hub/HubApp.tsx
• src/hub/HubHeader.tsx
• src/hub/HubSearch.tsx
• src/hub/global.css.ts
• src/hub/hub.css.ts
• src/hub/tokens.ts
• src/routing.ts
• tsconfig.json
• vite.config.ts

💤 Files with no reviewable changes (2)

• src/hub.css
• src/hub-app.ts