themes-earthen/botanical_divider.templ
Alex Dunmow 49401f1b41 initial: theme plugin earthen
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/earthen.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:27 +08:00

80 lines
2.3 KiB
Plaintext

package main
// botanicalDividerComponent renders a centred botanical SVG flourish flanked by hairlines.
templ botanicalDividerComponent(data BotanicalDividerData) {
<div
data-block="earthen:botanical_divider"
data-empty?={ data.Empty }
class="earthen-divider flex items-center justify-center gap-4 my-12 px-4"
aria-hidden="true"
>
<span class="earthen-divider-rule flex-1 h-px" style="background-color: hsl(var(--border));"></span>
@botanicalGlyph(data.Motif, 48)
<span class="earthen-divider-rule flex-1 h-px" style="background-color: hsl(var(--border));"></span>
</div>
}
// botanicalGlyph renders the SVG illustration for the named motif.
templ botanicalGlyph(motif string, size int) {
switch motif {
case "root":
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width={ size }
height={ size }
data-motif="root"
class="earthen-glyph"
style="color: hsl(var(--primary));"
fill="none"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M24 4v18"/>
<path d="M24 22c-4 4-9 5-13 4M24 22c4 4 9 5 13 4M24 22c-2 7-3 12-5 16M24 22c2 7 3 12 5 16M24 22c0 9-1 15-1 20"/>
<circle cx="24" cy="22" r="2"/>
</svg>
case "seed":
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width={ size }
height={ size }
data-motif="seed"
class="earthen-glyph"
style="color: hsl(var(--accent));"
fill="none"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
>
<ellipse cx="24" cy="24" rx="6" ry="10"/>
<path d="M24 14V6M18 18l-6-6M30 18l6-6M24 34v8M18 30l-6 6M30 30l6 6"/>
</svg>
default:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width={ size }
height={ size }
data-motif="fern"
class="earthen-glyph"
style="color: hsl(var(--primary));"
fill="none"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M24 44V8"/>
<path d="M24 12c-4-2-7-2-9 0M24 12c4-2 7-2 9 0"/>
<path d="M24 18c-6-2-10-1-12 1M24 18c6-2 10-1 12 1"/>
<path d="M24 25c-7-1-12 0-14 3M24 25c7-1 12 0 14 3"/>
<path d="M24 33c-7 0-11 2-12 5M24 33c7 0 11 2 12 5"/>
</svg>
}
}