e8ba3b9ae6
Adds hierarchical tag support using "/" separator (e.g. "tech/programming/js"). - New filters: nestedSlugify, categoryMatches, categoryBreadcrumb, categoryGroupByRoot, categoryDirectChildren - categories collection auto-generates ancestor pages for nested tags - categories.njk: breadcrumb nav, sub-tags section, ancestor-aware post matching - categories-index.njk: grouped tree view (root + indented children) - categories widget: shows root tags only with child count badge - All category links updated from slugify → nestedSlugify (backward-compatible) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
54 lines
2.1 KiB
Plaintext
54 lines
2.1 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Categories
|
|
withSidebar: true
|
|
pagefindIgnore: true
|
|
permalink: categories/
|
|
eleventyImport:
|
|
collections:
|
|
- categories
|
|
---
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Categories</h1>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
|
Browse posts by category.
|
|
<span class="text-sm">({{ collections.categories.length }} categories)</span>
|
|
</p>
|
|
|
|
{% if collections.categories.length > 0 %}
|
|
{% set grouped = collections.categories | categoryGroupByRoot %}
|
|
<ul class="space-y-4">
|
|
{% for group in grouped %}
|
|
<li>
|
|
{# Root tag #}
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<a href="/categories/{{ group.root | nestedSlugify }}/"
|
|
class="inline-block px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 rounded-lg font-medium hover:bg-accent-100 dark:hover:bg-accent-900 hover:text-accent-700 dark:hover:text-accent-300 transition-colors">
|
|
{{ group.root }}
|
|
</a>
|
|
{% if group.children.length > 0 %}
|
|
<span class="text-xs text-surface-400 dark:text-surface-500">{{ group.children.length }} sub-tag{% if group.children.length != 1 %}s{% endif %}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Child tags indented beneath root #}
|
|
{% if group.children.length > 0 %}
|
|
<ul class="mt-2 ml-4 pl-4 border-l border-surface-200 dark:border-surface-700 flex flex-wrap gap-2">
|
|
{% for child in group.children %}
|
|
<li>
|
|
<a href="/categories/{{ child | nestedSlugify }}/"
|
|
class="inline-block px-3 py-1 bg-surface-50 dark:bg-surface-800/60 text-surface-700 dark:text-surface-300 rounded-md text-sm hover:bg-accent-100 dark:hover:bg-accent-900 hover:text-accent-700 dark:hover:text-accent-300 transition-colors">
|
|
{{ child }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="text-surface-600 dark:text-surface-400">No categories yet.</p>
|
|
{% endif %}
|
|
</div>
|