Compare commits
7 Commits
855ac3c111
...
9d9b82da77
| Author | SHA1 | Date |
|---|---|---|
 Oleg Proskurin
|
9d9b82da77 | |
|
Oleg Proskurin
|
0dc15d8694 | |
|
Oleg Proskurin
|
9eb63bea22 | |
|
Oleg Proskurin
|
df3720557c | |
|
Oleg Proskurin
|
77a2a03a81 | |
|
Oleg Proskurin
|
8080e7012e | |
|
Oleg Proskurin
|
9b032eaf5a |
|
|
@ -2,6 +2,7 @@ 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 { LivePreview } from '@/components/docs/shared/LivePreview';
|
||||
import { DocPage } from '@/components/docs/layout/DocPage';
|
||||
import { JsonLd } from '@/components/seo/JsonLd';
|
||||
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
|
||||
|
|
@ -22,13 +23,15 @@ const breadcrumbSchema = createBreadcrumbSchema([
|
|||
const articleSchema = createTechArticleSchema(PAGE);
|
||||
|
||||
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: '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 },
|
||||
{ id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
|
||||
{ id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
|
||||
{ id: 'light-mode-placeholders', text: 'Light Mode Placeholders', level: 2 },
|
||||
{ id: 'dark-mode-placeholders', text: 'Dark Mode Placeholders', 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() {
|
||||
|
|
@ -47,14 +50,14 @@ export default function PlaceholderImagesGuidePage() {
|
|||
links: [
|
||||
{
|
||||
href: '/docs/live-urls/',
|
||||
title: 'Live URLs',
|
||||
description: 'Full documentation on URL-based generation.',
|
||||
title: 'Live URLs Reference',
|
||||
description: 'Full parameter documentation for Live URLs.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/generation/',
|
||||
title: 'Image Generation',
|
||||
description: 'Advanced generation with the API.',
|
||||
href: '/docs/api/generations/',
|
||||
title: 'Generations API',
|
||||
description: 'Generate images programmatically.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
|
|
@ -62,182 +65,655 @@ export default function PlaceholderImagesGuidePage() {
|
|||
>
|
||||
<Hero
|
||||
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">
|
||||
<SectionHeader level={2} id="why-ai-placeholders">
|
||||
Why AI Placeholders?
|
||||
{/* What This Guide Covers */}
|
||||
<section id="what-this-guide-covers" className="mb-12 scroll-mt-24">
|
||||
<SectionHeader level={2} id="what-this-guide-covers">
|
||||
What This Guide Covers
|
||||
</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.
|
||||
Two ways to generate placeholder images with Banatie:
|
||||
</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.
|
||||
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
||||
<li>
|
||||
<a href="#quick-start" className="text-white font-semibold hover:text-purple-400">
|
||||
Live URLs
|
||||
</a>{' '}
|
||||
— describe what you need right in <InlineCode><img></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>
|
||||
|
||||
<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">
|
||||
{/* 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> "office" becomes a detailed
|
||||
modern office with proper lighting
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-gray-500">→</span> "headshot" 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">
|
||||
Quick Start
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Use a Live URL directly in your <InlineCode><img></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 className="text-gray-300 leading-relaxed mb-4">Basic URL format:</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"
|
||||
code="https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}"
|
||||
language="text"
|
||||
filename="URL Format"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
First request generates the image. Subsequent requests serve from cache instantly.
|
||||
</p>
|
||||
</section>
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
|
||||
<CodeBlock
|
||||
code={`<img
|
||||
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">
|
||||
<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>
|
||||
<p className="text-gray-300 leading-relaxed mt-4 mb-2">Result:</p>
|
||||
<LivePreview showLabel={false}>
|
||||
<img
|
||||
src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape&aspectRatio=16:9"
|
||||
alt="Mountain landscape"
|
||||
className="w-full max-w-md rounded-lg"
|
||||
/>
|
||||
</LivePreview>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Parameters:</p>
|
||||
<Table
|
||||
headers={['Use Case', 'Aspect Ratio', 'Example Dimensions']}
|
||||
headers={['Parameter', 'Required', 'Description']}
|
||||
rows={[
|
||||
['Avatar / Profile', '1:1', '200x200, 400x400'],
|
||||
['Thumbnail', '3:2', '300x200, 600x400'],
|
||||
['Card Image', '4:3', '400x300, 800x600'],
|
||||
['Hero / Banner', '16:9', '1200x675, 1920x1080'],
|
||||
['OG Image', '1200:630', '1200x630'],
|
||||
['Product Square', '1:1', '600x600, 800x800'],
|
||||
[<InlineCode key="p">prompt</InlineCode>, 'Yes', 'Image description (URL-encoded)'],
|
||||
[
|
||||
<InlineCode key="a">aspectRatio</InlineCode>,
|
||||
'No',
|
||||
'Ratio like 1:1, 16:9, 4:3 (default: 16:9)',
|
||||
],
|
||||
[<InlineCode key="t">template</InlineCode>, 'No', 'Style template name'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
For full parameter reference, see{' '}
|
||||
<a href="/docs/live-urls/" className="text-purple-400 hover:underline">
|
||||
Live URLs documentation
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="dark-mode" className="mb-12">
|
||||
<SectionHeader level={2} id="dark-mode">
|
||||
Dark Mode Placeholders
|
||||
{/* Organizing Placeholders */}
|
||||
<section id="organizing-placeholders" className="mb-12 scroll-mt-24">
|
||||
<SectionHeader level={2} id="organizing-placeholders">
|
||||
Organizing Placeholders
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
For dark UI interfaces, include dark theme hints in your prompt:
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Organize images by sections of your site using scopes:
|
||||
</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"
|
||||
code={`/live/avatars?prompt=... → user photos
|
||||
/live/hero?prompt=... → hero backgrounds
|
||||
/live/products?prompt=... → product catalog`}
|
||||
language="text"
|
||||
/>
|
||||
|
||||
<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">
|
||||
<TipBox variant="compact" type="info">
|
||||
Keywords like "dark background", "moody lighting", "dark theme", and "night mode" help generate dark-friendly images.
|
||||
<TipBox variant="protip">
|
||||
Templates automatically enhance your prompts. A simple description becomes a detailed
|
||||
generation instruction.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="profile-avatars" className="mb-12">
|
||||
<SectionHeader level={2} id="profile-avatars">
|
||||
Profile Avatars
|
||||
{/* Light Mode Placeholders */}
|
||||
<section id="light-mode-placeholders" className="mb-12 scroll-mt-24">
|
||||
<SectionHeader level={2} id="light-mode-placeholders">
|
||||
Light Mode Placeholders
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Generate realistic avatar placeholders for user profiles:
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
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>
|
||||
|
||||
<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"
|
||||
code={`"product on white background"
|
||||
"office with soft natural light"
|
||||
"portrait, bright studio, pastel tones"
|
||||
"dashboard mockup, light gray background, blue accent"`}
|
||||
language="text"
|
||||
/>
|
||||
|
||||
<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 id="tips" className="mb-12">
|
||||
<SectionHeader level={2} id="tips">
|
||||
Tips for Better Results
|
||||
{/* Dark Mode Placeholders */}
|
||||
<section id="dark-mode-placeholders" className="mb-12 scroll-mt-24">
|
||||
<SectionHeader level={2} id="dark-mode-placeholders">
|
||||
Dark Mode Placeholders
|
||||
</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">
|
||||
<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>
|
||||
<CodeBlock
|
||||
code={`"office interior, dark background"
|
||||
"product photo, dark surface, moody lighting"
|
||||
"night cityscape, neon accents"
|
||||
"abstract gradient, dark purple and blue"`}
|
||||
language="text"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</LivePreview>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Placeholder Image Examples */}
|
||||
<section id="placeholder-image-examples" className="mb-12 scroll-mt-24">
|
||||
<SectionHeader level={2} id="placeholder-image-examples">
|
||||
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>
|
||||
</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>
|
||||
</LivePreview>
|
||||
|
||||
<CodeBlock
|
||||
code={`<img
|
||||
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
|
||||
alt="User avatar"
|
||||
class="w-14 h-14 rounded-full object-cover"
|
||||
/>`}
|
||||
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>
|
||||
</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>
|
||||
</LivePreview>
|
||||
|
||||
<CodeBlock
|
||||
code={`<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"
|
||||
/>`}
|
||||
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>
|
||||
</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'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>
|
||||
|
||||
<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'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>
|
||||
</DocPage>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,7 @@ 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';
|
||||
import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks';
|
||||
|
||||
const PAGE = DOCS_PAGES['live-urls'];
|
||||
|
||||
|
|
@ -42,129 +38,276 @@ export default function LiveUrlsPage() {
|
|||
<JsonLd data={breadcrumbSchema} />
|
||||
<JsonLd data={articleSchema} />
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs/' },
|
||||
{ label: 'Live URLs' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/live-scopes/',
|
||||
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.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<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><img src="..."></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"
|
||||
breadcrumbItems={[{ label: 'Documentation', href: '/docs/' }, { label: 'Live URLs' }]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/live-scopes/',
|
||||
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.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Live URLs"
|
||||
subtitle="Generate images directly from URL parameters. No API calls needed — just use the URL in your HTML."
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
Query parameters:
|
||||
</p>
|
||||
<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><img src="..."></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
|
||||
headers={['Parameter', 'Required', 'Description']}
|
||||
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">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="url-format" className="mb-12">
|
||||
<SectionHeader level={2} id="url-format">
|
||||
URL Format
|
||||
</SectionHeader>
|
||||
|
||||
<section id="try-it" className="mb-12">
|
||||
<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/{org}/{project}/live/{scope}?prompt=...&aspectRatio=...`}
|
||||
language="text"
|
||||
filename="Live URL Format"
|
||||
/>
|
||||
|
||||
<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">Query parameters:</p>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
Or use it directly in HTML:
|
||||
</p>
|
||||
<Table
|
||||
headers={['Parameter', 'Required', 'Description']}
|
||||
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
|
||||
code={`<img
|
||||
<section id="try-it" className="mb-12">
|
||||
<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"
|
||||
alt="Mountain landscape"
|
||||
/>`}
|
||||
language="html"
|
||||
filename="HTML Usage"
|
||||
/>
|
||||
</section>
|
||||
language="html"
|
||||
filename="HTML Usage"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section id="caching-behavior" className="mb-12">
|
||||
<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>
|
||||
|
||||
<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
|
||||
code={`<!-- Avatar placeholder (200×200) -->
|
||||
<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">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" />
|
||||
|
||||
<!-- Thumbnail placeholder (300×200) -->
|
||||
|
|
@ -175,141 +318,18 @@ export default function LiveUrlsPage() {
|
|||
|
||||
<!-- 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"
|
||||
/>
|
||||
language="html"
|
||||
filename="Placeholder Examples"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
For dark mode interfaces, include "dark theme" or "dark background" in your prompt.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
For dark mode interfaces, include "dark theme" or "dark background" in your prompt.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="caching-behavior" className="mb-12">
|
||||
<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>
|
||||
</DocPage>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,13 @@ const navigationItems: NavItem[] = [
|
|||
label: 'Authentication',
|
||||
href: '/docs/authentication/',
|
||||
},
|
||||
{
|
||||
label: 'Guides',
|
||||
href: '/docs/guides/',
|
||||
children: [
|
||||
{ label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'API Reference',
|
||||
href: '/docs/api/',
|
||||
|
|
@ -69,17 +76,11 @@ const navigationItems: NavItem[] = [
|
|||
{ 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) => {
|
||||
const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference']);
|
||||
const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference', 'Guides']);
|
||||
|
||||
const toggleSection = (label: string) => {
|
||||
setExpandedSections((prev) =>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,18 +1,20 @@
|
|||
'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):
|
||||
* - Small emoji icon on left
|
||||
* 1. Compact Style:
|
||||
* - Lucide icon on left
|
||||
* - Compact padding (p-4)
|
||||
* - Smaller text (text-sm)
|
||||
* - Subtle background with thin border
|
||||
* - Best for minor notes and tips
|
||||
*
|
||||
* 2. Prominent Style (Adapted from Variant C):
|
||||
* 2. Prominent Style:
|
||||
* - NO icon
|
||||
* - Larger padding (p-6)
|
||||
* - Larger text (text-base)
|
||||
|
|
@ -20,6 +22,12 @@
|
|||
* - More visual weight
|
||||
* - 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:
|
||||
* <TipBox variant="compact" type="info">
|
||||
* This is a compact tip
|
||||
|
|
@ -28,10 +36,14 @@
|
|||
* <TipBox variant="prominent" type="warning">
|
||||
* This is an important security warning
|
||||
* </TipBox>
|
||||
*
|
||||
* <TipBox variant="protip">
|
||||
* This is a valuable pro tip
|
||||
* </TipBox>
|
||||
*/
|
||||
|
||||
type TipType = 'info' | 'warning' | 'success';
|
||||
type TipVariant = 'compact' | 'prominent';
|
||||
type TipVariant = 'compact' | 'prominent' | 'protip';
|
||||
|
||||
interface TipBoxProps {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -39,10 +51,10 @@ interface TipBoxProps {
|
|||
type?: TipType;
|
||||
}
|
||||
|
||||
const icons: Record<TipType, string> = {
|
||||
info: '💡',
|
||||
warning: '⚠️',
|
||||
success: '✓',
|
||||
const icons: Record<TipType, React.ReactNode> = {
|
||||
info: <Lightbulb className="w-5 h-5 text-purple-400" />,
|
||||
warning: <AlertTriangle className="w-5 h-5 text-amber-400" />,
|
||||
success: <CheckCircle className="w-5 h-5 text-green-400" />,
|
||||
};
|
||||
|
||||
const compactStyles: Record<TipType, string> = {
|
||||
|
|
@ -53,23 +65,49 @@ const compactStyles: 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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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 isCompact = variant === 'compact';
|
||||
const icon = icons[type];
|
||||
const styleClass = isCompact ? compactStyles[type] : prominentStyles[type];
|
||||
const protipStyle =
|
||||
'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';
|
||||
|
||||
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 (
|
||||
<div
|
||||
className={`flex gap-3 p-4 rounded-xl border ${styleClass}`}
|
||||
role="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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -132,16 +132,18 @@ export const DOCS_PAGES = {
|
|||
},
|
||||
'guide-placeholder-images': {
|
||||
path: '/docs/guides/placeholder-images/',
|
||||
title: 'AI Placeholder Images Guide | Banatie',
|
||||
title: 'AI Placeholder Image Generator — Light & Dark Mode | Banatie',
|
||||
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: [
|
||||
'placeholder images',
|
||||
'ai placeholder generator',
|
||||
'placeholder image api',
|
||||
'placeholder image generator',
|
||||
'image placeholder dark',
|
||||
'profile placeholder image',
|
||||
'placeholder image url',
|
||||
'html placeholder image',
|
||||
'ai placeholder images',
|
||||
'dark mode placeholder',
|
||||
'light mode placeholder',
|
||||
'profile placeholder image',
|
||||
'dummy image generator',
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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><img></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)
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue