From e13f67b3f68205f4d2ea97875acfa0dca3ed363c Mon Sep 17 00:00:00 2001
From: Sabine Schmaltz <sabineschmaltz@gmail.com>
Date: Wed, 29 Nov 2023 15:36:55 +0100
Subject: [PATCH] refactor footer

---
 src/ocamlorg_frontend/components/footer.eml   | 312 +++++++++---------
 .../components/secondary_footer.eml           |  61 ----
 src/ocamlorg_frontend/dune                    |   8 -
 src/ocamlorg_frontend/layouts/layout.eml      |   2 +-
 .../layouts/learn_layout.eml                  |   2 +-
 .../layouts/package_layout.eml                |   2 +-
 6 files changed, 163 insertions(+), 224 deletions(-)
 delete mode 100644 src/ocamlorg_frontend/components/secondary_footer.eml

diff --git a/src/ocamlorg_frontend/components/footer.eml b/src/ocamlorg_frontend/components/footer.eml
index a1ce3fefd5..a6f75c7ca6 100644
--- a/src/ocamlorg_frontend/components/footer.eml
+++ b/src/ocamlorg_frontend/components/footer.eml
@@ -1,160 +1,168 @@
-let footer_icon_link ~href ~name icon =
-  <a href="<%s href %>" class="text-legacy-lighter hover:text-gray-500">
-    <span class="sr-only"><%s name %></span>
-    <%s! icon "h-6 w-6" %>
-  </a>
-
-let render () =
-<footer class="border-t bg-legacy-mild-contrast dark:bg-legacy-dark-mild-contrast" aria-labelledby="footer-heading">
-  <h2 id="footer-heading" class="sr-only">Footer</h2>
-  <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
-    <div class="xl:grid xl:grid-cols-3 xl:gap-8">
-      <div class="space-y-8">
-        <a href="<%s Url.index %>"><img class="h-8" src="<%s Ocamlorg_static.Asset.url "logo-with-name.svg" %>" alt="OCaml"></a>
-        <p class="text-base leading-6 text-legacy-lighter">Innovation. Community. Security.</p>
-        <div class="flex space-x-6">
-          <%s! footer_icon_link ~href:"https://github.com/ocaml/ocaml" ~name:"GitHub" Icons.github %>
-
-          <!-- FIXME: footer_icon_link component -->
-          <a href="https://discord.gg/cCYQbqN" class="text-legacy-lighter hover:text-gray-500">
-            <span class="sr-only">Discord</span>
-            <%s! Icons.discord "h-6 w-6" %>
-          </a>
-
-          <!-- FIXME: footer_icon_link component -->
-          <a href="https://twitter.com/ocamllang" class="text-legacy-lighter hover:text-gray-500">
-            <span class="sr-only">Twitter</span>
-            <%s! Icons.twitter "h-6 w-6" %>
-          </a>
-
-          <!-- FIXME: footer_icon_link component -->
-          <a href="https://watch.ocaml.org/" class="text-legacy-lighter hover:text-gray-500">
-            <span class="sr-only">Peertube</span>
-            <%s! Icons.peertube "h-6 w-6" %>
-          </a>
-
-          <!-- FIXME: footer_icon_link component -->
-          <a href="/feed.xml" class="text-legacy-lighter hover:text-gray-500">
-            <span class="sr-only">RSS</span>
-            <%s! Icons.rss "h-6 w-6" %>
-          </a>
+let about_ocaml = [
+  (Url.changelog, "Changelog");
+  (Url.releases, "Releases");
+  (Url.industrial_users, "Industrial Users");
+  (Url.academic_users, "Academic Users");
+  (Url.about, "Why OCaml");
+  ]
+
+let resources = [
+  (Url.install, "Install OCaml");
+  (Url.getting_started, "Get Started");
+  (Url.platform, "Platform Tools");
+  (Url.manual, "Language Manual");
+  (Url.api, "Standard Library API");
+  (Url.books, "Books");
+  (Url.exercises, "Exercises");
+  (Url.papers, "Papers");
+  (Url.playground, "OCaml Playground");
+  (Url.logos, "Logo");
+  ]
+
+let ecosystem = [
+  (Url.packages, "Packages");
+  (Url.community, "Community");
+  (Url.blog, "Blog");
+  (Url.jobs, "Jobs");
+  ]
+
+let policies = [
+  (Url.carbon_footprint, "Carbon Footprint");
+  (Url.governance, "Governance");
+  (Url.privacy_policy, "Privacy");
+  (Url.code_of_conduct, "Code of Conduct");
+  ]
+
+let socials = [
+  ("https://github.com/ocaml/ocaml", "GitHub", Icons.github);
+  ("https://discord.gg/cCYQbqN", "Discord", Icons.discord);
+  ("https://twitter.com/ocamllang", "Twitter", Icons.twitter);
+  ("https://watch.ocaml.org/", "Peertube", Icons.peertube);
+  ("/feed.xml", "RSS", Icons.rss);
+]
+
+let primary_footer () =
+  let icon_link ~href ~name ~icon =
+    <a href="<%s href %>" class="text-legacy-lighter hover:text-gray-500">
+      <span class="sr-only"><%s name %></span>
+      <%s! icon "h-6 w-6" %>
+    </a>
+  in
+  let footer_link ~href ~name =
+    <li>
+      <a href="<%s href %>" class="text-base leading-6 text-legacy-lighter"><%s name %></a>
+    </li>
+  in
+  <footer class="border-t bg-legacy-mild-contrast dark:bg-legacy-dark-mild-contrast" aria-labelledby="footer-heading">
+    <h2 id="footer-heading" class="sr-only">Footer</h2>
+    <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+      <div class="xl:grid xl:grid-cols-3 xl:gap-8">
+        <div class="space-y-8">
+          <a href="<%s Url.index %>"><img class="h-8" src="<%s Ocamlorg_static.Asset.url "logo-with-name.svg" %>" alt="OCaml"></a>
+          <p class="text-base leading-6 text-legacy-lighter">Innovation. Community. Security.</p>
+          <div class="flex space-x-6">
+            <% socials |> List.iter (fun (href, name, icon) -> %>
+            <%s! icon_link ~href ~name ~icon %>
+            <% ); %>
+          </div>
         </div>
