Skip to content

Commit

Permalink
Component for tutorial block according to Learn Area Redesign (#1387)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaySayo
SaySayo authored Aug 22, 2023
1 parent 1c51276 commit d964447
Show file tree
Hide file tree
Showing 4 changed files with 308 additions and 147 deletions.
198 changes: 127 additions & 71 deletions src/ocamlorg_frontend/components/learn_components.eml
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,127 @@
let skill_tag
difficulty
class_
=
match difficulty with
| Some "beginner" ->
<div class="<%s class_ %> px-2 py-1 inline-block bg-teal-700 rounded-3xl border-2 border-teal-700 font-normal text-center text-white"> Beginner </div>
| Some "intermediate" ->
<div class="<%s class_ %> px-2 py-1 inline-block bg-[#040113] rounded-3xl border-2 border-[#040113] font-normal text-center text-white"> Intermediate </div>
| Some "advanced" ->
<div class="<%s class_ %> px-2 py-1 inline-block bg-primary-700 rounded-3xl border-2 border-primary-700 font-normal text-center text-white"> Advanced </div>
| None ->
<></>
| Some _ ->
<></>

let download_icon class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75" />
</svg>

let command_line_icon class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>

let install_card
latest_version
=
<a href="<%s Url.install %>" class="h-full rounded-xl bg-learn-area-light-blue p-6 flex flex-row gap-8 max-w-[400px] sm:w-[450px] md:w-auto md:max-w-[480px] xl:max-w-[500px]">
<div class="hidden lg:flex">
<%s! download_icon "w-24 h-24 mt-8 flex-shrink-0" %>
</div>
<div class="flex flex-col ml-1 gap-x-4">
<div class="flex flex-row justify-between mr-2">
<h3 class="text-default text-2xl font-normal leading-7">Download </h3>
<span class="rounded-sm px-2 py-1 text-xs text-center text-white text-base font-normal bg-blue-700 hidden sm:flex"> Version <%s latest_version %> </span>
</div>
<p class="mt-3 flex-grow text-default text-md font-normal leading-7">
Effortlessly download, install, and set up OCaml! </p>
<div href="<%s Url.install %>" class="mt-4 flex btn btn-md px-2 w-48 bg-learn-area-orange text-white font-normal">
<span>Install OCaml</span>
<%s! Icons.chevron_right "h-5 w-5" %>
</div>
</div>
</a>

let standard_lib_card
=
<a href="<%s Url.api %>" class="h-full rounded-xl bg-learn-area-light-blue p-6 pr-8 flex flex-row gap-8 max-w-[400px] sm:w-[450px] md:w-auto md:max-w-[480px] xl:max-w-[500px]">
<div class="hidden lg:flex">
<%s! command_line_icon "w-24 h-24 mt-8 flex-shrink-0" %>
</div>
<div class="flex flex-col ml-1 gap-x-4">
<h3 class="text-default text-2xl font-normal leading-7">Standard Library API </h3>
<p class="mt-3 flex-grow text-default text-md font-normal max-w-prose leading-7">
Searchable index of values, types, modules, etc. in Stdlib. </p>
<div href="<%s Url.api %>" class="mt-4 w-60 btn px-6 btn-md btn-secondary md:mt-6">
<span>Standard Library API</span>
<%s! Icons.chevron_right "h-5 w-5" %>
</div>
</div>
</a>

let api_card_block
latest_version
=
<div class="flex flex-col items-center gap-4 md:auto-rows-max md:grid md:grid-cols-2 lg:justify-items-center">
<%s! install_card latest_version %>
<%s! standard_lib_card %>
</div>
let skill_tag
difficulty
class_
=
match difficulty with
| Some "beginner" ->
<div class="<%s class_ %> px-2 py-1 inline-block bg-teal-700 rounded-3xl border-2 border-teal-700 font-normal text-center text-white"> Beginner </div>
| Some "intermediate" ->
<div class="<%s class_ %> px-2 py-1 inline-block bg-[#040113] rounded-3xl border-2 border-[#040113] font-normal text-center text-white"> Intermediate </div>
| Some "advanced" ->
<div class="<%s class_ %> px-2 py-1 inline-block bg-primary-700 rounded-3xl border-2 border-primary-700 font-normal text-center text-white"> Advanced </div>
| None ->
<></>
| Some _ ->
<></>

let download_icon class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75" />
</svg>

let command_line_icon class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>

let install_card
latest_version
=
<a href="<%s Url.install %>" class="h-full bg-learn-area-light-blue self-center md:justify-self-end p-6 flex flex-row gap-8 max-w-[400px] sm:w-[450px] md:w-auto md:max-w-[480px] xl:max-w-[500px]">
<div class="hidden lg:flex">
<%s! download_icon "w-24 h-24 mt-8 flex-shrink-0" %>
</div>
<div class="flex flex-col ml-1 gap-x-4">
<div class="flex flex-row justify-between mr-2">
<h3 class="text-default text-2xl font-normal leading-7">Download </h3>
<span class="rounded-sm px-2 py-1 text-xs text-center text-white text-base font-normal bg-[#0E2A49] hidden sm:flex"> Version <%s latest_version %> </span>
</div>
<p class="mt-3 flex-grow text-default text-md font-normal leading-7">
Effortlessly download, install, and set up OCaml! </p>
<div href="<%s Url.install %>" class="mt-4 flex btn btn-md px-2 w-48 bg-learn-area-orange text-white font-normal">
<span>Install OCaml</span>
<%s! Icons.chevron_right "h-5 w-5" %>
</div>
</div>
</a>

let standard_lib_card
=
<a href="<%s Url.api %>" class="h-full bg-learn-area-light-blue p-6 pr-8 flex flex-row gap-8 max-w-[400px] self-center sm:w-[450px] md:justify-self-start md:w-auto md:max-w-[480px] xl:max-w-[500px]">
<div class="hidden lg:flex">
<%s! command_line_icon "w-24 h-24 mt-8 flex-shrink-0" %>
</div>
<div class="flex flex-col ml-1 gap-x-4">
<h3 class="text-default text-2xl font-normal leading-7">Standard Library API </h3>
<p class="mt-3 flex-grow text-default text-md font-normal max-w-prose leading-7">
Searchable index of values, types, modules, etc. in Stdlib. </p>
<div href="<%s Url.api %>" class="mt-4 w-60 btn px-6 btn-md btn-secondary md:mt-6">
<span>Standard Library API</span>
<%s! Icons.chevron_right "h-5 w-5" %>
</div>
</div>
</a>

let api_card_block
latest_version
=
<div class="flex flex-col gap-10 md:auto-rows-max md:grid md:grid-cols-2">
<%s! install_card latest_version %>
<%s! standard_lib_card %>
</div>

type link = {href : string; title : string}

let tutorial_block_content
~title
~heading
~description
~(tutorial_links: link list)
~(see_more: link)
=
<div class="w-full flex flex-col h-full max-w-sm md:max-w-none md:w-96">
<div class="mt-4 text-white text-sm text-left font-medium leading-7 tracking-widest"> <%s title %> </div>
<h2 class="mt-2 text-white text-2xl text-left font-normal leading-7"> <%s heading %> </h2>
<div class="mt-4 text-white text-left text-md font-normal leading-7 max-w-prose"> <%s description %> </div>
<ul class="flex gap-4 flex-col flex-grow mt-3 items-center">
<% tutorial_links |> List.iter (fun link -> %>
<li class="w-full">
<a href="<%s link.href %>" class="block bg-default rounded-md py-3 px-6 text-primary-700 text-center text-md font-bold">
<%s link.title %>
</a>
</li>
<% ); %>
</ul>
<a href="<%s see_more.href %>" class="flex gap-4 mt-4 text-white text-md font-bold inline-flex items-center underline leading-10">
<%s see_more.title %>
<%s! Icons.arrow_small_right "h-6 w-6" %>
</a>
</div>

let left_tutorial_block
~title
~heading
~description
~(tutorial_links: link list)
~see_more
class_
=
<div class="<%s class_ %> md:w-1/2">
<div class="flex justify-center h-full p-4 lg:justify-end lg:pr-20">
<%s! tutorial_block_content ~title ~heading ~description ~tutorial_links ~see_more %>
</div>
</div>

let right_tutorial_block
~title
~heading
~description
~(tutorial_links: link list)
~see_more
class_
=
<div class="<%s class_ %> md:w-1/2">
<div class="flex h-full justify-center p-4 lg:justify-start lg:pl-20">
<%s! tutorial_block_content ~title ~heading ~description ~tutorial_links ~see_more %>
</div>
</div>
83 changes: 67 additions & 16 deletions src/ocamlorg_frontend/layouts/learn_layout.eml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,58 @@ link_html
<%s! extra_html %>
</div>

let overview_render
?use_swiper
?styles
~title
~description
~canonical
?active_top_nav_item
~(left_sidebar_html: string option)
~(right_sidebar_html: string option)
~current
inner_html
=
Layout.render
?use_swiper
?styles
~title
~description
~canonical
~footer_html:(Fixed_footer.render ())
?active_top_nav_item @@
<%s! tabs ~current %>
<div class="bg-default dark:bg-dark-default" x-data="{ sidebar: window.matchMedia('(min-width: 64em)').matches, showOnMobile: false}" @resize.window="sidebar = window.matchMedia('(min-width: 64em)').matches" x-on:close-sidebar="sidebar=window.matchMedia('(min-width: 64em)').matches">
<% if left_sidebar_html != None then ( %>
<button :title='(sidebar? "close" : "open")+" sidebar"' class="flex items-center bg-primary-600 p-3 z-30 rounded-full text-white shadow-md bottom-20 fixed lg:hidden right-10"
x-on:click="sidebar = ! sidebar">
<%s! Icons.sidebar_menu "h-8 w-8" %>
<span class="hidden md:flex font-semibold px-2">side menu</span>
</button>
<div class="fixed z-10 inset-0 bg-contrast/20 backdrop-blur-sm lg:hidden"
:class='sidebar ? "" : "hidden"' aria-hidden="true" x-on:click="sidebar = ! sidebar"></div>
<% ); %>
<div class="flex flex-col lg:flex-row">
<div
class="z-20 bg-default dark:bg-dark-default flex-col fixed h-screen overflow-auto lg:flex left-0 top-0 lg:sticky <%s Option.fold ~none:"" ~some:(fun _ -> "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 %>
</div>

<div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 lg:pb-[70vh] <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">
<%s! inner_html %>
</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 %>">
<%s! Option.value ~default:"" right_sidebar_html %>
</div>
</div>
</div>
</div>
<%s! Toc.script %>

let render
?use_swiper
?styles
Expand Down Expand Up @@ -98,24 +150,23 @@ inner_html
:class='sidebar ? "" : "hidden"' aria-hidden="true" x-on:click="sidebar = ! sidebar"></div>
<% ); %>
<div class="container-fluid wide pt-10">
<div class="flex flex-col lg:flex-row lg:gap-6 xl:gap-12">
<div
class="z-20 bg-default dark:bg-dark-default flex-col fixed h-screen overflow-auto lg:flex left-0 top-0 lg:sticky <%s Option.fold ~none:"" ~some:(fun _ -> "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 %>
</div>
<div class="flex flex-col lg:flex-row lg:gap-6 xl:gap-12">
<div
class="z-20 bg-default dark:bg-dark-default flex-col fixed h-screen overflow-auto lg:flex left-0 top-0 lg:sticky <%s Option.fold ~none:"" ~some:(fun _ -> "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 %>
</div>

<div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 lg:pb-[70vh] <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">
<%s! inner_html %>
</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 %>">
<%s! Option.value ~default:"" right_sidebar_html %>
</div>
<div class="flex-1 z-0 z- min-w-0 lg:pt-6 pb-12 lg:pb-[70vh] <%s! if right_sidebar_html != None then "lg:max-w-3xl" else "" %>">
<%s! inner_html %>
</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 %>">
<%s! Option.value ~default:"" right_sidebar_html %>
</div>
</div>
</div>
</div>
<%s! Toc.script %>
<%s! Toc.script %>
Loading

0 comments on commit d964447

Please sign in to comment.