From 9b032eaf5acce637dff765da11f5254903efc97c Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sun, 4 Jan 2026 15:04:26 +0700 Subject: [PATCH] doc: updates to live urls --- .../src/app/(apps)/docs/live-urls/page.tsx | 516 +++++++++--------- .../components/docs/layout/DocsSidebar.tsx | 15 +- .../src/components/docs/shared/TipBox.tsx | 74 ++- 3 files changed, 332 insertions(+), 273 deletions(-) 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 68ebe39..9dedbad 100644 --- a/apps/landing/src/app/(apps)/docs/live-urls/page.tsx +++ b/apps/landing/src/app/(apps)/docs/live-urls/page.tsx @@ -6,11 +6,7 @@ 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'; +import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks'; const PAGE = DOCS_PAGES['live-urls']; @@ -42,129 +38,276 @@ export default function LiveUrlsPage() { - - -
- - The Concept - -

- Put your prompt in a URL. Use it directly in an <img src="..."> tag. -

-

- First request generates the image. All subsequent requests serve it from cache instantly. -

-
- -
- - URL Format - - - + -

- Query parameters: -

+
+ + The Concept + +

+ Put your prompt in a URL. Use it directly in an{' '} + <img src="..."> tag. +

+

+ First request generates the image. All subsequent requests serve it from cache + instantly. +

+
- prompt, - Yes, - 'Text description of the image to generate', - ], - [ - aspectRatio, - No, - 'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)', - ], - [ - autoEnhance, - No, - 'Enable prompt enhancement (default: true)', - ], - [ - template, - No, - 'Enhancement template to use', - ], - ]} - /> - +
+ + URL Format + -
- - Try It - -

- Open this URL in your browser: -

+ - +

Query parameters:

-

- Or use it directly in HTML: -

+
prompt, + + Yes + , + 'Text description of the image to generate', + ], + [ + aspectRatio, + + No + , + 'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)', + ], + [ + template, + + No + , + 'Enhancement template to use', + ], + [ + autoEnhance, + + No + , + 'Enable prompt enhancement (default: true)', + ], + ]} + /> + - + + Try It + +

Open this URL in your browser:

+ + + +

Or use it directly in HTML:

+ + `} - language="html" - filename="HTML Usage" - /> - + language="html" + filename="HTML Usage" + /> + -
- - 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. -

+
+ + Caching Behavior + +

+ The response includes an X-Cache-Status header: +

-

Common placeholder sizes:

+
+ HIT + , + 'Image served from cache', + 'Instant (milliseconds)', + ], + [MISS, 'New image generated', 'A few seconds'], + ]} + /> - +

+ Cache hits are unlimited and don't count toward rate limits. Only new generations (cache + MISS) are rate limited. +

+ + +
+ + Scopes + +

+ Scopes organize your live generations. Each scope has its own generation limit. +

+ + + +

+ Scopes are auto-created on first use. You can also pre-configure them via the API to set + custom limits. +

+
+ + {/*
+ + Rate Limits + + +
+ 10 new generations/hour + , + 'Only applies to cache MISS', + ], + [ + 'Per Scope', + + 30 generations + , + 'Configurable via API', + ], + [ + 'Cache Hits', + + Unlimited + , + 'No limits on cached images', + ], + ]} + /> + +
+ + Rate limits protect the service from abuse. For high-volume needs, use the generations + API directly. + +
+ */} + +
+ + Use Cases + + +
    +
  • + • +
    + Static HTML & serverless sites +

    + Deploy HTML pages without configuring asset hosting or CDN infrastructure. Images + are served directly from Banatie's edge network. +

    +
    +
    • +
  • + • +
    + AI-assisted development +

    + Enable AI coding assistants to generate complete HTML or JSX with contextual + images in a single pass—no asset pipeline required. +

    +
    +
    • +
  • + • +
    + Rapid prototyping +

    + Test different visuals without writing backend code. +

    +
    +
    • +
  • + • +
    + AI placeholder images +

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

    +
    +
    • +
  • + • +
    + Personalized content +

    + Generate unique images based on user data or preferences for dynamic, + individualized experiences. +

    +
    +
    • +
+
+ + +
+ + Use Live URLs as intelligent placeholder images during development. Generate contextual + visuals that match your design intent—no more gray boxes or random stock photos. + + +

Common placeholder configurations:

+ + @@ -175,141 +318,18 @@ export default function LiveUrlsPage() { `} - language="html" - filename="Placeholder Examples" - /> + language="html" + filename="Placeholder Examples" + /> -
- - For dark mode interfaces, include "dark theme" or "dark background" in your prompt. - -
-
+
+ + For dark mode interfaces, include "dark theme" or "dark background" in your prompt. + +
+ -
- - Caching Behavior - -

- The response includes an X-Cache-Status header: -

- -
HIT, - 'Image served from cache', - 'Instant (milliseconds)', - ], - [ - MISS, - 'New image generated', - 'A few seconds', - ], - ]} - /> - -

- Cache hits are unlimited and don't count toward rate limits. Only new generations (cache MISS) are rate limited. -

- - -
- - Scopes - -

