jekyll-theme-flow 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4d919f0246c8224ef02548c7798c4af1233a7efeeb3dff6bde85b1508666d5e5
+  data.tar.gz: f64181028f7b27fbfc7b328087666c334fdcbed90a9961b0f500c5981ee3e3ee
+SHA512:
+  metadata.gz: 96d99612ad38828cf394dcb62c8cf65eac4c8c7c43b8dd886e00298645fc73cba02ee0132ba7f6b15a03ae9795a458fd13f3a966e325786de73fc54a37d072f3
+  data.tar.gz: 18b8ca31782b7dfda56ad0e38c7bad277fb93c98338773676b6fb5f94f26b4f6628e16b8151268dc11b1fc6096edbae4c60bdfdb94eacbd43cf659b1dfe22508

data/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+## [0.1.0] - 2026-10-04
+
+- Bulma and Alpine.js theme with sidebar-left, sidebar-right, topnav and bare layouts.
+- Navigation, search and icon integration with jekyll-client-search and jekyll-icon-flow.
+- Real Jekyll consumer-site integration tests and Ruby 3.3/3.4 CI.
+- Escape site and page metadata, keep theme controls on Lucide, and provide a search form fallback.
+- Archive support: `archive` and `archive-index` layouts, `archive_versions` include,
+  automatic `noindex` for archived/`noindex: true` pages, and a documented
+  scoped-defaults convention for sitemap exclusion.
+- Navigation: `is-active` on the current item and its direct parent in the sidebar
+  tree and topnav dropdown; optional `icon:` front matter rendered in both branches.
+- Theme lib (`lib/jekyll-theme-flow.rb`): bundling `jekyll-sitemap` as a runtime
+  dependency (auto-loaded with the theme), a `flow.sitemap` disable switch, and a
+  hook that excludes archived pages from sitemap.xml when the theme is plugin-loaded.
+- Config defaults injection: plugin-loaded consumers get `sass.quiet_deps: true`
+  (silences vendored Bulma deprecation warnings) unless they set it themselves.

data/LICENSE.txt

@@ -0,0 +1,22 @@
+GNU AFFERO GENERAL PUBLIC LICENSE
+Version 3, 19 November 2007
+
+Copyright (C) 2026 Svend Gundestrup
+
+This project is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option) any
+later version.
+
+This project is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this project. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.
+
+The complete license text is available from the Free Software Foundation at:
+https://www.gnu.org/licenses/agpl-3.0.txt
+
+SPDX-License-Identifier: AGPL-3.0-or-later

data/README.md

