willamette 0.7.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4cbc6b7b9d3e64eaf46c8177384acbba815ecbd23fdc10c824cc004429a4b7a
-  data.tar.gz: 1fc83d4a86c17ed5a5ded03bf349dd9b6a0cec42d7de879bd8b7e41dc206c513
+  metadata.gz: a4b853f52bf79b6b1653d57cafb45bbc7dc904f8de77e885fddf57de1724649a
+  data.tar.gz: 4b6f1bd188e86211babaa5f3ef67ada6f533e3465089e6d3ef42c5cf39a3088d
 SHA512:
-  metadata.gz: f0c45968de2247b4f19c06d85dc4f5098ad55754a07addce4ae07edce8c0fe1cafd80d5fc0047f150e254cf013d901f88b820864c2ce9479f52f43abcff5d2ac
-  data.tar.gz: 65963015a6e4eb5298cf44e758eaf0c1bf88daff2c5552cb112053b185b42fcd22e4fd5535c747eec797defda625ca70c3456ec9fd4292289b3bc63e83fdc752
+  metadata.gz: 88291ce695014b0647393b6c00119beab4b30b9ddd9b3afe5798b34d64d27fb04ccce61671fcd36de863213bc252d719dfd587409c486b6ff919cc516a72102e
+  data.tar.gz: a549b26f00fc725f59b507d73bba533ee1b791b1242b4709249b6f7d402baa71f19e2890ecd7e36db60c514f84a79146633eb070426159641e1e0ab4918b3bd8

data/CHANGELOG.md

@@ -9,6 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - ...
 
+## [0.8.0] - 2026-04-30
+
+- Allow toggling of starting (left) sidebar display
+- Additional modularization of theme CSS
+- Improved color swatches in Style Guide
+- Upgrade Web Awesome to 3.6
+
 ## [0.7.1] - 2026-04-29
 
 - Restore bold links in top nav

data/Gemfile

@@ -9,6 +9,7 @@ group :test do
   gem "minitest"
   gem "minitest-profile"
   gem "minitest-reporters"
+  gem "nokolexbor"
 end
 
 gem "rubocop-bridgetown", "~> 0.7"

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    willamette (0.7.1)
+    willamette (0.9.0)
       bridgetown (>= 2.1, < 3.0)
       nokolexbor (>= 0.6)
 
@@ -241,6 +241,7 @@ DEPENDENCIES
   minitest
   minitest-profile
   minitest-reporters
+  nokolexbor
   rake (>= 13.0)
   rubocop-bridgetown (~> 0.7)
   solargraph (~> 0.58.2)

data/automations/components.automation.rb

@@ -5,9 +5,25 @@ remove_file "src/_components/shared/navbar.rb"
 create_file "src/_components/shared.rb" do <<~RUBY
 module Shared
   class Navbar < Bridgetown::Component
-    attr_reader :metadata, :resource
+    attr_reader :metadata, :resource, :strategy
 
-    def initialize(metadata:, resource:) = (@metadata, @resource = metadata, resource)
+    # @param metadata [HashWithDotAccess::Hash]
+    # @param resource [Bridgetown::Resource::Base]
+    def initialize(metadata:, resource:)
+      @metadata, @resource = metadata, resource
+
+      @strategy = Willamette.navbar(
+        self,
+        logo: "/willamette/bridgetown-avatar.svg",
+        logo_alt: "Website Logo",
+        site_title: metadata.title,
+        nav_links: [
+          Willamette.link(title: t("nav.blog"), url: "/blog"),
+          Willamette.link(title: t("nav.about"), url: "/about"),
+          Willamette.link(icon: "mastodon", icon_family: "brands", icon_label: "Mastodon", title: nil, url: "https://mastodon.social"),
+        ]
+      )
+    end
   end
 
   class Sidebar < Bridgetown::Component
@@ -50,18 +66,19 @@ create_file "src/_components/shared/navbar.erb" do <<~HTML
     <% end %>
 
     <a slot="logo" href="/">