-      </div>
-      <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
-        <div class="md:grid md:grid-cols-2 md:gap-8">
-          <div>
-            <h3 class="text-base font-semibold leading-6 text-legacy-default">About OCaml</h3>
-            <ul class="mt-6 space-y-4">
-              <li>
-                <a href="<%s Url.changelog %>" class="text-base leading-6 text-legacy-lighter">Changelog</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.releases %>" class="text-base leading-6 text-legacy-lighter">Releases</a>
-              </li>
-
-              <li>
-                <!-- TODO: create footer_link component -->
-                <a href="<%s Url.industrial_users %>" class="text-base leading-6 text-legacy-lighter">Industrial Users</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.academic_users %>" class="text-base leading-6 text-legacy-lighter">Academic Users</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.about %>" class="text-base leading-6 text-legacy-lighter">Why OCaml</a>
-              </li>
-            </ul>
+        <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
+          <div class="md:grid md:grid-cols-2 md:gap-8">
+            <div>
+              <h3 class="text-base font-semibold leading-6 text-legacy-default">About OCaml</h3>
+              <ul class="mt-6 space-y-4">
+                <% about_ocaml |> List.iter (fun (href, name) -> %>
+                <%s! footer_link ~href ~name %>
+                <% ); %>
+              </ul>
+            </div>
+            <div class="mt-10 md:mt-0">
+              <h3 class="text-base font-semibold leading-6 text-legacy-default">Resources</h3>
+              <ul class="mt-6 space-y-4">
+                <% resources |> List.iter (fun (href, name) -> %>
+                <%s! footer_link ~href ~name %>
+                <% ); %>
+              </ul>
+            </div>
           </div>
