tasks: add docs seo
This commit is contained in:
parent
801080d565
commit
86528dc6cf
|
|
@ -0,0 +1,536 @@
|
|||
# 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)
|
||||
Loading…
Reference in New Issue