Extract SVG images

seanpdoyle · seanpdoyle · commit f9e486cbf8d9 · 2021-01-25T14:13:40.000-05:00
Several affordances throughout the application are visualized through [`<svg>` elements][mdn-svg]. Prior to this commit, they were declared directly in the template HTML. Some of the application's iconography was shared across several parts of the interface. For instance, the commit history's `<summary>` element in mobile dimensions shared the same icon `<svg>` elements as the file diff's `<summary>` element. To re-use the shared elements, this commit adds a dependency on the [`middleman-inline_svg` gem][middleman-inline_svg], which reads files from the `source/images` directory and renders the contents of files inline as HTML, similar to what was done before. The main value that `middleman-inline_svg` provides is that it affords an opportunity for the rendering context to insert HTML attributes (like [`class`][class] and [`role`][role]) or an SVG [`<title>` element][svg-title]. To that end, this commit also [configures the extension][configuration] to specify [`role="img"`][role-img] for each SVG, since each collection of elements represents a single entity. [mdn-svg]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg [middleman-inline_svg]: https://github.com/thoughtbot/middleman-inline_svg#usage [class]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class [role]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles [svg-title]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title [configuration]: https://github.com/thoughtbot/middleman-inline_svg#configuration [role-img]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img
diff --git a/Gemfile b/Gemfile
@@ -3,6 +3,7 @@ source 'https://rubygems.org'
 gem 'git'
 gem 'middleman', '~> 4.2'
 gem 'middleman-aria_current'
+gem 'middleman-inline_svg'
 gem 'middleman-syntax'
 gem 'redcarpet'
 gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby, :x64_mingw]
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -81,6 +81,9 @@ GEM
       servolux
       tilt (~> 2.0.9)
       uglifier (~> 3.0)
+    middleman-inline_svg (0.1.2)
+      middleman-core (>= 3.4.1)
+      nokogiri (>= 1.8)
     middleman-syntax (3.2.0)
       middleman-core (>= 3.2)
       rouge (~> 3.2)
@@ -149,6 +152,7 @@ DEPENDENCIES
   git
   middleman (~> 4.2)
   middleman-aria_current
+  middleman-inline_svg
   middleman-syntax
   minitest-around
   redcarpet
diff --git a/config.rb b/config.rb
@@ -14,6 +14,11 @@
          command: build? ?  "yarn build" : "yarn start",
          source: "tmp/dist",
          latency: 1
+activate :inline_svg do |config|
+  config.defaults = {
+    role: "img",
+  }
+end
 activate :syntax
 
 set :markdown_engine, :redcarpet
diff --git a/source/commits/_file.html.erb b/source/commits/_file.html.erb
@@ -1,8 +1,6 @@
 <details id="<%= name %>" <%= ("open" if expanded) %> class="border-l border-r">
   <summary class="border-b cursor-pointer list-style-none p-4 outline-none">
-    <svg class="h-8 mr-4 inline transform rotate-90 open:-rotate-90" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
-    </svg>
+    <%= inline_svg("caret-right.svg", class: "h-8 mr-4 inline transform rotate-90 open:-rotate-90") %>
 
     <code class="break-all"><%= name %></code>
   </summary>
diff --git a/source/images/caret-right.svg b/source/images/caret-right.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
+</svg>
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -42,9 +42,7 @@
           <span class="sr-only open:hidden">Expand History</span>
           <span class="sr-only hidden open:initial">Collapse History</span>
           <div class="md:h-screen-fit flex flex-col border-b border-t h-8 w-full justify-center md:w-8 md:border-r md:border-l md:border-t-0 open:absolute inset-x-0 bottom-0 top-auto md:top-0 md:left-auto">
-            <svg class="transform rotate-90 open:-rotate-90 md:rotate-0 md:open:rotate-180" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
-            </svg>
+            <%= inline_svg("caret-right.svg", class: "transform rotate-90 open:-rotate-90 md:rotate-0 md:open:rotate-180") %>
           </div>
         </summary>
 
