-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathlearn_components.eml
233 lines (213 loc) · 11.6 KB
/
learn_components.eml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
type difficulty = Beginner | Intermediate | Advanced
let color_for_difficulty = function
| Beginner -> "bg-secondary dark:bg-dark-secondary"
| Intermediate -> "bg-tertiary dark:bg-dark-tertiary_lighter"
| Advanced -> "bg-primary dark:bg-dark-primary"
let string_from_difficulty = function
| Beginner -> "Beginner"
| Intermediate -> "Intermediate"
| Advanced -> "Advanced"
let skill_tag difficulty =
<div class="px-3 inline-block <%s color_for_difficulty difficulty %> rounded-3xl font-semibold text-center text-white dark:text-dark-title tracking-widest">
<%s string_from_difficulty difficulty %>
</div>
let beginner_section_icon =
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" class="fill-secondary dark:fill-dark-white"/>
</svg>
let intermediate_section_icon =
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5H18.5C21.8137 0.5 24.5 3.18629 24.5 6.5V18.5C24.5 21.8137 21.8137 24.5 18.5 24.5H6.5C3.18629 24.5 0.5 21.8137 0.5 18.5V6.5Z" class="fill-gray-700 dark:fill-dark-tertiary"/>
</svg>
let advanced_section_icon =
<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.268 1.5C12.0378 0.166665 13.9622 0.166667 14.7321 1.5L25.1244 19.5C25.8942 20.8333 24.9319 22.5 23.3923 22.5H2.60769C1.06809 22.5 0.105844 20.8333 0.875645 19.5L11.268 1.5Z" class="fill-primary dark:fill-dark-primary"/>
</svg>
let little_down_arrow_icon =
<svg width="18" height="32" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 16.6L9 20.6M9 20.6L5 16.6M9 20.6V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
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>
type link = {href : string; title : string}
let block_heading ~icon ~title ~heading =
<div class="pt-4 text-content dark:text-dark-content text-sm font-medium leading-7 tracking-widest flex gap-2 items-center">
<%s! icon %>
<%s title %>
</div>
<h2 class="overflow-hidden mt-2 text-title dark:text-dark-title text-2xl font-bold leading-7"><%s heading %></h2>
let block_container ~icon ~title ~heading inner_html =
<div class="md:h-full">
<div class="max-w-sm md:h-full md:max-w-full md:w-[32rem] flex flex-col">
<%s! block_heading ~icon ~title ~heading %>
<%s! inner_html %>
</div>
</div>
let tutorial_block ~icon ~title ~heading ~description ~(tutorial_links: link list) =
block_container ~icon ~title ~heading @@
<div class="mt-4 text-content dark:text-dark-content text-base font-normal h-14 text-ellipsis overflow-hidden leading-7 max-w-prose"> <%s description %> </div>
<ul class="flex flex-col grow gap-4 mt-5 md:h-60">
<% tutorial_links |> List.iter (fun link -> %>
<li class="w-full">
<a href="<%s link.href %>" class="bg-white dark:bg-dark-card text-title dark:text-dark-title hover:bg-primary dark:hover:bg-dark-primary hover:text-white dark:hover:text-dark-title drop-shadow hover:drop-shadow-xl flex gap-2 border-primary dark:border-dark-primary border-2 rounded-lg p-2.5 text-md font-bold">
<span class="grow"><%s link.title %></span>
<%s! Icons.arrow_right_circle "w-6 h-6" %>
</a>
</li>
<% ); %>
</ul>
let book_cover ~free cover_src =
<div class="relative">
<% (if free then %>
<div class="absolute -mt-8 ml-3 w-16 h-16">
<div class="bg-primary dark:bg-dark-primary rotate-[-10deg] rounded-full w-16 h-16 flex items-center justify-center" style="filter: drop-shadow(-4px -2px 4px rgb(0 0 0 / 0.25));">
<div class="text-center text-white text-base font-bold leading-7 tracking-wide">
FREE
</div>
</div>
</div>
<% ); %>
<img src="<%s Rocqproverorg_static.Media.url cover_src %>"
class="w-full border z-10"
alt="">
</div>
let book_recommendation ~(link : link) (book: Data.Book.t) =
let icon_for_difficulty difficulty = match difficulty with
| Data.Book.Beginner -> beginner_section_icon
| Intermediate -> intermediate_section_icon
| Advanced -> advanced_section_icon
in
let first_link = List.hd book.links in
block_container ~icon:(icon_for_difficulty book.difficulty) ~title:"RECOMMENDED BOOK" ~heading:book.title @@
<div class="grow mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 pt-6">
<div class="flex flex-col">
<a href="<%s first_link.uri %>" target="_blank">
<%s! book_cover ~free:(book.pricing = "free") book.cover %>
</a>
</div>
<div>
<%s! skill_tag (match book.difficulty with | Data.Book.Beginner -> Beginner | Intermediate -> Intermediate | Advanced -> Advanced) %>
<% (match book.recommendation with None -> () | Some recommendation -> %>
<p class="mt-2 text-content dark:text-dark-content text-sm font-normal whitespace-normal max-w-prose"> <%s recommendation %> </p>
<% ); %>
<div class="pt-4">
<% book.links |> List.iter (fun (link: Data.Book.link) -> %>
<a href="<%s link.uri %>" class="flex gap-2 text-primary dark:text-dark-title hover:underline dark:hover:text-dark-primary items-center leading-8" target="_blank"><%s link.description %> <%s! Icons.link "h-4 w-4" %></a>
<% ); %>
</div>
</div>
</div>
<a href="<%s link.href %>" class="pt-6 w-max text-primary dark:text-dark-title hover:underline dark:underline hover:text-primary dark:hover:text-dark-primary items-center leading-10">
<%s link.title %>
</a>
let lang_manual_banner =
<a href="<%s Url.manual %>" class="block bg-gradient-to-r from-[#C54B21] dark:from-[#773E21] to-[#E18C34] dark:to-[#E7B573] hover:from-[#B63701] hover:to-[#EE8703] dark:hover:from-[#803814] dark:hover:to-[#F1B566] rounded-3xl">
<div class=" w-full items-center flex flex-col md:flex-row gap-6 py-4 px-7 md:py-4 md:pl-14 md:pr-14 lg:pr-24">
<div class="flex flex-col flex-grow my-6">
<div class="text-white text-sm font-medium tracking-widest leading-10">GUIDE</div>
<h2 class="text-white text-3xl font-bold leading-10">
Reference Manual
</h3>
<p class="mt-4 text-white font-normal max-w-xl text-base leading-7">
The reference manual is the authoritative source of documentation for the Rocq Prover. It contains a changelog describing updates to Rocq, which we recommend you read when you upgrade.
</p>
<div class="w-full md:w-80 mt-6 py-2 bg-white rounded-xl text-center text-primary dark:text-dark-primary hover:underline font-bold text-lg">
Take Me There
</div>
</div>
</div>
</a>
let exercise_card (exercise: Data.Exercise.t) =
<a class="flex flex-col p-5 card dark:dark-card" href="<%s Url.exercises %>#<%s exercise.slug %>">
<div class="flex-grow dark:text-dark-title">
<%s exercise.description %>
</div>
<div class="my-2.5">
<%s! skill_tag (match exercise.difficulty with | Data.Exercise.Beginner -> Beginner | Intermediate -> Intermediate | Advanced -> Advanced) %>
</div>
</a>
let exercises_block ~icon ~heading (exercises: Data.Exercise.t list) =
<div class="bg-background dark:bg-dark-background flex flex-col">
<div class="max-w-sm md:max-w-full lg:w-full flex flex-col">
<%s! block_heading ~icon ~title:"EXERCISES" ~heading %>
<div class="mt-6 grid gap-6 md:gap-10 md:grid-cols-2 lg:grid-cols-4">
<% exercises |> List.iter (fun (exercise: Data.Exercise.t) -> %>
<%s! exercise_card exercise %>
<% ); %>
</div>
</div>
<a href="<%s Url.exercises %>" class="pt-4 text-primary dark:text-dark-title hover:underline dark:underline hover:text-primary dark:hover:text-dark-primary items-center leading-10">
View all Exercises
</a>
</div>
let tool_card ~img_src ~title ~text ~url =
<a class="group p-5 flex flex-col card dark:bg-dark-card max-w-[32rem]" href="<%s url %>">
<h3 class="flex gap-3 text-black dark:text-dark-title text-base font-bold">
<img src="<%s! Rocqproverorg_static.Asset.url img_src %>" alt="">
<%s title %>
</h3>
<p class="text-content dark:text-dark-content py-6">
<%s text %>
</p>
<div class="flex gap-2 items-center text-sm text-primary hover:text-primary dark:text-dark-title dark:hover:text-dark-primary">
Get Started
<%s! Icons.arrow_right_circle "h-5 w-5" %></div>
</a>
let contribute_footer ~href ~description ~recommended_next_tutorials =
let render_recommended_next_tutorials ~recommended_next_tutorials =
if List.length recommended_next_tutorials > 0 then
<div class="mb-6 pt-4 px-6 border-t border-gray-200">
<h2 class="mb-4 mt-0 text-lg font-bold leading-6">Also Read:</h3>
<ul class="list-disc marker:text-primary">
<% recommended_next_tutorials |> List.iter (fun (tutorial : Data.Tutorial.t) -> %>
<li class="mb-1">
<a href='/docs/<%s tutorial.slug %>'><%s tutorial.short_title %></a>
</li>
<% ); %>
</ul>
</div>
else
""
in
<div class="my-5 pt-5">
<%s! render_recommended_next_tutorials ~recommended_next_tutorials %>
<div class="grid-cols-2 gap-4 border-t border-gray-200 md:grid">
<div class="border-b border-gray-200 px-6 pb-3 md:border-b-0 md:border-r">
<h2 class="mb-2 text-lg font-bold leading-6">Still need help?</h2>
<div class="mb-2 text-sm">
<a href="https://rocq-prover.zulipchat.com/" class="flex items-center gap-2 font-normal sm:text-lg no-underline bg-transparent cursor-pointer hover:underline">
<%s! Icons.user_group "h-5 w-5" %>
Ask the Rocq Community</a
>
</div>
<div class="mb-2 text-sm">
<a href="<%s Url.wiki %>" class="flex items-center gap-2 font-normal sm:text-lg no-underline bg-transparent cursor-pointer hover:underline">
<%s! Icons.wiki "h-5 w-5" %>
Search the Rocq Wiki</a
>
</div>
<div class="mb-2 text-sm">
<a href="https://github.com/rocq-prover/rocq-prover.org/issues/new" class="flex items-center gap-3 font-normal sm:text-lg no-underline bg-transparent cursor-pointer hover:underline">
<%s! Icons.github_issue "h-4 w-4" %>
Open an Issue</a
>
</div>
</div>
<div class="px-6 pb-3">
<h2 class="mb-2 text-lg font-bold leading-6">Help Improve Our Documentation</h2>
<p class="text-sm text-lighter leading-relaxed mb-0"><%s description %></p>
<div class="mb-5 text-sm">
<a href="<%s href %>" class="flex items-center gap-2 bg-transparent font-normal sm:text-lg no-underline hover:underline">
<%s! Icons.raised_hand "h-6 w-6" %>
Contribute</a
>
</div>
</div>
</div>
</div>