RubyGems - jekyll-theme-zer0 - Versions diffs - 1.27.0 → 1.28.0 - Mend

jekyll-theme-zer0 1.27.0 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +386 -4
data/_data/consumers.yml +147 -0
data/_data/features.yml +77 -5
data/_data/i18n/fr.yml +98 -0
data/_data/i18n/manifest.yml +1502 -0
data/_data/navigation/docs.yml +2 -0
data/_data/navigation/main.yml +6 -0
data/_data/series.yml +19 -0
data/_data/theme-manifest.yml +348 -266
data/_includes/README.md +21 -2
data/_includes/analytics/google-tag-manager-body.html +11 -2
data/_includes/analytics/google-tag-manager-head.html +16 -6
data/_includes/analytics/posthog.html +33 -4
data/_includes/components/abc-letter.html +43 -0
data/_includes/components/book-card.html +42 -0
data/_includes/components/book-nav.html +80 -0
data/_includes/components/book-plate.html +31 -0
data/_includes/components/book-toc.html +47 -0
data/_includes/components/bookshelf.html +68 -0
data/_includes/components/card-grid.html +60 -0
data/_includes/components/data-card.html +95 -0
data/_includes/components/halfmoon.html +5 -1
data/_includes/components/page-feedback.html +65 -2
data/_includes/components/theme-controls-bar.html +10 -2
data/_includes/components/theme-customizer.html +8 -2
data/_includes/content/seo.html +9 -3
data/_includes/core/color-mode-init.html +13 -4
data/_includes/core/favicon.html +46 -0
data/_includes/core/head.html +9 -0
data/_includes/custom/body-end.html +18 -0
data/_includes/custom/body-start.html +17 -0
data/_includes/custom/footer.html +18 -0
data/_includes/custom/head.html +18 -0
data/_includes/navigation/local-graph.html +28 -2
data/_includes/navigation/nav-tree.html +3 -3
data/_includes/navigation/sidebar-config.html +21 -0
data/_includes/navigation/sidebar-nav.html +4 -0
data/_includes/navigation/sidebar-pagetree.html +150 -0
data/_includes/navigation/unified-drawer.html +8 -2
data/_includes/obsidian/full-graph.html +165 -136
data/_layouts/404.html +260 -0
data/_layouts/README.md +2 -0
data/_layouts/book-abc.html +106 -0
data/_layouts/book-story.html +91 -0
data/_layouts/book.html +113 -0
data/_layouts/collection.html +17 -5
data/_layouts/home.html +5 -2
data/_layouts/landing.html +9 -0
data/_layouts/news.html +155 -31
data/_layouts/root.html +16 -2
data/_layouts/section.html +57 -15
data/_sass/components/_book.scss +423 -0
data/_sass/core/_navbar.scss +13 -0
data/_sass/core/_obsidian.scss +286 -6
data/_sass/theme/_backgrounds.scss +21 -8
data/assets/css/main.scss +1 -0
data/assets/js/auto-hide-nav.js +5 -1
data/assets/js/halfmoon.js +26 -0
data/assets/js/obsidian-graph.js +702 -264
data/assets/js/obsidian-local-graph.js +161 -54
data/assets/js/search-modal.js +4 -1
data/scripts/bin/manifest +31 -4
data/scripts/bin/validate +5 -1
data/scripts/install/README.md +47 -6
data/scripts/install/ai/client.sh +302 -93
data/scripts/install/ai/prompts/spec.schema.json +1 -1
data/scripts/install/ai/wizard.sh +10 -5
data/scripts/install/apply.sh +7 -3
data/scripts/install/cli.sh +54 -4
data/scripts/install/config.sh +167 -0
data/scripts/install/doctor.sh +38 -0
data/scripts/install/plan.sh +10 -0
data/scripts/install/spec.sh +15 -7
data/scripts/install/template.sh +4 -0
data/scripts/propagate.rb +277 -0
data/scripts/translate.rb +90 -0
metadata +27 -2

data/_includes/README.md CHANGED Viewed

@@ -9,6 +9,7 @@ This directory has been reorganized for better maintainability and clarity. File
 Essential layout components that form the foundation of the site:
 - `head.html` - HTML document head with meta tags, scripts, and styles
+- `favicon.html` - Favicon / browser-identity tags (icon links, apple-touch, manifest, theme-color) driven by the optional `favicon:` config block
 - `header.html` - Main site header with navigation
 - `footer.html` - Site footer (if exists)
 - `branding.html` - Site branding and title display
@@ -34,8 +35,8 @@ All navigation-related components:
 Analytics and tracking integrations:
 - `google-analytics.html` - Google Analytics tracking
-- `google-tag-manager-head.html` - GTM head section
-- `google-tag-manager-body.html` - GTM body section
+- `google-tag-manager-head.html` - GTM head section (emits nothing unless `google_tag_manager:` is set in `_config.yml`)
+- `google-tag-manager-body.html` - GTM body section (same config gate)
 ### `components/`
