jekyll-calconnect-theme 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8101b4b6ebc2ce836878b1bfb0bca4a0cf6a6e74dc1e35882437ae36f81dbd2
-  data.tar.gz: 9b23833d258824df5b7b5a2dd33f5491833d35ca2491f071ffff44e660586e98
+  metadata.gz: 163b2010d9482e41e13e2884c3b315037236e436e6bbe25c577fb50d705ccf4a
+  data.tar.gz: 257d221c8f154794023f9dd21f05bd3406e607dcb823428dbc50af048bb7dcad
 SHA512:
-  metadata.gz: 6cad0f652b298dc0467a383c513e7f83384bc5d1f0c828fb7cff3d25cacde3ebba76e5cc97ddb7cea67980d9464815e545160aaa6fb8bf06e2ecd98ba40e6720
-  data.tar.gz: a4194106e49d4f06e26d6566529468a34fb7ea9250875e62155c08732ee0a6438d92373583b9d578ec3cc6baff52270cef6f2affa1c5da8f8688e5acd784770a
+  metadata.gz: 85d744603dc67d956985f03e05bf5e46c805bf8aa813168ae680d3042abe9ff124d167ae35a3dbe4400707ad573d2c6e393458a1e805ec7a6fff33ef648278a7
+  data.tar.gz: fcdaa9bc4c95b6c1ea7b2abe162e61bef099de16e855ca74dc3801ffaf88cfcbe7748a8061890abf888c6a7434e9e620b3d36abafc0ee40eb4c165443fdde84c

data/CLAUDE.md

