usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/placeholders-guide'

This commit is contained in:
Oleg Proskurin 2026-01-06 00:49:55 +07:00
parent 855ac3c111 0dc15d8694
commit 9d9b82da77
10 changed files with 1768 additions and 1028 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

750
apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from 'next';
import { TipBox } from '@/components/docs/shared/TipBox'; import { TipBox } from '@/components/docs/shared/TipBox';
import { Table } from '@/components/docs/shared/Table'; import { Table } from '@/components/docs/shared/Table';
import { CodeBlock } from '@/components/docs/shared/CodeBlock'; import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { LivePreview } from '@/components/docs/shared/LivePreview';
import { DocPage } from '@/components/docs/layout/DocPage'; import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd'; import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo'; import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
@ -22,13 +23,15 @@ const breadcrumbSchema = createBreadcrumbSchema([
const articleSchema = createTechArticleSchema(PAGE); const articleSchema = createTechArticleSchema(PAGE);
const tocItems = [ const tocItems = [
{ id: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 }, { id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 },
{ id: 'how-to-create-placeholders', text: 'How to Create Placeholders', level: 2 },
{ id: 'quick-start', text: 'Quick Start', level: 2 }, { id: 'quick-start', text: 'Quick Start', level: 2 },
{ id: 'common-sizes', text: 'Common Sizes', level: 2 }, { id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
{ id: 'dark-mode', text: 'Dark Mode Placeholders', level: 2 }, { id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
{ id: 'profile-avatars', text: 'Profile Avatars', level: 2 }, { id: 'light-mode-placeholders', text: 'Light Mode Placeholders', level: 2 },
{ id: 'tips', text: 'Tips for Better Results', level: 2 }, { id: 'dark-mode-placeholders', text: 'Dark Mode Placeholders', level: 2 },
{ id: 'next-steps', text: 'Next Steps', level: 2 }, { id: 'placeholder-image-examples', text: 'Placeholder Image Examples', level: 2 },
{ id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
]; ];
export default function PlaceholderImagesGuidePage() { export default function PlaceholderImagesGuidePage() {
@ -47,14 +50,14 @@ export default function PlaceholderImagesGuidePage() {
links: [ links: [
{ {
href: '/docs/live-urls/', href: '/docs/live-urls/',
title: 'Live URLs', title: 'Live URLs Reference',
description: 'Full documentation on URL-based generation.', description: 'Full parameter documentation for Live URLs.',
accent: 'primary', accent: 'primary',
}, },
{ {
href: '/docs/generation/', href: '/docs/api/generations/',
title: 'Image Generation', title: 'Generations API',
description: 'Advanced generation with the API.', description: 'Generate images programmatically.',
accent: 'secondary', accent: 'secondary',
}, },
], ],
@ -62,182 +65,655 @@ export default function PlaceholderImagesGuidePage() {
> >
<Hero <Hero
title="AI Placeholder Images" title="AI Placeholder Images"
subtitle="Generate contextual placeholder images that match your design. Not gray boxes. Not random stock photos." subtitle="Generate contextual images for development. The new era of AI placeholders."
/> />
<section id="why-ai-placeholders" className="mb-12"> {/* What This Guide Covers */}
<SectionHeader level={2} id="why-ai-placeholders"> <section id="what-this-guide-covers" className="mb-12 scroll-mt-24">
Why AI Placeholders? <SectionHeader level={2} id="what-this-guide-covers">
What This Guide Covers
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4"> <p className="text-gray-300 leading-relaxed mb-4">
Traditional placeholder services give you gray rectangles or random photos Two ways to generate placeholder images with Banatie:
that have nothing to do with your actual content.
</p> </p>
<p className="text-gray-300 leading-relaxed mb-6"> <ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
With Banatie Live URLs, you describe what you need and get a relevant AI-generated image instantly. <li>
Your mockups look real. Client demos make sense. Prototypes feel complete. <a href="#quick-start" className="text-white font-semibold hover:text-purple-400">
Live URLs
</a>{' '}
— describe what you need right in <InlineCode>&lt;img&gt;</InlineCode> src URLs
</li>
<li>
<a href="#file-based-workflow" className="text-white font-semibold hover:text-purple-400">
API generation
</a>{' '}
— full control, permanent URLs, downloadable files
</li>
</ul>
<p className="text-gray-300 leading-relaxed">
All examples on this page use real placeholder image URLs generated by Banatie.
</p> </p>
<Table
headers={['Service', 'What You Get']}
rows={[
['placehold.co', 'Gray box with dimensions text'],
['picsum.photos', 'Random landscape or portrait'],
['Banatie', 'AI image matching your description'],
]}
/>
</section> </section>
<section id="quick-start" className="mb-12"> {/* How to Create Placeholders */}
<section id="how-to-create-placeholders" className="mb-12 scroll-mt-24">
<SectionHeader level={2} id="how-to-create-placeholders">
How to Create Placeholders
</SectionHeader>
<div className="space-y-6">
<div>
<h4 className="text-white font-semibold mb-2">Templates</h4>
<p className="text-gray-300 mb-2">
Choose a style, get quality results. Banatie enhances your simple prompt based on
the selected template:
</p>
<ul className="list-disc list-inside text-gray-300 space-y-1">
<li>
<InlineCode>photorealistic</InlineCode> — photo-quality images
</li>
<li>
<InlineCode>digital-art</InlineCode> — stylized illustrations
</li>
<li>
<InlineCode>3d-render</InlineCode> — 3D graphics
</li>
</ul>
<p className="text-gray-400 text-sm mt-3">
<a href="/docs/generation/#templates" className="text-purple-400 hover:underline">
View all templates →
</a>
</p>
</div>
<div>
<h4 className="text-white font-semibold mb-2">Simple Prompts</h4>
<p className="text-gray-300 mb-2">
Write minimal descriptions. Templates handle the rest:
</p>
<ul className="list-none text-gray-300 space-y-1">
<li>
<span className="text-gray-500">→</span> &quot;office&quot; becomes a detailed
modern office with proper lighting
</li>
<li>
<span className="text-gray-500">→</span> &quot;headshot&quot; becomes a
professional portrait with studio background
</li>
</ul>
<p className="text-gray-400 text-sm mt-3">
No need for complex prompts — this is for placeholders, not art.
</p>
</div>
</div>
</section>
{/* Quick Start */}
<section id="quick-start" className="mb-12 scroll-mt-24">
<SectionHeader level={2} id="quick-start"> <SectionHeader level={2} id="quick-start">
Quick Start Quick Start
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6"> <p className="text-gray-300 leading-relaxed mb-6">
Use a Live URL directly in your <InlineCode>&lt;img&gt;</InlineCode> tag: Live URLs let you generate images by describing what you need right in the URL. No API
calls, no file management — just an HTML placeholder image tag with your prompt. Each
unique prompt is cached, so subsequent loads are instant via CDN.
</p> </p>
<p className="text-gray-300 leading-relaxed mb-4">Basic URL format:</p>
<CodeBlock <CodeBlock
code={`<img code="https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}"
src="https://cdn.banatie.app/{org}/{project}/live/demo?prompt=modern+coffee+shop+interior" language="text"
alt="Coffee shop" filename="URL Format"
/>`}
language="html"
filename="Basic Usage"
/> />
<p className="text-gray-300 leading-relaxed mt-6"> <p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
First request generates the image. Subsequent requests serve from cache instantly. <CodeBlock
</p> code={`<img
</section> src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
alt="Mountain landscape"
/>`}
language="html"
filename="HTML Placeholder Image"
/>
<section id="common-sizes" className="mb-12"> <p className="text-gray-300 leading-relaxed mt-4 mb-2">Result:</p>
<SectionHeader level={2} id="common-sizes"> <LivePreview showLabel={false}>
Common Sizes <img
</SectionHeader> src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape&aspectRatio=16:9"
<p className="text-gray-300 leading-relaxed mb-6"> alt="Mountain landscape"
Use the <InlineCode>aspectRatio</InlineCode> parameter for standard sizes: className="w-full max-w-md rounded-lg"
</p> />
</LivePreview>
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Parameters:</p>
<Table <Table
headers={['Use Case', 'Aspect Ratio', 'Example Dimensions']} headers={['Parameter', 'Required', 'Description']}
rows={[ rows={[
['Avatar / Profile', '1:1', '200x200, 400x400'], [<InlineCode key="p">prompt</InlineCode>, 'Yes', 'Image description (URL-encoded)'],
['Thumbnail', '3:2', '300x200, 600x400'], [
['Card Image', '4:3', '400x300, 800x600'], <InlineCode key="a">aspectRatio</InlineCode>,
['Hero / Banner', '16:9', '1200x675, 1920x1080'], 'No',
['OG Image', '1200:630', '1200x630'], 'Ratio like 1:1, 16:9, 4:3 (default: 16:9)',
['Product Square', '1:1', '600x600, 800x800'], ],
[<InlineCode key="t">template</InlineCode>, 'No', 'Style template name'],
]} ]}
/> />
<CodeBlock <p className="text-gray-300 leading-relaxed mt-6">
code={`<!-- Square avatar --> For full parameter reference, see{' '}
<img src="...?prompt=professional+headshot&aspectRatio=1:1" /> <a href="/docs/live-urls/" className="text-purple-400 hover:underline">
Live URLs documentation
<!-- Wide hero banner --> </a>
<img src="...?prompt=abstract+tech+background&aspectRatio=16:9" /> .
</p>
<!-- OG image for social -->
<img src="...?prompt=blog+post+cover&aspectRatio=1200:630" />`}
language="html"
filename="Size Examples"
/>
</section> </section>
<section id="dark-mode" className="mb-12"> {/* Organizing Placeholders */}
<SectionHeader level={2} id="dark-mode"> <section id="organizing-placeholders" className="mb-12 scroll-mt-24">
Dark Mode Placeholders <SectionHeader level={2} id="organizing-placeholders">
Organizing Placeholders
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6"> <p className="text-gray-300 leading-relaxed mb-4">
For dark UI interfaces, include dark theme hints in your prompt: Organize images by sections of your site using scopes:
</p> </p>
<CodeBlock <CodeBlock
code={`<!-- Dark mode card background --> code={`/live/avatars?prompt=... → user photos
<img src="...?prompt=abstract+dark+gradient+background+for+dark+theme+ui" /> /live/hero?prompt=... → hero backgrounds
/live/products?prompt=... → product catalog`}
<!-- Dark mode product shot --> language="text"
<img src="...?prompt=smartphone+on+dark+surface+moody+lighting" />
<!-- Dark mode avatar placeholder -->
<img src="...?prompt=silhouette+avatar+dark+background&aspectRatio=1:1" />`}
language="html"
filename="Dark Mode Examples"
/> />
<p className="text-gray-300 leading-relaxed mt-6">
Learn more about scopes in{' '}
<a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
Live URLs documentation
</a>
.
</p>
</section>
{/* Prompt Tips */}
<section id="prompt-tips" className="mb-12 scroll-mt-24">
<SectionHeader level={2} id="prompt-tips">
Prompt Tips
</SectionHeader>
<div className="space-y-6">
<div>
<h4 className="text-white font-semibold mb-2">Write less, not more</h4>
<p className="text-gray-300 mb-2">
For placeholders, simple prompts are often enough. You can always add more details
later if needed. Templates handle the rest:
</p>
<ul className="list-none text-gray-300 space-y-1">
<li>
<span className="text-gray-500">→</span> Want an office? Write{' '}
<InlineCode>office</InlineCode>
</li>
<li>
<span className="text-gray-500">→</span> Need a dark version? Add{' '}
<InlineCode>office dark background</InlineCode>
</li>
<li>
<span className="text-gray-500">→</span> Templates handle lighting, composition,
style
</li>
</ul>
</div>
<div>
<h4 className="text-white font-semibold mb-2">Colors and themes</h4>
<p className="text-gray-300 mb-2">Control the mood with color hints:</p>
<CodeBlock
code={`"dark background" → dark theme
"blue and orange accents" → specific palette
"warm lighting" → cozy feel`}
language="text"
/>
</div>
</div>
<div className="mt-6"> <div className="mt-6">
<TipBox variant="compact" type="info"> <TipBox variant="protip">
Keywords like "dark background", "moody lighting", "dark theme", and "night mode" help generate dark-friendly images. Templates automatically enhance your prompts. A simple description becomes a detailed
generation instruction.
</TipBox> </TipBox>
</div> </div>
</section> </section>
<section id="profile-avatars" className="mb-12"> {/* Light Mode Placeholders */}
<SectionHeader level={2} id="profile-avatars"> <section id="light-mode-placeholders" className="mb-12 scroll-mt-24">
Profile Avatars <SectionHeader level={2} id="light-mode-placeholders">
Light Mode Placeholders
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6"> <p className="text-gray-300 leading-relaxed mb-4">
Generate realistic avatar placeholders for user profiles: Generated images work well with light interfaces by default. If you need more control,
specify background colors or accents to match your design system.
</p> </p>
<CodeBlock <CodeBlock
code={`<!-- Generic professional avatar --> code={`"product on white background"
<img src="...?prompt=professional+headshot+neutral+background&aspectRatio=1:1" /> "office with soft natural light"
"portrait, bright studio, pastel tones"
<!-- Diverse team avatars --> "dashboard mockup, light gray background, blue accent"`}
<img src="...?prompt=young+professional+woman+headshot&aspectRatio=1:1" /> language="text"
<img src="...?prompt=middle+aged+man+business+portrait&aspectRatio=1:1" />
<!-- Stylized/illustrated avatars -->
<img src="...?prompt=minimal+geometric+avatar+illustration&aspectRatio=1:1" />`}
language="html"
filename="Avatar Examples"
/> />
<div className="mt-6">
<LivePreview label="Light Background Example">
<div className="bg-white rounded-xl p-6 max-w-md">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+desk+setup+white+background+clean+aesthetic&aspectRatio=16:9"
alt="Light theme placeholder"
className="w-full rounded-lg mb-4"
/>
<p className="text-gray-900 font-semibold">Clean Workspace</p>
<p className="text-gray-600 text-sm">White background, natural lighting</p>
</div>
</LivePreview>
</div>
</section> </section>
<section id="tips" className="mb-12"> {/* Dark Mode Placeholders */}
<SectionHeader level={2} id="tips"> <section id="dark-mode-placeholders" className="mb-12 scroll-mt-24">
Tips for Better Results <SectionHeader level={2} id="dark-mode-placeholders">
Dark Mode Placeholders
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
For dark interfaces, add <InlineCode>dark background</InlineCode> or descriptive words
like night, moody, or twilight. You can also specify accent colors.
</p>
<ul className="space-y-4 text-gray-300"> <CodeBlock
<li className="flex items-start gap-3"> code={`"office interior, dark background"
<span className="text-purple-400 mt-1">•</span> "product photo, dark surface, moody lighting"
<div> "night cityscape, neon accents"
<strong className="text-white">Be specific</strong> "abstract gradient, dark purple and blue"`}
<p className="text-gray-400 text-sm mt-1"> language="text"
"modern minimalist office with plants" works better than "office". />
</p>
<div className="mt-6">
<LivePreview label="Dark Background Example">
<div className="bg-slate-900 rounded-xl p-6 max-w-md border border-slate-700">
<img
src="https://cdn.banatie.app/sys/demo/live/hero?prompt=abstract+gradient+dark+background+purple+blue+moody&aspectRatio=16:9"
alt="Dark theme placeholder"
className="w-full rounded-lg mb-4"
/>
<p className="text-white font-semibold">Dark Gradient</p>
<p className="text-gray-400 text-sm">Dark background with purple accents</p>
</div> </div>
</li> </LivePreview>
<li className="flex items-start gap-3"> </div>
<span className="text-purple-400 mt-1">•</span> </section>
<div>
<strong className="text-white">Include style hints</strong> {/* Placeholder Image Examples */}
<p className="text-gray-400 text-sm mt-1"> <section id="placeholder-image-examples" className="mb-12 scroll-mt-24">
Add "photorealistic", "illustration", "3D render", or "flat design" for consistent style. <SectionHeader level={2} id="placeholder-image-examples">
</p> Placeholder Image Examples
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-8">
Copy-paste examples for common placeholder image use cases.
</p>
{/* Avatar */}
<div className="mb-10">
<h3 className="text-xl font-semibold text-white mb-2">Avatar</h3>
<p className="text-gray-400 text-sm mb-4">
<InlineCode>1:1</InlineCode> · User profiles, team sections, testimonials
</p>
<LivePreview>
<div className="bg-slate-800/50 rounded-xl p-6 max-w-md">
<div className="flex items-start gap-4">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1"
alt="Sarah Chen"
className="w-14 h-14 rounded-full object-cover flex-shrink-0"
/>
<div className="border-l-2 border-purple-500/50 pl-4">
<p className="text-gray-300 italic">
Banatie cut our design mockup time in half. No more hunting for stock photos.
</p>
<p className="text-white font-semibold mt-3">Sarah Chen</p>
<p className="text-gray-500 text-sm">Product Designer at Acme</p>
</div>
</div>
</div> </div>
</li> </LivePreview>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span> <CodeBlock
<div> code={`<img
<strong className="text-white">Use scopes to organize</strong> src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
<p className="text-gray-400 text-sm mt-1"> alt="User avatar"
Group related placeholders: /live/avatars/, /live/products/, /live/backgrounds/. class="w-14 h-14 rounded-full object-cover"
</p> />`}
language="html"
/>
<div className="mt-6">
<p className="text-gray-400 text-sm mb-3">Team grid example:</p>
<LivePreview showLabel={false}>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+young+man+friendly+smile&aspectRatio=1:1"
alt="Alex Rivera"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">Alex Rivera</p>
<p className="text-gray-400 text-sm">Engineering Lead</p>
</div>
</div>
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+woman+glasses+confident&aspectRatio=1:1"
alt="Maria Santos"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">Maria Santos</p>
<p className="text-gray-400 text-sm">Design Director</p>
</div>
</div>
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+man+beard+casual&aspectRatio=1:1"
alt="James Wilson"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">James Wilson</p>
<p className="text-gray-400 text-sm">Product Manager</p>
</div>
</div>
</div>
</LivePreview>
</div>
</div>
{/* Product */}
<div className="mb-10">
<h3 className="text-xl font-semibold text-white mb-2">Product</h3>
<p className="text-gray-400 text-sm mb-4">
<InlineCode>1:1</InlineCode> or <InlineCode>4:5</InlineCode> · E-commerce, catalogs,
listings
</p>
<LivePreview>
<div className="bg-white rounded-xl p-4 max-w-xs shadow-lg">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+wireless+headphones+white+background+product+photo&aspectRatio=1:1"
alt="Wireless Pro Headphones"
className="w-full aspect-square object-cover rounded-lg mb-4"
/>
<p className="text-gray-900 font-semibold">Wireless Pro Headphones</p>
<p className="text-gray-600 text-lg font-bold mt-1">$299</p>
<button className="mt-3 w-full bg-gray-900 text-white py-2 px-4 rounded-lg text-sm font-medium">
Add to Cart
</button>
</div> </div>
</li> </LivePreview>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span> <CodeBlock
<div> code={`<img
<strong className="text-white">Same prompt = same image</strong> src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1"
<p className="text-gray-400 text-sm mt-1"> alt="Product"
Cached results mean consistent placeholders across your app. class="w-full aspect-square object-cover rounded-lg"
</p> />`}
language="html"
/>
<div className="mt-6">
<p className="text-gray-400 text-sm mb-3">Product grid example:</p>
<LivePreview showLabel={false}>
<div className="grid grid-cols-2 gap-4 max-w-lg">
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=modern+smart+watch+product+photo&aspectRatio=1:1"
alt="Smart Watch X1"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Smart Watch X1</p>
<p className="text-gray-600 font-bold">$199</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1"
alt="Wireless Earbuds"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Wireless Earbuds</p>
<p className="text-gray-600 font-bold">$249</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=portable+bluetooth+speaker+product+photo&aspectRatio=1:1"
alt="Portable Speaker"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Portable Speaker</p>
<p className="text-gray-600 font-bold">$79</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=laptop+stand+aluminum+product&aspectRatio=1:1"
alt="Laptop Stand"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Laptop Stand</p>
<p className="text-gray-600 font-bold">$129</p>
</div>
</div>
</LivePreview>
</div>
</div>
{/* Hero */}
<div className="mb-10">
<h3 className="text-xl font-semibold text-white mb-2">Hero</h3>
<p className="text-gray-400 text-sm mb-4">
<InlineCode>16:9</InlineCode> · Landing pages, section backgrounds
</p>
<LivePreview className="p-0">
<div className="relative w-full h-72 rounded-xl overflow-hidden">
<img
src="https://cdn.banatie.app/sys/demo/live/hero?prompt=aerial+view+modern+city+skyline+sunset+dramatic+lighting&aspectRatio=16:9"
alt="Hero background"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-center px-4">
<p className="text-3xl font-bold text-white mb-2">Build the Future</p>
<p className="text-gray-200">Start your next project with AI-powered tools</p>
</div>
</div> </div>
</li> </LivePreview>
<CodeBlock
code={`<div class="relative w-full h-96 overflow-hidden">
<img
src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9"
alt="Hero background"
class="w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
<h1 class="text-4xl font-bold text-white">Your Headline</h1>
</div>
</div>`}
language="html"
/>
</div>
{/* OG Image */}
<div className="mb-10">
<h3 className="text-xl font-semibold text-white mb-2">OG Image</h3>
<p className="text-gray-400 text-sm mb-4">
<InlineCode>1200:630</InlineCode> · Social sharing, Twitter/LinkedIn cards
</p>
<LivePreview>
<div className="bg-slate-800 rounded-lg overflow-hidden max-w-md shadow-xl">
<div className="bg-slate-700 px-3 py-2 flex items-center gap-2">
<div className="flex gap-1.5">
<span className="w-3 h-3 rounded-full bg-red-500"></span>
<span className="w-3 h-3 rounded-full bg-yellow-500"></span>
<span className="w-3 h-3 rounded-full bg-green-500"></span>
</div>
<span className="text-gray-400 text-xs ml-2">twitter.com</span>
</div>
<div className="p-4">
<img
src="https://cdn.banatie.app/sys/demo/live/og?prompt=modern+tech+abstract+waves+purple+blue&aspectRatio=16:9"
alt="OG Image Preview"
className="w-full rounded-lg"
/>
<p className="text-gray-400 text-xs mt-2">banatie.app</p>
<p className="text-white font-medium mt-1">
AI Placeholder Images Guide | Banatie
</p>
<p className="text-gray-400 text-sm mt-1">
Generate AI placeholder images for development...
</p>
</div>
</div>
</LivePreview>
<CodeBlock
code={`<meta property="og:image" content="https://cdn.banatie.app/{org}/{project}/live/og?prompt=your+description&aspectRatio=1200:630" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />`}
language="html"
/>
<div className="mt-4">
<TipBox variant="compact" type="info">
OG images are cached by social platforms. Change the prompt to regenerate.
</TipBox>
</div>
</div>
{/* Features */}
<div className="mb-10">
<h3 className="text-xl font-semibold text-white mb-2">Features</h3>
<p className="text-gray-400 text-sm mb-4">
<InlineCode>1:1</InlineCode> · Feature grids, benefit sections, icons
</p>
<LivePreview>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-purple-500/10 hover:-translate-y-1">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Lightning Fast"
className="w-full aspect-square object-cover"
/>
<div className="p-4">
<p className="font-semibold text-white">Lightning Fast</p>
<p className="mt-1 text-sm text-gray-400">
Deploy in seconds with our global CDN
</p>
</div>
</div>
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-emerald-500/10 hover:-translate-y-1">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=shield+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Secure by Default"
className="w-full aspect-square object-cover"
/>
<div className="p-4">
<p className="font-semibold text-white">Secure by Default</p>
<p className="mt-1 text-sm text-gray-400">Enterprise-grade security built in</p>
</div>
</div>
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-violet-500/10 hover:-translate-y-1">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=puzzle+piece+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Easy Integration"
className="w-full aspect-square object-cover"
/>
<div className="p-4">
<p className="font-semibold text-white">Easy Integration</p>
<p className="mt-1 text-sm text-gray-400">Works with your existing stack</p>
</div>
</div>
</div>
</LivePreview>
<CodeBlock
code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center
transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:-translate-y-1">
<img
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Lightning Fast"
class="w-full aspect-square object-cover"
/>
<div class="p-4">
<p class="font-semibold text-white">Lightning Fast</p>
<p class="mt-1 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
</div>
</div>
<!-- Repeat for other features -->
</div>`}
language="html"
/>
</div>
</section>
{/* File-based Workflow */}
<section id="file-based-workflow" className="mb-12 scroll-mt-24">
<SectionHeader level={2} id="file-based-workflow">
File-based Workflow
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Need files in your repo? Here&apos;s how to download generated images.
</p>
<h4 className="text-white font-semibold mb-3">When to Use Files</h4>
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
<li>Next.js/React projects with local image imports</li>
<li>Version-controlled placeholder assets</li>
<li>Offline or CI/CD environments</li>
</ul> </ul>
<h4 className="text-white font-semibold mb-3">Generate via API</h4>
<p className="text-gray-300 leading-relaxed mb-4">Request:</p>
<CodeBlock
code={`POST https://api.banatie.app/v1/generations
Content-Type: application/json
X-API-Key: your_api_key
{
"prompt": "modern office interior"
}`}
language="http"
/>
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Response:</p>
<CodeBlock
code={`{
"image": {
"id": "img_abc123",
"cdnUrl": "https://cdn.banatie.app/org/project/images/2025-01/abc123.png"
}
}`}
language="json"
/>
<p className="text-gray-300 leading-relaxed mt-6">
Open <InlineCode>cdnUrl</InlineCode> in your browser, save the image, and add it to your
project&apos;s assets folder.
</p>
<p className="text-gray-300 leading-relaxed mt-4">
For full API reference, see{' '}
<a href="/docs/api/generations/" className="text-purple-400 hover:underline">
Generations API
</a>
.
</p>
</section> </section>
</DocPage> </DocPage>
</> </>

516
apps/landing/src/app/(apps)/docs/live-urls/page.tsx
View File

@ -6,11 +6,7 @@ import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd'; import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo'; import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema'; import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema';
import { import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks';
Hero,
SectionHeader,
InlineCode,
} from '@/components/docs/blocks';
const PAGE = DOCS_PAGES['live-urls']; const PAGE = DOCS_PAGES['live-urls'];
@ -42,129 +38,276 @@ export default function LiveUrlsPage() {
<JsonLd data={breadcrumbSchema} /> <JsonLd data={breadcrumbSchema} />
<JsonLd data={articleSchema} /> <JsonLd data={articleSchema} />
<DocPage <DocPage
breadcrumbItems={[ breadcrumbItems={[{ label: 'Documentation', href: '/docs/' }, { label: 'Live URLs' }]}
{ label: 'Documentation', href: '/docs/' }, tocItems={tocItems}
{ label: 'Live URLs' }, nextSteps={{
]} links: [
tocItems={tocItems} {
nextSteps={{ href: '/docs/api/live-scopes/',
links: [ title: 'API Reference: Live Scopes',
{ description: 'Manage scopes and generation limits.',
href: '/docs/api/live-scopes/', accent: 'primary',
title: 'API Reference: Live Scopes', },
description: 'Manage scopes and generation limits.', {
accent: 'primary', href: '/docs/generation/',
}, title: 'Image Generation',
{ description: 'Full control via the generations API.',
href: '/docs/generation/', accent: 'secondary',
title: 'Image Generation', },
description: 'Full control via the generations API.', ],
accent: 'secondary', }}
}, >
], <Hero
}} title="Live URLs"
> subtitle="Generate images directly from URL parameters. No API calls needed — just use the URL in your HTML."
<Hero
title="Live URLs"
subtitle="Generate AI placeholder images and dynamic visuals directly from URL. No API calls — just use the URL in your HTML."
/>
<section id="the-concept" className="mb-12">
<SectionHeader level={2} id="the-concept">
The Concept
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
Put your prompt in a URL. Use it directly in an <InlineCode>&lt;img src="..."&gt;</InlineCode> tag.
</p>
<p className="text-gray-300 leading-relaxed">
First request generates the image. All subsequent requests serve it from cache instantly.
</p>
</section>
<section id="url-format" className="mb-12">
<SectionHeader level={2} id="url-format">
URL Format
</SectionHeader>
<CodeBlock
code={`https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt=...&aspectRatio=...`}
language="text"
filename="Live URL Format"
/> />
<p className="text-gray-300 leading-relaxed mt-6 mb-4"> <section id="the-concept" className="mb-12">
Query parameters: <SectionHeader level={2} id="the-concept">
</p> The Concept
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
Put your prompt in a URL. Use it directly in an{' '}
<InlineCode>&lt;img src="..."&gt;</InlineCode> tag.
</p>
<p className="text-gray-300 leading-relaxed">
First request generates the image. All subsequent requests serve it from cache
instantly.
</p>
</section>
<Table <section id="url-format" className="mb-12">
headers={['Parameter', 'Required', 'Description']} <SectionHeader level={2} id="url-format">
rows={[ URL Format
[ </SectionHeader>
<InlineCode key="p">prompt</InlineCode>,
<span key="r" className="text-green-400">Yes</span>,
'Text description of the image to generate',
],
[
<InlineCode key="p">aspectRatio</InlineCode>,
<span key="r" className="text-gray-500">No</span>,
'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)',
],
[
<InlineCode key="p">autoEnhance</InlineCode>,
<span key="r" className="text-gray-500">No</span>,
'Enable prompt enhancement (default: true)',
],
[
<InlineCode key="p">template</InlineCode>,
<span key="r" className="text-gray-500">No</span>,
'Enhancement template to use',
],
]}
/>
</section>
<section id="try-it" className="mb-12"> <CodeBlock
<SectionHeader level={2} id="try-it"> code={`https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt=...&aspectRatio=...`}
Try It language="text"
</SectionHeader> filename="Live URL Format"
<p className="text-gray-300 leading-relaxed mb-6"> />
Open this URL in your browser:
</p>
<CodeBlock <p className="text-gray-300 leading-relaxed mt-6 mb-4">Query parameters:</p>
code={`https://cdn.banatie.app/my-org/my-project/live/demo?prompt=a+friendly+robot+waving+hello&aspectRatio=16:9`}
language="text"
filename="Example Live URL"
/>
<p className="text-gray-300 leading-relaxed mt-6 mb-4"> <Table
Or use it directly in HTML: headers={['Parameter', 'Required', 'Description']}
</p> rows={[
[
<InlineCode key="p">prompt</InlineCode>,
<span key="r" className="text-green-400">
Yes
</span>,
'Text description of the image to generate',
],
[
<InlineCode key="p">aspectRatio</InlineCode>,
<span key="r" className="text-gray-500">
No
</span>,
'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)',
],
[
<InlineCode key="p">template</InlineCode>,
<span key="r" className="text-gray-500">
No
</span>,
'Enhancement template to use',
],
[
<InlineCode key="p">autoEnhance</InlineCode>,
<span key="r" className="text-gray-500">
No
</span>,
'Enable prompt enhancement (default: true)',
],
]}
/>
</section>
<CodeBlock <section id="try-it" className="mb-12">
code={`<img <SectionHeader level={2} id="try-it">
Try It
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">Open this URL in your browser:</p>
<CodeBlock
code={`https://cdn.banatie.app/my-org/my-project/live/demo?prompt=a+friendly+robot+waving+hello&aspectRatio=16:9`}
language="text"
filename="Example Live URL"
/>
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Or use it directly in HTML:</p>
<CodeBlock
code={`<img
src="https://cdn.banatie.app/my-org/my-project/live/hero?prompt=mountain+landscape+at+sunset&aspectRatio=16:9" src="https://cdn.banatie.app/my-org/my-project/live/hero?prompt=mountain+landscape+at+sunset&aspectRatio=16:9"
alt="Mountain landscape" alt="Mountain landscape"
/>`} />`}
language="html" language="html"
filename="HTML Usage" filename="HTML Usage"
/> />
</section> </section>
<section id="placeholder-images" className="mb-12"> <section id="caching-behavior" className="mb-12">
<SectionHeader level={2} id="placeholder-images"> <SectionHeader level={2} id="caching-behavior">
Placeholder Images Caching Behavior
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6"> <p className="text-gray-300 leading-relaxed mb-6">
Live URLs are perfect for generating AI placeholder images during development. The response includes an <InlineCode>X-Cache-Status</InlineCode> header:
Unlike generic placeholder services that show gray boxes or random stock photos, </p>
Banatie generates contextual images that match your design intent.
</p>
<p className="text-gray-400 text-sm mb-4">Common placeholder sizes:</p> <Table
headers={['Status', 'Meaning', 'Response Time']}
rows={[
[
<InlineCode key="s" color="success">
HIT
</InlineCode>,
'Image served from cache',
'Instant (milliseconds)',
],
[<InlineCode key="s">MISS</InlineCode>, 'New image generated', 'A few seconds'],
]}
/>
<CodeBlock <p className="text-gray-300 leading-relaxed mt-6">
code={`<!-- Avatar placeholder (200×200) --> Cache hits are unlimited and don't count toward rate limits. Only new generations (cache
MISS) are rate limited.
</p>
</section>
<section id="scopes" className="mb-12">
<SectionHeader level={2} id="scopes">
Scopes
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Scopes organize your live generations. Each scope has its own generation limit.
</p>
<CodeBlock
code={`# Different scopes for different purposes
https://cdn.banatie.app/my-org/my-project/live/hero-section?prompt=...
https://cdn.banatie.app/my-org/my-project/live/product-gallery?prompt=...
https://cdn.banatie.app/my-org/my-project/live/blog-images?prompt=...`}
language="text"
filename="Scope Examples"
/>
<p className="text-gray-300 leading-relaxed mt-6">
Scopes are auto-created on first use. You can also pre-configure them via the API to set
custom limits.
</p>
</section>
{/* <section id="rate-limits" className="mb-12">
<SectionHeader level={2} id="rate-limits">
Rate Limits
</SectionHeader>
<Table
headers={['Limit Type', 'Value', 'Notes']}
rows={[
[
'Per IP',
<span key="v" className="text-amber-400">
10 new generations/hour
</span>,
'Only applies to cache MISS',
],
[
'Per Scope',
<span key="v" className="text-amber-400">
30 generations
</span>,
'Configurable via API',
],
[
'Cache Hits',
<span key="v" className="text-green-400">
Unlimited
</span>,
'No limits on cached images',
],
]}
/>
<div className="mt-6">
<TipBox variant="compact" type="info">
Rate limits protect the service from abuse. For high-volume needs, use the generations
API directly.
</TipBox>
</div>
</section> */}
<section id="use-cases" className="mb-12">
<SectionHeader level={2} id="use-cases">
Use Cases
</SectionHeader>
<ul className="space-y-4 text-gray-300">
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Static HTML & serverless sites</strong>
<p className="text-gray-400 text-sm mt-1">
Deploy HTML pages without configuring asset hosting or CDN infrastructure. Images
are served directly from Banatie's edge network.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">AI-assisted development</strong>
<p className="text-gray-400 text-sm mt-1">
Enable AI coding assistants to generate complete HTML or JSX with contextual
images in a single pass—no asset pipeline required.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Rapid prototyping</strong>
<p className="text-gray-400 text-sm mt-1">
Test different visuals without writing backend code.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">AI placeholder images</strong>
<p className="text-gray-400 text-sm mt-1">
Replace gray boxes and random stock photos with contextual AI images. Perfect for
prototypes, client demos, and design mockups.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Personalized content</strong>
<p className="text-gray-400 text-sm mt-1">
Generate unique images based on user data or preferences for dynamic,
individualized experiences.
</p>
</div>
</li>
</ul>
</section>
<section id="placeholder-images" className="mb-12">
<TipBox variant="protip">
Use Live URLs as intelligent placeholder images during development. Generate contextual
visuals that match your design intent—no more gray boxes or random stock photos.
</TipBox>
<p className="text-gray-400 text-sm mt-6 mb-4">Common placeholder configurations:</p>
<CodeBlock
code={`<!-- Avatar placeholder (200×200) -->
<img src="https://cdn.banatie.app/.../live/avatars?prompt=professional+headshot&aspectRatio=1:1" /> <img src="https://cdn.banatie.app/.../live/avatars?prompt=professional+headshot&aspectRatio=1:1" />
<!-- Thumbnail placeholder (300×200) --> <!-- Thumbnail placeholder (300×200) -->
@ -175,141 +318,18 @@ export default function LiveUrlsPage() {
<!-- Card image placeholder (400×300) --> <!-- Card image placeholder (400×300) -->
<img src="https://cdn.banatie.app/.../live/cards?prompt=abstract+gradient+background&aspectRatio=4:3" />`} <img src="https://cdn.banatie.app/.../live/cards?prompt=abstract+gradient+background&aspectRatio=4:3" />`}
language="html" language="html"
filename="Placeholder Examples" filename="Placeholder Examples"
/> />
<div className="mt-6"> <div className="mt-6">
<TipBox variant="compact" type="info"> <TipBox variant="compact" type="info">
For dark mode interfaces, include "dark theme" or "dark background" in your prompt. For dark mode interfaces, include "dark theme" or "dark background" in your prompt.
</TipBox> </TipBox>
</div> </div>
</section> </section>
<section id="caching-behavior" className="mb-12"> </DocPage>
<SectionHeader level={2} id="caching-behavior">
Caching Behavior
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
The response includes an <InlineCode>X-Cache-Status</InlineCode> header:
</p>
<Table
headers={['Status', 'Meaning', 'Response Time']}
rows={[
[
<InlineCode key="s" color="success">HIT</InlineCode>,
'Image served from cache',
'Instant (milliseconds)',
],
[
<InlineCode key="s">MISS</InlineCode>,
'New image generated',
'A few seconds',
],
]}
/>
<p className="text-gray-300 leading-relaxed mt-6">
Cache hits are unlimited and don't count toward rate limits. Only new generations (cache MISS) are rate limited.
</p>
</section>
<section id="scopes" className="mb-12">
<SectionHeader level={2} id="scopes">
Scopes
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Scopes organize your live generations. Each scope has its own generation limit.
</p>
<CodeBlock
code={`# Different scopes for different purposes
https://cdn.banatie.app/my-org/my-project/live/hero-section?prompt=...
https://cdn.banatie.app/my-org/my-project/live/product-gallery?prompt=...
https://cdn.banatie.app/my-org/my-project/live/blog-images?prompt=...`}
language="text"
filename="Scope Examples"
/>
<p className="text-gray-300 leading-relaxed mt-6">
Scopes are auto-created on first use. You can also pre-configure them via the API to set custom limits.
</p>
</section>
<section id="rate-limits" className="mb-12">
<SectionHeader level={2} id="rate-limits">
Rate Limits
</SectionHeader>
<Table
headers={['Limit Type', 'Value', 'Notes']}
rows={[
[
'Per IP',
<span key="v" className="text-amber-400">10 new generations/hour</span>,
'Only applies to cache MISS',
],
[
'Per Scope',
<span key="v" className="text-amber-400">30 generations</span>,
'Configurable via API',
],
[
'Cache Hits',
<span key="v" className="text-green-400">Unlimited</span>,
'No limits on cached images',
],
]}
/>
<div className="mt-6">
<TipBox variant="compact" type="info">
Rate limits protect the service from abuse. For high-volume needs, use the generations API directly.
</TipBox>
</div>
</section>
<section id="use-cases" className="mb-12">
<SectionHeader level={2} id="use-cases">
Use Cases
</SectionHeader>
<ul className="space-y-4 text-gray-300">
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">AI Placeholder Images</strong>
<p className="text-gray-400 text-sm mt-1">
Replace gray boxes and random stock photos with contextual AI images.
Perfect for prototypes, client demos, and design mockups.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Personalized content</strong>
<p className="text-gray-400 text-sm mt-1">Create unique images based on user data or preferences.</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Rapid prototyping</strong>
<p className="text-gray-400 text-sm mt-1">Test different visuals without writing backend code.</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">HTML emails</strong>
<p className="text-gray-400 text-sm mt-1">Include dynamic images in email templates with just a URL.</p>
</div>
</li>
</ul>
</section>
</DocPage>
</> </>
); );
} }

17
apps/landing/src/components/docs/layout/DocsSidebar.tsx
View File

@ -58,6 +58,13 @@ const navigationItems: NavItem[] = [
label: 'Authentication', label: 'Authentication',
href: '/docs/authentication/', href: '/docs/authentication/',
}, },
{
label: 'Guides',
href: '/docs/guides/',
children: [
{ label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' },
],
},
{ {
label: 'API Reference', label: 'API Reference',
href: '/docs/api/', href: '/docs/api/',
@ -69,17 +76,11 @@ const navigationItems: NavItem[] = [
{ label: 'Live Scopes', href: '/docs/api/live-scopes/' }, { label: 'Live Scopes', href: '/docs/api/live-scopes/' },
], ],
}, },
{
label: 'Guides',
href: '/docs/guides/',
children: [
{ label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' },
],
},
]; ];
export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => { export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => {
const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference']); const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference', 'Guides']);
const toggleSection = (label: string) => { const toggleSection = (label: string) => {
setExpandedSections((prev) => setExpandedSections((prev) =>

32
apps/landing/src/components/docs/shared/LivePreview.tsx Normal file
View File

@ -0,0 +1,32 @@
'use client';
interface LivePreviewProps {
children: React.ReactNode;
label?: string;
className?: string;
showLabel?: boolean;
}
export const LivePreview = ({
children,
label = 'Live Example',
className = '',
showLabel = true,
}: LivePreviewProps) => {
return (
<div
className="relative bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 rounded-xl overflow-hidden my-4"
role="region"
aria-label={label}
>
{showLabel && (
<div className="absolute top-3 left-3 z-10">
<span className="px-2.5 py-1 bg-purple-500/20 border border-purple-500/30 rounded-md text-xs font-medium text-purple-300">
{label}
</span>
</div>
)}
<div className={`${showLabel ? 'pt-12' : ''} p-4 ${className}`}>{children}</div>
</div>
);
};

74
apps/landing/src/components/docs/shared/TipBox.tsx
View File

@ -1,18 +1,20 @@
'use client'; 'use client';
import { Sparkles, Lightbulb, AlertTriangle, CheckCircle } from 'lucide-react';
/** /**
* TipBox Component - Dual Style System * TipBox Component - Multi-Style Callout System
* *
* Provides two distinct styles for callouts/notes: * Provides three distinct styles for callouts/notes:
* *
* 1. Compact Style (Variant A inspired): * 1. Compact Style:
* - Small emoji icon on left * - Lucide icon on left
* - Compact padding (p-4) * - Compact padding (p-4)
* - Smaller text (text-sm) * - Smaller text (text-sm)
* - Subtle background with thin border * - Subtle background with thin border
* - Best for minor notes and tips * - Best for minor notes and tips
* *
* 2. Prominent Style (Adapted from Variant C): * 2. Prominent Style:
* - NO icon * - NO icon
* - Larger padding (p-6) * - Larger padding (p-6)
* - Larger text (text-base) * - Larger text (text-base)
@ -20,6 +22,12 @@
* - More visual weight * - More visual weight
* - Best for important warnings and security notices * - Best for important warnings and security notices
* *
* 3. Protip Style:
* - Sparkles icon with "Pro Tip" label
* - Golden/amber color scheme
* - Premium visual treatment with glow
* - Best for highlighting valuable tips and tricks
*
* Usage: * Usage:
* <TipBox variant="compact" type="info"> * <TipBox variant="compact" type="info">
* This is a compact tip * This is a compact tip
@ -28,10 +36,14 @@
* <TipBox variant="prominent" type="warning"> * <TipBox variant="prominent" type="warning">
* This is an important security warning * This is an important security warning
* </TipBox> * </TipBox>
*
* <TipBox variant="protip">
* This is a valuable pro tip
* </TipBox>
*/ */
type TipType = 'info' | 'warning' | 'success'; type TipType = 'info' | 'warning' | 'success';
type TipVariant = 'compact' | 'prominent'; type TipVariant = 'compact' | 'prominent' | 'protip';
interface TipBoxProps { interface TipBoxProps {
children: React.ReactNode; children: React.ReactNode;
@ -39,10 +51,10 @@ interface TipBoxProps {
type?: TipType; type?: TipType;
} }
const icons: Record<TipType, string> = { const icons: Record<TipType, React.ReactNode> = {
info: '💡', info: <Lightbulb className="w-5 h-5 text-purple-400" />,
warning: '⚠️', warning: <AlertTriangle className="w-5 h-5 text-amber-400" />,
success: '✓', success: <CheckCircle className="w-5 h-5 text-green-400" />,
}; };
const compactStyles: Record<TipType, string> = { const compactStyles: Record<TipType, string> = {
@ -53,23 +65,49 @@ const compactStyles: Record<TipType, string> = {
const prominentStyles: Record<TipType, string> = { const prominentStyles: Record<TipType, string> = {
info: 'bg-gradient-to-br from-purple-500/5 via-cyan-500/5 to-purple-500/5 border-purple-500/30 text-gray-300 shadow-lg shadow-purple-500/10', info: 'bg-gradient-to-br from-purple-500/5 via-cyan-500/5 to-purple-500/5 border-purple-500/30 text-gray-300 shadow-lg shadow-purple-500/10',
warning: 'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10', warning:
success: 'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10', 'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10',
success:
'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10',
}; };
export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => { const protipStyle =
const isCompact = variant === 'compact'; 'bg-gradient-to-r from-amber-500/15 via-yellow-500/10 to-amber-500/15 border-amber-400/40 text-amber-100 shadow-lg shadow-amber-500/20 ring-1 ring-amber-400/20';
const icon = icons[type];
const styleClass = isCompact ? compactStyles[type] : prominentStyles[type];
if (isCompact) { export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => {
// Protip variant - premium golden style
if (variant === 'protip') {
return (
<div
className={`flex gap-3 p-5 rounded-xl border ${protipStyle}`}
role="note"
aria-label="Pro tip"
>
<span className="flex-shrink-0 mt-0.5">
<Sparkles className="w-5 h-5 text-amber-300" />
</span>
<div>
<span className="text-xs font-semibold uppercase tracking-wider text-amber-400 block mb-1">
Pro Tip
</span>
<div className="text-sm leading-relaxed">{children}</div>
</div>
</div>
);
}
const icon = icons[type];
const styleClass = variant === 'compact' ? compactStyles[type] : prominentStyles[type];
// Compact style
if (variant === 'compact') {
return ( return (
<div <div
className={`flex gap-3 p-4 rounded-xl border ${styleClass}`} className={`flex gap-3 p-4 rounded-xl border ${styleClass}`}
role="note" role="note"
aria-label={`${type} note`} aria-label={`${type} note`}
> >
<span className="text-lg flex-shrink-0">{icon}</span> <span className="flex-shrink-0 mt-0.5">{icon}</span>
<div className="text-sm leading-relaxed">{children}</div> <div className="text-sm leading-relaxed">{children}</div>
</div> </div>
); );

14
apps/landing/src/config/docs-seo.ts
View File

@ -132,16 +132,18 @@ export const DOCS_PAGES = {
}, },
'guide-placeholder-images': { 'guide-placeholder-images': {
path: '/docs/guides/placeholder-images/', path: '/docs/guides/placeholder-images/',
title: 'AI Placeholder Images Guide | Banatie', title: 'AI Placeholder Image Generator — Light & Dark Mode | Banatie',
description: description:
'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.', 'Generate AI placeholder images for development. Image placeholder dark mode, light backgrounds, avatars, products, heroes. Copy-paste HTML examples.',
keywords: [ keywords: [
'placeholder images', 'placeholder image generator',
'ai placeholder generator',
'placeholder image api',
'image placeholder dark', 'image placeholder dark',
'profile placeholder image',
'placeholder image url', 'placeholder image url',
'html placeholder image',
'ai placeholder images',
'dark mode placeholder',
'light mode placeholder',
'profile placeholder image',
'dummy image generator', 'dummy image generator',
], ],
}, },

536
inbox/task-docs-placeholder-seo.md
View File

@ -1,536 +0,0 @@
# Task: Docs Placeholder SEO Enhancement
**Priority:** High
**Estimated time:** 30-45 min
**Type:** SEO optimization + content
---
## Part 1: Update Live URLs SEO metadata
**File:** `apps/landing/src/config/docs-seo.ts`
**Find the `'live-urls'` entry:**
```typescript
'live-urls': {
path: '/docs/live-urls/',
title: 'Live URLs — Generate Images from URL | Banatie API Docs',
description:
'Generate images directly from URL parameters. No API calls needed — use the URL in img tags. Automatic caching.',
keywords: ['live url image generation', 'url to image', 'dynamic image generation', 'image from url', 'cached image api'],
},
```
**Replace with:**
```typescript
'live-urls': {
path: '/docs/live-urls/',
title: 'Live URLs — AI Placeholder Images & Dynamic Generation | Banatie',
description:
'Generate AI placeholder images directly from URL. No API calls — use in img tags. Perfect for prototypes, mockups, and dynamic content.',
keywords: [
'placeholder images',
'placeholder image url',
'ai placeholder generator',
'live url image generation',
'dynamic image generation',
'image placeholder api',
'placeholder image api',
],
},
```
---
## Part 2: Enhance Live URLs page content
**File:** `apps/landing/src/app/(apps)/docs/live-urls/page.tsx`
### 2.1 Update tocItems array
**Find:**
```typescript
const tocItems = [
{ id: 'the-concept', text: 'The Concept', level: 2 },
{ id: 'url-format', text: 'URL Format', level: 2 },
{ id: 'try-it', text: 'Try It', level: 2 },
{ id: 'caching-behavior', text: 'Caching Behavior', level: 2 },
{ id: 'scopes', text: 'Scopes', level: 2 },
{ id: 'rate-limits', text: 'Rate Limits', level: 2 },
{ id: 'use-cases', text: 'Use Cases', level: 2 },
{ id: 'next-steps', text: 'Next Steps', level: 2 },
];
```
**Replace with:**
```typescript
const tocItems = [
{ id: 'the-concept', text: 'The Concept', level: 2 },
{ id: 'url-format', text: 'URL Format', level: 2 },
{ id: 'try-it', text: 'Try It', level: 2 },
{ id: 'placeholder-images', text: 'Placeholder Images', level: 2 },
{ id: 'caching-behavior', text: 'Caching Behavior', level: 2 },
{ id: 'scopes', text: 'Scopes', level: 2 },
{ id: 'rate-limits', text: 'Rate Limits', level: 2 },
{ id: 'use-cases', text: 'Use Cases', level: 2 },
{ id: 'next-steps', text: 'Next Steps', level: 2 },
];
```
### 2.2 Update Hero subtitle
**Find:**
```tsx
<Hero
title="Live URLs"
subtitle="Generate images directly from URL parameters. No API calls needed — just use the URL in your HTML."
/>
```
**Replace with:**
```tsx
<Hero
title="Live URLs"
subtitle="Generate AI placeholder images and dynamic visuals directly from URL. No API calls — just use the URL in your HTML."
/>
```
### 2.3 Add new "Placeholder Images" section
**Add this section AFTER the "Try It" section and BEFORE "Caching Behavior":**
```tsx
<section id="placeholder-images" className="mb-12">
<SectionHeader level={2} id="placeholder-images">
Placeholder Images
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Live URLs are perfect for generating AI placeholder images during development.
Unlike generic placeholder services that show gray boxes or random stock photos,
Banatie generates contextual images that match your design intent.
</p>
<p className="text-gray-400 text-sm mb-4">Common placeholder sizes:</p>
<CodeBlock
code={`<!-- Avatar placeholder (200×200) -->
<img src="https://cdn.banatie.app/.../live/avatars?prompt=professional+headshot&aspectRatio=1:1" />
<!-- Thumbnail placeholder (300×200) -->
<img src="https://cdn.banatie.app/.../live/thumbs?prompt=product+photo&aspectRatio=3:2" />
<!-- Hero placeholder (1200×630) -->
<img src="https://cdn.banatie.app/.../live/hero?prompt=modern+office+interior&aspectRatio=1200:630" />
<!-- Card image placeholder (400×300) -->
<img src="https://cdn.banatie.app/.../live/cards?prompt=abstract+gradient+background&aspectRatio=4:3" />`}
language="html"
filename="Placeholder Examples"
/>
<div className="mt-6">
<TipBox variant="compact" type="tip">
For dark mode interfaces, include "dark theme" or "dark background" in your prompt.
</TipBox>
</div>
</section>
```
### 2.4 Update "Use Cases" section — expand first item
**Find the first list item in use-cases section:**
```tsx
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Dynamic placeholders</strong>
<p className="text-gray-400 text-sm mt-1">Generate placeholder images during development that match your design intent.</p>
</div>
</li>
```
**Replace with:**
```tsx
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">AI Placeholder Images</strong>
<p className="text-gray-400 text-sm mt-1">
Replace gray boxes and random stock photos with contextual AI images.
Perfect for prototypes, client demos, and design mockups.
</p>
</div>
</li>
```
---
## Part 3: Add guides section with placeholder guide
### 3.1 Create guides directory structure
```bash
mkdir -p apps/landing/src/app/\(apps\)/docs/guides/placeholder-images
```
### 3.2 Add guides SEO config
**File:** `apps/landing/src/config/docs-seo.ts`
**Add to DOCS_PAGES object:**
```typescript
'guides': {
path: '/docs/guides/',
title: 'Guides | Banatie Docs',
description: 'Step-by-step guides for common use cases. Placeholder images, prototyping, and more.',
keywords: ['banatie guides', 'image generation tutorials', 'api guides'],
},
'guide-placeholder-images': {
path: '/docs/guides/placeholder-images/',
title: 'AI Placeholder Images Guide | Banatie',
description:
'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.',
keywords: [
'placeholder images',
'ai placeholder generator',
'placeholder image api',
'image placeholder dark',
'profile placeholder image',
'placeholder image url',
'dummy image generator',
],
},
```
### 3.3 Create guides index page
**File:** `apps/landing/src/app/(apps)/docs/guides/page.tsx`
```tsx
import type { Metadata } from 'next';
import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
import { createBreadcrumbSchema } from '@/config/docs-schema';
import { Hero, SectionHeader } from '@/components/docs/blocks';
import Link from 'next/link';
const PAGE = DOCS_PAGES['guides'];
export const metadata: Metadata = createDocsMetadata(PAGE);
const breadcrumbSchema = createBreadcrumbSchema([
{ name: 'Home', path: '/' },
{ name: 'Documentation', path: '/docs/' },
{ name: 'Guides', path: '/docs/guides/' },
]);
export default function GuidesPage() {
return (
<>
<JsonLd data={breadcrumbSchema} />
<DocPage
breadcrumbItems={[
{ label: 'Documentation', href: '/docs/' },
{ label: 'Guides' },
]}
tocItems={[]}
>
<Hero
title="Guides"
subtitle="Step-by-step tutorials for common use cases."
/>
<section className="mb-12">
<div className="grid gap-4">
<Link
href="/docs/guides/placeholder-images/"
className="block p-6 bg-slate-800/50 border border-slate-700 rounded-lg hover:border-purple-500/50 transition-colors"
>
<h3 className="text-lg font-semibold text-white mb-2">AI Placeholder Images</h3>
<p className="text-gray-400 text-sm">
Generate contextual placeholder images for development.
Replace gray boxes with AI visuals that match your design.
</p>
</Link>
</div>
</section>
</DocPage>
</>
);
}
```
### 3.4 Create placeholder images guide page
**File:** `apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx`
```tsx
import type { Metadata } from 'next';
import { TipBox } from '@/components/docs/shared/TipBox';
import { Table } from '@/components/docs/shared/Table';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema';
import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks';
const PAGE = DOCS_PAGES['guide-placeholder-images'];
export const metadata: Metadata = createDocsMetadata(PAGE);
const breadcrumbSchema = createBreadcrumbSchema([
{ name: 'Home', path: '/' },
{ name: 'Documentation', path: '/docs/' },
{ name: 'Guides', path: '/docs/guides/' },
{ name: 'Placeholder Images', path: '/docs/guides/placeholder-images/' },
]);
const articleSchema = createTechArticleSchema(PAGE);
const tocItems = [
{ id: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 },
{ id: 'quick-start', text: 'Quick Start', level: 2 },
{ id: 'common-sizes', text: 'Common Sizes', level: 2 },
{ id: 'dark-mode', text: 'Dark Mode Placeholders', level: 2 },
{ id: 'profile-avatars', text: 'Profile Avatars', level: 2 },
{ id: 'tips', text: 'Tips for Better Results', level: 2 },
{ id: 'next-steps', text: 'Next Steps', level: 2 },
];
export default function PlaceholderImagesGuidePage() {
return (
<>
<JsonLd data={breadcrumbSchema} />
<JsonLd data={articleSchema} />
<DocPage
breadcrumbItems={[
{ label: 'Documentation', href: '/docs/' },
{ label: 'Guides', href: '/docs/guides/' },
{ label: 'Placeholder Images' },
]}
tocItems={tocItems}
nextSteps={{
links: [
{
href: '/docs/live-urls/',
title: 'Live URLs',
description: 'Full documentation on URL-based generation.',
accent: 'primary',
},
{
href: '/docs/generation/',
title: 'Image Generation',
description: 'Advanced generation with the API.',
accent: 'secondary',
},
],
}}
>
<Hero
title="AI Placeholder Images"
subtitle="Generate contextual placeholder images that match your design. Not gray boxes. Not random stock photos."
/>
<section id="why-ai-placeholders" className="mb-12">
<SectionHeader level={2} id="why-ai-placeholders">
Why AI Placeholders?
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
Traditional placeholder services give you gray rectangles or random photos
that have nothing to do with your actual content.
</p>
<p className="text-gray-300 leading-relaxed mb-6">
With Banatie Live URLs, you describe what you need and get a relevant AI-generated image instantly.
Your mockups look real. Client demos make sense. Prototypes feel complete.
</p>
<Table
headers={['Service', 'What You Get']}
rows={[
['placehold.co', 'Gray box with dimensions text'],
['picsum.photos', 'Random landscape or portrait'],
['Banatie', 'AI image matching your description'],
]}
/>
</section>
<section id="quick-start" className="mb-12">
<SectionHeader level={2} id="quick-start">
Quick Start
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Use a Live URL directly in your <InlineCode>&lt;img&gt;</InlineCode> tag:
</p>
<CodeBlock
code={`<img
src="https://cdn.banatie.app/{org}/{project}/live/demo?prompt=modern+coffee+shop+interior"
alt="Coffee shop"
/>`}
language="html"
filename="Basic Usage"
/>
<p className="text-gray-300 leading-relaxed mt-6">
First request generates the image. Subsequent requests serve from cache instantly.
</p>
</section>
<section id="common-sizes" className="mb-12">
<SectionHeader level={2} id="common-sizes">
Common Sizes
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Use the <InlineCode>aspectRatio</InlineCode> parameter for standard sizes:
</p>
<Table
headers={['Use Case', 'Aspect Ratio', 'Example Dimensions']}
rows={[
['Avatar / Profile', '1:1', '200×200, 400×400'],
['Thumbnail', '3:2', '300×200, 600×400'],
['Card Image', '4:3', '400×300, 800×600'],
['Hero / Banner', '16:9', '1200×675, 1920×1080'],
['OG Image', '1200:630', '1200×630'],
['Product Square', '1:1', '600×600, 800×800'],
]}
/>
<CodeBlock
code={`<!-- Square avatar -->
<img src="...?prompt=professional+headshot&aspectRatio=1:1" />
<!-- Wide hero banner -->
<img src="...?prompt=abstract+tech+background&aspectRatio=16:9" />
<!-- OG image for social -->
<img src="...?prompt=blog+post+cover&aspectRatio=1200:630" />`}
language="html"
filename="Size Examples"
/>
</section>
<section id="dark-mode" className="mb-12">
<SectionHeader level={2} id="dark-mode">
Dark Mode Placeholders
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
For dark UI interfaces, include dark theme hints in your prompt:
</p>
<CodeBlock
code={`<!-- Dark mode card background -->
<img src="...?prompt=abstract+dark+gradient+background+for+dark+theme+ui" />
<!-- Dark mode product shot -->
<img src="...?prompt=smartphone+on+dark+surface+moody+lighting" />
<!-- Dark mode avatar placeholder -->
<img src="...?prompt=silhouette+avatar+dark+background&aspectRatio=1:1" />`}
language="html"
filename="Dark Mode Examples"
/>
<div className="mt-6">
<TipBox variant="compact" type="tip">
Keywords like "dark background", "moody lighting", "dark theme", and "night mode" help generate dark-friendly images.
</TipBox>
</div>
</section>
<section id="profile-avatars" className="mb-12">
<SectionHeader level={2} id="profile-avatars">
Profile Avatars
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Generate realistic avatar placeholders for user profiles:
</p>
<CodeBlock
code={`<!-- Generic professional avatar -->
<img src="...?prompt=professional+headshot+neutral+background&aspectRatio=1:1" />
<!-- Diverse team avatars -->
<img src="...?prompt=young+professional+woman+headshot&aspectRatio=1:1" />
<img src="...?prompt=middle+aged+man+business+portrait&aspectRatio=1:1" />
<!-- Stylized/illustrated avatars -->
<img src="...?prompt=minimal+geometric+avatar+illustration&aspectRatio=1:1" />`}
language="html"
filename="Avatar Examples"
/>
</section>
<section id="tips" className="mb-12">
<SectionHeader level={2} id="tips">
Tips for Better Results
</SectionHeader>
<ul className="space-y-4 text-gray-300">
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Be specific</strong>
<p className="text-gray-400 text-sm mt-1">
"modern minimalist office with plants" works better than "office".
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Include style hints</strong>
<p className="text-gray-400 text-sm mt-1">
Add "photorealistic", "illustration", "3D render", or "flat design" for consistent style.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Use scopes to organize</strong>
<p className="text-gray-400 text-sm mt-1">
Group related placeholders: /live/avatars/, /live/products/, /live/backgrounds/.
</p>
</div>
</li>
<li className="flex items-start gap-3">
<span className="text-purple-400 mt-1">•</span>
<div>
<strong className="text-white">Same prompt = same image</strong>
<p className="text-gray-400 text-sm mt-1">
Cached results mean consistent placeholders across your app.
</p>
</div>
</li>
</ul>
</section>
</DocPage>
</>
);
}
```
---
## Verification
After all changes:
1. Run `pnpm dev` in `apps/landing`
2. Check `/docs/live-urls/` — verify new "Placeholder Images" section
3. Check `/docs/guides/` — verify guides index page
4. Check `/docs/guides/placeholder-images/` — verify guide content
5. View page source — verify SEO metadata on all pages
---
## Done criteria
- [ ] live-urls SEO metadata updated with placeholder keywords
- [ ] live-urls page has new "Placeholder Images" section with examples
- [ ] `/docs/guides/` index page created
- [ ] `/docs/guides/placeholder-images/` guide created
- [ ] All pages render without errors
- [ ] sitemap.ts includes new pages (may need manual update)

75
inbox/task-homepage-placeholder-seo.md
View File

@ -1,75 +0,0 @@
# Task: Homepage Placeholder SEO Keywords
**Priority:** High
**Estimated time:** 5 min
**Type:** SEO optimization
---
## Change 1: Update keywords in metadata
**File:** `apps/landing/src/app/(landings)/page.tsx`
**Find:**
```typescript
keywords: [
'API-first image generation',
'AI image API',
'image generation for developers',
'prompt to image API',
'CDN image delivery',
],
```
**Replace with:**
```typescript
keywords: [
'AI image API',
'image generation for developers',
'prompt to image API',
'CDN image delivery',
'placeholder images',
'ai placeholder generator',
'placeholder image url',
'image placeholder api',
],
```
---
## Change 2: Update PromptUrlsSection subtitle
**File:** `apps/landing/src/app/(landings)/_components/PromptUrlsSection.tsx`
**Find:**
```tsx
<p className="text-gray-500 text-sm mt-4">
Perfect for static sites, prototypes, and AI coding agents that generate HTML.
</p>
```
**Replace with:**
```tsx
<p className="text-gray-500 text-sm mt-4">
Perfect for placeholder images, prototypes, static sites, and AI coding agents.
</p>
```
---
## Verification
After changes:
1. Run `pnpm dev` in `apps/landing`
2. Check homepage loads without errors
3. Inspect page source — verify new keywords in meta tag
4. Scroll to Prompt URLs section — verify updated text
---
## Done criteria
- [ ] Keywords array updated with 8 items
- [ ] PromptUrlsSection shows "placeholder images" first in list
- [ ] No TypeScript/lint errors
- [ ] Page renders correctly

267
inbox/task-placeholder-guide-revision.md Normal file
View File

@ -0,0 +1,267 @@
# Task: Revise Placeholder Images Guide
**Priority:** High
**Type:** Content revision
**Related:** Previous guide implementation needs text/UX improvements
---
## Context
Guide exists at `/docs/guides/placeholder-images/page.tsx`. Structure is OK, but texts need revision based on review session. This task covers text changes and minor UX improvements.
---
## SEO Keywords to Include Naturally
Target these in headings and body text:
- "placeholder image url" (390/mo, KD 21)
- "html placeholder image" (320/mo, KD 33)
- "placeholder image generator" (480/mo, KD 32)
- "ai placeholder images" (from our research)
---
## Section-by-Section Changes
### Hero
**Current subtitle:** "Generate contextual images for development. Copy-paste ready examples with Tailwind CSS."
**New subtitle:** "Generate contextual images for development. The new era of AI placeholders."
Remove Tailwind mention from hero — it's implementation detail, not selling point.
---
### What This Guide Covers
**Current:**
- Live URLs — embed AI-generated images directly in HTML
- Ready-to-use snippets — copy into your project with Tailwind classes
- File download — save images locally via API
**New:**
- **Live URLs** — describe what you need right in `<img>` src URLs
- **API generation** — full control, permanent URLs, downloadable files
Remove "snippets" as separate point — that's expected from any guide.
---
### AI Generation Basics → Rename to "How to Create Placeholders"
**Current content:** Generic AI explanation (prompt → image, enhancement, etc.)
**New content:**
Focus on Banatie features, not AI basics:
**Templates**
Choose a style, get quality results. Banatie enhances your simple prompt based on selected template.
Available templates:
- `photorealistic` — photo-quality images
- `digital-art` — stylized illustrations
- `3d-render` — 3D graphics
[Link to full templates documentation]
**Simple Prompts**
Write minimal descriptions. Templates handle the rest.
- "office" → detailed modern office with proper lighting
- "headshot" → professional portrait with studio background
No need for complex prompts — this is for placeholders, not art.
**Remove:**
- "Prompt Enhancement" as separate concept (it's what templates do)
- "Caching" paragraph (belongs to Live URLs section, not here)
---
### Quick Start
**Add intro paragraph** explaining what Live URLs are and why they're perfect for placeholders:
> Live URLs let you generate images by describing what you need right in the URL. No API calls, no file management — just an `<img>` tag with your prompt. Each unique prompt is cached, so subsequent loads are instant via CDN.
**Change example URL** from `{org}/{project}` placeholder to real working URL:
```html
<img
src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
alt="Mountain landscape"
/>
```
**Add live result** — show the actual generated image right after the code snippet.
---
### Organizing Placeholders
**Current:** Dry list of scope examples
**New approach:**
Short explanation: "Organize images by sections of your site using scopes."
One example showing the pattern:
```
/live/avatars?prompt=... → user photos
/live/hero?prompt=... → hero backgrounds
/live/products?prompt=... → product catalog
```
Then link: "Learn more about scopes in [Live URLs documentation](/docs/live-urls/#scopes)."
Don't teach users how to name things — let them figure it out.
---
### Prompt Tips
**Current "Be specific"** — contradicts placeholder philosophy
**New "Write less, not more":**
> For placeholders, simple prompts work best. Templates add the details.
>
> - Want an office? Write "office"
> - Need something specific? Add only what matters: "office dark theme"
> - Templates handle lighting, composition, style
**Current "Dark mode"** → **"Colors and themes":**
> Control the mood with color hints:
> - `dark background` — dark theme
> - `blue and orange accents` — specific palette
> - `warm lighting` — cozy feel
Keep dark mode examples but expand to general color control.
**Remove "Consistent style"** — too vague. Consistency comes from templates + references (advanced topic).
**Change TipBox text:**
From: "All examples in this guide use prompt enhancement..."
To: "Templates automatically enhance your prompts. A simple description becomes a detailed generation instruction."
---
### Recipes Section
**Add section header:** Create a parent heading "Recipes" or "Common Use Cases" that groups all the examples (Avatar, Product, Hero, OG, Features).
---
### Recipe Cards: Code + Preview
**UX improvement:** Each recipe should have a tabbed component with "Preview" and "Code" tabs, not separate blocks.
If tabs are complex to implement, at minimum:
- Show live preview FIRST
- Code snippet below with clear label
- Remove redundant "Code Snippet" / "Live Example" headings — visual separation is enough
---
### Testimonial Card (Avatar section)
**Current design:** Basic dark card
**Improve design quality:**
- Add subtle border or gradient
- Better typography hierarchy
- Proper quote styling (quotation marks or left border)
- Make it look like something you'd actually ship
This is our showcase — it should look good.
---
### File-based Workflow
**Current intro:** "Sometimes you need image files in your repository instead of URLs."
**New intro:** "Need files in your repo? Here's how to download generated images."
Warmer, more direct.
**Remove "Static site generators" mention** — no SEO value, weak use case.
**Keep:**
- Next.js with imports (fix the pattern — show `import` from `src/assets`, not `/public`)
- Version-controlled images
**Simplify download example:**
Current code is mini-SDK territory. Simplify to:
```javascript
// 1. Generate image
const response = await fetch('https://api.banatie.app/v1/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.BANATIE_API_KEY,
},
body: JSON.stringify({ prompt: 'modern office' }),
});
const { image } = await response.json();
console.log(image.cdnUrl); // Download this URL via browser or curl
```
Remove the fs.writeFileSync part — that's SDK territory. User can download via browser.
---
### "When to Use Files" List
**Current:**
- Next.js projects with `/public` folder ❌
- Static site generators requiring local assets ❌
- Version-controlled images
- Offline development
**New:**
- Next.js/React projects with local image imports
- Version-controlled placeholder assets
- Offline or CI/CD environments
---
## Component Changes
### LivePreview wrapper
Current implementation is OK. No changes needed unless design quality is poor.
### Code/Preview tabs
If implementing tabs is too complex, skip for now. But note it as future improvement.
---
## Quality Checklist
After implementation:
- [ ] No mention of "Prompt Enhancement" as standalone feature
- [ ] Templates positioned as primary feature
- [ ] All example URLs use `sys/demo` (real project)
- [ ] Quick Start shows actual generated image
- [ ] File-based section uses import pattern, not /public
- [ ] No static site generators mentioned
- [ ] Testimonial card looks professional
- [ ] SEO keywords naturally integrated
---
## Files to Modify
```
apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
```
No new files needed.

515
inbox/task-placeholder-guide-rewrite.md Normal file
View File

@ -0,0 +1,515 @@
# Task: Rewrite Placeholder Images Guide
**Priority:** High
**Estimated time:** 1-2 hours
**Type:** Documentation rewrite
---
## Overview
Delete current `/docs/guides/placeholder-images/page.tsx` and create new guide with structure below.
**Tone:** Technical, professional, concise. No marketing fluff.
**Audience:** Developers who want practical examples they can copy-paste.
**Live examples:** Use `https://cdn.banatie.app/sys/demo/live/{scope}` for all images.
---
## SEO Metadata
Keep existing SEO config in `docs-seo.ts` for `guide-placeholder-images`:
```typescript
'guide-placeholder-images': {
path: '/docs/guides/placeholder-images/',
title: 'AI Placeholder Images Guide | Banatie',
description:
'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.',
keywords: [
'placeholder images',
'ai placeholder generator',
'placeholder image api',
'image placeholder dark',
'profile placeholder image',
'placeholder image url',
'dummy image generator',
],
},
```
---
## Page Structure
```
tocItems = [
{ id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 },
{ id: 'ai-generation-basics', text: 'AI Generation Basics', level: 2 },
{ id: 'quick-start', text: 'Quick Start', level: 2 },
{ id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
{ id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
{ id: 'avatar-placeholder', text: 'Avatar Placeholder', level: 2 },
{ id: 'product-image', text: 'Product Image', level: 2 },
{ id: 'hero-section', text: 'Hero Section', level: 2 },
{ id: 'og-image', text: 'OG Image', level: 2 },
{ id: 'features-block', text: 'Features Block', level: 2 },
{ id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
]
```
---
## Content
### Hero
**Title:** AI Placeholder Images
**Subtitle:** Generate contextual images for development. Copy-paste ready examples with Tailwind CSS.
---
### Section: What This Guide Covers
This guide shows how to generate placeholder images with Banatie:
- **Live URLs** — embed AI-generated images directly in HTML
- **Ready-to-use snippets** — copy into your project with Tailwind classes
- **File download** — save images locally via API
All examples use real Live URLs. Images you see on this page are generated by Banatie.
---
### Section: AI Generation Basics
Banatie generates images from text descriptions. Key concepts:
**Prompt → Image**
Describe what you need. The AI generates a matching image.
**Prompt Enhancement**
Short prompts are automatically expanded. "office" becomes a detailed description with lighting, composition, and style.
**Templates**
Control visual style with the `template` parameter:
- `photorealistic` — photo-like images
- `digital-art` — stylized illustrations
- `3d-render` — 3D graphics
**Caching**
Same prompt returns the same image. First request generates, subsequent requests serve from cache instantly.
---
### Section: Quick Start
Basic Live URL format:
```
https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}
```
Minimal example:
```html
<img
src="https://cdn.banatie.app/landing/demo/live/test?prompt=mountain+landscape"
alt="Mountain landscape"
/>
```
Parameters:
| Parameter | Required | Description |
|-----------|----------|-------------|
| `prompt` | Yes | Image description (URL-encoded) |
| `aspectRatio` | No | Ratio like `1:1`, `16:9`, `4:3` (default: `16:9`) |
| `template` | No | Style template name |
For full parameter reference, see [Live URLs documentation](/docs/live-urls/).
---
### Section: Organizing Placeholders
Use scopes to group related images:
```
/live/avatars?prompt=... → team member photos
/live/products?prompt=... → product catalog
/live/blog?prompt=... → article images
/live/hero?prompt=... → hero sections
```
Scopes are created automatically on first use. Each scope maintains its own cache.
For scope configuration and limits, see [Live URLs → Scopes](/docs/live-urls/#scopes).
---
### Section: Prompt Tips
**Be specific**
```
❌ "office"
✅ "modern minimalist office with plants and natural light"
```
**Dark mode**
Include theme context in your prompt:
```
"abstract gradient background dark theme"
"product photo on dark surface moody lighting"
"avatar silhouette dark background"
```
**Consistent style**
Use the `template` parameter for visual consistency across multiple images:
```
?prompt=...&template=photorealistic
?prompt=...&template=digital-art
```
[TIP] All examples in this guide use prompt enhancement. Your short descriptions are automatically expanded into detailed prompts.
---
### Section: Avatar Placeholder
**Aspect ratio:** `1:1`
**Use case:** User profiles, team sections, testimonials.
#### Live Example
[LIVE_PREVIEW: testimonial-card]
Create a testimonial card component with:
- Dark card background (slate-800)
- Avatar image: 64x64px, rounded-full
- Quote text
- Author name and role
- Use this exact URL: `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1`
- Quote: "Banatie cut our design mockup time in half. No more hunting for stock photos."
- Author: "Sarah Chen"
- Role: "Product Designer at Acme"
[/LIVE_PREVIEW]
#### Code Snippet
```html
<img
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+studio+headshot&aspectRatio=1:1"
alt="User avatar"
class="w-16 h-16 rounded-full object-cover"
/>
```
#### Team Grid Example
[LIVE_PREVIEW: team-grid]
Create a 3-column responsive grid with:
- 3 avatar cards side by side on desktop, stacked on mobile
- Each card: avatar (48x48, rounded-full), name, role
- Gap between cards
- Use these URLs:
1. `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+headshot+young+man+friendly+smile&aspectRatio=1:1` — "Alex Rivera", "Engineering Lead"
2. `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+headshot+woman+glasses+confident&aspectRatio=1:1` — "Maria Santos", "Design Director"
3. `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+headshot+man+beard+casual&aspectRatio=1:1` — "James Wilson", "Product Manager"
[/LIVE_PREVIEW]
---
### Section: Product Image
**Aspect ratio:** `1:1` (square) or `4:5` (portrait)
**Use case:** E-commerce catalogs, product cards, listings.
#### Live Example
[LIVE_PREVIEW: product-card]
Create a product card with:
- White/light background card with subtle shadow
- Product image: square, rounded corners
- Product name
- Price
- "Add to Cart" button (small, secondary style)
- Use URL: `https://cdn.banatie.app/landing/demo/live/products?prompt=minimalist+wireless+headphones+white+background+product+photo&aspectRatio=1:1`
- Name: "Wireless Pro Headphones"
- Price: "$299"
[/LIVE_PREVIEW]
#### Code Snippet
```html
<img
src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1"
alt="Product"
class="w-full aspect-square object-cover rounded-lg"
/>
```
#### Product Grid Example
[LIVE_PREVIEW: product-grid]
Create a 2x2 product grid:
- 4 product cards
- Each: image (1:1), name, price
- Use these:
1. `?prompt=modern+smart+watch+product+photo` — "Smart Watch X1", "$199"
2. `?prompt=wireless+earbuds+case+product+photo` — "AirPods Pro", "$249"
3. `?prompt=portable+bluetooth+speaker+product+photo` — "Portable Speaker", "$79"
4. `?prompt=laptop+stand+aluminum+product+photo` — "Laptop Stand", "$129"
Base URL: `https://cdn.banatie.app/landing/demo/live/products` with `&aspectRatio=1:1`
[/LIVE_PREVIEW]
---
### Section: Hero Section
**Aspect ratio:** `16:9`
**Use case:** Landing page heroes, section backgrounds, feature highlights.
#### Live Example
[LIVE_PREVIEW: hero-section]
Create a full-width hero section:
- Full width, 400px height
- Background image with dark overlay (50% black)
- Centered white text: heading + subheading
- Rounded corners
- Use URL: `https://cdn.banatie.app/landing/demo/live/hero?prompt=aerial+view+modern+city+skyline+sunset+dramatic+lighting&aspectRatio=16:9`
- Heading: "Build the Future"
- Subheading: "Start your next project with AI-powered tools"
[/LIVE_PREVIEW]
#### Code Snippet
```html
<div class="relative w-full h-96 rounded-xl overflow-hidden">
<img
src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9"
alt="Hero background"
class="w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
<h1 class="text-4xl font-bold text-white">Your Headline</h1>
</div>
</div>
```
---
### Section: OG Image
**Aspect ratio:** `1200:630` (standard for social media)
**Use case:** Social sharing previews, Twitter/LinkedIn cards.
#### Live Example
[LIVE_PREVIEW: og-preview]
Create a social card preview mockup:
- Browser-like frame with URL bar showing "twitter.com"
- Inside: the OG image preview card
- Image with title overlay area
- Use URL: `https://cdn.banatie.app/landing/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630`
- Show how it would appear as a link preview
[/LIVE_PREVIEW]
#### Code Snippet
```html
<head>
<meta property="og:image" content="https://cdn.banatie.app/{org}/{project}/live/og?prompt=your+description&aspectRatio=1200:630" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
</head>
```
[TIP] OG images are crawled once and cached by social platforms. Change the prompt to generate a new image for updated content.
---
### Section: Features Block
**Aspect ratio:** `1:1`
**Use case:** Feature grids, benefit sections, service highlights.
#### Live Example
[LIVE_PREVIEW: features-grid]
Create a 3-column features section:
- Section heading: "Why Choose Us"
- 3 feature cards, each with:
- Square illustration (64x64)
- Feature title
- Short description (1-2 lines)
- Use these:
1. `?prompt=minimal+icon+illustration+lightning+bolt+speed+blue` — "Lightning Fast", "Deploy in seconds with our global CDN"
2. `?prompt=minimal+icon+illustration+shield+security+green` — "Secure by Default", "Enterprise-grade security built in"
3. `?prompt=minimal+icon+illustration+puzzle+piece+integration+purple` — "Easy Integration", "Works with your existing stack"
Base URL: `https://cdn.banatie.app/landing/demo/live/features` with `&aspectRatio=1:1`
[/LIVE_PREVIEW]
#### Code Snippet
```html
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<img
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+illustration&aspectRatio=1:1"
alt="Feature"
class="w-16 h-16 mx-auto rounded-lg"
/>
<h3 class="mt-4 font-semibold">Feature Title</h3>
<p class="mt-2 text-sm text-gray-600">Feature description goes here.</p>
</div>
<!-- Repeat for other features -->
</div>
```
---
### Section: File-based Workflow
Sometimes you need image files in your repository instead of URLs.
#### When to Use Files
- Next.js projects with `/public` folder
- Static site generators requiring local assets
- Version-controlled images
- Offline development
#### API Generation + Download
Generate an image and save it locally:
```javascript
// Node.js example
const fs = require('fs');
async function downloadPlaceholder(prompt, outputPath) {
// Generate image
const response = await fetch('https://api.banatie.app/v1/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.BANATIE_API_KEY,
},
body: JSON.stringify({
prompt: prompt,
aspectRatio: '16:9',
}),
});
const { image } = await response.json();
// Download from CDN
const imageResponse = await fetch(image.cdnUrl);
const buffer = await imageResponse.arrayBuffer();
// Save to file
fs.writeFileSync(outputPath, Buffer.from(buffer));
console.log(`Saved: ${outputPath}`);
}
// Usage
downloadPlaceholder(
'modern office interior',
'./public/images/hero.png'
);
```
For full API reference, see [Generations API](/docs/api/generations/).
---
## Implementation Notes for Claude Code
### Live Preview Component
Create a new component `LivePreview` or similar wrapper that:
- Has dark background (slate-900 or similar)
- Shows the rendered example
- Has subtle border
- Optionally shows "Live Example" label
### Code Structure
```
/docs/guides/placeholder-images/
page.tsx ← Main guide page
```
Use existing doc components:
- `CodeBlock` for code snippets
- `Table` for parameter tables
- `TipBox` for tips
- `SectionHeader` for sections
- `Hero` for page header
### Image URLs
All live example images use:
```
https://cdn.banatie.app/landing/demo/live/{scope}?prompt=...&aspectRatio=...
```
Scopes used:
- `avatars` — avatar examples
- `products` — product photos
- `hero` — hero backgrounds
- `og` — OG images
- `features` — feature illustrations
---
## Verification
After implementation:
1. All live preview images load correctly
2. Code snippets are properly formatted
3. Links to other docs work
4. Page renders without errors
5. TOC navigation works
6. Mobile responsive
---
## Done Criteria
- [ ] Old guide deleted
- [ ] New guide created with all sections
- [ ] Live preview components render actual images
- [ ] Code snippets are copy-paste ready
- [ ] All internal links work
- [ ] No TypeScript/lint errors