diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-21 22:56:01 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-21 22:56:01 +0200 |
| commit | 88d46796cb84e81e1c502ccdf02ea22890e511d5 (patch) | |
| tree | 251a9b99f9d0a8cd8361e1216566954981cb7b08 /themes/danix-xyz-hacker/layouts/index.html | |
| parent | 2236d07a5247cab38e0e6b524bdfb26c12c143a8 (diff) | |
| download | danixxyz-88d46796cb84e81e1c502ccdf02ea22890e511d5.tar.gz danixxyz-88d46796cb84e81e1c502ccdf02ea22890e511d5.zip | |
feat: Add reusable tag cloud partial with A11y and dark/light mode support
- Create tag-cloud.html partial with flexible dict interface:
* showCount (bool): Toggle count badges
* wrapInWidget (bool): Sidebar widget wrapper with .sidebar-widget class
* maxTags (int): Limit shown tags (used for sidebar: 15 max)
* headingLevel (h2|h3): Configurable heading element
- Implement visual tier scaling by frequency (3 tiers):
* low: 0.75rem, 0.75 opacity — uncommon tags
* medium: 0.875rem, 0.88 opacity — moderate frequency
* high: 1rem, 1 opacity, accent border — popular tags
- Add .tag-cloud and .tag-tier-* CSS classes (main.css):
* Uses CSS variables (--accent, --border, --text-dim) for dark/light compatibility
* Focus ring matches site standard (outline-offset: 2px)
* Hover state: accent border + subtle bg tint
* prefers-reduced-motion: transitions disabled
- Integrate in 3 locations:
* Homepage (layouts/index.html): Full cloud with counts
* Article sidebar (layouts/partials/sidebar.html): Compact widget, 15 max, no counts
* 404 pages (404.en.html, 404.it.html): Full cloud between recent articles and nav
- A11y implementation:
* <section aria-labelledby> landmark (non-sidebar mode)
* <nav aria-label="Browse by topic"> named navigation
* Each link aria-label includes count text even when visual badge hidden
* <span aria-hidden="true"> on count badge to avoid duplication
* Proper heading hierarchy (h2 homepage, h3 on 404)
- Add i18n keys (en.yaml, it.yaml):
* tagCloud: "Explore Topics" / "Esplora gli argomenti"
* exploreTopics: "Browse by topic" / "Sfoglia per argomento"
- URL handling: Use .Page.RelPermalink from OrderedTaxonomyEntry — no manual /tags/ construction, language-aware paths work automatically
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/index.html')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/index.html | 5 |
1 files changed, 5 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/layouts/index.html b/themes/danix-xyz-hacker/layouts/index.html index 7247c3f..a290d6a 100644 --- a/themes/danix-xyz-hacker/layouts/index.html +++ b/themes/danix-xyz-hacker/layouts/index.html @@ -49,6 +49,11 @@ {{ i18n "contact" }} </a> </div> + + <!-- Tag Cloud Section --> + <div class="mt-16 pt-8 border-t border-border"> + {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h2") }} + </div> </div> </section> {{ end }} |
