jekyll-theme-zer0 1.19.1 → 1.20.2

data/_layouts/notebook.html

@@ -48,8 +48,7 @@ layout: default
       <!-- Author -->
       {% if page.author %}
         <span class="notebook-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
-          <i class="bi bi-person me-1"></i>
-          <span itemprop="name">{{ page.author }}</span>
+          {% include components/author-card.html author=page.author style="inline" name_itemprop="name" %}
         </span>
         <span class="mx-2">•</span>
       {% endif %}
@@ -92,12 +91,21 @@ layout: default
     </div>
     
     <!-- Tags -->
+    {% comment %} Link tag badges only when a tags index exists (configurable via
+       `tags_page`); otherwise render plain badges so remote-theme consumers
+       without a /tags/ page don't get 404 links. See issue #204. {% endcomment %}
     {% if page.tags and page.tags.size > 0 %}
+      {% assign _tags_base = site.tags_page | default: '/tags/' %}
+      {% assign _tags_page = site.html_pages | where: "url", _tags_base | first %}
       <div class="notebook-tags mb-3">
         {% for tag in page.tags %}
-          <a href="{{ '/tags/' | relative_url }}#{{ tag | slugify }}" class="badge bg-secondary text-decoration-none me-1">
-            {{ tag }}
-          </a>
+          {% if _tags_page %}
+            <a href="{{ _tags_base | relative_url }}#{{ tag | slugify }}" class="badge bg-secondary text-decoration-none me-1">
+              {{ tag }}
+            </a>
+          {% else %}
+            <span class="badge bg-secondary me-1">{{ tag }}</span>
+          {% endif %}
         {% endfor %}
       </div>
     {% endif %}
@@ -129,7 +137,14 @@ layout: default
   <div class="notebook-content e-content" itemprop="articleBody">
     {{ content }}
   </div>
-  
+
+  <!-- ================================ -->
+  <!-- AUTHOR BIO SECTION               -->
+  <!-- ================================ -->
+  {% if page.author and page.author_profile != false %}
+    {% include components/author-bio.html author=page.author %}
+  {% endif %}
+
   <!-- ================================ -->
   <!-- NOTEBOOK FOOTER                  -->
   <!-- ================================ -->

data/_layouts/root.html

@@ -54,7 +54,8 @@
         <!-- ============================================== -->
         
         <!-- Inline SVG symbols for consistent iconography throughout the site -->
-        {% include components/svg.html %}
+        <!-- Page-invariant: cached once per build via jekyll-include-cache. -->
+        {% include_cached components/svg.html %}
 
         <!-- Google Tag Manager body code for analytics (if configured) -->
         <!-- Note: Currently commented out - uncomment when GTM is needed -->
@@ -66,35 +67,45 @@
              Enable with `navigation.unified_mobile_drawer: true` in _config.yml. -->
         {% include navigation/unified-drawer.html %}
 
-        <!-- Search modal (site-wide) -->
-        {% include components/search-modal.html %}
+        <!-- Search modal (site-wide) — page-invariant, cached once per build. -->
+        {% include_cached components/search-modal.html %}
 
-        <!-- Keyboard shortcuts help modal (triggered by `?`) -->
-        {% include components/shortcuts-modal.html %}
+        <!-- Keyboard shortcuts help modal (triggered by `?`) — page-invariant. -->
+        {% include_cached components/shortcuts-modal.html %}
 
         <!-- Site-wide information banner or announcement section -->
         {% include components/info-section.html %}
 
-        <!-- Setup banner for unconfigured sites -->
-        {% include components/setup-banner.html %}
+        <!-- Setup banner for unconfigured sites — page-invariant. -->
+        {% include_cached components/setup-banner.html %}
 
         <!-- ======================== -->
         <!-- MAIN CONTENT AREA        -->
         <!-- ======================== -->
-        <!-- Skip-link target: keep a single, consistent #main-content anchor site-wide -->
-        <div id="main-content">
+        <!-- Skip-link target: keep a single, consistent #main-content anchor site-wide.
+             Semantic <main> landmark (consistent with the default/section/news layouts)
+             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">
             {{ content }}
-        </div>
+        </main>
 
         <!-- ======================== -->
         <!-- FOOTER AND SCRIPTS       -->
         <!-- ======================== -->
         
