feat: better inter-blog navigation

Author: csswizardry

archive.html

@@ -16,6 +16,11 @@
   Core Web Vitals, caching, browser behaviour, and the occasional older CSS
   piece.</p>
 
+  <ul class="c-nav-secondary" id="section:about">
+    <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
+    <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
+  </ul>
+
   <p>If you’d rather start somewhere less chronological, try
   <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a>
   <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>

blog.html

@@ -15,6 +15,11 @@
   Core Web Vitals, caching, browser behaviour, and the occasional older CSS
   piece.</p>
 
+  <ul class="c-nav-secondary" id="section:about">
+    <li class="c-nav-secondary__item"><a href="/blog/category/" class="c-nav-secondary__link">Categories</a></li>
+    <li class="c-nav-secondary__item"><a href="/blog/tags/" class="c-nav-secondary__link">Tags</a></li>
+  </ul>
+
   <p>If you’d rather start somewhere less chronological, try
   <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a>
   <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>

category/index.html

@@ -5,6 +5,8 @@
 meta: "Browse by subject: web performance, front-end development, tooling, the business of consulting, and everything else written here."
 ---
 
+<p><a href="/blog/">« All posts</a></p>
+
 {% assign category_pages = site.pages | where_exp: "item", "item.category" | sort: "category" %}
 {% assign category_count = category_pages | size %}
 

tag/index.html

@@ -5,6 +5,8 @@
 meta: "Every subject covered on CSS Wizardry, from Core Web Vitals and caching to CSS, RUM, and the browser internals sitting underneath them."
 ---
 
+<p><a href="/blog/">« All posts</a></p>
+
 {% assign tag_pages = site.pages | where_exp: "item", "item.tag" | sort: "tag" %}
 {% assign tag_count = tag_pages | size %}