engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.0k

feat: add @tpmjs/create-basic-tools generator promotion to website

Browse source 
- Add prominent callout box on homepage in 'Publish Your Tool' section
- Add featured generator section on /publish page with full documentation link
- Include command example and links to GitHub README and NPM
- Highlight key features: 2-3 tools, complete setup, production-ready

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-12-04 23:48:36 +10:00
parent 0d1fa3e292
commit 83afeef2dc
2 changed files with 73 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

31
apps/web/src/app/page.tsx
View file

@ -173,6 +173,37 @@ export default async function HomePage(): Promise<React.ReactElement> {
Share your tool with the AI community. Automatic discovery, quality scoring, and
seamless integration with popular AI frameworks.
</p>
{/* Generator Highlight Box */}
<div className="mb-12 p-6 border-2 border-primary/50 rounded-lg bg-primary/5 text-left">
<div className="flex items-start gap-4">
<div className="text-4xl">✨</div>
<div className="flex-1">
<h3 className="text-xl font-bold mb-2 text-foreground">
Start with Our Package Generator
</h3>
<p className="text-sm text-foreground-secondary mb-4">
Create a production-ready TPMJS tool package in seconds with our CLI
generator. Includes 2-3 tools, complete setup, and best practices.
</p>
<div className="flex flex-col sm:flex-row gap-3">
<code className="text-sm bg-surface px-4 py-2 rounded text-foreground border border-border">
npx @tpmjs/create-basic-tools
</code>
<a
href="https://github.com/tpmjs/tpmjs/tree/main/packages/tools/create-basic-tools#readme"
target="_blank"
rel="noopener noreferrer"
>
<Button size="sm" variant="outline">
View Docs →
</Button>
</a>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="p-4">
<div className="text-3xl mb-2">🚀</div>

43
apps/web/src/app/publish/page.tsx
View file

@ -27,9 +27,50 @@ export default function PublishPage(): React.ReactElement {
</p>
</div>
{/* Generator Callout */}
<section className="mb-16 p-8 border-2 border-primary/50 rounded-lg bg-primary/5">
<div className="flex items-start gap-6">
<div className="text-6xl">🚀</div>
<div className="flex-1">
<h2 className="text-3xl font-bold mb-4 text-foreground">
Use Our Package Generator
</h2>
<p className="text-lg text-foreground-secondary mb-6">
The fastest way to create a TPMJS tool package! Our CLI generator scaffolds a
production-ready package with 2-3 tools, complete setup, and best practices
built-in.
</p>
<CodeBlock language="bash" code="npx @tpmjs/create-basic-tools" size="md" />
<div className="mt-6 flex flex-col sm:flex-row gap-4">
<a
href="https://github.com/tpmjs/tpmjs/tree/main/packages/tools/create-basic-tools#readme"
target="_blank"
rel="noopener noreferrer"
>
<Button size="lg" variant="default">
View Full Documentation
</Button>
</a>
<a
href="https://www.npmjs.com/package/@tpmjs/create-basic-tools"
target="_blank"
rel="noopener noreferrer"
>
<Button size="lg" variant="outline">
View on NPM
</Button>
</a>
</div>
</div>
</div>
</section>
{/* Quick Start */}
<section className="mb-16">
<h2 className="text-3xl font-bold mb-6 text-foreground">Quick Start</h2>
<h2 className="text-3xl font-bold mb-6 text-foreground">Manual Setup</h2>
<p className="text-lg text-foreground-secondary mb-6">
Prefer to set up manually? Follow these steps:
</p>
<div className="prose prose-invert max-w-none">
<ol className="space-y-4 text-foreground-secondary">
<li className="text-lg">Create a new NPM package</li>