Remove the years sidebar from index.html (AI)

Also fixes renderFilterNavigation() to render years/tags
independently instead of bailing out entirely when #year-filters
is missing, which would have silently broken tag filtering too.
The "all articles" reset link now moves into whichever section
renders first.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AXSVPS3UmmASiiprPfcnUd

README.md

@@ -85,8 +85,9 @@ cmjs/
    publish date; a `date:` frontmatter field is no longer read.
 4. Add tag/category markers as needed: `cmjs/articles/author/my-article/tag-id.tag` (e.g.
    `kometa.tag`, `expa-2026.tag`) — empty files, any number. A tag id matching `expa-YYYY` is
-   treated as the article's "year"/category and shown in the "Years" sidebar; every other tag
-   id is a normal topic tag.
+   treated as the article's "year"/category, shown as a badge on each card/article linking to
+   `#category/expa-YYYY`; every other tag id is a normal topic tag, shown as a pill linking to
+   `#tag/tag-id`.
 5. Add a frontmatter block at the top of the Markdown file
 6. Write your content — it will appear in the list automatically
 

cmjs/js/views.js

@@ -96,40 +96,51 @@ function renderFilterLink(label, href, count, active = false) {
     return link;
 }
 
+// Years and tags render independently — either `<nav>` can be absent from
+// the page (e.g. a site that only wants tag filtering, like this project's
+// own index.html) without the other silently stopping too. Whichever
+// section renders first gets the "all articles" reset link, so it's never
+// lost just because the years nav isn't on the page.
 function renderFilterNavigation(articles, activeFilter = null) {
     const years = document.getElementById('year-filters');
     const tags = document.getElementById('tag-filters');
-    if (!years || !tags) return;
-    years.innerHTML = '';
-    tags.innerHTML = '';
+    if (!years && !tags) return;
+    const allArticlesLink = () => renderFilterLink(t('filterAllArticles'), '#', articles.length, !activeFilter);
 
-    const yearCounts = new Map();
-    articles.forEach(article => {
-        const year = Number(article.expa);
-        if (year) yearCounts.set(year, (yearCounts.get(year) || 0) + 1);
-    });
-    const yearList = document.createElement('div');
-    yearList.className = 'filter-list';
-    yearList.appendChild(renderFilterLink(t('filterAllArticles'), '#', articles.length, !activeFilter));
-    for (let year = 2026; year >= 2009; year -= 1) {
-        const count = yearCounts.get(year) || 0;
-        const active = activeFilter?.type === 'category' && activeFilter.value.toLowerCase() === `expa-${year}`;
-        yearList.appendChild(renderFilterLink(t('yearLabel', { year }), `#category/expa-${year}`, count, active));
-    }
-    years.appendChild(yearList);
-
-    const tagCounts = new Map();
-    articles.forEach(article => (article.tags || []).forEach(tag => tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1)));
-    const tagList = document.createElement('div');
-    tagList.className = 'filter-list';
-    [...tagLabels.entries()]
-        .filter(([id]) => tagCounts.has(id))
-        .sort((a, b) => (tagLabels.get(a[0]) || a[0]).localeCompare(tagLabels.get(b[0]) || b[0], getLocale()))
-        .forEach(([id, label]) => {
-            const active = activeFilter?.type === 'tag' && activeFilter.value === id;
-            tagList.appendChild(renderFilterLink(label, `#tag/${encodeURIComponent(id)}`, tagCounts.get(id), active));
+    if (years) {
+        years.innerHTML = '';
+        const yearCounts = new Map();
+        articles.forEach(article => {
+            const year = Number(article.expa);
+            if (year) yearCounts.set(year, (yearCounts.get(year) || 0) + 1);
         });
-    tags.appendChild(tagList);
+        const yearList = document.createElement('div');
+        yearList.className = 'filter-list';
+        yearList.appendChild(allArticlesLink());
+        for (let year = 2026; year >= 2009; year -= 1) {
+            const count = yearCounts.get(year) || 0;
+            const active = activeFilter?.type === 'category' && activeFilter.value.toLowerCase() === `expa-${year}`;
+            yearList.appendChild(renderFilterLink(t('yearLabel', { year }), `#category/expa-${year}`, count, active));
+        }
+        years.appendChild(yearList);
+    }
+
+    if (tags) {
+        tags.innerHTML = '';
+        const tagCounts = new Map();
+        articles.forEach(article => (article.tags || []).forEach(tag => tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1)));
+        const tagList = document.createElement('div');
+        tagList.className = 'filter-list';
+        if (!years) tagList.appendChild(allArticlesLink());
+        [...tagLabels.entries()]
+            .filter(([id]) => tagCounts.has(id))
+            .sort((a, b) => (tagLabels.get(a[0]) || a[0]).localeCompare(tagLabels.get(b[0]) || b[0], getLocale()))
+            .forEach(([id, label]) => {
+                const active = activeFilter?.type === 'tag' && activeFilter.value === id;
+                tagList.appendChild(renderFilterLink(label, `#tag/${encodeURIComponent(id)}`, tagCounts.get(id), active));
+            });
+        tags.appendChild(tagList);
+    }
 }
 
 function renderCard(article) {

index.html

@@ -36,10 +36,6 @@
         </section>
 
         <aside class="blog-sidebar" aria-label="Blog filters">
-            <section class="filter-section">
-                <h2>Years</h2>
-                <nav id="year-filters" aria-label="Filter by year"></nav>
-            </section>
             <section class="filter-section">
                 <h2>Tags</h2>
                 <nav id="tag-filters" aria-label="Filter by tag"></nav>