- Scopes organize your live generations. Each scope has its own generation limit. -

- - - -

- Scopes are auto-created on first use. You can also pre-configure them via the API to set custom limits. -

-
- -
- - Rate Limits - - -
10 new generations/hour, - 'Only applies to cache MISS', - ], - [ - 'Per Scope', - 30 generations, - 'Configurable via API', - ], - [ - 'Cache Hits', - Unlimited, - 'No limits on cached images', - ], - ]} - /> - -
- - Rate limits protect the service from abuse. For high-volume needs, use the generations API directly. - -
- - -
- - Use Cases - - -
    -
  • - • -
    - AI Placeholder Images -

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

    -
    -
    • -
  • - • -
    - Personalized content -

    Create unique images based on user data or preferences.

    -
    -
    • -
  • - • -
    - Rapid prototyping -

    Test different visuals without writing backend code.

    -
    -
    • -
  • - • -
    - HTML emails -

    Include dynamic images in email templates with just a URL.

    -
    -
    • -
-
- + ); } diff --git a/apps/landing/src/components/docs/layout/DocsSidebar.tsx b/apps/landing/src/components/docs/layout/DocsSidebar.tsx index ce69d9a..981afae 100644 --- a/apps/landing/src/components/docs/layout/DocsSidebar.tsx +++ b/apps/landing/src/components/docs/layout/DocsSidebar.tsx @@ -58,6 +58,13 @@ const navigationItems: NavItem[] = [ label: 'Authentication', href: '/docs/authentication/', }, + { + label: 'Guides', + href: '/docs/guides/', + children: [ + { label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' }, + ], + }, { label: 'API Reference', href: '/docs/api/', @@ -69,13 +76,7 @@ const navigationItems: NavItem[] = [ { label: 'Live Scopes', href: '/docs/api/live-scopes/' }, ], }, - { - label: 'Guides', - href: '/docs/guides/', - children: [ - { label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' }, - ], - }, + ]; export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => { diff --git a/apps/landing/src/components/docs/shared/TipBox.tsx b/apps/landing/src/components/docs/shared/TipBox.tsx index 8f7c313..197c71f 100644 --- a/apps/landing/src/components/docs/shared/TipBox.tsx +++ b/apps/landing/src/components/docs/shared/TipBox.tsx @@ -1,18 +1,20 @@ 'use client'; +import { Sparkles, Lightbulb, AlertTriangle, CheckCircle } from 'lucide-react'; + /** - * TipBox Component - Dual Style System + * TipBox Component - Multi-Style Callout System * - * Provides two distinct styles for callouts/notes: + * Provides three distinct styles for callouts/notes: * - * 1. Compact Style (Variant A inspired): - * - Small emoji icon on left + * 1. Compact Style: + * - Lucide icon on left * - Compact padding (p-4) * - Smaller text (text-sm) * - Subtle background with thin border * - Best for minor notes and tips * - * 2. Prominent Style (Adapted from Variant C): + * 2. Prominent Style: * - NO icon * - Larger padding (p-6) * - Larger text (text-base) @@ -20,6 +22,12 @@ * - More visual weight * - Best for important warnings and security notices * + * 3. Protip Style: + * - Sparkles icon with "Pro Tip" label + * - Golden/amber color scheme + * - Premium visual treatment with glow + * - Best for highlighting valuable tips and tricks + * * Usage: * * This is a compact tip @@ -28,10 +36,14 @@ * * This is an important security warning * + * + * + * This is a valuable pro tip + * */ type TipType = 'info' | 'warning' | 'success'; -type TipVariant = 'compact' | 'prominent'; +type TipVariant = 'compact' | 'prominent' | 'protip'; interface TipBoxProps { children: React.ReactNode; @@ -39,10 +51,10 @@ interface TipBoxProps { type?: TipType; } -const icons: Record = { - info: '💡', - warning: '⚠️', - success: '✓', +const icons: Record = { + info: , + warning: , + success: , }; const compactStyles: Record = { @@ -53,23 +65,49 @@ const compactStyles: Record = { const prominentStyles: Record = { info: 'bg-gradient-to-br from-purple-500/5 via-cyan-500/5 to-purple-500/5 border-purple-500/30 text-gray-300 shadow-lg shadow-purple-500/10', - warning: 'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10', - success: 'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10', + warning: + 'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10', + success: + 'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10', }; -export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => { - const isCompact = variant === 'compact'; - const icon = icons[type]; - const styleClass = isCompact ? compactStyles[type] : prominentStyles[type]; +const protipStyle = + 'bg-gradient-to-r from-amber-500/15 via-yellow-500/10 to-amber-500/15 border-amber-400/40 text-amber-100 shadow-lg shadow-amber-500/20 ring-1 ring-amber-400/20'; - if (isCompact) { +export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => { + // Protip variant - premium golden style + if (variant === 'protip') { + return ( +
+ + + +
+ + Pro Tip + +
{children}
+
+
+ ); + } + + const icon = icons[type]; + const styleClass = variant === 'compact' ? compactStyles[type] : prominentStyles[type]; + + // Compact style + if (variant === 'compact') { return (
- {icon} + {icon}
{children}
);