willamette 0.5.0

data/automations/layouts.automation.rb

@@ -0,0 +1,122 @@
+remove_file "src/_layouts/default.erb"
+create_file "src/_layouts/default.erb" do <<~ERB
+  ---
+  layout: willamette/default
+  ---
+
+  <%= yield %>
+ERB
+end
+
+remove_file "src/_layouts/page.erb"
+create_file "src/_layouts/page.erb" do <<~ERB
+  ---
+  layout: default
+  ---
+
+  <article class="<%= data.willamette&.article_classes %>">
+
+  <h1><%= pipe(data.title) { strip_html | smartify } %></h1>
+
+  <%= yield %>
+
+  </article>
+ERB
+end
+
+remove_file "src/_layouts/post.erb"
+create_file "src/_layouts/post.erb" do <<~ERB
+  ---
+  layout: default
+  ---
+
+  <article class="<%= data.willamette&.article_classes %>">
+
+  <h1><%= pipe(data.title) { strip_html | smartify } %></h1>
+
+  <%
+    if data.image
+      image_path = data.image.is_a?(String) ? data.image : data.image.path
+      image_alt = data.image.is_a?(String) ? t("content.featured_post_image") : data.image.alt
+      image_caption = data.image.is_a?(String) ? nil : data.image.caption
+  %>
+    <figure class="full-main-<%= data.image_bleed ? "bleed" : "size" %>">
+      <img src="<%= image_path %>" alt="" />
+      <% if image_caption %>
+        <figcaption><%= markdownify image_caption %></figcaption>
+      <% end %>
+    </figure>
+  <% end %>
+ 
+  <%= yield %>
+ 
+  <hr />
+ 
+  <wa-icon class="article-metadata" name="newspaper"></wa-icon>
+  <p class="article-metadata"><article-author>by So and So</article-author></p>
+  <p class="article-metadata"><time><%= pipe(resource.date) { to_date | l(format: :long) } %></time></p>
+  <p class="article-metadata"><article-tags>#foo #BarBaz</article-tags></p>
+
+  </article>
+ERB
+end
+
+create_file "src/_layouts/documentation.erb" do <<~ERB
+  ---
+  layout: default
+  ---
+
+  <article class="<%= data.willamette&.article_classes %>">
+
+  <h1><%= pipe(data.title) { strip_html | smartify } %></h1>
+
+  <%= yield %>
+
+  </article>
+
+  <hr style="margin-block-start: calc(var(--wa-content-spacing) * 2)" />
+
+  <%= render Willamette::PreviousNext.new(resource:) %>
+ERB
+end
+
+inject_into_file "src/index.md", after: "# Welcome to your new Bridgetown website.\n" do <<~MARKDOWN
+
+  <p><wa-button variant="brand" href="/willamette/style-guide">View the Willamette Style Guide</wa-button></p>
+
+  ----
+MARKDOWN
+end
+
+remove_file "src/posts.md"
+create_file "src/blog.erb" do <<~ERB
+---
+layout: page
+title: Blog
+exclude_from_pagefind: true
+paginate:
+  collection: posts
+willamette:
+  post_style: headline_only
+---
+
+<ul class="layout-<%= data.willamette.display_layout %>">
+  <% paginator.each do |post| %>
+    <li>
+      <a href="<%= post.relative_url %>">
+        <%= render Willamette::PostItem.new(post:, post_style: data.willamette.post_style) %>
+      </a>
+    </li>
+  <% end %>
+  <% if paginator.resources.length < 2 %>
+    <li></li>
+  <% end %>
+</ul>
+
+<% if paginator.total_pages > 1 %>
+  <hr style="margin-block-start: calc(var(--wa-content-spacing) * 2)" />
+
+  <%= render Willamette::Pagination(paginator:) %>
+<% end %>
+ERB
+end

data/bridgetown.automation.rb

@@ -0,0 +1,7 @@
+say "🛠️ Installing Willamette..."
+
+run "bundle add nokolexbor"
+run "bundle add willamette --git=git@codeberg.org:bridgetownrb/willamette.git"
+run "npm install git+ssh://git@codeberg.org/bridgetownrb/willamette.git"
+
+apply "#{__dir__}/setup.automation.rb"

data/components/willamette/back_to_top.css

