The rockin’ Roc REPL
+The rockin' Roc REPL
Loading REPL WebAssembly module…please wait!
diff --git a/www/wip_new_website/content/tutorial.md b/www/wip_new_website/content/tutorial.md
index 23aafa00c61..ca78769139d 100644
--- a/www/wip_new_website/content/tutorial.md
+++ b/www/wip_new_website/content/tutorial.md
@@ -1,29 +1,38 @@
-# Tutorial
-
-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!
-
-
-
- - Strings and Numbers
- - Building an Application
- - Debugging
- - Records
- - Optional Record Fields
- - Tags
- - Booleans
- - Lists
- - Types
- - Numeric types
- - Crashing
- - Modules
- - Tasks
- - Backpassing
- - Abilities
- - Appendix: Advanced Concepts
-
-
-
-## [Strings and Numbers](#strings-and-numbers) {#strings-and-numbers}
+
+
+
+ Tutorial
+ Welcome to Roc!
+ This tutorial will teach you how to build Roc applications. Along the way, you'll learn how to write tests, use the REPL, and more!
+
+
+ Installation
+ Roc doesn’t have a numbered release or an installer yet, but you can follow the install instructions for your OS here . If you get stuck, friendly people will be happy to help if you open a topic in #beginners on Roc Zulip Chat and ask for assistance!
+
+
+## [REPL](#repl) {#repl}
Let's start by getting acquainted with Roc's [_Read-Eval-Print-Loop_](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop), or **REPL** for short. Run this in a terminal:
@@ -1981,6 +1990,12 @@ For this reason, any time you see a function that only runs a `when` on its only
\[This part of the tutorial has not been written yet. Coming soon!\]
+### [Reserved Keywords](#reserved-keywords) {#reserved-keywords}
+
+These are all the reserved keywords in Roc. You can't choose any of these as names, except as record field names.
+
+`if`, `then`, `else`, `when`, `as`, `is`, `dbg`, `expect`, `expect-fx`, `crash`, `interface`, `app`, `package`, `platform`, `hosted`, `exposes`, `imports`, `with`, `generates`, `packages`, `requires`, `provides`, `to`
+
### [Operator Desugaring Table](#operator-desugaring-table) {#operator-desugaring-table}
Here are various Roc expressions involving operators, and what they desugar to.
@@ -2003,8 +2018,5 @@ Here are various Roc expressions involving operators, and what they desugar to.
| a \|> b | `b a` |
| a b c \|> f x y | `f (a b c) x y` |
- ### [Language Keywords](#language-keywords) {#language-keywords}
-
-These are all of the language keywords supported by Roc;
-`if`,`then`,`else`,`when`,`as`,`is`,`dbg`,`expect`,`expect-fx`,`crash`,`interface`,`app`,`package`,`platform`,`hosted`,`exposes`,`imports`,`with`,`generates`,`packages`,`requires`,`provides`,`to`
+
diff --git a/www/wip_new_website/main.roc b/www/wip_new_website/main.roc
index f73ffef4544..d90efb5fcf2 100644
--- a/www/wip_new_website/main.roc
+++ b/www/wip_new_website/main.roc
@@ -56,10 +56,10 @@ view = \page, htmlContent ->
[text htmlContent]
bodyAttrs =
- if page == "index.html" then
- [id "homepage-main"]
- else
- [class "article-layout"]
+ when page is
+ "index.html" -> [id "homepage-main"]
+ "tutorial.html" -> [id "tutorial-main", class "article-layout"]
+ _ -> [class "article-layout"]
html [lang "en", class "no-js"] [
head [] [
@@ -72,6 +72,7 @@ view = \page, htmlContent ->
# The homepage doesn't actually use latin-ext
preloadWoff2 "/fonts/lato-v23-latin/lato-v23-latin-regular.woff2",
preloadWoff2 "/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff2",
+ preloadWoff2 "/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2",
link [rel "prefetch", href "/repl/roc_repl_wasm.js"],
link [rel "stylesheet", href "/wip/site.css"],
link [rel "stylesheet", href "/wip/repl.css"],
diff --git a/www/wip_new_website/static/site.css b/www/wip_new_website/static/site.css
index c5b01092815..ba5e7845eec 100644
--- a/www/wip_new_website/static/site.css
+++ b/www/wip_new_website/static/site.css
@@ -1,5 +1,6 @@
:root {
/* WCAG AAA Compliant colors */
+ --code-bg: #f4f8f9;
--gray-bg: #f4f8f9;
--gray: #717171;
--orange: #bf5000;
@@ -33,6 +34,11 @@
--font-size-normal: 18px;
--body-max-width: 1024px;
--dark-code-bg: #202746;
+
+ /* Tutorial */
+ --header-link-color: #107F79;
+ --header-link-hover: #222;
+ --h1-color: #8055E4;
}
html {
@@ -217,7 +223,7 @@ h2 {
color: var(--heading-color);
}
-.article-layout main {
+.article-layout main, .article-layout pre {
max-width: 720px;
}
@@ -527,6 +533,10 @@ li {
--body-max-width: none;
}
+ #tutorial-main main {
+ max-width: none;
+ }
+
#homepage-logo {
/* The bird runs off the screen unless we shrink it */
height: 80px;
@@ -637,6 +647,7 @@ li {
h5 {
line-height: 1.2em !important;
font-size: 2rem !important;
+ width: auto;
}
#top-bar-links {
@@ -685,6 +696,19 @@ li {
}
}
+
+@font-face {
+ font-family: "Permanent Marker";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2") format("woff2"),
+ url("/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff") format("woff");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+ U+2215, U+FEFF, U+FFFD;
+}
+
/* latin-ext */
@font-face {
font-family: "Lato";
@@ -745,7 +769,7 @@ li {
@media (prefers-color-scheme: dark) {
:root {
/* WCAG AAA Compliant colors */
- /* WCAG AAA Compliant colors */
+ --code-bg: #202746;
--gray-bg: #202746;
--gray: #b6b6b6;
--orange: #fd6e08;
@@ -765,6 +789,11 @@ li {
--faded-color: #bbbbbb;
--gray: #6e6e6e;
--heading-color: #eee;
+
+ /* Tutorial */
+ --header-link-color: #9C7CEA;
+ --header-link-hover: #ddd;
+ --h1-color: #1bc6bd;
}
.logo-dark {
@@ -1100,10 +1129,85 @@ code .dim {
border-color: var(--light-cyan);
}
-/* Tutorial Table of Contents */
+/* Tutorial */
+
+#tutorial-main main {
+ display: flex;
+ flex-direction: row-reverse;
+ max-width: 1024px;
+}
+
+#tutorial-main h1,
+#tutorial-main h2,
+#tutorial-main h3,
+#tutorial-main h4,
+#tutorial-main h5 {
+ font-family: "Permanent Marker";
+ line-height: 1rem;
+ margin-top: 1.75rem;
+ margin-bottom: 0;
+ border: none;
+}
+
+#tutorial-main h1 a,
+#tutorial-main h2 a,
+#tutorial-main h3 a,
+#tutorial-main h4 a,
+#tutorial-main h5 a {
+ color: var(--header-link-color);
+}
+
+#tutorial-main h1 a:hover,
+#tutorial-main h2 a:hover,
+#tutorial-main h3 a:hover,
+#tutorial-main h4 a:hover,
+#tutorial-main h5 a:hover {
+ text-decoration: none;
+ color: var(--header-link-hover);
+}
+
+#tutorial-main h1 {
+ font-size: 7rem;
+ line-height: 7rem;
+ color: var(--h1-color);
+ margin-top: 24px;
+ margin-bottom: 1.75rem;
+ text-shadow: 1px 1px 1px #010101;
+}
+
+#tutorial-main h2 {
+ font-size: 4rem;
+ line-height: 4rem;
+ text-shadow: 1px 1px 1px #010101;
+ padding: 0.8rem 0;
+ margin-top: 2.5rem;
+ width: 60rem; /* Without this, "Building an application" wraps and looks awkward */
+}
+
+#tutorial-main h3 {
+ font-size: 3rem;
+ line-height: 3rem;
+ text-shadow: 1px 1px 1px #010101;
+ margin-bottom: 0.5rem;
+}
+
+#tutorial-main h4 {
+ font-size: 2rem;
+ text-shadow: 1px 1px 1px #010101;
+}
+
+#tutorial-body, #tutorial-body pre {
+ max-width: 646px;
+}
#tutorial-toc {
background-color: var(--gray-bg);
+ flex: 0 0 auto; /* Take up as much space as it needs */
+ margin-top: 30px;
+ background: var(--code-bg);
+ padding: 12px 24px;
+ margin-left: 64px;
+ align-self: flex-start; /* Aligns to the start, not stretching in height */
}
#tutorial-toc > ul {
@@ -1122,6 +1226,62 @@ code .dim {
text-overflow: ellipsis; /* Adds an ellipsis if the content overflows */
}
+#tutorial-toc code {
+ background: none;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+#tutorial-toc ol {
+ padding: 3px;
+ margin: 8px 0;
+ list-style: none;
+ padding-bottom: 0;
+ margin-bottom: 0;
+}
+
+#tutorial-toc h2 {
+ font-family: inherit;
+ font-size: 2em;
+ text-shadow: none;
+ margin: 0;
+ padding: 16px 0;
+}
+
+#toc-search {
+ background-color: var(--toc-search-bg);
+ border: 1px solid var(--toc-search-border);
+ color: inherit;
+ padding: 6px 8px;
+ margin-top: 16px;
+ margin-bottom: 4px;
+ box-sizing: border-box;
+ width: 100%;
+ font-size: inherit;
+}
+
+#tutorial-toc-toggle,
+#tutorial-toc-toggle-label,
+#close-tutorial-toc {
+ display: none;
+ /* This may be overridden on mobile-friendly screen widths */
+}
+
+#tutorial-toc-toggle,
+#tutorial-toc-toggle-label {
+ font-size: 1.1rem;
+ float: right;
+}
+
+#close-tutorial-toc {
+ position: absolute;
+ top: 20px;
+ right: 8px;
+ font-size: 18px;
+ padding: 12px 24px;
+}
+
/* for larger screens */
@media only screen and (min-width: 768px) {
#tutorial-toc > ul > li {
diff --git a/www/wip_new_website/static/site.js b/www/wip_new_website/static/site.js
index 4b0ed0bcdcc..b61a79c684e 100644
--- a/www/wip_new_website/static/site.js
+++ b/www/wip_new_website/static/site.js
@@ -40,7 +40,7 @@ const repl = {
},
{
match: (input) => input.replace(/ /g, "").match(/^name="/i),
- show: 'This created a new definition—name is now defined to be equal to the string you entered.
Try using this definition by entering "Hi, \\(name)!"
',
+ show: 'This created a new definition—name is now defined to be equal to the string you entered.
Try using this definition by entering "Hi, \\(name)!"
',
},
{
match: (input) => input.match(/^["][^\\]+\\\(name\)/i),