jekyll-theme-zer0 0.16.0 → 0.17.2

data/_includes/navigation/navbar.html

@@ -3,6 +3,7 @@
     path: /includes/navbar.html
     includes:
     purpose: Offcanvas main navigation following Bootstrap 5 best practices
+             with hover-activated dropdowns for desktop
  -->
 
 <!-- Navigation Links - Offcanvas -->
@@ -18,10 +19,10 @@
     <div class="offcanvas-body">
         <ul class="navbar-nav justify-content-lg-center text-start flex-grow-1">
             {%- for link in site.data.navigation.main -%}
-                {%- assign has_children = link.sublinks and link.sublinks.size > 0 -%}
+                {%- assign has_children = link.children and link.children.size > 0 -%}
 
                 {%- if has_children -%}
-                    <li class="nav-item dropdown d-flex align-items-center">
+                    <li class="nav-item dropdown d-flex align-items-center nav-hover-dropdown">
                         <!-- Parent link navigates directly -->
                         <a
                             class="nav-link"
@@ -34,28 +35,32 @@
                             {{ link.title }}
                         </a>
 
-                        <!-- Split toggle opens the dropdown -->
+                        <!-- Split toggle opens the dropdown (click on mobile, hover on desktop) -->
                         <a
-                            class="nav-link dropdown-toggle dropdown-toggle-split ms-2"
+                            class="nav-link dropdown-toggle dropdown-toggle-split ms-1 px-1"
                             href="#"
                             id="dropdown-{{ link.title | slugify }}"
                             role="button"
                             data-bs-toggle="dropdown"
+                            data-bs-auto-close="outside"
                             aria-expanded="false"
                             aria-label="Toggle {{ link.title }} menu"
                         >
                             <span class="visually-hidden">Toggle dropdown</span>
                         </a>
 
-                        <ul class="dropdown-menu dropdown-menu-start w-100" aria-labelledby="dropdown-{{ link.title | slugify }}">
-                            {%- for sublink in link.sublinks -%}
+                        <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdown-{{ link.title | slugify }}">
+                            {%- for child in link.children -%}
                                 <li>
                                     <a
                                         class="dropdown-item"
-                                        href="{{ sublink.url | relative_url }}"
-                                        {%- if sublink.url == page.url -%} aria-current="page"{%- endif -%}
+                                        href="{{ child.url | relative_url }}"
+                                        {%- if child.url == page.url -%} aria-current="page"{%- endif -%}
                                     >
-                                        {{ sublink.title }}
+                                        {%- if child.icon -%}
+                                            <i class="{{site.default_icon}} {{ child.icon }} me-2"></i>
+                                        {%- endif -%}
+                                        {{ child.title }}
                                     </a>
                                 </li>
                             {%- endfor -%}
@@ -80,6 +85,168 @@
     </div>
 </div>
 
