Add governance section

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com> Co-authored-by: MirzaBabarBaig <mirza.babar35@gmail.com> Co-authored-by: Cuihtlauac Alvarado <cuihtlauac@tarides.com> Co-authored-by: Sabine Schmaltz <sabineschmaltz@gmail.com> Co-authored-by: Thibaut Mattio <thibaut.mattio@gmail.com>
ocaml · Jun 25, 2023 · 0395408 · 0395408
1 parent 2c85b71
commit 0395408
Show file tree

Hide file tree

Showing 18 changed files with 966 additions and 5 deletions.
diff --git a/data/governance.yml b/data/governance.yml
diff --git a/src/global/url.ml b/src/global/url.ml
@@ -58,9 +58,11 @@ let blog_post v = "/blog/" ^ v
 let news = "/news"
 let news_post v = "/news/" ^ v
 let jobs = "/jobs"
+let governance = "/governance"
+let governance_team id = "/governance/" ^ id
 let carbon_footprint = "/policies/carbon-footprint"
 let privacy_policy = "/policies/privacy-policy"
-let governance = "/policies/governance"
+let governance_policy = "/policies/governance"
 let code_of_conduct = "/policies/code-of-conduct"
 let playground = "/play"
 let papers = "/papers"

diff --git a/src/ocamlorg_data/data.ml b/src/ocamlorg_data/data.ml
@@ -165,3 +165,10 @@ module Code_example = struct
 
   let get title = List.find (fun x -> String.equal x.title title) all
 end
+
+module Governance = struct
+  include Governance
+
+  let get_by_id id =
+    List.find_opt (fun x -> String.equal id x.id) (teams @ working_groups)
+end
diff --git a/src/ocamlorg_data/data.mli b/src/ocamlorg_data/data.mli
@@ -400,3 +400,36 @@ module Code_example : sig
 
   val get : string -> t
 end
