Repository navigation
✨ feat(dev-tools-help-docs): add package showcase with parallax and cover generation - #116
Merged
Merged
Conversation
…mepage Add Aceternity's HeroParallax (motion/react) as a scroll-driven tour of every app, CLI, library and template, between the hero and the catalog. Each package now has a longer description, shown on hover, and a generated SVG cover image, also used as a banner on the package cards. - components/ui/hero-parallax.tsx: adapted to any product count, a custom header and per-card descriptions - scripts/generate-package-covers.tsx: renders public/packages/*.svg from packages-data.ts - packages-data.ts: longDescription, image and href per package; fix the app-store-buttons and SvelteKit template paths, and replace the Prisma template that is not in starter-templates/ with the Cloudflare one - card search also matches the long description Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TwfZTtEdayHwyG1y3QR2ws
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch had an error being deployed
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
2 participants
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.
Adds a scrollable package showcase to the homepage with dynamically generated SVG cover images for each package, app, and template.
Changes
New script
scripts/generate-package-covers.tsx: Generates self-contained SVG cover images for all packages. Each cover includes the package icon, name, category, description, and terminal window with sample commands. Covers are rendered identically everywhere with no external dependencies (no fonts, no network calls).New component
src/components/ui/hero-parallax.tsx: Adapted Aceternity's hero parallax component to support any number of products (split evenly across three rows) with custom headers and optional descriptions per card. Cards tilt into place and slide in opposite directions as the section scrolls past.New component
src/app/(home)/package-showcase.tsx: Renders the parallax showcase using all packages frompackages-data.ts, with category labels and long descriptions shown on hover.Enhanced data model in
src/app/(home)/packages-data.ts:longDescriptionfield for fuller descriptions shown on hoverimagefield pointing to generated cover SVGhreffield for navigation (docs page or GitHub)REPO_URLconstant andgithub()helper for consistent linkingGenerated assets: 24 SVG cover images in
public/packages/(one per package/app/template), generated by the cover script.Homepage integration in
src/app/(home)/page.tsx: Imported and integrated thePackageShowcasecomponent into the page layout.Implementation details
The cover generator creates SVG files with:
The parallax component distributes products evenly across three rows and applies spring-based animations to create the tilting and sliding effect as the user scrolls.
All cover images should be regenerated after editing a package's name, description, icon, or commands by running
bun ./scripts/generate-package-covers.tsx.https://claude.ai/code/session_01TwfZTtEdayHwyG1y3QR2ws