willamette 0.5.0

data/components/willamette/search_dialog_element.js

@@ -0,0 +1,90 @@
+const { default: _default } = require("hotkeys-js")
+
+class SearchDialogElement extends HTMLElement {
+  static {
+    customElements.define("wll-search-dialog", this)
+  }
+
+  connectedCallback() {
+    setTimeout(() => {
+      this.querySelector(":scope > wa-dialog").addEventListener("wa-show", this)
+      this.querySelector(":scope > wa-dialog").addEventListener("wa-after-hide", this)
+    })
+  }
+
+  handleEvent(event) {
+    if (event.type === "wa-show") {
+      this.handleShow()
+    } else if (event.type == "wa-after-hide") {
+      this.handleHide()
+    }
+  }
+
+  async handleShow() {
+    const html = await (await fetch("/search")).text()
+    this.querySelector("wll-dialog-inner").replaceWith(Document.parseHTMLUnsafe(html).querySelector("wll-search-page"))
+    setTimeout(() => this.querySelector("wa-input").focus()) // queue task to focus, otherwise control isn't loaded or something
+    const source = this.querySelector("script").textContent
+    this.querySelector("script").remove()
+    const newScript = document.createElement("script")
+    newScript.type = "module"
+    newScript.textContent = source
+    document.body.append(newScript)
+  }
+
+  handleHide() {
+    this.querySelector("wll-search-page").replaceWith(document.createElement("wll-dialog-inner"))
+  }
+}
+
+customElements.define("wll-search-page", class extends HTMLElement {
+  connectedCallback() {
+    this.addEventListener("input", this)
+    this.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown") {
+        if (document.activeElement.localName === "wa-input") {
+          event.preventDefault()
+          this.querySelector("a")?.focus()
+        } else if (document.activeElement.localName === "a") {
+          event.preventDefault()
+          document.activeElement.closest("li").nextElementSibling?.querySelector("a")?.focus()
+        }
+      } else if (event.key === "ArrowUp") {
+        if (document.activeElement.localName === "a") {
+          event.preventDefault()
+          const previousItem = document.activeElement.closest("li").previousElementSibling
+          if (previousItem) {
+            previousItem.querySelector("a").focus()
+          } else {
+            this.querySelector("wa-input").focus()
+          }
+        }
+      }
+    })
+    this.tmpl = this.querySelector("template#search-result-template")
+  }
+
+  async handleEvent(event) {
+    console.log(event.target.value)
+    const resultsList = this.querySelector("wll-search-results > ul")
+    const search = await pagefind.debouncedSearch(event.target.value)
+    if (search === null) {
+      // a more recent search call has been made, nothing to do
+    } else {
+      resultsList.replaceChildren()
+      if (search.results.length > 0) {
+        search.results.forEach(async (result) => {
+          const data = await result.data()
+          const tmplInstance = this.tmpl.content.cloneNode(true)
+          tmplInstance.querySelector("[data-title]").innerHTML = `<a href="${data.url}">${data.meta.title}</a>`
+          tmplInstance.querySelector("[data-excerpt").innerHTML = data.excerpt
+          this.querySelector("wll-search-results > ul").append(tmplInstance)
+        })
+      } else {
+        resultsList.setHTMLUnsafe(`
+          <li><p><wa-icon name="search"></wa-icon> <em>No results could be found.</em></p></li>
+        `)
+      }
+    }
+  }
+})

data/content/search.erb

@@ -0,0 +1,29 @@
+---
+layout: page
+title: Search
+---
+
+<wll-search-page>
+  <!-- input type="search"  / -->
+  <wa-input size="large" placeholder="<%= t("labels.search") %>…" pill>
+    <wa-icon name="search" slot="start"></wa-icon>
+  </wa-input>
+  
+  <wll-search-results>
+    <ul>
+    </ul>
+  </wll-search-results>
+
+  <template id="search-result-template">
+    <li>
+      <p data-title></p>
+      <p data-excerpt></p>
+    </li>
+  </template>
+
+  <script type="module">
+    const pagefind = await import("/pagefind/pagefind.js")
+    pagefind.init()
+    window.pagefind = pagefind
+  </script>
+</wll-search-page>

data/content/willamette/style-guide.md

