Expandable project cards + Vitest tests & CI#11
Merged
Conversation
Part 1 — expandable project cards (homepage): - add src/data/projects.ts: typed Project[] with tagline, longDesc, stack, role, badge, and a links[] array - rework HorizontalCard into a native <details>/<summary> accordion (no JS): whole card toggles, chevron rotates via group-open, expanded body shows description + stack line + outbound link buttons - drop the dead tags/discontinued special-casing; swap astro:assets <Image> for a plain <img> (no optimization on /public paths anyway, and it renders cleanly under the Container API) - index.astro maps over projects instead of 5 hand-written cards Part 2 — tests + CI: - add Vitest (getViteConfig), test/test:watch scripts - projects.test.ts: data invariants (fields, root-relative images, http(s) links, badge implies badgeClass) - travel.test.ts: current country present, unique codes, finite coords - HorizontalCard.test.ts: Container API render (accordion structure, content, one safe link button per link, discontinued dimming) - ci.yml: run npm test after npm ci, before astro check Verification: 30 tests pass, astro check 0/0/0, build succeeds. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for grand-croquembouche-1d568d ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- HorizontalCard: animate only box-shadow on hover (softer shadow-lg, 300ms) instead of transitioning all properties; add subtle bg tint on the summary header for affordance - HorizontalCard: ease the open/close via ::details-content height + interpolate-size (Chromium 129+); browsers without it snap gracefully - projects: souper.cafe drops all links; nodes.garden gains Techstars announcement + Arbitrum grant links; SupportOS gains GitHub link - projects.test: allow a project to have zero links (still validates label + http(s) url when present) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- HorizontalCard: remove the hover background tint that sat on the <summary> only (tinted just the header when a card was open, which looked odd); rely on the whole-card shadow lift for hover feedback - projects: souper.cafe was a full Rails app, not just a site — add stack (Ruby on Rails, PostgreSQL) and note the custom admin panel with dynamic menus in the description Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…G, nodes.garden GCP) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part 1: Expandable project cards (homepage)
Clicking a project card now expands it in place to show what was built, the tech stack, and relevant links, instead of immediately navigating away.
src/data/projects.ts(new): typedProject[]withtagline,longDesc,stack,role, badge, and alinks[]array.HorizontalCard.astro: reworked into a native<details>/<summary>accordion (no JS). Whole card toggles, chevron rotates viagroup-open:, expanded body shows the description, a stack line, and outbound link buttons (target="_blank" rel="noopener noreferrer").tags/discontinued special-casing; swapped theastro:assets<Image>for a plain<img>(no optimization on/publicpaths anyway, and it renders cleanly under the Container API).index.astromaps overprojectsinstead of five hand-written cards.Part 2: Tests + CI
getViteConfig), withtest/test:watchscripts.projects.test.ts: data invariants (required fields, root-relative images, http(s) links, badge implies badgeClass).travel.test.ts: current country present, unique codes, finite coordinates.HorizontalCard.test.ts: Container API render (accordion structure, content, one safe link button per link, discontinued dimming).ci.yml: runsnpm run testafternpm ci, beforeastro check.Also included (earlier
astro checkcleanup, held back to bundle)is:inlineon the three JSON / JSON-LD<script>tags.@types/d3-geoand@types/topojson-client; typed the now-checkedfeature()/geoPath()calls.Verification
npm run test→ 30 passednpx astro check→ 0 errors / 0 warnings / 0 hintsnpm run build→ 8 pages, success🤖 Generated with Claude Code