From 0a3a5c3a6cbf6f9d99456562dbfc07dd4d18a7a3 Mon Sep 17 00:00:00 2001
From: Thibaut Mattio <thibaut.mattio@gmail.com>
Date: Thu, 13 Oct 2022 08:32:22 +0200
Subject: [PATCH] Update homepage for OCaml 5.0 beta release (#598)

Co-authored-by: David Allsopp <david.allsopp@metastack.com>
---
 .../template/layout_template.eml              |  2 +-
 src/ocamlorg_frontend/layouts/layout.eml      | 21 ++++++++++++++++-
 src/ocamlorg_frontend/pages/home.eml          | 23 ++++++++++---------
 3 files changed, 33 insertions(+), 13 deletions(-)
diff --git a/src/dream_dashboard/template/layout_template.eml b/src/dream_dashboard/template/layout_template.eml
index 9c5ec2e75..323fc37bc 100644
--- a/src/dream_dashboard/template/layout_template.eml
+++ b/src/dream_dashboard/template/layout_template.eml
@@ -198,7 +198,7 @@ let render ~prefix ~title ~nav inner =
           <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-gray-800">
             <button
               type="button"
-              class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+              class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-600"
               @click="open = true"
             >
               <span class="sr-only">Open sidebar</span>
diff --git a/src/ocamlorg_frontend/layouts/layout.eml b/src/ocamlorg_frontend/layouts/layout.eml
index d3969ed18..5ddf106f9 100644
--- a/src/ocamlorg_frontend/layouts/layout.eml
+++ b/src/ocamlorg_frontend/layouts/layout.eml
@@ -1,4 +1,4 @@
-let render ?(use_swiper=false) ?(wide=false) ?description ?styles ~title ?canonical inner =
+let render ?(use_swiper=false) ?(banner = false) ?(wide=false) ?description ?styles ~title ?canonical inner =
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -39,6 +39,25 @@ let render ?(use_swiper=false) ?(wide=false) ?description ?styles ~title ?canoni
   </head>
 
   <body class="light">
+    <% if banner then ( %>
+    <div class="relative bg-primary-600">
+      <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
+        <div class="pr-16 sm:px-16 sm:text-center">
+          <p class="font-medium text-white">
+            <span class="md:hidden">OCaml 5.0 is in beta!</span>
+            <span class="hidden md:inline">OCaml 5.0 is beta! OCaml 5.0 is the next major release of OCaml, which comes with support for shared-memory parallelism through domains and direct-style concurrency through algebraic effects!</span>
+            <span class="block sm:ml-2 sm:inline-block">
+              <a href="<%s Url.news_post "ocaml-5.0.beta1" %>" class="font-bold text-white underline">
+                Try it now
+                <span aria-hidden="true"> &rarr;</span>
+              </a>
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <% ); %>
+    
     <%s! Header.render ~wide () %>
 
     <main><%s! inner %></main>
diff --git a/src/ocamlorg_frontend/pages/home.eml b/src/ocamlorg_frontend/pages/home.eml
index 92aab411e..780f65452 100644
--- a/src/ocamlorg_frontend/pages/home.eml
+++ b/src/ocamlorg_frontend/pages/home.eml
@@ -1,6 +1,7 @@
 let render () =
 Layout.render
 ~use_swiper:true
+~banner:true
 ~title:"Welcome to a World of OCaml"
 ~description:"OCaml is a general-purpose, industrial-strength programming language with an emphasis on expressiveness and safety."
 ~canonical:"" @@
@@ -36,17 +37,17 @@ Layout.render
           <div style="flex: 1 1 50%" class="py-2 px-6 text-white text-opacity-50 overflow-auto">
             <div class="text-left overflow-auto">
               <pre id="output" class="flex flex-col w-full code-preview text-white text-sm space-y-1 font-medium">
-                  <span><span class="text-blue-500 ">let</span> <span class="text-code-yellow ">square</span> x = x * x</span>
-                  <span><i class="text-gray-400 ">val square : int -> int = < fun ></i></span>
-                  <span>square 3</span>
-                  <span><i class="text-gray-400 ">- : int = 9</i></span>
-                  <span><span class="text-blue-500 ">let rec</span> <span class="text-code-yellow ">fac</span> x =</span>
-                  <span><span class="text-blue-500  ml-4">if</span> x <= 1 <span class="text-blue-500 ">then</span> 1 <span class="text-blue-500">else</span> x * fac (x - 1)</span></span>
-                  <span><i class="text-gray-400">val fac : int -> int = < fun ></i></span>
-                  <span>fac 5</span>
-                  <span><i class="text-gray-400 ">- : int = 120</i></span>
-                  <span>square 120</span>
-                  <span><i class="text-gray-400">- : int = 14400</i></span>
+<code><span><span class="text-blue-500 ">let</span> <span class="text-code-yellow ">square</span> x = x * x</span>
+<span><i class="text-gray-400 ">val square : int -> int = < fun ></i></span>
+<span>square 3</span>
+<span><i class="text-gray-400 ">- : int = 9</i></span>
+<span><span class="text-blue-500 ">let rec</span> <span class="text-code-yellow ">fac</span> x =</span>
+<span><span class="text-blue-500  ml-4">if</span> x <= 1 <span class="text-blue-500 ">then</span> 1 <span class="text-blue-500">else</span> x * fac (x - 1)</span></span>
+<span><i class="text-gray-400">val fac : int -> int = < fun ></i></span>
+<span>fac 5</span>
+<span><i class="text-gray-400 ">- : int = 120</i></span>
+<span>square 120</span>
+<span><i class="text-gray-400">- : int = 14400</i></span></code>
               </pre>
             </div>
           </div>