@@ -0,0 +1,93 @@
+---
+layout: page
+title: This is the Willamette Theme
+---
+
+<style>
+.swatch {
+  wa-copy-button::part(button) {
+    background: var(--color);
+    border-radius: var(--wa-border-radius-m);
+    padding: 1rem;
+  }
+}
+</style>
+
+<wa-callout variant="brand">
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+  Welcome to your new home on the Internet!
+</wa-callout>
+
+<hr />
+
+<wa-color-picker label="Chose your brand color:" size="large" 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-color-picker>
+
+<hr />
+
+## Brand Color Scale
+
+<ul class="color-group" style="display: flex; flex-wrap: wrap; list-style: none">
+  <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>
+      </div>
+      <small>95</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-90)">
+        <wa-copy-button value="--wa-color-brand-90" copy-label="--wa-color-brand-90"></wa-copy-button>
+      </div>
+      <small>90</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-80)">
+        <wa-copy-button value="--wa-color-brand-80" copy-label="--wa-color-brand-80"></wa-copy-button>
+      </div>
+      <small>80</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-70)">
+        <wa-copy-button value="--wa-color-brand-70" copy-label="--wa-color-brand-70"></wa-copy-button>
+      </div>
+      <small>70</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-60)">
+        <wa-copy-button value="--wa-color-brand-60" copy-label="--wa-color-brand-60"></wa-copy-button>
+      </div>
+      <small>60</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-50)">
+        <wa-copy-button value="--wa-color-brand-50" copy-label="--wa-color-brand-50"></wa-copy-button>
+      </div>
+      <small>50</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-40)">
+        <wa-copy-button value="--wa-color-brand-40" copy-label="--wa-color-brand-40"></wa-copy-button>
+      </div>
+      <small>40</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-30)">
+        <wa-copy-button value="--wa-color-brand-30" copy-label="--wa-color-brand-30"></wa-copy-button>
+      </div>
+      <small>30</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-20)">
+        <wa-copy-button value="--wa-color-brand-20" copy-label="--wa-color-brand-20"></wa-copy-button>
+      </div>
+      <small>20</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-10)">
+        <wa-copy-button value="--wa-color-brand-10" copy-label="--wa-color-brand-10"></wa-copy-button>
+      </div>
+      <small>10</small>
+    </li><li class="color-preview">
+      <div class="color swatch" style="--color: var(--wa-color-brand-05)">
+        <wa-copy-button value="--wa-color-brand-05" copy-label="--wa-color-brand-05"></wa-copy-button>
+      </div>
+      <small>05</small>
+    </li>
+</ul>

data/layouts/willamette/default.erb

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="<%= site.locale %>" class="wa-palette-default">
+  <head>
+    <%= render "head", metadata: site.metadata, title: data.title %>
+  </head>
+  <body class="OFF:wll-grid-lines OFF:wll-code-dark <%= data.layout %> <%= data.page_class %>">
+    <%= dsd do %>
+      <%= render Willamette::HolyGrailLayout.new %>
+    <% end %>
+    <%= render Shared::Navbar.new(metadata: site.metadata, resource:) %>
+
+    <main slot="content" id="content">
+      <div hidden class="show-for-tablet" style="position: absolute; right: var(--wa-space-m)"><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 %>>
+        <%= 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>
+
+    <aside slot="sidebar-end" hidden>
+      <!-- TODO: this should be in a shared component -->
+      <div class="show-for-tablet" style="position: absolute; right: var(--wa-space-m)"><button type="button" class="wa-outlined" onclick="document.body.classList.toggle('sidebar-end-open')"><wa-icon name="close"></wa-icon></button></div>
+      <h2><%= t "documentation.contents" %></h2>
+
+      <%= slotted :toc %>
+
+      <hr />
+
+      <!-- TOC will be relocated here -->
+    </aside>
+
+    <%= render "footer", metadata: site.metadata %>
+    <a slot="skip-to-content" class="skip-to-content-link" href="#content"><%= t "content.skip_to_content" %></a>
+    <%= render Willamette::SearchDialog.new %>
+  </body>
+</html>

data/lib/willamette/builders/inspectors.rb

@@ -0,0 +1,28 @@
+module Willamette
+  class Builders::Inspectors < Bridgetown::Builder
+    def build # rubocop:disable Metrics/CyclomaticComplexity
+      inspect_html do |document|
+        document.query_selector_all("a").each do |anchor|
+          next if anchor[:target]
+
+          unless anchor[:href]&.starts_with?("http") && !anchor[:href]&.include?(site.config.url)
+            next
+          end
+
+          anchor[:target] = "_blank"
+        end
+      end
+
+      inspect_html do |document|
+        document.query_selector_all("article h2[id], article h3[id]").each do |heading|
+          heading << document.create_text_node(" ")
+          heading << document.create_element(
+            "a", "#",
+            href: "##{heading[:id]}",
+            class: "heading-anchor"
+          )
+        end
+      end
+    end
+  end
+end

data/lib/willamette/builders/toc.rb

@@ -0,0 +1,11 @@
+module Willamette
+  class Builders::Toc < Bridgetown::Builder
+    def build
+      helper :toc do |&block|
+        helpers.slot(:toc, &block)
+
+        "* toc\n{:toc}\n".html_safe
+      end
+    end
+  end
+end