-        <!-- Site footer with links, copyright, and additional navigation -->
-        {%- include core/footer.html -%}
-
-        <!-- Privacy-compliant cookie consent banner -->
-        {%- include components/cookie-consent.html -%}
+        <!-- Site footer with links, copyright, and additional navigation.
+             Page-invariant chrome is cached once per build; the page-dependent
+             FAB/local-graph tail renders fresh per page (see core/footer-fabs.html).
+             Build-time values inside (e.g. the copyright year from site.time) stay
+             fresh: jekyll-include-cache stores in memory only (Jekyll 3.x has no
+             Jekyll::Cache) and clears on every build's :pre_render hook — it never
+             persists to .jekyll-cache. -->
+        {%- include_cached core/footer.html -%}
+        {%- include core/footer-fabs.html -%}
+
+        <!-- Privacy-compliant cookie consent banner — page-invariant. -->
+        {%- include_cached components/cookie-consent.html -%}
 
         <!-- AI Chat Assistant -->
         {%- include components/ai-chat.html -%}
@@ -104,8 +115,11 @@
             <!-- Search functionality -->
             <!-- Note: Currently commented out - uncomment when search is implemented -->
 
-            <!-- External JavaScript libraries and custom scripts -->
-            {% include components/js-cdn.html %}
+            <!-- External JavaScript libraries and custom scripts — page-invariant.
+                 The "?v=" cache-buster (site.time) in js-cdn.html stays correct:
+                 the include cache is in-memory and reset every build (see footer
+                 note above), so v= advances on each build, never frozen across deploys. -->
+            {% include_cached components/js-cdn.html %}
         </div>
 
         <!-- Analytics Integration -->

data/_layouts/section.html

@@ -216,7 +216,7 @@ layout: root
                 </small>
                 {% if featured_in_section.author %}
                   <small class="text-muted">
-                    <i class="bi bi-person me-1"></i>{{ featured_in_section.author }}
+                    {% include components/author-card.html author=featured_in_section.author style="inline" show_avatar=false %}
                   </small>
                 {% endif %}
               </div>
@@ -425,7 +425,7 @@ layout: root
                       </span>
                       {% if gpost.author %}
                         <span>
-                          <i class="bi bi-person me-1"></i>{{ gpost.author | truncate: 15 }}
+                          {% include components/author-card.html author=gpost.author style="inline" show_avatar=false %}
                         </span>
                       {% endif %}
                     </div>
@@ -476,7 +476,7 @@ layout: root
                     <div class="d-flex gap-3 text-muted small">
                       <span><i class="bi bi-calendar me-1"></i>{{ lpost.date | date: "%B %d, %Y" }}</span>
                       {% if lpost.author %}
-                        <span><i class="bi bi-person me-1"></i>{{ lpost.author }}</span>
+                        <span>{% include components/author-card.html author=lpost.author style="inline" show_avatar=false %}</span>
                       {% endif %}
                     </div>
                   </div>

