Make changelog reachable from the landing page (#1870)

Author: FatumaA

src/ocamlorg_frontend/pages/home.eml

@@ -13,8 +13,10 @@ let package_card ~href ~img_path ~name description =
   </a>
 
 let render
-~(latest_release: Data.Release.t)
-~(lts_release: Data.Release.t)
+  ~(latest_release: Data.Release.t)
+  ~(lts_release: Data.Release.t)
+  ~(releases : Data.Release.t list)
+  ~(changelogs : Data.Changelog.t list)
 =
 Layout.render
 ~use_swiper:true
@@ -214,7 +216,6 @@ Layout.render
           </div>
         </div>
       </div>
-
       <div class="flex gap-10 lg:gap-24 flex-col lg:flex-row-reverse justify-between">
         <div class="lg:flex-1">
           <div class="text-legacy-lighter text-base">
@@ -263,22 +264,67 @@ Layout.render
     </div>
   </div>
 </div>
-<div class="bg-legacy-default py-12 overflow-hidden">
-  <div class="container-fluid flex flex-col items-center">
-    <h3 class="font-bold">Releases</h3>
-    <div class="bg-pattern p-6 mt-8 rounded-xl w-full lg:w-2/3 text-white">
-      <a href="<%s Url.release latest_release.version %>">
-        <div class="text-primary text-sm mb-4 uppercase">Recent Release</div>
-        <h3 class="font-bold mb-6">
-          <%s latest_release.version %> <span class="text-sm font-medium">(<%s latest_release.date %>)</span>
-        </h3>
-      </a>
-      <div class="prose prose-sm text-white"><%s! latest_release.highlights_html %></div>
-    </div>
-    <a href="<%s Url.releases %>" class="btn btn-lg btn-ghost mt-8">
-      <span>See all Releases</span>
-      <%s! Icons.chevron_right "h-5 w-5" %>
-    </a>
+<div class="bg-legacy-default pt-24 pb-14 overflow-hidden">
+  <div class="container-fluid grid grid-cols-1 lg:grid-cols-2 gap-10 items-stretch mb-14"> 
+      <div class="flex flex-col">
+        <h3 class="font-bold">Releases</h3>
+        <div class="flex-grow p-10 mt-7 w-full border-2 shadow-md rounded-2xl h-full">
+        <div class="text-primary text-sm mb-4 uppercase">Recent Releases</div>
+      
+        <% releases |> List.iter (fun (item : Data.Release.t) -> %>
+          <div class="mb-4">
+          <a href="<%s Url.release item.version %>">
+            <h3 class="font-bold mb-6">
+              <%s item.version %> <span class="text-sm">(<%s item.date %>)</span>
+            </h3>
+          </a>
+          <div class="prose prose-sm"><%s! item.highlights_html %></div>
+           </div>
+        <% ); %>
+       
+          <a href="<%s Url.releases %>" class="btn btn-ghost rounded mt-8">
+            <span>See All Releases</span>
+            <%s! Icons.chevron_right "h-5 w-5" %>
+          </a>
+       </div>
+      </div>
+      <div class="flex flex-col">
+          <h3 class="font-bold">Changelog</h3>
+          <div class="flex-grow p-10 mt-7 border-2 shadow-md rounded-2xl h-full">
+            <a href="<%s Url.changelog %>">
+            <div class="text-primary text-sm mb-4 uppercase">Releases & Updates</div>
+            <h3 class="font-bold mb-6">
+              Compiler and Platform Tools
+            </h3>
+            </a>
+            <% let changelogs_length = List.length changelogs in changelogs |> 
+                    List.iteri (fun index (item : Data.Changelog.t) -> %>
+            <div class="<%s if index = changelogs_length - 1 then "pl-8" else "pl-8 border-l-2" %>">
+              <div class="flex flex-col">   
+                <div class="mb-6">
+                    <div class="relative pb-2">
+                        <div class="absolute block -left-11 bg-legacy-default dark:bg-legacy-dark-default w-6 h-6 mt-0.5 text-primary">
+                          <%s! Icons.changelog "w-6 h-6" %>
+                        </div>
+                        <a href="<%s Url.changelog_entry item.slug %>" class="my-0 font-sans text-xl tracking-normal font-extrabold leading-7 changelog-title whitespace-normal break-all"><%s item.title %></a>
+                        <time datetime="<%s item.date %>" class="block mt-1 font-sans text-sm text-legacy-lighter"><%s Utils.human_date item.date %></time>
+                    </div>
+                    <div class="prose prose-orange">
+                      <%s! String.sub item.body_html 0 100 %>...
+                    </div>
+                    <a href="<%s Url.changelog %>" class="text-primary mt-2">
+                      See full changelog
+                    </a>
+                </div>
+              </div>
+            </div>
+            <% ); %>
+            <a href="<%s Url.changelog %>" class="btn btn-ghost rounded mt-8">
+            <span>See Full Changelog</span>
+            <%s! Icons.chevron_right "h-5 w-5" %>
+            </a>
+          </div>
+      </div>
   </div>
 </div>
 <div class="bg-pattern py-24 overflow-hidden">

src/ocamlorg_web/lib/handler.ml

@@ -10,7 +10,9 @@ let ( let</>? ) opt = http_or_404 opt
 let index _req =
   Dream.html
     (Ocamlorg_frontend.home ~latest_release:Data.Release.latest
-       ~lts_release:Data.Release.lts)
+       ~lts_release:Data.Release.lts
+       ~releases:(List.take 2 Data.Release.all)
+       ~changelogs:(List.take 3 Data.Changelog.all))
 
 let install _req = Dream.html (Ocamlorg_frontend.install ())