jekyll-calconnect-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a8101b4b6ebc2ce836878b1bfb0bca4a0cf6a6e74dc1e35882437ae36f81dbd2
+  data.tar.gz: 9b23833d258824df5b7b5a2dd33f5491833d35ca2491f071ffff44e660586e98
+SHA512:
+  metadata.gz: 6cad0f652b298dc0467a383c513e7f83384bc5d1f0c828fb7cff3d25cacde3ebba76e5cc97ddb7cea67980d9464815e545160aaa6fb8bf06e2ecd98ba40e6720
+  data.tar.gz: a4194106e49d4f06e26d6566529468a34fb7ea9250875e62155c08732ee0a6438d92373583b9d578ec3cc6baff52270cef6f2affa1c5da8f8688e5acd784770a

data/CLAUDE.md

@@ -0,0 +1,69 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a shared Jekyll theme gem (`jekyll-calconnect-theme`) used across multiple CalConnect sites (calconnect.org, DEVGUIDE, standards.calconnect.org). Sites consume it via their Gemfile and override layouts/includes as needed.
+
+## Build & Development
+
+```bash
+# Install dependencies
+bundle install
+
+# Build the gem
+rake build                  # outputs to pkg/
+
+# Install locally for development
+rake install
+```
+
+This is a theme gem only — there is no standalone site to serve. To preview changes, use the theme in a consumer site's `_config.yml` with a Gemfile pointing at the local path.
+
+## Architecture
+
+### Layout hierarchy
+
+```
+base.html        → HTML shell: head, header, footer, Vite JS entry
+  └─ default.html → Documentation layout: sidebar nav + article area
+       └─ page.html → Pass-through wrapper
+```
+
+### Frontend pipeline
+
+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
+
+### Sidebar navigation (default.html layout)
+
+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`.
+
+### 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
+- `breadcrumbs.html` — URL-derived breadcrumb trail
+- `feedback.html` — "Was this helpful?" link
+- `google-analytics.html` — conditional GA snippet (production only)
+
+### Dark mode
+
+Class-based (`html.dark`). `theme.js` runs immediately (before DOM ready) to prevent flash, using localStorage > system preference. Tailwind custom variant: `@custom-variant dark (&:where(.dark, .dark *))`.
+
+### Ruby namespace
+
+`Jekyll::CalconnectTheme` with version in `lib/jekyll/calconnect/theme/version.rb`. The gemspec requires the version constant from there.
+
+### Gem packaging
+
+`gemspec` packages: `{_layouts,_includes,_sass,_frontend,lib}/**/*`, `*.md`, `*.gemspec`. Only runtime dependency is `jekyll ~> 4.3`.
+
+### 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.

data/README.md

@@ -0,0 +1,21 @@
+# jekyll-calconnect-theme
+
+Shared Jekyll theme gem for CalConnect sites (calconnect.org, DEVGUIDE, standards.calconnect.org).
+
+## Usage
+
+Add to your site's `Gemfile`:
+
+```ruby
+gem "jekyll-calconnect-theme", git: "git@github.com:calconnect/calconnect-theme.git"
+```
+
+Add to your site's `_config.yml`:
+
+```yaml
+theme: jekyll-calconnect-theme
+```
+
+## Site-specific overrides
+
+Any layout or include can be overridden by placing a file with the same name in your site's own `_layouts/` or `_includes/` directory.

data/_frontend/entrypoints/application.css

@@ -0,0 +1,80 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+/* Enable class-based dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Custom theme configuration */
+@theme {
+  /* Font families */
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+
+  /* Primary colors */
+  --color-primary-50: #eef2ff;
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #4338ca;
+  --color-primary-800: #3730a3;
+  --color-primary-900: #312e81;
+
+  /* Accent color */
+  --color-accent-400: #22d3ee;
+  --color-accent-500: #06b6d4;
+}
+
+/* Custom base styles */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-feature-settings: "kern" 1, "liga" 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  main {
+    padding-top: 64px;
+  }
+
+  ::selection {
+    background-color: rgba(99, 102, 241, 0.2);
+  }
+
+  :focus-visible {
+    outline: 2px solid #6366f1;
+    outline-offset: 2px;
+  }
+}
+
+/* Custom component styles */
+@layer components {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .sr-only:focus {
+    position: fixed;
+    width: auto;
+    height: auto;
+    padding: 0.5rem 1rem;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}

data/_frontend/entrypoints/application.js

@@ -0,0 +1,12 @@
+import '../js/theme.js'
+import '../js/navigation.js'
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('.nav-toggle').forEach(function(toggle) {
+    toggle.addEventListener('click', function() {
+      this.classList.toggle('open');
+      var subsection = this.nextElementSibling;
+      if (subsection) subsection.classList.toggle('collapsed');
+    });
+  });
+});

data/_frontend/js/navigation.js

@@ -0,0 +1,66 @@
+/**
+ * Navigation Script
+ * Handles mobile menu toggle and active state highlighting
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Initialize mobile menu toggle
+   */
+  function initMobileMenu() {
+    var menuButton = document.getElementById('mobile-menu-btn');
+    var mobileMenu = document.getElementById('mobile-menu');
+
+    if (menuButton && mobileMenu) {
+      menuButton.addEventListener('click', function() {
+        var isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
+        menuButton.setAttribute('aria-expanded', !isExpanded);
+        mobileMenu.classList.toggle('hidden');
+      });
+    }
+  }
+
+  /**
+   * Highlight active navigation items
+   */
+  function initActiveNav() {
+    var currentPath = window.location.pathname;
+
+    // Sidebar navigation
+    var sidebarLinks = document.querySelectorAll('.docs-nav .nav-items a');
+    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) {
+          link.classList.add('active');
+        }
+      }
+    });
+
+    // Header navigation
+    var headerLinks = document.querySelectorAll('nav a[href]');
+    headerLinks.forEach(function(link) {
+      var href = link.getAttribute('href');
+      if (href && href !== '/') {
+        var linkPath = href.replace(/\/$/, '');
+        var pagePath = currentPath.replace(/\/$/, '');
+        if (pagePath.indexOf(linkPath) === 0) {
+          link.classList.add('active');
+        }
+      }
+    });
+  }
+
+  /**
+   * Initialize on DOM ready
+   */
+  document.addEventListener('DOMContentLoaded', function() {
+    initMobileMenu();
+    initActiveNav();
+  });
+})();

data/_frontend/js/theme.js

@@ -0,0 +1,58 @@
+/**
+ * Theme Toggle Script
+ * Handles dark/light mode switching with localStorage persistence
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Get the user's theme preference
+   * Priority: localStorage > system preference
+   */
+  function getThemePreference() {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme');
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  /**
+   * Set the theme on the document
+   */
+  function setTheme(theme) {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }
+
+  /**
+   * Initialize theme immediately to prevent flash
+   */
+  setTheme(getThemePreference());
+
+  /**
+   * Handle DOM ready for toggle button
+   */
+  document.addEventListener('DOMContentLoaded', function() {
+    var toggle = document.getElementById('theme-toggle');
+    if (toggle) {
+      toggle.addEventListener('click', function() {
+        var currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+        setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+      });
+    }
+  });
+
+  /**
+   * Handle system preference changes
+   */
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+    if (!localStorage.getItem('theme')) {
+      setTheme(e.matches ? 'dark' : 'light');
+    }
+  });
+})();

data/_includes/breadcrumbs.html

@@ -0,0 +1,23 @@
+<nav class="hidden lg:flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4" aria-label="Breadcrumb">
+  <ol class="flex items-center flex-wrap gap-2 list-none p-0 m-0">
+    <li><a href="{{ '/' | relative_url }}" class="hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
+    {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+    {% if page.collection == 'posts' %}
+    <li>/ <a href="{{ '/news' | relative_url }}" class="hover:text-gray-700 dark:hover:text-gray-300">News</a></li>
+    <li>/ {{ page.title }}</li>
+    {% else %}
+    {% for crumb in crumbs offset: 1 %}
+    {% if forloop.last %}
+    <li>/ {{ page.title }}</li>
+    {% else %}
+    {% assign crumb_limit = forloop.index | plus: 1 %}
+    {% assign crumb_url = '' %}
+    {% for crumb in crumbs limit: crumb_limit %}
+      {% assign crumb_url = crumb_url | append: crumb | append: '/' %}
+    {% endfor %}
+    <li>/ <a href="{{ crumb_url | absolute_url }}" class="hover:text-gray-700 dark:hover:text-gray-300">{{ crumb | replace: '-', ' ' | capitalize }}</a></li>
+    {% endif %}
+    {% endfor %}
+    {% endif %}
+  </ol>
+</nav>

data/_includes/custom-head.html

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

data/_includes/feedback.html

@@ -0,0 +1,3 @@
+<div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-6">
+  <p class="text-sm text-gray-500 dark:text-gray-400">Was this page helpful? Please give us <a href="https://goo.gl/forms/NqKna6d4lsqUtlgD3" class="text-indigo-500 hover:text-indigo-600 underline" target="_blank" rel="noopener">Feedback</a>.</p>
+</div>

data/_includes/footer.html

@@ -0,0 +1,10 @@
+<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>
+      </p>
+    </div>
+  </div>
+</footer>

data/_includes/google-analytics.html

@@ -0,0 +1,9 @@
+<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');
+</script>

data/_includes/head.html

@@ -0,0 +1,33 @@
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {% assign page_title = page.title | default: page.name %}
+  <title>{% if page_title %}{{ page_title | escape }} | {% endif %}{{ site.title | default: "CalConnect" }}</title>
+  <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 %}
+
+  <!-- Google Fonts - Inter + JetBrains Mono -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
+  <!-- Critical CSS to prevent flash of unstyled content -->
+  <style>
+    html{scroll-behavior:smooth!important}
+    body{font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff!important;color:#1e293b!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;opacity:1!important}
+    html.dark body{background-color:#0f172a!important;color:#f1f5f9!important}
+    #nav-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:50!important;height:64px!important}
+    main{padding-top:64px!important}
+  </style>
+
+  <!-- Vite Stylesheet (Tailwind CSS) -->
+  {% vite_stylesheet_tag application %}
+
+  {% if jekyll.environment == 'production' and site.google_analytics %}
+  {% include google-analytics.html %}
+  {% endif %}
+</head>

data/_includes/header.html

@@ -0,0 +1,9 @@
+<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>
+      </a>
+    </div>
+  </div>
+</header>

data/_layouts/base.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+
+{% include head.html %}
+
+<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-white">
+  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-indigo-500 focus:text-white focus:px-4 focus:py-2 focus:rounded-lg">
+    Skip to main content
+  </a>
+
+  {% include header.html %}
+
+  <main id="main-content">
+    {{ content }}
+  </main>
+
+  {% include footer.html %}
+
+  {% vite_javascript_tag application %}
+</body>
+</html>

data/_layouts/default.html

@@ -0,0 +1,254 @@
+---
+layout: base
+---
+
+<section class="documentation">
+  <!-- Left Sidebar Navigation - Fully Data-Driven -->
+  <nav class="docs-nav" aria-label="Section navigation">
+    <div class="docs-nav-content">
+
+      {% comment %}
+        Find matching section based on page URL.
+        The layout has no knowledge of specific pages - all configuration is in _data/navigation_sidebar.yml
+      {% endcomment %}
+      {% assign current_section = nil %}
+      {% for section in site.data.navigation_sidebar.sections %}
+        {% if page.url contains section.match %}
+          {% 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 %}
+
+            {% comment %} --- LINK TYPE --- {% endcomment %}
+            {% if item.type == 'link' or item.type == nil %}
+            {% assign is_active = false %}
+            {% if page.url == item.url %}
+              {% assign is_active = true %}
+            {% endif %}
+            <li>
+              <a href="{{ item.url | relative_url }}" {% if is_active %}class="active"{% endif %}>
+                {{ item.label }}
+              </a>
+            </li>
+
+            {% comment %} --- COLLECTION TYPE --- {% endcomment %}
+            {% elsif item.type == 'collection' %}
+              {% case item.collection %}
+                {% 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 %}
+              {% if item.sort_field == 'date' and item.sort_order == 'desc' %}
+                {% assign sorted_docs = docs | sort: 'date' | reverse %}
+              {% elsif item.sort_field %}
+                {% assign sorted_docs = docs | sort: item.sort_field %}
+              {% else %}
+                {% assign sorted_docs = docs %}
+              {% endif %}
+              {% for doc in sorted_docs %}
+              {% assign is_doc_active = false %}
+              {% if page.url == doc.url %}
+                {% assign is_doc_active = true %}
+              {% endif %}
+              <li>
+                <a href="{{ doc.url | relative_url }}" {% if is_doc_active %}class="active"{% endif %}>
+                  {{ doc.title | default: doc.name }}
+                </a>
+              </li>
+              {% endfor %}
+
+            {% comment %} --- COLLAPSIBLE TYPE --- {% endcomment %}
+            {% elsif item.type == 'collapsible' %}
+              {% assign is_open = false %}
+              {% if page.url contains item.url_filter %}
+                {% assign is_open = true %}
+              {% endif %}
+              {% case item.collection %}
+                {% when 'about_pages' %}
+                  {% assign child_docs = site.about_pages %}
+                {% when 'membership_pages' %}
+                  {% assign child_docs = site.membership_pages %}
+                {% when 'events' %}
+                  {% assign child_docs = site.events %}
+                {% when 'resources' %}
+                  {% assign child_docs = site.resources %}
+                {% else %}
+                  {% assign child_docs = site.posts %}
+              {% endcase %}
+            <li>
+              <span class="nav-toggle {% if is_open %}open{% endif %}">{{ item.label }}</span>
+              <ul class="nav-subsection {% unless is_open %}collapsed{% endunless %}">
+                {% if item.first_child_label %}
+                {% assign first_is_active = false %}
+                {% if page.url contains item.url_filter %}
+                  {% assign first_is_active = true %}
+                {% endif %}
+                <li><a href="{{ item.url | relative_url }}" {% if first_is_active %}class="active"{% endif %}>{{ item.first_child_label }}</a></li>
+                {% endif %}
+                {% for doc in child_docs %}
+                  {% assign url_matches = false %}
+                  {% if doc.url contains item.url_filter %}
+                    {% assign url_matches = true %}
+                  {% endif %}
+                  {% assign is_excluded = false %}
+                  {% if doc.url == item.url %}
+                    {% assign is_excluded = true %}
+                  {% endif %}
+                  {% if item.exclude_urls %}
+                    {% for excl in item.exclude_urls %}
+                      {% if doc.url == excl %}
+                        {% assign is_excluded = true %}
+                      {% endif %}
+                    {% endfor %}
+                  {% elsif item.exclude_url %}
+                    {% if doc.url == item.exclude_url %}
+                      {% assign is_excluded = true %}
+                    {% endif %}
+                  {% endif %}
+                  {% if url_matches and is_excluded == false %}
+                {% assign child_is_active = false %}
+                {% if page.url == doc.url %}
+                  {% assign child_is_active = true %}
+                {% endif %}
+                <li>
+                  <a href="{{ doc.url | relative_url }}" {% if child_is_active %}class="active"{% endif %}>
+                    {{ doc.title }}
+                  </a>
+                </li>
+                  {% endif %}
+                {% endfor %}
+              </ul>
+            </li>
+
+            {% comment %} --- YEARS TYPE --- {% endcomment %}
+            {% elsif item.type == 'years' %}
+              {% assign years = site.data.news_years %}
+              {% for year in years %}
+              {% assign is_active = false %}
+              {% if page.url contains year %}
+                {% assign is_active = true %}
+              {% endif %}
+              <li>
+                <a href="/news/{{ year }}/" {% if is_active %}class="active"{% endif %}>
+                  {{ year }}
+                </a>
+              </li>
+              {% endfor %}
+
+            {% comment %} --- GROUP TYPE --- {% endcomment %}
+            {% elsif item.type == 'group' %}
+              </ul>
+              <div class="nav-group-title">{{ item.label }}</div>
+              <ul class="nav-items">
+                {% for child in item.children %}
+                  {% if child.type == 'link' or child.type == nil %}
+                  {% assign group_link_active = false %}
+                  {% if page.url == child.url %}
+                    {% assign group_link_active = true %}
+                  {% endif %}
+                  <li>
+                    <a href="{{ child.url | relative_url }}" {% if group_link_active %}class="active"{% endif %}>
+                      {{ child.label }}
+                    </a>
+                  </li>
+                  {% elsif child.type == 'collapsible' %}
+                    {% assign is_open = false %}
+                    {% if page.url contains child.url_filter %}
+                      {% assign is_open = true %}
+                    {% endif %}
+                    {% case child.collection %}
+                      {% when 'about_pages' %}
+                        {% assign child_docs = site.about_pages %}
+                      {% when 'membership_pages' %}
+                        {% assign child_docs = site.membership_pages %}
+                      {% when 'events' %}
+                        {% assign child_docs = site.events %}
+                      {% when 'resources' %}
+                        {% assign child_docs = site.resources %}
+                      {% else %}
+                        {% assign child_docs = site.posts %}
+                    {% endcase %}
+                  <li>
+                    <span class="nav-toggle {% if is_open %}open{% endif %}">{{ child.label }}</span>
+                    <ul class="nav-subsection {% unless is_open %}collapsed{% endunless %}">
+                      {% if child.first_child_label %}
+                      {% assign group_first_active = false %}
+                      {% if page.url contains child.url_filter %}
+                        {% assign group_first_active = true %}
+                      {% endif %}
+                      <li><a href="{{ child.url | relative_url }}" {% if group_first_active %}class="active"{% endif %}>{{ child.first_child_label }}</a></li>
+                      {% endif %}
+                      {% for doc in child_docs %}
+                        {% assign url_matches = false %}
+                        {% if doc.url contains child.url_filter %}
+                          {% assign url_matches = true %}
+                        {% endif %}
+                        {% assign is_excluded = false %}
+                        {% if doc.url == child.url %}
+                          {% assign is_excluded = true %}
+                        {% endif %}
+                        {% if child.exclude_urls %}
+                          {% for excl in child.exclude_urls %}
+                            {% if doc.url == excl %}
+                              {% assign is_excluded = true %}
+                            {% endif %}
+                          {% endfor %}
+                        {% elsif child.exclude_url %}
+                          {% if doc.url == child.exclude_url %}
+                            {% assign is_excluded = true %}
+                          {% endif %}
+                        {% endif %}
+                        {% if url_matches and is_excluded == false %}
+                      {% assign group_doc_active = false %}
+                      {% if page.url == doc.url %}
+                        {% assign group_doc_active = true %}
+                      {% endif %}
+                      <li>
+                        <a href="{{ doc.url | relative_url }}" {% if group_doc_active %}class="active"{% endif %}>
+                          {{ doc.title }}
+                        </a>
+                      </li>
+                        {% endif %}
+                      {% endfor %}
+                    </ul>
+                  </li>
+                  {% endif %}
+                {% endfor %}
+
+            {% endif %}
+
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+
+    </div>
+  </nav>
+
+  <!-- Main Article -->
+  <article>
+    {% assign page_title = page.title | default: page.name %}
+    {% if page_title %}
+    <header>
+      <h1>{{ page_title }}</h1>
+    </header>
+    {% endif %}
+
+    <div class="body">
+      {{ content }}
+    </div>
+  </article>
+</section>

data/_layouts/page.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+{{ content }}

data/_sass/calconnect/_code.scss

@@ -0,0 +1,23 @@
+// Code blocks and inline code
+
+.documentation .body pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+.documentation .body code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.875rem;
+}
+
+.documentation .body :not(pre) > code {
+  background: #f1f5f9;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  color: #1e293b;
+  font-size: 0.8125rem;
+}

data/_sass/calconnect/_dark-mode.scss

@@ -0,0 +1,91 @@
+// Dark mode overrides
+
+// Layout
+.dark .documentation > article > header {
+  border-bottom-color: #334155;
+}
+
+.dark .documentation > article > header h1 {
+  color: #f8fafc;
+}
+
+// Navigation
+.dark .docs-nav .nav-group-title {
+  color: #64748b;
+  border-top-color: #334155;
+}
+
+.dark .docs-nav .nav-items a:hover {
+  background: #1e293b;
+  color: #f1f5f9;
+}
+
+.dark .docs-nav .nav-items a.active {
+  background: #312e81;
+  color: #a5b4fc;
+}
+
+.dark .nav-toggle:hover {
+  background: #1e293b;
+  color: #f1f5f9;
+}
+
+.dark .nav-subsection {
+  border-left-color: #334155;
+}
+
+// Typography
+.dark .documentation .body h2 {
+  color: #f1f5f9;
+}
+
+.dark .documentation .body h3 {
+  color: #e2e8f0;
+}
+
+.dark .documentation .body p {
+  color: #94a3b8;
+}
+
+.dark .documentation .body ul,
+.dark .documentation .body ol,
+.dark .documentation .body dl,
+.dark .documentation .post-content ul,
+.dark .documentation .post-content ol,
+.dark .documentation .post-content dl,
+.dark .documentation .sectionbody ul,
+.dark .documentation .sectionbody ol,
+.dark .documentation .sectionbody dl {
+  color: #94a3b8;
+}
+
+.dark .documentation .body li::marker,
+.dark .documentation .post-content li::marker,
+.dark .documentation .sectionbody li::marker {
+  color: #818cf8;
+}
+
+.dark .documentation .body dt {
+  color: #f1f5f9;
+}
+
+.dark .documentation .body dd {
+  color: #94a3b8;
+}
+
+// Code
+.dark .documentation .body :not(pre) > code {
+  background: #334155;
+  color: #e2e8f0;
+}
+
+// Tables
+.dark .documentation .body th,
+.dark .documentation .body td {
+  border-bottom-color: #334155;
+}
+
+.dark .documentation .body th {
+  background: #1e293b;
+  color: #f1f5f9;
+}

data/_sass/calconnect/_layout.scss

@@ -0,0 +1,57 @@
+// Documentation layout: two-column flex with sidebar
+.documentation {
+  display: flex;
+  max-width: 1400px;
+  margin: 0 auto;
+  margin-top: 64px;
+  padding: 2rem 1rem;
+  gap: 2rem;
+
+  @media (min-width: 1024px) {
+    padding: 2rem 2rem;
+  }
+}
+
+// Left sidebar
+.docs-nav {
+  width: 220px;
+  flex-shrink: 0;
+}
+
+// Sticky sidebar content
+@media (min-width: 1024px) {
+  .docs-nav-content {
+    position: sticky;
+    top: 5rem;
+    max-height: calc(100vh - 6rem);
+    overflow-y: auto;
+  }
+}
+
+// Main article
+.documentation > article {
+  flex: 1;
+  min-width: 0;
+  max-width: 75ch;
+}
+
+.documentation > article > header {
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.documentation > article > header h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.2;
+  margin: 0;
+}
+
+// Hide sidebar on mobile
+@media (max-width: 1023px) {
+  .docs-nav {
+    display: none;
+  }
+}

data/_sass/calconnect/_navigation.scss

@@ -0,0 +1,113 @@
+// Sidebar navigation components
+
+.docs-nav .nav-section {
+  margin-bottom: 1.5rem;
+}
+
+.docs-nav .nav-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #94a3b8;
+  margin-bottom: 0.5rem;
+  padding: 0 0.75rem;
+}
+
+// Group headers within navigation
+.docs-nav .nav-group-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #94a3b8;
+  margin-top: 1rem;
+  margin-bottom: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.docs-nav .nav-group-title:first-child {
+  margin-top: 0;
+  border-top: none;
+}
+
+.docs-nav .nav-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.docs-nav .nav-items li {
+  margin-bottom: 0.125rem;
+}
+
+.docs-nav .nav-items a {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  color: #64748b;
+  text-decoration: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  transition: all 0.15s ease;
+}
+
+.docs-nav .nav-items a:hover {
+  background: #f1f5f9;
+  color: #1e293b;
+}
+
+.docs-nav .nav-items a.active {
+  background: #eef2ff;
+  color: #4f46e5;
+  font-weight: 500;
+}
+
+// Collapsible subsections
+.nav-subsection {
+  margin-left: 0.75rem;
+  border-left: 2px solid #e2e8f0;
+  padding-left: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+// Toggle button
+.nav-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  color: #64748b;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.nav-toggle:hover {
+  background: #f1f5f9;
+  color: #1e293b;
+}
+
+// Arrow indicator
+.nav-toggle::after {
+  content: '';
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 0.2s ease;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.nav-toggle.open::after {
+  transform: rotate(45deg);
+}
+
+.nav-subsection.collapsed {
+  display: none;
+}

data/_sass/calconnect/_tables.scss

@@ -0,0 +1,20 @@
+// Table styling
+
+.documentation .body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+}
+
+.documentation .body th,
+.documentation .body td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.documentation .body th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #1e293b;
+}

data/_sass/calconnect/_typography.scss

@@ -0,0 +1,112 @@
+// Documentation body typography
+
+.documentation .body {
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.documentation .body h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  color: #1e293b;
+}
+
+.documentation .body h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  color: #334155;
+}
+
+.documentation .body p {
+  margin-bottom: 1rem;
+  color: #475569;
+}
+
+.documentation .body a {
+  color: #6366f1;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.documentation .body a:hover {
+  color: #4f46e5;
+}
+
+// Lists
+.documentation .body ul,
+.documentation .body ol,
+.documentation .body dl,
+.documentation .post-content ul,
+.documentation .post-content ol,
+.documentation .post-content dl,
+.documentation .sectionbody ul,
+.documentation .sectionbody ol,
+.documentation .sectionbody dl {
+  margin-bottom: 1.25rem;
+  padding-left: 1.75rem;
+  color: #475569;
+  list-style-position: outside;
+}
+
+.documentation .body ul,
+.documentation .post-content ul,
+.documentation .sectionbody ul {
+  list-style-type: disc !important;
+}
+
+.documentation .body ul ul,
+.documentation .post-content ul ul,
+.documentation .sectionbody ul ul {
+  list-style-type: circle !important;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.documentation .body ol,
+.documentation .post-content ol,
+.documentation .sectionbody ol {
+  list-style-type: decimal !important;
+}
+
+// Exception: don't number breadcrumb navigation
+.body nav[aria-label="Breadcrumb"] ol,
+.body nav ol.list-none,
+ol.list-none {
+  list-style: none !important;
+  padding-left: 0 !important;
+}
+
+.body nav[aria-label="Breadcrumb"] li,
+.body nav ol.list-none li {
+  margin-bottom: 0 !important;
+}
+
+.documentation .body li,
+.documentation .post-content li,
+.documentation .sectionbody li {
+  margin-bottom: 0.625rem;
+  line-height: 1.7;
+}
+
+.documentation .body li::marker,
+.documentation .post-content li::marker,
+.documentation .sectionbody li::marker {
+  color: #6366f1;
+}
+
+// Definition lists
+.documentation .body dt {
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 0.25rem;
+}
+
+.documentation .body dd {
+  margin-left: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: #475569;
+}

data/_sass/calconnect.scss

@@ -0,0 +1,6 @@
+@import 'calconnect/layout';
+@import 'calconnect/navigation';
+@import 'calconnect/typography';
+@import 'calconnect/code';
+@import 'calconnect/tables';
+@import 'calconnect/dark-mode';

data/jekyll-calconnect-theme.gemspec

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require_relative "lib/jekyll/calconnect/theme/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-calconnect-theme"
+  spec.version       = Jekyll::CalconnectTheme::VERSION
+  spec.authors       = ["CalConnect"]
+  spec.email         = ["info@calconnect.org"]
+  spec.summary       = "Shared Jekyll theme for CalConnect sites"
+  spec.homepage      = "https://github.com/calconnect/calconnect-theme"
+  spec.license       = "MIT"
+
+  spec.files = Dir[
+    "{_layouts,_includes,_sass,_frontend,lib}/**/*",
+    "*.md",
+    "*.gemspec"
+  ]
+
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency "jekyll", "~> 4.3"
+end

data/lib/jekyll/calconnect/theme/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module CalconnectTheme
+    VERSION = "0.1.0"
+  end
+end

data/lib/jekyll/calconnect/theme.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require_relative "theme/version"
+
+module Jekyll
+  module CalconnectTheme
+  end
+end

metadata

@@ -0,0 +1,79 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-calconnect-theme
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- CalConnect
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+email:
+- info@calconnect.org
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CLAUDE.md
+- README.md
+- _frontend/entrypoints/application.css
+- _frontend/entrypoints/application.js
+- _frontend/js/navigation.js
+- _frontend/js/theme.js
+- _includes/breadcrumbs.html
+- _includes/custom-head.html
+- _includes/feedback.html
+- _includes/footer.html
+- _includes/google-analytics.html
+- _includes/head.html
+- _includes/header.html
+- _layouts/base.html
+- _layouts/default.html
+- _layouts/page.html
+- _sass/calconnect.scss
+- _sass/calconnect/_code.scss
+- _sass/calconnect/_dark-mode.scss
+- _sass/calconnect/_layout.scss
+- _sass/calconnect/_navigation.scss
+- _sass/calconnect/_tables.scss
+- _sass/calconnect/_typography.scss
+- jekyll-calconnect-theme.gemspec
+- lib/jekyll/calconnect/theme.rb
+- lib/jekyll/calconnect/theme/version.rb
+homepage: https://github.com/calconnect/calconnect-theme
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: Shared Jekyll theme for CalConnect sites
+test_files: []