data/_plugins/author_pages_generator.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+#
+# File: author_pages_generator.rb
+# Path: _plugins/author_pages_generator.rb
+# Purpose: Auto-generate an author profile page (/authors/:key/) for every
+#          entry in _data/authors.yml, plus an /authors/ index, so author
+#          profiles work out of the box without authors hand-creating pages.
+#
+# Mirrors the pattern in search_and_sitemap_generator.rb (PageWithoutFile,
+# safe true, low priority, idempotent, opt-out via _config.yml).
+#
+# Behaviour:
+#   - One /authors/:key/ page per author (layout: author).
+#   - One /authors/ index page (layout: authors).
+#   - If a page OR collection document already exists at the target permalink it
+#     is left untouched. This site's committed author pages live in
+#     pages/_about/authors/ (the `about` collection) with explicit
+#     /authors/:key/ permalinks, so they build under GitHub Pages safe mode.
+#   - An author entry with `profile: false` in _data/authors.yml is skipped.
+#   - Generation can be disabled via _config.yml:
+#       authors:
+#         generate_pages: false
+#
+# Note: like the other generators in this directory, this runs during a normal
+# `jekyll build`. Sites consuming the theme remotely on GitHub Pages (which does
+# not load custom plugins) can still create author pages by hand using the
+# `author` / `authors` layouts shipped with the theme.
+#
+
+module Jekyll
+  class AuthorPagesGenerator < Generator
+    safe true
+    priority :low
+
+    def generate(site)
+      return if generation_disabled?(site)
+
+      authors = site.data["authors"]
+      return unless authors.is_a?(Hash)
+
+      generate_author_profiles(site, authors)
+      generate_authors_index(site)
+    end
+
+    private
+
+    def generate_author_profiles(site, authors)
+      authors.each do |key, data|
+        data ||= {}
+        next if data["profile"] == false
+
+        permalink = "/authors/#{Jekyll::Utils.slugify(key)}/"
+        next if page_exists?(site, permalink)
+
+        name = data["name"] || key
+        Jekyll.logger.info "AuthorPagesGenerator:", "Generating profile #{permalink}"
+
+        page = PageWithoutAFile.new(site, site.source, "", "#{key}.html")
+        page.data.merge!(
+          "layout"      => "author",
+          "author_key"  => key,
+          "title"       => name,
+          "description" => data["bio"] || "Articles and content by #{name}.",
+          "permalink"   => permalink,
+          "sitemap"     => true,
+          "sidebar"     => false,
+          "hide_intro"  => true
+        )
+        page.content = ""
+
+        site.pages << page
+      end
+    end
+
+    def generate_authors_index(site)
+      return if page_exists?(site, "/authors/")
+
+      Jekyll.logger.info "AuthorPagesGenerator:", "Generating /authors/ index"
+
+      page = PageWithoutAFile.new(site, site.source, "", "authors.html")
+      page.data.merge!(
+        "layout"      => "authors",
+        "title"       => "Authors",
+        "description" => "Meet the people behind the content.",
+        "permalink"   => "/authors/",
+        "sidebar"     => false,
+        "hide_intro"  => true
+      )
+      page.content = ""
+
+      site.pages << page
+    end
+
+    # ------------------------------------------------------------------
+    # Helpers
+    # ------------------------------------------------------------------
+
+    def page_exists?(site, permalink)
+      normalized = permalink.chomp("/")
+      page_match = site.pages.any? do |p|
+        url = (p.url || "").chomp("/")
+        perm = (p.permalink || "").chomp("/")
+        url == normalized || url == permalink || perm == normalized || perm == permalink
+      end
+      return true if page_match
+
+      # Committed author pages now live in the `about` collection
+      # (pages/_about/authors/*.md), so also honour collection documents.
+      site.documents.any? do |d|
+        url = (d.url || "").chomp("/")
+        perm = (d.data["permalink"] || "").to_s.chomp("/")
+        url == normalized || url == permalink || perm == normalized || perm == permalink
+      end
+    end
+
+    def generation_disabled?(site)
+      site.config.dig("authors", "generate_pages") == false
+    end
+  end
+end

data/_sass/components/_author.scss