@@ -55,6 +56,13 @@ Reusable UI components and widgets:
 - `js-cdn.html` - CDN JavaScript libraries
 - `preview-image.html` - Consistent preview image rendering with lazy loading
 - `post-card.html` - Reusable post card component for listings
+- `data-card.html` - One generic card rendered from a plain data hash (title/url/icon/badge/meta/buttons schema in its header)
+- `card-grid.html` - Responsive grid of `data-card`s from any data array — hub dashboards, fleet registries, service grids
+- `bookshelf.html` - Grid of every book in the `books` collection (home-page library)
+- `book-card.html` - One book's portrait cover card (bookshelf tile)
+- `book-toc.html` - Ordered story/chapter list for one book
+- `book-nav.html` - Prev/next-story + contents navigation inside a book
+- `book-plate.html` - Full-width illustration figure with optional caption for story pages
 ### `content/`
@@ -79,6 +87,17 @@ Documentation and reference materials:
 - `bootstrap-docs.html` - Bootstrap documentation (moved from style.html)
+### `custom/` — consumer extension hooks
+Empty stubs the theme includes at fixed points in the page chrome. A consumer site creates a file at the same path to inject markup there — **no fork of `root.html`, `head.html`, or `footer.html` needed**, so theme updates keep flowing without merge drift:
+- `custom/head.html` - end of `<head>` (JSON-LD, font preloads, verification tags, extra meta)
+- `custom/body-start.html` - immediately after `<body>` (e.g. GTM `<noscript>`)
+- `custom/footer.html` - after the theme footer, before the cookie-consent banner
+- `custom/body-end.html` - last thing before `</body>` (site scripts, third-party widgets)
+The stubs ship empty (comment-only) and render nothing until shadowed.
 ## Usage
 When including files in layouts or other templates, use the full path:

data/_includes/analytics/google-tag-manager-body.html CHANGED Viewed

@@ -1,9 +1,18 @@
 {% comment %} Feature: ZER0-039 {% endcomment %}
+{%- comment -%}
+  Component:   google-tag-manager-body
+  Path:        _includes/analytics/google-tag-manager-body.html
+  Purpose:     Google Tag Manager noscript fallback (body section). Config-driven:
+               emits nothing unless the site sets a container ID.
+  Params:      none — reads `google_tag_manager: "<container-id>"` from _config.yml
+  Depends on:  google-tag-manager-head.html (loader)
+{%- endcomment -%}
+{%- if site.google_tag_manager -%}
 <!-- Google Tag Manager (noscript) -->
     <noscript>
-        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NN8P7RZ"
+        <iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager }}"
                 height="0" width="0" style="display:none;visibility:hidden">
         </iframe>
     </noscript>
 <!-- End Google Tag Manager (noscript) -->
-<!-- source https://tagmanager.google.com/#/admin/accounts/6005859084/containers/58386588/install?containerDraftId=2 -->
+{%- endif -%}

data/_includes/analytics/google-tag-manager-head.html CHANGED Viewed

@@ -1,8 +1,17 @@
 {% comment %} Feature: ZER0-039 {% endcomment %}
-<!--
-  title: Google Tag Manager
-  file:
--->
+{%- comment -%}
+  Component:   google-tag-manager-head
+  Path:        _includes/analytics/google-tag-manager-head.html
+  Purpose:     Google Tag Manager loader (head section). Config-driven: emits
+               nothing unless the site sets a container ID, so consumer sites
+               never inherit this theme's own GTM container.
+  Params:      none — reads `google_tag_manager: "<container-id>"` from _config.yml
+  Depends on:  google-tag-manager-body.html (optional noscript counterpart)
+  Notes:       Previously the container ID was hardcoded, silently enrolling
+               every consumer site's production build into the theme owner's
+               GTM container. Set your own ID (or leave unset for no GTM).
+{%- endcomment -%}
+{%- if site.google_tag_manager -%}
 <script>
     // Skip GTM on local/dev hostnames even if a prod build is served locally (Docker/CI preview).
     (function () {
@@ -13,7 +22,8 @@
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
         j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer','GTM-NN8P7RZ');
+        })(window,document,'script','dataLayer','{{ site.google_tag_manager }}');
     })();
     </script>
-    <!-- End Google Tag Manager -->
+    <!-- End Google Tag Manager -->
+{%- endif -%}

data/_includes/analytics/posthog.html CHANGED Viewed

@@ -64,6 +64,9 @@ Privacy: Respects Do Not Track and provides opt-out mechanisms
     capturePageleave: {{ site.posthog.capture_pageleave | default: true }},
     disableCookie: {{ site.posthog.disable_cookie | default: false }},
     respectDnt: {{ site.posthog.respect_dnt | default: true }},