@@ -0,0 +1,313 @@
+# jekyll-theme-flow
+
+[![CI](https://github.com/gundestrup/jekyll-theme-flow/actions/workflows/ci.yml/badge.svg)](https://github.com/gundestrup/jekyll-theme-flow/actions/workflows/ci.yml)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/gundestrup/jekyll-theme-flow)
+[![SonarCloud: setup pending](https://img.shields.io/badge/SonarCloud-setup%20pending-orange)](https://sonarcloud.io/dashboard?id=gundestrup_jekyll-theme-flow)
+
+A Jekyll theme built on [Bulma](https://bulma.io) (CSS) and
+[Alpine.js](https://alpinejs.dev) (interactivity), offering several
+standard layout shells you can switch per site or per page.
+
+No Node toolchain required — Bulma compiles through Jekyll's own Sass
+pipeline, and Alpine is vendored into the theme.
+
+## Installation
+
+```ruby
+# Gemfile
+gem "jekyll-theme-flow"
+```
+
+```yaml
+# _config.yml
+theme: jekyll-theme-flow
+```
+
+`theme:` alone gives you layouts, includes, Sass and assets — Jekyll
+also auto-requires the theme's runtime dependencies
+(`jekyll-client-search`, `jekyll-icon-flow`, `jekyll-sitemap`), so the
+tags, search assets and `sitemap.xml` work without listing them.
+
+Every `flow.*`/`icon_flow.*`/`client_search.*` option has a sensible
+default — the theme renders with zero config beyond `theme:`, and each
+key can be overridden individually. When the theme is plugin-loaded it
+also injects one config-level default that Liquid defaults can't reach:
+`sass.quiet_deps: true`, which silences deprecation noise from the
+vendored Bulma Sass while keeping warnings from *your* Sass visible
+(set it explicitly to `false` to opt out).
+
+To additionally enable the theme's own hooks (automatic sitemap/noindex
+exclusion for archived pages and the `flow.sitemap` switch), load it as
+a plugin too — either list it under `plugins:`:
+
+```yaml
+plugins:
+  - jekyll-theme-flow
+```
+
+or move the gem into the `:jekyll_plugins` group in your Gemfile.
+
+## Layouts
+
+Set a site-wide default in `_config.yml`:
+
+```yaml
+flow:
+  layout: sidebar-left   # sidebar-left | sidebar-right | topnav | bare
+```
+
+Or per page via front matter:
+
+```yaml
+layout: default
+flow_layout: topnav      # overrides the site default for this page
+```
+
+Named layouts (`sidebar-left`, `sidebar-right`, `topnav`, `bare`) also
+work directly in front matter.
+
+| Shell | What you get |
+|---|---|
+| `sidebar-left` | Sticky left sidebar with expandable nav tree + content column (default) |
+| `sidebar-right` | Same, sidebar on the right |
+| `topnav` | Bulma navbar with hover dropdowns for children, no sidebar |
+| `bare` | Content only — no nav chrome |
+
+On mobile, sidebars collapse into a burger-toggled drawer (Alpine).
+
+## Navigation model
+
+The nav tree is driven by front matter — same convention as
+just-the-docs:
+
+```yaml
+title: Child Page
+parent: Section      # title of the parent page
+nav_order: 3         # optional ordering
+nav_exclude: true    # optional: hide from nav
+```
+
+`grand_parent:` is honoured for auto-opening the tree on grandchildren.
+The current page's branch opens automatically; parents get a chevron
+toggle. The current page and its direct parent are marked `is-active`
+in both the sidebar tree and the topnav dropdown.
+
+An optional `icon:` front matter key renders an icon next to the title —
+in the flat branch *and* the dropdown branch (resolved by the configured
+default `icon_flow.pack`):
+
+```yaml
+title: Home
+icon: home
+```
+
+## Search (jekyll-client-search)
+
+The theme integrates
+[jekyll-client-search](https://github.com/gundestrup/jekyll-client-search)
+(a runtime dependency — it's pulled in automatically). Enable it:
+
+```yaml
+client_search:
+  enabled: true
+  engine: minisearch        # or elasticlunr / semantic
+  collections: [posts]      # and/or include_pages: true
+  dropdown:
+    enabled: true
+    redirect_url: /search/
+```
+
+When enabled:
+
+- **sidebar layouts** render a search bar in a top bar above the content
+- **topnav** renders a smaller search field on the right of the navbar
+- **bare** renders no search chrome
+- the theme ships a **`search` layout** (`_layouts/search.html`) — add a
+  page to your site to use it, since theme gems only ship
+  `_layouts`/`_includes`/`_sass`/`assets`, not root pages:
+
+  ```markdown
+  ---
+  layout: search
+  title: Search
+  permalink: /search/
+  nav_exclude: true
+  ---
+  ```
+
+All `client_search` options (fuzzy MiniSearch, Ollama embeddings, related
+results, …) work as documented in the gem.
+
+## Icons (jekyll-icon-flow)
+
+Icons are provided by the
+[jekyll-icon-flow](https://github.com/gundestrup/jekyll-icon-flow) gem
+(a runtime dependency — pulled in automatically). Per-pack Liquid tags
+emit normalized inline SVGs (`icon icon-<name>` classes, `currentColor`,
+`1em` scaling):
+
+```liquid
+{% icon search %}                     → default pack (icon_flow.pack)
+{% icon_lucide "file-text" size:1.5em class:"has-text-link" %}
+{% icon_simple github %}              → brand icons
+{% icon_custom logo %}                → your site's own SVGs
+```
+
+Theme chrome uses `{% icon_lucide %}` for its search icon and navigation
+chevrons, so switching the site's default pack to a brand/custom pack cannot
+silently remove those controls. Set `icon_flow.enabled: false` to hide all
+icons. `{% include icon.html %}` remains a thin wrapper for site icons that
+should follow `icon_flow.pack`.
+
+```yaml
+icon_flow:
+  pack: lucide                     # lucide | simple | custom
+  enabled: true                    # false = icon tags render nothing
+  custom_dir: assets/icons/custom  # for icon_custom (e.g. svgrepo.com SVGs)
+```
+
+See the gem's README for the full styling contract and adapter model.
+
+## Archiving pages
+
+Superseded pages can stay live at their permalink under `/archive/`, get
+a warning banner, and cross-link to their replacement — all driven by
+one front matter key, `archive_link_current`.
+
+**Archive a page** — set `layout: archive` and point it at the current
+version:
+
+```yaml
+title: Section (2020)
+layout: archive
+permalink: /archive/section-2020.html   # convention: /archive/ + original path
+archive_link_current: /section.html     # the page that replaced this one
+nav_exclude: true
+```
+
+The `archive` layout renders a Bulma warning banner ("This is an
+archived version" + link to the current page), then a "Versions of this
+page" footer listing the current version and sibling archives. Archived
+pages also get `<meta name="robots" content="noindex">` automatically —
+`noindex: true` works standalone on any page (e.g. a search page).
+
+**Cross-link from the current page** — add one line at the bottom of the
+current version:
+
+```liquid
+{% include archive_versions.html %}
+```
+
+It renders a "Previous versions" footer listing every page whose
+`archive_link_current` points back. Archiving a future version then
+needs zero link maintenance.
+
+**Archive index** — ship your own page using the `archive-index` layout:
+
+```yaml
+---
+layout: archive-index
+title: Archive
+permalink: /archive/
+nav_exclude: true
+---
+```
+
+It lists every `layout: archive` page sorted by `archive_link_current`.
+
+**Sitemap exclusion** — when the theme is also loaded as a plugin
+(`plugins:` list or the `:jekyll_plugins` Gemfile group — see
+Installation), `jekyll-sitemap` is pulled in automatically and archived
+pages are excluded from `sitemap.xml` by a built-in hook. No config or
+front matter needed beyond `layout: archive`. Both switches:
+
+```yaml
+flow:
+  sitemap: false                  # drop the sitemap generator entirely
+  archive:
+    sitemap_exclude: false        # keep archived pages in sitemap.xml
+```
+
+If the theme is consumed via `theme:` only (no plugin load), the hook
+can't run — the equivalent convention is scoped front-matter defaults:
+
+```yaml
+defaults:
+  - scope:
+      path: "archive"
+    values:
+      layout: archive
+      sitemap: false       # excluded from sitemap.xml
+      nav_exclude: true
+```
+
+Files under `archive/` then need only `title`, `permalink` and
+`archive_link_current`. (Without the defaults, set `sitemap: false` in
+each page's front matter.)
+
+**Strings** — all archive text is configurable:
+
+```yaml
+flow:
+  archive:
+    banner: "Dette er en arkiveret version."
+    current_link: "Se den gældende version"
+    versions_heading: "Versioner af denne side"
+    previous_heading: "Tidligere versioner"
+    current_label: "gældende"
+    archived_label: "arkiveret"
+    replaced_by: "erstattet af"
+    index_empty: "Ingen arkiverede sider."
+```
+
+The demo site shows the convention: `archive/demo-2020.md` is archived
+via the scoped defaults above, `demo-section.md` is its current version,
+and `arkiv.md` uses `archive-index` at `/archive/`.
+
+## Other config
+
+```yaml
+flow:
+  layout: sidebar-left
+  logo: /assets/logo.svg         # brand icon next to site.title (all pages)
+  logo_enabled: true             # set false to hide without removing logo
+  favicon: /assets/favicon.ico   # <link rel="icon">
+  favicon_enabled: true          # set false to disable
+  search_placeholder: "Search"   # placeholder text in the search field
+
+  footer_text: "Powered by ..."  # optional footer line
+  # archive:                     # banner/footer strings, see "Archiving pages"
+```
+
+## Customization surface
+
+Intentionally small — the theme relies on Bulma components and helpers
+(`menu`, `navbar`, `columns`, `is-hidden-*`, spacing helpers) rather
+than bespoke CSS. The only custom CSS is the app shell (~50 lines in
+`_sass/flow.scss`): fixed/sticky sidebar, drawer positioning, chevron
+rotation, brand icon sizing.
+
+Override the usual Jekyll way: same-named files in your site win
+(`_includes/`, `_layouts/`, `_sass/`). Bulma Sass variables can be
+re-themed via `@use "bulma" with (...)`.
+
+## Development
+
+```bash
+bundle install
+bundle exec rake ci        # RuboCop, audit, Semgrep, real-site tests and gem contents
+bundle exec jekyll serve   # demo pages in repo root
+```
+
+The theme has no project Ruby runtime to instrument with SimpleCov; its
+coverage comes from real consumer-site Jekyll builds, not a misleading Ruby
+percentage. A Codecov badge should be added only with measurable, non-vendored
+browser or template coverage. The SonarCloud badge remains pending until the
+repository is onboarded; the scanner excludes vendored Bulma and Alpine.
+Use `bundle exec rake "version:bump[patch]"` to bump the gemspec and lockfile,
+add a dated changelog entry, and run `bundle exec rake version:pre_release`
+before tagging. GitHub `release` environment and RubyGems trusted publishing
+must be configured before publishing.
+
+Known upstream noise: Bulma 1.0.x emits a handful of Sass `if()`
+deprecation warnings during build — harmless, fixed upstream eventually.

data/_includes/archive_versions.html

@@ -0,0 +1,36 @@
+{% comment %}
+  Cross-links a page with its archived versions via the shared
+  `archive_link_current` front matter key (set on archived pages).
+
+  Archived page -> links the current version + sibling archives
+  Current page  -> lists pages whose archive_link_current == page.url
+  (include this file manually at the bottom of the current page)
+{% endcomment %}
+
+{%- if page.layout == "archive" and page.archive_link_current -%}
+  {%- assign current = site.pages | where: "url", page.archive_link_current | first -%}
+  {%- assign siblings = site.pages | where: "archive_link_current", page.archive_link_current -%}
+  <hr>
+  <p><strong>{{ site.flow.archive.versions_heading | default: "Versions of this page" | escape }}</strong></p>
+  <ul>
+    <li><a href="{{ page.archive_link_current | relative_url | escape }}">{{ current.title | default: page.archive_link_current | escape }}</a>
+      ({{ site.flow.archive.current_label | default: "current" | escape }})</li>
+    {%- for v in siblings -%}
+      {%- if v.url != page.url %}
+    <li><a href="{{ v.url | relative_url | escape }}">{{ v.title | escape }}</a>
+      ({{ site.flow.archive.archived_label | default: "archived" | escape }})</li>
+      {%- endif -%}
+    {%- endfor %}
+  </ul>
+{%- elsif page.layout != "archive" -%}
+  {%- assign versions = site.pages | where: "archive_link_current", page.url -%}
+  {%- if versions.size > 0 %}
+  <hr>
+  <p><strong>{{ site.flow.archive.previous_heading | default: "Previous versions" | escape }}</strong></p>
+  <ul>
+    {%- for v in versions %}
+    <li><a href="{{ v.url | relative_url | escape }}">{{ v.title | escape }}</a></li>
+    {%- endfor %}
+  </ul>
+  {%- endif %}
+{%- endif -%}

data/_includes/footer.html

@@ -0,0 +1,5 @@
+<footer class="footer py-4">
+  <div class="content has-text-centered is-size-7">
+    <p>{{ site.title | escape }}{% if site.flow.footer_text %} · {{ site.flow.footer_text | escape }}{% endif %}</p>
+  </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,9 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% if page.title %}{{ page.title | escape }} · {% endif %}{{ site.title | escape }}</title>
+  <meta name="description" content="{{ page.description | default: site.description | strip_html | strip | escape }}">
+  {% if page.noindex or page.layout == "archive" %}<meta name="robots" content="noindex">{% endif %}
+  <link rel="stylesheet" href="{{ '/assets/css/theme.css' | relative_url }}">
+  {% if site.flow.favicon and site.flow.favicon_enabled != false %}<link rel="icon" href="{{ site.flow.favicon | relative_url | escape }}">{% endif %}
+</head>

data/_includes/icon.html

@@ -0,0 +1,10 @@
+{%- comment -%}
+  Thin wrapper over the {% icon %} tag from jekyll-icon-flow, kept for
+  sites/includes that prefer the include calling convention:
+    {% include icon.html name="search" %}
+    {% include icon.html name="github" pack="simple" size="1.5em" %}
+  Bracket access on include[...] avoids Hash method collisions and lets
+  unset optional params resolve to nil — the tag drops them.
+  Configure via icon_flow: in _config.yml (pack, enabled, custom_dir).
+{%- endcomment -%}
+{% icon include.name pack: include["pack"] size: include["size"] class: include["class"] title: include["title"] %}

data/_includes/nav_tree.html

@@ -0,0 +1,38 @@
+{%- comment -%}
+  Recursive nav tree. include.pages = array of pages at this level.
+  Children are matched via `parent: <parent title>` front matter.
+  Auto-opens when the current page is this node, a child (`parent`),
+  or a grandchild (`grand_parent`).
+{%- endcomment -%}
+<ul class="menu-list">
+  {%- for p in include.pages -%}
+  {%- assign kids = site.html_pages | where: "parent", p.title | where_exp: "k", "k.nav_exclude != true" | sort: "nav_order" -%}
+  {%- assign is_active = false -%}
+  {%- if p.url == page.url or page.parent == p.title -%}{%- assign is_active = true -%}{%- endif -%}
+  {%- if kids.size > 0 -%}
+  {%- assign start_open = false -%}
+  {%- if is_active or page.parent == p.title or page.grand_parent == p.title -%}{%- assign start_open = true -%}{%- endif %}
+  <li x-data="{ open: {{ start_open }} }">
+    <div class="is-flex is-justify-content-space-between is-align-items-center">
+      <a href="{{ p.url | relative_url | escape }}"{% if is_active %} class="is-active"{% endif %}>
+        {%- if p.icon %}<span class="icon">{% icon p.icon %}</span> {% endif -%}
+        {{- p.title | escape -}}
+      </a>
+      <button class="button is-ghost is-small px-2" @click="open = !open" :aria-expanded="open" aria-label="Toggle {{ p.title | escape }}">
+        <span class="icon flow-chevron" :class="{ 'is-open': open }">
+          {% icon_lucide chevron-right %}
+        </span>
+      </button>
+    </div>
+    <div x-show="open" x-cloak>
+      {% include nav_tree.html pages=kids %}
+    </div>
+  </li>
+  {%- else -%}
+  <li><a href="{{ p.url | relative_url | escape }}"{% if is_active %} class="is-active"{% endif %}>
+    {%- if p.icon %}<span class="icon">{% icon p.icon %}</span> {% endif -%}
+    {{- p.title | escape -}}
+  </a></li>
+  {%- endif -%}
+  {%- endfor %}
+</ul>

data/_includes/navbar.html

@@ -0,0 +1,55 @@
+{%- assign nav_roots = site.html_pages | where_exp: "p", "p.title" | where_exp: "p", "p.nav_exclude != true" | where_exp: "p", "p.parent == nil" | sort: "nav_order" -%}
+<nav class="navbar{% if include.mode == "mobile-only" %} is-hidden-desktop{% endif %}" role="navigation" aria-label="main navigation" x-data="{ open: false }">
+  <div class="navbar-brand">
+    <a class="navbar-item has-text-weight-semibold" href="{{ '/' | relative_url }}">
+      {%- if site.flow.logo and site.flow.logo_enabled != false %}<img class="flow-brand-icon" src="{{ site.flow.logo | relative_url | escape }}" alt="">{% endif %}
+      {{- site.title | escape -}}
+    </a>
+    {% if include.mode == "mobile-only" -%}
+    <button class="navbar-burger" :class="{ 'is-active': menu }" @click="menu = !menu" :aria-expanded="menu" aria-label="menu">
+    {%- else -%}
+    <button class="navbar-burger" :class="{ 'is-active': open }" @click="open = !open" :aria-expanded="open" aria-label="menu">
+    {%- endif %}
+      <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
+    </button>
+  </div>
+  {% unless include.mode == "mobile-only" -%}
+  <div class="navbar-menu" :class="{ 'is-active': open }">
+    <div class="navbar-start">
+      {% for p in nav_roots -%}
+      {%- assign kids = site.html_pages | where: "parent", p.title | where_exp: "k", "k.nav_exclude != true" | sort: "nav_order" -%}
+      {%- assign p_active = false -%}
+      {%- if p.url == page.url or page.parent == p.title %}{% assign p_active = true %}{% endif -%}
+      {%- if kids.size > 0 %}
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link{% if p_active %} is-active{% endif %}" href="{{ p.url | relative_url | escape }}">
+          {%- if p.icon %}<span class="icon">{% icon p.icon %}</span> {% endif -%}
+          {{- p.title | escape -}}
+        </a>
+        <div class="navbar-dropdown">
+          {% for c in kids -%}
+          <a class="navbar-item{% if c.url == page.url %} is-active{% endif %}" href="{{ c.url | relative_url | escape }}">
+            {%- if c.icon %}<span class="icon">{% icon c.icon %}</span> {% endif -%}
+            {{- c.title | escape -}}
+          </a>
+          {% endfor -%}
+        </div>
+      </div>
+      {%- else %}
+      <a class="navbar-item{% if p_active %} is-active{% endif %}" href="{{ p.url | relative_url | escape }}">
+        {%- if p.icon %}<span class="icon">{% icon p.icon %}</span> {% endif -%}
+        {{- p.title | escape -}}
+      </a>
+      {%- endif -%}
+      {% endfor %}
+    </div>
+    {% if site.client_search.enabled -%}
+    <div class="navbar-end">
+      <div class="navbar-item">
+        {% include search_slot.html input_size=" is-small" %}
+      </div>
+    </div>
+    {%- endif %}
+  </div>
+  {%- endunless %}
+</nav>

data/_includes/search_slot.html

@@ -0,0 +1,19 @@
+{%- comment -%}
+  Search slot for jekyll-client-search. Renders nothing unless
+  site.client_search.enabled. include.input_size: "" or " is-small".
+{%- endcomment -%}
+{%- if site.client_search.enabled -%}
+{%- assign slot_id = include.input_size | default: "full" | slugify -%}
+<div class="flow-search" data-client-search-dropdown>
+  <form class="control has-icons-left" role="search" action="{{ '/search/' | relative_url }}" method="get" autocomplete="off" data-cs-dropdown-form>
+    <label class="is-sr-only" for="flow-search-input-{{ slot_id }}">{{ site.flow.search_placeholder | default: "Search" | escape }}</label>
+    <input id="flow-search-input-{{ slot_id }}" class="input{{ include.input_size }}" type="search" name="q" autocomplete="off"
+           placeholder="{{ site.flow.search_placeholder | default: "Search" | escape }}"
+           aria-expanded="false" aria-controls="flow-search-results-{{ slot_id }}"
+           data-cs-dropdown-input>
+    <span class="icon is-left" aria-hidden="true">{% icon_lucide search size:"0.875em" %}</span>
+  </form>
+  <ul id="flow-search-results-{{ slot_id }}" class="flow-search-results"
+      role="listbox" aria-hidden="true" data-cs-dropdown-results></ul>
+</div>
+{%- endif %}

data/_includes/shells/bare.html

@@ -0,0 +1,5 @@
+<main class="section">
+  <div class="content">
+    {{ content }}
+  </div>
+</main>

data/_includes/shells/sidebar-left.html

@@ -0,0 +1,18 @@
+<div class="columns is-gapless m-0 flow-shell" x-data="{ menu: false }">
+  <aside class="column is-narrow flow-sidebar has-background-light" :class="{ 'is-hidden-mobile': !menu }" @click.outside="menu = false">
+    {% include sidebar.html %}
+  </aside>
+  <div class="column">
+    {% include navbar.html mode="mobile-only" %}
+    {% if site.client_search.enabled %}
+    <div class="flow-topbar">
+      {% include search_slot.html %}
+    </div>
+    {% endif %}
+    <main class="section">
+      <div class="content">
+        {{ content }}
+      </div>
+    </main>
+  </div>
+</div>

data/_includes/shells/sidebar-right.html

@@ -0,0 +1,18 @@
+<div class="columns is-gapless m-0 flow-shell" x-data="{ menu: false }">
+  <div class="column">
+    {% include navbar.html mode="mobile-only" %}
+    {% if site.client_search.enabled %}
+    <div class="flow-topbar">
+      {% include search_slot.html %}
+    </div>
+    {% endif %}
+    <main class="section">
+      <div class="content">
+        {{ content }}
+      </div>
+    </main>
+  </div>
+  <aside class="column is-narrow flow-sidebar flow-right has-background-light" :class="{ 'is-hidden-mobile': !menu }" @click.outside="menu = false">
+    {% include sidebar.html %}
+  </aside>
+</div>

data/_includes/shells/topnav.html

@@ -0,0 +1,8 @@
+{% include navbar.html %}
+<main class="section">
+  <div class="container">
+    <div class="content">
+      {{ content }}
+    </div>
+  </div>
+</main>

data/_includes/sidebar.html

@@ -0,0 +1,10 @@
+<div class="p-4">
+  <a class="is-size-5 has-text-weight-semibold" href="{{ '/' | relative_url }}">
+    {%- if site.flow.logo and site.flow.logo_enabled != false %}<img class="flow-brand-icon" src="{{ site.flow.logo | relative_url | escape }}" alt="">{% endif %}
+    {{- site.title | escape -}}
+  </a>
+</div>
+<nav class="menu px-4 pb-4" aria-label="site navigation">
+  {%- assign nav_roots = site.html_pages | where_exp: "p", "p.title" | where_exp: "p", "p.nav_exclude != true" | where_exp: "p", "p.parent == nil" | sort: "nav_order" -%}
+  {% include nav_tree.html pages=nav_roots %}
+</nav>

data/_layouts/archive-index.html

@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">{{ page.title | default: "Archive" | escape }}</h1>
+    {{ content }}
+    {%- assign archived = site.pages | where: "layout", "archive" | sort: "archive_link_current" -%}
+    {%- if archived.size > 0 %}
+    <ul class="flow-archive-index">
+      {%- for p in archived %}
+      <li>
+        <a href="{{ p.url | relative_url | escape }}">{{ p.title | escape }}</a>
+        {%- if p.archive_link_current %}
+        &mdash; {{ site.flow.archive.replaced_by | default: "replaced by" | escape }}
+        <a href="{{ p.archive_link_current | relative_url | escape }}">{{ site.flow.archive.current_link | default: "current version" | escape }}</a>
+        {%- endif %}
+      </li>
+      {%- endfor %}
+    </ul>
+    {%- else %}
+    <p>{{ site.flow.archive.index_empty | default: "No archived pages." | escape }}</p>
+    {%- endif %}
+  </div>
+</section>

data/_layouts/archive.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<div class="notification is-warning is-light flow-archive-banner">
+  {{ site.flow.archive.banner | default: "This is an archived version." | escape }}
+  {%- if page.archive_link_current %}
+  <a href="{{ page.archive_link_current | relative_url | escape }}">{{ site.flow.archive.current_link | default: "See the current version" | escape }}</a>
+  {%- endif %}
+</div>
+
+{{ content }}
+
+{% include archive_versions.html %}

data/_layouts/bare.html

@@ -0,0 +1,5 @@
+---
+layout: default
+flow_layout: bare
+---
+{{ content }}