-          <div class="mt-10 md:mt-0">
-            <h3 class="text-base font-semibold leading-6 text-legacy-default">Resources</h3>
-            <ul class="mt-6 space-y-4">
-              <li>
-                <a href="<%s Url.install %>" class="text-base leading-6 text-legacy-lighter">Install OCaml</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.getting_started %>" class="text-base leading-6 text-legacy-lighter">Get Started</a>
-              </li>
-              
-              <li>
-                <a href="<%s Url.platform %>" class="text-base leading-6 text-legacy-lighter">Platform Tools</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.manual %>" class="text-base leading-6 text-legacy-lighter">Language Manual</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.api %>" class="text-base leading-6 text-legacy-lighter">Standard Library API</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.books %>" class="text-base leading-6 text-legacy-lighter">Books</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.exercises %>" class="text-base leading-6 text-legacy-lighter">Exercises</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.papers %>" class="text-base leading-6 text-legacy-lighter">Papers</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.playground %>" class="text-base leading-6 text-legacy-lighter">OCaml Playground</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.logos %>" class="text-base leading-6 text-legacy-lighter">Logo</a>
-              </li>
-            </ul>
+          <div class="md:grid md:grid-cols-2 md:gap-8">
+            <div>
+              <h3 class="text-base font-semibold leading-6 text-legacy-default">Ecosystem</h3>
+              <ul class="mt-6 space-y-4">
+                <% ecosystem |> List.iter (fun (href, name) -> %>
+                <%s! footer_link ~href ~name %>
+                <% ); %>
+              </ul>
+            </div>
+            <div class="mt-20 md:mt-0">
+              <h3 class="text-base font-semibold leading-6 text-legacy-default">Policies</h3>
+              <ul class="mt-6 space-y-4">
+                <% policies |> List.iter (fun (href, name) -> %>
+                <%s! footer_link ~href ~name %>
+                <% ); %>
+              </ul>
+            </div>
           </div>
         </div>
-        <div class="md:grid md:grid-cols-2 md:gap-8">
-          <div>
-            <h3 class="text-base font-semibold leading-6 text-legacy-default">Ecosystem</h3>
-            <ul class="mt-6 space-y-4">
-               <li>
-                <a href="<%s Url.packages %>" class="text-base leading-6 text-legacy-lighter">Packages</a>
-              </li>
-
-               <li>
-                <a href="<%s Url.community %>" class="text-base leading-6 text-legacy-lighter">Community</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.blog %>" class="text-base leading-6 text-legacy-lighter">Blog</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.jobs %>" class="text-base leading-6 text-legacy-lighter">Jobs</a>
-              </li>
-            </ul>
-          </div>
-          <div class="mt-20 md:mt-0">
-            <h3 class="text-base font-semibold leading-6 text-legacy-default">Policies</h3>
-            <ul class="mt-6 space-y-4">
-              <li>
-                <a href="<%s Url.carbon_footprint %>" class="text-base leading-6 text-legacy-lighter">Carbon Footprint</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.governance %>" class="text-base leading-6 text-legacy-lighter">Governance</a>
-              </li>
-
-              <li>
-                <a href="<%s Url.privacy_policy %>" class="text-base leading-6 text-legacy-lighter">Privacy</a>
-              </li>
+      </div>
+    </div>
+  </footer>
+
+let secondary_footer () =
+  let icon_link ~href ~name ~icon =
+    <a href="<%s href %>" class="text-legacy-lighter hover:text-gray-500">
+      <span class="sr-only"><%s name %></span>
+      <%s! icon "h-6 w-6" %>
+    </a>
+  in
+  let footer_link ~href ~name =
+    <a href="<%s href %>" class="font-normal text-legacy-lighter leading-7 py-2.5"><%s name %></a>
+  in
+  <footer class="flex flex-col gap-7 pt-5 mt-6 border-solid border-t-[1px] border-[#00000033]">
+    <section class="flex justify-between items-end">
+      <div>
+        <a href="<%s Url.index %>"><img class="h-8" src="<%s Ocamlorg_static.Asset.url "logo-with-name.svg" %>" alt="OCaml"></a>
+        <p class="text-base leading-6 text-legacy-lighter mt-2">Innovation. Community. Security.</p>
+      </div>
+      <div class="flex items-center gap-4 pr-4">
+        <% socials |> List.iter (fun (href, name, icon) -> %>
+        <%s! icon_link ~href ~name ~icon %>
+        <% ); %>
+      </div>
+    </section>
+
+    <section class="mt-6 grid grid-cols-2 mt-6">
+      <div class="flex flex-col gap-1">
+        <div class="flex flex-col">
+          <h5 class="font-bold text-base leading-7 py-2.5 text-black">About</h5>
+          <% about_ocaml |> List.iter (fun (href, name) -> %>
+          <%s! footer_link ~href ~name %>
+          <% ); %>
+        </div>
 
