---

layout: default

---

<main class="pt-32 pb-24 px-6">

<div class="max-w-3xl mx-auto">

<nav class="mb-8 text-sm text-slate-500">

<a href="/blog/" class="hover:text-sky-400 transition-colors">← Blog</a>

</nav>

{% if page.tags %}

<div class="flex flex-wrap gap-2 mb-6">

{% for tag in page.tags %}

<span class="text-xs font-mono bg-slate-800 text-sky-400 px-2 py-1 rounded">{{ tag }}</span>

{% endfor %}

</div>

{% endif %}

<h1 class="text-4xl sm:text-5xl font-extrabold leading-tight mb-6">

{{ page.title }}

</h1>

<p class="text-slate-400 text-lg mb-10 leading-relaxed">

{{ page.description }}

</p>

<hr class="border-slate-800 mb-10" />

<article class="prose-custom">

{{ content }}

</article>

</div>

{% if content contains 'language-mermaid' %}

.mermaid {

display: flex;

justify-content: center;

margin: 1.5rem 0;

background: #0f172a;

padding: 1.5rem;

border-radius: 0.75rem;

border: 1px solid #1e293b;

}

.mermaid svg { max-width: 100%; height: auto; }

<script type="module">

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.esm.min.mjs';

mermaid.initialize({

startOnLoad: false,

theme: 'dark',

themeVariables: {

background: '#0f172a',

primaryColor: '#1e293b',

primaryTextColor: '#e2e8f0',

primaryBorderColor: '#38bdf8',

lineColor: '#64748b',

secondaryColor: '#0c4a6e',

tertiaryColor: '#0f172a',

noteBkgColor: '#1e293b',

noteTextColor: '#e2e8f0',

noteBorderColor: '#38bdf8'

}

});

document.querySelectorAll('pre > code.language-mermaid').forEach((el) => {

const div = document.createElement('div');

div.className = 'mermaid';

div.textContent = el.textContent;

el.parentElement.replaceWith(div);

});

await mermaid.run();

{% endif %}