Render how a commit changes the project’s files

To provide the reader with ample context, render each commits’ file changes alongside their commit messages.

Descendants will split the remaining page width amongst themselves.

In the case of the project root, the diff will be omitted, and the commit message will span the width of the page (by virtue of it being the :only-child to the .container. for project root

When a file’s diff is longer than 100 lines, render the <details> element as collapsed by default. To do so, omit the open attribute.

Likewise, when a commit’s subject starts with [GENERATED], don’t render the <details> element with an open attribute.

Determining the diff contents

When a commit has a parent, generating the diff with the ruby-git provided interface is straightforward:

diff = parent.diff(commit)

However, when the commit is the project’s root, it has no parent, and cannot be “diffed”.

To counteract this restriction, this commit invokes a git show command for each file included in the commit, passing the --cc combined diff flag. The --cc flag will ensure that the output contains the code diff. In order to separate out the code from the prose, pass the command a --format=%n flag which includes the %n as a “newline” placeholder, intended to serve as an omission of the prose.

The padding \n character is subsequently omitted by the trailing Ruby-side call to String#strip.

The net result is that the contents of the diff include the changes to the code, and do not include the prose in the commit’s message.

Test Coverage

To ensure that this new behavior is covered, this commit includes corresponding System Tests.

To enable direct navigation to a commit, modify the existing commit test helper to return the new commit object, so that the test can pass it directly to the commit_path helper.

Desktop

git-read file diff in desktop dimensions

Mobile

git-read file diff in mobile dimensions

config.rb

diff --git a/config.rb b/config.rb
index 216299c..e2c9792 100644
--- a/config.rb
+++ b/config.rb
@@ -63,6 +63,7 @@ repository.tags.each do |tag|
         page: {
           title: commit.subject,
         },
+        render_diffs: true,
       },
       ignore: true,
     )
@@ -78,6 +79,7 @@ repository.tags.each do |tag|
       page: {
         title: stale_history.readme.lines.first,
       },
+      render_diffs: false,
     },
     ignore: true,
   )
@@ -99,7 +101,8 @@ history.commits.each do |commit|
       commit: commit,
       page: {
         title: commit.subject,
-      }
+      },
+      render_diffs: true,
     },
     ignore: true,
   )
@@ -115,6 +118,7 @@ proxy(
     page: {
       title: history.readme.lines.first,
     },
+    render_diffs: false,
   },
   ignore: true,
 )

lib/models/commit.rb

diff --git a/lib/models/commit.rb b/lib/models/commit.rb
index 49a67ed..196b928 100644
--- a/lib/models/commit.rb
+++ b/lib/models/commit.rb
@@ -1,9 +1,68 @@
 class Commit < SimpleDelegator
-  def initialize(commit:)
+  def initialize(commit:, repository:)
     super(commit)
+    @repository = repository
   end
 
   def subject
     message.lines.first.strip
   end
+
+  def diff_files
+    if parent.present?
+      parent.diff(self).map do |file|
+        contents = file.patch
+
+        {
+          subject: subject,
+          name: file.path,
+          language: "diff",
+          contents: contents,
+          expanded: expanded?(contents),
+        }
+      end
+    else
+      files_in_tree(node: gtree).flat_map do |filename|
+        contents = show_root_diff(filename)
+
+        {
+          subject: subject,
+          name: filename,
+          language: "diff",
+          contents: contents,
+          expanded: expanded?(contents),
+        }
+      end
+    end
+  end
+
+  private
+
+  def files_in_tree(node:, parents: [])
+    files = node.files.map { |file, _| File.join(*parents, file) }
+
+    files_from_leafs = node.subtrees.map do |child, root|
+      files_in_tree(node: root, parents: parents + [child])
+    end
+
+    files + files_from_leafs.flatten
+  end
+
+  def generated?
+    subject.start_with?("[GENERATED]")
+  end
+
+  def expanded?(contents)
+    !generated? && contents.lines.count < 100
+  end
+
+  def show_root_diff(filename)
+    @repository.lib.send(:command, "show", [
+      "--cc",
+      %(--format=%n),
+      sha,
+      "--",
+      filename,
+    ]).strip
+  end
 end

lib/models/history.rb

diff --git a/lib/models/history.rb b/lib/models/history.rb
index 6507c3d..3b0fbeb 100644
--- a/lib/models/history.rb
+++ b/lib/models/history.rb
@@ -17,7 +17,7 @@ class History
 
   def commits
     root.log(nil).reverse_each.map do |commit|
-      Commit.new(commit: commit)
+      Commit.new(commit: commit, repository: repository)
     end
   end

source/commits/_file.html.erb

diff --git a/source/commits/_file.html.erb b/source/commits/_file.html.erb
new file mode 100644
index 0000000..5f4fa4b
--- /dev/null
+++ b/source/commits/_file.html.erb
@@ -0,0 +1,13 @@
+<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>
+
+    <code class="break-all"><%= name %></code>
+  </summary>
+  <% code(language) do %>
+<%# The lack of leading indentation is significant %>
+<%= contents %>
+  <% end -%>
+</details>

source/layouts/layout.erb

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 3be8415..6c3ab13 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -51,13 +51,13 @@
         <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| %>
             <% current_link_to(commit_path(commit)) do %>