-              <li>
-                <a href="<%s Url.code_of_conduct %>" class="text-base leading-6 text-legacy-lighter">Code of Conduct</a>
-              </li>
-            </ul>
-          </div>
+        <div class="flex flex-col">
+          <h5 class="font-bold text-base leading-7 py-2.5 text-black">
+            Ecosystem
+          </h5>
+          <% ecosystem |> List.iter (fun (href, name) -> %>
+          <%s! footer_link ~href ~name %>
+          <% ); %>
         </div>
       </div>
+
+      <div class="flex flex-col">
+        <h5 class="font-bold text-base leading-7 py-2.5 text-black">Resources</h5>
+        <% resources |> List.iter (fun (href, name) -> %>
+        <%s! footer_link ~href ~name %>
+        <% ); %>
+      </div>
+    </section>
+
+    <div
+      class="flex flex-wrap gap-x-7 md:justify-between items-center py-2 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">
+      <h5 class="font-bold text-base leading-7 py-2.5 text-black">Policies</h5>
+      <% policies |> List.iter (fun (href, name) -> %>
+      <%s! footer_link ~href ~name %>
+      <% ); %>
     </div>
-  </div>
-</footer>
+  </footer>
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/components/secondary_footer.eml b/src/ocamlorg_frontend/components/secondary_footer.eml
deleted file mode 100644
index aa4c26fbea..0000000000
--- a/src/ocamlorg_frontend/components/secondary_footer.eml
+++ /dev/null
@@ -1,61 +0,0 @@
-let render () =
-  <footer class="flex flex-col gap-7 pt-5 mt-6 border-solid border-t-[1px] border-[#00000033]">
-    <section class="flex justify-between items-end">
-      <div>
-        <a href="<%s Url.index %>"><img class="h-8" src="<%s Ocamlorg_static.Asset.url "logo-with-name.svg" %>" alt="OCaml"></a>
-        <p class="text-base leading-6 text-legacy-lighter mt-2">Innovation. Community. Security.</p>
-      </div>
-      <div class="flex items-center gap-4 pr-4">
-        <a href="https://github.com/ocaml/ocaml"> <%s! Icons.github "w-6 h-6" %></a>
-        <a href="https://discord.gg/cCYQbqN"> <%s! Icons.discord "w-6 h-6" %></a>
-        <a href="https://twitter.com/ocamllang"><%s! Icons.twitter "w-6 h-6" %></a>
-        <a href="/feed.xml"><%s! Icons.rss "w-6 h-6" %></a>
-      </div>
-    </section>
-
-    <section class="mt-6 grid grid-cols-2 mt-6">
-      <div class="flex flex-col gap-1">
-        <div class="flex flex-col">
-          <h5 class="font-bold text-base leading-7 py-2.5 text-black">About</h5>
-          <a href="<%s Url.changelog %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Changelog</a>
-          <a href="<%s Url.releases %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Releases</a>
-          <a href="<%s Url.industrial_users %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Industrial Users</a>
-          <a href="<%s Url.academic_users %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Academic Users</a>
-          <a href="<%s Url.about %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Why OCaml?</a>
-        </div>
-
-        <div class="flex flex-col">
-          <h5 class="font-bold text-base leading-7 py-2.5 text-black">
-            Ecosystem
-          </h5>
-          <a href="<%s Url.packages %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Packages</a>
-          <a href="<%s Url.community %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Community</a>
-          <a href="<%s Url.blog %>" class="font-normal text-legacy-lighter leading-7 py-2.5"> Blog</a>
-          <a href="<%s Url.jobs %>" class="font-normal text-legacy-lighter leaading-7 py-2.5"> Jobs</a>
-        </div>
-      </div>
-
-      <div class="flex flex-col">
-        <h5 class="font-bold text-base leading-7 py-2.5 text-black">Resources</h5>
-        <a href="<%s Url.install %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Install OCaml</a>
-        <a href="<%s Url.getting_started %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Get Started</a>
-        <a href="<%s Url.platform %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Platform Tools</a>
-        <a href="<%s Url.manual %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Language Manual</a>
-        <a href="<%s Url.api %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Standard Library API</a>
-        <a href="<%s Url.books %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Books</a>
-        <a href="<%s Url.exercises %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Exercises</a>
-        <a href="<%s Url.papers %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Papers</a>
-        <a href="<%s Url.playground %>" class="font-normal text-legacy-lighter leading-7 py-2.5">OCaml Playground</a>
-        <a href="<%s Url.logos %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Logo</a>
-      </div>
-    </section>
-
-    <div
-      class="flex flex-wrap gap-x-7 md:justify-between items-center py-2 border-solid border-t-[1px] border-[#00000033] bottom-0 bg-white">
-      <h5 class="font-bold text-base leading-7 py-2.5 text-black">Policies</h5>
-      <a href="<%s Url.carbon_footprint %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Carbon Footprint</a>
-      <a href="<%s Url.governance %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Governance</a>
-      <a href="<%s Url.privacy_policy %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Privacy</a>
-      <a href="<%s Url.code_of_conduct %>" class="font-normal text-legacy-lighter leading-7 py-2.5">Code Of Conduct</a>
-    </div>
-  </footer>
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/dune b/src/ocamlorg_frontend/dune
index 0c7d066952..4bfee125d8 100644
--- a/src/ocamlorg_frontend/dune
+++ b/src/ocamlorg_frontend/dune
@@ -240,14 +240,6 @@
   (target footer.ml)
   (action
    (run %{bin:dream_eml} %{dep:footer.eml} --workspace %{workspace_root})))
