mirror of
https://github.com/roc-lang/roc.git
synced 2025-09-26 13:29:12 +00:00
112 lines
4.5 KiB
Text
112 lines
4.5 KiB
Text
app "roc-tutorial"
|
||
packages { pf: "../../../examples/static-site-gen/platform/main.roc" }
|
||
imports [
|
||
pf.Html.{ html, head, body, footer, script, div, main, p, section, h1, h2, label, ol, input, text, nav, a, li, link, meta },
|
||
pf.Html.Attributes.{ content, name, for, id, type, href, rel, lang, class, title, charset, src },
|
||
]
|
||
provides [transformFileContent] to pf
|
||
|
||
transformFileContent : Str, Str -> Str
|
||
transformFileContent = \_, htmlContent ->
|
||
Html.render (view htmlContent)
|
||
|
||
view : Str -> Html.Node
|
||
view = \htmlContent ->
|
||
html [lang "en"] [
|
||
head [] [
|
||
meta [charset "utf-8"] [],
|
||
Html.title [] [text "Roc Tutorial"],
|
||
meta [name "description", content "Learn how to use the Roc programming language."] [],
|
||
meta [name "viewport", content "width=device-width"] [],
|
||
link [rel "stylesheet", href "/site.css"] [],
|
||
link [rel "icon", href "/favicon.svg"] [],
|
||
],
|
||
body [] [
|
||
viewNavbar,
|
||
main [] [
|
||
viewTutorialStart,
|
||
text htmlContent,
|
||
],
|
||
footer [] [
|
||
text "Made by people who like to make nice things. © 2022"
|
||
]
|
||
],
|
||
script [src "/site.js"] [],
|
||
]
|
||
|
||
viewNavbar : Html.Node
|
||
viewNavbar =
|
||
div [id "top-bar"] [
|
||
nav [] [
|
||
a [class "home-link", href "/", title "The Roc Programming Language"] [text "roc"],
|
||
div [id "top-bar-links"] [
|
||
a [href "/tutorial"] [text "tutorial"],
|
||
a [href "/repl"] [text "repl"],
|
||
a [href "/builtins/Bool"] [text "docs"],
|
||
],
|
||
],
|
||
]
|
||
|
||
viewTutorialStart : Html.Node
|
||
viewTutorialStart =
|
||
div [id "tutorial-start"] [
|
||
input [id "tutorial-toc-toggle", name "tutorial-toc-toggle", type "checkbox"] [],
|
||
nav [id "tutorial-toc"] [
|
||
label [id "close-tutorial-toc", for "tutorial-toc-toggle"] [text "close"],
|
||
# TODO fix search: input [id "toc-search", type "text", placeholder "Search"] [],
|
||
ol [] tocLinks,
|
||
],
|
||
tutorialIntro,
|
||
]
|
||
|
||
tocLinks =
|
||
{ tag, value } <- List.map [
|
||
{ tag: "#installation", value: "Installation" },
|
||
{ tag: "#strings-and-numbers", value: "Strings and Numbers" },
|
||
{ tag: "#building-an-application", value: "Building an Application" },
|
||
{ tag: "#defining-functions", value: "Defining Functions" },
|
||
{ tag: "#if-then-else", value: "if-then-else" },
|
||
{ tag: "#records", value: "Records" },
|
||
{ tag: "#debugging", value: "Debugging" },
|
||
{ tag: "#tags", value: "Tags & Pattern Matching" },
|
||
{ tag: "#booleans", value: "Booleans" },
|
||
{ tag: "#lists", value: "Lists" },
|
||
{ tag: "#types", value: "Types" },
|
||
{ tag: "#crashing", value: "Crashing" },
|
||
{ tag: "#tests-and-expectations", value: "Tests and Expectations" },
|
||
{ tag: "#modules", value: "Modules" },
|
||
{ tag: "#tasks", value: "Tasks" },
|
||
{ tag: "#abilities", value: "Abilities" },
|
||
{ tag: "#appendix-advanced-concepts", value: "Advanced Concepts" },
|
||
{ tag: "#operator-desugaring-table", value: "Operator Desugaring Table" },
|
||
]
|
||
|
||
li [] [
|
||
a [href tag] [text value],
|
||
]
|
||
|
||
tutorialIntro =
|
||
div [id "tutorial-intro"] [
|
||
section [] [
|
||
h1 [] [
|
||
text "Tutorial",
|
||
label [id "tutorial-toc-toggle-label", for "tutorial-toc-toggle"] [text "contents"],
|
||
],
|
||
p [] [text "Welcome to Roc!"],
|
||
p [] [text "This tutorial will teach you how to build Roc applications. Along the way, you'll learn how to write tests, use the REPL, and much more!"],
|
||
],
|
||
section [] [
|
||
h2 [ id "installation" ] [
|
||
a [href "#installation"] [text "Installation"]
|
||
],
|
||
p [] [
|
||
text "Roc doesn’t have a numbered release or an installer yet, but you can follow the install instructions for your OS",
|
||
a [href "https://github.com/roc-lang/roc/tree/main/getting_started#installation"] [text " here "],
|
||
text ". If you get stuck, friendly people will be happy to help if you open a topic in",
|
||
a [href "https://roc.zulipchat.com/#narrow/stream/231634-beginners"] [text " #beginners "],
|
||
text "on",
|
||
a [href "https://roc.zulipchat.com/"] [text " Roc Zulip Chat "],
|
||
text "and ask for assistance!"
|
||
]
|
||
],
|
||
]
|