+
+module Governance : sig
+  module Member : sig
+    type t = { name : string; github : string; role : string }
+
+    val compare : t -> t -> int
+  end
+
+  type contact_kind = GitHub | Email | Discord | Chat
+  type contact = { name : string; link : string; kind : contact_kind }
+
+  type dev_meeting = {
+    date : string;
+    time : string;
+    link : string;
+    invite : string;
+    notes : string;
+  }
+
+  type team = {
+    id : string;
+    name : string;
+    description : string;
+    contacts : contact list;
+    dev_meeting : dev_meeting option;
+    members : Member.t list;
+    subteams : team list;
+  }
+
+  val teams : team list
+  val working_groups : team list
+  val get_by_id : string -> team option
+end
diff --git a/src/ocamlorg_data/dune b/src/ocamlorg_data/dune
@@ -17,6 +17,15 @@
    (run %{dep:../../tool/ood-gen/bin/gen.exe} book))))
 
 (rule
+ (deps ../../tool/ood-gen/bin/gen.exe)
+ (target governance.ml)
+ (action
+  (with-stdout-to
+   %{target}
+   (run %{dep:../../tool/ood-gen/bin/gen.exe} governance))))
+
+(rule
+ (deps ../../tool/ood-gen/bin/gen.exe)
  (target changelog.ml)
  (action
   (with-stdout-to

diff --git a/src/ocamlorg_frontend/components/icons.eml b/src/ocamlorg_frontend/components/icons.eml
@@ -41,6 +41,11 @@ let changelog class_ =
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
   </svg>
 
+let chat class_ =
+  <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+  </svg>
+
 let chevron_down class_ =
   <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -117,6 +122,11 @@ let edit class_ =
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
   </svg>
 
+let email class_ =
+  <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+  </svg>
+
 let error class_ =
   <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="currentColor" viewBox="0 0 24 24" width="24px" aria-hidden="true">
     <path d="M0 0h24v24H0V0z" fill="none"/>

diff --git a/src/ocamlorg_frontend/css/partials/governance.css b/src/ocamlorg_frontend/css/partials/governance.css
@@ -0,0 +1,15 @@
+.governance-contrast-section {
+    background: linear-gradient(270deg, #0B1528 0%, rgba(11, 21, 40, 0.958333) 53.65%, #0B1528 100%);
+}
+
+.governance-contrast-section button {
+    border: 1px solid #fff;
+    color: #fff;
+    opacity: 0.6;
+}
+
+.governance-contrast-section .gradient {
+    background: -webkit-linear-gradient(left, #EFA4F2,#0076ff, #62A8FF);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
diff --git a/src/ocamlorg_frontend/css/styles.css b/src/ocamlorg_frontend/css/styles.css
@@ -12,6 +12,7 @@
 @import "./partials/shadows.css";
 @import "./partials/tags.css";
 @import "./partials/typography.css";
+@import "./partials/governance.css";
 
 @import "./other/syntax.css";
 

diff --git a/src/ocamlorg_frontend/dune b/src/ocamlorg_frontend/dune
@@ -162,7 +162,18 @@
   (action
    (run %{bin:dream_eml} %{dep:release.eml} --workspace %{workspace_root})))
  (rule
-  (target releases.ml)
+  (targets governance.ml)
+  (deps governance.eml)
+  (action
+   (run %{bin:dream_eml} %{deps} --workspace %{workspace_root})))
+ (rule
+  (targets governance_team.ml)
+  (deps governance_team.eml)
+  (action
+   (run %{bin:dream_eml} %{deps} --workspace %{workspace_root})))
+ (rule
+  (targets releases.ml)
+  (deps releases.eml)
   (action
    (run %{bin:dream_eml} %{dep:releases.eml} --workspace %{workspace_root})))
  (rule

diff --git a/src/ocamlorg_frontend/ocamlorg_frontend.ml b/src/ocamlorg_frontend/ocamlorg_frontend.ml
@@ -37,3 +37,5 @@ let success_story = Success_story.render
 let tutorial = Tutorial.render
 let workshop = Workshop.render
 let outreachy = Outreachy.render
+let governance ~teams = Governance.render ~teams
+let governance_team team = Governance_team.render team
diff --git a/src/ocamlorg_frontend/pages/governance.eml b/src/ocamlorg_frontend/pages/governance.eml
@@ -0,0 +1,94 @@
+module MemberSet = Set.Make (Data.Governance.Member)
+
+let count_members (team : Data.Governance.team) =
+   MemberSet.cardinal (MemberSet.of_list (team.members @ List.concat (List.map (fun (team : Data.Governance.team) -> team.members) team.subteams)))
+
+let render_team_card (team : Data.Governance.team) member_label btn_class =
+  <div class="flex-col">
+    <div class="text-2xl mb-5 font-semibold flex items-center">
+      <span><%s team.name %></span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 ml-2" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    </div>
+    <div class="opacity-70 mb-4 text-lg"><%s team.description %></div>
+    <div class="font-semibold mb-6"><%i count_members team %> <%s member_label %></div>
+    <a href="<%s Url.governance_team team.id %>" class="btn <%s btn_class %>">
+      <span>Details</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+  </div>
+
+let render ~teams ~working_groups =
+Layout.render
+~title:"Governance"
+~description:"OCaml is a mature, statically-typed, functional programming language. Learn more about its rich history
+and what makes it unique." @@
+<div class="intro-section-simple">
+  <div class="container-fluid">
+    <div class="mx-auto px-4 sm:px-6">
+      <div class="">
+        <div class="sm:text-center lg:col-span-8 lg:text-center">
+          <h1 class="font-bold pb-6 text-[56px]">Governance</h1>
+          <div class="text-2xl text-body-400 pb-10">The projects running under OCaml and the awesome people
+            behind it
+          </div>
+          <a href="<%s Url.governance_policy %>"><button class="btn btn-lg mb-4 lg:mb-0">Read the Governance Policy</button></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="governance-contrast-section">
+  <div class="py-10 lg:py-28">
+    <div class="container-fluid text-white">
+      <h2 class="font-bold gradient mb-6 text-[40px]">Teams</h2>
+      <div class="text-lg">
+        See who the maintainers of the various OCaml projects are. We present a comprehensive list structured by project / purpose.
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-20 mt-16">
+        <% teams |> List.iter (fun (team : Data.Governance.team) -> %>
+        <%s! render_team_card team "maintainers" "btn-tertiary" %>
+        <% );%>
+      </div>
+    </div>
+  </div>
+</div>
+<svg width="100%" height="auto" viewBox="0 0 1600 128" fill="none" class='bg-white' xmlns="http://www.w3.org/2000/svg">
+  <rect width="1600" height="121" transform="translate(0 0.000244141)" fill="white" />
+  <circle cx="268.5" cy="68.5002" r="27.5" fill="#EE6A1A" fill-opacity="0.48" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 106L133 87.1667C267 68.3333 533 30.6667 800 30.6667C1067 30.6667 1333 68.3333 1467 87.1667L1600 106V0H1467C1333 0 1067 0 800 0C533 0 267 0 133 0H0V106Z"
+    fill="url(#paint0_linear_2087_13206)" />
+  <circle cx="200" cy="80" r="48" fill="#CC4D00" />
+  <defs>
+    <linearGradient id="paint0_linear_2087_13206" x1="1600" y1="44.6059" x2="-2.29315e-07" y2="44.6059"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#0B1528" />
+      <stop offset="0.536458" stop-color="#0B1528" stop-opacity="0.958333" />
+      <stop offset="1" stop-color="#0B1528" />
+    </linearGradient>
+  </defs>
+</svg>
+
+<div class="bg-white">
+  <div class="py-10 lg:py-28">
+    <div class="container-fluid">
+      <h2 class="font-bold text-body-600 mb-6 text-[40px]">Working groups</h2>
+      <div class="text-body-400 text-lg prose">
+        Working groups are community initiatives that gather around certain topics or a shared purpose.
+        The <a href="<%s Url.governance_policy %>">OCaml Governance Policy</a> does not apply to them. Participation is welcome and encouraged.</div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-20 mt-16">
+        <% working_groups |> List.iter (fun (wg : Data.Governance.team) -> %>
+        <%s! render_team_card wg "organiser(s)" "btn-secondary" %>
+        <% ); %>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/ocamlorg_frontend/pages/governance_team.eml b/src/ocamlorg_frontend/pages/governance_team.eml
@@ -0,0 +1,144 @@
+let contact_icon (kind : Data.Governance.contact_kind) = match kind with
+  | GitHub -> Icons.github
+  | Email -> Icons.email
+  | Discord -> Icons.discord
+  | Chat -> Icons.chat
+
+let render_team_member (member : Data.Governance.Member.t) =
+  <div class="flex space-x-2">
+    <img src="https://github.com/<%s member.github %>.png" alt="" class="h-32 w-32 mr-3 inline-block rounded-xl" />
+    <div>
+      <div class="text-white text-lg font-semibold mt-3"><%s member.name %></div>
+      <div class="text-sm text-white text-opacity-60"><%s member.role %></div>
+      <div class="mt-8 text-white text-opacity-60 items-center flex gap-1">
+        <%s! Icons.github "h-6 w-6" %>
+        <a href="https://github.com/<%s member.github %>"><%s member.github %></a>
+      </div>
+    </div>
+  </div>
+
+let render_dev_meeting (dev_meeting : Data.Governance.dev_meeting) _class =
+  <div class="gap-4 <%s _class %>">
+    <div class="flex gap-1"><%s dev_meeting.date %> - <%s dev_meeting.time %></div>
+    <div class="flex gap-4">
+      <a class="underline flex gap-1 py-2 font-semibold" href="<%s dev_meeting.notes %>">
+        <%s! Icons.document "w-6 h-6" %>
+        Notes
+      </a>
+      <a class="underline flex gap-1 py-2 font-semibold" href="<%s dev_meeting.link %>">
+        <%s! Icons.community "w-6 h-6" %>
+        Meeting Link
+      </a>
+      <a class="underline flex gap-1 py-2 font-semibold" href="<%s dev_meeting.invite %>">
+        <%s! Icons.calendar "w-6 h-6" %>
+        Calendar Invite
+      </a>
+    </div>
+  </div>
+
+let render (t : Data.Governance.team) =
+Layout.render
+~title:(Printf.sprintf "%s · OCaml Governance" t.name)
+~description:t.description @@
+<div class="intro-section-simple">
+  <div class="container-fluid">
+    <div class="mx-auto px-4 sm:px-6">
+      <div class="">
+        <div class="sm:text-center lg:col-span-8 lg:text-left">
+          <div
+            class="flex justify-start space-x-3 items-center text-primary-600 hover:underline font-semibold mb-4 h-12">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18">
+              </path>
+            </svg>
+            <a href="<%s Url.governance %>" class="hover:underline">Back to Governance</a>
+          </div>
+          <h1 class="font-bold pb-6"><%s t.name %> Governance</h1>
+          <div class="text-2xl text-body-400">
+            <%s t.description%>
+          </div>
+          <div class="space-x-4">
+            <% t.contacts |> List.iter (fun (contact : Data.Governance.contact) -> %>
+            <a class="btn btn-secondary btn-lg mt-6 gap-2" href="<%s contact.link %>" target="_blank">
+              <%s! contact_icon contact.kind "w-6 h-6" %>
+              <%s contact.name %>
+            </a>
+            <% ); %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="governance-contrast-section">
+  <div class="py-8">
+    <div class="container-fluid">
+      <% (match t.dev_meeting with | None -> () | Some dev_meeting -> %>
+      <h2 class="font-bold gradient mb-6 mt-12 md:mt-16 text-4xl">Dev Meeting</h2>
+      <%s! render_dev_meeting dev_meeting "text-white mb-6" %>
+      <% ); %>
+
+      <h2 class="font-bold gradient mb-6 mt-12 md:mt-16 text-4xl">People</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+        <%s! t.members |> List.map (fun (member : Data.Governance.Member.t) -> render_team_member member ) |> String.concat "\n" %>
+      </div>
+
+      <% (match List.length t.subteams with | 0 -> () | _ -> %>
+      <h2 class="font-bold gradient mb-6 mt-12 md:mt-16 text-4xl">Teams</h2>
+      <% ); %>
+      <div class="flex flex-col gap-12">
+        <% t.subteams |> List.iter (fun (team : Data.Governance.team) -> %>
+        <div>
+          <h3 class="gradient font-semibold text-3xl mb-4"><%s team.name %></h3>
+          <% (if List.length t.contacts > 0 then %>
+            <div class="flex gap-x-8">
+            <% team.contacts |> List.iter (fun (contact : Data.Governance.contact) -> %>
+              <a class="btn btn-tertiary gap-1" href="<%s contact.link %>" target="_blank">
+                <%s! contact_icon contact.kind "w-6 h-6" %>
+                <%s contact.name %>
+              </a>
+              <% ); %>
+            </div>
+            <% ); %>
+          <% (match team.dev_meeting with | None -> () | Some dev_meeting -> %>
+          <div class="py-4 px-6 mt-6 bg-white inline-block rounded-xl">
+            <h4 class="font-semibold mb-4 text-2xl">Dev Meeting</h3>
+            <%s! render_dev_meeting dev_meeting "" %>
+          </div>
+          <% ); %>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 mt-6">
+            <%s! team.members |> List.map (fun (member : Data.Governance.Member.t) -> render_team_member member ) |> String.concat "\n" %>
+          </div>
+        </div>
+        <% ); %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<svg width="100%" height="auto" viewBox="0 0 1600 290" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_2155_13483)">
+    <rect width="1600" height="290" fill="white" />
+    <circle cx="1467.5" cy="161.5" r="27.5" fill="#EE6A1A" fill-opacity="0.48" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M-197.883 348.583C-256.706 318.298 -243.028 211.404 -236.431 120.668C-229.671 27.6854 -231.887 -77.8672 -160.394 -167.018C-90.5503 -254.114 0.696877 -256.036 81.5626 -275.871C142.463 -290.808 195.859 -289.719 238.964 -264.971C285.481 -238.263 331.333 -204.686 330.34 -133.039C329.284 -56.8512 291.867 36.2961 233.716 113.587C177.662 188.092 104.669 221.961 34.5125 260.16C-47.0471 304.567 -140.846 377.947 -197.883 348.583Z"
+      fill="#EE6A1A" fill-opacity="0.1" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M0 52.9655L67 48.5517C133 44.1379 267 35.3103 400 44.1379C533 52.9655 667 79.4484 800 114.759C933 150.069 1067 194.208 1200 198.621C1333 203.035 1467 167.725 1533 150.069L1600 132.414V-0.000243594H1533C1467 -0.000243594 1333 -0.000243594 1200 -0.000243594C1067 -0.000243594 933 -0.000243594 800 -0.000243594C667 -0.000243594 533 -0.000243594 400 -0.000243594C267 -0.000243594 133 -0.000243594 67 -0.000243594H0V52.9655Z"
+      fill="url(#paint0_linear_2155_13483)" />
+    <circle cx="1523" cy="148" r="48" fill="#CC4D00" />
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear_2155_13483" x1="1600" y1="115.259" x2="-2.29315e-07" y2="115.259"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#0B1528" />
+      <stop offset="0.536458" stop-color="#0B1528" stop-opacity="0.958333" />
+      <stop offset="1" stop-color="#0B1528" />
+    </linearGradient>
+    <clipPath id="clip0_2155_13483">
+      <rect width="1600" height="290" fill="white" />
+    </clipPath>
+  </defs>
+</svg>