data/lib/willamette/locales/en.yml

@@ -0,0 +1,22 @@
+en:
+  content:
+    featured_post_image: featured post image
+    skip_to_content: Skip to content
+    posts:
+      more_posts: More Posts
+      newer_posts: Newer Posts
+  labels:
+    close: Close
+    email_address: Email Address
+    first_name: First Name (Optional)
+    next: Next
+    previous: Previous
+    search: Search
+    subscribe: Subscribe
+  documentation:
+    contents: Contents
+    explore: Explore
+  marketing:
+    follow: Follow Us
+    subscribe: Subscribe
+    see_also: See Also

data/lib/willamette/strategies/link.rb

@@ -0,0 +1,20 @@
+module Willamette
+  # Contain logic for rendering
+  Strategies::Link = Data.define(:depth, :current, :icon, :icon_family, :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:, **)
+  end
+
+  def self.links_for(base_resource)
+    base_resource.collection.map do |resource|
+      depth = resource.relative_path.each_filename.count - 1
+      Willamette.link(
+        current: resource == base_resource,
+        title: resource.data.title,
+        url: resource.relative_url,
+        depth:
+      )
+    end
+  end
+end

data/lib/willamette/strategies/sidebar.rb

@@ -0,0 +1,83 @@
+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?
+
+    def explore_links = links_html(@explore_links)
+
+    def description? = @description && !explore?
+
+    def follow? = !@follow_links.empty?
+
+    def follow_links = links_html(@follow_links)
+
+    def subscribe? = @subscribe
+
+    def see_also? = !@see_also_links.empty?
+
+    def see_also_links = links_html(@see_also_links)
+
+    def default_link_icon(folder: false)
+      folder ? "folder-open" : "file-lines"
+    end
+
+    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)
+      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:,
+    explore_links: nil,
+    follow_links: nil,
+    subscribe: false,
+    see_also_links: nil
+  )
+    Willamette::Strategies::Sidebar.new(
+      component, description:, explore_links:, follow_links:, subscribe:, see_also_links:
+    )
+  end
+  # rubocop:enable Metrics/ParameterLists
+end

data/lib/willamette/version.rb

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

data/lib/willamette.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require "bridgetown"
+
+module Willamette
+  module Builders
+  end
+
+  module Strategies
+  end
+end
+
+require "willamette/builders/inspectors"
+require "willamette/builders/toc"
+require "willamette/strategies/link"
+require "willamette/strategies/sidebar"
+
+# use `<wll-code>` element instead of `<div>`
+Kramdown::Converter::Html.class_eval do
+  alias_method :__old_convert_codeblock, :convert_codeblock
+
+  def convert_codeblock(elem, indent)
+    output = __old_convert_codeblock(elem, indent)
+    return output unless @options[:syntax_highlighter]
+
+    output.sub(%r!^(\s*)<div!, "\\1<wll-code").sub("</div>\n", "</wll-code>\n")
+  end
+end
+
+# @param config [Bridgetown::Configuration::ConfigurationDSL]
+Bridgetown.initializer :willamette do |config, docs_url_segment: "docs"|
+  # Add code here which will run when a site includes
+  # `init :willamette`
+  # in its configuration
+
+  # Add default configuration data:
+  config.willamette ||= {}
+  config.willamette.my_setting ||= 123
+
+  # Register your builders:
+  config.builder Willamette::Builders::Inspectors
+  config.builder Willamette::Builders::Toc
+  config.builder :WillametteRegisterPermalinkPlaceholders do
+    def build
+      permalink_placeholder :unordered_path do |resource|
+        {
+          raw_value:
+            placeholder_processors[:path].(resource)[:raw_value].gsub(%r!(^|/)[0-9]+_!, "\\1"),
+        }
+      end
+    end
+  end
+
+  config.collections do
+    docs do
+      output true
+      permalink "/:locale/#{docs_url_segment ? "#{docs_url_segment}/" : ""}:unordered_path/"
+      name "Documentation"
+    end
+  end
+
+  config.keep_files << "pagefind"
+
+  # You can optionally supply a source manifest:
+  config.source_manifest(
+    origin: Willamette,
+    components: File.expand_path("../components", __dir__),
+    layouts: File.expand_path("../layouts", __dir__),
+    content: File.expand_path("../content", __dir__)
+  )
+
+  I18n.load_path += Gem.find_files_from_load_path("willamette/locales/en.*")
+
+  skip_pagefind_write = false
+  config.hook :site, :post_write do
+    next if config.fast_refresh && skip_pagefind_write
+
+    skip_pagefind_write = true
+
+    `rm -rf output/pagefind && npx --yes pagefind --site output`
+    Bridgetown.logger.info "Pagefind:", "Wrote search index"
+  end
+end