doc: prepare for guide
This commit is contained in:
parent
9b032eaf5a
commit
8080e7012e
|
|
@ -1,245 +0,0 @@
|
|||
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', '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'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<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="info">
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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,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