jekyll-theme-zer0 1.28.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

@@ -48,10 +48,21 @@
 {%- 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-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 %}
 
@@ -107,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 -%}

data/_layouts/section.html

@@ -182,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>
 
@@ -419,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 %}
@@ -482,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 }}">
@@ -597,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';

data/_sass/components/_callout.scss

@@ -17,7 +17,7 @@
 
   background: var(--zer0-color-bg-elevated);
   border-left: 0.25rem solid var(--zer0-callout-color, var(--zer0-color-primary));
-  border-radius: 0.375rem;
+  border-radius: var(--zer0-radius);
   color: var(--zer0-color-ink);
 }
 

data/_sass/components/_footer.scss

@@ -64,6 +64,12 @@
     }
   }
 
+  // Element-agnostic: applied to <a> (external credits), <span> (credits with
+  // no url) and <button> (the in-page "Info" dialog trigger — it opens the
+  // #info-section offcanvas rather than navigating, so it is a button, not a
+  // link; WCAG 4.1.2). Reboot already inherits margin/font for <button>, but
+  // not background, border or colour — reset those and restate the colours
+  // `.bd-footer a` supplies so all three elements render identically.
   .powered-by-link {
     display: inline-flex;
     align-items: center;
@@ -75,10 +81,18 @@
     text-decoration: none;
     border-radius: var(--bs-border-radius-sm, 0.25rem);
     white-space: nowrap;
+    // Reboot sets `-webkit-appearance: button`, which the unprefixed property
+    // does not cancel on older WebKit — reset both.
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: 0;
+    color: var(--bs-body-color);
 
     &:hover,
     &:focus-visible {
       text-decoration: none;
+      color: var(--bs-link-hover-color);
     }
   }
 
@@ -132,6 +146,9 @@
   // Block padding grows the tap target without changing the visual text size;
   // icon links get an explicit minimum box. (`d-block` links — e.g. the
   // truncated Latest Posts titles — keep their display but gain the padding.)
+  // `> button` is matched alongside `> a` because the policy row's "Cookie
+  // Preferences" control is a <button> (it opens a modal rather than
+  // navigating) and must keep the same 1.75rem tap target as its siblings.
   .footer-dark-block {
     ul.list-unstyled li > a,
     p > a {
@@ -139,7 +156,8 @@
       padding-block: 0.25rem;
     }
 
-    ul.list-inline li > a {
+    ul.list-inline li > a,
+    ul.list-inline li > button {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -171,6 +189,24 @@
     }
   }
 
+  // A <button> that must sit in running text exactly like the <a> beside it —
+  // used by the "Cookie Preferences" control, which opens #cookieSettingsModal
+  // rather than navigating (WCAG 4.1.2). Reboot inherits margin/font for
+  // <button> but leaves the UA background, border and padding in place, so
+  // strip those; colour comes from the `.text-light` utility as before.
+  .footer-inline-button {
+    // Reboot sets `-webkit-appearance: button`, which the unprefixed property
+    // does not cancel on older WebKit — reset both.
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    vertical-align: baseline;
+    text-align: inherit;
+    cursor: pointer;
+  }
+
   .footer-policy-links {
     @media (max-width: 767.98px) {
       font-size: 0.8125rem;

data/_sass/components/_page-views.scss

@@ -0,0 +1,36 @@
+// Feature: ZER0-083
+// ============================================================================
+// Page-view counter badge
+// ----------------------------------------------------------------------------
+// Markup:     _includes/components/page-views.html
+// Behaviour:  assets/js/page-views.js
+// Config:     _config.yml → page_views:
+// Theming:    inherits the surrounding meta-row color (.post-meta is
+//             .text-muted), so it follows [data-bs-theme] light/dark for free.
+// ============================================================================
+
+.page-views {
+  display: inline-flex;
+  align-items: baseline;
+  gap: .25rem;
+  white-space: nowrap;
+
+  // The badge is server-rendered hidden and revealed by JS once a count is
+  // known. `!important` because a utility class on the include's `class`
+  // param (e.g. `d-inline-flex`) would otherwise win over [hidden].
+  &[hidden] {
+    display: none !important;
+  }
+
+  // Digits change as the count updates — tabular figures keep the meta row
+  // from reflowing when 9 becomes 10.
+  &__count {
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Leading separator for meta rows; hides with the badge because it lives
+  // inside it (see the include's `separator` param).
+  &__sep {
+    display: inline;
+  }
+}