From a5a668ac83318a8e68720560fee447c1ec43251f Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 09:38:18 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(dev-tools-help-docs):=20hero?= =?UTF-8?q?=20parallax=20package=20showcase=20on=20the=20homepage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01TwfZTtEdayHwyG1y3QR2ws --- .claude/apps/dev-tools-help-docs/CLAUDE.md | 9 + .../packages/Cloud-Computer-Control-Panel.svg | 46 ++++ .../public/packages/about-system-info.svg | 46 ++++ .../public/packages/api2ai-mcp-generator.svg | 46 ++++ .../public/packages/cccp-vscode-ext.svg | 46 ++++ .../packages/cloudflare-to-claude-fix.svg | 45 ++++ .../public/packages/create-cloud-db.svg | 45 ++++ .../public/packages/create-starter-app.svg | 46 ++++ .../public/packages/dev-tools-help-docs.svg | 46 ++++ .../packages/export-svg-icons-typescript.svg | 46 ++++ .../public/packages/git0-repo-downloader.svg | 46 ++++ .../public/packages/manage-storage.svg | 46 ++++ .../public/packages/open-when-ready.svg | 46 ++++ .../packages/react-app-store-buttons.svg | 46 ++++ .../public/packages/server-shell-setup.svg | 45 ++++ .../public/packages/template-docusaurus.svg | 46 ++++ .../public/packages/template-fumadocs.svg | 46 ++++ ...plate-nextjs-betterauth-shadcn-drizzle.svg | 45 ++++ .../template-nextjs-harness-cloudflare.svg | 46 ++++ ...plate-svelte-betterauth-shadcn-drizzle.svg | 46 ++++ .../public/packages/verify-phone-sms.svg | 46 ++++ .../public/packages/vscode-cloud.svg | 46 ++++ .../public/packages/web2mobile-wrapper.svg | 45 ++++ .../scripts/generate-package-covers.tsx | 208 ++++++++++++++++++ .../src/app/(home)/package-showcase.tsx | 41 ++++ .../src/app/(home)/packages-data.ts | 159 +++++++++---- .../src/app/(home)/page.tsx | 37 +++- .../src/components/ui/hero-parallax.tsx | 190 ++++++++++++++++ 28 files changed, 1606 insertions(+), 45 deletions(-) create mode 100644 apps/dev-tools-help-docs/public/packages/Cloud-Computer-Control-Panel.svg create mode 100644 apps/dev-tools-help-docs/public/packages/about-system-info.svg create mode 100644 apps/dev-tools-help-docs/public/packages/api2ai-mcp-generator.svg create mode 100644 apps/dev-tools-help-docs/public/packages/cccp-vscode-ext.svg create mode 100644 apps/dev-tools-help-docs/public/packages/cloudflare-to-claude-fix.svg create mode 100644 apps/dev-tools-help-docs/public/packages/create-cloud-db.svg create mode 100644 apps/dev-tools-help-docs/public/packages/create-starter-app.svg create mode 100644 apps/dev-tools-help-docs/public/packages/dev-tools-help-docs.svg create mode 100644 apps/dev-tools-help-docs/public/packages/export-svg-icons-typescript.svg create mode 100644 apps/dev-tools-help-docs/public/packages/git0-repo-downloader.svg create mode 100644 apps/dev-tools-help-docs/public/packages/manage-storage.svg create mode 100644 apps/dev-tools-help-docs/public/packages/open-when-ready.svg create mode 100644 apps/dev-tools-help-docs/public/packages/react-app-store-buttons.svg create mode 100644 apps/dev-tools-help-docs/public/packages/server-shell-setup.svg create mode 100644 apps/dev-tools-help-docs/public/packages/template-docusaurus.svg create mode 100644 apps/dev-tools-help-docs/public/packages/template-fumadocs.svg create mode 100644 apps/dev-tools-help-docs/public/packages/template-nextjs-betterauth-shadcn-drizzle.svg create mode 100644 apps/dev-tools-help-docs/public/packages/template-nextjs-harness-cloudflare.svg create mode 100644 apps/dev-tools-help-docs/public/packages/template-svelte-betterauth-shadcn-drizzle.svg create mode 100644 apps/dev-tools-help-docs/public/packages/verify-phone-sms.svg create mode 100644 apps/dev-tools-help-docs/public/packages/vscode-cloud.svg create mode 100644 apps/dev-tools-help-docs/public/packages/web2mobile-wrapper.svg create mode 100644 apps/dev-tools-help-docs/scripts/generate-package-covers.tsx create mode 100644 apps/dev-tools-help-docs/src/app/(home)/package-showcase.tsx create mode 100644 apps/dev-tools-help-docs/src/components/ui/hero-parallax.tsx diff --git a/.claude/apps/dev-tools-help-docs/CLAUDE.md b/.claude/apps/dev-tools-help-docs/CLAUDE.md index 35045030..3c58d031 100644 --- a/.claude/apps/dev-tools-help-docs/CLAUDE.md +++ b/.claude/apps/dev-tools-help-docs/CLAUDE.md @@ -66,3 +66,12 @@ straight from the package's `openapi.json`). The search bar lives in the sidebar, not the navbar, using `src/components/fumadocs/layout/sidebar-search.tsx` — a copy of the same file in `starter-templates/template-fumadocs`. Keep the two in sync. + +## Homepage package catalog + +The homepage (`src/app/(home)/`) is driven by `packages-data.ts`: each entry +has a short `description` (cards, search), a `longDescription` (hover text in +the `HeroParallax` showcase), an `href` and an `image`. The images in +`public/packages/*.svg` are **generated** — after changing a package's name, +description, icon or commands, run `bun ./scripts/generate-package-covers.tsx` +and commit the output. diff --git a/apps/dev-tools-help-docs/public/packages/Cloud-Computer-Control-Panel.svg b/apps/dev-tools-help-docs/public/packages/Cloud-Computer-Control-Panel.svg new file mode 100644 index 00000000..9ca0159d --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/Cloud-Computer-Control-Panel.svg @@ -0,0 +1,46 @@ + + Cloud-Computer-Control-Panel + + + + + + + + + + + + + + + + + + + + + + + + + APPS + apps/Cloud-Computer-Control-Panel + + Cloud-Computer-Control-Panel + Open-source cloud infrastructure management platform. + Automates Dokploy deployment for container orchestration + on AWS EC2 -- provision servers, manage containers, and… + + + + + + + + $ bun dev + $ bun run build + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/about-system-info.svg b/apps/dev-tools-help-docs/public/packages/about-system-info.svg new file mode 100644 index 00000000..d3d4531b --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/about-system-info.svg @@ -0,0 +1,46 @@ + + about-system-info + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/about-system-info + + about-system-info + Cross-platform CLI that prints CPU, memory, disk, uptime, + public IP, ISP, and installed tools as a compact emoji + line. + + + + + + + + $ npx about-system + $ npm install -g about-system + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/api2ai-mcp-generator.svg b/apps/dev-tools-help-docs/public/packages/api2ai-mcp-generator.svg new file mode 100644 index 00000000..3a021e5a --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/api2ai-mcp-generator.svg @@ -0,0 +1,46 @@ + + api2ai-mcp-generator + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/api2ai-mcp-generator + + api2ai-mcp-generator + Generate production-ready MCP servers from any OpenAPI + spec. Supports HTTP, SSE, and Streamable HTTP transports + with Zod validation and auth. + + + + + + + + $ npx api2ai <openapi-spec-url> + $ npm install -g api2ai + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/cccp-vscode-ext.svg b/apps/dev-tools-help-docs/public/packages/cccp-vscode-ext.svg new file mode 100644 index 00000000..06a1c726 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/cccp-vscode-ext.svg @@ -0,0 +1,46 @@ + + cccp-vscode-ext + + + + + + + + + + + + + + + + + + + + + + + + + APPS + apps/cccp-vscode-ext + + cccp-vscode-ext + The Cloud Computer Control Panel dashboard in the VS Code + sidebar, reusing the Next.js app's own React components so + provisioning and credential management happen inside the… + + + + + + + + $ bun run compile + $ bun run test + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/cloudflare-to-claude-fix.svg b/apps/dev-tools-help-docs/public/packages/cloudflare-to-claude-fix.svg new file mode 100644 index 00000000..34151463 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/cloudflare-to-claude-fix.svg @@ -0,0 +1,45 @@ + + cloudflare-to-claude-fix + + + + + + + + + + + + + + + + + + + + + + + + + INFRASTRUCTURE + packages/cloudflare-to-claude-fix + + cloudflare-to-claude-fix + Cloudflare Workers Queue consumer that fires a Claude Code + routine automatically whenever a Workers build fails. + + + + + + + + $ bun deploy + $ wrangler deploy + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/create-cloud-db.svg b/apps/dev-tools-help-docs/public/packages/create-cloud-db.svg new file mode 100644 index 00000000..eea7f8cf --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/create-cloud-db.svg @@ -0,0 +1,45 @@ + + create-cloud-db + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/create-cloud-db + + create-cloud-db + Interactive CLI that creates a Turso edge database and + writes credentials directly into your .env file. + + + + + + + + $ npx create-cloud-db [db-name] + $ npm install -g create-cloud-db + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/create-starter-app.svg b/apps/dev-tools-help-docs/public/packages/create-starter-app.svg new file mode 100644 index 00000000..9ddc0099 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/create-starter-app.svg @@ -0,0 +1,46 @@ + + create-starter-app + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/create-starter-app + + create-starter-app + Interactive CLI to scaffold a starter app from curated + templates. Prompts for framework, auth provider, database, + and UI library. + + + + + + + + $ npx create-starter-app + $ bun create starter-app + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/dev-tools-help-docs.svg b/apps/dev-tools-help-docs/public/packages/dev-tools-help-docs.svg new file mode 100644 index 00000000..55d0d23f --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/dev-tools-help-docs.svg @@ -0,0 +1,46 @@ + + dev-tools-help-docs + + + + + + + + + + + + + + + + + + + + + + + + + APPS + apps/dev-tools-help-docs + + dev-tools-help-docs + Documentation site built with Next.js featuring AI chat, + full-text search, and auto-generated API reference from + TypeScript types and OpenAPI specs. + + + + + + + + $ bun dev + $ bun run docs:sync + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/export-svg-icons-typescript.svg b/apps/dev-tools-help-docs/public/packages/export-svg-icons-typescript.svg new file mode 100644 index 00000000..eadbc3f1 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/export-svg-icons-typescript.svg @@ -0,0 +1,46 @@ + + export-svg-icons-typescript + + + + + + + + + + + + + + + + + + + + + + + + + LIBRARIES + packages/export-svg-icons-typescript + + export-svg-icons-typescript + Convert a folder of SVG icons into a color-customizable, + tree-shakable TypeScript index that works with any + component framework. + + + + + + + + $ npx export-svg-typescript -i ./src/icons + $ npm install -g export-svg-typescript + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/git0-repo-downloader.svg b/apps/dev-tools-help-docs/public/packages/git0-repo-downloader.svg new file mode 100644 index 00000000..414fdab4 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/git0-repo-downloader.svg @@ -0,0 +1,46 @@ + + git0-repo-downloader + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/git0-repo-downloader + + git0-repo-downloader + CLI to search GitHub repos by keyword, download source + archives or release binaries, install deps, and open in + editor. + + + + + + + + $ npx git0 <repo> + $ npm install -g git0 + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/manage-storage.svg b/apps/dev-tools-help-docs/public/packages/manage-storage.svg new file mode 100644 index 00000000..2540b868 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/manage-storage.svg @@ -0,0 +1,46 @@ + + manage-storage + + + + + + + + + + + + + + + + + + + + + + + + + LIBRARIES + packages/manage-storage + + manage-storage + Unified storage API for AWS S3, Cloudflare R2, and + Backblaze B2. Auto-detects provider from env vars. One + StorageManager class: upload, download, list, copy… + + + + + + + + $ npm install manage-storage + $ bun add manage-storage + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/open-when-ready.svg b/apps/dev-tools-help-docs/public/packages/open-when-ready.svg new file mode 100644 index 00000000..76b25f77 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/open-when-ready.svg @@ -0,0 +1,46 @@ + + open-when-ready + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/open-when-ready + + open-when-ready + Smart dev server wrapper that watches output, auto-opens + browser when ready, and on error launches your AI + assistant. + + + + + + + + $ npx open-ready <command> + $ npm install -g open-ready + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/react-app-store-buttons.svg b/apps/dev-tools-help-docs/public/packages/react-app-store-buttons.svg new file mode 100644 index 00000000..8483c219 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/react-app-store-buttons.svg @@ -0,0 +1,46 @@ + + react-app-store-buttons + + + + + + + + + + + + + + + + + + + + + + + + + LIBRARIES + packages/react-app-store-buttons + + react-app-store-buttons + React badge components for 8 app store and platform + download links. Detects user OS and highlights matching + button. + + + + + + + + $ npm install react-app-store-buttons + $ bun add react-app-store-buttons + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/server-shell-setup.svg b/apps/dev-tools-help-docs/public/packages/server-shell-setup.svg new file mode 100644 index 00000000..27c51d74 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/server-shell-setup.svg @@ -0,0 +1,45 @@ + + server-shell-setup + + + + + + + + + + + + + + + + + + + + + + + + + CLI TOOLS + packages/server-shell-setup + + server-shell-setup + One-command bootstrap for a modern dev environment: + installs fish, nvim, nushell, bun, node, helix, starship, + docker, and more. + + + + + + + + $ wget -qO- tinyurl.com/shellsetup | bash + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/template-docusaurus.svg b/apps/dev-tools-help-docs/public/packages/template-docusaurus.svg new file mode 100644 index 00000000..a2bec6b9 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/template-docusaurus.svg @@ -0,0 +1,46 @@ + + Docusaurus Documentation + + + + + + + + + + + + + + + + + + + + + + + + + STARTER TEMPLATES + starter-templates/template-docusaurus + + Docusaurus Documentation + Docusaurus 3 docs template with offline Lunr search, + OpenAPI plugin, and classic theme optimized for technical + docs. + + + + + + + + $ bun create starter-app + $ npx create-starter-app + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/template-fumadocs.svg b/apps/dev-tools-help-docs/public/packages/template-fumadocs.svg new file mode 100644 index 00000000..728512b4 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/template-fumadocs.svg @@ -0,0 +1,46 @@ + + Fumadocs Documentation + + + + + + + + + + + + + + + + + + + + + + + + + STARTER TEMPLATES + starter-templates/template-fumadocs + + Fumadocs Documentation + Documentation site with Fumadocs, Orama search, + OpenAPI/Swagger docs, MDX support, and collapsible + sidebar. + + + + + + + + $ bun create starter-app + $ npx create-starter-app + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/template-nextjs-betterauth-shadcn-drizzle.svg b/apps/dev-tools-help-docs/public/packages/template-nextjs-betterauth-shadcn-drizzle.svg new file mode 100644 index 00000000..188df7b6 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/template-nextjs-betterauth-shadcn-drizzle.svg @@ -0,0 +1,45 @@ + + Next.js + Better Auth + Drizzle + + + + + + + + + + + + + + + + + + + + + + + + + STARTER TEMPLATES + …templates/template-nextjs-betterauth-shadcn-drizzle + + Next.js + Better Auth + Drizzle + Next.js SaaS boilerplate with PostgreSQL, Better Auth, + Stripe subscriptions, and shadcn/ui components. + + + + + + + + $ bun create starter-app + $ npx create-starter-app + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/template-nextjs-harness-cloudflare.svg b/apps/dev-tools-help-docs/public/packages/template-nextjs-harness-cloudflare.svg new file mode 100644 index 00000000..2c5fbaaf --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/template-nextjs-harness-cloudflare.svg @@ -0,0 +1,46 @@ + + Next.js SaaS on Cloudflare + + + + + + + + + + + + + + + + + + + + + + + + + STARTER TEMPLATES + starter-templates/template-nextjs-harness-cloudflare + + Next.js SaaS on Cloudflare + Next.js SaaS template with Better Auth, Stripe billing, + teams, a dashboard and 50 colour themes, deployed to + Cloudflare. + + + + + + + + $ bun create starter-app + $ npx create-starter-app + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/template-svelte-betterauth-shadcn-drizzle.svg b/apps/dev-tools-help-docs/public/packages/template-svelte-betterauth-shadcn-drizzle.svg new file mode 100644 index 00000000..833892f6 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/template-svelte-betterauth-shadcn-drizzle.svg @@ -0,0 +1,46 @@ + + SvelteKit + Better Auth + Drizzle + + + + + + + + + + + + + + + + + + + + + + + + + STARTER TEMPLATES + …templates/template-svelte-betterauth-shadcn-drizzle + + SvelteKit + Better Auth + Drizzle + Full-stack SvelteKit app with Better Auth, Drizzle ORM on + Cloudflare D1, Stripe payments, and shadcn-svelte + components. + + + + + + + + $ bun create starter-app + $ npx create-starter-app + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/verify-phone-sms.svg b/apps/dev-tools-help-docs/public/packages/verify-phone-sms.svg new file mode 100644 index 00000000..289de454 --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/verify-phone-sms.svg @@ -0,0 +1,46 @@ + + verify-phone-sms + + + + + + + + + + + + + + + + + + + + + + + + + INFRASTRUCTURE + packages/verify-phone-sms + + verify-phone-sms + SMS phone verification API server built with Hono on + Cloudflare Workers. Sends OTP codes, blocks VoIP, enforces + rate limiting. + + + + + + + + $ bun deploy + $ wrangler deploy + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/vscode-cloud.svg b/apps/dev-tools-help-docs/public/packages/vscode-cloud.svg new file mode 100644 index 00000000..47f2c40b --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/vscode-cloud.svg @@ -0,0 +1,46 @@ + + vscode-cloud + + + + + + + + + + + + + + + + + + + + + + + + + APPS + apps/vscode-cloud + + vscode-cloud + Per-user VS Code (code-server) instances on Cloudflare + Containers. Each user gets a fully isolated environment + with SSO, SQLite storage, and traffic routing. + + + + + + + + $ bun deploy + $ wrangler deploy + $ + + + diff --git a/apps/dev-tools-help-docs/public/packages/web2mobile-wrapper.svg b/apps/dev-tools-help-docs/public/packages/web2mobile-wrapper.svg new file mode 100644 index 00000000..0037e51a --- /dev/null +++ b/apps/dev-tools-help-docs/public/packages/web2mobile-wrapper.svg @@ -0,0 +1,45 @@ + + web2mobile-wrapper + + + + + + + + + + + + + + + + + + + + + + + + + INFRASTRUCTURE + packages/web2mobile-wrapper + + web2mobile-wrapper + Transform any website URL into a native mobile app wrapper + for iOS and Android with push notifications. + + + + + + + + $ npx create-mobile-wrapper + $ npm install -g create-mobile-wrapper + $ + + + diff --git a/apps/dev-tools-help-docs/scripts/generate-package-covers.tsx b/apps/dev-tools-help-docs/scripts/generate-package-covers.tsx new file mode 100644 index 00000000..be75e3e2 --- /dev/null +++ b/apps/dev-tools-help-docs/scripts/generate-package-covers.tsx @@ -0,0 +1,208 @@ +/** + * Generates one cover image per package for the homepage — the thumbnails in + * the hero parallax and on the package cards — into `public/packages/`. + * + * Each cover is a self-contained SVG built from `packages-data.ts`: the + * package's Lucide icon, name, category, short description and a terminal + * window showing its commands. No network, no fonts to load, so the images + * render identically everywhere and cost a few KB each. + * + * Run with `bun ./scripts/generate-package-covers.tsx` after editing a + * package's name, description, icon or commands, and commit the output. + */ +import { mkdir, rm, writeFile } from 'node:fs/promises' +import * as path from 'node:path' +import { + BookOpen, + Cloud, + Code, + Cpu, + Database, + FileText, + GitBranch, + Globe, + HardDrive, + Image, + Layers, + type LucideIcon, + MonitorSmartphone, + Package, + Rocket, + Server, + Shield, + Smartphone, + Wand2, + Zap, +} from 'lucide-react' +import { renderToStaticMarkup } from 'react-dom/server' +import { categories } from '../src/app/(home)/packages-data' + +const OUT_DIR = path.resolve(import.meta.dirname, '../public/packages') + +const W = 960 +const H = 768 + +const icons: Record = { + BookOpen, + Cloud, + Code, + Cpu, + Database, + FileText, + GitBranch, + Globe, + HardDrive, + Image, + Layers, + MonitorSmartphone, + Rocket, + Server, + Shield, + Smartphone, + Wand2, + Zap, +} + +/** The homepage's brand / teal / ember accents, as concrete colours. */ +const accents: Record = { + brand: { main: '#a78bfa', soft: '#7c3aed' }, + teal: { main: '#2dd4bf', soft: '#0d9488' }, + ember: { main: '#fb923c', soft: '#ea580c' }, +} + +const SANS = + "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" +const MONO = + "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace" + +const escapeXml = (s: string) => + s + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + +/** Greedy word wrap by character count; the last line gets an ellipsis. */ +function wrap(text: string, maxChars: number, maxLines: number): string[] { + const lines: string[] = [] + let line = '' + for (const word of text.split(/\s+/)) { + const next = line ? `${line} ${word}` : word + if (next.length <= maxChars) { + line = next + continue + } + if (line) lines.push(line) + line = word + if (lines.length === maxLines) break + } + if (lines.length < maxLines && line) lines.push(line) + if (lines.length === maxLines && lines.join(' ').length < text.length) { + const last = lines[maxLines - 1] + lines[maxLines - 1] = + `${last.slice(0, maxChars - 1).replace(/[\s.,;:—-]+$/, '')}…` + } + return lines +} + +/** Keeps the tail of a long repo path so it never runs off the cover. */ +function shortPath(p: string, max = 52) { + const clean = p.replace(/\/$/, '') + return clean.length > max ? `…${clean.slice(clean.length - max + 1)}` : clean +} + +function icon(name: string, color: string, size: number, strokeWidth = 1.75) { + const Icon = icons[name] ?? Package + return renderToStaticMarkup( + + ) +} + +function cover( + pkg: (typeof categories)[number]['packages'][number], + category: (typeof categories)[number] +) { + const { main, soft } = accents[category.color] ?? accents.brand + const nameSize = pkg.name.length > 26 ? 44 : pkg.name.length > 18 ? 52 : 60 + const nameLines = wrap(pkg.name, Math.floor(1500 / nameSize), 2) + const descLines = wrap(pkg.description, 58, 3) + const nameTop = 250 + const descTop = nameTop + nameLines.length * nameSize * 1.1 + 20 + const termTop = 480 + const commands = pkg.commands.slice(0, 2) + + return ` + ${escapeXml(pkg.name)} + + + + + + + + + + + + + + + + + + ${icon(pkg.icon, main, 360, 1.25)} + + + + + ${icon(pkg.icon, main, 56)} + + ${escapeXml(category.name.toUpperCase())} + ${escapeXml(shortPath(pkg.path))} + + ${nameLines + .map( + (line, i) => + `${escapeXml(line)}` + ) + .join('\n ')} + ${descLines + .map( + (line, i) => + `${escapeXml(line)}` + ) + .join('\n ')} + + + + + + + + ${commands + .map((cmd, i) => { + const text = cmd.length > 50 ? `${cmd.slice(0, 49)}…` : cmd + return `$ ${escapeXml(text)}` + }) + .join('\n ')} + $ + + + +` +} + +await rm(OUT_DIR, { recursive: true, force: true }) +await mkdir(OUT_DIR, { recursive: true }) + +let count = 0 +for (const category of categories) { + for (const pkg of category.packages) { + const file = path.join(OUT_DIR, path.basename(pkg.image)) + await writeFile(file, cover(pkg, category)) + count++ + } +} +console.log( + `Wrote ${count} package covers to ${path.relative(process.cwd(), OUT_DIR)}` +) diff --git a/apps/dev-tools-help-docs/src/app/(home)/package-showcase.tsx b/apps/dev-tools-help-docs/src/app/(home)/package-showcase.tsx new file mode 100644 index 00000000..3681fd31 --- /dev/null +++ b/apps/dev-tools-help-docs/src/app/(home)/package-showcase.tsx @@ -0,0 +1,41 @@ +'use client' + +import { HeroParallax } from '@/components/ui/hero-parallax' +import { categories } from './packages-data' + +const products = categories.flatMap((category) => + category.packages.map((pkg) => ({ + title: pkg.name, + link: pkg.href, + thumbnail: pkg.image, + description: pkg.longDescription, + eyebrow: category.name, + })) +) + +/** The homepage's scroll-driven tour of every package, app and template. */ +export function PackageShowcase() { + return ( + +

+ The toolkit +

+

+ {products.length} tools,
one monorepo +

+

+ CLIs that set up servers and scaffold projects, libraries for + storage and icons, Cloudflare services that verify phones and fix + failed builds, and starter templates for Next.js and SvelteKit. + Scroll through them all — hover any card for the full story, click + for its docs. +

+ + } + products={products} + /> + ) +} diff --git a/apps/dev-tools-help-docs/src/app/(home)/packages-data.ts b/apps/dev-tools-help-docs/src/app/(home)/packages-data.ts index b9fcd22a..4c4f66e2 100644 --- a/apps/dev-tools-help-docs/src/app/(home)/packages-data.ts +++ b/apps/dev-tools-help-docs/src/app/(home)/packages-data.ts @@ -1,9 +1,20 @@ export interface Package { name: string + /** One-liner shown on the package cards and used by the search filter. */ description: string + /** A fuller paragraph, shown on hover in the parallax showcase. */ + longDescription: string commands: string[] path: string icon: string + /** + * Cover image under `public/`. Generated by + * `bun ./scripts/generate-package-covers.tsx` — re-run it after editing a + * package's name, description, icon or commands here. + */ + image: string + /** Where the showcase links to: the docs page, or GitHub when there is none. */ + href: string } export interface Category { @@ -14,6 +25,10 @@ export interface Category { packages: Package[] } +export const REPO_URL = "https://github.com/OpenSourceAGI/dev-tools-starter-agent" + +const github = (path: string) => `${REPO_URL}/tree/master/${path}` + export const categories: Category[] = [ { name: "Apps", @@ -25,31 +40,43 @@ export const categories: Category[] = [ name: "dev-tools-help-docs", icon: "FileText", description: "Documentation site built with Next.js featuring AI chat, full-text search, and auto-generated API reference from TypeScript types and OpenAPI specs.", - commands: ["bun dev", "npm run dev"], - path: "apps/dev-tools-help-docs/" + longDescription: "The site you are reading. Fumadocs on Next.js with an AI assistant that searches and cites the docs, Orama full-text search, and an API reference generated straight from TypeScript types and OpenAPI specs. Every package README in the monorepo is synced in as a page, and dependency graphs and file trees are rendered live by code-tree-graph.", + commands: ["bun dev", "bun run docs:sync"], + path: "apps/dev-tools-help-docs/", + image: "/packages/dev-tools-help-docs.svg", + href: "/docs", }, { name: "Cloud-Computer-Control-Panel", icon: "Server", description: "Open-source cloud infrastructure management platform. Automates Dokploy deployment for container orchestration on AWS EC2 -- provision servers, manage containers, and monitor services.", - commands: ["bun dev", "npm run dev"], - path: "apps/Cloud-Computer-Control-Panel/" + longDescription: "A self-hosted control panel for your own cloud. It provisions AWS EC2 servers, installs Dokploy on them for container orchestration, and gives you one dashboard to deploy apps, manage containers and databases, watch resource usage, and keep credentials in one place — an open alternative to a managed PaaS that runs on hardware you own.", + commands: ["bun dev", "bun run build"], + path: "apps/Cloud-Computer-Control-Panel/", + image: "/packages/Cloud-Computer-Control-Panel.svg", + href: "/docs/apps/Cloud-Computer-Control-Panel", }, { name: "cccp-vscode-ext", icon: "Cloud", description: "The Cloud Computer Control Panel dashboard in the VS Code sidebar, reusing the Next.js app's own React components so provisioning and credential management happen inside the editor.", + longDescription: "Brings the Cloud Computer Control Panel into a VS Code sidebar view. Rather than re-implementing the UI, the extension mounts the Next.js app's own React components in a webview, so provisioning servers, deploying containers and managing credentials happen without leaving the editor — and stay in sync with the web dashboard.", commands: ["bun run compile", "bun run test"], - path: "apps/cccp-vscode-ext/" + path: "apps/cccp-vscode-ext/", + image: "/packages/cccp-vscode-ext.svg", + href: "/docs/apps/cccp-vscode-ext", }, { name: "vscode-cloud", icon: "Code", description: "Per-user VS Code (code-server) instances on Cloudflare Containers. Each user gets a fully isolated environment with SSO, SQLite storage, and traffic routing.", + longDescription: "Runs a private VS Code in the browser for every user. A Cloudflare Worker authenticates with SSO, then routes each user to their own code-server instance on Cloudflare Containers, with session state kept in a Durable Object's SQLite storage. Containers start on demand and sleep when idle, so a fleet of isolated dev environments costs close to nothing at rest.", commands: ["bun deploy", "wrangler deploy"], - path: "apps/vscode-cloud/" - } - ] + path: "apps/vscode-cloud/", + image: "/packages/vscode-cloud.svg", + href: "/docs/apps/vscode-cloud", + }, + ], }, { name: "CLI Tools", @@ -61,52 +88,73 @@ export const categories: Category[] = [ name: "about-system-info", icon: "Cpu", description: "Cross-platform CLI that prints CPU, memory, disk, uptime, public IP, ISP, and installed tools as a compact emoji line.", + longDescription: "A cross-platform system summary for Windows, macOS and Linux. One command prints CPU, memory, disk, uptime, public IP, ISP and the dev tools you have installed as a compact, emoji-labelled line. Pick individual info blocks, emit JSON for scripts, customise colours, emojis and order in a settings file, and install it as a shell greeting that runs on every new terminal.", commands: ["npx about-system", "npm install -g about-system"], - path: "packages/about-system-info/" + path: "packages/about-system-info/", + image: "/packages/about-system-info.svg", + href: "/docs/packages/about-system-info", }, { name: "api2ai-mcp-generator", icon: "Wand2", description: "Generate production-ready MCP servers from any OpenAPI spec. Supports HTTP, SSE, and Streamable HTTP transports with Zod validation and auth.", + longDescription: "Point it at any OpenAPI spec and get a working MCP server that lets Claude or ChatGPT call that API. Each operation becomes a tool with Zod-validated input; you can filter tools by tag, method or risk. A three-layer security model classifies risky mutations, enforces a runtime approval policy, and hardens outbound HTTP with a host allowlist and timeouts.", commands: ["npx api2ai ", "npm install -g api2ai"], - path: "packages/api2ai-mcp-generator/" + path: "packages/api2ai-mcp-generator/", + image: "/packages/api2ai-mcp-generator.svg", + href: "/docs/packages/api2ai-mcp-generator", }, { name: "create-cloud-db", icon: "Database", description: "Interactive CLI that creates a Turso edge database and writes credentials directly into your .env file.", + longDescription: "Skip the dashboard. create-cloud-db creates a Turso (libSQL) edge database, mints an auth token, and writes TURSO_DATABASE_URL and TURSO_AUTH_TOKEN straight into your project's .env — preserving everything else in the file. Ready to plug into Drizzle or any libSQL client within seconds of running it.", commands: ["npx create-cloud-db [db-name]", "npm install -g create-cloud-db"], - path: "packages/create-cloud-db/" + path: "packages/create-cloud-db/", + image: "/packages/create-cloud-db.svg", + href: "/docs/packages/create-cloud-db", }, { name: "create-starter-app", icon: "Rocket", description: "Interactive CLI to scaffold a starter app from curated templates. Prompts for framework, auth provider, database, and UI library.", + longDescription: "An arrow-key menu that scaffolds a new project from this repo's curated starter templates — Next.js or SvelteKit, Better Auth, Drizzle or Prisma, shadcn UI, Fumadocs or Docusaurus. It copies the template without node_modules, renames the package, and leaves you with a project that runs on the first bun dev.", commands: ["npx create-starter-app", "bun create starter-app"], - path: "packages/create-starter-app/" + path: "packages/create-starter-app/", + image: "/packages/create-starter-app.svg", + href: "/docs/packages/create-starter-app", }, { name: "git0-repo-downloader", icon: "GitBranch", description: "CLI to search GitHub repos by keyword, download source archives or release binaries, install deps, and open in editor.", + longDescription: "From idea to open editor in one command. Search GitHub by keyword or paste a URL, then git0 downloads the source (or just a sub-folder from a /tree/ link), or the release binary built for your OS and CPU. It detects the project type, installs dependencies with the right package manager, and opens the folder in your IDE.", commands: ["npx git0 ", "npm install -g git0"], - path: "packages/git0-repo-downloader/" + path: "packages/git0-repo-downloader/", + image: "/packages/git0-repo-downloader.svg", + href: "/docs/packages/git0-repo-downloader", }, { name: "open-when-ready", icon: "Globe", description: "Smart dev server wrapper that watches output, auto-opens browser when ready, and on error launches your AI assistant.", + longDescription: "Wrap any dev command and stop babysitting the terminal. open-ready watches the output, opens your browser the moment the server is actually listening, and serves it at a stable https://.localhost URL. When the output shows an error instead, it opens your AI assistant with the error already pasted in.", commands: ["npx open-ready ", "npm install -g open-ready"], - path: "packages/open-when-ready/" + path: "packages/open-when-ready/", + image: "/packages/open-when-ready.svg", + href: "/docs/packages/open-when-ready", }, { name: "server-shell-setup", icon: "HardDrive", description: "One-command bootstrap for a modern dev environment: installs fish, nvim, nushell, bun, node, helix, starship, docker, and more.", + longDescription: "Turn a fresh server into a comfortable workstation with one line. It installs fish and nushell, Neovim and Helix, Node via Volta, Bun, Docker, Starship, yazi, code-server and more — interactively or fully unattended — sets your default shell, and adds a curated set of aliases. Works across the major Linux distros.", commands: ["wget -qO- tinyurl.com/shellsetup | bash"], - path: "packages/server-shell-setup/" - } - ] + path: "packages/server-shell-setup/", + image: "/packages/server-shell-setup.svg", + href: "/docs/packages/server-shell-setup", + }, + ], }, { name: "Libraries", @@ -118,24 +166,33 @@ export const categories: Category[] = [ name: "manage-storage", icon: "HardDrive", description: "Unified storage API for AWS S3, Cloudflare R2, and Backblaze B2. Auto-detects provider from env vars. One StorageManager class: upload, download, list, copy, rename, delete.", + longDescription: "One API for every S3-compatible bucket. StorageManager reads your env vars, works out whether you are on AWS S3, Cloudflare R2 or Backblaze B2, and gives you upload, download, list, exists, copy, rename and delete. Pass credentials to the constructor instead and the same code runs on Workers and other edge and serverless runtimes.", commands: ["npm install manage-storage", "bun add manage-storage"], - path: "packages/manage-storage/" + path: "packages/manage-storage/", + image: "/packages/manage-storage.svg", + href: "/docs/packages/manage-storage", }, { - name: "react-native-app-buttons", + name: "react-app-store-buttons", icon: "Smartphone", description: "React badge components for 8 app store and platform download links. Detects user OS and highlights matching button.", - commands: ["npm install react-native-app-buttons", "bun add react-native-app-buttons"], - path: "packages/react-native-app-buttons/" + longDescription: "Drop-in download badges for the App Store, Google Play, Chrome Web Store, macOS, Windows, Linux and Snap. Give a store id or a link, and the buttons build the right URL — or a native deep link that opens the store app directly. With autoHighlight on, the badge for the visitor's operating system is brought forward.", + commands: ["npm install react-app-store-buttons", "bun add react-app-store-buttons"], + path: "packages/react-app-store-buttons/", + image: "/packages/react-app-store-buttons.svg", + href: "/docs/packages/react-app-store-buttons", }, { name: "export-svg-icons-typescript", icon: "Image", description: "Convert a folder of SVG icons into a color-customizable, tree-shakable TypeScript index that works with any component framework.", + longDescription: "Turns a folder of SVG files into one tree-shakable TypeScript module of icon functions. Each icon takes colour, size, width and height options and returns an SVG string, so it works in React, Svelte, Vue or plain DOM code. Every export carries a JSDoc preview, so you see the icon on hover in your editor.", commands: ["npx export-svg-typescript -i ./src/icons", "npm install -g export-svg-typescript"], - path: "packages/export-svg-icons-typescript/" - } - ] + path: "packages/export-svg-icons-typescript/", + image: "/packages/export-svg-icons-typescript.svg", + href: "/docs/packages/export-svg-icons-typescript", + }, + ], }, { name: "Infrastructure", @@ -147,24 +204,33 @@ export const categories: Category[] = [ name: "cloudflare-to-claude-fix", icon: "Zap", description: "Cloudflare Workers Queue consumer that fires a Claude Code routine automatically whenever a Workers build fails.", + longDescription: "Self-healing deploys for Cloudflare Workers. Build events flow into a Cloudflare Queue; when a build fails, this consumer fires a Claude Code routine with the failure details so an agent can investigate and open a fix. Retries and a dead-letter queue make sure no failed build is silently dropped, and an optional webhook pings you as it happens.", commands: ["bun deploy", "wrangler deploy"], - path: "packages/cloudflare-to-claude-fix/" + path: "packages/cloudflare-to-claude-fix/", + image: "/packages/cloudflare-to-claude-fix.svg", + href: "/docs/packages/cloudflare-to-claude-fix", }, { name: "verify-phone-sms", icon: "Shield", description: "SMS phone verification API server built with Hono on Cloudflare Workers. Sends OTP codes, blocks VoIP, enforces rate limiting.", + longDescription: "A ready-to-deploy phone verification API. A Hono server on Cloudflare Workers sends one-time codes through AWS SNS, checks them on /api/verify, and rejects VoIP and virtual numbers before you pay to text them. API-key auth and per-number rate limiting are built in, and the OpenAPI spec powers this site's API reference.", commands: ["bun deploy", "wrangler deploy"], - path: "packages/verify-phone-sms/" + path: "packages/verify-phone-sms/", + image: "/packages/verify-phone-sms.svg", + href: "/docs/packages/verify-phone-sms", }, { name: "web2mobile-wrapper", icon: "MonitorSmartphone", description: "Transform any website URL into a native mobile app wrapper for iOS and Android with push notifications.", + longDescription: "Ship your website to the App Store and Google Play. Give it a URL and it generates an Expo / React Native app that hosts the site in a WebView, auto-detects and resizes your icon and splash assets with Sharp, and includes EAS scripts to build and submit both iOS and Android binaries.", commands: ["npx create-mobile-wrapper", "npm install -g create-mobile-wrapper"], - path: "packages/web2mobile-wrapper/" - } - ] + path: "packages/web2mobile-wrapper/", + image: "/packages/web2mobile-wrapper.svg", + href: "/docs/packages/web2mobile-wrapper", + }, + ], }, { name: "Starter Templates", @@ -176,37 +242,52 @@ export const categories: Category[] = [ name: "SvelteKit + Better Auth + Drizzle", icon: "Layers", description: "Full-stack SvelteKit app with Better Auth, Drizzle ORM on Cloudflare D1, Stripe payments, and shadcn-svelte components.", + longDescription: "A full-stack SvelteKit starter that deploys to Cloudflare. Better Auth handles sign-in, Drizzle ORM talks to a D1 database, Stripe takes payments, and shadcn-svelte supplies the UI — wired together so you start on product features instead of plumbing.", commands: ["bun create starter-app", "npx create-starter-app"], - path: "starter-templates/template-svelte-betterauth-drizzle-shadcn/" + path: "starter-templates/template-svelte-betterauth-shadcn-drizzle/", + image: "/packages/template-svelte-betterauth-shadcn-drizzle.svg", + href: github("starter-templates/template-svelte-betterauth-shadcn-drizzle/"), }, { name: "Next.js + Better Auth + Drizzle", icon: "Layers", description: "Next.js SaaS boilerplate with PostgreSQL, Better Auth, Stripe subscriptions, and shadcn/ui components.", + longDescription: "A Next.js SaaS boilerplate with the boring parts done: Better Auth with pre-built auth UI, PostgreSQL through Drizzle ORM, Stripe subscriptions, UploadThing file uploads and shadcn/ui, organised as a Turborepo and linted with Biome.", commands: ["bun create starter-app", "npx create-starter-app"], - path: "starter-templates/template-nextjs-betterauth-shadcn-drizzle/" + path: "starter-templates/template-nextjs-betterauth-shadcn-drizzle/", + image: "/packages/template-nextjs-betterauth-shadcn-drizzle.svg", + href: github("starter-templates/template-nextjs-betterauth-shadcn-drizzle/"), }, { - name: "Next.js + Better Auth + Prisma", + name: "Next.js SaaS on Cloudflare", icon: "Layers", - description: "Lightweight Next.js starter with Prisma ORM, Better Auth, Google OAuth, credential login, and protected routes.", + description: "Next.js SaaS template with Better Auth, Stripe billing, teams, a dashboard and 50 colour themes, deployed to Cloudflare.", + longDescription: "A feature-rich Next.js SaaS starter for Cloudflare: Better Auth with social and Sign-In-With-Ethereum login, Stripe subscriptions, teams, an interactive charts dashboard, a docs section, and 50 light and dark colour themes built on Tailwind and shadcn/ui.", commands: ["bun create starter-app", "npx create-starter-app"], - path: "starter-templates/template-nextjs-betterauth-shadcn-prisma/" + path: "starter-templates/template-nextjs-harness-cloudflare/", + image: "/packages/template-nextjs-harness-cloudflare.svg", + href: github("starter-templates/template-nextjs-harness-cloudflare/"), }, { name: "Fumadocs Documentation", icon: "BookOpen", description: "Documentation site with Fumadocs, Orama search, OpenAPI/Swagger docs, MDX support, and collapsible sidebar.", + longDescription: "The template this site grew from. Fumadocs on Next.js 16 with Orama full-text search, OpenAPI reference pages, interactive dependency graphs and file trees, AI integrations and MDX — all configured from one site config file.", commands: ["bun create starter-app", "npx create-starter-app"], - path: "starter-templates/template-fumadocs/" + path: "starter-templates/template-fumadocs/", + image: "/packages/template-fumadocs.svg", + href: github("starter-templates/template-fumadocs/"), }, { name: "Docusaurus Documentation", icon: "BookOpen", description: "Docusaurus 3 docs template with offline Lunr search, OpenAPI plugin, and classic theme optimized for technical docs.", + longDescription: "A Docusaurus 3 documentation template tuned for technical docs: the classic theme, offline Lunr search that needs no hosted index, and an OpenAPI plugin that renders API reference pages from your spec.", commands: ["bun create starter-app", "npx create-starter-app"], - path: "starter-templates/template-docusaurus/" - } - ] - } + path: "starter-templates/template-docusaurus/", + image: "/packages/template-docusaurus.svg", + href: github("starter-templates/template-docusaurus/"), + }, + ], + }, ] diff --git a/apps/dev-tools-help-docs/src/app/(home)/page.tsx b/apps/dev-tools-help-docs/src/app/(home)/page.tsx index 40b08c6f..a322f94b 100644 --- a/apps/dev-tools-help-docs/src/app/(home)/page.tsx +++ b/apps/dev-tools-help-docs/src/app/(home)/page.tsx @@ -4,7 +4,8 @@ import React = require("react") const { useState, useMemo } = React type ElementType = React.ElementType -import { categories } from "./packages-data" +import { categories, type Package as PackageData, REPO_URL } from "./packages-data" +import { PackageShowcase } from "./package-showcase" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" @@ -105,7 +106,7 @@ function PackageCard({ index, isTemplate = false, }: { - pkg: { name: string; description: string; commands: string[]; path: string; icon: string } + pkg: PackageData color: string index: number isTemplate?: boolean @@ -135,6 +136,18 @@ function PackageCard({ {/* Gradient border overlay */}
+ {/* Cover image */} + +
@@ -142,7 +155,7 @@ function PackageCard({
@@ -186,7 +205,8 @@ function CategorySection({ return category.packages.filter( (pkg) => pkg.name.toLowerCase().includes(query) || - pkg.description.toLowerCase().includes(query) + pkg.description.toLowerCase().includes(query) || + pkg.longDescription.toLowerCase().includes(query) ) }, [category.packages, searchQuery]) @@ -249,7 +269,8 @@ function StarterTemplatesSection({ searchQuery }: { searchQuery: string }) { return templateCategory.packages.filter( (pkg) => pkg.name.toLowerCase().includes(query) || - pkg.description.toLowerCase().includes(query) + pkg.description.toLowerCase().includes(query) || + pkg.longDescription.toLowerCase().includes(query) ) }, [templateCategory.packages, searchQuery]) @@ -399,7 +420,8 @@ export default function DocsHomepage() { cat.packages.filter( (pkg) => pkg.name.toLowerCase().includes(query) || - pkg.description.toLowerCase().includes(query) + pkg.description.toLowerCase().includes(query) || + pkg.longDescription.toLowerCase().includes(query) ).length ) }, 0) @@ -561,6 +583,9 @@ export default function DocsHomepage() { + {/* Scroll-driven parallax tour of every package */} + + {/* Search + Category Filter */}
diff --git a/apps/dev-tools-help-docs/src/components/ui/hero-parallax.tsx b/apps/dev-tools-help-docs/src/components/ui/hero-parallax.tsx new file mode 100644 index 00000000..9747c2be --- /dev/null +++ b/apps/dev-tools-help-docs/src/components/ui/hero-parallax.tsx @@ -0,0 +1,190 @@ +'use client' + +import { + type MotionValue, + motion, + useScroll, + useSpring, + useTransform, +} from 'motion/react' +import { type ReactNode, useRef } from 'react' +import { cn } from '@/lib/cn' + +export interface HeroParallaxProduct { + title: string + link: string + thumbnail: string + /** Shown over the thumbnail on hover. */ + description?: string + /** Small label above the title on hover, e.g. the category. */ + eyebrow?: string +} + +/** + * Aceternity's hero parallax: three rows of cards that tilt into place and + * slide in opposite directions as the section scrolls past. + * + * Adapted from the original to take any number of products (split evenly over + * three rows instead of a fixed 5/5/5), a custom `header`, and an optional + * description per card. + */ +export const HeroParallax = ({ + products, + header =
, + className, +}: { + products: HeroParallaxProduct[] + header?: ReactNode + className?: string +}) => { + const perRow = Math.ceil(products.length / 3) + const firstRow = products.slice(0, perRow) + const secondRow = products.slice(perRow, perRow * 2) + const thirdRow = products.slice(perRow * 2) + const ref = useRef(null) + const { scrollYProgress } = useScroll({ + target: ref, + offset: ['start start', 'end start'], + }) + + const springConfig = { stiffness: 300, damping: 30, bounce: 100 } + + const translateX = useSpring( + useTransform(scrollYProgress, [0, 1], [0, 1000]), + springConfig + ) + const translateXReverse = useSpring( + useTransform(scrollYProgress, [0, 1], [0, -1000]), + springConfig + ) + const rotateX = useSpring( + useTransform(scrollYProgress, [0, 0.2], [15, 0]), + springConfig + ) + const opacity = useSpring( + useTransform(scrollYProgress, [0, 0.2], [0.2, 1]), + springConfig + ) + const rotateZ = useSpring( + useTransform(scrollYProgress, [0, 0.2], [20, 0]), + springConfig + ) + const translateY = useSpring( + useTransform(scrollYProgress, [0, 0.2], [-700, 500]), + springConfig + ) + + return ( +
+ {header} + + + {firstRow.map((product) => ( + + ))} + + + {secondRow.map((product) => ( + + ))} + + + {thirdRow.map((product) => ( + + ))} + + +
+ ) +} + +export const Header = () => { + return ( +
+

+ The Ultimate
development studio +

+

+ We build beautiful products with the latest technologies and frameworks. + We are a team of passionate developers and designers that love to build + amazing products. +

+
+ ) +} + +export const ProductCard = ({ + product, + translate, +}: { + product: HeroParallaxProduct + translate: MotionValue +}) => { + const external = /^https?:\/\//.test(product.link) + return ( + + + {/* biome-ignore lint/performance/noImgElement: static SVG covers; next/image adds nothing here */} + {product.title} +