-              <%= markdown(commit.message.lines.first) %>
+              <%= markdown(commit.subject) %>
             <% end %>
           <% end %>
         </nav>
       </details>
 
-      <article class="flex-grow justify-center p-4 md:flex md:h-screen-fit md:p-8 md:overflow-y-auto">
+      <article class="flex-grow p-4 md:flex md:justify-center md:h-screen-fit md:p-8 md:overflow-y-auto <%= "lg:w-7/12" if render_diffs %>">
         <section class="prose prose-lg md:prose-xl">
           <% if history.out_of_date? %>
             <aside class="text-center p-5">
@@ -74,6 +74,14 @@
           <%= yield %>
         </section>
       </article>
+
+      <% if render_diffs %>
+        <aside class="md:h-screen-fit md:overflow-y-auto lg:w-5/12">
+          <% commit.diff_files.each do |diff_file| %>
+            <%= partial("commits/file", locals: diff_file) %>
+          <% end %>
+        </aside>
+      <% end %>
     </main>
   </body>
 </html>

source/stylesheets/site.css

diff --git a/source/stylesheets/site.css b/source/stylesheets/site.css
index bad299b..7279786 100644
--- a/source/stylesheets/site.css
+++ b/source/stylesheets/site.css
@@ -6,6 +6,11 @@ summary::-webkit-details-marker {
   @apply hidden;
 }
 
+[open].open\:inline,
+[open] .open\:inline {
+  @apply inline;
+}
+
 [open].open\:hidden,
 [open] .open\:hidden {
   @apply hidden;

source/stylesheets/syntax.css.erb

diff --git a/source/stylesheets/syntax.css.erb b/source/stylesheets/syntax.css.erb
index afd2c8d..daa742a 100644
--- a/source/stylesheets/syntax.css.erb
+++ b/source/stylesheets/syntax.css.erb
@@ -1 +1,5 @@
+pre.highlight {
+  overflow-x: auto;
+}
+
 <%= Rouge::Themes::Github.render(scope: ".highlight") %>

test/git_helpers.rb

diff --git a/test/git_helpers.rb b/test/git_helpers.rb
index d78db25..fa66e7c 100644
--- a/test/git_helpers.rb
+++ b/test/git_helpers.rb
@@ -4,13 +4,19 @@ require "tmpdir"
 
 module GitHelpers
   def stage_file(filename, contents)
-    Pathname(@repository.dir.path).join(filename).write(contents)
+    filepath = Pathname(@repository.dir.path).join(filename)
+
+    filepath.dirname.mkpath
+
+    filepath.write(contents)
 
     @repository.add(filename)
   end
 
   def commit(message)
     @repository.commit(message)
+
+    @repository.object("HEAD")
   end
 
   def with_built_output(&block)

test/system/visitor_views_commit_diff_test.rb

diff --git a/test/system/visitor_views_commit_diff_test.rb b/test/system/visitor_views_commit_diff_test.rb
new file mode 100644
index 0000000..0a9dc3d
--- /dev/null
+++ b/test/system/visitor_views_commit_diff_test.rb
@@ -0,0 +1,75 @@
+require "application_system_test_case"
+
+class VisitorViewsCommitDiffTest < ApplicationSystemTestCase
+  test "visitor views commit diff when it is the first commit" do
+    stage_file("README.md", "Ignore me")
+    stage_file("file.txt", "File contents")
+    stage_file("src/file.txt", "Nested file contents")
+    git_commit = commit("First commit")
+
+    with_git_repository do
+      visit commit_path(git_commit)
+
+      assert_selector "details summary", text: "file.txt"
+      assert_selector "details[open]", text: "File contents"
+      assert_selector "details summary", text: "src/file.txt"
+      assert_selector "details[open]", text: "Nested file contents"
+    end
+  end
+
+  test "visitor views commit diff when it has parents" do
+    stage_file("README.md", "Ignore me")
+    stage_file("file.txt", <<~TEXT)
+      First line
+    TEXT
+    commit("First commit")
+    stage_file("file.txt", <<~TEXT)
+      First line
+      Next line
+    TEXT
+    git_commit = commit("Last commit")
+
+    with_git_repository do
+      visit commit_path(git_commit)
+
+      assert_selector "details summary", text: "file.txt"
+      assert_selector "details[open]", text: "+Next line"
+    end
+  end
+
+  test "collapses diffs for files that have more than 100 lines" do
+    stage_file("README.md", "Ignore me")
+    stage_file("file.txt", 101.times.reduce("") { |lines| lines + "\ndiff line" })
+    git_commit = commit("First commit")
+
+    with_git_repository do
+      visit commit_path(git_commit)
+
+      assert_no_selector "details[open]", text: "diff line"
+    end
+  end
+
+  test "collapses diffs for commits that start with [GENERATED]" do
+    stage_file("README.md", "Ignore me")
+    stage_file("file.txt", "File contents")
+    git_commit = commit("[GENERATED] Initial Commit")
+
+    with_git_repository do
+      visit commit_path(git_commit)
+
+      assert_no_selector "details[open]", text: "File contents"
+    end
+  end
+
+  test "visitor views home page" do
+    stage_file("README.md", "Ignore me")
+    stage_file("file.txt", "File contents")
+    commit("First commit")
+
+    with_git_repository do
+      visit root_path
+
+      assert_no_text "File contents"
+    end
+  end
+end