feat: new version
This commit is contained in:
parent
8080e7012e
commit
77a2a03a81
|
|
@ -0,0 +1,702 @@
|
|||
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';
|
||||
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: '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 },
|
||||
];
|
||||
|
||||
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 Reference',
|
||||
description: 'Full parameter documentation for Live URLs.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api/generations/',
|
||||
title: 'Generations API',
|
||||
description: 'Generate images programmatically.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="AI Placeholder Images"
|
||||
subtitle="Generate contextual images for development. Copy-paste ready examples with Tailwind CSS."
|
||||
/>
|
||||
|
||||
{/* What This Guide Covers */}
|
||||
<section id="what-this-guide-covers" className="mb-12">
|
||||
<SectionHeader level={2} id="what-this-guide-covers">
|
||||
What This Guide Covers
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
This guide shows how to generate placeholder images with Banatie:
|
||||
</p>
|
||||
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
||||
<li>
|
||||
<strong className="text-white">Live URLs</strong> — embed AI-generated images directly
|
||||
in HTML
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-white">Ready-to-use snippets</strong> — copy into your project
|
||||
with Tailwind classes
|
||||
</li>
|
||||
<li>
|
||||
<strong className="text-white">File download</strong> — save images locally via API
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
All examples use real Live URLs. Images you see on this page are generated by Banatie.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* AI Generation Basics */}
|
||||
<section id="ai-generation-basics" className="mb-12">
|
||||
<SectionHeader level={2} id="ai-generation-basics">
|
||||
AI Generation Basics
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Banatie generates images from text descriptions. Key concepts:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Prompt → Image</h4>
|
||||
<p className="text-gray-300">
|
||||
Describe what you need. The AI generates a matching image.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Prompt Enhancement</h4>
|
||||
<p className="text-gray-300">
|
||||
Short prompts are automatically expanded. "office" becomes a detailed
|
||||
description with lighting, composition, and style.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Templates</h4>
|
||||
<p className="text-gray-300 mb-2">
|
||||
Control visual style with the <InlineCode>template</InlineCode> parameter:
|
||||
</p>
|
||||
<ul className="list-disc list-inside text-gray-300 space-y-1">
|
||||
<li>
|
||||
<InlineCode>photorealistic</InlineCode> — photo-like images
|
||||
</li>
|
||||
<li>
|
||||
<InlineCode>digital-art</InlineCode> — stylized illustrations
|
||||
</li>
|
||||
<li>
|
||||
<InlineCode>3d-render</InlineCode> — 3D graphics
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Caching</h4>
|
||||
<p className="text-gray-300">
|
||||
Same prompt returns the same image. First request generates, subsequent requests
|
||||
serve from cache instantly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick Start */}
|
||||
<section id="quick-start" className="mb-12">
|
||||
<SectionHeader level={2} id="quick-start">
|
||||
Quick Start
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">Basic Live URL format:</p>
|
||||
<CodeBlock
|
||||
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 mb-4">Minimal example:</p>
|
||||
<CodeBlock
|
||||
code={`<img
|
||||
src="https://cdn.banatie.app/{org}/{project}/live/demo?prompt=mountain+landscape"
|
||||
alt="Mountain landscape"
|
||||
/>`}
|
||||
language="html"
|
||||
filename="Basic Usage"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Parameters:</p>
|
||||
<Table
|
||||
headers={['Parameter', 'Required', 'Description']}
|
||||
rows={[
|
||||
[<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'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Organizing Placeholders */}
|
||||
<section id="organizing-placeholders" className="mb-12">
|
||||
<SectionHeader level={2} id="organizing-placeholders">
|
||||
Organizing Placeholders
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">Use scopes to group related images:</p>
|
||||
<CodeBlock
|
||||
code={`/live/avatars?prompt=... → team member photos
|
||||
/live/products?prompt=... → product catalog
|
||||
/live/blog?prompt=... → article images
|
||||
/live/hero?prompt=... → hero sections`}
|
||||
language="text"
|
||||
filename="Scope Examples"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
Scopes are created automatically on first use. Each scope maintains its own cache. For
|
||||
scope configuration and limits, see{' '}
|
||||
<a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
|
||||
Live URLs → Scopes
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Prompt Tips */}
|
||||
<section id="prompt-tips" className="mb-12">
|
||||
<SectionHeader level={2} id="prompt-tips">
|
||||
Prompt Tips
|
||||
</SectionHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Be specific</h4>
|
||||
<CodeBlock
|
||||
code={`❌ "office"
|
||||
✅ "modern minimalist office with plants and natural light"`}
|
||||
language="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Dark mode</h4>
|
||||
<p className="text-gray-300 mb-2">Include theme context in your prompt:</p>
|
||||
<CodeBlock
|
||||
code={`"abstract gradient background dark theme"
|
||||
"product photo on dark surface moody lighting"
|
||||
"avatar silhouette dark background"`}
|
||||
language="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Consistent style</h4>
|
||||
<p className="text-gray-300 mb-2">
|
||||
Use the <InlineCode>template</InlineCode> parameter for visual consistency across
|
||||
multiple images:
|
||||
</p>
|
||||
<CodeBlock
|
||||
code={`?prompt=...&template=photorealistic
|
||||
?prompt=...&template=digital-art`}
|
||||
language="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="protip">
|
||||
All examples in this guide use prompt enhancement. Your short descriptions are
|
||||
automatically expanded into detailed prompts.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Avatar Placeholder */}
|
||||
<section id="avatar-placeholder" className="mb-12">
|
||||
<SectionHeader level={2} id="avatar-placeholder">
|
||||
Avatar Placeholder
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-2">
|
||||
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<strong className="text-white">Use case:</strong> User profiles, team sections,
|
||||
testimonials.
|
||||
</p>
|
||||
|
||||
<SectionHeader level={3} id="avatar-testimonial">
|
||||
Testimonial Card
|
||||
</SectionHeader>
|
||||
<LivePreview>
|
||||
<div className="bg-slate-800 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-16 h-16 rounded-full object-cover flex-shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-gray-300 italic mb-3">
|
||||
“Banatie cut our design mockup time in half. No more hunting for stock
|
||||
photos.”
|
||||
</p>
|
||||
<p className="text-white font-semibold">Sarah Chen</p>
|
||||
<p className="text-gray-400 text-sm">Product Designer at Acme</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LivePreview>
|
||||
|
||||
<div className="mt-6">
|
||||
<CodeBlock
|
||||
code={`<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"
|
||||
/>`}
|
||||
language="html"
|
||||
filename="Avatar Code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionHeader level={3} id="avatar-team-grid" className="mt-8">
|
||||
Team Grid
|
||||
</SectionHeader>
|
||||
<LivePreview>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* Product Image */}
|
||||
<section id="product-image" className="mb-12">
|
||||
<SectionHeader level={2} id="product-image">
|
||||
Product Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-2">
|
||||
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>{' '}
|
||||
(square) or <InlineCode>4:5</InlineCode> (portrait)
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<strong className="text-white">Use case:</strong> E-commerce catalogs, product cards,
|
||||
listings.
|
||||
</p>
|
||||
|
||||
<SectionHeader level={3} id="product-card">
|
||||
Product Card
|
||||
</SectionHeader>
|
||||
<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"
|
||||
/>
|
||||
<h3 className="text-gray-900 font-semibold">Wireless Pro Headphones</h3>
|
||||
<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 hover:bg-gray-800 transition-colors">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</LivePreview>
|
||||
|
||||
<div className="mt-6">
|
||||
<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"
|
||||
filename="Product Image Code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionHeader level={3} id="product-grid" className="mt-8">
|
||||
Product Grid
|
||||
</SectionHeader>
|
||||
<LivePreview>
|
||||
<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="AirPods Pro"
|
||||
className="w-full aspect-square object-cover rounded-md mb-2"
|
||||
/>
|
||||
<p className="text-gray-900 font-medium text-sm">AirPods Pro</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+photo&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>
|
||||
</section>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section id="hero-section" className="mb-12">
|
||||
<SectionHeader level={2} id="hero-section">
|
||||
Hero Section
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-2">
|
||||
<strong className="text-white">Aspect ratio:</strong> <InlineCode>16:9</InlineCode>
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<strong className="text-white">Use case:</strong> Landing page heroes, section
|
||||
backgrounds, feature highlights.
|
||||
</p>
|
||||
|
||||
<LivePreview label="Hero Preview" className="p-0">
|
||||
<div className="relative w-full h-96 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">
|
||||
<h2 className="text-4xl font-bold text-white mb-2">Build the Future</h2>
|
||||
<p className="text-gray-200 text-lg">
|
||||
Start your next project with AI-powered tools
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</LivePreview>
|
||||
|
||||
<div className="mt-6">
|
||||
<CodeBlock
|
||||
code={`<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>`}
|
||||
language="html"
|
||||
filename="Hero Section Code"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* OG Image */}
|
||||
<section id="og-image" className="mb-12">
|
||||
<SectionHeader level={2} id="og-image">
|
||||
OG Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-2">
|
||||
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1200:630</InlineCode>{' '}
|
||||
(standard for social media)
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<strong className="text-white">Use case:</strong> Social sharing previews,
|
||||
Twitter/LinkedIn cards.
|
||||
</p>
|
||||
|
||||
<LivePreview label="Social Card Preview">
|
||||
<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=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630"
|
||||
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>
|
||||
|
||||
<div className="mt-6">
|
||||
<CodeBlock
|
||||
code={`<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>`}
|
||||
language="html"
|
||||
filename="OG Meta Tags"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
OG images are crawled once and cached by social platforms. Change the prompt to
|
||||
generate a new image for updated content.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Block */}
|
||||
<section id="features-block" className="mb-12">
|
||||
<SectionHeader level={2} id="features-block">
|
||||
Features Block
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-2">
|
||||
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<strong className="text-white">Use case:</strong> Feature grids, benefit sections,
|
||||
service highlights.
|
||||
</p>
|
||||
|
||||
<LivePreview>
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-xl font-bold text-white">Why Choose Us</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+lightning+bolt+speed+blue&aspectRatio=1:1"
|
||||
alt="Lightning Fast"
|
||||
className="w-16 h-16 mx-auto rounded-lg"
|
||||
/>
|
||||
<h4 className="mt-4 font-semibold text-white">Lightning Fast</h4>
|
||||
<p className="mt-2 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+shield+security+green&aspectRatio=1:1"
|
||||
alt="Secure by Default"
|
||||
className="w-16 h-16 mx-auto rounded-lg"
|
||||
/>
|
||||
<h4 className="mt-4 font-semibold text-white">Secure by Default</h4>
|
||||
<p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+puzzle+piece+integration+purple&aspectRatio=1:1"
|
||||
alt="Easy Integration"
|
||||
className="w-16 h-16 mx-auto rounded-lg"
|
||||
/>
|
||||
<h4 className="mt-4 font-semibold text-white">Easy Integration</h4>
|
||||
<p className="mt-2 text-sm text-gray-400">Works with your existing stack</p>
|
||||
</div>
|
||||
</div>
|
||||
</LivePreview>
|
||||
|
||||
<div className="mt-6">
|
||||
<CodeBlock
|
||||
code={`<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>`}
|
||||
language="html"
|
||||
filename="Features Grid Code"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* File-based Workflow */}
|
||||
<section id="file-based-workflow" className="mb-12">
|
||||
<SectionHeader level={2} id="file-based-workflow">
|
||||
File-based Workflow
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Sometimes you need image files in your repository instead of URLs.
|
||||
</p>
|
||||
|
||||
<SectionHeader level={3} id="when-to-use-files">
|
||||
When to Use Files
|
||||
</SectionHeader>
|
||||
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
||||
<li>
|
||||
Next.js projects with <InlineCode>/public</InlineCode> folder
|
||||
</li>
|
||||
<li>Static site generators requiring local assets</li>
|
||||
<li>Version-controlled images</li>
|
||||
<li>Offline development</li>
|
||||
</ul>
|
||||
|
||||
<SectionHeader level={3} id="api-generation-download">
|
||||
API Generation + Download
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Generate an image and save it locally:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`// 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'
|
||||
);`}
|
||||
language="javascript"
|
||||
filename="download-placeholder.js"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
For full API reference, see{' '}
|
||||
<a href="/docs/api/generations/" className="text-purple-400 hover:underline">
|
||||
Generations API
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
</DocPage>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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.
|
||||
Loading…
Reference in New Issue