@@ -0,0 +1,219 @@
+// ============================================================================
+// Author — bylines, "About the Author" cards, and profile pages
+// ----------------------------------------------------------------------------
+// Pairs with components/author-card.html, components/author-bio.html, and the
+// author / authors layouts. Token-driven with Bootstrap fallbacks; dark-mode
+// safe (avatars and links inherit surrounding color via `text-reset`).
+// ============================================================================
+
+// Inline byline — meta rows and card footers
+.author-inline {
+  vertical-align: baseline;
+
+  &__avatar {
+    flex: 0 0 auto;
+  }
+
+  &__link {
+    transition: color var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard);
+
+    &:hover .author-name,
+    &:focus-visible .author-name {
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--zer0-color-primary, var(--bs-primary));
+      outline-offset: 2px;
+      border-radius: 0.25rem;
+    }
+  }
+}
+
+// Circular fallback used when an author has no avatar image
+.author-avatar-fallback {
+  flex: 0 0 auto;
+  background: var(--zer0-color-primary, var(--bs-primary));
+}
+
+// "About the Author" card + profile hero avatar ring
+.author-card,
+.author-card-compact {
+  .author-card__avatar,
+  img.rounded-circle {
+    border: 2px solid rgba(var(--zer0-color-primary-rgb, var(--bs-primary-rgb)), 0.25);
+  }
+}
+
+// Expertise chips
+.author-expertise .badge {
+  font-weight: 500;
+}
+
+// Shared tagline styling (full "About the Author" card + profile hero)
+.author-tagline {
+  color: var(--zer0-color-text-muted, var(--bs-secondary-color));
+}
+
+// AI author persona markers — a violet accent (the "AI" convention) chosen to
+// stay legible across all skins independent of --zer0-color-primary.
+.author-ai-badge {
+  background-color: rgba(111, 66, 193, 0.14);
+  color: #6f42c1;
+  border: 1px solid rgba(111, 66, 193, 0.4);
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  [data-bs-theme="dark"] & {
+    color: #c8a2ff;
+    background-color: rgba(111, 66, 193, 0.28);
+    border-color: rgba(111, 66, 193, 0.55);
+  }
+}
+
+.author-ai-disclosure {
+  border-left: 3px solid rgba(111, 66, 193, 0.5);
+  padding-left: 0.65rem;
+}
+
+// ----------------------------------------------------------------------------
+// Author profile page (_layouts/author.html)
+// ----------------------------------------------------------------------------
+
+// Profile hero
+.author-hero {
+  background: var(--zer0-color-bg-elevated, var(--bs-tertiary-bg));
+
+  &__avatar {
+    border: 3px solid rgba(var(--zer0-color-primary-rgb, var(--bs-primary-rgb)), 0.35);
+    box-shadow: var(--zer0-shadow-sm);
+  }
+
+  &__tagline {
+    font-size: 1.05rem;
+  }
+}
+
+// Interactive content hub
+.author-content {
+  // Stats dashboard — doubles as the type-filter control group
+  .author-stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .author-stat {
+    flex: 1 1 auto;
+    min-width: 5.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.15rem;
+    padding: 0.75rem 1rem;
+    background: var(--zer0-color-bg-elevated, var(--bs-tertiary-bg));
+    border: 1px solid var(--zer0-color-border, var(--bs-border-color));
+    border-radius: 0.625rem;
+    color: inherit;
+    cursor: pointer;
+    transition:
+      transform var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard),
+      box-shadow var(--zer0-motion-duration-base, 200ms) var(--zer0-motion-ease-standard),
+      border-color var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard),
+      background-color var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--zer0-shadow-md);
+      border-color: rgba(var(--zer0-color-primary-rgb, var(--bs-primary-rgb)), 0.5);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--zer0-color-primary, var(--bs-primary));
+      outline-offset: 2px;
+    }
+
+    &.is-active {
+      background: var(--zer0-color-primary, var(--bs-primary));
+      border-color: var(--zer0-color-primary, var(--bs-primary));
+      color: #fff;
+    }
+
+    &__num {
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    &__label {
+      font-size: 0.8rem;
+      white-space: nowrap;
+    }
+  }
+
+  // Search input with a leading icon
+  .author-search__icon {
+    position: absolute;
+    top: 50%;
+    left: 0.75rem;
+    transform: translateY(-50%);
+    color: var(--bs-secondary-color);
+    pointer-events: none;
+  }
+
+  .author-search .form-control {
+    padding-left: 2.25rem;
+  }
+
+  // Topic / tag cloud
+  .author-tagcloud {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  .author-tag {
+    border: 1px solid var(--zer0-color-border, var(--bs-border-color));
+    background: transparent;
+    color: var(--bs-body-color);
+    cursor: pointer;
+    transition:
+      background-color var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard),
+      color var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard),
+      border-color var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard);
+
+    &:hover { border-color: rgba(var(--zer0-color-primary-rgb, var(--bs-primary-rgb)), 0.6); }
+    &:focus-visible { outline: 2px solid var(--zer0-color-primary, var(--bs-primary)); outline-offset: 2px; }
+
+    &.is-active {
+      background: var(--zer0-color-primary, var(--bs-primary));
+      border-color: var(--zer0-color-primary, var(--bs-primary));
+      color: #fff;
+    }
+  }
+
+  // Grid item entrance animation — only when motion is allowed. Re-runs each
+  // time an item returns from display:none, giving a gentle filter transition.
+  @media (prefers-reduced-motion: no-preference) {
+    .author-item:not(.d-none) {
+      animation: authorItemIn var(--zer0-motion-duration-base, 220ms) var(--zer0-motion-ease-standard) both;
+    }
+  }
+}
+
+@keyframes authorItemIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+// Authors index directory cards
+.authors-index {
+  .author-card-compact {
+    width: 100%;
+  }
+}