+<!-- Styles for hover-activated dropdowns on desktop -->
+<style>
+/* Desktop: Show navigation inline in header (not offcanvas) */
+@media (min-width: 992px) {
+    /* Make offcanvas behave as regular inline content on desktop */
+    #bdNavbar {
+        position: static !important;
+        transform: none !important;
+        visibility: visible !important;
+        background: transparent !important;
+        border: none !important;
+        width: auto !important;
+        flex-grow: 0 !important;
+    }
+    
+    #bdNavbar .offcanvas-header {
+        display: none !important;
+    }
+    
+    #bdNavbar .offcanvas-body {
+        padding: 0 !important;
+        overflow: visible !important;
+    }
+    
+    /* Horizontal nav layout */
+    #bdNavbar .navbar-nav {
+        flex-direction: row !important;
+        gap: 0.25rem;
+    }
+    
+    /* Dropdown positioning - ensure it appears BELOW the nav item */
+    .nav-hover-dropdown {
+        position: relative;
+    }
+    
+    .nav-hover-dropdown > .dropdown-menu {
+        position: absolute;
+        top: 100% !important;
+        left: 0;
+        margin-top: 0.125rem !important;
+        min-width: 12rem;
+        z-index: 1050;
+    }
+    
+    /* Hover behavior for dropdowns */
+    .nav-hover-dropdown:hover > .dropdown-menu {
+        display: block;
+    }
+    
+    /* Smooth fade-in animation */
+    .nav-hover-dropdown .dropdown-menu {
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
+        display: block !important;
+    }
+    
+    .nav-hover-dropdown:hover .dropdown-menu,
+    .nav-hover-dropdown .dropdown-menu.show {
+        opacity: 1;
+        visibility: visible;
+    }
+    
+    /* Ensure dropdown toggle caret is subtle */
+    .nav-hover-dropdown .dropdown-toggle-split {
+        padding-left: 0.25rem;
+        padding-right: 0.5rem;
+    }
+    
+    .nav-hover-dropdown .dropdown-toggle-split::after {
+        vertical-align: 0.15em;
+        font-size: 0.75em;
+    }
+}
+
+/* Mobile: Standard offcanvas behavior with stacked dropdowns */
+@media (max-width: 991.98px) {
+    #bdNavbar .navbar-nav {
+        flex-direction: column !important;
+    }
+    
+    /* Fix mobile nav item layout - keep toggle next to link text */
+    .nav-hover-dropdown {
+        flex-wrap: wrap !important;
+        justify-content: flex-start !important;
+    }
+    
+    /* Parent link should not stretch - stay with its content width */
+    .nav-hover-dropdown > .nav-link:first-child {
+        flex: 0 0 auto !important;
+    }
+    
+    /* Toggle button stays next to link */
+    .nav-hover-dropdown > .dropdown-toggle-split {
+        flex: 0 0 auto;
+    }
+    
+    /* Rotate caret on open */
+    .nav-hover-dropdown > .dropdown-toggle-split::after {
+        transition: transform 0.25s ease;
+    }
+    
+    .nav-hover-dropdown > .dropdown-toggle-split.show::after {
+        transform: rotate(180deg);
+    }
+    
+    /* Stack dropdown below parent in mobile offcanvas - full width on new row */
+    .nav-hover-dropdown .dropdown-menu {
+        position: static !important;
+        float: none;
+        flex-basis: 100% !important;
+        width: 100%;
+        margin-top: 0;
+        border: none;
+        box-shadow: none;
+        background-color: var(--bs-tertiary-bg);
+        padding-left: 1rem;
+        /* Transition for smooth open/close */
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
+        padding-top: 0;
+        padding-bottom: 0;
+        display: block !important;
+    }
+    
+    /* Show dropdown on click with animation */
+    .nav-hover-dropdown .dropdown-menu.show {
+        max-height: 500px;
+        opacity: 1;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+}
+
+/* Active dropdown item styling */
+.dropdown-item[aria-current="page"] {
+    background-color: var(--bs-primary);
+    color: var(--bs-white);
+}
+
+.dropdown-item[aria-current="page"]:hover {
+    background-color: var(--bs-primary);
+    filter: brightness(0.9);
+}
+
+/* Dropdown menu styling */
+.nav-hover-dropdown .dropdown-menu {
+    border-radius: 0.375rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.nav-hover-dropdown .dropdown-item {
+    padding: 0.5rem 1rem;
+}
+
+.nav-hover-dropdown .dropdown-item:hover {
+    background-color: var(--bs-tertiary-bg);
+}
+</style>
+
 <!-- Script to handle offcanvas navigation -->
 <script>
 document.addEventListener('DOMContentLoaded', function() {
@@ -98,5 +265,91 @@ document.addEventListener('DOMContentLoaded', function() {
             }, 100);
         });
     });
