jekyll-theme-zer0 1.28.0 → 1.29.0

data/_includes/components/recipe-temp.html

@@ -0,0 +1,45 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-temp
+  Path:        _includes/components/recipe-temp.html
+  Purpose:     A temperature that follows the reader's unit choice — oven
+               settings, water temperature, doneness targets. Renders BOTH
+               scales by default so the page is complete without JavaScript;
+               the scaler then narrows it to whichever system is selected.
+  Params:      f (number, optional) — degrees Fahrenheit
+               c (number, optional) — degrees Celsius
+                 (give either one; the other is derived)
+               label (string, optional, default: "") — prefix, e.g. "Oven"
+               class (string, optional, default: "")
+  Depends on:  assets/js/recipe-scaler.js, _sass/components/_recipe.scss
+  Notes:       Derived values round to the nearest 5° above 100° — the
+               precision an oven dial actually has — and to the nearest degree
+               below it. Author both `f:` and `c:` to pin exact values.
+               Drop it straight into recipe prose:
+                 include components/recipe-temp.html f=375
+{%- endcomment -%}
+{%- if include.f == nil and include.c == nil -%}
+  {%- comment -%} ERROR: recipe-temp requires `f` or `c` {%- endcomment -%}
+{%- else -%}
+{%- if include.f != nil -%}
+  {%- assign _rt_f = include.f | round -%}
+{%- else -%}
+  {%- assign _rt_fraw = include.c | times: 9.0 | divided_by: 5.0 | plus: 32 -%}
+  {%- if _rt_fraw >= 100 -%}
+    {%- assign _rt_f = _rt_fraw | divided_by: 5.0 | round | times: 5 -%}
+  {%- else -%}
+    {%- assign _rt_f = _rt_fraw | round -%}
+  {%- endif -%}
+{%- endif -%}
+{%- if include.c != nil -%}
+  {%- assign _rt_c = include.c | round -%}
+{%- else -%}
+  {%- assign _rt_craw = include.f | minus: 32 | times: 5.0 | divided_by: 9.0 -%}
+  {%- if _rt_craw >= 100 -%}
+    {%- assign _rt_c = _rt_craw | divided_by: 5.0 | round | times: 5 -%}
+  {%- else -%}
+    {%- assign _rt_c = _rt_craw | round -%}
+  {%- endif -%}
+{%- endif -%}
+<span class="recipe-temp {{ include.class | default: '' }}" data-recipe-temp data-temp-f="{{ _rt_f }}" data-temp-c="{{ _rt_c }}">{% if include.label %}{{ include.label | escape }} {% endif %}{{ _rt_f }} °F ({{ _rt_c }} °C)</span>
+{%- endif -%}

data/_includes/components/search-modal.html

@@ -45,9 +45,9 @@
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="siteSearchModalLabel">
+                <h2 class="modal-title h5" id="siteSearchModalLabel">
                     <i class="bi bi-search me-2"></i>Search
-                </h5>
+                </h2>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">

data/_includes/components/shortcuts-modal.html

@@ -30,6 +30,9 @@
           <dt class="col-4 col-sm-3 text-end"><kbd>/</kbd></dt>
           <dd class="col-8 col-sm-9 mb-2">{{ ui.shortcuts_search | default: "Open search" }}</dd>
 