- (rule
-  (target secondary_footer.ml)
-  (action
-   (run
-    %{bin:dream_eml}
-    %{dep:secondary_footer.eml}
-    --workspace
-    %{workspace_root})))
  (rule
   (target forms.ml)
   (action
diff --git a/src/ocamlorg_frontend/layouts/layout.eml b/src/ocamlorg_frontend/layouts/layout.eml
index 284dce78a3..be3e41404e 100644
--- a/src/ocamlorg_frontend/layouts/layout.eml
+++ b/src/ocamlorg_frontend/layouts/layout.eml
@@ -103,4 +103,4 @@ inner =
     </body>
   </html>
 
-let render = base ~footer_html:(Footer.render ())
+let render = base ~footer_html:(Footer.primary_footer ())
diff --git a/src/ocamlorg_frontend/layouts/learn_layout.eml b/src/ocamlorg_frontend/layouts/learn_layout.eml
index 6b6358f6d6..d83c9c42f8 100644
--- a/src/ocamlorg_frontend/layouts/learn_layout.eml
+++ b/src/ocamlorg_frontend/layouts/learn_layout.eml
@@ -159,7 +159,7 @@ inner_html
 
       <div class="flex-1 z-0 z- min-w-0 lg:pt-6 <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">
         <%s! inner_html %>
-        <%s! Secondary_footer.render () %>
+        <%s! Footer.secondary_footer () %>
       </div>
       <div class="hidden xl:block top-0 sticky h-screen overflow-auto lg:pt-6">
         <div class="<%s Option.fold ~none:"" ~some:(fun _ -> "w-60 lg:pb-72") right_sidebar_html %>">
diff --git a/src/ocamlorg_frontend/layouts/package_layout.eml b/src/ocamlorg_frontend/layouts/package_layout.eml
index 9c2a1e50cd..452273f97b 100644
--- a/src/ocamlorg_frontend/layouts/package_layout.eml
+++ b/src/ocamlorg_frontend/layouts/package_layout.eml
@@ -116,7 +116,7 @@ Layout.base
 
         <div class="flex-1 z-0 z- min-w-0 pt-6">
           <%s! inner %>
-          <%s! Secondary_footer.render ()  %>
+          <%s! Footer.secondary_footer ()  %>
         </div>
         <% (if right_sidebar_html <> "" then %>
         <div class="hidden xl:flex top-0 sticky h-screen flex-col w-60 overflow-auto md:pb-24">