Changelog page that pulls from Github Release notes (#867)

* Changelog page that pulls from Github Release notes

* Review changelog page styles

* Move changelog page title to i18n translations

app/assets/stylesheets/application.tailwind.css

@@ -10,28 +10,6 @@
 }
 
 @layer components {
-  .prose {
-    table {
-      @apply divide-y divide-gray-300;
-    }
-
-    tr {
-      @apply divide-x divide-gray-100;
-    }
-
-    th {
-      @apply whitespace-nowrap px-2 text-left text-sm font-semibold text-gray-900 py-3.5;
-    }
-
-    tbody {
-      @apply divide-y divide-gray-200;
-    }
-
-    td {
-      @apply whitespace-nowrap px-2 py-2 text-sm text-gray-500;
-    }
-  }
-
   .form-field {
     @apply relative rounded-md border bg-white border-alpha-black-100 shadow-xs;
     @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100;
@@ -81,6 +59,20 @@
     @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out;
     @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
   }
+
+  .prose--github-release-notes {
+    .octicon {
+      @apply inline-block overflow-visible align-text-bottom fill-current;
+    }
+
+    .dropdown-caret {
+      @apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block;
+    }
+
+    .user-mention {
+      @apply font-bold;
+    }
+  }
 }
 
 /* Small, single purpose classes that should take precedence over other styles */

app/controllers/pages_controller.rb

@@ -31,6 +31,7 @@ class PagesController < ApplicationController
   end
 
   def changelog
+    @releases_notes = Provider::Github.new.fetch_latest_releases_notes
   end
 
   def feedback

app/models/provider/github.rb

@@ -40,6 +40,26 @@ class Provider::Github
     end
   end
 
+  def fetch_latest_releases_notes
+    begin
+      Rails.cache.fetch("latest_github_releases_notes", expires_in: 2.hours) do
+        releases = Octokit.releases(repo)
+        releases.map do |release|
+          {
+            avatar: release.author.avatar_url,
+            name: release.name,
+            published_at: release.published_at,
+            body: Octokit.markdown(release.body, mode: "gfm", context: repo)
+          }
+        end
+      end
+
+    rescue => e
+      Rails.logger.error "Failed to fetch latest GitHub releases notes: #{e.message}"
+      []
+    end
+  end
+
   private
     def repo
       "#{owner}/#{name}"

app/views/pages/changelog.html.erb

@@ -2,11 +2,27 @@
   <%= render "settings/nav" %>
 <% end %>
 <div class="space-y-4">
-  <h1 class="text-gray-900 text-xl font-medium mb-4">What's New</h1>
+  <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".title") %></h1>
   <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
-    <div class="flex justify-center items-center py-20">
-      <p class="text-gray-500">Changelog coming soon...</p>
+    <% @releases_notes.each do |release_notes| %>
+      <div class="flex justify-between gap-4 mb-12 last:mb-0">
+        <div class="w-1/3">
+          <div class="px-3 flex items-center gap-3">
+            <div class="text-white shrink-0 w-9 h-9">
+              <%= image_tag release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
             </div>
+          <div>
+            <div class="text-gray-900 font-medium text-sm"><%= release_notes[:name] %></div>
+            <div class="text-gray-500 text-sm"><%= release_notes[:published_at].strftime("%B %d, %Y") %></div>
+          </div>
+        </div>
+        </div>
+        <div class="w-2/3 text-gray-500 text-sm prose prose--github-release-notes">
+          <h2 class="mb-5 text-xl text-gray-900"><%= release_notes[:name] %></h2>
+          <%= release_notes[:body].html_safe %>
+        </div>
+      </div>
+    <% end %>
   </div>
   <div class="flex justify-between gap-4">
     <%= previous_setting("Imports", imports_path) %>

config/locales/views/pages/en.yml

@@ -1,6 +1,8 @@
 ---
 en:
   pages:
+    changelog:
+      title: What's new
     dashboard:
       allocation_chart:
         assets: Assets

config/tailwind.config.js

@@ -52,6 +52,49 @@ module.exports = {
           to: { "stroke-dashoffset": 0 },
         },
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "none",
+            a: {
+              color: "inherit",
+              textDecoration: "underline",
+            },
+            h2: {
+              fontSize: "1.125rem",
+              fontWeight: "inherit",
+              lineHeight: "1.75rem",
+              marginBottom: "0.625rem",
+              marginTop: "0.875rem",
+            },
+            p: {
+              marginBottom: "0.625rem",
+              marginTop: "0.875rem",
+            },
+            strong: {
+              color: "inherit",
+            },
+            li: {
+              margin: 0,
+            },
+            details: {
+              borderRadius: "12px",
+              marginBottom: "0.875rem",
+              marginTop: "0.875rem",
+            },
+            summary: {
+              display: "flex",
+              alignItems: "center",
+              columnGap: "0.25rem",
+            },
+            video: {
+              margin: 0,
+              borderBottomLeftRadius: "12px",
+              borderBottomRightRadius: "12px",
+            },
+          },
+        },
+      },
     },
   },
   plugins: [