Merge branch 'feature/blog'
This commit is contained in:
commit
070ab0f689
|
|
@ -42,11 +42,9 @@
|
||||||
"PERPLEXITY_TIMEOUT_MS": "600000"
|
"PERPLEXITY_TIMEOUT_MS": "600000"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"browsermcp": {
|
"chrome-devtools": {
|
||||||
"type": "stdio",
|
|
||||||
"command": "npx",
|
"command": "npx",
|
||||||
"args": ["-y", "@browsermcp/mcp@latest"],
|
"args": ["-y", "chrome-devtools-mcp@latest"]
|
||||||
"env": {}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
|
|
@ -0,0 +1,445 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Refined Technical Blog Article</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: "#8b5cf6",
|
||||||
|
"background-light": "#ffffff",
|
||||||
|
"background-dark": "#0B0F19",
|
||||||
|
"surface-light": "#f3f4f6",
|
||||||
|
"surface-dark": "#111827",
|
||||||
|
"border-light": "#e5e7eb",
|
||||||
|
"border-dark": "#1f2937",
|
||||||
|
"text-main-light": "#111827",
|
||||||
|
"text-main-dark": "#f9fafb",
|
||||||
|
"text-muted-light": "#6b7280",
|
||||||
|
"text-muted-dark": "#9ca3af",
|
||||||
|
// New colors for the dark sidebar components
|
||||||
|
"card-dark": "#13141f",
|
||||||
|
"card-border": "#2d2e3e",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
display: ["Inter", "sans-serif"],
|
||||||
|
body: ["Inter", "sans-serif"],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
DEFAULT: "0.5rem",
|
||||||
|
},
|
||||||
|
typography: (theme) => ({
|
||||||
|
DEFAULT: {
|
||||||
|
css: {
|
||||||
|
color: theme('colors.text-main-light'),
|
||||||
|
a: {
|
||||||
|
color: theme('colors.primary'),
|
||||||
|
'&:hover': {
|
||||||
|
color: '#7c3aed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
h1: { color: theme('colors.text-main-light') },
|
||||||
|
h2: { color: theme('colors.text-main-light') },
|
||||||
|
h3: { color: theme('colors.text-main-light') },
|
||||||
|
h4: { color: theme('colors.text-main-light') },
|
||||||
|
strong: { color: theme('colors.text-main-light') },
|
||||||
|
code: { color: theme('colors.primary') },
|
||||||
|
blockquote: {
|
||||||
|
borderLeftColor: theme('colors.primary'),
|
||||||
|
fontStyle: 'italic',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
css: {
|
||||||
|
color: theme('colors.text-main-dark'),
|
||||||
|
a: {
|
||||||
|
color: '#a78bfa',
|
||||||
|
'&:hover': {
|
||||||
|
color: '#c4b5fd',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
h1: { color: theme('colors.text-main-dark') },
|
||||||
|
h2: { color: theme('colors.text-main-dark') },
|
||||||
|
h3: { color: theme('colors.text-main-dark') },
|
||||||
|
h4: { color: theme('colors.text-main-dark') },
|
||||||
|
strong: { color: theme('colors.text-main-dark') },
|
||||||
|
code: { color: theme('colors.primary') },
|
||||||
|
blockquote: { borderLeftColor: theme('colors.primary') },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: #1f2937;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #4b5563;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #6b7280;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background-light text-text-main-light antialiased transition-colors duration-200">
|
||||||
|
<nav class="sticky top-0 z-50 w-full border-b border-white/10 bg-[#0B0F19] text-white">
|
||||||
|
<div class="container mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex items-center gap-2 font-bold text-xl tracking-tight">
|
||||||
|
<div class="h-8 w-8 rounded-lg bg-gradient-to-br from-primary to-pink-500 flex items-center justify-center">
|
||||||
|
<span class="material-icons text-white text-lg">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<span>Banatie</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex ml-10 space-x-6 text-sm font-medium text-gray-300">
|
||||||
|
<a class="hover:text-white transition-colors" href="#">Product</a>
|
||||||
|
<a class="hover:text-white transition-colors" href="#">Solutions</a>
|
||||||
|
<a class="text-white" href="#">Blog</a>
|
||||||
|
<a class="hover:text-white transition-colors" href="#">Docs</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a class="hidden sm:inline-flex items-center justify-center rounded-lg bg-white/10 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background-dark" href="#">
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
<a class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background-dark" href="#">
|
||||||
|
Get Access
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<header class="relative overflow-hidden bg-background-dark text-white pt-12 pb-16 lg:pt-20 lg:pb-24">
|
||||||
|
<div class="absolute inset-0 z-0">
|
||||||
|
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute top-1/2 right-0 w-[500px] h-[500px] bg-pink-600/10 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/2"></div>
|
||||||
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-10 mix-blend-overlay pointer-events-none"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
|
||||||
|
<div class="lg:col-span-7 mb-12 lg:mb-0">
|
||||||
|
<nav aria-label="Breadcrumb" class="flex mb-8 text-xs text-gray-400 font-medium">
|
||||||
|
<ol class="inline-flex items-center space-x-1 md:space-x-2">
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<a class="hover:text-white transition-colors" href="#">Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="material-icons text-[14px] text-gray-600 mx-1">chevron_right</span>
|
||||||
|
<a class="hover:text-white transition-colors" href="#">Engineering</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li aria-current="page">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="material-icons text-[14px] text-gray-600 mx-1">chevron_right</span>
|
||||||
|
<span class="text-gray-200">Optimizing Image Generation Pipelines</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<div class="flex items-center gap-2 mb-8">
|
||||||
|
<span class="inline-flex items-center rounded-full bg-primary/20 px-3 py-1 text-xs font-medium text-primary ring-1 ring-inset ring-primary/30">
|
||||||
|
Engineering
|
||||||
|
</span>
|
||||||
|
<span class="text-gray-400 text-sm flex items-center gap-1 ml-2">
|
||||||
|
<span class="material-icons text-[16px]">schedule</span> 8 min read
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-8 leading-tight text-white">
|
||||||
|
Optimizing Image Generation Pipelines at Scale
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg sm:text-xl text-gray-300 mb-10 max-w-2xl leading-relaxed">
|
||||||
|
Learn how we reduced latency by 40% using edge caching and predictive pre-generation strategies for our high-throughput API endpoints.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center gap-4 border-t border-white/10 pt-8">
|
||||||
|
<img alt="Author Avatar" class="h-12 w-12 rounded-full ring-2 ring-background-dark object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7lcPRCoZjsFsjDPuss98IvtV47CsxB3edKZH1Jy8D7TtC52cTc1lpxd6PZcqHk3lZWGFU5P-8tUB4xVMImKueltROJN-34JuWGPTdU-hEY8Z2r3ooKCANBoeB4QkCv3iZwpjpuwQlz_LJuMRCdiSJwmAfIv839cg90Lw50ekECfdKsH_zdM8g4Ig3oDsHB8sxcdoNbgZXLGdJ5K-P2QhA8FhKI9RBmvtGCLndihNZdRw405BTYJBYoQORCZ0qMfCmggjeD8Nbx2g"/>
|
||||||
|
<div>
|
||||||
|
<div class="font-medium text-white text-base">Alex Chen</div>
|
||||||
|
<div class="text-sm text-gray-400">Senior Infrastructure Engineer • Oct 24, 2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:col-span-5 relative">
|
||||||
|
<div class="relative rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black/40 backdrop-blur-sm">
|
||||||
|
<img alt="Abstract technical graphic showing network nodes" class="w-full h-auto object-cover aspect-[4/3] mix-blend-lighten opacity-90" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQduWhcJrwC_QkSUkZ4bCXD5uh4Co2BxXWYMoN8DgTfrdRDQhMNRXYyPA-aEIkLj61sxdw64W-HhLZU8RGNh_YZ5AV2mZDgI5LArVucyhwJdotgRIDJ-oZDZYXHpD25WfsQiZVYKyDlDKBja610LlPzPJmWKOII3MbybkXab1D9xr93TEJ-AoDxFc7j2Bc_ylOKyqVfTLshdwDQDJNAVbnA-H6AavvVbnMyBUdMnFEnW-lVXROEE0mxhvwTyBqEjf68BMoqrr8sGo"/>
|
||||||
|
<div class="absolute bottom-6 left-6 z-20 bg-gray-900/90 backdrop-blur border border-white/10 rounded-lg p-3 shadow-xl max-w-[280px]">
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="font-mono text-xs text-green-400">
|
||||||
|
$ latency --check<br/>
|
||||||
|
> 45ms (optimized)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="bg-background-light border-t-0 -mt-1 pt-12 lg:pt-16 pb-12">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="lg:grid lg:grid-cols-12 lg:gap-12">
|
||||||
|
<aside class="hidden lg:block lg:col-span-1">
|
||||||
|
<div class="sticky top-28 flex flex-col gap-4 items-center">
|
||||||
|
<button aria-label="Share on Twitter" class="p-2 rounded-full bg-white text-gray-500 hover:text-primary transition-colors border border-gray-200 shadow-sm group">
|
||||||
|
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
|
||||||
|
</button>
|
||||||
|
<button aria-label="Share on LinkedIn" class="p-2 rounded-full bg-white text-gray-500 hover:text-blue-600 transition-colors border border-gray-200 shadow-sm">
|
||||||
|
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
|
||||||
|
</button>
|
||||||
|
<button aria-label="Copy Link" class="p-2 rounded-full bg-white text-gray-500 hover:text-gray-900 transition-colors border border-gray-200 shadow-sm">
|
||||||
|
<span class="material-icons text-[20px]">link</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div class="lg:col-span-8">
|
||||||
|
<article class="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-xl">
|
||||||
|
<p class="lead text-xl text-gray-600 mb-8 font-light">
|
||||||
|
When we first launched Banatie's image generation API, we optimized for quality. But as our user base grew, so did the demand for speed. Here is how we tackled the challenge of delivering AI-generated assets in milliseconds.
|
||||||
|
</p>
|
||||||
|
<h2>The Latency Bottleneck</h2>
|
||||||
|
<p>
|
||||||
|
Our initial architecture was straightforward: a request hits our API gateway, gets queued, processed by a GPU worker, and the resulting image is uploaded to S3. Simple, but slow.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Users integrating our API into real-time applications needed <a href="#">faster response times</a>. We identified two main areas for improvement:
|
||||||
|
</p>
|
||||||
|
<ul class="marker:text-primary">
|
||||||
|
<li><strong>Cold Starts:</strong> Spinning up new GPU instances took 2-3 minutes.</li>
|
||||||
|
<li><strong>Network Overhead:</strong> Round trips between the inference server and storage added 200ms+.</li>
|
||||||
|
</ul>
|
||||||
|
<div class="my-8 rounded-lg border-l-4 border-blue-500 bg-blue-50 p-6 shadow-sm">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="flex-shrink-0 mt-1">
|
||||||
|
<span class="material-icons text-blue-600">info</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="font-bold text-gray-900 mt-0 mb-2">Pro Tip: Analyze your P99</h5>
|
||||||
|
<p class="text-sm text-gray-700 m-0 leading-relaxed">
|
||||||
|
Don't just look at average latency. Your P99 (99th percentile) latency tells you the experience of your users during worst-case scenarios. Optimizing for P99 often yields the most stable system.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2>Implementing Edge Caching</h2>
|
||||||
|
<p>
|
||||||
|
To solve the network overhead, we moved our delivery layer to the edge. By utilizing a global CDN, we could serve cached results instantly for repeated prompts.
|
||||||
|
</p>
|
||||||
|
<div class="my-8 overflow-hidden rounded-xl border border-gray-200 bg-[#1e1e1e] shadow-xl">
|
||||||
|
<div class="flex items-center justify-between border-b border-white/5 bg-[#252526] px-4 py-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="h-3 w-3 rounded-full bg-[#ff5f56]"></div>
|
||||||
|
<div class="h-3 w-3 rounded-full bg-[#ffbd2e]"></div>
|
||||||
|
<div class="h-3 w-3 rounded-full bg-[#27c93f]"></div>
|
||||||
|
</div>
|
||||||
|
<span class="ml-4 text-xs font-mono text-gray-400">middleware/cache-control.ts</span>
|
||||||
|
<div class="flex-grow"></div>
|
||||||
|
<button class="text-xs text-gray-400 hover:text-white transition-colors">Copy</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 overflow-x-auto custom-scrollbar">
|
||||||
|
<pre class="font-mono text-sm leading-relaxed text-[#d4d4d4] m-0 p-0 bg-transparent"><code><span class="text-[#c586c0]">export function</span> <span class="text-[#dcdcaa]">setCacheHeaders</span>(res: Response) {
|
||||||
|
<span class="text-[#6a9955]">// Cache for 1 hour at the edge, validate stale in background</span>
|
||||||
|
res.<span class="text-[#dcdcaa]">setHeader</span>(
|
||||||
|
<span class="text-[#ce9178]'Cache-Control'</span>, <span class=" s-maxage="3600," stale-while-revalidate="600'</span" text-[#ce9178]'public,="">
|
||||||
|
);
|
||||||
|
<span class="text-[#6a9955]">// Custom tag for purging</span>
|
||||||
|
res.<span class="text-[#dcdcaa]">setHeader</span>(<span class="text-[#ce9178]'Surrogate-Key'</span>, <span class=" span="" text-[#ce9178]'gen-api-v1'<="">);
|
||||||
|
}</span></span></code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>The Results</h3>
|
||||||
|
<p>
|
||||||
|
After deploying these changes, we saw a dramatic drop in TTFB (Time To First Byte).
|
||||||
|
</p>
|
||||||
|
<blockquote class="my-10 border-l-4 border-primary bg-gray-50 p-6 text-xl italic font-medium leading-relaxed text-gray-800 shadow-sm rounded-r-lg">
|
||||||
|
"The latency improvements were immediate. Our dashboard loads felt instantaneous compared to the previous version, directly impacting our user retention metrics."
|
||||||
|
</blockquote>
|
||||||
|
<figure class="my-10 group">
|
||||||
|
<div class="overflow-hidden rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl">
|
||||||
|
<img alt="Graph comparing latency before and after optimization" class="w-full h-auto object-cover transform transition-transform duration-500 group-hover:scale-[1.02]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEgg1FA9f6Km5tYQk_92Az_mAXuc6G9ps8KamUSB_VMXwrhcFJLCpgJe7doa6ZdFLQkzJhAcT2OB_E69yQLWyKEPm7Oni0f9YV2_XjH5-jgfAMsv95vBD5r-o35be_5UmmD8-lY40hslbOB075pmwCZ56ISj5VKQARpU5s1zi1nBQvsXWK-5QywJOLp0X8VDhYlB-igMlqCGLhZh5AJ4ufr9hamWVmBiCBa__p7S_hKHjpMxbxs0Qhow_bFjM2vb2eAiUtx3wQjGI"/>
|
||||||
|
</div>
|
||||||
|
<figcaption class="mt-4 flex items-center justify-center gap-2 text-sm text-gray-500">
|
||||||
|
<span class="material-icons text-[16px]">insert_chart</span>
|
||||||
|
<span>Latency reduction over a 24-hour period post-deployment</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<h2>Predictive Pre-Generation</h2>
|
||||||
|
<p>
|
||||||
|
For our enterprise clients, we introduced predictive generation. By analyzing usage patterns, we can pre-warm the cache with variations of commonly requested assets before the user even asks for them.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This is particularly useful for e-commerce clients who update their catalogs at predictable times.
|
||||||
|
</p>
|
||||||
|
<div class="mt-12 pt-8 border-t border-gray-200">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-gray-900">Conclusion</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
Optimization is never finished. We are currently exploring WebAssembly for client-side resizing to further offload our servers. Stay tuned for Part 2!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<aside class="hidden lg:block lg:col-span-3">
|
||||||
|
<div class="sticky top-28 space-y-8">
|
||||||
|
<div class="rounded-xl bg-gray-50 border border-gray-200 p-5 shadow-sm">
|
||||||
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4 border-b border-gray-200 pb-2">
|
||||||
|
On This Page
|
||||||
|
</h4>
|
||||||
|
<nav class="flex flex-col space-y-3 text-sm">
|
||||||
|
<a class="text-gray-900 font-medium pl-2 border-l-2 border-primary transition-colors hover:text-primary" href="#">The Latency Bottleneck</a>
|
||||||
|
<a class="text-gray-500 hover:text-gray-900 pl-2 border-l-2 border-transparent transition-colors" href="#">Implementing Edge Caching</a>
|
||||||
|
<a class="text-gray-500 hover:text-gray-900 pl-2 border-l-2 border-transparent transition-colors" href="#">The Results</a>
|
||||||
|
<a class="text-gray-500 hover:text-gray-900 pl-2 border-l-2 border-transparent transition-colors" href="#">Predictive Pre-Generation</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
|
||||||
|
Related Docs
|
||||||
|
</h4>
|
||||||
|
<div class="space-y-3 text-sm">
|
||||||
|
<a class="flex items-center gap-2 text-gray-600 hover:text-primary transition-colors group" href="#">
|
||||||
|
<span class="material-icons text-[18px] text-gray-400 group-hover:text-primary">description</span>
|
||||||
|
API Caching Policy
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-2 text-gray-600 hover:text-primary transition-colors group" href="#">
|
||||||
|
<span class="material-icons text-[18px] text-gray-400 group-hover:text-primary">terminal</span>
|
||||||
|
CLI Reference
|
||||||
|
</a>
|
||||||
|
<a class="flex items-center gap-2 text-gray-600 hover:text-primary transition-colors group" href="#">
|
||||||
|
<span class="material-icons text-[18px] text-gray-400 group-hover:text-primary">webhook</span>
|
||||||
|
Webhooks Guide
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl border border-gray-700 bg-slate-800 p-6 shadow-xl relative overflow-hidden group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<h4 class="font-bold text-white text-lg mb-2">Build faster with Banatie</h4>
|
||||||
|
<p class="text-sm text-gray-400 mb-6 leading-relaxed">
|
||||||
|
Integrate AI image generation into your app in minutes. Start for free.
|
||||||
|
</p>
|
||||||
|
<a class="block w-full rounded-lg bg-primary px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg hover:bg-violet-600 transition-all transform hover:-translate-y-0.5" href="#">
|
||||||
|
Get API Key
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
|
||||||
|
Related Articles
|
||||||
|
</h4>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<a class="group block rounded-xl border border-gray-200 overflow-hidden bg-white hover:border-primary/50 transition-colors shadow-sm" href="#">
|
||||||
|
<div class="aspect-video w-full bg-gray-100 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-primary/10 group-hover:scale-105 transition-transform duration-500"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center text-primary/40">
|
||||||
|
<span class="material-icons text-4xl">auto_graph</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<h5 class="text-base font-semibold text-gray-900 group-hover:text-primary transition-colors leading-tight mb-2">
|
||||||
|
Understanding Diffusion Models
|
||||||
|
</h5>
|
||||||
|
<p class="text-xs text-gray-500">
|
||||||
|
Oct 12 • 5 min read
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="group block rounded-xl border border-gray-200 overflow-hidden bg-white hover:border-primary/50 transition-colors shadow-sm" href="#">
|
||||||
|
<div class="aspect-video w-full bg-gray-100 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 group-hover:scale-105 transition-transform duration-500"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center text-blue-500/40">
|
||||||
|
<span class="material-icons text-4xl">speed</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<h5 class="text-base font-semibold text-gray-900 group-hover:text-primary transition-colors leading-tight mb-2">
|
||||||
|
Managing API Quotas effectively
|
||||||
|
</h5>
|
||||||
|
<p class="text-xs text-gray-500">
|
||||||
|
Sep 28 • 4 min read
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="bg-background-dark text-gray-400 border-t border-white/10">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
|
||||||
|
<div class="col-span-2 lg:col-span-2">
|
||||||
|
<div class="flex items-center gap-2 font-bold text-white text-xl tracking-tight mb-4">
|
||||||
|
<div class="h-6 w-6 rounded bg-gradient-to-br from-primary to-pink-500 flex items-center justify-center">
|
||||||
|
<span class="material-icons text-white text-xs">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<span>Banatie</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-6 mb-6 max-w-sm">
|
||||||
|
Empowering developers to build the next generation of creative applications with production-ready AI infrastructure.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a class="hover:text-white transition-colors" href="#"><span class="sr-only">Twitter</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg></a>
|
||||||
|
<a class="hover:text-white transition-colors" href="#"><span class="sr-only">GitHub</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" fill-rule="evenodd"></path></svg></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-white mb-4">Product</h3>
|
||||||
|
<ul class="space-y-3 text-sm">
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Features</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Pricing</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">API Reference</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Integrations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-white mb-4">Resources</h3>
|
||||||
|
<ul class="space-y-3 text-sm">
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Documentation</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Guides</a></li>
|
||||||
|
<li><a class="text-white font-medium" href="#">Blog</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Community</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-white mb-4">Company</h3>
|
||||||
|
<ul class="space-y-3 text-sm">
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">About</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Careers</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Legal</a></li>
|
||||||
|
<li><a class="hover:text-white transition-colors" href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-12 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs">
|
||||||
|
<p>© 2023 Banatie Inc. All rights reserved.</p>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<a class="hover:text-white" href="#">Privacy Policy</a>
|
||||||
|
<a class="hover:text-white" href="#">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import {
|
||||||
|
getAllPosts,
|
||||||
|
getPostBySlug,
|
||||||
|
getPostsBySlugs,
|
||||||
|
generatePostMetadata,
|
||||||
|
} from '../utils';
|
||||||
|
import {
|
||||||
|
BlogPostHeader,
|
||||||
|
BlogTOC,
|
||||||
|
BlogSidebar,
|
||||||
|
BlogShareButtons,
|
||||||
|
} from '../_components';
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
params: Promise<{ slug: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateStaticParams() {
|
||||||
|
const posts = getAllPosts();
|
||||||
|
return posts.map((post) => ({ slug: post.slug }));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||||
|
const { slug } = await params;
|
||||||
|
const post = getPostBySlug(slug);
|
||||||
|
if (!post) return {};
|
||||||
|
return generatePostMetadata(post);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function BlogPostPage({ params }: PageProps) {
|
||||||
|
const { slug } = await params;
|
||||||
|
const post = getPostBySlug(slug);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
const { Content, tocItems } = await import(`../_posts/${slug}`);
|
||||||
|
const relatedArticles = getPostsBySlugs(post.relatedArticles);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<BlogPostHeader post={post} />
|
||||||
|
|
||||||
|
<div className="bg-white border-t-0 -mt-1 pt-12 lg:pt-16 pb-12">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="lg:grid lg:grid-cols-12 lg:gap-12">
|
||||||
|
{/* Share buttons column - hidden on mobile */}
|
||||||
|
<aside className="hidden lg:block lg:col-span-1">
|
||||||
|
<BlogShareButtons url={`/blog/${post.slug}`} title={post.title} />
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Article content */}
|
||||||
|
<div className="lg:col-span-8">
|
||||||
|
<article className="max-w-none text-gray-700 leading-relaxed [&>p]:mb-4 [&>ul]:mb-4 [&>ul]:list-disc [&>ul]:pl-6 [&>ul_li]:mb-2 [&>ul]:marker:text-violet-500 [&>ol]:mb-4 [&>ol]:list-decimal [&>ol]:pl-6 [&>a]:text-violet-500 [&>a]:hover:underline [&_strong]:text-gray-900 [&_strong]:font-semibold">
|
||||||
|
<Content />
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar - hidden on mobile */}
|
||||||
|
<aside className="hidden lg:block lg:col-span-3">
|
||||||
|
<div className="sticky top-28 space-y-8">
|
||||||
|
<BlogTOC items={tocItems} />
|
||||||
|
<BlogSidebar
|
||||||
|
relatedArticles={relatedArticles}
|
||||||
|
relatedDocs={post.relatedDocs}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BreadcrumbItem {
|
||||||
|
label: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BlogBreadcrumbsProps {
|
||||||
|
items: BreadcrumbItem[];
|
||||||
|
variant?: 'light' | 'dark';
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogBreadcrumbs = ({
|
||||||
|
items,
|
||||||
|
variant = 'dark',
|
||||||
|
}: BlogBreadcrumbsProps) => {
|
||||||
|
const textColor = variant === 'dark' ? 'text-gray-400' : 'text-gray-600';
|
||||||
|
const hoverColor =
|
||||||
|
variant === 'dark' ? 'hover:text-white' : 'hover:text-gray-900';
|
||||||
|
const activeColor = variant === 'dark' ? 'text-white' : 'text-gray-900';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="flex items-center gap-2 text-sm" aria-label="Breadcrumb">
|
||||||
|
{items.map((item, index) => {
|
||||||
|
const isLast = index === items.length - 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.label} className="flex items-center gap-2">
|
||||||
|
{index > 0 && (
|
||||||
|
<ChevronRight className={`w-4 h-4 ${textColor}`} />
|
||||||
|
)}
|
||||||
|
{item.href && !isLast ? (
|
||||||
|
<Link
|
||||||
|
href={item.href}
|
||||||
|
className={`${textColor} ${hoverColor} transition-colors`}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span className={isLast ? activeColor : textColor}>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
interface BlogCTAProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
buttonText: string;
|
||||||
|
buttonHref: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogCTA = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
buttonText,
|
||||||
|
buttonHref,
|
||||||
|
}: BlogCTAProps) => {
|
||||||
|
return (
|
||||||
|
<div className="my-8 p-6 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg border border-purple-100">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-600 mb-4">{description}</p>
|
||||||
|
<Link
|
||||||
|
href={buttonHref}
|
||||||
|
className="inline-block px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
|
||||||
|
>
|
||||||
|
{buttonText}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import type { BlogPost } from '../types';
|
||||||
|
import { formatDate } from '../utils';
|
||||||
|
|
||||||
|
interface BlogCardProps {
|
||||||
|
post: BlogPost;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogCard = ({ post }: BlogCardProps) => {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={`/blog/${post.slug}`}
|
||||||
|
className="block border border-white/10 rounded-lg overflow-hidden hover:border-purple-500/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="aspect-video relative bg-slate-800">
|
||||||
|
<Image
|
||||||
|
src={post.heroImage}
|
||||||
|
alt={post.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="text-xs text-purple-400 mb-2">{post.category}</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-2">{post.title}</h3>
|
||||||
|
<p className="text-sm text-gray-400 mb-4 line-clamp-2">
|
||||||
|
{post.description}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-3 text-xs text-gray-500">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Image
|
||||||
|
src={post.author.avatar}
|
||||||
|
alt={post.author.name}
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="rounded-full"
|
||||||
|
/>
|
||||||
|
<span>{post.author.name}</span>
|
||||||
|
</div>
|
||||||
|
<span>{formatDate(post.date)}</span>
|
||||||
|
<span>{post.readTime}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
interface BlogCodeBlockProps {
|
||||||
|
children: string;
|
||||||
|
language?: string;
|
||||||
|
filename?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogCodeBlock = ({
|
||||||
|
children,
|
||||||
|
language = 'text',
|
||||||
|
filename,
|
||||||
|
}: BlogCodeBlockProps) => {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(children);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to copy:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const displayName = filename || language;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="my-8 overflow-hidden rounded-xl border border-gray-200 bg-[#1e1e1e] shadow-xl">
|
||||||
|
<div className="flex items-center justify-between border-b border-white/5 bg-[#252526] px-4 py-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="h-3 w-3 rounded-full bg-[#ff5f56]" />
|
||||||
|
<div className="h-3 w-3 rounded-full bg-[#ffbd2e]" />
|
||||||
|
<div className="h-3 w-3 rounded-full bg-[#27c93f]" />
|
||||||
|
</div>
|
||||||
|
{displayName && (
|
||||||
|
<span className="ml-4 text-xs font-mono text-gray-400">
|
||||||
|
{displayName}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="flex-grow" />
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
className="text-xs text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{copied ? 'Copied!' : 'Copy'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 overflow-x-auto blog-scrollbar">
|
||||||
|
<pre className="font-mono text-sm leading-relaxed text-[#d4d4d4] m-0 p-0 bg-transparent">
|
||||||
|
<code>{children}</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
interface BlogHeadingProps {
|
||||||
|
id: string;
|
||||||
|
level: 2 | 3;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogHeading = ({ id, level, children }: BlogHeadingProps) => {
|
||||||
|
const Tag = `h${level}` as const;
|
||||||
|
|
||||||
|
const baseStyles = 'scroll-mt-28 text-gray-900 font-bold tracking-tight';
|
||||||
|
const levelStyles = {
|
||||||
|
2: 'text-2xl mt-12 mb-4 first:mt-0',
|
||||||
|
3: 'text-xl mt-8 mb-3',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tag id={id} className={`${baseStyles} ${levelStyles[level]}`}>
|
||||||
|
{children}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import Image, { StaticImageData } from 'next/image';
|
||||||
|
import { ImageIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BlogImageProps {
|
||||||
|
src: string | StaticImageData;
|
||||||
|
alt: string;
|
||||||
|
caption?: string;
|
||||||
|
fullWidth?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogImage = ({
|
||||||
|
src,
|
||||||
|
alt,
|
||||||
|
caption,
|
||||||
|
fullWidth = false,
|
||||||
|
}: BlogImageProps) => {
|
||||||
|
const isStaticImage = typeof src !== 'string';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<figure className={`my-8 group ${fullWidth ? '-mx-6' : ''}`}>
|
||||||
|
<div className="overflow-hidden rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl">
|
||||||
|
{isStaticImage ? (
|
||||||
|
<Image
|
||||||
|
src={src}
|
||||||
|
alt={alt}
|
||||||
|
placeholder="blur"
|
||||||
|
className="w-full h-auto"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="relative aspect-video bg-gray-100">
|
||||||
|
<Image
|
||||||
|
src={src}
|
||||||
|
alt={alt}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{caption && (
|
||||||
|
<figcaption className="mt-4 flex items-center justify-center gap-2 text-sm text-gray-500">
|
||||||
|
<ImageIcon className="w-4 h-4" />
|
||||||
|
<span>{caption}</span>
|
||||||
|
</figcaption>
|
||||||
|
)}
|
||||||
|
</figure>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { Info, Lightbulb, AlertTriangle } from 'lucide-react';
|
||||||
|
|
||||||
|
type InfoBoxType = 'info' | 'tip' | 'warning';
|
||||||
|
|
||||||
|
interface BlogInfoBoxProps {
|
||||||
|
type?: InfoBoxType;
|
||||||
|
title: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const typeConfig = {
|
||||||
|
info: {
|
||||||
|
icon: Info,
|
||||||
|
borderColor: 'border-blue-500',
|
||||||
|
bgColor: 'bg-blue-50',
|
||||||
|
iconColor: 'text-blue-600',
|
||||||
|
},
|
||||||
|
tip: {
|
||||||
|
icon: Lightbulb,
|
||||||
|
borderColor: 'border-amber-500',
|
||||||
|
bgColor: 'bg-amber-50',
|
||||||
|
iconColor: 'text-amber-600',
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
icon: AlertTriangle,
|
||||||
|
borderColor: 'border-red-500',
|
||||||
|
bgColor: 'bg-red-50',
|
||||||
|
iconColor: 'text-red-600',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const BlogInfoBox = ({
|
||||||
|
type = 'info',
|
||||||
|
title,
|
||||||
|
children,
|
||||||
|
}: BlogInfoBoxProps) => {
|
||||||
|
const config = typeConfig[type];
|
||||||
|
const Icon = config.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`my-8 rounded-lg border-l-4 ${config.borderColor} ${config.bgColor} p-6 shadow-sm`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex-shrink-0 mt-0.5">
|
||||||
|
<Icon className={`w-5 h-5 ${config.iconColor}`} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 className="font-bold text-gray-900 mt-0 mb-2">{title}</h5>
|
||||||
|
<div className="text-sm text-gray-700 leading-relaxed">{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
interface BlogLeadParagraphProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogLeadParagraph = ({ children }: BlogLeadParagraphProps) => {
|
||||||
|
return (
|
||||||
|
<p className="lead text-xl text-gray-600 mb-8 font-light leading-relaxed">
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { Clock } from 'lucide-react';
|
||||||
|
import type { BlogPost } from '../types';
|
||||||
|
import { formatDate } from '../utils';
|
||||||
|
import { BlogBreadcrumbs } from './BlogBreadcrumbs';
|
||||||
|
|
||||||
|
interface BlogPostHeaderProps {
|
||||||
|
post: BlogPost;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogPostHeader = ({ post }: BlogPostHeaderProps) => {
|
||||||
|
return (
|
||||||
|
<header className="relative overflow-hidden bg-[#0B0F19] text-white pt-12 pb-16 lg:pt-20 lg:pb-24">
|
||||||
|
{/* Blur blob decorations */}
|
||||||
|
<div className="absolute inset-0 z-0">
|
||||||
|
<div className="absolute -top-24 -left-24 w-96 h-96 bg-violet-500/20 rounded-full blur-3xl" />
|
||||||
|
<div className="absolute top-1/2 right-0 w-[500px] h-[500px] bg-pink-600/10 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/2" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
|
||||||
|
{/* Left column - Content */}
|
||||||
|
<div className="lg:col-span-7 mb-12 lg:mb-0">
|
||||||
|
<div className="mb-8">
|
||||||
|
<BlogBreadcrumbs
|
||||||
|
items={[
|
||||||
|
{ label: 'Blog', href: '/blog' },
|
||||||
|
{ label: post.category },
|
||||||
|
{ label: post.title },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 mb-8">
|
||||||
|
<span className="inline-flex items-center rounded-full bg-violet-500/20 px-3 py-1 text-xs font-medium text-violet-400 ring-1 ring-inset ring-violet-500/30">
|
||||||
|
{post.category}
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-400 text-sm flex items-center gap-1 ml-2">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
{post.readTime}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-8 leading-tight text-white">
|
||||||
|
{post.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-lg sm:text-xl text-gray-300 mb-10 max-w-2xl leading-relaxed">
|
||||||
|
{post.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 border-t border-white/10 pt-8">
|
||||||
|
<Image
|
||||||
|
src={post.author.avatar}
|
||||||
|
alt={post.author.name}
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
className="rounded-full ring-2 ring-[#0B0F19] object-cover"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-white text-base">
|
||||||
|
{post.author.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
{formatDate(post.date)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right column - Hero image */}
|
||||||
|
<div className="lg:col-span-5 relative">
|
||||||
|
<div className="relative rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black/40 backdrop-blur-sm">
|
||||||
|
<Image
|
||||||
|
src={post.heroImage}
|
||||||
|
alt={post.title}
|
||||||
|
width={800}
|
||||||
|
height={600}
|
||||||
|
className="w-full h-auto object-cover aspect-[4/3]"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
interface BlogPricingProps {
|
||||||
|
free?: string;
|
||||||
|
paid?: string;
|
||||||
|
perImage?: string;
|
||||||
|
sdk?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogPricing = ({ free, paid, perImage, sdk }: BlogPricingProps) => {
|
||||||
|
return (
|
||||||
|
<div className="my-6 rounded-lg border-l-4 border-emerald-500 bg-gray-50 px-5 py-4">
|
||||||
|
<div className="flex flex-wrap gap-x-8 gap-y-2 text-sm">
|
||||||
|
{free && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Free: </span>
|
||||||
|
<span className="font-semibold text-gray-900">{free}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{paid && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Paid: </span>
|
||||||
|
<span className="font-semibold text-gray-900">{paid}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{perImage && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Per image: </span>
|
||||||
|
<span className="font-bold text-emerald-600 text-base">{perImage}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{sdk && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">SDK: </span>
|
||||||
|
<span className="font-medium text-gray-700">{sdk}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
interface BlogQuoteProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
author?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogQuote = ({ children, author }: BlogQuoteProps) => {
|
||||||
|
return (
|
||||||
|
<blockquote className="my-10 border-l-4 border-violet-500 bg-gray-50 p-6 text-xl italic font-medium leading-relaxed text-gray-800 shadow-sm rounded-r-lg">
|
||||||
|
<p className="m-0">{children}</p>
|
||||||
|
{author && (
|
||||||
|
<footer className="mt-4 text-sm text-gray-500 font-normal not-italic">
|
||||||
|
— {author}
|
||||||
|
</footer>
|
||||||
|
)}
|
||||||
|
</blockquote>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { ExternalLink } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BlogServiceLinkProps {
|
||||||
|
href: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogServiceLink = ({ href, children }: BlogServiceLinkProps) => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 text-violet-600 hover:text-violet-700 font-medium mb-4 group"
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
|
||||||
|
<span className="hover:underline">{children}</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Link as LinkIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BlogShareButtonsProps {
|
||||||
|
url?: string;
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogShareButtons = ({ url, title }: BlogShareButtonsProps) => {
|
||||||
|
const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
|
||||||
|
const shareTitle = title || '';
|
||||||
|
|
||||||
|
const handleCopyLink = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(shareUrl);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to copy link:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(shareTitle)}`;
|
||||||
|
const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sticky top-28 flex flex-col gap-4 items-center">
|
||||||
|
<a
|
||||||
|
href={twitterUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Share on Twitter"
|
||||||
|
className="p-2 rounded-full bg-white text-gray-500 hover:text-violet-500 transition-colors border border-gray-200 shadow-sm"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={linkedinUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Share on LinkedIn"
|
||||||
|
className="p-2 rounded-full bg-white text-gray-500 hover:text-blue-600 transition-colors border border-gray-200 shadow-sm"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
|
||||||
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleCopyLink}
|
||||||
|
aria-label="Copy Link"
|
||||||
|
className="p-2 rounded-full bg-white text-gray-500 hover:text-gray-900 transition-colors border border-gray-200 shadow-sm"
|
||||||
|
>
|
||||||
|
<LinkIcon className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { BookOpen, Code, FileText, Terminal, Webhook } from 'lucide-react';
|
||||||
|
import type { BlogPost, RelatedDoc } from '../types';
|
||||||
|
import { formatDate } from '../utils';
|
||||||
|
|
||||||
|
interface BlogSidebarProps {
|
||||||
|
relatedArticles: BlogPost[];
|
||||||
|
relatedDocs: RelatedDoc[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||||
|
book: BookOpen,
|
||||||
|
code: Code,
|
||||||
|
file: FileText,
|
||||||
|
terminal: Terminal,
|
||||||
|
webhook: Webhook,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const BlogSidebar = ({
|
||||||
|
relatedArticles,
|
||||||
|
relatedDocs,
|
||||||
|
}: BlogSidebarProps) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{relatedDocs.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
|
||||||
|
Related Docs
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
{relatedDocs.map((doc) => {
|
||||||
|
const Icon = iconMap[doc.icon] || FileText;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={doc.href}
|
||||||
|
href={doc.href}
|
||||||
|
className="flex items-center gap-2 text-gray-600 hover:text-violet-500 transition-colors group"
|
||||||
|
>
|
||||||
|
<Icon className="w-[18px] h-[18px] text-gray-400 group-hover:text-violet-500" />
|
||||||
|
<span>{doc.title}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="rounded-xl border border-gray-700 bg-slate-800 p-6 shadow-xl relative overflow-hidden group">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-violet-500/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
|
||||||
|
<div className="relative z-10">
|
||||||
|
<h4 className="font-bold text-white text-lg mb-2">
|
||||||
|
Build faster with Banatie
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-400 mb-6 leading-relaxed">
|
||||||
|
Integrate AI image generation into your app in minutes. Start for
|
||||||
|
free.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/#get-access"
|
||||||
|
className="block w-full rounded-lg bg-violet-500 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-lg hover:bg-violet-600 transition-all transform hover:-translate-y-0.5"
|
||||||
|
>
|
||||||
|
Get API Key
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{relatedArticles.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
|
||||||
|
Related Articles
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{relatedArticles.map((article) => (
|
||||||
|
<Link
|
||||||
|
key={article.slug}
|
||||||
|
href={`/blog/${article.slug}`}
|
||||||
|
className="group block rounded-xl border border-gray-200 overflow-hidden bg-white hover:border-violet-500/50 transition-colors shadow-sm"
|
||||||
|
>
|
||||||
|
<div className="aspect-video w-full bg-gray-100 relative overflow-hidden">
|
||||||
|
{article.heroImage ? (
|
||||||
|
<Image
|
||||||
|
src={article.heroImage}
|
||||||
|
alt={article.title}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-violet-500/10 to-pink-500/10 group-hover:scale-105 transition-transform duration-500" />
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center text-violet-500/40">
|
||||||
|
<FileText className="w-10 h-10" />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<h5 className="text-base font-semibold text-gray-900 group-hover:text-violet-500 transition-colors leading-tight mb-2">
|
||||||
|
{article.title}
|
||||||
|
</h5>
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
{formatDate(article.date)} · {article.readTime}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { ChevronDown } from 'lucide-react';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
interface BlogTOCProps {
|
||||||
|
items: TocItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogTOC = ({ items }: BlogTOCProps) => {
|
||||||
|
const [activeId, setActiveId] = useState<string>('');
|
||||||
|
const [isExpanded, setIsExpanded] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setActiveId(entry.target.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ rootMargin: '-20% 0px -35% 0px' }
|
||||||
|
);
|
||||||
|
|
||||||
|
items.forEach((item) => {
|
||||||
|
const element = document.getElementById(item.id);
|
||||||
|
if (element) observer.observe(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [items]);
|
||||||
|
|
||||||
|
const scrollToSection = (id: string) => {
|
||||||
|
const element = document.getElementById(id);
|
||||||
|
if (element) {
|
||||||
|
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (items.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-xl bg-gray-50 border border-gray-200 p-5 shadow-sm">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
className="w-full flex items-center justify-between text-xs font-bold text-gray-500 uppercase tracking-wider border-b border-gray-200 pb-2 hover:text-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<span>On This Page</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={`w-4 h-4 transition-transform duration-200 ${
|
||||||
|
isExpanded ? '' : '-rotate-90'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
className={`overflow-hidden transition-all duration-300 ${
|
||||||
|
isExpanded ? 'max-h-[2000px] opacity-100 mt-4' : 'max-h-0 opacity-0 mt-0'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<nav className="flex flex-col space-y-3 text-sm" aria-label="Table of contents">
|
||||||
|
{items.map((item) => {
|
||||||
|
const isActive = activeId === item.id;
|
||||||
|
const isH3 = item.level === 3;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => scrollToSection(item.id)}
|
||||||
|
className={`
|
||||||
|
text-left pl-2 border-l-2 transition-colors
|
||||||
|
${isH3 ? 'ml-3' : ''}
|
||||||
|
${
|
||||||
|
isActive
|
||||||
|
? 'text-gray-900 font-medium border-violet-500'
|
||||||
|
: 'text-gray-500 border-transparent hover:text-gray-900'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{item.text}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
export { BlogCard } from './BlogCard';
|
||||||
|
export { BlogTOC } from './BlogTOC';
|
||||||
|
export { BlogPostHeader } from './BlogPostHeader';
|
||||||
|
export { BlogBreadcrumbs } from './BlogBreadcrumbs';
|
||||||
|
export { BlogSidebar } from './BlogSidebar';
|
||||||
|
export { BlogHeading } from './BlogHeading';
|
||||||
|
export { BlogImage } from './BlogImage';
|
||||||
|
export { BlogQuote } from './BlogQuote';
|
||||||
|
export { BlogCTA } from './BlogCTA';
|
||||||
|
export { BlogCodeBlock } from './BlogCodeBlock';
|
||||||
|
export { BlogShareButtons } from './BlogShareButtons';
|
||||||
|
export { BlogInfoBox } from './BlogInfoBox';
|
||||||
|
export { BlogLeadParagraph } from './BlogLeadParagraph';
|
||||||
|
export { BlogServiceLink } from './BlogServiceLink';
|
||||||
|
export { BlogPricing } from './BlogPricing';
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import { BlogHeading, BlogQuote, BlogCTA, BlogCodeBlock } from '../_components';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
export const tocItems: TocItem[] = [
|
||||||
|
{ id: 'overview', text: 'Overview', level: 2 },
|
||||||
|
{ id: 'authentication', text: 'Authentication Setup', level: 2 },
|
||||||
|
{ id: 'error-handling', text: 'Error Handling', level: 2 },
|
||||||
|
{ id: 'rate-limits', text: 'Rate Limits', level: 3 },
|
||||||
|
{ id: 'caching', text: 'Caching Strategies', level: 2 },
|
||||||
|
{ id: 'conclusion', text: 'Conclusion', level: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Content = () => (
|
||||||
|
<>
|
||||||
|
<BlogHeading id="overview" level={2}>
|
||||||
|
Overview
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Integrating the Banatie API into your application opens up a world of
|
||||||
|
possibilities for dynamic image generation. This guide covers the best
|
||||||
|
practices for a smooth integration.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Whether you are building a web application, mobile app, or backend service,
|
||||||
|
these tips will help you get the most out of the API.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="authentication" level={2}>
|
||||||
|
Authentication Setup
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
All API requests require authentication via an API key. Here is how to
|
||||||
|
set it up properly:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCodeBlock language="javascript">
|
||||||
|
{`const headers = {
|
||||||
|
'X-API-Key': process.env.BANATIE_API_KEY,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch('https://api.banatie.app/text-to-image', {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify({ prompt: 'modern office' })
|
||||||
|
});`}
|
||||||
|
</BlogCodeBlock>
|
||||||
|
|
||||||
|
<BlogQuote>
|
||||||
|
Never expose your API key in client-side code. Always make API calls
|
||||||
|
from your server.
|
||||||
|
</BlogQuote>
|
||||||
|
|
||||||
|
<BlogHeading id="error-handling" level={2}>
|
||||||
|
Error Handling
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Proper error handling ensures your application gracefully handles
|
||||||
|
failures. The API returns standard HTTP status codes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCodeBlock language="javascript">
|
||||||
|
{`try {
|
||||||
|
const response = await generateImage(prompt);
|
||||||
|
if (!response.ok) {
|
||||||
|
if (response.status === 429) {
|
||||||
|
// Rate limited - implement backoff
|
||||||
|
}
|
||||||
|
throw new Error(\`API error: \${response.status}\`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Image generation failed:', error);
|
||||||
|
// Show fallback image
|
||||||
|
}`}
|
||||||
|
</BlogCodeBlock>
|
||||||
|
|
||||||
|
<BlogHeading id="rate-limits" level={3}>
|
||||||
|
Rate Limits
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
The API has rate limits to ensure fair usage. Plan your requests
|
||||||
|
accordingly and implement exponential backoff for retries.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="caching" level={2}>
|
||||||
|
Caching Strategies
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Caching generated images can significantly reduce API calls and improve
|
||||||
|
response times. Consider caching at multiple levels.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Use CDN caching for frequently requested images and local caching for
|
||||||
|
user-specific content.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="conclusion" level={2}>
|
||||||
|
Conclusion
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Following these best practices will help you build a robust integration
|
||||||
|
with the Banatie API. Start small, test thoroughly, and scale as needed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCTA
|
||||||
|
title="Ready to integrate?"
|
||||||
|
description="Get your API key and start building today."
|
||||||
|
buttonText="Get API Access"
|
||||||
|
buttonHref="/#get-access"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { BlogHeading, BlogQuote, BlogCTA } from '../_components';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
export const tocItems: TocItem[] = [
|
||||||
|
{ id: 'introduction', text: 'Introduction', level: 2 },
|
||||||
|
{ id: 'traditional-workflow', text: 'Traditional Workflow Problems', level: 2 },
|
||||||
|
{ id: 'ai-powered-approach', text: 'AI-Powered Approach', level: 2 },
|
||||||
|
{ id: 'figma-integration', text: 'Figma Integration', level: 3 },
|
||||||
|
{ id: 'time-savings', text: 'Time Savings', level: 2 },
|
||||||
|
{ id: 'tips', text: 'Pro Tips', level: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Content = () => (
|
||||||
|
<>
|
||||||
|
<BlogHeading id="introduction" level={2}>
|
||||||
|
Introduction
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Design workflows have traditionally been bottlenecked by the need for
|
||||||
|
placeholder content. Finding the right stock photos or waiting for
|
||||||
|
actual assets can slow down the creative process significantly.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
AI-generated placeholders offer a new paradigm where designers can
|
||||||
|
instantly visualize their concepts with contextually relevant images.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="traditional-workflow" level={2}>
|
||||||
|
Traditional Workflow Problems
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
The conventional design process often involves searching through stock
|
||||||
|
photo libraries, downloading images, and then realizing they do not quite
|
||||||
|
fit the vision. This cycle repeats multiple times per project.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogQuote author="Design Lead at a Fortune 500">
|
||||||
|
We used to spend hours just finding the right placeholder images.
|
||||||
|
Now we describe what we need and get it instantly.
|
||||||
|
</BlogQuote>
|
||||||
|
|
||||||
|
<BlogHeading id="ai-powered-approach" level={2}>
|
||||||
|
AI-Powered Approach
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
With AI-generated images, you simply describe what you need. Want a
|
||||||
|
hero image showing a team collaboration scene? Just ask for it. Need
|
||||||
|
product mockups with specific aesthetics? Describe the style.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
This approach keeps you in the creative flow instead of breaking
|
||||||
|
concentration to hunt for assets.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="figma-integration" level={3}>
|
||||||
|
Figma Integration
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Many designers are using Banatie URLs directly in Figma prototypes.
|
||||||
|
This means your mockups automatically show relevant images without
|
||||||
|
manual image placement.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="time-savings" level={2}>
|
||||||
|
Time Savings
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Teams report saving 2-4 hours per project on asset hunting alone.
|
||||||
|
That time can now be spent on actual design work and iteration.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
The quick iteration cycle also means stakeholder feedback sessions
|
||||||
|
are more productive since designs look more complete.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="tips" level={2}>
|
||||||
|
Pro Tips
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Start with broad prompts and refine as needed. Use consistent style
|
||||||
|
descriptors across your project for visual coherence. Create a prompt
|
||||||
|
library for commonly used image types in your brand.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCTA
|
||||||
|
title="Transform your workflow"
|
||||||
|
description="Join designers who are already saving hours on every project."
|
||||||
|
buttonText="Start Free Trial"
|
||||||
|
buttonHref="/#get-access"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
import { BlogHeading, BlogQuote, BlogCTA } from '../_components';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
export const tocItems: TocItem[] = [
|
||||||
|
{ id: 'introduction', text: 'Introduction', level: 2 },
|
||||||
|
{ id: 'quality-settings', text: 'Quality Settings', level: 2 },
|
||||||
|
{ id: 'resolution', text: 'Resolution Guidelines', level: 3 },
|
||||||
|
{ id: 'consistency', text: 'Maintaining Consistency', level: 2 },
|
||||||
|
{ id: 'performance', text: 'Performance Optimization', level: 2 },
|
||||||
|
{ id: 'dos-and-donts', text: 'Dos and Donts', level: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Content = () => (
|
||||||
|
<>
|
||||||
|
<BlogHeading id="introduction" level={2}>
|
||||||
|
Introduction
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Generating high-quality AI images consistently requires understanding
|
||||||
|
both the capabilities and limitations of the technology. This guide
|
||||||
|
shares proven practices from thousands of successful generations.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Following these guidelines will help you achieve better results with
|
||||||
|
fewer iterations.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="quality-settings" level={2}>
|
||||||
|
Quality Settings
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
The API offers different quality tiers. Higher quality settings produce
|
||||||
|
better images but take longer to generate. Choose based on your use case.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
For prototyping and development, standard quality is often sufficient.
|
||||||
|
Reserve high quality for production assets.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="resolution" level={3}>
|
||||||
|
Resolution Guidelines
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Match the resolution to your actual display size. Generating 4K images
|
||||||
|
for thumbnail displays wastes resources and slows performance.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogQuote>
|
||||||
|
Start with the exact dimensions you need. You can always regenerate
|
||||||
|
at higher resolution for final production.
|
||||||
|
</BlogQuote>
|
||||||
|
|
||||||
|
<BlogHeading id="consistency" level={2}>
|
||||||
|
Maintaining Consistency
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
For projects requiring visual consistency across multiple images, use
|
||||||
|
consistent style descriptors and seed values. Document your successful
|
||||||
|
prompts for reuse.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Creating a style guide for your project prompts helps team members
|
||||||
|
generate images that feel cohesive.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="performance" level={2}>
|
||||||
|
Performance Optimization
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Cache generated images when possible. Use lazy loading for below-the-fold
|
||||||
|
images. Consider generating images ahead of time for predictable content.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Batch similar requests together when generating multiple images to
|
||||||
|
optimize API usage.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="dos-and-donts" level={2}>
|
||||||
|
Dos and Donts
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
<strong>Do:</strong> Test prompts iteratively, use specific descriptors,
|
||||||
|
cache results, match resolution to need.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
<strong>Do not:</strong> Use vague prompts, generate unnecessarily high
|
||||||
|
resolutions, skip error handling, expose API keys client-side.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCTA
|
||||||
|
title="Put these practices to work"
|
||||||
|
description="Start generating professional-quality images today."
|
||||||
|
buttonText="Get Started"
|
||||||
|
buttonHref="/#get-access"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 843 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 721 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 762 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 687 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 501 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,90 @@
|
||||||
|
import {
|
||||||
|
BlogHeading,
|
||||||
|
BlogImage,
|
||||||
|
BlogQuote,
|
||||||
|
BlogCTA,
|
||||||
|
BlogCodeBlock,
|
||||||
|
} from '../_components';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
export const tocItems: TocItem[] = [
|
||||||
|
{ id: 'introduction', text: 'Introduction', level: 2 },
|
||||||
|
{ id: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 },
|
||||||
|
{ id: 'getting-started', text: 'Getting Started', level: 2 },
|
||||||
|
{ id: 'api-usage', text: 'API Usage', level: 3 },
|
||||||
|
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Content = () => (
|
||||||
|
<>
|
||||||
|
<BlogHeading id="introduction" level={2}>
|
||||||
|
Introduction
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Placeholder images have been a staple of web development for decades.
|
||||||
|
From simple gray boxes to stock photos, developers have always needed
|
||||||
|
a way to visualize layouts before final content is ready.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Banatie takes this concept to the next level with AI-generated
|
||||||
|
contextual placeholders that actually match your design intent.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="why-ai-placeholders" level={2}>
|
||||||
|
Why AI Placeholders?
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Traditional placeholder services give you random images that rarely
|
||||||
|
match your actual content needs. With AI-powered placeholders, you get
|
||||||
|
images that are contextually relevant to your project.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogQuote author="A Developer">
|
||||||
|
Finally, placeholder images that actually look like what the final
|
||||||
|
product will have. No more explaining to clients why there are cats
|
||||||
|
everywhere.
|
||||||
|
</BlogQuote>
|
||||||
|
|
||||||
|
<BlogHeading id="getting-started" level={2}>
|
||||||
|
Getting Started
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Getting started with Banatie is simple. You can use our CDN URLs
|
||||||
|
directly in your HTML or integrate with our API for more control.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="api-usage" level={3}>
|
||||||
|
API Usage
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Here is a simple example of how to use Banatie in your HTML:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCodeBlock language="html">
|
||||||
|
{`<img
|
||||||
|
src="https://cdn.banatie.app/demo/live/hero?prompt=modern+office+workspace"
|
||||||
|
alt="Office workspace"
|
||||||
|
/>`}
|
||||||
|
</BlogCodeBlock>
|
||||||
|
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
The prompt parameter tells our AI what kind of image to generate.
|
||||||
|
Be descriptive for best results!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="next-steps" level={2}>
|
||||||
|
Next Steps
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Ready to start using AI-powered placeholders in your projects?
|
||||||
|
Check out our documentation for more detailed examples and API reference.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCTA
|
||||||
|
title="Ready to get started?"
|
||||||
|
description="Join our early access program and start generating contextual placeholder images today."
|
||||||
|
buttonText="Get Early Access"
|
||||||
|
buttonHref="/#get-access"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import { BlogHeading, BlogQuote, BlogCTA, BlogCodeBlock } from '../_components';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
export const tocItems: TocItem[] = [
|
||||||
|
{ id: 'what-is-prompt-engineering', text: 'What is Prompt Engineering?', level: 2 },
|
||||||
|
{ id: 'basic-structure', text: 'Basic Prompt Structure', level: 2 },
|
||||||
|
{ id: 'subject', text: 'Subject', level: 3 },
|
||||||
|
{ id: 'style', text: 'Style', level: 3 },
|
||||||
|
{ id: 'context', text: 'Context', level: 3 },
|
||||||
|
{ id: 'common-mistakes', text: 'Common Mistakes', level: 2 },
|
||||||
|
{ id: 'advanced-techniques', text: 'Advanced Techniques', level: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Content = () => (
|
||||||
|
<>
|
||||||
|
<BlogHeading id="what-is-prompt-engineering" level={2}>
|
||||||
|
What is Prompt Engineering?
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Prompt engineering is the art of crafting text descriptions that guide
|
||||||
|
AI models to generate the exact images you envision. It is a skill that
|
||||||
|
improves with practice and understanding of how AI interprets language.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Good prompts are specific, descriptive, and structured in a way that
|
||||||
|
the AI can parse effectively.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="basic-structure" level={2}>
|
||||||
|
Basic Prompt Structure
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
A well-structured prompt typically includes three key elements: subject,
|
||||||
|
style, and context. Let us break down each component.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="subject" level={3}>
|
||||||
|
Subject
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
The subject is what you want to see in the image. Be specific about
|
||||||
|
the main focus.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCodeBlock language="text">
|
||||||
|
{`Bad: "a person"
|
||||||
|
Good: "a young professional woman working at a laptop"
|
||||||
|
Better: "a young professional woman in business casual attire working at a MacBook in a modern office"`}
|
||||||
|
</BlogCodeBlock>
|
||||||
|
|
||||||
|
<BlogHeading id="style" level={3}>
|
||||||
|
Style
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Style descriptors help define the visual aesthetic of the generated
|
||||||
|
image.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCodeBlock language="text">
|
||||||
|
{`Style keywords:
|
||||||
|
- "photorealistic" - for lifelike images
|
||||||
|
- "minimalist" - clean, simple compositions
|
||||||
|
- "vibrant colors" - saturated, energetic palette
|
||||||
|
- "soft lighting" - gentle, diffused light`}
|
||||||
|
</BlogCodeBlock>
|
||||||
|
|
||||||
|
<BlogHeading id="context" level={3}>
|
||||||
|
Context
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Context provides background information and setting details.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogQuote>
|
||||||
|
The more context you provide, the more aligned the result will be
|
||||||
|
with your vision. But avoid being so specific that you constrain
|
||||||
|
the AI too much.
|
||||||
|
</BlogQuote>
|
||||||
|
|
||||||
|
<BlogHeading id="common-mistakes" level={2}>
|
||||||
|
Common Mistakes
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Avoid vague prompts like "something nice" or overly complex prompts
|
||||||
|
with contradicting elements. Do not list too many subjects as this
|
||||||
|
confuses the generation.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Another common mistake is not iterating. Your first prompt rarely
|
||||||
|
produces the perfect result - refine and adjust.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="advanced-techniques" level={2}>
|
||||||
|
Advanced Techniques
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
As you gain experience, try techniques like negative prompting
|
||||||
|
(specifying what you do not want), weighted terms, and compositional
|
||||||
|
guidance.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Keep a prompt journal to track what works for your specific use cases.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCTA
|
||||||
|
title="Practice makes perfect"
|
||||||
|
description="Start experimenting with prompts and see immediate results."
|
||||||
|
buttonText="Try It Now"
|
||||||
|
buttonHref="/#get-access"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import { BlogHeading, BlogQuote, BlogCTA, BlogCodeBlock } from '../_components';
|
||||||
|
import type { TocItem } from '../types';
|
||||||
|
|
||||||
|
export const tocItems: TocItem[] = [
|
||||||
|
{ id: 'overview', text: 'Overview', level: 2 },
|
||||||
|
{ id: 'product-mockups', text: 'Product Mockups', level: 2 },
|
||||||
|
{ id: 'category-banners', text: 'Category Banners', level: 2 },
|
||||||
|
{ id: 'lifestyle-images', text: 'Lifestyle Images', level: 3 },
|
||||||
|
{ id: 'ab-testing', text: 'A/B Testing Visuals', level: 2 },
|
||||||
|
{ id: 'implementation', text: 'Implementation Example', level: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Content = () => (
|
||||||
|
<>
|
||||||
|
<BlogHeading id="overview" level={2}>
|
||||||
|
Overview
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
E-commerce platforms face unique challenges when it comes to visual
|
||||||
|
content. From product listings to marketing banners, the need for
|
||||||
|
high-quality images is constant and demanding.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
AI-generated placeholders offer e-commerce teams a way to prototype,
|
||||||
|
test, and iterate faster than ever before.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="product-mockups" level={2}>
|
||||||
|
Product Mockups
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Before product photography is complete, use AI to generate realistic
|
||||||
|
product mockups. This allows the development and marketing teams to
|
||||||
|
work in parallel rather than waiting for final assets.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogQuote author="E-commerce Director">
|
||||||
|
We launched our new collection page two weeks earlier by using AI
|
||||||
|
placeholders during development. Real photos were swapped in seamlessly
|
||||||
|
when ready.
|
||||||
|
</BlogQuote>
|
||||||
|
|
||||||
|
<BlogHeading id="category-banners" level={2}>
|
||||||
|
Category Banners
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Category and promotional banners can be prototyped instantly. Test
|
||||||
|
different visual themes before committing to professional photo shoots.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
This is especially valuable for seasonal campaigns where timing is
|
||||||
|
critical.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="lifestyle-images" level={3}>
|
||||||
|
Lifestyle Images
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Lifestyle images showing products in use are expensive to produce.
|
||||||
|
AI can generate concept images to validate ideas before investing
|
||||||
|
in professional shoots.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="ab-testing" level={2}>
|
||||||
|
A/B Testing Visuals
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Test different visual styles with real users before full production.
|
||||||
|
Generate multiple variations of hero images and measure which performs
|
||||||
|
better.
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
This data-driven approach to visual design can significantly improve
|
||||||
|
conversion rates.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogHeading id="implementation" level={2}>
|
||||||
|
Implementation Example
|
||||||
|
</BlogHeading>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Here is a simple example of using Banatie for product category images:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<BlogCodeBlock language="html">
|
||||||
|
{`<!-- Category Banner -->
|
||||||
|
<div class="category-banner">
|
||||||
|
<img
|
||||||
|
src="https://cdn.banatie.app/demo/live/banner?prompt=summer+fashion+collection+minimal+style"
|
||||||
|
alt="Summer Collection"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product Grid Placeholder -->
|
||||||
|
<div class="product-image">
|
||||||
|
<img
|
||||||
|
src="https://cdn.banatie.app/demo/live/product?prompt=white+sneakers+product+photo"
|
||||||
|
alt="Product"
|
||||||
|
/>
|
||||||
|
</div>`}
|
||||||
|
</BlogCodeBlock>
|
||||||
|
|
||||||
|
<BlogCTA
|
||||||
|
title="Accelerate your e-commerce development"
|
||||||
|
description="Join online stores already using AI placeholders to ship faster."
|
||||||
|
buttonText="Get Early Access"
|
||||||
|
buttonHref="/#get-access"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
import type { BlogPost } from './types';
|
||||||
|
|
||||||
|
export const blogPosts: BlogPost[] = [
|
||||||
|
{
|
||||||
|
slug: 'midjourney-alternatives',
|
||||||
|
title: 'Best Midjourney Alternatives in 2026',
|
||||||
|
description:
|
||||||
|
'19 AI image generators compared: UI platforms, API services, open-source options, and aggregators. Find the right tool for your needs.',
|
||||||
|
heroImage: '/blog/midjourney-alternatives-hero.png',
|
||||||
|
category: 'guides',
|
||||||
|
date: '2026-01-18',
|
||||||
|
author: {
|
||||||
|
name: 'Banatie Team',
|
||||||
|
avatar: '/blog/authors/banatie-team.png',
|
||||||
|
},
|
||||||
|
readTime: '25 min',
|
||||||
|
relatedArticles: ['api-integration-tips', 'placeholder-images-guide'],
|
||||||
|
relatedDocs: [
|
||||||
|
{ title: 'API Reference', href: '/docs/api/', icon: 'code' },
|
||||||
|
{ title: 'MCP Integration', href: '/docs/guides/', icon: 'terminal' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// slug: 'placeholder-images-guide',
|
||||||
|
// title: 'Getting Started with AI Placeholder Images',
|
||||||
|
// description:
|
||||||
|
// 'Learn how to use Banatie to generate contextual placeholder images for your projects.',
|
||||||
|
// heroImage: '/blog/placeholder-guide-hero.jpg',
|
||||||
|
// category: 'guides',
|
||||||
|
// date: '2025-01-15',
|
||||||
|
// author: {
|
||||||
|
// name: 'Banatie Team',
|
||||||
|
// avatar: '/blog/authors/default.jpg',
|
||||||
|
// },
|
||||||
|
// readTime: '5 min',
|
||||||
|
// relatedArticles: ['api-integration-tips', 'prompt-engineering-basics'],
|
||||||
|
// relatedDocs: [
|
||||||
|
// { title: 'API Reference', href: '/docs/api/', icon: 'code' },
|
||||||
|
// { title: 'Quick Start', href: '/docs/guides/', icon: 'book' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// slug: 'api-integration-tips',
|
||||||
|
// title: 'API Integration Tips for Developers',
|
||||||
|
// description:
|
||||||
|
// 'Best practices for integrating Banatie API into your applications and workflows.',
|
||||||
|
// heroImage: '/blog/api-tips-hero.jpg',
|
||||||
|
// category: 'tutorials',
|
||||||
|
// date: '2025-01-12',
|
||||||
|
// author: {
|
||||||
|
// name: 'Banatie Team',
|
||||||
|
// avatar: '/blog/authors/default.jpg',
|
||||||
|
// },
|
||||||
|
// readTime: '7 min',
|
||||||
|
// relatedArticles: ['placeholder-images-guide', 'image-generation-best-practices'],
|
||||||
|
// relatedDocs: [
|
||||||
|
// { title: 'API Reference', href: '/docs/api/', icon: 'code' },
|
||||||
|
// { title: 'Authentication', href: '/docs/guides/', icon: 'book' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// slug: 'design-workflow-optimization',
|
||||||
|
// title: 'Optimizing Your Design Workflow with AI Images',
|
||||||
|
// description:
|
||||||
|
// 'How designers can speed up their prototyping process using AI-generated placeholders.',
|
||||||
|
// heroImage: '/blog/design-workflow-hero.jpg',
|
||||||
|
// category: 'guides',
|
||||||
|
// date: '2025-01-10',
|
||||||
|
// author: {
|
||||||
|
// name: 'Banatie Team',
|
||||||
|
// avatar: '/blog/authors/default.jpg',
|
||||||
|
// },
|
||||||
|
// readTime: '6 min',
|
||||||
|
// relatedArticles: ['use-cases-ecommerce', 'placeholder-images-guide'],
|
||||||
|
// relatedDocs: [
|
||||||
|
// { title: 'Getting Started', href: '/docs/guides/', icon: 'book' },
|
||||||
|
// { title: 'Image Parameters', href: '/docs/api/', icon: 'code' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// slug: 'prompt-engineering-basics',
|
||||||
|
// title: 'Prompt Engineering for Better Image Results',
|
||||||
|
// description:
|
||||||
|
// 'Master the art of writing prompts that generate exactly the images you need.',
|
||||||
|
// heroImage: '/blog/prompt-engineering-hero.jpg',
|
||||||
|
// category: 'tutorials',
|
||||||
|
// date: '2025-01-08',
|
||||||
|
// author: {
|
||||||
|
// name: 'Banatie Team',
|
||||||
|
// avatar: '/blog/authors/default.jpg',
|
||||||
|
// },
|
||||||
|
// readTime: '8 min',
|
||||||
|
// relatedArticles: ['image-generation-best-practices', 'placeholder-images-guide'],
|
||||||
|
// relatedDocs: [
|
||||||
|
// { title: 'Prompt Guide', href: '/docs/guides/', icon: 'book' },
|
||||||
|
// { title: 'API Reference', href: '/docs/api/', icon: 'code' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// slug: 'image-generation-best-practices',
|
||||||
|
// title: 'Best Practices for AI Image Generation',
|
||||||
|
// description:
|
||||||
|
// "Learn the do's and don'ts of generating high-quality AI images for your projects.",
|
||||||
|
// heroImage: '/blog/best-practices-hero.jpg',
|
||||||
|
// category: 'guides',
|
||||||
|
// date: '2025-01-05',
|
||||||
|
// author: {
|
||||||
|
// name: 'Banatie Team',
|
||||||
|
// avatar: '/blog/authors/default.jpg',
|
||||||
|
// },
|
||||||
|
// readTime: '6 min',
|
||||||
|
// relatedArticles: ['prompt-engineering-basics', 'api-integration-tips'],
|
||||||
|
// relatedDocs: [
|
||||||
|
// { title: 'Image Quality', href: '/docs/guides/', icon: 'book' },
|
||||||
|
// { title: 'Parameters', href: '/docs/api/', icon: 'code' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// slug: 'use-cases-ecommerce',
|
||||||
|
// title: 'AI Placeholders for E-commerce Projects',
|
||||||
|
// description:
|
||||||
|
// 'How online stores can use AI-generated images for product mockups and prototypes.',
|
||||||
|
// heroImage: '/blog/ecommerce-hero.jpg',
|
||||||
|
// category: 'use-cases',
|
||||||
|
// date: '2025-01-02',
|
||||||
|
// author: {
|
||||||
|
// name: 'Banatie Team',
|
||||||
|
// avatar: '/blog/authors/default.jpg',
|
||||||
|
// },
|
||||||
|
// readTime: '5 min',
|
||||||
|
// relatedArticles: ['design-workflow-optimization', 'image-generation-best-practices'],
|
||||||
|
// relatedDocs: [
|
||||||
|
// { title: 'Quick Start', href: '/docs/guides/', icon: 'book' },
|
||||||
|
// { title: 'Batch Generation', href: '/docs/api/', icon: 'code' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import { getAllPosts } from './utils';
|
||||||
|
import { BlogCard, BlogBreadcrumbs } from './_components';
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Blog | Banatie',
|
||||||
|
description:
|
||||||
|
'Articles, guides, and updates about AI-powered placeholder images.',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function BlogPage() {
|
||||||
|
const posts = getAllPosts();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="py-12 px-6">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<BlogBreadcrumbs items={[{ label: 'Blog' }]} />
|
||||||
|
|
||||||
|
<h1 className="text-4xl font-bold text-white mt-8 mb-4">Blog</h1>
|
||||||
|
<p className="text-xl text-gray-400 mb-12">
|
||||||
|
Articles, guides, and updates about AI-powered images.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{posts.map((post) => (
|
||||||
|
<BlogCard key={post.slug} post={post} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{posts.length === 0 && (
|
||||||
|
<p className="text-gray-500 text-center py-12">
|
||||||
|
No articles yet. Check back soon!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
export interface BlogAuthor {
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RelatedDoc {
|
||||||
|
title: string;
|
||||||
|
href: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BlogPost {
|
||||||
|
slug: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
heroImage: string;
|
||||||
|
category: string;
|
||||||
|
date: string;
|
||||||
|
author: BlogAuthor;
|
||||||
|
readTime: string;
|
||||||
|
relatedArticles: string[];
|
||||||
|
relatedDocs: RelatedDoc[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TocItem {
|
||||||
|
id: string;
|
||||||
|
text: string;
|
||||||
|
level: number;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import type { BlogPost } from './types';
|
||||||
|
import { blogPosts } from './blog-posts';
|
||||||
|
|
||||||
|
export const getAllPosts = (): BlogPost[] => blogPosts;
|
||||||
|
|
||||||
|
export const getPostBySlug = (slug: string): BlogPost | undefined =>
|
||||||
|
blogPosts.find((p) => p.slug === slug);
|
||||||
|
|
||||||
|
export const getPostsBySlugs = (slugs: string[]): BlogPost[] =>
|
||||||
|
slugs
|
||||||
|
.map((slug) => getPostBySlug(slug))
|
||||||
|
.filter((post): post is BlogPost => post !== undefined);
|
||||||
|
|
||||||
|
export const generatePostMetadata = (post: BlogPost): Metadata => ({
|
||||||
|
title: post.title,
|
||||||
|
description: post.description,
|
||||||
|
openGraph: {
|
||||||
|
title: post.title,
|
||||||
|
description: post.description,
|
||||||
|
images: [post.heroImage],
|
||||||
|
type: 'article',
|
||||||
|
publishedTime: post.date,
|
||||||
|
authors: [post.author.name],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const formatDate = (dateString: string): string => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -9,7 +9,7 @@ export default function LandingsLayout({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Sticky Header */}
|
{/* Sticky Header */}
|
||||||
<header className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
|
<header className="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
|
||||||
<nav className="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-3 flex justify-between items-center h-12 sm:h-14 md:h-16">
|
<nav className="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-3 flex justify-between items-center h-12 sm:h-14 md:h-16">
|
||||||
<a href="/" className="h-full flex items-center">
|
<a href="/" className="h-full flex items-center">
|
||||||
<Image
|
<Image
|
||||||
|
|
|
||||||
|
|
@ -148,3 +148,23 @@ pre::-webkit-scrollbar-thumb {
|
||||||
pre::-webkit-scrollbar-thumb:hover {
|
pre::-webkit-scrollbar-thumb:hover {
|
||||||
background: rgb(148, 163, 184); /* slate-400 */
|
background: rgb(148, 163, 184); /* slate-400 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Blog code block scrollbar - light track for dark code blocks */
|
||||||
|
.blog-scrollbar::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: #1f2937;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #4b5563;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #6b7280;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
export const footerLinks = [
|
export const footerLinks = [
|
||||||
|
{ label: 'Blog', href: '/blog/' },
|
||||||
{ label: 'Documentation', href: '/docs/' },
|
{ label: 'Documentation', href: '/docs/' },
|
||||||
{ label: 'API Reference', href: '/docs/api/' },
|
{ label: 'API Reference', href: '/docs/api/' },
|
||||||
// { label: 'Pricing', href: '#' },
|
// { label: 'Pricing', href: '#' },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue