diff --git a/apps/landing/src/app/(apps)/docs/guides/page.tsx b/apps/landing/src/app/(apps)/docs/guides/page.tsx new file mode 100644 index 0000000..5a74499 --- /dev/null +++ b/apps/landing/src/app/(apps)/docs/guides/page.tsx @@ -0,0 +1,68 @@ +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 } 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. +

+ +
+
+ + + ); +} diff --git a/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx new file mode 100644 index 0000000..2d60199 --- /dev/null +++ b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx @@ -0,0 +1,245 @@ +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. +

    +
    +
    • +
+
+ + + ); +} diff --git a/apps/landing/src/app/(apps)/docs/live-urls/page.tsx b/apps/landing/src/app/(apps)/docs/live-urls/page.tsx index adda3b8..68ebe39 100644 --- a/apps/landing/src/app/(apps)/docs/live-urls/page.tsx +++ b/apps/landing/src/app/(apps)/docs/live-urls/page.tsx @@ -28,6 +28,7 @@ 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 }, @@ -65,7 +66,7 @@ export default function LiveUrlsPage() { >
@@ -150,6 +151,41 @@ export default function LiveUrlsPage() { />
+
+ + 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. + +
+
+
Caching Behavior @@ -243,8 +279,11 @@ https://cdn.banatie.app/my-org/my-project/live/blog-images?prompt=...`}
  • •
    - Dynamic placeholders -

    Generate placeholder images during development that match your design intent.

    + AI Placeholder Images +

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

  • diff --git a/apps/landing/src/app/sitemap.ts b/apps/landing/src/app/sitemap.ts index 6283be4..72d3a03 100644 --- a/apps/landing/src/app/sitemap.ts +++ b/apps/landing/src/app/sitemap.ts @@ -72,5 +72,18 @@ export default function sitemap(): MetadataRoute.Sitemap { changeFrequency: 'weekly', priority: 0.7, }, + // Documentation - Guides + { + url: `${baseUrl}/docs/guides/`, + lastModified: new Date(), + changeFrequency: 'weekly', + priority: 0.8, + }, + { + url: `${baseUrl}/docs/guides/placeholder-images/`, + lastModified: new Date(), + changeFrequency: 'weekly', + priority: 0.8, + }, ]; } diff --git a/apps/landing/src/config/docs-seo.ts b/apps/landing/src/config/docs-seo.ts index 127c89c..7f06317 100644 --- a/apps/landing/src/config/docs-seo.ts +++ b/apps/landing/src/config/docs-seo.ts @@ -75,10 +75,18 @@ export const DOCS_PAGES = { }, 'live-urls': { path: '/docs/live-urls/', - title: 'Live URLs — Generate Images from URL | Banatie API Docs', + title: 'Live URLs — AI Placeholder Images & Dynamic Generation | Banatie', 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'], + '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', + ], }, authentication: { path: '/docs/authentication/', @@ -116,4 +124,25 @@ export const DOCS_PAGES = { description: 'Manage live URL scopes. Create, configure, and control live image generation endpoints.', keywords: ['live scopes api', 'live url management', 'scope limits', 'live generation api'], }, + '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', + ], + }, } as const satisfies Record;