jekyll-theme-zer0 1.27.0 → 1.29.0

data/_layouts/recipe.html

@@ -0,0 +1,274 @@
+---
+# Feature: ZER0-084
+layout: default
+---
+{%- comment -%}
+  Layout: recipe.html
+  Extends: default.html
+  Purpose: One recipe — headnote, fact bar, serving scaler, ingredients,
+           equipment, method, ratio table, notes, and nutrition, all driven by
+           structured front matter rather than hand-written markdown.
+  Front matter required: layout, title
+  Front matter optional (the whole cookbook schema):
+    description, image/preview, course, cookbook, cuisine, difficulty,
+    yield: {amount, unit, singular}, times: {prep, cook, rest, rest_label,
+    total}, oven: {temp_f, temp_c, mode}, ratio, ratio_basis, equipment,
+    ingredients, steps, notes, nutrition, source, source_url, scaler (false to
+    hide the controls), units (false to hide the unit switch)
+  Notes: Every amount is rendered as authored, so the page is complete and
+         correct without JavaScript; assets/js/recipe-scaler.js only rewrites
+         the numbers once a reader asks it to. Machine-readable data is emitted
+         once, as JSON-LD — the itemprops inside the components are inert
+         annotations unless a consumer adds their own itemscope.
+{%- endcomment -%}
+
+{%- assign _rl_id = page.slug | default: "recipe" -%}
+{%- assign _rl_course_meta = site.data.recipe_courses[page.course] -%}
+{%- assign _rl_cookbook = site.recipes | where: "layout", "cookbook" | where: "cookbook", page.cookbook | first -%}
+{%- assign _rl_image = page.image | default: page.preview -%}
+{%- assign _rl_show_scaler = true -%}
+{%- if page.scaler == false -%}{%- assign _rl_show_scaler = false -%}{%- endif -%}
+
+<article class="recipe" data-recipe data-recipe-id="{{ _rl_id }}">
+
+  <!-- ================================ -->
+  <!-- HEADER                           -->
+  <!-- ================================ -->
+  <header class="recipe-header">
+    {%- if _rl_cookbook or _rl_course_meta -%}
+    <p class="recipe-eyebrow">
+      {%- if _rl_cookbook -%}
+      <a href="{{ _rl_cookbook.url | relative_url }}"><i class="bi bi-journal-bookmark me-1" aria-hidden="true"></i>{{ _rl_cookbook.title }}</a>
+      {%- endif -%}
+      {%- if _rl_cookbook and _rl_course_meta %} <span class="mx-1" aria-hidden="true">•</span> {% endif -%}
+      {%- if _rl_course_meta -%}{{ _rl_course_meta.title | escape }}{%- endif -%}
+    </p>
+    {%- endif -%}
+
+    <h1 id="page-title" class="recipe-title">{{ page.title }}</h1>
+
+    {%- if page.description -%}
+    <p class="lead recipe-description">{{ page.description }}</p>
+    {%- endif -%}
+
+    {%- if page.source or page.author -%}
+    <p class="recipe-byline text-body-secondary small">
+      {%- if page.author %}By {{ page.author }}{% endif -%}
+      {%- if page.author and page.source %} <span class="mx-1" aria-hidden="true">•</span> {% endif -%}
+      {%- if page.source -%}
+        Adapted from
+        {%- if page.source_url %} <a href="{{ page.source_url }}" rel="noopener">{{ page.source | escape }}</a>
+        {%- else %} {{ page.source | escape }}{% endif -%}
+      {%- endif -%}
+    </p>
+    {%- endif -%}
+
+    {%- if _rl_image -%}
+    <figure class="recipe-hero-figure">
+      {%- include components/preview-image.html src=_rl_image alt=page.title class="recipe-hero-image" loading="eager" -%}
+      {%- if page.image_caption -%}
+      <figcaption class="small text-body-secondary mt-2">{{ page.image_caption | escape }}</figcaption>
+      {%- endif -%}
+    </figure>
+    {%- endif -%}
+  </header>
+
+  <!-- ================================ -->
+  <!-- HEADNOTE (the markdown body)     -->
+  <!-- ================================ -->
+  {%- assign _rl_body = content | strip -%}
+  {%- if _rl_body != "" -%}
+  <div class="recipe-headnote">
+    {{ content }}
+  </div>
+  {%- endif -%}
+
+  <!-- ================================ -->
+  <!-- FACT BAR + SCALER                -->
+  <!-- ================================ -->
+  {%- include components/recipe-meta.html -%}
+
+  {%- if _rl_show_scaler -%}
+  {%- include components/recipe-scaler.html recipe_id=_rl_id units=page.units -%}
+  <noscript>
+    <p class="recipe-noscript small text-body-secondary">
+      <i class="bi bi-info-circle me-1" aria-hidden="true"></i>Serving scaling and unit conversion need JavaScript.
+      Every amount below is shown exactly as the recipe was written.
+    </p>
+  </noscript>
+  {%- endif -%}
+
+  <!-- ================================ -->
+  <!-- INGREDIENTS + METHOD             -->
+  <!-- ================================ -->
+  <div class="row g-4 g-lg-5 recipe-body">
+    <div class="col-lg-5">
+      {%- include components/recipe-ingredients.html id_prefix=_rl_id -%}
+
+      {%- if page.equipment and page.equipment.size > 0 -%}
+      <section class="recipe-equipment">
+        <h2 class="recipe-section-heading">
+          <i class="bi bi-tools me-2" aria-hidden="true"></i>Equipment
+        </h2>
+        <ul class="recipe-equipment-list list-unstyled">
+          {%- for _rl_e in page.equipment -%}
+          <li><i class="bi bi-dot" aria-hidden="true"></i>{{ _rl_e | escape }}</li>
+          {%- endfor -%}
+        </ul>
+      </section>
+      {%- endif -%}
+    </div>
+
+    <div class="col-lg-7">
+      {%- include components/recipe-steps.html -%}
+    </div>
+  </div>
+
+  <!-- ================================ -->
+  <!-- RATIO / FORMULA                  -->
+  <!-- ================================ -->
+  {%- include components/recipe-ratio.html -%}
+
+  <!-- ================================ -->
+  <!-- NOTES                            -->
+  <!-- ================================ -->
+  {%- if page.notes and page.notes.size > 0 -%}
+  <section class="recipe-notes">
+    <h2 class="recipe-section-heading">
+      <i class="bi bi-lightbulb me-2" aria-hidden="true"></i>Cook's notes
+    </h2>
+    <ul class="recipe-notes-list">
+      {%- for _rl_note in page.notes -%}
+      <li>{{ _rl_note | markdownify | remove: "<p>" | remove: "</p>" }}</li>
+      {%- endfor -%}
+    </ul>
+  </section>
+  {%- endif -%}
+
+  <!-- ================================ -->
+  <!-- NUTRITION                        -->
+  <!-- ================================ -->
+  {%- include components/recipe-nutrition.html -%}
+
+  <!-- ================================ -->
+  <!-- COMMENTS                         -->
+  <!-- ================================ -->
+  {%- if page.comments and site.giscus.enabled -%}
+  <section class="post-comments mt-5 pt-4 border-top" id="comments">
+    <h2 class="h4 mb-4"><i class="bi bi-chat-dots me-2" aria-hidden="true"></i>Comments</h2>
+    {%- include content/giscus.html -%}
+  </section>
+  {%- endif -%}
+</article>
+
+{%- comment -%}
+  ================================================================
+  STRUCTURED DATA — schema.org/Recipe as JSON-LD.
+  Emitted once, here, so search engines see exactly one Recipe entity.
+  ================================================================
+{%- endcomment -%}
+{%- assign _rl_prep = page.times.prep | default: 0 -%}
+{%- assign _rl_cook = page.times.cook | default: 0 -%}
+{%- assign _rl_rest = page.times.rest | default: 0 -%}
+{%- if page.times.total -%}
+  {%- assign _rl_total = page.times.total -%}
+{%- else -%}
+  {%- assign _rl_total = _rl_prep | plus: _rl_cook | plus: _rl_rest -%}
+{%- endif -%}
+{%- capture _rl_prep_iso -%}{%- include components/recipe-duration.html minutes=_rl_prep format="iso" -%}{%- endcapture -%}
+{%- capture _rl_cook_iso -%}{%- include components/recipe-duration.html minutes=_rl_cook format="iso" -%}{%- endcapture -%}
+{%- capture _rl_total_iso -%}{%- include components/recipe-duration.html minutes=_rl_total format="iso" -%}{%- endcapture -%}
+{%- assign _rl_flat = "" | split: "" -%}
+{%- for _rl_entry in page.ingredients -%}
+  {%- if _rl_entry.items -%}
+    {%- for _rl_i in _rl_entry.items -%}{%- assign _rl_flat = _rl_flat | push: _rl_i -%}{%- endfor -%}
+  {%- else -%}
+    {%- assign _rl_flat = _rl_flat | push: _rl_entry -%}
+  {%- endif -%}
+{%- endfor -%}
+{%- assign _rl_flat_steps = "" | split: "" -%}
+{%- for _rl_entry in page.steps -%}
+  {%- if _rl_entry.items -%}
+    {%- for _rl_s in _rl_entry.items -%}{%- assign _rl_flat_steps = _rl_flat_steps | push: _rl_s -%}{%- endfor -%}
+  {%- else -%}
+    {%- assign _rl_flat_steps = _rl_flat_steps | push: _rl_entry -%}
+  {%- endif -%}
+{%- endfor -%}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Recipe",
+  "name": {{ page.title | jsonify }},
+  "url": {{ page.url | absolute_url | jsonify }}
+  {%- if page.description %},
+  "description": {{ page.description | strip_html | strip | jsonify }}
+  {%- endif -%}
+  {%- if _rl_image %},
+  "image": {{ _rl_image | absolute_url | jsonify }}
+  {%- endif -%}
+  {%- if page.author %},
+  "author": { "@type": "Person", "name": {{ page.author | jsonify }} }
+  {%- endif -%}
+  {%- if page.date %},
+  "datePublished": {{ page.date | date_to_xmlschema | jsonify }}
+  {%- endif -%}
+  {%- assign _rl_prep_iso = _rl_prep_iso | strip -%}
+  {%- if _rl_prep_iso != "" %},
+  "prepTime": {{ _rl_prep_iso | jsonify }}
+  {%- endif -%}
+  {%- assign _rl_cook_iso = _rl_cook_iso | strip -%}
+  {%- if _rl_cook_iso != "" %},
+  "cookTime": {{ _rl_cook_iso | jsonify }}
+  {%- endif -%}
+  {%- assign _rl_total_iso = _rl_total_iso | strip -%}
+  {%- if _rl_total_iso != "" %},
+  "totalTime": {{ _rl_total_iso | jsonify }}
+  {%- endif -%}
+  {%- if page.yield.amount %},
+  {%- capture _rl_yield_text %}{{ page.yield.amount }} {{ page.yield.unit | default: "servings" }}{% endcapture %}
+  "recipeYield": {{ _rl_yield_text | strip | jsonify }}
+  {%- endif -%}
+  {%- if _rl_course_meta %},
+  "recipeCategory": {{ _rl_course_meta.title | jsonify }}
+  {%- endif -%}
+  {%- if page.cuisine %},
+  "recipeCuisine": {{ page.cuisine | jsonify }}
+  {%- endif -%}
+  {%- if page.tags and page.tags.size > 0 %},
+  "keywords": {{ page.tags | join: ", " | jsonify }}
+  {%- endif -%}
+  {%- if _rl_flat.size > 0 %},
+  "recipeIngredient": [
+    {%- assign _rl_first = true -%}
+    {%- for _rl_i in _rl_flat -%}
+      {%- if _rl_i.item -%}
+        {%- capture _rl_line %}{% if _rl_i.qty %}{{ _rl_i.qty }} {% endif %}{% if _rl_i.unit %}{{ _rl_i.unit }} {% endif %}{{ _rl_i.item }}{% if _rl_i.prep %}, {{ _rl_i.prep }}{% endif %}{% endcapture -%}
+        {%- unless _rl_first %},{% endunless %}{%- assign _rl_first = false -%}
+        {{ _rl_line | strip | jsonify }}
+      {%- endif -%}
+    {%- endfor -%}
+  ]
+  {%- endif -%}
+  {%- if _rl_flat_steps.size > 0 %},
+  "recipeInstructions": [
+    {%- assign _rl_first = true -%}
+    {%- for _rl_s in _rl_flat_steps -%}
+      {%- if _rl_s.text -%}{%- assign _rl_stext = _rl_s.text -%}{%- else -%}{%- assign _rl_stext = _rl_s -%}{%- endif -%}
+      {%- assign _rl_stext = _rl_stext | strip_html | strip -%}
+      {%- if _rl_stext != "" -%}
+        {%- unless _rl_first %},{% endunless %}{%- assign _rl_first = false -%}
+        { "@type": "HowToStep"{% if _rl_s.title %}, "name": {{ _rl_s.title | jsonify }}{% endif %}, "text": {{ _rl_stext | jsonify }} }
+      {%- endif -%}
+    {%- endfor -%}
+  ]
+  {%- endif -%}
+  {%- if page.nutrition.calories %},
+  {%- capture _rl_serving_size %}1 {{ page.yield.singular | default: "serving" }}{% endcapture %}
+  "nutrition": {
+    "@type": "NutritionInformation",
+    "servingSize": {{ _rl_serving_size | strip | jsonify }},
+    "calories": {{ page.nutrition.calories | append: " calories" | jsonify }}
+  }
+  {%- endif %}
+}
+</script>