@@ -35,22 +35,42 @@ base.html        → HTML shell: head, header, footer, Vite JS entry
 
 CSS and JS live under `_frontend/` and are built by [jekyll-vite](https://github.com/elixir-vite/vite_ruby) in the consumer site. The theme provides:
 - `_frontend/entrypoints/application.css` — Tailwind v4 config (`@import "tailwindcss"`), `@tailwindcss/typography` plugin, custom theme tokens (primary/accent colors, fonts)
-- `_frontend/entrypoints/application.js` — imports `theme.js` (dark/light toggle with localStorage) and `navigation.js` (mobile menu, active state highlighting), plus sidebar collapsible toggle init
-- `_sass/calconnect/` — supplementary SCSS for layout, navigation, typography, code blocks, tables, dark mode
+- `_frontend/entrypoints/application.js` — imports `theme.js` (dark/light toggle with localStorage) and `navigation.js` (mobile menu, sidebar drawer, active state highlighting), plus sidebar collapsible toggle init
+- `_sass/calconnect/` — supplementary SCSS for layout, navigation, typography, code blocks, tables, dark mode. All colors use `var(--color-*, fallback)` referencing Tailwind's CSS custom properties — single source of truth for the palette.
 
-### Sidebar navigation (default.html layout)
+### Sidebar navigation
 
-The sidebar is fully data-driven from `site.data.navigation_sidebar.sections`. Each section has a `match` string matched against `page.url`. Item types: `link`, `collection` (iterates a Jekyll collection), `collapsible` (expandable with URL filtering), `group` (labeled sub-group), `years` (year list from `site.data.news_years`). The layout has no hardcoded page knowledge — all configuration is in the consumer site's `_data/navigation_sidebar.yml`.
+The sidebar is fully data-driven from `site.data.navigation_sidebar.sections`. Each section has a `match` string matched against `page.url`. The rendering is split across two includes:
+- `sidebar-nav.html` — finds the matching section, iterates its items
+- `sidebar-nav-item.html` — renders a single item by type. Group items recursively include this for their children, eliminating duplication.
+
+Item types: `link`, `collection` (iterates a Jekyll collection), `collapsible` (expandable with URL filtering), `group` (labeled sub-group with children), `years` (year list from `site.data.news_years`).
+
+### Icon system
+
+Icons live in `_includes/icons/` as `.svg` files (Liquid templates that output `<svg>` markup). Each accepts an optional `class` parameter for sizing (`{{ include.class | default: 'w-5 h-5' }}`). Consumer sites override individual icons by dropping a same-named file in their own `_includes/icons/`.
+
+### Site configuration (_config.yml)
+
+- `site.logo` / `site.logo_dark` — header/footer logo paths (dark variant for dark mode)
+- `site.header_cta` — `{url, label}` for a CTA button in the header
+- `site.data.navigation_header` — list of `{label, url, external?}` items for header nav
+- `site.data.navigation_footer` — list of `{title, links: [{label, url}]}` columns for footer
+- `site.data.social_links` — list of `{platform, url}` for footer social icons (github, linkedin, twitter/x, youtube)
+- `site.google_analytics` — GA4 measurement ID (production only)
+- Favicon files at site root: `favicon.svg`, `favicon-96x96.png`, `favicon.ico`, `apple-touch-icon.png`, `site.webmanifest`
 
 ### Includes
 
-- `head.html` — meta tags, Google Fonts (Inter + JetBrains Mono), critical inline CSS to prevent FOUC, `{% vite_stylesheet_tag %}`
-- `custom-head.html` — Vite client + JS tag (for dev HMR in consumer sites)
-- `header.html` — fixed top nav bar
-- `footer.html` — copyright bar
+- `head.html` — meta tags, full favicon set, Google Fonts (Inter + JetBrains Mono), critical inline CSS to prevent FOUC, `{% vite_stylesheet_tag %}`, GA4 (production only)
+- `custom-head.html` — Vite client tag (for dev HMR in consumer sites)
+- `header.html` — fixed top nav with logo, desktop nav, dark mode toggle, CTA button, mobile hamburger (sidebar drawer on docs pages, dropdown on others)
+- `footer.html` — logo + description column, data-driven nav columns, social links, copyright
+- `sidebar-nav.html` + `sidebar-nav-item.html` — data-driven sidebar navigation
 - `breadcrumbs.html` — URL-derived breadcrumb trail
 - `feedback.html` — "Was this helpful?" link
-- `google-analytics.html` — conditional GA snippet (production only)
+- `google-analytics.html` — GA4 gtag.js snippet
+- `icons/*.svg` — parametric icon includes (class parameter for sizing)
 
 ### Dark mode
 
@@ -66,4 +86,4 @@ Class-based (`html.dark`). `theme.js` runs immediately (before DOM ready) to pre
 
 ### Key Tailwind notes
 
-Uses Tailwind v4 (CSS-first config with `@theme` blocks, not `tailwind.config.js`). Colors use `gray` not `slate` for class compatibility. Primary color scale is indigo-based; accent is cyan.
+Uses Tailwind v4 (CSS-first config with `@theme` blocks, not `tailwind.config.js`). Colors use `gray` not `slate` for class compatibility. Primary color scale is indigo-based; accent is cyan. SCSS files reference colors via `var(--color-*, fallback)` to stay in sync with the Tailwind theme.

data/_frontend/entrypoints/application.css

@@ -48,9 +48,14 @@
   }
 
   :focus-visible {
-    outline: 2px solid #6366f1;
+    outline: 2px solid var(--color-primary-500, #6366f1);
     outline-offset: 2px;
   }
+
+  /* Smooth scroll offset for anchor links */
+  [id] {
+    scroll-margin-top: 5rem;
+  }
 }
 
 /* Custom component styles */

data/_frontend/entrypoints/application.js