-      <img src="<%= '/willamette/bridgetown-avatar.svg' %>" alt="Website Logo" />
-      <span><%= metadata.title %></span>
+      <% if strategy.logo? %>
+        <img src="<%= strategy.logo %>" alt="<%= strategy.logo_alt %>" />
+      <% end %>
+      <% if strategy.site_title? %>
+        <span><%= strategy.site_title %></span>
+      <% end %>
     </a>
 
-    <a href="<%= relative_url '/search' %>" slot="search"><wa-icon label="<%= t "labels.search" %>" name="search"></wa-icon> <span class="hide-for-mobile"><%= t "labels.search" %> <kbd style="vertical-align: 10%">⌘K</kbd></span></a>
+    <% if strategy.search? %>
+      <a href="<%= relative_url '/search' %>" slot="search"><wa-icon label="<%= t "labels.search" %>" name="search"></wa-icon> <span class="hide-for-mobile"><%= t "labels.search" %> <kbd style="vertical-align: 10%">⌘K</kbd></span></a>
+    <% end %>
 
-    <ul slot="nav">
-      <!-- customize this list! -->
-      <li><a href="<%= relative_url '/blog' %>">Blog</a></li>
-      <li><a href="<%= relative_url '/about' %>">About</a></li>
-      <li><a href="#"><wa-icon label="Mastodon" family="brands" name="mastodon"></wa-icon></a></li>
-    </ul>
+    <%= strategy.nav_links %>
   </header>
 HTML
 end

data/components/willamette/search_dialog.rb

@@ -6,7 +6,7 @@ class Willamette::SearchDialog < Bridgetown::Component
           <wll-dialog-inner>
           </wll-dialog-inner>
 
-          <wa-button slot="footer" size="small" appearance="outlined" variant="brand" pill data-dialog="close">
+          <wa-button slot="footer" size="s" appearance="outlined" variant="brand" pill data-dialog="close">
             <wa-icon name="circle-xmark" slot="start"></wa-icon>
             #{text->{t "labels.close" }}
           </wa-button>

data/content/search.erb

@@ -4,8 +4,7 @@ title: Search
 ---
 
 <wll-search-page>
-  <!-- input type="search"  / -->
-  <wa-input size="large" placeholder="<%= t("labels.search") %>…" pill>
+  <wa-input size="l" placeholder="<%= t("labels.search") %>…" pill>
     <wa-icon name="search" slot="start"></wa-icon>
   </wa-input>
   

data/content/willamette/style-guide.md

@@ -14,6 +14,27 @@ end
     padding: 1rem;
   }
 }
+
+ul.color-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wa-space-s);
+  list-style: none;
+}
+
+li.color-preview {
+  margin: 0;
+}
+
+wa-color-picker output {
+  border: 3px solid var(--wa-color-brand-fill-quiet);
+  border-radius: var(--wa-border-radius-m);
+  padding: .25rem .4rem;
+
+  &:empty {
+    border: none;
+  }
+}
 </style>
 
 <wa-callout variant="brand">
@@ -23,13 +44,13 @@ end
 
 <hr />
 
-<wa-color-picker label="Choose a new brand color:" size="large" oninput='
+<wa-color-picker label="Choose a new brand color:" size="l" oninput='
   document.documentElement.style.setProperty("--wll-color-brand", event.target.value)
   this.querySelector("output").textContent = `--wll-color-brand: ${event.target.value};`
   this.querySelector("wa-copy-button").slot = "hint"
 '>
   <output id="color-hint" slot="hint"></output>
-  <wa-copy-button from="color-hint"></wa-copy-button>
+  <wa-copy-button from="color-hint" style="vertical-align: middle"></wa-copy-button>
 </wa-color-picker>
 
 <script type="module">
@@ -45,7 +66,7 @@ end
 
 ## Brand Color Scale
 
-<ul class="color-group" style="display: flex; flex-wrap: wrap; list-style: none">
+<ul class="color-group">
   <li class="color-preview">
       <div class="color swatch" style="--color: var(--wa-color-brand-95)">
         <wa-copy-button value="--wa-color-brand-95" copy-label="--wa-color-brand-95"></wa-copy-button>

