-
"p-6 lg:px-0 w-80 lg:w-72 lg:px-0 lg:pt-6 lg:pb-72") left_sidebar_html %>"
- x-show="sidebar" x-transition:enter="transition duration-200 ease-out"
- x-transition:enter-start="-translate-x-full" x-transition:leave="transition duration-100 ease-in"
- x-transition:leave-end="-translate-x-full">
- <%s! Option.value ~default:"" left_sidebar_html %>
-
+
+
- <%s! Toc.script %>
+ <%s! Toc.script %>
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/pages/learn.eml b/src/ocamlorg_frontend/pages/learn.eml
index 076cc3a7a3..2dce9b18d9 100644
--- a/src/ocamlorg_frontend/pages/learn.eml
+++ b/src/ocamlorg_frontend/pages/learn.eml
@@ -3,7 +3,7 @@ let render
~(books : Data.Book.t list)
~(latest_version : string)
=
-Learn_layout.render
+Learn_layout.overview_render
~title:"Learn OCaml"
~description:"Getting started with the OCaml programming language. Read the official tutorials, exercices, and language manual."
~canonical:Url.learn
@@ -11,71 +11,124 @@ Learn_layout.render
~left_sidebar_html:None
~right_sidebar_html:None
~current:Overview @@
- "p-6 lg:px-0 w-80 lg:w-72 lg:px-0 lg:pt-6 lg:pb-72") left_sidebar_html %>"
+ x-show="sidebar" x-transition:enter="transition duration-200 ease-out"
+ x-transition:enter-start="-translate-x-full" x-transition:leave="transition duration-100 ease-in"
+ x-transition:leave-end="-translate-x-full">
+ <%s! Option.value ~default:"" left_sidebar_html %>
+
-
-
-
"w-60 lg:pb-72") right_sidebar_html %>">
- <%s! Option.value ~default:"" right_sidebar_html %>
-
+
+
+
"w-60 lg:pb-72") right_sidebar_html %>">
+ <%s! Option.value ~default:"" right_sidebar_html %>
Learn OCaml
-
- <%s! Learn_components.api_card_block latest_version %>
-
-
-
Papers
-
- Aspiring towards greater understanding of the language? Want to push the limits and discover brand new things?
- Check out papers written by leading OCaml researchers:
+
+
Learn OCaml
+
+ <%s! Learn_components.api_card_block latest_version %>
-
- <% papers |> List.iter (fun (paper : Data.Paper.t) -> %>
-
-
<%s paper.title %>
-
- <%s String.concat ", " paper.authors %>
-
- <% paper.tags |> List.iter (fun (tag : string) -> %>
-
-
- <%s tag %>
+
+
+
+ <%s! Learn_components.left_tutorial_block ~title:"GET STARTED" ~heading:"Introduction To OCaml"
+ ~description:"Install OCaml and gain a high-level understanding of language features"
+ ~tutorial_links:[
+ {href = Url.tutorial "up-and-running"; title = "Get Up and Running With OCaml"};
+ {href = Url.tutorial "first-hour"; title = "Your First Day With OCaml"};
+ {href = Url.tutorial "ocaml-on-windows"; title = "OCaml On Windows"}
+ ]
+ ~see_more:{href = Url.getting_started; title = "Get Started"}
+ "bg-learn-area-dark-green"
+ %>
+ <%s! Learn_components.right_tutorial_block ~title:"LANGUAGE" ~heading:"The OCaml Language"
+ ~description:"An in-depth explanation of language features and data structures from the Standard Library"
+ ~tutorial_links:[
+ {href = Url.tutorial "data-types"; title = "Data Types and Matching"};
+ {href = Url.tutorial "lists"; title = "Lists"};
+ {href = Url.tutorial "if-statements-and-loops"; title = "If Statements, Loops, and Recursions"};
+ {href = Url.tutorial "modules"; title = "Modules"}
+ ]
+ ~see_more:{href = Url.learn_language; title = "See More Language Tutorials"}
+ "bg-[#0E2A49]"
+ %>
+
+
+
+ <%s! Learn_components.left_tutorial_block ~title:"GUIDES" ~heading:"Practical-Minded Tutorials and Guides"
+ ~description:"How to solve real-world problems in OCaml"
+ ~tutorial_links:[
+ {href = Url.tutorial "formatting-text"; title = "Formatting and Wrapping Text"};
+ {href = Url.tutorial "debugging"; title = "Debugging"};
+ {href = Url.tutorial "error-handling"; title = "Error Handling"};
+ {href = Url.tutorial "profiling"; title = "Profiling"}
+ ]
+ ~see_more:{href = Url.learn_guides; title = "See More Guides"}
+ "bg-learn-area-orange"
+ %>
+ <%s! Learn_components.right_tutorial_block ~title:"PLATFORM" ~heading:"The OCaml Platform"
+ ~description:"Learn to leverage the tooling around OCaml and create your own projects and libraries"
+ ~tutorial_links:[
+ {href = Url.tutorial "bootstrapping-a-dune-project"; title = "Bootstrapping a Project"};
+ {href = Url.tutorial "managing-dependencies"; title = "Managing Dependencies"};
+ {href = Url.tutorial "install-a-specific-ocaml-compiler-version"; title = "Install a Specific Compiler Version"};
+ {href = Url.tutorial "setting-up-vscode"; title = "Setting Up VSCode"}
+ ]
+ ~see_more:{href = Url.platform; title = "See More Tooling Tutorials"}
+ "bg-[#040113]"
+ %>
+
+
+
-
- View all papers
- <%s! Icons.chevron_right "h-5 w-5" %>
-
-
+
+
+ View all papers
+ <%s! Icons.chevron_right "h-5 w-5" %>
- <% ); %>
Papers
+
+ Aspiring towards greater understanding of the language? Want to push the limits and discover brand new things?
+ Check out papers written by leading OCaml researchers:
+
+
+ <% papers |> List.iter (fun (paper : Data.Paper.t) -> %>
+
+
+
+ <% ); %>
+ <%s paper.title %>
+
+ <%s String.concat ", " paper.authors %>
+
+ <% paper.tags |> List.iter (fun (tag : string) -> %>
+
- <% ); %>
-
+ <%s tag %>
+
+ <% ); %>
-
Recommended Books
-
- What experts programmers and researchers are saying about OCaml, from the beginner level to the more advanced topics.
-
-
- <% books |> List.iter (fun (item : Data.Book.t) -> %>
-
- 
-
diff --git a/tailwind.config.js b/tailwind.config.js
index bc1263d29b..1b7c64727c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -56,6 +56,7 @@ module.exports = {
"search-term-highlight": "rgb(221, 232, 251)",
"learn-area-orange": "#C34711",
"learn-area-light-blue": "rgba(211, 213, 249, 0.60)",
+ "learn-area-dark-green": "rgba(6, 112, 101, 1)",
transparent: "transparent",
@@ -141,7 +142,7 @@ module.exports = {
},
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
- mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
+ mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono]
},
outline: {
primary: "2px solid #EE6A1A"
- <%s item.title %>
- <% (match item.rating with | None -> () | Some rating -> %>
-
- <% List.init rating (fun _ -> ()) |> List.iter (fun () -> %>
- <%s! Icons.star_2 "h-6 w-6 text-yellow-300" %>
- <% ); %> <% List.init (5 - rating) (fun _ -> ()) |> List.iter (fun () -> %>
- <%s! Icons.star_2 "h-6 w-6 text-gray-300" %>
+
-
- See all Books
- <%s! Icons.chevron_right "h-5 w-5" %>
-
+
+
+ See all Books
+ <%s! Icons.chevron_right "h-5 w-5" %>
- <% ); %>
Recommended Books
+
+ What experts programmers and researchers are saying about OCaml, from the beginner level to the more advanced topics.
+
+
+ <% books |> List.iter (fun (item : Data.Book.t) -> %>
+
+
+
+
<% ); %>
+
+ <%s item.title %>
+ <% (match item.rating with | None -> () | Some rating -> %>
+
+ <% List.init rating (fun _ -> ()) |> List.iter (fun () -> %>
+ <%s! Icons.star_2 "h-6 w-6 text-yellow-300" %>
+ <% ); %> <% List.init (5 - rating) (fun _ -> ()) |> List.iter (fun () -> %>
+ <%s! Icons.star_2 "h-6 w-6 text-gray-300" %>
+ <% ); %>
+
<% ); %>
-