@@ -2,6 +2,7 @@ import '../js/theme.js'
 import '../js/navigation.js'
 
 document.addEventListener('DOMContentLoaded', function() {
+  // Sidebar nav toggles
   document.querySelectorAll('.nav-toggle').forEach(function(toggle) {
     toggle.addEventListener('click', function() {
       this.classList.toggle('open');
@@ -9,4 +10,37 @@ document.addEventListener('DOMContentLoaded', function() {
       if (subsection) subsection.classList.toggle('collapsed');
     });
   });
+
+  // Code copy buttons
+  document.querySelectorAll('.documentation .doc-content pre').forEach(function(pre) {
+    var btn = document.createElement('button');
+    btn.className = 'code-copy-btn';
+    btn.textContent = 'Copy';
+    btn.setAttribute('aria-label', 'Copy code');
+    btn.addEventListener('click', function() {
+      var code = pre.querySelector('code');
+      var text = code ? code.textContent : pre.textContent;
+      navigator.clipboard.writeText(text).then(function() {
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(function() {
+          btn.textContent = 'Copy';
+          btn.classList.remove('copied');
+        }, 2000);
+      });
+    });
+    pre.style.position = 'relative';
+    pre.appendChild(btn);
+  });
+
+  // Scroll progress bar
+  var progressBar = document.getElementById('scroll-progress');
+  if (progressBar) {
+    window.addEventListener('scroll', function() {
+      var scrollTop = window.scrollY;
+      var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      var progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+      progressBar.style.width = progress + '%';
+    }, { passive: true });
+  }
 });

data/_frontend/js/navigation.js

@@ -1,24 +1,49 @@
 /**
  * Navigation Script
- * Handles mobile menu toggle and active state highlighting
+ * Handles mobile menu toggle, sidebar drawer, and active state highlighting
  */
 
 (function() {
   'use strict';
 
   /**
-   * Initialize mobile menu toggle
+   * Initialize mobile menu / sidebar drawer
+   * On docs pages: hamburger opens sidebar drawer
+   * On other pages: hamburger opens dropdown menu
    */
   function initMobileMenu() {
     var menuButton = document.getElementById('mobile-menu-btn');
     var mobileMenu = document.getElementById('mobile-menu');
+    var sidebar = document.querySelector('.docs-nav');
+    var backdrop = document.querySelector('.docs-nav-backdrop');
 
-    if (menuButton && mobileMenu) {
-      menuButton.addEventListener('click', function() {
+    if (!menuButton) return;
+
+    function closeSidebar() {
+      if (sidebar) sidebar.classList.remove('mobile-open');
+      if (backdrop) backdrop.classList.remove('active');
+      menuButton.setAttribute('aria-expanded', 'false');
+    }
+
+    menuButton.addEventListener('click', function() {
+      if (sidebar) {
+        var isOpen = sidebar.classList.contains('mobile-open');
+        if (isOpen) {
+          closeSidebar();
+        } else {
+          sidebar.classList.add('mobile-open');
+          if (backdrop) backdrop.classList.add('active');
+          menuButton.setAttribute('aria-expanded', 'true');
+        }
+      } else if (mobileMenu) {
         var isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
         menuButton.setAttribute('aria-expanded', !isExpanded);
         mobileMenu.classList.toggle('hidden');
-      });
+      }
+    });
+
+    if (backdrop) {
+      backdrop.addEventListener('click', closeSidebar);
     }
   }
 
@@ -33,7 +58,6 @@
     sidebarLinks.forEach(function(link) {
       var href = link.getAttribute('href');
       if (href) {
-        // Normalize paths for comparison
         var linkPath = href.replace(/\/$/, '');
         var pagePath = currentPath.replace(/\/$/, '');
         if (linkPath === pagePath) {
@@ -43,7 +67,7 @@
     });
 
     // Header navigation
-    var headerLinks = document.querySelectorAll('nav a[href]');
+    var headerLinks = document.querySelectorAll('#nav-header nav a[href]');
     headerLinks.forEach(function(link) {
       var href = link.getAttribute('href');
       if (href && href !== '/') {

data/_includes/custom-head.html

@@ -1,2 +1 @@
 {% vite_client_tag %}
-{% vite_javascript_tag application %}

data/_includes/footer.html

@@ -1,10 +1,51 @@
-<footer class="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-white/10 py-12 transition-colors">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="pt-8 border-t border-gray-200 dark:border-white/10">
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        &copy; {{ site.time | date: '%Y' }} CalConnect<sup>SM</sup>.
-        <a href="https://www.calconnect.org/about/policies/copyright-and-licensing" class="hover:text-gray-700 dark:hover:text-gray-300">Copyright</a>
+<footer class="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-white/10 transition-colors">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    {% if site.data.navigation_footer %}
+    <div class="grid grid-cols-2 md:grid-cols-{{ site.data.navigation_footer.size | plus: 1 | at_least: 2 }} gap-8 mb-8">
+      <!-- Logo + description column -->
+      <div class="col-span-2 md:col-span-1">
+        {% if site.logo %}
+        <img src="{{ site.logo | relative_url }}" alt="{{ site.title }}" class="h-8 mb-4 block dark:hidden">
+        <img src="{{ site.logo_dark | default: site.logo | relative_url }}" alt="{{ site.title }}" class="h-8 mb-4 hidden dark:block">
+        {% endif %}
+        {% if site.description %}
+        <p class="text-sm text-gray-600 dark:text-gray-500">{{ site.description }}</p>
+        {% endif %}
+      </div>
+      <!-- Nav columns -->
+      {% for column in site.data.navigation_footer %}
+      <div>
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">{{ column.title }}</h3>
+        <ul class="space-y-2">
+          {% for link in column.links %}
+          <li>
+            <a href="{{ link.url | relative_url }}"
+               class="text-sm text-gray-600 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
+              {{ link.label }}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    <div class="pt-8 border-t border-gray-200 dark:border-white/10 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <p class="text-sm text-gray-500 dark:text-gray-600">
+        &copy; {{ site.time | date: '%Y' }} {{ site.title | default: 'CalConnect' }}<sup>SM</sup>.
+        <a href="{{ site.copyright_url | default: '/about/policies/copyright-and-licensing' | relative_url }}" class="hover:text-gray-700 dark:hover:text-gray-300">Copyright</a>
       </p>
+      {% if site.data.social_links %}
+      <div class="flex gap-3">
+        {% for social in site.data.social_links %}
+        <a href="{{ social.url }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-white transition-colors" aria-label="{{ social.platform | capitalize }}" target="_blank" rel="noopener">
+          {% assign icon_path = social.platform | prepend: 'icons/' | append: '.svg' %}
+          {% include {{ icon_path }} %}
+        </a>
+        {% endfor %}
+      </div>
+      {% endif %}
     </div>
   </div>
 </footer>

data/_includes/google-analytics.html

@@ -1,9 +1,7 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-  ga('create', '{{ site.google_analytics }}', 'auto');
-  ga('send', 'pageview');
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{ site.google_analytics }}');
 </script>

data/_includes/head.html

@@ -6,9 +6,14 @@
   <meta name="description"
     content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}" />
 
-  {% if site.favicon %}
-  <link rel="icon" type="image/png" href="{{ site.favicon | relative_url }}" sizes="96x96" />
-  {% endif %}
+  <!-- Favicons -->
+  <link rel="icon" type="image/svg+xml" href="{{ '/favicon.svg' | relative_url }}">
+  <link rel="icon" type="image/png" href="{{ '/favicon-96x96.png' | relative_url }}" sizes="96x96">
+  <link rel="shortcut icon" href="{{ '/favicon.ico' | relative_url }}" type="image/vnd.microsoft.icon">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png' | relative_url }}">
+  <link rel="manifest" href="{{ '/site.webmanifest' | relative_url }}">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
 
   <!-- Google Fonts - Inter + JetBrains Mono -->
   <link rel="preconnect" href="https://fonts.googleapis.com">

data/_includes/header.html

@@ -1,9 +1,74 @@
 <header id="nav-header" class="fixed top-0 left-0 right-0 z-50 bg-white dark:bg-gray-950 backdrop-blur-md border-b border-gray-200 dark:border-white/10 transition-colors">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex items-center justify-between h-16">
-      <a href="{{ '/' | relative_url }}" class="flex items-center">
-        <span class="text-lg font-semibold text-gray-900 dark:text-white">{{ site.title | default: "CalConnect" }}</span>
+      <!-- Left: Logo -->
+      <a href="{{ '/' | relative_url }}" class="flex items-center gap-2.5">
+        {% if site.logo %}
+        <img src="{{ site.logo | relative_url }}" alt="{{ site.title | default: 'CalConnect' }}" class="h-8 w-auto block dark:hidden">
+        <img src="{{ site.logo_dark | default: site.logo | relative_url }}" alt="{{ site.title | default: 'CalConnect' }}" class="h-8 w-auto hidden dark:block">
+        {% else %}
+        <span class="text-lg font-semibold text-gray-900 dark:text-white tracking-tight">{{ site.title | default: "CalConnect" }}</span>
+        {% endif %}
       </a>
+
+      <!-- Center: Desktop nav -->
+      {% if site.data.navigation_header %}
+      <nav class="hidden lg:flex items-center gap-1" aria-label="Main navigation">
+        {% for item in site.data.navigation_header %}
+        <a href="{{ item.url | relative_url }}"
+           class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 transition-colors
+                  {% if item.external %}inline-flex items-center gap-1{% endif %}">
+          {{ item.label }}
+          {% if item.external %}{% include icons/external-link.svg %}{% endif %}
+        </a>
+        {% endfor %}
+      </nav>
+      {% endif %}
+
+      <!-- Right: Theme toggle + CTA + Mobile menu -->
+      <div class="flex items-center gap-2">
+        <button id="theme-toggle" type="button"
+                class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
+                aria-label="Toggle dark mode">
+          <span class="dark:hidden">{% include icons/moon.svg %}</span>
+          <span class="hidden dark:block">{% include icons/sun.svg %}</span>
+        </button>
+
+        {% if site.header_cta %}
+        <a href="{{ site.header_cta.url | relative_url }}"
+           class="hidden sm:inline-flex items-center px-4 py-2 bg-primary-500 text-white text-sm font-medium rounded-full hover:bg-primary-600 transition-colors">
+          {{ site.header_cta.label }}
+        </a>
+        {% endif %}
+
+        <button id="mobile-menu-btn" type="button"
+                class="lg:hidden p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
+                aria-label="Open menu" aria-expanded="false">
+          {% include icons/menu.svg %}
+        </button>
+      </div>
     </div>
   </div>
+
+  <!-- Mobile dropdown menu (for non-docs pages) -->
+  {% if site.data.navigation_header %}
+  <div id="mobile-menu" class="lg:hidden hidden border-t border-gray-200 dark:border-white/10">
+    <div class="px-4 py-4 space-y-1">
+      {% for item in site.data.navigation_header %}
+      <a href="{{ item.url | relative_url }}"
+         class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-white/10
+                {% if item.external %}flex items-center gap-1{% endif %}">
+        {{ item.label }}
+        {% if item.external %}{% include icons/external-link.svg %}{% endif %}
+      </a>
+      {% endfor %}
+      {% if site.header_cta %}
+      <a href="{{ site.header_cta.url | relative_url }}"
+         class="block px-4 py-2 mt-2 text-center bg-primary-500 text-white font-medium rounded-full hover:bg-primary-600">
+        {{ site.header_cta.label }}
+      </a>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
 </header>

data/_includes/icons/external-link.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-3 h-3' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>

data/_includes/icons/github.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-5 h-5' }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>

data/_includes/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-5 h-5' }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

data/_includes/icons/menu.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-6 h-6' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>

data/_includes/icons/moon.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-5 h-5' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>

data/_includes/icons/sun.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-5 h-5' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>

data/_includes/icons/twitter.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-5 h-5' }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>

data/_includes/icons/youtube.svg

@@ -0,0 +1 @@
+<svg class="{{ include.class | default: 'w-5 h-5' }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>

data/_includes/sidebar-nav-item.html

@@ -0,0 +1,126 @@
+{% comment %}
+  Renders a single sidebar nav item. Expects `include.item`.
+  Types: link, collection, collapsible, group, years.
+{% endcomment %}
+
+{% comment %} --- Collection helper --- {% endcomment %}
+{% assign _collection_name = include.item.collection %}
+{% case _collection_name %}
+  {% when 'about_pages' %}
+    {% assign _docs = site.about_pages %}
+  {% when 'membership_pages' %}
+    {% assign _docs = site.membership_pages %}
+  {% when 'events' %}
+    {% assign _docs = site.events %}
+  {% when 'resources' %}
+    {% assign _docs = site.resources %}
+  {% else %}
+    {% assign _docs = site.posts %}
+{% endcase %}
+
+{% comment %} --- LINK TYPE --- {% endcomment %}
+{% if include.item.type == 'link' or include.item.type == nil %}
+{% assign _active = false %}
+{% if page.url == include.item.url %}{% assign _active = true %}{% endif %}
+<li>
+  <a href="{{ include.item.url | relative_url }}" {% if _active %}class="active"{% endif %}>
+    {{ include.item.label }}
+  </a>
+</li>
+
+{% comment %} --- COLLECTION TYPE --- {% endcomment %}
+{% elsif include.item.type == 'collection' %}
+  {% if include.item.sort_field == 'date' and include.item.sort_order == 'desc' %}
+    {% assign _sorted = _docs | sort: 'date' | reverse %}
+  {% elsif include.item.sort_field %}
+    {% assign _sorted = _docs | sort: include.item.sort_field %}
+  {% else %}
+    {% assign _sorted = _docs %}
+  {% endif %}
+  {% for doc in _sorted %}
+  {% assign _doc_active = false %}
+  {% if page.url == doc.url %}{% assign _doc_active = true %}{% endif %}
+  <li>
+    <a href="{{ doc.url | relative_url }}" {% if _doc_active %}class="active"{% endif %}>
+      {{ doc.title | default: doc.name }}
+    </a>
+  </li>
+  {% endfor %}
+
+{% comment %} --- COLLAPSIBLE TYPE --- {% endcomment %}
+{% elsif include.item.type == 'collapsible' %}
+{% assign _open = false %}
+{% if page.url contains include.item.url_filter %}{% assign _open = true %}{% endif %}
+{% if include.item.url and page.url == include.item.url %}{% assign _open = true %}{% endif %}
+{% if include.item.children %}
+  {% for child in include.item.children %}
+    {% if page.url == child.url %}{% assign _open = true %}{% break %}{% endif %}
+  {% endfor %}
+{% endif %}
+<li>
+  <span class="nav-toggle {% if _open %}open{% endif %}">{{ include.item.label }}</span>
+  <ul class="nav-subsection {% unless _open %}collapsed{% endunless %}">
+    {% if include.item.first_child_label %}
+    {% assign _first_active = false %}
+    {% if page.url == include.item.url %}{% assign _first_active = true %}{% endif %}
+    <li><a href="{{ include.item.url | relative_url }}" {% if _first_active %}class="active"{% endif %}>{{ include.item.first_child_label }}</a></li>
+    {% endif %}
+    {% if include.item.children %}
+      {% for child in include.item.children %}
+      {% assign _child_active = false %}
+      {% if page.url == child.url %}{% assign _child_active = true %}{% endif %}
+    <li>
+      <a href="{{ child.url | relative_url }}" {% if _child_active %}class="active"{% endif %}>
+        {{ child.label }}
+      </a>
+    </li>
+      {% endfor %}
+    {% elsif include.item.collection %}
+    {% for doc in _docs %}
+      {% assign _url_matches = false %}
+      {% if doc.url contains include.item.url_filter %}{% assign _url_matches = true %}{% endif %}
+      {% assign _excluded = false %}
+      {% if doc.url == include.item.url %}{% assign _excluded = true %}{% endif %}
+      {% if include.item.exclude_urls %}
+        {% for excl in include.item.exclude_urls %}
+          {% if doc.url == excl %}{% assign _excluded = true %}{% endif %}
+        {% endfor %}
+      {% elsif include.item.exclude_url %}
+        {% if doc.url == include.item.exclude_url %}{% assign _excluded = true %}{% endif %}
+      {% endif %}
+      {% if _url_matches and _excluded == false %}
+    {% assign _child_active = false %}
+    {% if page.url == doc.url %}{% assign _child_active = true %}{% endif %}
+    <li>
+      <a href="{{ doc.url | relative_url }}" {% if _child_active %}class="active"{% endif %}>
+        {{ doc.title }}
+      </a>
+    </li>
+      {% endif %}
+    {% endfor %}
+    {% endif %}
+  </ul>
+</li>
+
+{% comment %} --- YEARS TYPE --- {% endcomment %}
+{% elsif include.item.type == 'years' %}
+  {% assign _years = site.data.news_years %}
+  {% for year in _years %}
+  {% assign _yactive = false %}
+  {% if page.url contains year %}{% assign _yactive = true %}{% endif %}
+  <li>
+    <a href="/news/{{ year }}/" {% if _yactive %}class="active"{% endif %}>
+      {{ year }}
+    </a>
+  </li>
+  {% endfor %}
+
+{% comment %} --- GROUP TYPE --- {% endcomment %}
+{% elsif include.item.type == 'group' %}
+  </ul>
+  <div class="nav-group-title">{{ include.item.label }}</div>
+  <ul class="nav-items">
+    {% for child in include.item.children %}
+      {% include sidebar-nav-item.html item=child %}
+    {% endfor %}
+{% endif %}

data/_includes/sidebar-nav.html

@@ -0,0 +1,36 @@
+{% comment %}
+  Sidebar navigation — fully data-driven from site.data.navigation_sidebar.sections.
+  Matches the current page URL against each section's `match` string or `match_list` array,
+  then renders items by type: link, collection, collapsible, group, years.
+{% endcomment %}
+{% assign current_section = nil %}
+{% for section in site.data.navigation_sidebar.sections %}
+  {% assign _matched = false %}
+  {% if section.match_list %}
+    {% for m in section.match_list %}
+      {% if page.url contains m %}
+        {% assign _matched = true %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+  {% elsif section.match %}
+    {% if page.url contains section.match %}
+      {% assign _matched = true %}
+    {% endif %}
+  {% endif %}
+  {% if _matched %}
+    {% assign current_section = section %}
+    {% break %}
+  {% endif %}
+{% endfor %}
+
+{% if current_section %}
+<div class="nav-section">
+  <div class="nav-section-title">{{ current_section.title }}</div>
+  <ul class="nav-items">
+    {% for item in current_section.items %}
+      {% include sidebar-nav-item.html item=item %}
+    {% endfor %}
+  </ul>
+</div>
+{% endif %}