+          <dt class="col-4 col-sm-3 text-end"><kbd>⌘</kbd>/<kbd>Ctrl</kbd>+<kbd>K</kbd></dt>
+          <dd class="col-8 col-sm-9 mb-2">{{ ui.shortcuts_search | default: "Open search" }}</dd>
+
           <dt class="col-4 col-sm-3 text-end"><kbd>[</kbd></dt>
           <dd class="col-8 col-sm-9 mb-2">{{ ui.shortcuts_prev_section | default: "Previous section" }}</dd>
 

data/_includes/components/theme-info.html

@@ -54,7 +54,14 @@
     <div class="col-6">
       <div class="p-2 bg-body-tertiary rounded text-center">
         <small class="text-body-secondary d-block">Last Build</small>
-        <code class="small">{{ site.time | date: "%b %d, %H:%M" }}</code>
+        {%- comment -%}
+          data-testid is the stable hook the pixel-snapshot tier masks on
+          (test/visual/features/appearance-snapshot.spec.js). This stamp has
+          minute resolution, so it becomes an unconditional snapshot flake the
+          moment this panel is shown by default rather than inside a collapsed
+          offcanvas. Don't remove the attribute without updating that mask.
+        {%- endcomment -%}
+        <code class="small" data-testid="theme-build-stamp">{{ site.time | date: "%b %d, %H:%M" }}</code>
       </div>
     </div>
 

data/_includes/content/jsonld-software.html

@@ -9,22 +9,41 @@
            engines to accurately cite and describe the zer0-mistakes
            Jekyll theme as a SoftwareApplication entity.
 
+  OPT-IN ONLY — this describes THE THEME, not the site rendering it.
+  The payload below is hardcoded to zer0-mistakes: its RubyGems download
+  URL, its GitHub repository, its MIT licence, its feature list, its
+  mascot screenshot, and a Person node naming the theme's author. Emitted
+  from a consumer's homepage it asserts, in machine-readable form, that
+  THAT site is a free open-source Ruby gem authored by someone else — e.g.
+  a consulting practice's homepage claiming to be a developer tool.
+
+  It therefore renders only when a site explicitly opts in with
+  `jsonld_software_application: true` in _config.yml, which the theme's own
+  site does. Consumers get no software schema (their standard SEO metadata
+  is unaffected) unless they deliberately turn this on.
+
   Template Logic:
+  - Requires site.jsonld_software_application == true
   - Renders SoftwareApplication schema on the homepage only
   - Links to a WebPage wrapper via @id references
   - Pulls version, author, and description from site config
 
   Dependencies:
-  - _config.yml: site.url, site.title, site.description, site.author
+  - _config.yml: jsonld_software_application, site.url, site.title,
+    site.description, site.author
   - lib/jekyll-theme-zer0/version.rb (version referenced in config)
 
   Usage:
   - Included automatically in _includes/core/head.html
-  - Conditional: only renders when page.permalink == "/"
+  - Conditional: opted in AND page.permalink == "/"
   ===================================================================
 -->
 
-{% if page.permalink == "/" or page.url == "/" %}
+{%- assign _is_homepage = false -%}
+{%- if page.permalink == "/" or page.url == "/" -%}
+  {%- assign _is_homepage = true -%}
+{%- endif -%}
+{% if site.jsonld_software_application and _is_homepage %}
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",

data/_includes/core/footer.html

@@ -76,15 +76,16 @@
             </span>
           {% endif %}
           {% if forloop.last and powered_by_count > 0 %}
-                <a href="#"
-                   class="powered-by-link"
-                   data-bs-toggle="offcanvas"
-                   data-bs-target="#info-section"
-                   aria-label="View theme information and system details"
-                   title="Theme Info">
+                <button type="button"
+                        class="powered-by-link"
+                        data-bs-toggle="offcanvas"
+                        data-bs-target="#info-section"
+                        aria-haspopup="dialog"
+                        aria-label="View theme information and system details"
+                        title="Theme Info">
                   <i class="{{ site.default_icon }} bi-info-circle" aria-hidden="true"></i>
                   <span class="powered-by-link-text">Info</span>
-                </a>
+                </button>
               </span>
             </li>
           {% else %}
@@ -93,15 +94,16 @@
         {% endfor %}
         {% if powered_by_count == 0 %}
           <li>
-            <a href="#"
-               class="powered-by-link"
-               data-bs-toggle="offcanvas"
-               data-bs-target="#info-section"
-               aria-label="View theme information and system details"
-               title="Theme Info">
+            <button type="button"
+                    class="powered-by-link"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#info-section"
+                    aria-haspopup="dialog"
+                    aria-label="View theme information and system details"
+                    title="Theme Info">
               <i class="{{ site.default_icon }} bi-info-circle" aria-hidden="true"></i>
               <span class="powered-by-link-text">Info</span>
-            </a>
+            </button>
           </li>
         {% endif %}
       </ul>
@@ -239,9 +241,9 @@
                 <li class="list-inline-item"><a href="{{ site.terms_of_service_url | default: '/terms-of-service' | relative_url }}" class="text-light text-decoration-none">Terms of Service</a></li>
               {% endif %}
               <li class="list-inline-item">
-                <a href="#" class="text-light text-decoration-none" data-bs-toggle="modal" data-bs-target="#cookieSettingsModal">
+                <button type="button" class="footer-inline-button text-light text-decoration-none" data-bs-toggle="modal" data-bs-target="#cookieSettingsModal">
                   Cookie Preferences
-                </a>
+                </button>
               </li>
             </ul>
           </div>

data/_includes/core/head.html

@@ -51,10 +51,22 @@
 <script defer src="{{ '/assets/js/table-copy.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/ui-enhancements.js' | relative_url }}"></script>
 
+<!-- Page-view counter — injects its config and loads assets/js/page-views.js.
+     Renders nothing on its own; components/page-views.html places the badge.
+     Gated on site.page_views.enabled inside the include. -->
+{% include components/page-views-init.html %}
+
 <!-- ================================ -->
 <!-- THIRD PARTY INTEGRATIONS        -->
 <!-- ================================ -->
 
+<!-- Recipe scaling & unit conversion - Only on pages that render recipe
+     quantities: the `recipe` layout, or any page that opts in with
+     `recipe_tools: true` (e.g. a post embedding components/recipe-*.html). -->
+{% if page.layout == "recipe" or page.recipe_tools %}
+<script defer src="{{ '/assets/js/recipe-scaler.js' | relative_url }}"></script>
+{% endif %}
+
 <!-- Mermaid Diagrams - Conditional loading based on page front matter -->
 {% if page.mermaid %}
   {% include components/mermaid.html %}

data/_includes/core/header.html

@@ -58,7 +58,7 @@
         <!-- ========================== -->
         <!-- MAIN NAVIGATION CONTAINER -->
         <!-- ========================== -->
-        <nav class="container-xl order-2 order-lg-1 d-flex align-items-center gap-1 flex-nowrap navbar-main w-100" aria-label="Primary navigation">
+        <nav class="container-fluid order-2 order-lg-1 d-flex align-items-center gap-1 flex-nowrap navbar-main w-100" aria-label="Primary navigation">
 
             <!-- Leading cluster: sidebar toggle + brand + titles (grid column 1 on lg+) -->
             <div class="navbar-main-start d-flex align-items-center gap-1 gap-lg-2 min-w-0 flex-shrink-1 flex-grow-1">
@@ -151,8 +151,9 @@
             <!-- UTILITY CONTROLS          -->
             <!-- ========================== -->
             <div class="navbar-utility-controls d-flex align-items-center flex-shrink-0" role="group" aria-label="Utility controls">
-                <!-- Language Toggle (renders only when translation.languages is set) -->
-                {% include components/language-toggle.html %}
+                <!-- Language selection lives in the Settings offcanvas
+                     (components/info-section.html, Appearance tab) so the bar
+                     keeps its width for the main navigation items. -->
 
                 <!-- Search Modal Toggle -->
                 <button
@@ -161,10 +162,12 @@
                     data-search-toggle
                     aria-label="{{ ui.shortcuts_search | default: 'Open search' }}"
                     aria-haspopup="dialog"
-                    title="{{ ui.search_button_label | default: 'Search' }}"
+                    aria-keyshortcuts="/ Meta+K Control+K"
+                    title="{{ ui.search_button_title | default: 'Search — press / or Ctrl+K' }}"
                 >
                     <i class="{{site.default_icon}} bi-search" aria-hidden="true"></i>
                     <span class="nav-link-text d-none d-xl-inline ms-1">{{ ui.search_button_label | default: "Search" }}</span>
+                    <kbd class="nav-search-kbd d-none d-xl-inline-flex" aria-hidden="true">/</kbd>
                 </button>
 
                 <!-- Settings Offcanvas Toggle -->

data/_includes/navigation/section-sidebar.html

@@ -12,13 +12,17 @@
   - sub_categories: Array of unique tags/topics from section posts
   - page_title: Title of the current section
   - sidebar_id: Unique ID for the sidebar (default: "sectionSidebar")
-  
+  - section_style: The parent layout's display style, one of grid | list |
+    magazine (default: "grid"). Decides whether topics render as scroll
+    anchors or as filter buttons — see the Topic controls note below.
+
   Features:
   - Desktop: Fixed sticky sidebar on the left
   - Mobile: Offcanvas drawer
   - Topic navigation with article counts
   - Section statistics
-  - Smooth scroll to sections
+  - Smooth scroll to sections (magazine style, where scroll targets exist)
+  - Card filtering via [data-filter] (grid/list styles)
   
   Dependencies:
   - Bootstrap 5 offcanvas component
@@ -30,6 +34,42 @@
 {% assign section_posts = include.section_posts %}
 {% assign sub_categories = include.sub_categories %}
 {% assign page_title = include.page_title | default: page.title %}
+{% assign section_style = include.section_style | default: "grid" %}
+
+{% comment %}
+  Topic controls: link vs filter.
+
+  Only the `magazine` branch of _layouts/section.html emits per-subcategory
+  `<section id="{{ subcat | slugify }}">` scroll targets, and only for the first
+  5 sub-categories that still have a post once the featured hero is excluded.
+  The `grid` and `list` branches emit no sub-topic ids at all — they filter
+  `[data-tags]` cards through `[data-filter]` buttons instead.
+
+  So an <a href="#slug"> here is only ever valid under magazine, and only for
+  that exact set. Emitting one anywhere else produced guaranteed-dead anchors:
+  invalid markup, a dead click for keyboard/AT users, and a scrollspy that could
+  never activate. `_linkable_subcats` below reproduces the layout's set exactly;
+  every other style renders filter buttons, which the layout's existing
+  `[data-filter]` handler already wires up with no extra JS.
+{% endcomment %}
+{% assign _anchors_resolve = false %}
+{% if section_style == "magazine" %}{% assign _anchors_resolve = true %}{% endif %}
+
+{% assign _linkable_subcats = "" | split: "" %}
+{% if _anchors_resolve %}
+  {% assign _featured = section_posts | where: "featured", true | first %}
+  {% unless _featured %}{% assign _featured = section_posts | first %}{% endunless %}
+  {% for subcat in sub_categories limit: 5 %}
+    {% assign _subcat_posts = section_posts | where_exp: "post", "post.tags contains subcat" %}
+    {% assign _remaining = 0 %}
+    {% for p in _subcat_posts %}
+      {% unless p.url == _featured.url %}{% assign _remaining = _remaining | plus: 1 %}{% endunless %}
+    {% endfor %}
+    {% if _remaining > 0 %}
+      {% assign _linkable_subcats = _linkable_subcats | push: subcat %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
 
 <!-- ================================ -->
 <!-- DESKTOP SIDEBAR (Fixed Sticky)   -->
@@ -47,21 +87,37 @@
       </div>
       <div class="card-body p-0">
         <nav class="nav flex-column sidebar-nav">
+          {% if _anchors_resolve %}
           <a class="nav-link active" href="#all-posts" data-section="all-posts">
             <i class="bi bi-grid me-2"></i>
             <span class="nav-text">All Articles</span>
             <span class="badge bg-secondary ms-auto">{{ section_posts.size }}</span>
           </a>
-          {% for subcat in sub_categories limit: 15 %}
+          {% for subcat in _linkable_subcats %}
             {% assign subcat_posts = section_posts | where_exp: "post", "post.tags contains subcat" %}
-            {% if subcat_posts.size > 0 %}
             <a class="nav-link" href="#{{ subcat | slugify }}" data-section="{{ subcat | slugify }}">
               <i class="bi bi-tag me-2"></i>
               <span class="nav-text">{{ subcat | capitalize }}</span>
               <span class="badge bg-light text-dark ms-auto">{{ subcat_posts.size }}</span>
             </a>
+          {% endfor %}
+          {% else %}
+          <button type="button" class="nav-link text-start active" data-filter="all">
+            <i class="bi bi-grid me-2"></i>
+            <span class="nav-text">All Articles</span>
+            <span class="badge bg-secondary ms-auto">{{ section_posts.size }}</span>
+          </button>
+          {% for subcat in sub_categories limit: 15 %}
+            {% assign subcat_posts = section_posts | where_exp: "post", "post.tags contains subcat" %}
+            {% if subcat_posts.size > 0 %}
+            <button type="button" class="nav-link text-start" data-filter="{{ subcat | slugify }}">
+              <i class="bi bi-tag me-2"></i>
+              <span class="nav-text">{{ subcat | capitalize }}</span>
+              <span class="badge bg-light text-dark ms-auto">{{ subcat_posts.size }}</span>
+            </button>
             {% endif %}
           {% endfor %}
+          {% endif %}
         </nav>
       </div>
       {% comment %} Existence-gate the tags index: a remote-theme consumer without
@@ -107,26 +163,40 @@
 <!-- ================================ -->
 <div class="offcanvas offcanvas-start" tabindex="-1" id="{{ sidebar_id }}" aria-labelledby="{{ sidebar_id }}Label">
   <div class="offcanvas-header bg-primary text-white">
-    <h5 class="offcanvas-title" id="{{ sidebar_id }}Label">
+    <h2 class="offcanvas-title h5" id="{{ sidebar_id }}Label">
       <i class="bi bi-bookmark me-2"></i>{{ page_title }} Topics
-    </h5>
+    </h2>
     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body p-0">
     <nav class="nav flex-column">
+      {% if _anchors_resolve %}
       <a class="nav-link active bg-light py-3 border-bottom" href="#all-posts" data-bs-dismiss="offcanvas">
         <i class="bi bi-grid me-2"></i>All Articles
         <span class="badge bg-secondary float-end">{{ section_posts.size }}</span>
       </a>
-      {% for subcat in sub_categories %}
+      {% for subcat in _linkable_subcats %}
         {% assign subcat_posts = section_posts | where_exp: "post", "post.tags contains subcat" %}
-        {% if subcat_posts.size > 0 %}
         <a class="nav-link text-body-secondary py-3 border-bottom" href="#{{ subcat | slugify }}" data-bs-dismiss="offcanvas">
           <i class="bi bi-tag me-2"></i>{{ subcat | capitalize }}
           <span class="badge bg-light text-dark float-end">{{ subcat_posts.size }}</span>
         </a>
+      {% endfor %}
+      {% else %}
+      <button type="button" class="nav-link text-start active bg-light py-3 border-bottom w-100" data-filter="all" data-bs-dismiss="offcanvas">
+        <i class="bi bi-grid me-2"></i>All Articles
+        <span class="badge bg-secondary float-end">{{ section_posts.size }}</span>
+      </button>
+      {% for subcat in sub_categories %}
+        {% assign subcat_posts = section_posts | where_exp: "post", "post.tags contains subcat" %}
+        {% if subcat_posts.size > 0 %}
+        <button type="button" class="nav-link text-start text-body-secondary py-3 border-bottom w-100" data-filter="{{ subcat | slugify }}" data-bs-dismiss="offcanvas">
+          <i class="bi bi-tag me-2"></i>{{ subcat | capitalize }}
+          <span class="badge bg-light text-dark float-end">{{ subcat_posts.size }}</span>
+        </button>
         {% endif %}
       {% endfor %}
+      {% endif %}
     </nav>
     {% if _tags_page %}
     <div class="p-3">
@@ -169,6 +239,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  /* In grid/list styles the topic controls are <button data-filter> (there is
+     no per-topic scroll target to link to). Bootstrap's .nav-link already
+     clears button background/border; these are the two properties a <button>
+     still needs to render identically to the anchor form. */
+  .sidebar-nav button.nav-link,
+  .offcanvas button.nav-link {
+    width: 100%;
+    text-align: left;
+  }
   
   /* Offcanvas mobile styling */
   .offcanvas .nav-link {
@@ -194,8 +274,10 @@
           if (target) {
             target.scrollIntoView({ behavior: 'smooth' });
             
-            // Update active state in sidebar
-            document.querySelectorAll('.sidebar-nav .nav-link').forEach(link => {
+            // Update active state in sidebar. Scoped to anchors: in grid/list
+            // styles the topic controls are <button data-filter> elements whose
+            // active state belongs to the layout's filter handler, not here.
+            document.querySelectorAll('.sidebar-nav a.nav-link').forEach(link => {
               link.classList.remove('active');
             });
             
@@ -220,7 +302,7 @@
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const id = entry.target.getAttribute('id');
-          document.querySelectorAll('.sidebar-nav .nav-link').forEach(link => {
+          document.querySelectorAll('.sidebar-nav a.nav-link').forEach(link => {
             link.classList.remove('active');
             if (link.getAttribute('href') === `#${id}`) {
               link.classList.add('active');

data/_includes/navigation/sidebar-left.html

@@ -79,7 +79,8 @@
               aria-controls="bdSidebar"
               aria-expanded="true"
               aria-label="Hide documentation sidebar"
-              title="Hide documentation sidebar">
+              aria-keyshortcuts="b"
+              title="Hide documentation sidebar (b)">
         <i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i>
         <span class="visually-hidden">Hide documentation sidebar</span>
       </button>

data/_includes/navigation/sidebar-right.html

@@ -45,7 +45,8 @@
                 aria-controls="tocContents"
                 aria-expanded="true"
                 aria-label="Hide table of contents"
-                title="Hide table of contents">
+                aria-keyshortcuts="t"
+                title="Hide table of contents (t)">
           <i class="bi bi-layout-sidebar-inset-reverse" aria-hidden="true"></i>
           <span class="visually-hidden">Hide table of contents</span>
         </button>