data/_layouts/root.html

@@ -46,12 +46,23 @@
 {%- else -%}
   {%- assign _bs_theme = 'dark' -%}
 {%- endif -%}
-<html lang="{{ page.lang | default: site.locale | slice: 0, 2 | default: 'en' }}" class="no-js" data-bs-theme="{{ _bs_theme }}" data-color-mode-default="{{ _cm }}" data-theme-skin="{{ site.theme_skin | default: 'dark' }}" data-zer0-bg="{{ site.theme_background.enabled | default: true }}">
+<html lang="{{ page.lang | default: site.locale | slice: 0, 2 | default: 'en' }}" class="no-js" data-bs-theme="{{ _bs_theme }}" data-color-mode-default="{{ _cm }}" data-color-mode-lock="{{ site.color_mode_lock | default: false }}" data-theme-skin="{{ site.theme_skin | default: 'air' }}" data-zer0-bg="{{ site.theme_background.enabled | default: true }}">
     <head>
+        <!-- Progressive-enhancement hook: upgrade <html class="no-js"> to "js".
+             MUST be the first child of <head>, inline, and neither `defer` nor
+             `async` — it has to run before the first stylesheet is fetched or
+             `html.js` rules would flash. It cannot live in core/head.html:
+             Google Tag Manager is emitted above everything else there, so
+             "first in that include" is not "first in <head>".
+             classList.replace() is a no-op when `no-js` is absent, so this is
+             safe unconditionally. The served HTML keeps `no-js` on <html> so
+             the JS-disabled branch stays correct. -->
+        <script>document.documentElement.classList.replace("no-js", "js");</script>
+
         <!-- =============================================== -->
         <!-- HEAD SECTION: Meta tags, styles, and SEO setup -->
         <!-- =============================================== -->
