Pkg-cards: Hugo partial + shortcode + color-coded categories (garden#5)
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:
parent
46007519ed
commit
f7b587f3fa
6 changed files with 273 additions and 68 deletions
14
layouts/shortcodes/pkg-card.html
Normal file
14
layouts/shortcodes/pkg-card.html
Normal 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")
|
||||
) }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue