jekyll-theme-docsteer 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0b49a45ae03e89044c653d5cae4fa3749d6b3c4a3d7c6837555a383242700ee3
+  data.tar.gz: 1f9b744dc050ff685596ba7d853ed230cdf08224d4aa9caceead2363470ec14e
+SHA512:
+  metadata.gz: c506de353cb020505952ca9bd4b6c7e69f1bddc933c538e0d1bbc58beaf0f01cedddf9becacf21ca7c2dc17677a6c2cb028a0a56533fa41ecba9af3463f2cfa7
+  data.tar.gz: 046a10b8e0e8814a576703ef264c368ae356464d71cb28baf83ed2bf4f2ba4cf44000912a9363a14ee162fd8c1c63445d38f51174a5cd1aff6d5e27fdafb9854

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cristian Castellari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,107 @@
+# DocSteer
+
+**Simple, searchable docs and knowledge bases for teams** — a fast,
+framework-free Jekyll theme for technical documentation, help centres and
+internal wikis.
+
+[**Live demo**](https://Skyflash.github.io/docsteer) ·
+[Documentation](https://Skyflash.github.io/docsteer/docs/introduction/) ·
+MIT licensed
+
+![DocSteer](assets/images/screenshot.png)
+
+---
+
+## Features
+
+| | |
+| --- | --- |
+| 🎨 **6 colour skins** | `aqua`, `violet`, `mint`, `ember`, `graphite`, `clay` — each with light **and** dark, switchable in `_config.yml` or live in the navbar |
+| 🌗 **Dark mode** | Follows the OS, or a manual toggle stored in `localStorage`, no flash on load |
+| 🔍 **Live search** | Prebuilt JSON index + keyboard-driven modal (`/`, <kbd>⌘K</kbd>), zero dependencies |
+| 🖼️ **Image lightbox** | Click-to-zoom, galleries, captions, keyboard nav |
+| 📑 **Auto TOC** | Built from your headings, with scroll-spy |
+| ❓ **FAQ pages** | `layout: faq` — accordion built on native `<details>`, deep-linkable questions, indexed by the search, `FAQPage` structured data |
+| 📱 **Responsive & pixel-perfect** | 320 px phones → ultrawide, real mobile drawer |
+| ⚡ **Fast** | ~7 kB vanilla JS (all deferred), compressed CSS, `preconnect`/`preload` |
+| 🔎 **SEO ready** | `jekyll-seo-tag`, sitemap, RSS, Open Graph, JSON-LD |
+| ✏️ **Easy to customise** | All colours in one Sass map, documented CSS tokens, upgrade-safe override files |
+| 🧩 **Font Awesome** | 6.5.2 Free, **bundled locally** by default (offline / firewall-safe); CDN optional |
+| ☕ **Buy me a coffee** | Optional support button (navbar / sidebar / footer) |
+
+## Quick start
+
+```bash
+git clone https://github.com/Skyflash/docsteer.git
+cd docsteer
+bundle install
+bundle exec jekyll serve --livereload
+# → http://localhost:4000
+```
+
+Then:
+
+1. Edit **`_config.yml`** — everything is under the `docsteer:` key.
+2. Pick a skin: `docsteer: { skin: violet }`.
+3. Add pages to **`_docs/`** and list them in **`_data/navigation.yml`**.
+
+Full guide: [`/docs/introduction/`](https://Skyflash.github.io/docsteer/docs/introduction/).
+
+## Project layout
+
+```
+_config.yml              All theme options (docsteer: key)
+_data/navigation.yml     Top nav + grouped sidebar
+_layouts/                default · home · doc · page
+_includes/               header, sidebar, footer, search modal, TOC (overridable)
+_includes/head-custom.html   ← your meta/fonts; never overwritten by upgrades
+_sass/docsteer/         one partial per concern
+_sass/docsteer/_skins.scss   ← all six palettes live here
+assets/js/               main.js · search.js · lightbox.js  (independent)
+assets/css/main.scss     entry point
+search.json              search index (Liquid-generated)
+_docs/                   the theme's own documentation (sample content)
+```
+
+## Configuration
+
+See [`_docs/configuration.md`](_docs/configuration.md) or the rendered
+[Configuration page](https://Skyflash.github.io/docsteer/docs/configuration/).
+Highlights:
+
+```yaml
+docsteer:
+  skin: aqua              # aqua | violet | mint | ember | graphite | clay
+  mode: auto              # auto | light | dark
+  search:  { enabled: true, collections: [docs], hotkey: true }
+  lightbox: { enabled: true }
+  toc:     { enabled: true, min_headings: 2 }
+  buy_me_a_coffee: { username: "cristiancastellari", show_in: [navbar, footer] }
+  footer:  { show_credit: true }
+```
+
+## Deploying
+
+GitHub Pages (via Actions), Netlify, Vercel, Cloudflare Pages — see
+[`_docs/deploying.md`](_docs/deploying.md). Build command
+`bundle exec jekyll build`, publish `_site/`.
+
+## Customising
+
+- **Colours** — edit the map in `_sass/docsteer/_skins.scss`; every value
+  becomes a CSS custom property.
+- **Sizing / fonts** — `_sass/docsteer/_tokens.scss`.
+- **Head tags** — `_includes/head-custom.html` (kept empty so upgrades are safe).
+- **Add a skin** — map entry + navbar list entry + `.skin-dot--name` gradient.
+
+## License
+
+[MIT](LICENSE). Attribution appreciated, not required
+(`footer.show_credit: false` to remove it).
+Font Awesome is under its own [Free License](https://fontawesome.com/license/free).
+
+## Support
+
+If DocSteer saved you time, you can
+[**buy me a coffee** ☕](https://www.buymeacoffee.com/cristiancastellari). Bug reports and
+PRs welcome in [Issues](https://github.com/Skyflash/docsteer/issues).

data/_data/navigation.yml

@@ -0,0 +1,44 @@
+# Top navigation (navbar)
+main:
+  - title: Docs
+    url: /docs/introduction/
+    icon: fa-solid fa-book
+  - title: Guides
+    url: /docs/live-search/
+    icon: fa-solid fa-compass
+  - title: Blog
+    url: /blog/
+    icon: fa-solid fa-newspaper
+
+# Left sidebar — grouped. `open: true` forces a group expanded.
+sidebar:
+  - title: Getting started
+    icon: fa-solid fa-rocket
+    open: true
+    children:
+      - { title: Introduction,     url: /docs/introduction/ }
+      - { title: Installation,     url: /docs/installation/ }
+      - { title: Your first docs site,      url: /docs/first-docs-site/ }
+      - { title: Your first knowledge base, url: /docs/first-knowledge-base/ }
+      - { title: Your first FAQ,            url: /docs/first-faq/ }
+      - { title: Configuration,    url: /docs/configuration/ }
+
+  - title: Customisation
+    icon: fa-solid fa-paintbrush
+    children:
+      - { title: Colour skins,     url: /docs/skins/,        badge: "6" }
+      - { title: Navigation,       url: /docs/navigation/ }
+      - { title: Writing content,  url: /docs/writing-content/ }
+
+  - title: Features
+    icon: fa-solid fa-wand-magic-sparkles
+    children:
+      - { title: Live search,      url: /docs/live-search/ }
+      - { title: Image lightbox,   url: /docs/lightbox/ }
+      - { title: SEO & performance, url: /docs/seo-performance/ }
+
+  - title: Reference
+    icon: fa-solid fa-circle-info
+    children:
+      - { title: Deploying,        url: /docs/deploying/ }
+      - { title: FAQ,              url: /docs/faq/ }

data/_includes/buy-me-a-coffee.html

@@ -0,0 +1,10 @@
+{%- assign bmc = site.docsteer.buy_me_a_coffee -%}
+{%- if bmc.username -%}
+<a class="bmc{% if include.compact %} bmc--compact{% endif %}"
+   href="https://www.buymeacoffee.com/{{ bmc.username }}"
+   target="_blank" rel="noopener"
+   aria-label="{{ bmc.label | default: 'Buy me a coffee' }}">
+  <i class="fa-solid fa-mug-hot" aria-hidden="true"></i>
+  {%- unless include.compact %}<span>{{ bmc.label | default: "Buy me a coffee" }}</span>{%- endunless -%}
+</a>
+{%- endif -%}

data/_includes/doc-footer.html

@@ -0,0 +1,38 @@
+{%- comment -%} Prev / next navigation across the sidebar order {%- endcomment -%}
+{%- assign flat = "" | split: "" -%}
+{%- for group in site.data.navigation.sidebar -%}
+  {%- for link in group.children -%}
+    {%- assign flat = flat | push: link -%}
+  {%- endfor -%}
+{%- endfor -%}
+{%- assign idx = -1 -%}
+{%- for link in flat -%}
+  {%- if link.url == page.url -%}{%- assign idx = forloop.index0 -%}{%- endif -%}
+{%- endfor -%}
+
+{% if idx >= 0 %}
+<nav class="doc-pager" aria-label="Documentation pages">
+  {% if idx > 0 %}
+    {%- assign prev = flat[idx | minus: 1] -%}
+    <a class="doc-pager__link doc-pager__prev" href="{{ prev.url | relative_url }}">
+      <span class="doc-pager__dir"><i class="fa-solid fa-arrow-left" aria-hidden="true"></i> Previous</span>
+      <span class="doc-pager__title">{{ prev.title }}</span>
+    </a>
+  {% else %}<span></span>{% endif %}
+
+  {%- assign last = flat.size | minus: 1 -%}
+  {% if idx < last %}
+    {%- assign next = flat[idx | plus: 1] -%}
+    <a class="doc-pager__link doc-pager__next" href="{{ next.url | relative_url }}">
+      <span class="doc-pager__dir">Next <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
+      <span class="doc-pager__title">{{ next.title }}</span>
+    </a>
+  {% endif %}
+</nav>
+{% endif %}
+
+{% if page.tags and page.tags.size > 0 %}
+<div class="doc-tags">
+  {% for t in page.tags %}<span class="badge badge--soft">#{{ t }}</span>{% endfor %}
+</div>
+{% endif %}

data/_includes/faq-list.html

@@ -0,0 +1,52 @@
+{%- comment -%}
+  DocSteer — FAQ accordion.
+
+  Params:
+    include.items — array of { q, a, section? }
+
+  Answers are Markdown. Liquid does not run inside front matter, so a
+  root-relative link written as ](/docs/x/) is rewritten through site.baseurl
+  here — authors keep writing plain Markdown and the links survive a baseurl.
+{%- endcomment -%}
+{%- assign cfg = site.docsteer.faq -%}
+{%- assign items = include.items -%}
+{%- if items and items.size > 0 -%}
+{%- capture link_prefix -%}]({{ site.baseurl }}/{%- endcapture -%}
+<div class="faq" id="faq">
+  {%- if cfg.expand_all_button %}
+  <div class="faq__tools">
+    <button type="button" class="faq__toggle-all" id="faqToggleAll" data-expanded="false">
+      <i class="fa-solid fa-angles-down" aria-hidden="true"></i>
+      <span>Expand all</span>
+    </button>
+  </div>
+  {%- endif %}
+
+  {%- assign groups = items | group_by: "section" -%}
+  {%- assign idx = 0 -%}
+  {%- for g in groups %}
+    {%- if g.name and g.name != "" %}
+  <h2 class="faq__section" id="{{ g.name | slugify }}">{{ g.name }}</h2>
+    {%- endif %}
+  <div class="faq__group">
+    {%- for item in g.items %}
+    {%- assign idx = idx | plus: 1 -%}
+    {%- assign qid = item.q | slugify -%}
+    <details class="faq-item" id="{{ qid }}"{% if idx == 1 and cfg.expand_first %} open{% endif %}>
+      <summary class="faq-item__q">
+        {%- comment -%}Inline Markdown, so a question can carry `code`.{%- endcomment -%}
+        <span class="faq-item__text">{{ item.q | markdownify | remove: "<p>" | remove: "</p>" | strip }}</span>
+        <i class="fa-solid fa-chevron-down faq-item__chevron" aria-hidden="true"></i>
+      </summary>
+      <div class="faq-item__a">
+        {{ item.a | replace: "](/", link_prefix | markdownify }}
+        <a class="faq-item__permalink" href="#{{ qid }}" aria-label="Link to this question">
+          <i class="fa-solid fa-link" aria-hidden="true"></i>
+        </a>
+      </div>
+    </details>
+    {%- endfor %}
+  </div>
+  {%- endfor %}
+</div>
+{%- endif -%}

data/_includes/footer.html

@@ -0,0 +1,43 @@
+{%- assign cfg = site.docsteer -%}
+<footer class="site-footer">
+  <div class="site-footer__inner">
+    <div class="site-footer__brand">
+      <a class="brand" href="{{ '/' | relative_url }}">
+        {% if cfg.logo %}<img class="brand__logo" src="{{ cfg.logo | relative_url }}" alt="{{ site.title }}">
+        {% else %}<span class="brand__mark">{{ site.title | slice: 0, 1 | upcase }}</span>{% endif %}
+        <span class="brand__name">{{ site.title }}</span>
+      </a>
+      <p class="site-footer__tag">{{ site.tagline | default: site.description }}</p>
+
+      <div class="site-footer__social">
+        {% if cfg.social.github %}<a href="https://github.com/{{ cfg.social.github }}" rel="noopener" aria-label="GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>{% endif %}
+        {% if cfg.social.linkedin %}<a href="{{ cfg.social.linkedin }}" rel="noopener" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i></a>{% endif %}
+        {% if cfg.social.twitter %}<a href="https://twitter.com/{{ cfg.social.twitter }}" rel="noopener" aria-label="Twitter / X"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>{% endif %}
+        {% if cfg.social.mastodon %}<a href="{{ cfg.social.mastodon }}" rel="me noopener" aria-label="Mastodon"><i class="fa-brands fa-mastodon" aria-hidden="true"></i></a>{% endif %}
+        {% if cfg.social.discord %}<a href="{{ cfg.social.discord }}" rel="noopener" aria-label="Discord"><i class="fa-brands fa-discord" aria-hidden="true"></i></a>{% endif %}
+        {% if cfg.social.email %}<a href="mailto:{{ cfg.social.email }}" aria-label="Email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>{% endif %}
+        {% if cfg.social.rss %}<a href="{{ '/feed.xml' | relative_url }}" aria-label="RSS feed"><i class="fa-solid fa-rss" aria-hidden="true"></i></a>{% endif %}
+      </div>
+    </div>
+
+    <nav class="site-footer__nav" aria-label="Footer">
+      {% for l in cfg.footer.links %}
+        <a href="{{ l.url | relative_url }}">{{ l.label }}</a>
+      {% endfor %}
+    </nav>
+  </div>
+
+  <div class="site-footer__bar">
+    <span>© {{ site.time | date: "%Y" }} {{ cfg.footer.copyright | default: site.title }}. All rights reserved.</span>
+    <span class="site-footer__right">
+      {% if cfg.buy_me_a_coffee.username and cfg.buy_me_a_coffee.show_in contains "footer" %}
+        {% include buy-me-a-coffee.html %}
+      {% endif %}
+      {% if cfg.footer.show_credit %}
+        <span class="site-footer__credit">Built with
+          <a href="https://github.com/Skyflash/docsteer" rel="noopener">DocSteer</a>
+        </span>
+      {% endif %}
+    </span>
+  </div>
+</footer>

data/_includes/head-custom.html

@@ -0,0 +1,4 @@
+{%- comment -%}
+  Add your own <meta>, fonts, or verification tags here.
+  This file is intentionally empty so upgrades never clobber your changes.
+{%- endcomment -%}

data/_includes/head.html

@@ -0,0 +1,61 @@
+{%- assign cfg = site.docsteer -%}
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
+
+  {%- comment -%} Set skin / mode before paint to avoid a flash {%- endcomment -%}
+  <script>
+    (function () {
+      try {
+        var r = document.documentElement;
+        var m = localStorage.getItem('docsteer-mode');
+        var s = localStorage.getItem('docsteer-skin');
+        if (m) r.setAttribute('data-mode', m);
+        if (s) r.setAttribute('data-skin', s);
+      } catch (e) {}
+    })();
+  </script>
+
+  {% seo %}
+
+  {% if cfg.favicon %}
+    <link rel="icon" href="{{ cfg.favicon | relative_url }}">
+  {% else %}
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%232f81f7'/%3E%3Ctext x='50' y='68' font-size='58' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='700'%3ED%3C/text%3E%3C/svg%3E">
+  {% endif %}
+
+  {% if cfg.fontawesome.enabled %}
+    {% if cfg.fontawesome.source == "cdn" %}
+      <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+      <link rel="stylesheet" href="{{ cfg.fontawesome.cdn_url }}"
+            {% if cfg.fontawesome.cdn_integrity and cfg.fontawesome.cdn_integrity != "" %}integrity="{{ cfg.fontawesome.cdn_integrity }}" crossorigin="anonymous" referrerpolicy="no-referrer"{% endif %}>
+    {% else %}
+      {%- assign fa_css = '/assets/vendor/fontawesome/css/all.min.css' | relative_url -%}
+      <link rel="preload" as="font" type="font/woff2" crossorigin
+            href="{{ '/assets/vendor/fontawesome/webfonts/fa-solid-900.woff2' | relative_url }}">
+      <link rel="stylesheet" href="{{ fa_css }}">
+    {% endif %}
+  {% endif %}
+
+  <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+
+  {% if site.feed.path %}
+    <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ '/feed.xml' | relative_url }}">
+  {% endif %}
+
+  {% if cfg.search.enabled %}
+    <link rel="preload" as="fetch" href="{{ '/search.json' | relative_url }}" crossorigin>
+  {% endif %}
+
+  {% if cfg.analytics.plausible_domain %}
+    <script defer data-domain="{{ cfg.analytics.plausible_domain }}" src="https://plausible.io/js/script.js"></script>
+  {% endif %}
+  {% if cfg.analytics.ga4_id %}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ cfg.analytics.ga4_id }}"></script>
+    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','{{ cfg.analytics.ga4_id }}');</script>
+  {% endif %}
+
+  {% include head-custom.html %}
+</head>

data/_includes/navbar.html

@@ -0,0 +1,70 @@
+{%- assign cfg = site.docsteer -%}
+<header class="navbar" id="navbar">
+  <div class="navbar__inner">
+    <button class="navbar__burger" id="sidebarToggle" aria-label="Open menu" aria-expanded="false">
+      <i class="fa-solid fa-bars" aria-hidden="true"></i>
+    </button>
+
+    <a class="brand" href="{{ '/' | relative_url }}">
+      {% if cfg.logo %}
+        <img class="brand__logo" src="{{ cfg.logo | relative_url }}" alt="{{ site.title }}">
+      {% else %}
+        <span class="brand__mark">{{ site.title | slice: 0, 1 | upcase }}</span>
+      {% endif %}
+      <span class="brand__name">{{ site.title }}</span>
+    </a>
+
+    <nav class="navbar__links" aria-label="Primary">
+      {% for item in site.data.navigation.main %}
+        <a href="{{ item.url | relative_url }}"
+           class="navbar__link{% if page.url contains item.url and item.url != '/' %} is-active{% endif %}">
+          {% if item.icon %}<i class="{{ item.icon }}" aria-hidden="true"></i>{% endif %}{{ item.title }}
+        </a>
+      {% endfor %}
+    </nav>
+
+    <div class="navbar__tools">
+      {% if cfg.search.enabled %}
+      <button class="navbar__icon-btn" data-search-open aria-label="Search"
+              title="Search{% if cfg.search.hotkey %} (press /)" data-hotkey="/"{% else %}"{% endif %}>
+        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+      </button>
+      {% endif %}
+
+      {% if cfg.mode_switcher %}
+      <button class="navbar__icon-btn" id="modeToggle" aria-label="Toggle dark mode" title="Toggle theme">
+        <i class="fa-solid fa-sun icon-light" aria-hidden="true"></i>
+        <i class="fa-solid fa-moon icon-dark" aria-hidden="true"></i>
+      </button>
+      {% endif %}
+
+      {% if cfg.skin_switcher %}
+      <div class="skin-picker" id="skinPicker">
+        <button class="navbar__icon-btn" aria-haspopup="true" aria-expanded="false" aria-label="Change colour skin" title="Colour skin">
+          <i class="fa-solid fa-palette" aria-hidden="true"></i>
+        </button>
+        <div class="skin-picker__menu" role="menu">
+          {%- assign skin_list = "aqua,violet,mint,ember,graphite,clay" | split: "," -%}
+          {% for s in skin_list %}
+            <button type="button" role="menuitemradio" aria-checked="false" data-skin-set="{{ s }}" class="skin-picker__opt">
+              <span class="skin-dot skin-dot--{{ s }}" aria-hidden="true"></span>
+              <span class="skin-picker__label">{{ s | capitalize }}</span>
+            </button>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      {% if cfg.social.github %}
+      <a class="navbar__icon-btn" href="https://github.com/{{ cfg.social.github }}" rel="noopener" aria-label="GitHub repository" title="GitHub">
+        <i class="fa-brands fa-github" aria-hidden="true"></i>
+      </a>
+      {% endif %}
+
+      {% if cfg.buy_me_a_coffee.username and cfg.buy_me_a_coffee.show_in contains "navbar" %}
+        {% include buy-me-a-coffee.html compact=true %}
+      {% endif %}
+    </div>
+  </div>
+</header>
+<div class="sidebar-scrim" id="sidebarScrim" hidden></div>

data/_includes/scripts.html

@@ -0,0 +1,22 @@
+{%- assign cfg = site.docsteer -%}
+<script>
+  window.DocSteer = {
+    baseurl: "{{ site.baseurl }}",
+    search: {
+      enabled: {{ cfg.search.enabled | default: false }},
+      endpoint: "{{ '/search.json' | relative_url }}",
+      max: {{ cfg.search.max_results | default: 8 }},
+      hotkey: {{ cfg.search.hotkey | default: false }}
+    },
+    lightbox: {{ cfg.lightbox.enabled | default: false }},
+    faq: {{ cfg.faq.enabled | default: false }},
+    codeCopy: {{ cfg.code.copy_button | default: false }},
+    toc: {
+      enabled: {{ cfg.toc.enabled | default: false }},
+      min: {{ cfg.toc.min_headings | default: 2 }}
+    }
+  };
+</script>
+<script src="{{ '/assets/js/main.js' | relative_url }}" defer></script>
+{% if cfg.search.enabled %}<script src="{{ '/assets/js/search.js' | relative_url }}" defer></script>{% endif %}
+{% if cfg.lightbox.enabled %}<script src="{{ '/assets/js/lightbox.js' | relative_url }}" defer></script>{% endif %}

data/_includes/search-modal.html

@@ -0,0 +1,24 @@
+{%- assign cfg = site.docsteer -%}
+<div class="search-modal" id="searchModal" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Search">
+  <div class="search-modal__backdrop" data-search-close></div>
+  <div class="search-modal__panel" role="document">
+    <div class="search-modal__bar">
+      <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+      <input type="search" id="searchInput" class="search-modal__input"
+             placeholder="{{ cfg.search.placeholder | default: 'Search the docs…' }}"
+             autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+             aria-controls="searchResults" aria-expanded="false">
+      <button class="search-modal__esc" data-search-close aria-label="Close search"><kbd>Esc</kbd></button>
+    </div>
+
+    <div class="search-modal__body">
+      <ul class="search-results" id="searchResults" role="listbox"
+          data-endpoint="{{ '/search.json' | relative_url }}"
+          data-max="{{ cfg.search.max_results | default: 8 }}"></ul>
+      <p class="search-modal__empty" id="searchEmpty" hidden>No results. Try another term.</p>
+      <p class="search-modal__hint" id="searchHint">
+        Type to search &nbsp;·&nbsp; <kbd>↑</kbd><kbd>↓</kbd> to navigate &nbsp;·&nbsp; <kbd>↵</kbd> to open
+      </p>
+    </div>
+  </div>
+</div>

data/_includes/sidebar.html

@@ -0,0 +1,48 @@
+{%- assign cfg = site.docsteer -%}
+<aside class="sidebar{% if cfg.sidebar.sticky %} is-sticky{% endif %}" id="sidebar" aria-label="Documentation navigation">
+  <div class="sidebar__inner">
+
+    {% if cfg.search.enabled %}
+    <button class="sidebar__search" data-search-open type="button">
+      <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+      <span>{{ cfg.search.placeholder | default: "Search…" }}</span>
+    </button>
+    {% endif %}
+
+    <nav class="sidebar__nav">
+      {% for group in site.data.navigation.sidebar %}
+        {%- assign group_active = false -%}
+        {%- for link in group.children -%}
+          {%- if page.url == link.url %}{% assign group_active = true %}{% endif -%}
+        {%- endfor -%}
+
+        <div class="sidebar__group{% if cfg.sidebar.collapse_inactive and group_active == false and group.open != true %} is-collapsed{% endif %}">
+          {% if group.title %}
+          <button class="sidebar__group-title" aria-expanded="{{ group_active | default: false }}">
+            {% if group.icon %}<i class="{{ group.icon }}" aria-hidden="true"></i>{% endif %}
+            <span>{{ group.title }}</span>
+            <i class="fa-solid fa-chevron-right sidebar__chev" aria-hidden="true"></i>
+          </button>
+          {% endif %}
+
+          <ul class="sidebar__list">
+            {% for link in group.children %}
+              <li>
+                <a href="{{ link.url | relative_url }}"
+                   class="sidebar__link{% if page.url == link.url %} is-active{% endif %}"
+                   {% if page.url == link.url %}aria-current="page"{% endif %}>
+                  {{ link.title }}
+                  {% if link.badge %}<span class="badge">{{ link.badge }}</span>{% endif %}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endfor %}
+    </nav>
+
+    {% if cfg.buy_me_a_coffee.username and cfg.buy_me_a_coffee.show_in contains "sidebar" %}
+      <div class="sidebar__coffee">{% include buy-me-a-coffee.html %}</div>
+    {% endif %}
+  </div>
+</aside>

data/_includes/toc.html

@@ -0,0 +1,11 @@
+{%- assign cfg = site.docsteer -%}
+<aside class="toc" id="toc" aria-label="On this page">
+  <p class="toc__title"><i class="fa-solid fa-list-ul" aria-hidden="true"></i> On this page</p>
+  <nav class="toc__nav" id="tocNav" data-min-headings="{{ cfg.toc.min_headings | default: 2 }}">
+    <!-- built from headings by main.js -->
+  </nav>
+
+  {% if cfg.buy_me_a_coffee.username and cfg.buy_me_a_coffee.show_in contains "toc" %}
+    <div class="toc__coffee">{% include buy-me-a-coffee.html %}</div>
+  {% endif %}
+</aside>

data/_layouts/default.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+{%- assign cfg = site.docsteer -%}
+{%- assign skin = cfg.skin | default: "aqua" -%}
+{%- assign mode = cfg.mode | default: "auto" -%}
+<html lang="{{ site.lang | default: 'en' }}"
+      data-skin="{{ skin }}"
+      {% if mode != "auto" %}data-mode="{{ mode }}"{% endif %}>
+{% include head.html %}
+<body class="layout-{{ page.layout }}{% if page.sidebar == false %} no-sidebar{% endif %}">
+  <a class="skip-link" href="#main">Skip to content</a>
+
+  {% include navbar.html %}
+
+  {%- comment -%}
+    Jekyll reports the layout the PAGE declared, not the chain it renders
+    through: a page on `layout: faq` reports "faq" even though faq inherits
+    from doc. Testing for "doc" alone silently dropped the sidebar on every
+    derived layout, so the set is configurable — add your own doc-shaped
+    layouts to `docsteer.doc_layouts`.
+  {%- endcomment -%}
+  {%- assign doc_layouts = cfg.doc_layouts | default: "doc" -%}
+  {%- assign show_sidebar = false -%}
+  {%- if cfg.sidebar.enabled and page.sidebar != false and doc_layouts contains page.layout -%}
+    {%- assign show_sidebar = true -%}
+  {%- endif -%}
+
+  <div class="page-shell{% if show_sidebar %} has-sidebar{% endif %}">
+    {% if show_sidebar %}{% include sidebar.html %}{% endif %}
+
+    <main id="main" class="page-main{% if show_sidebar %} has-sidebar{% endif %}" tabindex="-1">
+      {{ content }}
+    </main>
+  </div>
+
+  {% include footer.html %}
+  {% if cfg.search.enabled %}{% include search-modal.html %}{% endif %}
+  {% if cfg.lightbox.enabled %}<div class="lightbox" id="lightbox" aria-hidden="true"></div>{% endif %}
+
+  <button class="to-top" id="toTop" aria-label="Back to top" hidden>
+    <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
+  </button>
+
+  {% include scripts.html %}
+</body>
+</html>