data/_sass/components/_content-tables.scss

@@ -149,7 +149,14 @@ $zer0-content-table-scopes: (
   margin-bottom: var(--zer0-space-4);
   border: 1px solid var(--zer0-color-border);
   border-radius: 0.5rem;
-  overflow: visible;
+  // Wide tables must scroll WITHIN this card, not push the page wider. The
+  // wrapper sits between the content scope and the table, so the
+  // `#{$scope} > table` mobile fallback below no longer matches — without a
+  // scroll context here a wide markdown table forces a horizontal page
+  // scrollbar, which makes the fixed-top navbar look "cut off" on the right.
+  // (Pairs with the `html { overflow-x: clip }` safety net in _global-chrome.)
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   background-color: var(--zer0-color-bg);
 
   > .content-table-toolbar {
@@ -256,5 +263,13 @@ $zer0-content-table-scopes: (
         }
       }
     }
+
+    // Long unbroken inline-code tokens (URLs, hashes, flags) must wrap rather
+    // than force a horizontal page scrollbar on narrow viewports. Scoped to
+    // inline code only — block code (`pre code`) keeps its own scroll context.
+    :not(pre) > code {
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
   }
 }

data/_sass/components/_notes-index.scss

@@ -0,0 +1,102 @@
+// ============================================================================
+
+// Notes & notebooks index grids + difficulty badges
+
+// ----------------------------------------------------------------------------
+
+// Extracted from custom.scss (Phase 5).
+
+// ============================================================================
+
+// ==============================================================================
+// NOTES LAYOUT STYLES
+// ==============================================================================
+// MOVED → _sass/components/_notes.scss (token-aware, dark-mode-safe)
+// The .note-header / .note-content / .related-notes / .note-navigation rules
+// are now defined in the components partial. Difficulty badges remain here
+// because they map to fixed semantic colors per the existing API.
+
+// Difficulty badge colors (semantic — kept as fixed values)
+.badge-beginner {
+  background-color: var(--zer0-color-success, #198754) !important;
+}
+
+.badge-intermediate {
+  background-color: var(--zer0-color-warning, #ffc107) !important;
+  color: #212529 !important;
+}
+
+.badge-advanced {
+  background-color: var(--zer0-color-danger, #dc3545) !important;
+}
+
+// Share buttons
+.share-buttons {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #dee2e6;
+  
+  .btn-share {
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: transform 0.2s ease;
+    
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+// Notes index page styles
+#notes-grid {
+  .note-card {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    
+    &[style*="display: none"] {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+  
+  .card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+    }
+  }
+}
+
+// ==============================================================================
+// NOTEBOOKS INDEX PAGE STYLES
+// ==============================================================================
+
+#notebooks-grid {
+  .notebook-card {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    
+    &[style*="display: none"] {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+  
+  .card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border-left: 4px solid #0d6efd;
+    
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+    }
+    
+    .card-header {
+      border-bottom: none;
+    }
+  }
+}

data/_sass/components/_search-modal.scss

@@ -0,0 +1,40 @@
+// ============================================================================
+// Search modal — quick-search overlay + collapsible folder tree
+// ----------------------------------------------------------------------------
+// Extracted from custom.scss. Styles the search modal (triggered from the
+// navbar Search button) and the nested folder list used in its results.
+// Selectors are unique to this component, so import position is order-neutral.
+// ============================================================================
+
+.search-modal .modal-content {
+    border-radius: 0.75rem;
+}
+
+.search-modal .input-group-text {
+    background-color: var(--bs-tertiary-bg);
+    border-color: var(--bs-border-color);
+}
+
+.search-modal kbd {
+    background-color: var(--bs-tertiary-bg);
+    color: var(--bs-body-color);
+}
+
+.search-modal .search-results {
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.search-modal .list-group-item {
+    border-color: var(--bs-border-color-translucent);
+}
+
+.nested-list-group {
+    display: none;
+  }
+  .nested-list-group.show {
+    display: block;
+  }
+  .folder {
+    cursor: pointer;
+  }