+    
+    // Desktop: Add keyboard accessibility for hover dropdowns
+    const hoverDropdowns = document.querySelectorAll('.nav-hover-dropdown');
+    hoverDropdowns.forEach(dropdown => {
+        const toggle = dropdown.querySelector('.dropdown-toggle');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        
+        // Show on focus (keyboard navigation)
+        toggle?.addEventListener('focus', () => {
+            menu?.classList.add('show');
+        });
+        
+        // Hide when focus leaves the dropdown entirely
+        dropdown.addEventListener('focusout', (e) => {
+            if (!dropdown.contains(e.relatedTarget)) {
+                menu?.classList.remove('show');
+            }
+        });
+    });
+    
+    // Mobile: Custom dropdown handling to prevent glitches
+    // Only apply on mobile breakpoint
+    const isMobile = () => window.innerWidth < 992;
+    
+    hoverDropdowns.forEach(dropdown => {
+        const toggle = dropdown.querySelector('.dropdown-toggle-split');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        
+        if (!toggle || !menu) return;
+        
+        // Prevent Bootstrap's default dropdown behavior on mobile
+        toggle.addEventListener('click', function(e) {
+            if (!isMobile()) return; // Let desktop use default behavior
+            
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // Toggle this dropdown
+            const isOpen = menu.classList.contains('show');
+            
+            if (isOpen) {
+                // Close this dropdown
+                menu.classList.remove('show');
+                toggle.classList.remove('show');
+                toggle.setAttribute('aria-expanded', 'false');
+            } else {
+                // Open this dropdown (don't close others - allow multiple open)
+                menu.classList.add('show');
+                toggle.classList.add('show');
+                toggle.setAttribute('aria-expanded', 'true');
+            }
+        });
+    });
+    
+    // Close dropdowns when clicking outside on mobile
+    document.addEventListener('click', function(e) {
+        if (!isMobile()) return;
+        
+        // If click is outside all dropdowns, close them all
+        const clickedInsideDropdown = e.target.closest('.nav-hover-dropdown');
+        if (!clickedInsideDropdown) {
+            hoverDropdowns.forEach(dropdown => {
+                const toggle = dropdown.querySelector('.dropdown-toggle-split');
+                const menu = dropdown.querySelector('.dropdown-menu');
+                if (menu && toggle) {
+                    menu.classList.remove('show');
+                    toggle.classList.remove('show');
+                    toggle.setAttribute('aria-expanded', 'false');
+                }
+            });
+        }
+    });
+    
+    // Reset dropdowns when offcanvas closes
+    const offcanvasEl = document.getElementById('bdNavbar');
+    offcanvasEl?.addEventListener('hide.bs.offcanvas', function() {
+        hoverDropdowns.forEach(dropdown => {
+            const toggle = dropdown.querySelector('.dropdown-toggle-split');
+            const menu = dropdown.querySelector('.dropdown-menu');
+            if (menu && toggle) {
+                menu.classList.remove('show');
+                toggle.classList.remove('show');
+                toggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    });
 });
 </script>

data/_includes/navigation/sidebar-left.html

@@ -4,27 +4,26 @@
   ===================================================================
   
   File: sidebar-left.html 
-  Path: _includes/sidebar-left.html
-  Purpose: Left sidebar navigation with multiple content modes including
-           dynamic page listing, category browsing, and manual navigation
+  Path: _includes/navigation/sidebar-left.html
+  Purpose: Left sidebar navigation with three standardized content modes
   
   Template Logic:
   - Responsive offcanvas sidebar for mobile devices
   - Three navigation modes based on page.sidebar.nav:
-    * "dynamic": Auto-generated folder structure from pages
-    * "searchCats": Category-based navigation from site categories
-    * Manual: Predefined navigation from _data files
+    * "auto": Auto-generated folder structure from collection documents
+    * "tree": YAML-defined hierarchical navigation from _data/navigation/
+    * "categories": Category-based navigation from site categories
   
   Dependencies:
-  - sidebar-folders.html: Dynamic folder structure generation
-  - sidebar-categories.html: Category-based navigation
-  - nav_list.html: Manual navigation list rendering
+  - sidebar-folders.html: Dynamic folder structure generation (auto mode)
+  - sidebar-categories.html: Category-based navigation (categories mode)
+  - nav-tree.html: YAML-based hierarchical tree (tree mode)
   - Bootstrap 5 offcanvas component
   
   Navigation Modes:
-  1. Dynamic: Scans site.pages for index.md files to build folder structure
-  2. Categories: Groups content by Jekyll categories
-  3. Manual: Uses predefined navigation from _data/navigation.yml
+  1. auto: Scans collection documents to build folder structure
+  2. tree: Uses predefined YAML navigation from _data/navigation/*.yml
+  3. categories: Groups content by Jekyll categories
   ===================================================================
 -->
 
@@ -50,32 +49,32 @@
   <div class="offcanvas-body overflow-auto">
 
     <!-- ========================== -->
-    <!-- DYNAMIC PAGE LISTING      -->
+    <!-- AUTO MODE: Collection Docs -->
     <!-- ========================== -->
-    <!-- Auto-generates folder structure from pages containing index.md -->
-    {% if page.sidebar.nav == "dynamic" %}
-    <div class="list-group" id="sidebar-content">
+    <!-- Auto-generates folder structure from collection documents -->
+    {% if page.sidebar.nav == "auto" %}
+    <div class="list-group nav-tree" id="sidebar-content" data-nav-tree>
       {% assign folders = site.pages | where_exp: "item", "item.path contains 'index.md'" | sort: 'path' %}
       {% include navigation/sidebar-folders.html folders=folders %}
     </div>
 
     <!-- ========================== -->
-    <!-- CATEGORY-BASED NAVIGATION -->
+    <!-- CATEGORIES MODE           -->
     <!-- ========================== -->
     <!-- Creates navigation from Jekyll post/page categories -->
-    {% elsif page.sidebar.nav == "searchCats" %}
-    <div class="list-group" id="sidebar-content">
+    {% elsif page.sidebar.nav == "categories" %}
+    <div class="list-group nav-tree" id="sidebar-content" data-nav-tree>
       {% assign categories = site.categories | sort %}
       {% include navigation/sidebar-categories.html categories=categories %}
     </div>
     
     <!-- ========================== -->
-    <!-- MANUAL NAVIGATION LIST    -->
+    <!-- TREE MODE: YAML Navigation -->
     <!-- ========================== -->
-    <!-- Uses predefined navigation structure from _data files -->
+    <!-- Uses predefined YAML navigation structure from _data files -->
     {% elsif page.sidebar.nav %}
-    <nav class="w-100">
-      {% include navigation/nav_list.html nav=page.sidebar.nav %}
+    <nav class="w-100 nav-tree" data-nav-tree>
+      {% include navigation/nav-tree.html nav=page.sidebar.nav %}
     </nav>
     {% endif %}
     

data/_layouts/default.html

@@ -78,7 +78,7 @@ layout: root
         <!-- MAIN CONTENT BODY              -->
         <!-- =============================== -->
         <!-- Where the actual page content is rendered -->
-        <div id="main-content" class="bd-content ps-lg-2">
+        <div class="bd-content ps-lg-2">
             {{ content }}
         </div>
     </main>

data/_layouts/landing.html

@@ -47,29 +47,29 @@ layout: root
 <!-- ================================ -->
 <!-- HERO SECTION                     -->
 <!-- ================================ -->
-<div class="bg-primary text-white">
+<div class="bg-primary text-white position-relative overflow-hidden">
     <div class="container-xl py-5 px-4 px-md-5">
         <div class="row align-items-center min-vh-50 g-4 g-lg-5">
-            <div class="col-lg-6">
-                <h1 class="display-4 fw-bold mb-3">{{ page.title }}</h1>
-                <p class="lead mb-4">{{ page.description }}</p>
-                <div class="d-flex flex-column flex-md-row gap-3">
+            <div class="col-lg-6 order-2 order-lg-1">
+                <h1 class="display-4 fw-bold mb-3 animate-on-scroll">{{ page.title }}</h1>
+                <p class="lead mb-4 animate-on-scroll" style="animation-delay: 0.1s;">{{ page.description }}</p>
+                <div class="d-flex flex-column flex-md-row gap-3 animate-on-scroll" style="animation-delay: 0.2s;">
                     <a href="#get-started" class="btn btn-light btn-lg">
                         <i class="bi bi-rocket-takeoff me-2"></i>Get Started
                     </a>
                     <a href="#features" class="btn btn-outline-light btn-lg">
                         <i class="bi bi-list-check me-2"></i>Features
                     </a>
-                    <a href="{{ site.resources.github_repo }}" class="btn btn-outline-light btn-lg">
+                    <a href="{{ site.resources.github_repo | default: '' | join: '' }}" class="btn btn-outline-light btn-lg" target="_blank" rel="noopener">
                         <i class="bi bi-github me-2"></i>GitHub
                     </a>
                 </div>
             </div>
-            <div class="col-lg-6 text-center">
+            <div class="col-lg-6 text-center order-1 order-lg-2">
                 {% if page.hero_image %}
-                <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg">
+                <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg animate-on-scroll" loading="eager" style="animation-delay: 0.3s;">
                 {% else %}
-                <div class="bg-secondary rounded p-5 text-body">
+                <div class="bg-secondary rounded p-5 text-body animate-on-scroll">
                     <i class="bi bi-code-square display-1"></i>
                     <p class="mt-3 mb-0">Jekyll Theme</p>
                 </div>
@@ -102,37 +102,37 @@ layout: root
         
         <div class="row g-4">
             <div class="col-md-4">
-                <div class="card h-100 border-0 shadow-sm">
+                <div class="card h-100 border-0 shadow-sm feature-card">
                     <div class="card-body text-center p-4">
-                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3 feature-icon" style="width: 60px; height: 60px;">
                             <i class="bi bi-shield-check fs-4"></i>
                         </div>
-            <h5 class="card-title text-body-emphasis">Error-Free Development</h5>
-            <p class="card-text text-body-secondary">Built-in error handling and self-healing installation process ensures a smooth development experience.</p>
+                        <h5 class="card-title text-body-emphasis">Error-Free Development</h5>
+                        <p class="card-text text-body-secondary">Built-in error handling and self-healing installation process ensures a smooth development experience.</p>
                     </div>
                 </div>
             </div>
             
             <div class="col-md-4">
-                <div class="card h-100 border-0 shadow-sm">
+                <div class="card h-100 border-0 shadow-sm feature-card">
                     <div class="card-body text-center p-4">
-                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3 feature-icon" style="width: 60px; height: 60px;">
                             <i class="bi bi-boxes fs-4"></i>
                         </div>
-            <h5 class="card-title text-body-emphasis">Docker-First Approach</h5>
-            <p class="card-text text-body-secondary">Cross-platform compatibility with zero local configuration. Works on Apple Silicon, Intel, and Linux.</p>
+                        <h5 class="card-title text-body-emphasis">Docker-First Approach</h5>
+                        <p class="card-text text-body-secondary">Cross-platform compatibility with zero local configuration. Works on Apple Silicon, Intel, and Linux.</p>
                     </div>
                 </div>
             </div>
             
             <div class="col-md-4">
-                <div class="card h-100 border-0 shadow-sm">
+                <div class="card h-100 border-0 shadow-sm feature-card">
                     <div class="card-body text-center p-4">
-                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3 feature-icon" style="width: 60px; height: 60px;">
                             <i class="bi bi-lightning-charge fs-4"></i>
                         </div>
-            <h5 class="card-title text-body-emphasis">AI-Powered Setup</h5>
-            <p class="card-text text-body-secondary">Intelligent installation automation that detects and fixes common issues automatically.</p>
+                        <h5 class="card-title text-body-emphasis">AI-Powered Setup</h5>
+                        <p class="card-text text-body-secondary">Intelligent installation automation that detects and fixes common issues automatically.</p>
                     </div>
                 </div>
             </div>

data/_layouts/notebook.html

@@ -95,7 +95,7 @@ layout: default
     {% if page.tags and page.tags.size > 0 %}
       <div class="notebook-tags mb-3">
         {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | slugify }}/" class="badge bg-secondary text-decoration-none me-1">
+          <a href="{{ '/tags/' | relative_url }}#{{ tag | slugify }}" class="badge bg-secondary text-decoration-none me-1">
             {{ tag }}
           </a>
         {% endfor %}
@@ -107,7 +107,7 @@ layout: default
       <div class="notebook-categories mb-3">
         <i class="bi bi-folder me-1"></i>
         {% for category in page.categories %}
-          <a href="{{ site.baseurl }}/categories/{{ category | slugify }}/" class="text-decoration-none">
+          <a href="{{ '/categories/' | relative_url }}#{{ category | slugify }}" class="text-decoration-none">
             {{ category }}
           </a>
           {% unless forloop.last %}<span class="mx-1">/</span>{% endunless %}
@@ -148,7 +148,7 @@ layout: default
              class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
             <i class="bi bi-linkedin"></i> LinkedIn
           </a>
-          <a href="mailto:?subject={{ page.title | uri_escape }}&body={{ site.url | append: page.url | uri_escape }}" 
+          <a href="mailto:{{ site.email | escape }}?subject={{ page.title | uri_escape }}&body={{ site.url | append: page.url | uri_escape }}" 
              class="btn btn-outline-primary btn-sm">
             <i class="bi bi-envelope"></i> Email
           </a>
@@ -158,7 +158,7 @@ layout: default
     
     <!-- Download Original Notebook -->
     <div class="download-notebook mb-4">
-      <a href="{{ site.baseurl }}/pages/_notebooks/{{ page.slug }}.ipynb" 
+      <a href="https://raw.githubusercontent.com/{{ site.repository }}/{{ site.branch | default: 'main' }}/pages/_notebooks/{{ page.slug }}.ipynb" 
          class="btn btn-outline-secondary btn-sm" download>
         <i class="bi bi-download"></i> Download Original Notebook
       </a>

data/_layouts/root.html

@@ -65,8 +65,8 @@
         <!-- ======================== -->
         <!-- MAIN CONTENT AREA        -->
         <!-- ======================== -->
-        <!-- This is where child layouts inject their specific content -->
-        <div>
+        <!-- Skip-link target: keep a single, consistent #main-content anchor site-wide -->
+        <div id="main-content">
             {{ content }}
         </div>