@@ -0,0 +1,35 @@
+wll-back-to-top {
+  display: block;
+  pointer-events: none;
+  opacity: 0;
+  position: fixed;
+  z-index: 99;
+  bottom: 20px;
+  right: 1px;
+  width: 45px;
+  height: 45px;
+
+  translate: 10px 0px;
+  transition: all 0.3s;
+
+  &[active] {
+    translate: 0px 0px;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  & button {
+    appearance: none;
+    padding: 10px 14px;
+    background: var(--wa-color-brand-fill-quiet);
+    border: 1px solid var(--wa-color-brand-border-quiet);
+    border-right: none;
+    border-radius: var(--wa-border-radius-m) 0px 0px var(--wa-border-radius-m);
+    color: var(--wll-color-brand);
+    box-shadow: -1px 0px 4px rgba(0,0,0,0.08), inset -5px 0px 2px rgba(0,0,0,0.05);
+
+    & wa-icon {
+      vertical-align: middle;
+    }
+  }
+}

data/components/willamette/back_to_top.js

@@ -0,0 +1,32 @@
+class BackToTopElement extends HTMLElement {
+  static {
+    customElements.define("wll-back-to-top", this)
+  }
+
+  connectedCallback() {
+    this._previousScrollPosition = window.scrollY
+    this._scroller = this.scrollHandler.bind(this)
+    document.addEventListener("scroll", this._scroller)
+    this.addEventListener("click", () => {
+      window.scrollTo({ top: 0, behavior: "smooth" })
+      this.removeAttribute("active")
+    })
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("scroll", this._scroller)
+  }
+
+  scrollHandler(_event) {
+    let newPosition = window.scrollY
+    window.requestAnimationFrame(() => {
+      if (newPosition > 400 && newPosition < this._previousScrollPosition - 100) {
+        this._previousScrollPosition = newPosition;
+        this.removeAttribute("active")
+      } else if (newPosition > this._previousScrollPosition + 100) {
+        this._previousScrollPosition = newPosition;
+        this.setAttribute("active", true)
+      }
+    })
+  }
+}

data/components/willamette/code_element.css

@@ -0,0 +1,10 @@
+wll-code {
+  display: block;
+  margin-block-end: var(--wa-content-spacing);
+
+  pre {
+    border-radius: 0;
+    background: color-mix(in display-p3, var(--wa-color-brand-fill-quiet), color-mix(in display-p3, var(--wa-color-neutral-fill-quiet), transparent 70%) 70%);
+    overflow: auto;
+  }
+}

data/components/willamette/code_element.js

@@ -0,0 +1,49 @@
+class CodeElement extends HTMLElement {
+  static {
+    customElements.define("wll-code", this)
+  }
+
+  constructor() {
+    super()
+
+    this.attachShadow({ mode: "open" })
+  }
+
+  connectedCallback() {
+    if (document.body.classList.contains("wll-code-dark")) this.classList.add("wa-dark")
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          border: 1px solid var(--wa-color-brand-border-quiet);
+          border-radius: var(--wa-border-radius-m);
+          overflow: hidden;
+          background: var(--wll-main-background);
+        }
+
+        header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-top-left-radius: var(--wa-border-radius-m);
+          border-top-right-radius: var(--wa-border-radius-m);
+          border-bottom: 1px solid var(--wa-color-brand-border-quiet);
+          background: var(--wa-color-brand-fill-quiet);
+          font-size: var(--wa-font-size-s);
+          text-transform: uppercase;
+          padding-block: 2px;
+          padding-inline: var(--wa-space-s);
+          font-weight: var(--wa-font-weight-bold);
+        }
+      </style>
+
+      <header><span>${this.getAttribute("class").split(" ")[0].split("-")[1]}</span> <slot name="copy-button"></slot></header>
+      <slot></slot>
+    `
+    this.firstElementChild.id = crypto.randomUUID()
+    const copyButton = document.createElement("wa-copy-button")
+    copyButton.slot = "copy-button"
+    copyButton.from = this.firstElementChild.id
+    this.append(copyButton)
+  }
+}

data/components/willamette/header_navbar.dsd.css

@@ -0,0 +1,19 @@
+:host {
+  --navbar-gap: var(--wa-space-m);
+}
+
+#bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--navbar-gap);
+}
+
+figure {
+  margin: 0;
+}
+
+slot[name=nav]::slotted(*) {
+  display: flex;
+  gap: var(--navbar-gap);
+}

data/components/willamette/header_navbar.rb

@@ -0,0 +1,20 @@
+class Willamette::HeaderNavbar < Bridgetown::Component
+  def template
+    html -> { <<~HTML
+      #{html -> { dsd_style }}
+
+      <div id="bar">
+        <figure>
+          <slot name="logo"></slot>
+        </figure>
+
+        <slot name="search"></slot>
+
+        <nav>
+          <slot name="nav"></slot>
+        </nav>
+      </div>
+    HTML
+    }
+  end
+end

data/components/willamette/holy_grail_layout.dsd.css

@@ -0,0 +1,81 @@
+:host {
+  --layout-padding: var(--wll-layout-padding);
+  --header-block-padding: var(--layout-padding) calc(var(--layout-padding) / 3);
+  --sidebar-start-min-inline-size: calc(var(--wa-space-scale) * 15rem);
+  --sidebar-start-max-inline-size: calc(var(--wa-space-scale) * 28rem);
+  --sidebar-end-min-inline-size: calc(var(--wa-space-scale) * 15rem);
+  --sidebar-end-max-inline-size: calc(var(--wa-space-scale) * 25rem);
+
+  display: grid;
+  grid-template: auto 1fr auto / auto minmax(100px, 1fr) auto;
+}
+
+slot {
+  display: block;
+
+  &::slotted(*) {
+    padding: var(--layout-padding);
+  }
+}
+
+slot[name=header] {
+  grid-column: 1 / 4;
+
+  &::slotted(*) {
+    padding-block: var(--header-block-padding);
+  }
+}
+
+slot[name=sidebar-start] {
+  grid-column: 1 / 2;
+
+  &::slotted(*) {
+    width: clamp(var(--sidebar-start-min-inline-size), 25vw, var(--sidebar-start-max-inline-size));
+  }
+}
+
+slot[name=content] {
+  grid-column: 2 / 3;
+}
+
+slot[name=sidebar-end] {
+  grid-column: 3 / 4;
+
+  &::slotted(*) {
+    width: clamp(var(--sidebar-end-min-inline-size), 22vw, var(--sidebar-end-max-inline-size));
+  }
+}
+
+slot[name=footer] {
+  grid-column: 1 / 4;
+}
+
+slot[name=skip-to-content] {
+  display: contents;
+}
+
+@media screen and (max-width: 1099px) {
+  slot[name=sidebar-end] {
+    position: relative;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  :host {
+    grid-template-rows: auto auto 1fr auto;
+  }
+
+  slot[name=sidebar-start] {
+    grid-column: 1 / 4;
+
+    &::slotted(*) {
+      width: 100%;
+    }
+  }
+
+  slot[name=sidebar-end] {
+    &::slotted(*) {
+      width: calc(var(--sidebar-end-min-inline-size) * 1.25);
+    }
+  }
+}

data/components/willamette/holy_grail_layout.rb

@@ -0,0 +1,17 @@
+class Willamette::HolyGrailLayout < Bridgetown::Component
+  def template
+    # inspired by Una Kravets demo: https://codepen.io/una/pen/mdVbdBy
+
+    html -> { <<~HTML
+      #{html -> { dsd_style }}
+
+      <slot name="skip-to-content"></slot>
+      <slot name="header" part="header"></slot>
+      <slot name="sidebar-start" part="sidebar-start"></slot>
+      <slot name="content" part="content"></slot>
+      <slot name="sidebar-end" part="sidebar-end"></slot>
+      <slot name="footer" part="footer"></slot>
+    HTML
+    }
+  end
+end

data/components/willamette/pagination.erb

@@ -0,0 +1,12 @@
+<ul class="pagination">
+  <li>
+    <% if paginator.previous_page %>
+      <a href="<%= paginator.previous_page_path %>"><wa-icon label="<%= t "labels.previous" %>" name="circle-chevron-left"></wa-icon> <%= t "content.posts.newer_posts" %></a>
+    <% end %>
+  </li>
+  <li>
+    <% if paginator.next_page %>
+      <a href="<%= paginator.next_page_path %>"><%= t "content.posts.more_posts" %> <wa-icon label="<%= t "labels.next" %>" name="circle-chevron-right"></wa-icon></a>
+    <% end %>
+  </li>
+</ul>

data/components/willamette/pagination.rb

@@ -0,0 +1,7 @@
+class Willamette::Pagination < Bridgetown::Component
+  attr_reader :paginator
+
+  def initialize(paginator:)
+    @paginator = paginator
+  end
+end

data/components/willamette/post_item.css

@@ -0,0 +1,102 @@
+wll-post-item {
+  &[headline-only] {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--wa-space-s);
+
+    > time {
+      min-width: 5ch;
+      text-align: right;
+      font-size: var(--wa-font-size-s);
+      margin-block-start: 0.175em;
+    }
+  }
+
+  &:not([headline-only]) {
+    display: block;
+    overflow: hidden;
+    border: solid 2px var(--wa-color-brand-border-quiet);
+    border-radius: var(--wa-border-radius-l);
+    corner-shape: squircle;
+    padding: 1rem;
+    height: 100%;
+    position: relative;
+
+    &::after {
+      box-shadow: inset 0px 0px 1.25rem color-mix(in srgb, var(--wll-color-glow-shadow), transparent 50%);
+      bottom: 0;
+      content: "";
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  figure {
+    margin-block-start: -1rem;
+    margin-inline-start: -1rem;
+    margin-block-end: 1.5rem;
+    width: calc(100% + 2rem);
+    border-radius: 0;
+  }
+
+  img {
+    display: block;
+    aspect-ratio: 5 / 3;
+    object-fit: cover;
+    object-position: center top;
+    border-radius: 0;
+    
+    &[src^="data:"] {
+      width: 64px;
+      padding-block-start: calc(9.75vw - 32px);
+      padding-block-end: calc(9.75vw - 32px);
+      aspect-ratio: initial;
+      margin-inline: auto;
+      opacity: 0.3;
+
+      @media (max-width: 767px) {
+        padding-block-start: 18vw;
+        padding-block-end: 18vw;
+      }
+    }
+  }
+
+  h2 {
+    font-size: var(--wa-font-size-xl);
+
+    &:last-child {
+      margin-block-end: var(--wa-space-s);
+    }
+  }
+}
+
+.wa-dark wll-post-item:not([headline-only]) {
+  box-shadow: inset 0px 0px 1.5rem var(--wa-color-brand-10);
+
+  img[src^="data:"] {
+    filter: invert();
+  }
+}
+
+a:has(> wll-post-item) {
+  text-decoration: none;
+}
+
+a:has(> wll-post-item:not([headline-only])) {
+  color: inherit;
+
+  h2 { color: var(--wa-color-text-link) }
+}
+
+ul:has(li > a > wll-post-item) {
+  list-style-type: none;
+
+  > li {
+    margin-inline-start: 0;
+  }
+}

data/components/willamette/post_item.rb

@@ -0,0 +1,90 @@
+class Willamette::PostItem < Bridgetown::Component
+  using Bridgetown::Refinements
+
+  def self.styles = [
+    :headline_only,
+    :headline_with_summary,
+    :headline_with_image,
+    :headline_with_image_and_summary,
+  ].freeze
+
+  def initialize(post:, post_style: :headline_only, heading_level: 2)
+    post_style = post_style.to_sym
+    unless post_style.within?(self.class.styles)
+      raise "Post style must be one of these options: #{self.class.styles.join(", ")}"
+    end
+
+    @post = post
+    @post_style = post_style
+    @heading_level = heading_level
+  end
+
+  def template = send(@post_style)
+
+  def headline_only
+    # TODO: what about title with html tags?
+    html -> { <<~HTML
+      <wll-post-item #{text->{__callee__.to_s.dasherize}}>
+        <strong>#{html->{@post.data.title}}</strong>
+        #{html->{timestamp}}
+      </wll-post-item>
+    HTML
+    }
+  end
+
+  def headline_with_summary
+    html -> { <<~HTML
+      <wll-post-item #{text->{__callee__.to_s.dasherize}}>
+        <hgroup>
+          #{html->{heading @post.data.title}}
+          <p>#{html->{summary}}</p>
+        </hgroup>
+        #{html->{timestamp}}
+      </wll-post-item>
+    HTML
+    }
+  end
+
+  def headline_with_image(show_summary: false) # rubocop:disable Metrics
+    image_path = @post.data.image.is_a?(String) ? @post.data.image : @post.data.image&.path
+    image_alt =
+      @post.data.image.is_a?(String) ?
+        t("content.featured_post_image") :
+        (@post.data.image&.alt || @post.data.image&.caption)
+    image_path ||= default_image_data
+    html -> { <<~HTML
+      <wll-post-item #{text->{__callee__.to_s.dasherize}}>
+        <hgroup>
+          <figure><img src="#{text->{image_path}}" alt="#{text->{image_alt}}" /></figure>
+          #{html->{heading @post.data.title}}
+          #{html(->{ show_summary ? <<~HTML
+            <p>#{html->{summary}}</p>
+          HTML
+          : "" })}
+        </hgroup>
+        #{html->{timestamp}}
+      </wll-post-item>
+    HTML
+    }
+  end
+
+  def headline_with_image_and_summary = headline_with_image(show_summary: true)
+
+  private
+
+  def default_image_data
+    <<~URL.strip
+      data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20d%3D%22M160%20144C151.2%20144%20144%20151.2%20144%20160L144%20480C144%20488.8%20151.2%20496%20160%20496L480%20496C488.8%20496%20496%20488.8%20496%20480L496%20160C496%20151.2%20488.8%20144%20480%20144L160%20144zM96%20160C96%20124.7%20124.7%2096%20160%2096L480%2096C515.3%2096%20544%20124.7%20544%20160L544%20480C544%20515.3%20515.3%20544%20480%20544L160%20544C124.7%20544%2096%20515.3%2096%20480L96%20160zM224%20192C241.7%20192%20256%20206.3%20256%20224C256%20241.7%20241.7%20256%20224%20256C206.3%20256%20192%20241.7%20192%20224C192%20206.3%20206.3%20192%20224%20192zM360%20264C368.5%20264%20376.4%20268.5%20380.7%20275.8L460.7%20411.8C465.1%20419.2%20465.1%20428.4%20460.8%20435.9C456.5%20443.4%20448.6%20448%20440%20448L200%20448C191.1%20448%20182.8%20443%20178.7%20435.1C174.6%20427.2%20175.2%20417.6%20180.3%20410.3L236.3%20330.3C240.8%20323.9%20248.1%20320.1%20256%20320.1C263.9%20320.1%20271.2%20323.9%20275.7%20330.3L292.9%20354.9L339.4%20275.9C343.7%20268.6%20351.6%20264.1%20360.1%20264.1z%22%2F%3E%3C%2Fsvg%3E
+    URL
+  end
+
+  def heading(contents)
+    "<h#{@heading_level}>#{text contents, ->{ strip_html | smartify }}</h#{@heading_level}>"
+  end
+
+  def summary = @post.data.subtitle || @post.data.description || @post.summary
+
+  def timestamp(date = @post.data.date)
+    "<time>#{text date.to_date, -> { l format: :short }}</time>"
+  end
+end

data/components/willamette/previous_next.erb

@@ -0,0 +1,12 @@
+<ul class="pagination">
+  <li>
+    <% if resource.previous_resource %>
+      <a href="<%= resource.previous_resource.relative_url %>"><wa-icon label="<%= t "labels.previous" %>" name="circle-chevron-left"></wa-icon> <%= resource.previous_resource.data.title %></a>
+    <% end %>
+  </li>
+  <li>
+    <% if resource.next_resource %>
+      <a href="<%= resource.next_resource.relative_url %>"><%= resource.next_resource.data.title %> <wa-icon label="<%= t "labels.next" %>" name="circle-chevron-right"></wa-icon></a>
+    <% end %>
+  </li>
+</ul>

data/components/willamette/previous_next.rb

@@ -0,0 +1,7 @@
+class Willamette::PreviousNext < Bridgetown::Component
+  attr_reader :resource
+
+  def initialize(resource:)
+    @resource = resource
+  end
+end

data/components/willamette/search_dialog.rb

@@ -0,0 +1,18 @@
+class Willamette::SearchDialog < Bridgetown::Component
+  def template
+    html -> { <<~HTML
+      <wll-search-dialog slot="footer">
+        <wa-dialog id="search-dialog" label="#{text->{t "labels.search" }}" without-header light-dismiss>
+          <wll-dialog-inner>
+          </wll-dialog-inner>
+
+          <wa-button slot="footer" size="small" appearance="outlined" variant="brand" pill data-dialog="close">
+            <wa-icon name="circle-xmark" slot="start"></wa-icon>
+            #{text->{t "labels.close" }}
+          </wa-button>
+        </wa-dialog>
+      </wll-search-dialog>
+    HTML
+    }
+  end
+end