+    respectGpc: {{ site.posthog.privacy.respect_gpc | default: true }},
+    requireConsent: {{ site.posthog.privacy.require_consent | default: false }},
+    geoipDisable: {{ site.posthog.privacy.geoip_disable | default: false }},
     crossSubdomainCookie: {{ site.posthog.cross_subdomain_cookie | default: false }},
     secureCookie: {{ site.posthog.secure_cookie | default: true }},
     persistence: '{{ site.posthog.persistence | default: "localStorage+cookie" }}',
@@ -74,9 +77,28 @@ Privacy: Respects Do Not Track and provides opt-out mechanisms
     }
   };
-  {% comment %} Check for Do Not Track before loading {% endcomment %}
-  if (window.posthogConfig.respectDnt && navigator.doNotTrack === '1') {
-    console.log('PostHog: Respecting Do Not Track setting');
+  {% comment %} Consent gate (privacy.require_consent): until the visitor
+     accepts the "analytics" category in the theme's cookie-consent banner
+     (localStorage "zer0-cookie-consent"), PostHog starts opted OUT with
+     memory-only persistence — no cookies, nothing stored. The banner's
+     applyConsent() flips opt-in/opt-out live once a choice is made. {% endcomment %}
+  window.__phHasAnalyticsConsent = true;
+  if (window.posthogConfig.requireConsent) {
+    window.__phHasAnalyticsConsent = false;
+    try {
+      var __phStored = window.localStorage.getItem('zer0-cookie-consent');
+      if (__phStored) {
+        var __phConsent = JSON.parse(__phStored);
+        window.__phHasAnalyticsConsent = __phConsent && __phConsent.analytics === true;
+      }
+    } catch (e) { /* localStorage unavailable — stay opted out */ }
+  }
+  {% comment %} Honor browser privacy signals before loading: Do Not Track
+     and Global Privacy Control (GPC is a legal signal under CCPA/CPRA). {% endcomment %}
+  if ((window.posthogConfig.respectDnt && navigator.doNotTrack === '1') ||
+      (window.posthogConfig.respectGpc && window.navigator.globalPrivacyControl === true)) {
+    console.log('PostHog: respecting browser privacy signal (DNT/GPC)');
   } else {
     {% comment %} PostHog Loading Script {% endcomment %}
     !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init Rr Mr fi Or Ar ci Tr Cr capture Mi calculateEventProperties Lr register register_once register_for_session unregister unregister_for_session Hr getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ur jr createPersonProfile zr kr Br opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Dr debug M Nr getPageViewId captureTraceFeedback captureTraceMetric $r".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
@@ -91,7 +113,8 @@ Privacy: Respects Do Not Track and provides opt-out mechanisms
       disable_cookie: window.posthogConfig.disableCookie,
       cross_subdomain_cookie: window.posthogConfig.crossSubdomainCookie,
       secure_cookie: window.posthogConfig.secureCookie,
-      persistence: window.posthogConfig.persistence,
+      persistence: window.__phHasAnalyticsConsent ? window.posthogConfig.persistence : 'memory',
+      opt_out_capturing_by_default: !window.__phHasAnalyticsConsent,
       session_recording: window.posthogConfig.sessionRecording,
       {% if site.posthog.privacy.ip_anonymization %}
       ip: false,
@@ -100,6 +123,12 @@ Privacy: Respects Do Not Track and provides opt-out mechanisms
         {% comment %} PostHog loaded successfully {% endcomment %}
         console.log('PostHog analytics loaded successfully');
+        {% comment %} privacy.geoip_disable: stop PostHog from resolving
+           IP to location on every event {% endcomment %}
+        if (window.posthogConfig.geoipDisable) {
+          posthog.register({ '$geoip_disable': true });
+        }
         {% comment %} Track Jekyll-specific page properties {% endcomment %}
         posthog.register({
           'site_title': '{{ site.title }}',

data/_includes/components/abc-letter.html ADDED Viewed

@@ -0,0 +1,43 @@
+{% comment %} Feature: ZER0-081 {% endcomment %}
+{%- comment -%}
+  Component:   abc-letter
+  Path:        _includes/components/abc-letter.html
+  Purpose:     One card of an ABC board book — the illustration (or a friendly
+               "coming soon" placeholder), a big letter badge, the word, and the
+               read-aloud tagline. Rendered once per `alphabet:` entry by
+               _layouts/book-abc.html.
+  Params:      entry (hash, required) — an alphabet entry with keys:
+               letter, word, tagline, image, alt, status ("planned"|"rendered")
+  Depends on:  components/preview-image.html,
+               _sass/components/_book.scss (.abc-letter, .abc-letter-*)
+  Notes:       The big letter is HTML typography, never baked into the art (so
+               raster models never garble it). A `status: planned` entry (no
+               rendered plate yet) shows a coloured placeholder tile instead of
+               a broken image, so the book reads end-to-end before any art runs.
+{%- endcomment -%}
+{%- if include.entry == nil -%}
+  {%- comment -%} ERROR: abc-letter requires `entry` {%- endcomment -%}
+{%- else -%}
+{%- assign _e = include.entry -%}
+{%- assign _letter = _e.letter -%}
+{%- comment -%} A plate counts as rendered only when it has an image AND is not
+    still "planned". Branch inline: Liquid's assign does not reliably apply the
+    "not-equals" comparison, so the condition lives in the if-tag below. {%- endcomment -%}
+<article class="abc-letter" id="letter-{{ _letter | downcase }}">
+  <div class="abc-letter-plate">
+    {%- if _e.image and _e.status != "planned" -%}
+      {%- include components/preview-image.html src=_e.image alt=_e.alt class="abc-letter-img" loading="lazy" -%}
+    {%- else -%}
+      <div class="abc-letter-placeholder" role="img" aria-label="{{ _e.alt | default: _e.word | escape }} — illustration coming soon">
+        <span class="abc-letter-glyph" aria-hidden="true">{{ _letter }}</span>
+        <span class="abc-letter-planned">illustration coming soon</span>
+      </div>
+    {%- endif -%}
+    <span class="abc-letter-badge" aria-hidden="true">{{ _letter }}</span>
+  </div>
+  <p class="abc-letter-word">{{ _e.word }}</p>
+  {%- if _e.tagline -%}
+  <p class="abc-letter-tagline">{{ _e.tagline }}</p>
+  {%- endif -%}
+</article>
+{%- endif -%}

data/_includes/components/book-card.html ADDED Viewed

@@ -0,0 +1,42 @@
+{% comment %} Feature: ZER0-080 {% endcomment %}
+{%- comment -%}
+  Component:   book-card
+  Path:        _includes/components/book-card.html
+  Purpose:     Bookshelf card for one book — portrait cover, title, subtitle,
+               chapter count, and audience badge, linking to the book page.
+  Params:      book (document, required) — a `books` collection doc with
+               `layout: book` (the book's landing page)
+  Depends on:  components/preview-image.html,
+               _sass/components/_book.scss (.book-card, .book-cover-frame)
+  Notes:       Chapter count is derived live from the collection so the card
+               never goes stale. Whole card is one link for a big tap target.
+{%- endcomment -%}
+{%- if include.book == nil -%}
+  {%- comment -%} ERROR: book-card requires `book` {%- endcomment -%}
+{%- else -%}
+{%- assign _book = include.book -%}
+{%- assign _slug = _book.book | default: _book.slug -%}
+{%- assign _is_abc = _book.layout == "book-abc" -%}
+{%- assign _chapters = site.books | where: "book", _slug | where_exp: "doc", "doc.chapter" -%}
+{%- assign _cover = _book.cover_image | default: _book.preview | default: site.teaser -%}
+<article class="book-card h-100">
+  <a href="{{ _book.url | relative_url }}" class="d-block text-decoration-none text-body h-100">
+    <div class="book-cover-frame mb-3">
+      {%- include components/preview-image.html src=_cover alt=_book.title class="" -%}
+    </div>
+    <h3 class="h5 mb-1">{{ _book.title }}</h3>
+    {%- if _book.subtitle -%}
+    <p class="text-body-secondary small mb-2">{{ _book.subtitle }}</p>
+    {%- endif -%}
+    <p class="small text-body-secondary mb-0">
+      {%- if _is_abc -%}
+      {%- assign _letters = _book.alphabet | size -%}
+      <i class="bi bi-type me-1" aria-hidden="true"></i>{{ _letters }} {% if _letters == 1 %}letter{% else %}letters{% endif %}
+      {%- else -%}
+      <i class="bi bi-book me-1" aria-hidden="true"></i>{{ _chapters.size }} {% if _chapters.size == 1 %}story{% else %}stories{% endif %}
+      {%- endif -%}
+      {%- if _book.audience %} <span class="mx-1" aria-hidden="true">•</span> {{ _book.audience }}{% endif -%}
+    </p>
+  </a>
+</article>
+{%- endif -%}

data/_includes/components/book-nav.html ADDED Viewed

@@ -0,0 +1,80 @@
+{% comment %} Feature: ZER0-080 {% endcomment %}
+{%- comment -%}
+  Component:   book-nav
+  Path:        _includes/components/book-nav.html
+  Purpose:     Previous/next story navigation within one book, with a
+               "Contents" link back to the book's landing page in the middle.
+  Params:      book (string, required)    — book slug matching chapters' `book:`
+               chapter (number, required) — the current chapter number
+  Depends on:  the `books` collection,
+               _sass/components/_post-navigation.scss (.post-nav-card reuse)
+  Notes:       Ordering comes from the numeric `chapter:` front matter, not
+               dates, so books read cover-to-cover. Reuses the article
+               post-nav-card styles for a consistent feel.
+{%- endcomment -%}
+{%- if include.book == nil or include.chapter == nil -%}
+  {%- comment -%} ERROR: book-nav requires `book` and `chapter` {%- endcomment -%}
+{%- else -%}
+{%- assign _chapters = site.books | where: "book", include.book | where_exp: "doc", "doc.chapter" | sort: "chapter" -%}
+{%- assign _book_page = site.books | where: "book", include.book | where: "layout", "book" | first -%}
+{%- assign _prev = nil -%}
+{%- assign _next = nil -%}
+{%- for _ch in _chapters -%}
+  {%- if _ch.chapter == include.chapter -%}
+    {%- unless forloop.first -%}
+      {%- assign _i = forloop.index0 | minus: 1 -%}
+      {%- assign _prev = _chapters[_i] -%}
+    {%- endunless -%}
+    {%- unless forloop.last -%}
+      {%- assign _i = forloop.index0 | plus: 1 -%}
+      {%- assign _next = _chapters[_i] -%}
+    {%- endunless -%}
+    {%- break -%}
+  {%- endif -%}
+{%- endfor -%}
+<nav class="book-story-nav my-5 pt-4 border-top" aria-label="Story navigation">
+  <div class="row g-3 align-items-stretch">
+    <div class="col-md-5">
+      {%- if _prev -%}
+      <a href="{{ _prev.url | relative_url }}" class="post-nav-card post-nav-card--prev">
+        <div class="post-nav-card__body">
+          <small class="post-nav-card__label"><i class="bi bi-chevron-left me-1" aria-hidden="true"></i>Previous story</small>
+          <span class="post-nav-card__title">{{ _prev.title | truncate: 50 }}</span>
+        </div>
+      </a>
+      {%- else -%}
+      <div class="post-nav-card post-nav-card--prev post-nav-card--disabled" aria-disabled="true">
+        <div class="post-nav-card__body">
+          <small class="post-nav-card__label"><i class="bi bi-chevron-left me-1" aria-hidden="true"></i>Previous story</small>
+          <span class="post-nav-card__title text-muted">This is the first story</span>
+        </div>
+      </div>
+      {%- endif -%}
+    </div>
+    <div class="col-md-2 d-flex">
+      {%- if _book_page -%}
+      <a href="{{ _book_page.url | relative_url }}" class="btn btn-outline-secondary w-100 align-self-center" aria-label="Back to {{ _book_page.title | escape }} contents">
+        <i class="bi bi-list-ul me-1" aria-hidden="true"></i>Contents
+      </a>
+      {%- endif -%}
+    </div>
+    <div class="col-md-5">
+      {%- if _next -%}
+      <a href="{{ _next.url | relative_url }}" class="post-nav-card post-nav-card--next">
+        <div class="post-nav-card__body">
+          <small class="post-nav-card__label">Next story<i class="bi bi-chevron-right ms-1" aria-hidden="true"></i></small>
+          <span class="post-nav-card__title">{{ _next.title | truncate: 50 }}</span>
+        </div>
+      </a>
+      {%- else -%}
+      <div class="post-nav-card post-nav-card--next post-nav-card--disabled" aria-disabled="true">
+        <div class="post-nav-card__body">
+          <small class="post-nav-card__label">Next story<i class="bi bi-chevron-right ms-1" aria-hidden="true"></i></small>
+          <span class="post-nav-card__title text-muted">The end — for now</span>
+        </div>
+      </div>
+      {%- endif -%}
+    </div>
+  </div>
+</nav>
+{%- endif -%}

data/_includes/components/book-plate.html ADDED Viewed

@@ -0,0 +1,31 @@
+{% comment %} Feature: ZER0-080 {% endcomment %}
+{%- comment -%}
+  Component:   book-plate
+  Path:        _includes/components/book-plate.html
+  Purpose:     Full-width illustration "plate" inside a book story — a figure
+               with rounded art, soft shadow, and an optional caption.
+  Params:      src (string, required)   — image path (site-relative or /assets/…)
+               alt (string, required)   — accessible description of the scene
+               caption (string, optional, default: none) — visible caption text
+               class (string, optional, default: "")     — extra figure classes
+               loading (string, optional, default: "lazy")
+  Depends on:  components/preview-image.html (path prefixing + relative_url),
+               _sass/components/_book.scss (.book-plate)
+  Notes:       Alt text stays on the <img>; the caption renders only when
+               explicitly passed so read-aloud story text isn't duplicated.
+{%- endcomment -%}
+{%- if include.src == nil -%}
+  {%- comment -%} ERROR: book-plate requires `src` {%- endcomment -%}
+{%- else -%}
+<figure class="book-plate {{ include.class | default: '' }}">
+  {%- include components/preview-image.html
+     src=include.src
+     alt=include.alt
+     class="book-plate-img"
+     loading=include.loading
+  -%}
+  {%- if include.caption -%}
+  <figcaption>{{ include.caption | escape }}</figcaption>
+  {%- endif -%}
+</figure>
+{%- endif -%}

data/_includes/components/book-toc.html ADDED Viewed

@@ -0,0 +1,47 @@
+{% comment %} Feature: ZER0-080 {% endcomment %}
+{%- comment -%}
+  Component:   book-toc
+  Path:        _includes/components/book-toc.html
+  Purpose:     Ordered table of contents for one book — chapter number bubble,
+               label (e.g. the month), title, and an optional thumbnail.
+  Params:      book (string, required)  — book slug matching chapters' `book:`
+               heading (string, optional, default: "Table of Contents")
+               heading_level (string, optional, default: "h2")
+  Depends on:  the `books` collection,
+               _sass/components/_book.scss (.book-toc)
+  Notes:       Chapters are docs with a numeric `chapter:`; sorted ascending.
+               Thumbnails come from each chapter's `preview` and are hidden on
+               the smallest screens to keep rows tappable.
+{%- endcomment -%}
+{%- if include.book == nil -%}
+  {%- comment -%} ERROR: book-toc requires `book` {%- endcomment -%}
+{%- else -%}
+{%- assign _chapters = site.books | where: "book", include.book | where_exp: "doc", "doc.chapter" | sort: "chapter" -%}
+{%- assign _hl = include.heading_level | default: "h2" -%}
+{%- if _chapters.size > 0 -%}
+<nav class="book-toc" aria-label="Table of contents">
+  <{{ _hl }} class="mb-3">{{ include.heading | default: "Table of Contents" }}</{{ _hl }}>
+  <ol class="list-unstyled d-flex flex-column gap-2 mb-0">
+    {%- for _ch in _chapters -%}
+    <li>
+      <a class="book-toc-item" href="{{ _ch.url | relative_url }}">
+        <span class="book-toc-number" aria-hidden="true">{{ _ch.chapter }}</span>
+        {%- if _ch.preview -%}
+        <img class="book-toc-thumb d-none d-sm-block" src="{{ _ch.preview | relative_url }}" alt="" loading="lazy" decoding="async">
+        {%- endif -%}
+        <span class="flex-grow-1">
+          {%- if _ch.chapter_label -%}
+          <span class="d-block small text-body-secondary">{{ _ch.chapter_label }}</span>
+          {%- endif -%}
+          <span class="fw-semibold">{{ _ch.title }}</span>
+        </span>
+        <i class="bi bi-chevron-right text-body-secondary" aria-hidden="true"></i>
+      </a>
+    </li>
+    {%- endfor -%}
+  </ol>
+</nav>
+{%- else -%}
+  {%- comment -%} book-toc: no chapters found for book "{{ include.book }}" — skipping render {%- endcomment -%}
+{%- endif -%}
+{%- endif -%}

data/_includes/components/bookshelf.html ADDED Viewed

@@ -0,0 +1,68 @@
+{% comment %} Feature: ZER0-080 · series grouping ZER0-081 {% endcomment %}
+{%- comment -%}
+  Component:   bookshelf
+  Path:        _includes/components/bookshelf.html
+  Purpose:     Responsive grid of every book in the `books` collection, grouped
+               into series/category shelves — drop it on a home or index page.
+  Params:      heading (string, optional) — overall section heading (h2)
+               class (string, optional, default: "")  — extra wrapper classes
+  Depends on:  components/book-card.html, the `books` collection,
+               _data/series.yml (per-series display metadata)
+  Notes:       A "book" is any books-collection doc whose layout is `book`
+               (story books) or `book-abc` (alphabet books); chapters are never
+               listed. Books group by `series:`; a book with no series falls
+               under the default `stories` shelf. Series render in the order
+               they appear in _data/series.yml, then any undeclared series.
+{%- endcomment -%}
+{%- assign _story_books = site.books | where: "layout", "book" -%}
+{%- assign _abc_books = site.books | where: "layout", "book-abc" -%}
+{%- assign _all = _story_books | concat: _abc_books -%}
+{%- if _all and _all.size > 0 -%}
+{%- assign _default_series = "stories" -%}
+{%- assign _groups = _all | group_by_exp: "doc", "doc.series | default: _default_series" -%}
+{%- comment -%} Build the shelf order: declared series (file order) first, then any others. {%- endcomment -%}
+{%- assign _order = "," -%}
+{%- for _pair in site.data.series -%}
+  {%- assign _needle = _pair[0] | prepend: "," | append: "," -%}
+  {%- unless _order contains _needle -%}
+    {%- for _g in _groups -%}{%- if _g.name == _pair[0] -%}{%- assign _order = _order | append: _pair[0] | append: "," -%}{%- endif -%}{%- endfor -%}
+  {%- endunless -%}
+{%- endfor -%}
+{%- for _g in _groups -%}
+  {%- assign _needle = _g.name | prepend: "," | append: "," -%}
+  {%- unless _order contains _needle -%}{%- assign _order = _order | append: _g.name | append: "," -%}{%- endunless -%}
+{%- endfor -%}
+{%- assign _order_list = _order | split: "," -%}
+<section class="bookshelf {{ include.class | default: '' }}">
+  {%- if include.heading -%}
+  <h2 class="mb-4">{{ include.heading }}</h2>
+  {%- endif -%}
+  {%- for _name in _order_list -%}
+    {%- if _name == "" -%}{%- continue -%}{%- endif -%}
+    {%- assign _group = _groups | where: "name", _name | first -%}
+    {%- if _group == nil -%}{%- continue -%}{%- endif -%}
+    {%- assign _meta = site.data.series[_name] -%}
+    {%- assign _books = _group.items | sort: "title" -%}
+    <div class="book-series mb-5" id="series-{{ _name }}">
+      <h3 class="h4 mb-1">
+        <i class="bi {{ _meta.icon | default: 'bi-book-half' }} me-2" aria-hidden="true"></i>{{ _meta.title | default: _name | escape }}
+      </h3>
+      {%- if _meta.tagline -%}
+      <p class="text-body-secondary mb-3">{{ _meta.tagline | escape }}</p>
+      {%- endif -%}
+      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">
+        {%- for _book in _books -%}
+        <div class="col">
+          {%- include components/book-card.html book=_book -%}
+        </div>
+        {%- endfor -%}
+      </div>
+    </div>
+  {%- endfor -%}
+</section>
+{%- else -%}
+  {%- comment -%} bookshelf: no books collection or no book landing pages — skipping render {%- endcomment -%}
+{%- endif -%}

data/_includes/components/card-grid.html ADDED Viewed

@@ -0,0 +1,60 @@
+{%- comment -%}
+  ===================================================================
+  CARD-GRID — responsive grid of data-driven cards
+  ===================================================================
+  Path: _includes/components/card-grid.html
+  Purpose: Render an array of card hashes (see components/data-card.html
+           for the item schema) as a responsive Bootstrap grid. Built for
+           org hub dashboards, fleet registries, service grids, and any
+           "cards from a _data file" page — the markup consumers have
+           been hand-rolling per site.
+  Parameters:
+    items         (array, required) — card hashes (data-card schema)
+    columns       (string) — row-cols classes,
+                  default "row-cols-1 row-cols-md-2 row-cols-lg-3"
+    gap           (string) — gutter class, default "g-4"
+    heading_level (string) — heading tag for card titles, default "h3"
+                  (pick to fit the page outline, e.g. "h2" under an h1)
+    card_class    (string) — extra classes for every card
+    empty_message (string) — message when items is empty/missing;
+                  omit to render nothing at all
+    id            (string) — id for the grid wrapper
+    aria_label    (string) — aria-label for the grid wrapper
+  Example — an org hub page over a generated registry:
+    {% include components/card-grid.html
+       items=site.data.hub_index.repos
+       columns="row-cols-1 row-cols-md-2"
+       heading_level="h2"
+       empty_message="No member repositories registered yet." %}
+  Data files map 1:1 to the schema, e.g.:
+    - title: "1776"
+      url: "https://year-of-ai.github.io/1776/"
+      external: true
+      icon: bi-journal-richtext
+      description: "The revolutionary year."
+      badge: live
+      badge_variant: success
+      meta: [ { icon: bi-files, text: "42 pages" } ]
+  ===================================================================
+{%- endcomment -%}
+{%- assign _cg_items = include.items -%}
+{%- if _cg_items and _cg_items.size > 0 -%}
+<div class="row {{ include.columns | default: 'row-cols-1 row-cols-md-2 row-cols-lg-3' }} {{ include.gap | default: 'g-4' }} zer0-card-grid"
+     {%- if include.id %} id="{{ include.id }}"{% endif %}
+     {%- if include.aria_label %} role="list" aria-label="{{ include.aria_label | escape }}"{% endif %}>
+  {%- for _cg_item in _cg_items %}
+  <div class="col"{% if include.aria_label %} role="listitem"{% endif %}>
+    {%- include components/data-card.html item=_cg_item heading_level=include.heading_level card_class=include.card_class -%}
+  </div>
+  {%- endfor %}
+</div>
+{%- elsif include.empty_message -%}
+<div class="text-center py-5 text-body-secondary zer0-card-grid-empty">
+  <i class="bi bi-inbox fs-1 d-block mb-2" aria-hidden="true"></i>
+  <p class="mb-0">{{ include.empty_message }}</p>
+</div>
+{%- endif -%}

data/_includes/components/data-card.html ADDED Viewed

@@ -0,0 +1,95 @@
+{%- comment -%}
+  ===================================================================
+  DATA-CARD — one generic, data-driven Bootstrap card
+  ===================================================================
+  Path: _includes/components/data-card.html
+  Purpose: Render ONE card from a plain data hash so hub dashboards,
+           fleet registries, service grids, and link boards can be
+           data-driven instead of hand-written Bootstrap markup.
+           Usually invoked via components/card-grid.html.
+  Parameters:
+    item          (hash, required) — the card data (see schema below)
+    heading_level (string) — heading tag for the title, default "h3"
+    heading_class (string) — classes for the heading, default "h5"
+    card_class    (string) — extra classes on the .card element
+  Item schema (every key optional except title):
+    title         card heading text
+    url           makes the title a link
+    external      true → the title link opens in a new tab
+    description   body copy (plain text or inline HTML)
+    icon          Bootstrap Icons class shown before the title (e.g. "bi-robot")
+    image         image path/URL rendered via components/preview-image.html
+    image_alt     alt text for the image (defaults to title)
+    badge         short status label rendered next to the title
+    badge_variant Bootstrap color suffix for the badge (default "secondary")
+    badge_title   tooltip for the badge
+    meta          array of { icon, text } pills rendered under the body
+    buttons       array of { label, url, icon, variant, external } footer actions
+    footer        small muted footer text (rendered when no buttons)
+  Example (_data/projects.yml + a page):
+    {% for p in site.data.projects %}
+      {% include components/data-card.html item=p %}
+    {% endfor %}
+  ===================================================================
+{%- endcomment -%}
+{%- assign _dc = include.item -%}
+{%- assign _dc_heading = include.heading_level | default: "h3" -%}
+{%- assign _dc_heading_class = include.heading_class | default: "h5" -%}
+<div class="card h-100 zer0-data-card {{ include.card_class }}">
+  {%- if _dc.image -%}
+    {%- assign _dc_img_alt = _dc.image_alt | default: _dc.title -%}
+    {%- if _dc.url -%}<a href="{{ _dc.url | relative_url }}" tabindex="-1" aria-hidden="true">{%- endif -%}
+    {%- include components/preview-image.html src=_dc.image alt=_dc_img_alt class="card-img-top" style="height: 160px; object-fit: cover;" -%}
+    {%- if _dc.url -%}</a>{%- endif -%}
+  {%- endif -%}
+  <div class="card-body d-flex flex-column">
+    <{{ _dc_heading }} class="card-title {{ _dc_heading_class }} mb-2 d-flex align-items-center">
+      {%- if _dc.icon %}<i class="bi {{ _dc.icon }} me-2" aria-hidden="true"></i>{% endif -%}
+      <span class="flex-grow-1">
+        {%- if _dc.url -%}
+          <a href="{{ _dc.url | relative_url }}" class="text-decoration-none text-body-emphasis"
+             {%- if _dc.external %} target="_blank" rel="noopener"{% endif %}>{{ _dc.title }}</a>
+        {%- else -%}
+          {{ _dc.title }}
+        {%- endif -%}
+      </span>
+      {%- if _dc.badge %}
+      <span class="badge text-bg-{{ _dc.badge_variant | default: 'secondary' }} ms-2"
+            {%- if _dc.badge_title %} title="{{ _dc.badge_title | escape }}"{% endif %}>{{ _dc.badge }}</span>
+      {%- endif %}
+    </{{ _dc_heading }}>
+    {%- if _dc.description %}
+    <p class="card-text text-body-secondary mb-2">{{ _dc.description }}</p>
+    {%- endif %}
+    {%- if _dc.meta and _dc.meta.size > 0 %}
+    <div class="d-flex flex-wrap gap-2 mt-auto pt-2">
+      {%- for m in _dc.meta %}
+      <span class="badge rounded-pill text-bg-light border text-body-secondary fw-normal">
+        {%- if m.icon %}<i class="bi {{ m.icon }} me-1" aria-hidden="true"></i>{% endif -%}
+        {{ m.text }}
+      </span>
+      {%- endfor %}
+    </div>
+    {%- endif %}
+  </div>
+  {%- if _dc.buttons and _dc.buttons.size > 0 %}
+  <div class="card-footer bg-transparent d-flex flex-wrap gap-2">
+    {%- for b in _dc.buttons %}
+    <a class="btn btn-sm btn-{{ b.variant | default: 'outline-primary' }}"
+       href="{{ b.url | relative_url }}"
+       {%- if b.external %} target="_blank" rel="noopener"{% endif %}>
+      {%- if b.icon %}<i class="bi {{ b.icon }} me-1" aria-hidden="true"></i>{% endif -%}
+      {{ b.label }}
+    </a>
+    {%- endfor %}
+  </div>
+  {%- elsif _dc.footer %}
+  <div class="card-footer bg-transparent">
+    <small class="text-body-secondary">{{ _dc.footer }}</small>
+  </div>
+  {%- endif %}
+</div>