-        
+
         <!-- Core site metadata, stylesheets, and external dependencies -->
         {% include core/head.html %}
 
@@ -67,7 +78,11 @@
         <!-- ============================================== -->
         <!-- BODY SECTION: Site structure and content area -->
         <!-- ============================================== -->
-        
+
+        <!-- Consumer hook: first thing inside <body> (e.g. GTM noscript).
+             Empty stub shipped by the theme; shadow _includes/custom/body-start.html to use. -->
+        {% include custom/body-start.html %}
+
         <!-- Inline SVG symbols for consistent iconography throughout the site -->
         <!-- Page-invariant: cached once per build via jekyll-include-cache. -->
         {% include_cached components/svg.html %}
@@ -103,8 +118,16 @@
              This is the ONE <main> landmark per page — child layouts (default/section/
              news) must use non-landmark wrappers (<div>) inside it (issue #299) — so
              assistive tech, search engines, and AI content extractors can isolate the
-             primary content from the surrounding header/nav/footer chrome. -->
-        <main id="main-content">
+             primary content from the surrounding header/nav/footer chrome.
+
+             tabindex="-1" is REQUIRED, not decorative: <main> is not natively
+             focusable, and Safari/WebKit (historically Firefox too) only scroll on a
+             fragment jump to a non-focusable container — keyboard focus stays put, so
+             the next Tab returns the user to the header nav they just skipped
+             (WCAG 2.4.1 Bypass Blocks). -1 keeps it out of the sequential Tab order
+             while allowing programmatic focus. The focus ring it would otherwise
+             paint is suppressed in _sass/utilities/_focus.scss. -->
+        <main id="main-content" tabindex="-1">
             <!-- Machine-translation disclosure — renders only on generated
                  translations (page.machine_translated); no-op elsewhere. -->
             {%- include components/translation-notice.html -%}
@@ -125,6 +148,12 @@
         {%- include_cached core/footer.html lang=page.lang -%}
         {%- include core/footer-fabs.html -%}
 
+        <!-- Consumer hook: after the theme footer, before the consent banner.
+             Empty stub shipped by the theme; shadow _includes/custom/footer.html to use.
+             Deliberately OUTSIDE the cached footer include so page-dependent
+             consumer markup renders per page. -->
+        {%- include custom/footer.html -%}
+
         <!-- Privacy-compliant cookie consent banner — page-invariant. -->
         {%- include_cached components/cookie-consent.html -%}
 
@@ -148,5 +177,9 @@
 
         <!-- Analytics Integration -->
         {%- include analytics/posthog.html -%}
+
+        <!-- Consumer hook: last thing before </body> (site scripts, widgets).
+             Empty stub shipped by the theme; shadow _includes/custom/body-end.html to use. -->
+        {%- include custom/body-end.html -%}
     </body>
 </html>

data/_layouts/section.html

@@ -46,6 +46,34 @@ layout: root
 {% comment %} SECTION DISCOVERY LOGIC         {% endcomment %}
 {% comment %} ================================ {% endcomment %}
 
+{% comment %}
+  Same `news:` config surface as _layouts/news.html:
+  - news.category_base (default "/news/") — base path for section pages
+  - news.index_url     (default "/news/") — the news homepage this section
+    belongs to (breadcrumb + "Browse all news")
+  Section pills fall back to site.categories when _data/navigation/posts.yml
+  is absent, so the layout works on a data-less consumer site.
+{% endcomment %}
+{% assign news_cfg = site.news %}
+{% assign news_base = news_cfg.category_base | default: "/news/" %}
+{% assign news_index_url = news_cfg.index_url | default: "/news/" %}
+{% capture _sec_names %}{% for item in site.data.navigation.posts %}{{ item.title }}{% unless forloop.last %}|{% endunless %}{% endfor %}{% endcapture %}
+{% if _sec_names == "" %}{% capture _sec_names %}{% for cat in site.categories limit: 8 %}{{ cat[0] }}{% unless forloop.last %}|{% endunless %}{% endfor %}{% endcapture %}{% endif %}
+{% assign news_sections = _sec_names | split: "|" %}
+
+{% comment %}
+  Tags index link policy — identical to news.html: honor site.tags_page when
+  set, otherwise only link when a /tags/ page exists in the build.
+{% endcomment %}
+{% assign tags_base = site.tags_page | default: "/tags/" %}
+{% assign _tags_linkable = false %}
+{% if site.tags_page %}
+  {% assign _tags_linkable = true %}
+{% else %}
+  {% assign _tags_index_page = site.html_pages | where: "url", tags_base | first %}
+  {% if _tags_index_page %}{% assign _tags_linkable = true %}{% endif %}
+{% endif %}
+
 {% assign path_parts = page.path | split: "/" %}
 {% assign section_name = "" %}
 {% for part in path_parts %}
@@ -99,7 +127,7 @@ layout: root
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb mb-0">
             <li class="breadcrumb-item">
-              <a href="{{ site.baseurl }}/news/" class="text-white-50 text-decoration-none">
+              <a href="{{ news_index_url | relative_url }}" class="text-white-50 text-decoration-none">
                 <i class="bi bi-newspaper me-1"></i>News
               </a>
             </li>
@@ -123,15 +151,21 @@ layout: root
 <div class="container-fluid bg-body-tertiary border-bottom py-2 mb-4">
   <div class="container-fluid px-4">
     <nav class="nav nav-pills flex-nowrap overflow-auto" style="scrollbar-width: none;">
-      {% for item in site.data.navigation.posts %}
+      {% for sec_name in news_sections %}
         {% assign is_active = false %}
-        {% if item.title == page.category or item.title == page.title %}
+        {% if sec_name == page.category or sec_name == page.title %}
           {% assign is_active = true %}
         {% endif %}
-        <a class="nav-link text-nowrap {% if is_active %}active{% else %}text-body-secondary{% endif %}" 
-           href="{{ item.url | replace: '/posts/', '/news/' | relative_url }}">
-          {% if item.icon %}<i class="bi {{ item.icon }} me-1"></i>{% endif %}
-          {{ item.title }}
+        {% assign _sec_nav = site.data.navigation.posts | where: "title", sec_name | first %}
+        {% if _sec_nav %}
+          {% assign _sec_url = _sec_nav.url | replace: '/posts/', news_base %}
+        {% else %}
+          {% capture _sec_url %}{{ news_base }}{{ sec_name | slugify }}/{% endcapture %}
+        {% endif %}
+        <a class="nav-link text-nowrap {% if is_active %}active{% else %}text-body-secondary{% endif %}"
+           href="{{ _sec_url | relative_url }}">
+          {% if _sec_nav.icon %}<i class="bi {{ _sec_nav.icon }} me-1"></i>{% endif %}
+          {{ sec_name }}
         </a>
       {% endfor %}
     </nav>
@@ -148,8 +182,9 @@ layout: root
       {% include navigation/section-sidebar.html 
          section_posts=section_posts 
          sub_categories=sub_categories 
-         page_title=page.title 
-         sidebar_id="sectionSidebar" 
+         page_title=page.title
+         sidebar_id="sectionSidebar"
+         section_style=section_style
       %}
     </div>
 
@@ -255,9 +290,11 @@ layout: root
               <h3 class="h4 mb-0">
                 <i class="bi bi-tag text-primary me-2"></i>{{ subcat | capitalize }}
               </h3>
-              <a href="{{ site.baseurl }}/tags/#{{ subcat | slugify }}" class="btn btn-outline-secondary btn-sm">
+              {% if _tags_linkable %}
+              <a href="{{ tags_base | relative_url }}#{{ subcat | slugify }}" class="btn btn-outline-secondary btn-sm">
                 View All <i class="bi bi-arrow-right ms-1"></i>
               </a>
+              {% endif %}
             </div>
             
             <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
@@ -383,7 +420,17 @@ layout: root
         <section id="all-posts" class="grid-section mb-5 scroll-mt-5">
           <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
             {% for gpost in section_posts %}
-              <div class="col" data-tags="{{ gpost.tags | join: ' ' | slugify }}">
+              {%- comment -%}
+                Slugify each tag separately and separate with a space. Joining
+                first and slugifying the result turned the separators into
+                hyphens, making a tag boundary indistinguishable from a hyphen
+                inside a slug ("edge-ai"), which broke filtering.
+                The trailing space is deliberate: guarding the separator with a
+                last-iteration conditional gives that conditional a
+                whitespace-only body, which Liquid treats as a blank block and
+                renders as nothing — silently gluing the tags together.
+              {%- endcomment -%}
+              <div class="col" data-tags="{% for t in gpost.tags %}{{ t | slugify }} {% endfor %}">
                 <div class="card h-100 border-0 shadow-sm hover-lift">
                   <div class="position-relative">
                     {% if gpost.breaking %}
@@ -446,7 +493,8 @@ layout: root
 
         <section id="all-posts" class="list-section mb-5 scroll-mt-5">
           {% for lpost in section_posts %}
-            <article class="card border-0 shadow-sm mb-3 hover-lift">
+            {%- comment -%} Per-tag slugify + space separator — see the grid branch above. {%- endcomment -%}
+            <article class="card border-0 shadow-sm mb-3 hover-lift" data-tags="{% for t in lpost.tags %}{{ t | slugify }} {% endfor %}">
               <div class="row g-0">
                 <div class="col-md-3">
                   <a href="{{ lpost.url | relative_url }}">
@@ -496,7 +544,7 @@ layout: root
         <div class="text-center py-5">
           <i class="bi bi-inbox fs-1 text-muted"></i>
           <p class="text-muted mt-3">No articles in this section yet.</p>
-          <a href="{{ site.baseurl }}/news/" class="btn btn-outline-primary">
+          <a href="{{ news_index_url | relative_url }}" class="btn btn-outline-primary">
             Browse all news
           </a>
         </div>
@@ -510,15 +558,21 @@ layout: root
           <i class="bi bi-compass me-2"></i>Explore Other Sections
         </h3>
         <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3">
-          {% for nav_item in site.data.navigation.posts %}
-            {% unless nav_item.title == page.category or nav_item.title == page.title %}
-              {% assign other_section_posts = all_site_posts | where_exp: "post", "post.categories contains nav_item.title" %}
+          {% for sec_name in news_sections %}
+            {% unless sec_name == page.category or sec_name == page.title %}
+              {% assign other_section_posts = all_site_posts | where_exp: "post", "post.categories contains sec_name" %}
+              {% assign _sec_nav = site.data.navigation.posts | where: "title", sec_name | first %}
+              {% if _sec_nav %}
+                {% assign _sec_url = _sec_nav.url | replace: '/posts/', news_base %}
+              {% else %}
+                {% capture _sec_url %}{{ news_base }}{{ sec_name | slugify }}/{% endcapture %}
+              {% endif %}
               <div class="col">
-                <a href="{{ nav_item.url | replace: '/posts/', '/news/' | relative_url }}" 
+                <a href="{{ _sec_url | relative_url }}"
                    class="card text-center h-100 text-decoration-none border-0 shadow-sm hover-lift">
                   <div class="card-body py-3">
-                    <i class="bi {{ nav_item.icon | default: 'bi-folder' }} fs-4 text-primary mb-2 d-block"></i>
-                    <h6 class="card-title mb-1 small">{{ nav_item.title }}</h6>
+                    <i class="bi {{ _sec_nav.icon | default: 'bi-folder' }} fs-4 text-primary mb-2 d-block"></i>
+                    <h6 class="card-title mb-1 small">{{ sec_name }}</h6>
                     <small class="text-muted">{{ other_section_posts.size }} articles</small>
                   </div>
                 </a>
@@ -555,17 +609,34 @@ layout: root
     btn.addEventListener('click', function() {
       const filter = this.dataset.filter;
       
-      // Update active button
+      // Update active state across every filter control on the page — the
+      // topic pills here and the section sidebar's topic buttons both carry
+      // [data-filter], so they stay in sync. Only pills get the btn-* colour
+      // swap; the sidebar's controls are .nav-link and style themselves off
+      // .active alone.
       document.querySelectorAll('[data-filter]').forEach(b => {
-        b.classList.remove('btn-primary', 'active');
-        b.classList.add('btn-outline-secondary');
+        b.classList.remove('active');
+        if (b.classList.contains('btn')) {
+          b.classList.remove('btn-primary');
+          b.classList.add('btn-outline-secondary');
+        }
       });
-      this.classList.remove('btn-outline-secondary');
-      this.classList.add('btn-primary', 'active');
+      this.classList.add('active');
+      if (this.classList.contains('btn')) {
+        this.classList.remove('btn-outline-secondary');
+        this.classList.add('btn-primary');
+      }
       
       // Filter cards
+      // Match whole tags, not substrings. `data-tags` is a space-separated list
+      // of individually-slugified tags, so a slug never spans a separator and
+      // filtering by "ai" no longer also matches a post tagged "edge-ai".
+      // (This used to disagree with the sidebar's own count: the badge is built
+      // in Liquid with `post.tags contains subcat` — exact membership — so a
+      // topic showing 5 posts could reveal 6 cards when clicked.)
       document.querySelectorAll('[data-tags]').forEach(card => {
-        if (filter === 'all' || card.dataset.tags.includes(filter)) {
+        const cardTags = (card.dataset.tags || '').split(' ').filter(Boolean);
+        if (filter === 'all' || cardTags.indexOf(filter) !== -1) {
           card.style.display = '';
         } else {
           card.style.display = 'none';