diff --git a/inbox/task-docs-placeholder-seo.md b/inbox/task-docs-placeholder-seo.md new file mode 100644 index 0000000..0caa358 --- /dev/null +++ b/inbox/task-docs-placeholder-seo.md @@ -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 + +``` + +**Replace with:** +```tsx + +``` + +### 2.3 Add new "Placeholder Images" section + +**Add this section AFTER the "Try It" section and BEFORE "Caching Behavior":** + +```tsx +
+ + Placeholder Images + +

+ 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. +

+ +

Common placeholder sizes:

+ + + + + + + + + + + +`} + language="html" + filename="Placeholder Examples" + /> + +
+ + For dark mode interfaces, include "dark theme" or "dark background" in your prompt. + +
+
+``` + +### 2.4 Update "Use Cases" section — expand first item + +**Find the first list item in use-cases section:** +```tsx +
  • + • +
    + Dynamic placeholders +

    Generate placeholder images during development that match your design intent.

    +
    +
    • +``` + +**Replace with:** +```tsx +
  • + • +
    + AI Placeholder Images +

    + Replace gray boxes and random stock photos with contextual AI images. + Perfect for prototypes, client demos, and design mockups. +

    +
    +
    • +``` + +--- + +## 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 ( + <> + + + + +
    +
    + +

    AI Placeholder Images

    +

    + Generate contextual placeholder images for development. + Replace gray boxes with AI visuals that match your design. +

    + +
    +
    +     + + ); +} +``` + +### 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 ( + <> + + + + + +
    + + Why AI Placeholders? + +

    + Traditional placeholder services give you gray rectangles or random photos + that have nothing to do with your actual content. +

    +

    + 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. +

    + + + + +
    + + Quick Start + +

    + Use a Live URL directly in your <img> tag: +

    + + `} + language="html" + filename="Basic Usage" + /> + +

    + First request generates the image. Subsequent requests serve from cache instantly. +

    +
    + +
    + + Common Sizes + +

    + Use the aspectRatio parameter for standard sizes: +

    + +
    + + + + + + + + +`} + language="html" + filename="Size Examples" + /> + + +
    + + Dark Mode Placeholders + +

    + For dark UI interfaces, include dark theme hints in your prompt: +

    + + + + + + + + +`} + language="html" + filename="Dark Mode Examples" + /> + +
    + + Keywords like "dark background", "moody lighting", "dark theme", and "night mode" help generate dark-friendly images. + +
    +
    + +
    + + Profile Avatars + +

    + Generate realistic avatar placeholders for user profiles: +

    + + + + + + + + + +`} + language="html" + filename="Avatar Examples" + /> +
    + +
    + + Tips for Better Results + + +
      +
    • + • +
      + Be specific +

      + "modern minimalist office with plants" works better than "office". +

      +
      +
      • +
    • + • +
      + Include style hints +

      + Add "photorealistic", "illustration", "3D render", or "flat design" for consistent style. +

      +
      +
      • +
    • + • +
      + Use scopes to organize +

      + Group related placeholders: /live/avatars/, /live/products/, /live/backgrounds/. +

      +
      +
      • +
    • + • +
      + Same prompt = same image +

      + Cached results mean consistent placeholders across your app. +

      +
      +
      • +
    +
    + + + ); +} +``` + +--- + +## 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)