-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Component for tutorial block according to Learn Area Redesign (#1387)
- Loading branch information
Showing
4 changed files
with
308 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.