data/layouts/willamette/default.erb

@@ -16,17 +16,17 @@
         <button type="button" class="wa-outlined" onclick="document.body.classList.toggle('sidebar-end-open')"><wa-icon name="list"></wa-icon></button>
       </div>
 
-      <main-contents <%= "data-pagefind-body" unless data.exclude_from_pagefind %>>
+      <main-contents<%= ' data-pagefind-body' unless data.exclude_from_pagefind %>>
         <%= yield %>
       </main-contents>
-      
+
       <wll-back-to-top>
         <button><wa-icon name="circle-chevron-up"></wa-icon></button>
       </wll-back-to-top>
     </main>
 
-    <aside slot="sidebar-start">
-      <%= render Shared::Sidebar.new(metadata: site.metadata, resource:) %>
+    <aside slot="sidebar-start"<%= ' hidden' if data.willamette&.hide_sidebar %>>
+      <%= render Shared::Sidebar.new(metadata: site.metadata, resource:) unless data.willamette&.hide_sidebar %>
     </aside>
 
     <aside slot="sidebar-end" hidden>
@@ -37,8 +37,6 @@
 
       <%= slotted :toc %>
 
-      <hr />
-
       <!-- TOC insertion -->
     </aside>
 

data/lib/willamette/locales/en.yml

@@ -20,3 +20,6 @@ en:
     follow: Follow Us
     subscribe: Subscribe
     see_also: See Also
+  nav:
+    blog: Blog
+    about: About

data/lib/willamette/strategies/base.rb

@@ -0,0 +1,41 @@
+module Willamette
+  module Strategies
+    class Base
+      private
+
+      def links_html(links, slot: nil)
+        doc = Nokolexbor::HTML("<ul></ul>")
+        list = doc.at_css("ul")
+        list[:slot] = slot if slot
+        links.each_with_index do |link, index|
+          list << link_node(doc:, link:, folder: (links[index + 1]&.depth || 1) > link.depth)
+        end
+        list.to_html.html_safe
+      end
+
+      def link_node(doc:, link:, folder: false) # rubocop:disable Metrics
+        item = doc.create_element("li")
+        item[:"item-depth"] = link.depth
+        anchor = doc.create_element("a")
+        anchor[:href] = @component.relative_url(link.url)
+        anchor[:"aria-current"] = "page" if link.current
+
+        if link.icon || respond_to?(:default_link_icon)
+          icon = doc.create_element("wa-icon")
+          icon[:name] = link.icon || default_link_icon(folder:)
+          icon[:family] = link.icon_family if link.icon_family
+          icon[:label] = link.icon_label if link.icon_label
+          anchor << icon
+        end
+
+        if link.title
+          anchor << doc.create_text_node(" ")
+          anchor << doc.create_text_node(link.title)
+        end
+
+        item << anchor
+        item
+      end
+    end
+  end
+end

data/lib/willamette/strategies/link.rb

@@ -1,9 +1,11 @@
 module Willamette
   # Contain logic for rendering
-  Strategies::Link = Data.define(:depth, :current, :icon, :icon_family, :title, :url)
+  Strategies::Link = Data.define(
+    :depth, :current, :icon, :icon_family, :icon_label, :title, :url
+  )
 
-  def self.link(depth: 1, current: false, icon: nil, icon_family: nil, **) # rubocop:disable Metrics/ParameterLists
-    Strategies::Link.new(depth:, current:, icon:, icon_family:, **)
+  def self.link(depth: 1, current: false, icon: nil, icon_family: nil, icon_label: nil, **) # rubocop:disable Metrics/ParameterLists
+    Strategies::Link.new(depth:, current:, icon:, icon_family:, icon_label:, **)
   end
 
   def self.links_for(base_resource)

data/lib/willamette/strategies/navbar.rb

