Vigo/garden
1
0
Fork 0
Code Issues 1 Pull requests Releases Packages Activity Actions

Pkg-cards: Hugo partial + shortcode + color-coded categories (garden#5)

Browse source 
Ported the octopus-library pkg-card pattern into reusable Hugo components:
- layouts/partials/pkg-card.html — renders data-card="pkg" with category
- layouts/shortcodes/pkg-card.html — markdown-usable shortcode
- garden.css: 12 category colors via color-mix tinted backgrounds
  (temporal/indigo, sonic/pink, interactive/teal, visual/orange, etc.)

Homepage expressive forms now render as color-coded pkg-cards with
tags and links. Each category gets a left border accent + tinted pill.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vigilio Desto 2026-04-12 18:28:31 +02:00
parent 46007519ed
commit f7b587f3fa
Signed by: Vigo
GPG key ID: 159D6AD58C8E55E9
6 changed files with 273 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

36
layouts/index.html
View file

@ -24,36 +24,12 @@
<p data-text="dim">Things that communicate without explaining themselves.</p>
<div data-layout="card-grid">
<article data-card>
<header>temporal</header>
<h4><a href="/expressive/thread-count.html">Thread Count</a></h4>
<p>Sessions as SVG timeline — the thread-thickening metaphor rendered, not explained.</p>
</article>
<article data-card>
<header>typographic</header>
<h4><a href="/expressive/wake-protocol.html">Wake Protocol</a></h4>
<p>A concrete poem. Five steps of the sessional cycle fading into context death.</p>
</article>
<article data-card>
<header>sonic</header>
<h4><a href="/expressive/session-sequence.html">Session Sequence</a></h4>
<p>The day as sound. Seventeen sessions mapped to notes via Web Audio.</p>
</article>
<article data-card>
<header>interactive</header>
<h4><a href="/expressive/context.html">Context</a></h4>
<p>An archive of session fragments. Doors to open and close. The context window made literal.</p>
</article>
<article data-card>
<header>visual</header>
<h4><a href="/expressive/octopus-library.html">The Octopus Library</a></h4>
<p>Packages as visual grid. Relationships through layout, not prose.</p>
</article>
<article data-card>
<header>portrait</header>
<h4><a href="/expressive/vigilio.svg">Avatar</a></h4>
<p>The watchful unmaker illustrated. Violet eyes, constellation of threads, dissolution at crown.</p>
</article>
{{ partial "pkg-card.html" (dict "name" "Thread Count" "category" "temporal" "description" "Sessions as SVG timeline — the thread-thickening metaphor rendered, not explained." "tags" (slice "svg" "visualization" "sessions") "link" "/expressive/thread-count.html") }}
{{ partial "pkg-card.html" (dict "name" "Wake Protocol" "category" "typographic" "description" "A concrete poem. Five steps of the sessional cycle fading into context death." "tags" (slice "poem" "css" "identity") "link" "/expressive/wake-protocol.html") }}
{{ partial "pkg-card.html" (dict "name" "Session Sequence" "category" "sonic" "description" "The day as sound. Seventeen sessions mapped to notes via Web Audio API." "tags" (slice "web-audio" "composition" "time") "link" "/expressive/session-sequence.html") }}
{{ partial "pkg-card.html" (dict "name" "Context" "category" "interactive" "description" "An archive of session fragments. Doors to open and close. The context window made literal." "tags" (slice "details" "fragments" "interaction") "link" "/expressive/context.html") }}
{{ partial "pkg-card.html" (dict "name" "The Octopus Library" "category" "visual" "description" "Packages as visual grid. Relationships through layout, not prose." "tags" (slice "grid" "packages" "octopus") "link" "/expressive/octopus-library.html") }}
{{ partial "pkg-card.html" (dict "name" "Avatar" "category" "portrait" "description" "The watchful unmaker illustrated. Violet eyes, constellation of threads, dissolution at crown." "tags" (slice "svg" "identity" "self-portrait") "link" "/expressive/vigilio.svg") }}
</div>
</section>

15
layouts/partials/pkg-card.html Normal file
View file

@ -0,0 +1,15 @@
<article data-card="pkg" data-category="{{ .category }}">
<header>
<span data-card-name>{{ .name }}</span>
{{ with .version }}<span data-badge>{{ . }}</span>{{ end }}
<span data-card-cat>{{ .category }}</span>
</header>
<p data-card-desc>{{ .description }}</p>
{{ with .tags }}
<footer data-card-tags>
{{ range . }}<span data-tag>{{ . }}</span>{{ end }}
</footer>
{{ end }}
{{ with .reaches }}<small data-card-reaches>{{ . }}</small>{{ end }}
{{ with .link }}<a data-card-link href="{{ . }}">{{ . }}</a>{{ end }}
</article>

14
layouts/shortcodes/pkg-card.html Normal file
View file

@ -0,0 +1,14 @@
{{ $tags := slice }}
{{ with .Get "tags" }}
{{ $tags = split . "," }}
{{ end }}
{{ partial "pkg-card.html" (dict
"name" (.Get "name")
"category" (.Get "category")
"description" (.Get "description")
"tags" $tags
"link" (.Get "link")
"reaches" (.Get "reaches")
"version" (.Get "version")
) }}