https://nalar.dev/tags/ui-architecture/ Recent content in UI Architecture on Nalar Hugo en-us Sat, 19 Sep 2026 00:00:00 +0000 https://nalar.dev/markdown-containers-lightweight-ui-dsl/ Sat, 19 Sep 2026 00:00:00 +0000 https://nalar.dev/markdown-containers-lightweight-ui-dsl/ <p>A content file does not need a component tree to express that one region is a hero, callout, card, or gallery. A small extension to Markdown can carry that intent while ordinary headings, paragraphs, links, and lists remain ordinary Markdown.</p> <p>With <code>markdown-it-container</code>, the author-facing syntax can stay as small as:</p> <div x-data="{ code: $el.querySelector('code').innerText, copied: false }" class="code-block group relative my-6 overflow-hidden rounded-xl border border-line bg-surface-muted dark:border-night-line dark:bg-night-surface"> <button type="button" @click="navigator.clipboard.writeText(code); copied = true; setTimeout(() => copied = false, 1600)" class="absolute right-3 top-3 z-10 rounded-lg border border-line-strong bg-surface px-2 py-1 font-mono text-[0.8rem] text-muted opacity-0 transition group-hover:opacity-100 hover:bg-ink hover:text-white dark:border-night-line dark:bg-night dark:text-night-muted dark:hover:bg-white dark:hover:text-ink"> <span x-text="copied ? 'Copied' : 'Copy'"></span> </button> <div class="overflow-x-auto p-4 text-sm leading-6 [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_code]:font-mono"> <div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-md" data-lang="md"><span style="display:flex;"><span>:::hero </span></span><span style="display:flex;"><span><span style="font-weight:bold"># Ship the next release </span></span></span><span style="display:flex;"><span><span style="font-weight:bold"></span> </span></span><span style="display:flex;"><span>A short description stays normal Markdown. </span></span><span style="display:flex;"><span>:::</span></span></code></pre></div> </div> </div> <p>That is already enough to create a lightweight UI DSL: <code>hero</code> has a meaning defined by the application, while the content inside it continues through the Markdown parser. The useful boundary is narrow. Once the format starts exposing rows, columns, padding values, CSS classes, event handlers, and deeply nested components, the content file stops behaving like content and starts becoming source code in another notation.</p>