@@ -0,0 +1,43 @@
+module Willamette
+  # rubocop:disable Metrics/ParameterLists
+  module Strategies
+    # Contain logic for navbar rendering
+    class Navbar < Base
+      attr_reader :logo, :logo_alt, :site_title
+
+      # Use the `navbar` module method on `Willamette`
+      def initialize(
+        component, logo:, logo_alt:, site_title:, nav_links:, search:
+      )
+        @component = component
+        @logo = logo
+        @logo_alt = logo_alt
+        @site_title = site_title
+        @nav_links  = nav_links
+        @search = search
+      end
+
+      def logo? = @logo
+
+      def site_title? = @site_title
+
+      def search? = @search
+
+      def nav_links = links_html(@nav_links, slot: :nav)
+    end
+  end
+
+  def self.navbar(
+    component,
+    logo:,
+    site_title:,
+    nav_links:,
+    logo_alt: "logo",
+    search: true
+  )
+    Willamette::Strategies::Navbar.new(
+      component, logo:, logo_alt:, site_title:, nav_links:, search:
+    )
+  end
+  # rubocop:enable Metrics/ParameterLists
+end

data/lib/willamette/strategies/sidebar.rb

@@ -1,75 +1,47 @@
 module Willamette
-  # Contain logic for rendering
   # rubocop:disable Metrics/ParameterLists
-  class Strategies::Sidebar
-    attr_reader :description
-
-    # Use the `sidebar` module method on `Willamette`
-    def initialize(
-      component, description:, explore_links:, follow_links:, subscribe:, see_also_links:
-    )
-      @component = component
-      @description = description
-      @explore_links = explore_links || []
-      @follow_links = follow_links || []
-      @subscribe = subscribe
-      @see_also_links = see_also_links || []
-    end
-
-    def explore? = !@explore_links.empty?
+  module Strategies
+    # Contain logic for sidebar rendering
+    class Sidebar < Base
+      attr_reader :description
+
+      # Use the `sidebar` module method on `Willamette`
+      def initialize(
+        component, description:, explore_links:, follow_links:, subscribe:, see_also_links:
+      )
+        @component = component
+        @description = description
+        @explore_links = explore_links || []
+        @follow_links = follow_links || []
+        @subscribe = subscribe
+        @see_also_links = see_also_links || []
+      end
 
-    def explore_links = links_html(@explore_links)
+      def explore? = !@explore_links.empty?
 
-    def description? = @description && !explore?
+      def explore_links = links_html(@explore_links)
 
-    def follow? = !@follow_links.empty?
+      def description? = @description && !explore?
 
-    def follow_links = links_html(@follow_links)
+      def follow? = !@follow_links.empty?
 
-    def subscribe? = @subscribe
+      def follow_links = links_html(@follow_links)
 
-    def see_also? = !@see_also_links.empty?
+      def subscribe? = @subscribe
 
-    def see_also_links = links_html(@see_also_links)
+      def see_also? = !@see_also_links.empty?
 
-    def default_link_icon(folder: false)
-      folder ? "folder-open" : "file-lines"
-    end
+      def see_also_links = links_html(@see_also_links)
 
-    private
-
-    def links_html(links)
-      doc = Nokolexbor::HTML("<ul></ul>")
-      list = doc.at_css("ul")
-      links.each_with_index do |link, index|
-        list << link_node(doc:, link:, folder: (links[index + 1]&.depth || 1) > link.depth)
+      def default_link_icon(folder: false)
+        folder ? "folder-open" : "file-lines"
       end
