+ 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
@@ -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 */}
+
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 = (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 (
+
+}) => {
+ const external = /^https?:\/\//.test(product.link)
+ return (
+
+
+ {/* biome-ignore lint/performance/noImgElement: static SVG covers; next/image adds nothing here */}
+ 
+
+
+ )
+}
+ {header}
+
+
+ {firstRow.map((product) => (
+
+
+ {secondRow.map((product) => (
+
+
+ {thirdRow.map((product) => (
+
+
+
+ )
+}
+
+export const Header = () => {
+ return (
+
+
+ The Ultimate
+
+ )
+}
+
+export const ProductCard = ({
+ product,
+ translate,
+}: {
+ product: HeroParallaxProduct
+ translate: MotionValue
+ 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. +
+
+ {product.eyebrow && (
+
+ {product.eyebrow}
+
+ )}
+
+
+ {product.title}
+ {product.description && ( ++ {product.description} +
+ )} +