Add “current” styles to `<a>` elements

When browsing the history, the current page (as determined by the middleman-aria_current extension, will annotate the <a> element with the [aria-current="page"] attribute.

According to the middleman-aria_current documentation, the :not([aria-current="false"]) portion of the CSS declaration is significant and intentional:

Note that we exclude styling the link if aria-current has a value of false. This is because false is a valid and useful value for denoting a link that does not represent the current item within a set.

When a commit is “current”, its indicator is bolded. Otherwise, they render as the typography font-weight:

highlighted commit indicator

Gemfile

diff --git a/Gemfile b/Gemfile
index 0548a02..7a9dbc5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,6 +2,7 @@ source 'https://rubygems.org'
 
 gem 'git'
 gem 'middleman', '~> 4.2'
+gem 'middleman-aria_current'
 gem 'redcarpet'
 gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby, :x64_mingw]
 gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw, :x64_mingw]

Gemfile.lock

diff --git a/Gemfile.lock b/Gemfile.lock
index 4ee8484..28c3662 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -54,6 +54,8 @@ GEM
       kramdown (~> 1.2)
       middleman-cli (= 4.3.6)
       middleman-core (= 4.3.6)
+    middleman-aria_current (0.1.2)
+      middleman-core (~> 4.0)
     middleman-cli (4.3.6)
       thor (>= 0.17.0, < 2.0)
     middleman-core (4.3.6)
@@ -142,6 +144,7 @@ DEPENDENCIES
   climate_control
   git
   middleman (~> 4.2)
+  middleman-aria_current
   minitest-around
   redcarpet
   tzinfo-data

config.rb

diff --git a/config.rb b/config.rb
index 95ce586..e74601f 100644
--- a/config.rb
+++ b/config.rb
@@ -8,6 +8,7 @@ include UrlHelpers
 
 config[:mode] = (ENV.fetch("MODE") { build? ? "build" : "server" }).to_sym
 
+activate :aria_current
 activate :external_pipeline,
          name: :webpack,
          command: build? ?  "yarn build" : "yarn start",

source/layouts/layout.erb

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 35acfe4..ec43fcf 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -11,7 +11,7 @@
   <body class="min-h-screen">
     <header class="flex flex-row h-12 border-b">
       <h1 class="flex items-center justify-center w-full md:border-r md:w-96">
-        <% link_to root_path do %>
+        <% current_link_to root_path do %>
           <%= escape_html(history.name) %>
         <% end %>
       </h1>
@@ -20,7 +20,7 @@
         <% parent, _, child = adjacent_commits(history.commits, commit: commit) %>
 
         <% if parent.present? %>
-          <% link_to commit_path(parent) do %>
+          <% current_link_to commit_path(parent) do %>
             &#8592; Previous
           <% end %>
         <% end %>
@@ -28,7 +28,7 @@
         <span class="flex-grow"><!-- ensure the links are pushed to the container's extremes --></span>
 
         <% if child.present? %>
-          <% link_to commit_path(child) do %>
+          <% current_link_to commit_path(child) do %>
             Next &#8594;
           <% end %>
         <% end %>
@@ -47,9 +47,9 @@
           </div>
         </summary>
 
-        <nav class="flex flex-col px-4 my-4 overflow-y-auto h-48 w-screen md:h-screen-fit md:w-96 md:my-auto md:p-2 md:pr-10 md:space-y-2">
+        <nav class="flex flex-col px-4 my-4 overflow-y-auto h-48 w-screen current-within:font-bold md:h-screen-fit md:w-96 md:my-auto md:p-2 md:pr-10 md:space-y-2">
           <% history.commits.each do |commit| %>
-            <% link_to("/commits/#{commit.sha}/index.html") do %>
+            <% current_link_to(commit_path(commit)) do %>
               <%= markdown(commit.message.lines.first) %>
             <% end %>
           <% end %>

source/stylesheets/site.css

diff --git a/source/stylesheets/site.css b/source/stylesheets/site.css
index 58aa686..bad299b 100644
--- a/source/stylesheets/site.css
+++ b/source/stylesheets/site.css
@@ -26,6 +26,10 @@ summary::-webkit-details-marker {
   @apply absolute;
 }
 
+.current-within\:font-bold [aria-current="page"] {
+  @apply font-bold;
+}
+
 @screen md {
   .md\:h-screen-fit {
     height: calc(100vh - 3rem); /* 3rem is our header height */

test/application_system_test_case.rb

diff --git a/test/application_system_test_case.rb b/test/application_system_test_case.rb
index 099079b..d22027e 100644
--- a/test/application_system_test_case.rb
+++ b/test/application_system_test_case.rb
@@ -29,6 +29,10 @@ class ApplicationSystemTestCase < ActiveSupport::TestCase
     end
   end
 
+  def expand_history
+    find("summary", text: "Expand History").click
+  end
+
   def stage_file(filename, contents)
     Pathname(@repository.dir.path).join(filename).write(contents)

test/system/visitor_views_commits_test.rb

diff --git a/test/system/visitor_views_commits_test.rb b/test/system/visitor_views_commits_test.rb
index 575858d..523ef01 100644
--- a/test/system/visitor_views_commits_test.rb
+++ b/test/system/visitor_views_commits_test.rb
@@ -15,9 +15,11 @@ class VisitorViewsCommitsTest < ApplicationSystemTestCase
       visit root_path
       expand_history
       click_on "The commit subject"
+      expand_history
 
       assert_selector "h1", text: "The commit subject"
       assert_selector "p", text: "The commit body"
+      assert_selector "[aria-current]", text: "The commit subject"
     end
   end
 
@@ -27,6 +29,7 @@ class VisitorViewsCommitsTest < ApplicationSystemTestCase
 
     with_git_repository do
       visit root_path
+      expand_history
 
       assert_text "This subject has a <h1> in it"
     end

test/system/visitor_views_next_commit_test.rb

diff --git a/test/system/visitor_views_next_commit_test.rb b/test/system/visitor_views_next_commit_test.rb
index 80caaa3..211e2a2 100644
--- a/test/system/visitor_views_next_commit_test.rb
+++ b/test/system/visitor_views_next_commit_test.rb
@@ -14,8 +14,11 @@ class VisitorViewsNextCommitTest < ApplicationSystemTestCase
       expand_history
       click_on "First commit"
       click_on "Next"
+      expand_history
 
       assert_selector "h1", text: "Middle commit"
+      assert_no_selector "[aria-current]", text: "First commit"
+      assert_selector "[aria-current]", text: "Middle commit"
     end
   end

test/system/visitor_views_previous_commit_test.rb

diff --git a/test/system/visitor_views_previous_commit_test.rb b/test/system/visitor_views_previous_commit_test.rb
index 7778684..3756d70 100644
--- a/test/system/visitor_views_previous_commit_test.rb
+++ b/test/system/visitor_views_previous_commit_test.rb
@@ -14,8 +14,11 @@ class VisitorViewsPreviousCommitTest < ApplicationSystemTestCase
       expand_history
       click_on "Last commit"
       click_on "Previous"
+      expand_history
 
       assert_selector "h1", text: "Middle commit"
+      assert_no_selector "[aria-current]", text: "First commit"
+      assert_selector "[aria-current]", text: "Middle commit"
     end
   end

Add “current” styles to <a> elements

Add “current” styles to `<a>` elements