-      list.to_html.html_safe
-    end
-
-    def link_node(doc:, link:, folder: false) # rubocop:disable Metrics/AbcSize
-      item = doc.create_element("li")
-      item[:"item-depth"] = link.depth
-      anchor = doc.create_element("a")
-      anchor[:href] = @component.relative_url(link.url)
-      anchor[:"aria-current"] = "page" if link.current
-
-      icon = doc.create_element("wa-icon")
-      icon[:name] = link.icon || default_link_icon(folder:)
-      icon[:family] = link.icon_family if link.icon_family
-      anchor << icon
-
-      anchor << doc.create_text_node(" ")
-      anchor << doc.create_text_node(link.title)
-
-      item << anchor
-      item
     end
   end
 
   def self.sidebar(
     component,
-    description:,
+    description: nil,
     explore_links: nil,
     follow_links: nil,
     subscribe: false,

data/lib/willamette/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Willamette
-  VERSION = "0.7.1"
+  VERSION = "0.9.0"
 end

data/lib/willamette.rb

@@ -13,7 +13,9 @@ end
 require "willamette/builders/author_extension"
 require "willamette/builders/inspectors"
 require "willamette/builders/toc"
+require "willamette/strategies/base"
 require "willamette/strategies/link"
+require "willamette/strategies/navbar"
 require "willamette/strategies/sidebar"
 
 # use `<wll-code>` element instead of `<div>`

data/package-lock.json

@@ -1,32 +1,33 @@
 {
   "name": "willamette",
-  "version": "0.1.1",
+  "version": "0.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "willamette",
-      "version": "0.1.1",
+      "version": "0.9.0",
       "license": "MIT",
       "dependencies": {
-        "@awesome.me/webawesome": ">=3.0.0",
+        "@awesome.me/webawesome": ">=3.6.0",
         "hotkeys-js": "^4.0.0",
         "pagefind": "^1.4.0"
       }
     },
     "node_modules/@awesome.me/webawesome": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@awesome.me/webawesome/-/webawesome-3.0.0.tgz",
-      "integrity": "sha512-KLxAiSV9hH+bB8OkpaZUA9zNgBu6G1cXirsE0VWmdS/jtpup1Wf1aC7yGYjPSi/61BVUqk8geA4oylt4oLdmlQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@awesome.me/webawesome/-/webawesome-3.6.0.tgz",
+      "integrity": "sha512-cUQWAq5KwQzy1fsMFUSJqGL6z/s9/VFOqnypOZOXZdpsfnD7gVFKnY6if9EbgzxtCXiHTOnEZ8N3mnwW2Z/Sww==",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "4.1.0",
         "@floating-ui/dom": "^1.6.13",
         "@lit/react": "^1.0.8",
         "@shoelace-style/animations": "^1.2.0",
-        "@shoelace-style/localize": "^3.2.1",
+        "@shoelace-style/localize": "^3.2.2",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
+        "marked": "^11.2.0",
         "nanoid": "^5.1.5",
         "qr-creator": "^1.0.0"
       },
@@ -181,9 +182,9 @@
       }
     },
     "node_modules/@shoelace-style/localize": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz",
-      "integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.2.tgz",
+      "integrity": "sha512-h3+2/cFWGaw3KQUwintkP4Cy3PtrVW//ysr9DM5nOfIXYekgrHwsELk/nyxc8hmjVP/Kcon7KCzvUtSwUBipfQ==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
@@ -258,6 +259,18 @@
         "@types/trusted-types": "^2.0.2"
       }
     },
+    "node_modules/marked": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-11.2.0.tgz",
+      "integrity": "sha512-HR0m3bvu0jAPYiIvLUUQtdg1g6D247//lvcekpHO1WMvbwDlwSkZAX9Lw4F4YHE1T0HaaNve0tuAWuV1UJ6vtw==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/nanoid": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willamette",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "main": "frontend/javascript/index.js",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
     "frontend"
   ],
   "dependencies": {
-    "@awesome.me/webawesome": ">=3.0.0",
+    "@awesome.me/webawesome": ">=3.6.0",
     "hotkeys-js": "^4.0.0",
     "pagefind": "^1.4.0"
   }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: willamette
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.9.0
 platform: ruby
 authors:
 - Bridgetown Team
 bindir: bin
 cert_chain: []
-date: 2026-04-30 00:00:00.000000000 Z
+date: 2026-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bridgetown
@@ -116,7 +116,9 @@ files:
 - lib/willamette/builders/inspectors.rb
 - lib/willamette/builders/toc.rb
 - lib/willamette/locales/en.yml
+- lib/willamette/strategies/base.rb
 - lib/willamette/strategies/link.rb
+- lib/willamette/strategies/navbar.rb
 - lib/willamette/strategies/sidebar.rb
 - lib/willamette/version.rb
 - package-lock.json