feat: guide update
This commit is contained in:
parent
77a2a03a81
commit
df3720557c
|
|
@ -24,15 +24,11 @@ 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: 'how-to-create-placeholders', text: 'How to Create Placeholders', 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: 'recipes', text: 'Recipes', level: 2 },
|
||||
{ id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
|
||||
];
|
||||
|
||||
|
|
@ -67,7 +63,7 @@ export default function PlaceholderImagesGuidePage() {
|
|||
>
|
||||
<Hero
|
||||
title="AI Placeholder Images"
|
||||
subtitle="Generate contextual images for development. Copy-paste ready examples with Tailwind CSS."
|
||||
subtitle="Generate contextual images for development. The new era of AI placeholders."
|
||||
/>
|
||||
|
||||
{/* What This Guide Covers */}
|
||||
|
|
@ -76,59 +72,39 @@ export default function PlaceholderImagesGuidePage() {
|
|||
What This Guide Covers
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
This guide shows how to generate placeholder images with Banatie:
|
||||
Two ways 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
|
||||
<strong className="text-white">Live URLs</strong> — describe what you need right in{' '}
|
||||
<InlineCode><img></InlineCode> src URLs
|
||||
</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
|
||||
<strong className="text-white">API generation</strong> — full control, permanent URLs,
|
||||
downloadable files
|
||||
</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.
|
||||
All examples on this page use real placeholder image URLs 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
|
||||
{/* How to Create Placeholders */}
|
||||
<section id="how-to-create-placeholders" className="mb-12">
|
||||
<SectionHeader level={2} id="how-to-create-placeholders">
|
||||
How to Create Placeholders
|
||||
</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:
|
||||
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-like images
|
||||
<InlineCode>photorealistic</InlineCode> — photo-quality images
|
||||
</li>
|
||||
<li>
|
||||
<InlineCode>digital-art</InlineCode> — stylized illustrations
|
||||
|
|
@ -137,13 +113,30 @@ export default function PlaceholderImagesGuidePage() {
|
|||
<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">Caching</h4>
|
||||
<p className="text-gray-300">
|
||||
Same prompt returns the same image. First request generates, subsequent requests
|
||||
serve from cache instantly.
|
||||
<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>
|
||||
|
|
@ -154,23 +147,38 @@ export default function PlaceholderImagesGuidePage() {
|
|||
<SectionHeader level={2} id="quick-start">
|
||||
Quick Start
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">Basic Live URL format:</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
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="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>
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
|
||||
<CodeBlock
|
||||
code={`<img
|
||||
src="https://cdn.banatie.app/{org}/{project}/live/demo?prompt=mountain+landscape"
|
||||
src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
|
||||
alt="Mountain landscape"
|
||||
/>`}
|
||||
language="html"
|
||||
filename="Basic Usage"
|
||||
filename="HTML Placeholder Image"
|
||||
/>
|
||||
|
||||
<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={['Parameter', 'Required', 'Description']}
|
||||
|
|
@ -199,21 +207,20 @@ export default function PlaceholderImagesGuidePage() {
|
|||
<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>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Organize images by sections of your site using scopes:
|
||||
</p>
|
||||
<CodeBlock
|
||||
code={`/live/avatars?prompt=... → team member photos
|
||||
/live/products?prompt=... → product catalog
|
||||
/live/blog?prompt=... → article images
|
||||
/live/hero?prompt=... → hero sections`}
|
||||
code={`/live/avatars?prompt=... → user photos
|
||||
/live/hero?prompt=... → hero backgrounds
|
||||
/live/products?prompt=... → product catalog`}
|
||||
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{' '}
|
||||
Learn more about scopes in{' '}
|
||||
<a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
|
||||
Live URLs → Scopes
|
||||
Live URLs documentation
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
|
@ -227,34 +234,25 @@ export default function PlaceholderImagesGuidePage() {
|
|||
|
||||
<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>
|
||||
<h4 className="text-white font-semibold mb-2">Write less, not more</h4>
|
||||
<p className="text-gray-300 mb-2">
|
||||
Use the <InlineCode>template</InlineCode> parameter for visual consistency across
|
||||
multiple images:
|
||||
For placeholders, simple prompts work best. Templates add the details:
|
||||
</p>
|
||||
<ul className="list-none text-gray-300 space-y-1">
|
||||
<li>Want an office? Write "office"</li>
|
||||
<li>
|
||||
Need something specific? Add only what matters: "office dark theme"
|
||||
</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={`?prompt=...&template=photorealistic
|
||||
?prompt=...&template=digital-art`}
|
||||
code={`"dark background" → dark theme
|
||||
"blue and orange accents" → specific palette
|
||||
"warm lighting" → cozy feel`}
|
||||
language="text"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -262,64 +260,59 @@ export default function PlaceholderImagesGuidePage() {
|
|||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="protip">
|
||||
All examples in this guide use prompt enhancement. Your short descriptions are
|
||||
automatically expanded into detailed prompts.
|
||||
Templates automatically enhance your prompts. A simple description becomes a detailed
|
||||
generation instruction.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Avatar Placeholder */}
|
||||
<section id="avatar-placeholder" className="mb-12">
|
||||
<SectionHeader level={2} id="avatar-placeholder">
|
||||
Avatar Placeholder
|
||||
{/* Recipes */}
|
||||
<section id="recipes" className="mb-12">
|
||||
<SectionHeader level={2} id="recipes">
|
||||
Recipes
|
||||
</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 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>
|
||||
|
||||
<SectionHeader level={3} id="avatar-testimonial">
|
||||
Testimonial Card
|
||||
</SectionHeader>
|
||||
<LivePreview>
|
||||
<div className="bg-slate-800 rounded-xl p-6 max-w-md">
|
||||
<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-16 h-16 rounded-full object-cover flex-shrink-0"
|
||||
className="w-14 h-14 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.”
|
||||
<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">Sarah Chen</p>
|
||||
<p className="text-gray-400 text-sm">Product Designer at Acme</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>
|
||||
</LivePreview>
|
||||
|
||||
<div className="mt-6">
|
||||
<CodeBlock
|
||||
code={`<img
|
||||
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+studio+headshot&aspectRatio=1:1"
|
||||
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
|
||||
alt="User avatar"
|
||||
class="w-16 h-16 rounded-full object-cover"
|
||||
class="w-14 h-14 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="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
|
||||
|
|
@ -356,25 +349,17 @@ export default function PlaceholderImagesGuidePage() {
|
|||
</div>
|
||||
</div>
|
||||
</LivePreview>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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.
|
||||
{/* 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>
|
||||
|
||||
<SectionHeader level={3} id="product-card">
|
||||
Product Card
|
||||
</SectionHeader>
|
||||
<LivePreview>
|
||||
<div className="bg-white rounded-xl p-4 max-w-xs shadow-lg">
|
||||
<img
|
||||
|
|
@ -382,15 +367,14 @@ export default function PlaceholderImagesGuidePage() {
|
|||
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-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 hover:bg-gray-800 transition-colors">
|
||||
<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>
|
||||
</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"
|
||||
|
|
@ -398,14 +382,11 @@ export default function PlaceholderImagesGuidePage() {
|
|||
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="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
|
||||
|
|
@ -445,40 +426,32 @@ export default function PlaceholderImagesGuidePage() {
|
|||
</div>
|
||||
</div>
|
||||
</LivePreview>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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.
|
||||
{/* 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 label="Hero Preview" className="p-0">
|
||||
<div className="relative w-full h-96 rounded-xl overflow-hidden">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
</LivePreview>
|
||||
|
||||
<div className="mt-6">
|
||||
<CodeBlock
|
||||
code={`<div class="relative w-full h-96 rounded-xl overflow-hidden">
|
||||
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"
|
||||
|
|
@ -489,26 +462,17 @@ export default function PlaceholderImagesGuidePage() {
|
|||
</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.
|
||||
<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 label="Social Card Preview">
|
||||
<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">
|
||||
|
|
@ -525,7 +489,9 @@ export default function PlaceholderImagesGuidePage() {
|
|||
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-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>
|
||||
|
|
@ -533,44 +499,28 @@ export default function PlaceholderImagesGuidePage() {
|
|||
</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>`}
|
||||
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"
|
||||
filename="OG Meta Tags"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="mt-4">
|
||||
<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.
|
||||
OG images are cached by social platforms. Change the prompt to regenerate.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* 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.
|
||||
{/* 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="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
|
||||
|
|
@ -578,8 +528,10 @@ export default function PlaceholderImagesGuidePage() {
|
|||
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>
|
||||
<p className="mt-4 font-semibold text-white">Lightning Fast</p>
|
||||
<p className="mt-2 text-sm text-gray-400">
|
||||
Deploy in seconds with our global CDN
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img
|
||||
|
|
@ -587,7 +539,7 @@ export default function PlaceholderImagesGuidePage() {
|
|||
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-4 font-semibold text-white">Secure by Default</p>
|
||||
<p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
|
|
@ -596,28 +548,19 @@ export default function PlaceholderImagesGuidePage() {
|
|||
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-4 font-semibold text-white">Easy Integration</p>
|
||||
<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>`}
|
||||
code={`<img
|
||||
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+lightning+bolt&aspectRatio=1:1"
|
||||
alt="Feature icon"
|
||||
class="w-16 h-16 rounded-lg"
|
||||
/>`}
|
||||
language="html"
|
||||
filename="Features Grid Code"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -628,64 +571,31 @@ export default function PlaceholderImagesGuidePage() {
|
|||
File-based Workflow
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Sometimes you need image files in your repository instead of URLs.
|
||||
Need files in your repo? Here's how to download generated images.
|
||||
</p>
|
||||
|
||||
<SectionHeader level={3} id="when-to-use-files">
|
||||
When to Use Files
|
||||
</SectionHeader>
|
||||
<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 projects with <InlineCode>/public</InlineCode> folder
|
||||
</li>
|
||||
<li>Static site generators requiring local assets</li>
|
||||
<li>Version-controlled images</li>
|
||||
<li>Offline development</li>
|
||||
<li>Next.js/React projects with local image imports</li>
|
||||
<li>Version-controlled placeholder assets</li>
|
||||
<li>Offline or CI/CD environments</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>
|
||||
|
||||
<h4 className="text-white font-semibold mb-3">Generate via API</h4>
|
||||
<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', {
|
||||
code={`// 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',
|
||||
}),
|
||||
});
|
||||
body: JSON.stringify({ prompt: 'modern office' }),
|
||||
});
|
||||
|
||||
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'
|
||||
);`}
|
||||
const { image } = await response.json();
|
||||
console.log(image.cdnUrl); // Download this URL`}
|
||||
language="javascript"
|
||||
filename="download-placeholder.js"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
|
|
|
|||
Loading…
Reference in New Issue