higher contrast colors, fixed scaling on mobile

www/generate_tutorial/.gitignore

@@ -0,0 +1 @@
+roc-tutorial

www/generate_tutorial/src/input/tutorial.md

@@ -1,12 +1,10 @@
-## [Installation](#installation) {#installation}
+<!-- The welcome and installation section are located in tutorial.roc -->
-
-Roc doesn't have a numbered release or an installer yet, but you can follow the install instructions for your OS [here](https://github.com/roc-lang/roc/tree/main/getting_started#installation). If you get stuck, friendly people will be happy to help if you open a topic in [#beginners](https://roc.zulipchat.com/#narrow/stream/231634-beginners) on [Roc Zulip Chat](https://roc.zulipchat.com/) and ask for assistance!
 
 ## [Strings and Numbers](#strings-and-numbers) {#strings-and-numbers}
 
 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:
 
-<pre><code class="snippet">roc repl</code></pre>
+<code class="block">roc repl</code>
 
 If Roc is [installed](#installation), you should see this:
 
@@ -18,7 +16,7 @@ So far, so good!
 
 Try typing this in the REPL and pressing Enter:
 
-<pre><samp class="repl-prompt">"Hello, World!"</samp></pre>
+<samp class="repl-prompt">"Hello, World!"</samp>
 
 The REPL should cheerfully display the following:
 
@@ -75,8 +73,8 @@ Roc will respect [order of operations](https://en.wikipedia.org/wiki/Order_of_op
 
 <pre><samp><span class="repl-prompt">1 <span class="op">+</span> 2 <span class="op">*</span> (3 <span class="op">-</span> 4)
 
--1 <span class="ann">:</span> Num *
+-1 <span class="colon">:</span> Num *
-</span></pre>
+</span></samp></pre>
 
 
 ### [Calling Functions](#calling-functions) {#calling-functions}
@@ -139,11 +137,11 @@ main <span class="kw">=</span>
 
 Try running this with:
 
-<pre><samp>roc dev</samp></pre>
+<samp>roc dev</samp>
 
 You should see a message about a file being downloaded, followed by this:
 
-<pre><samp>I'm a Roc application!</samp></pre>
+<samp>I'm a Roc application!</samp>
 
 Congratulations, you've written your first Roc application! We'll go over what the parts above `main` do later, but let's play around a bit first.
 
@@ -165,7 +163,7 @@ Now run `roc dev` again. This time the "Downloading …" message won't appear; t
 
 You should see this:
 
-<pre><samp>There are 5 animals.</samp></pre>
+<samp>There are 5 animals.</samp>
 
 `main.roc` now has four definitions (_defs_ for short) `birds`, `iguanas`, `total`, and `main`.
 
@@ -271,16 +269,15 @@ This differently-indented version is equivalent to writing `else if sum < 0 then
 
 Whenever this `dbg` line of code is reached, the value of `count` will be printed to [stderr](<https://en.wikipedia.org/wiki/Standard_streams#Standard_error_(stderr)>), along with the source code file and line number where the `dbg` itself was written:
 
-<pre><samp><span class="kw">[pluralize.roc 6:8]</span> 5
+<samp><span class="kw">[pluralize.roc 6:8]</span> 5</samp>
-</samp></pre>
 
 You can give `dbg` any expression you like, for example:
 
-<pre><samp><span class="kw">dbg</span> Str.concat singular plural</samp></pre>
+<samp><span class="kw">dbg</span> Str.concat singular plural</samp>
 
 An easy way to print multiple values at a time is to wrap them in a tag, for example a concise tag like `T`:
 
-<pre><samp><span class="kw">dbg</span> T "the value of `count` is:" count</samp></pre>
+<samp><span class="kw">dbg</span> T "the value of `count` is:" count</samp>
 
 > **Note:** `dbg` is a debugging tool, and is only available when running your program via a `roc` subcommand (for example using `roc dev`, `roc run`, or `roc test`). When you build a standalone application with `roc build`, any uses of `dbg` won't be included!
 
@@ -322,7 +319,7 @@ This works because `addAndStringify` only uses `counts.birds` and `counts.iguana
 
 By the way, this is a comment in Roc:
 
-<pre><samp><span class="comment"># The `name` field is unused by addAndStringify</span></samp></pre>
+<samp><span class="comment"># The `name` field is unused by addAndStringify</span></samp>
 
 Whenever you write `#` it means that the rest of the line is a comment, and will not affect the program.
 
@@ -348,7 +345,7 @@ Instead of writing `\record -> record.x` we can write `.x` and it will evaluate
 <span class="comment"># and returns the `foo` field of that record.</span>
 returnFoo <span class="kw">=</span> .foo
 
-returnFoo <span class="brace">{</span> foo <span class="colon">:</span> <span class="str">"hi!"</span><span class="comma">,</span> bar <span class="colon">:</span> <span class="str">"blah"</span> <span class="brace"></span>}</span>
+returnFoo <span class="brace">{</span> foo <span class="colon">:</span> <span class="str">"hi!"</span><span class="comma">,</span> bar <span class="colon">:</span> <span class="str">"blah"</span> <span class="brace">}</span></span>
 <span class="comment"># returns "hi!"</span>
 </samp></pre>
 
@@ -544,13 +541,11 @@ As an example of why tags are encouraged for data modeling, in many languages it
 
 Another thing we can do in Roc is to make a _list_ of values. Here's an example:
 
-<pre><samp><span class="attr">names</span> <span class="kw">=</span> [<span class="str">"Sam"</span>, <span class="str">"Lee"</span>, <span class="str">"Ari"</span>]
+<samp><span class="attr">names</span> <span class="kw">=</span> [<span class="str">"Sam"</span>, <span class="str">"Lee"</span>, <span class="str">"Ari"</span>]</samp>
-</samp></pre>
 
 This is a list with three elements in it, all strings. We can add a fourth element using `List.append` like so:
 
-<pre><samp>List.append names <span class="str">"Jess"</span>
+<samp>List.append names <span class="str">"Jess"</span></samp>
-</samp></pre>
 
 This returns a **new** list with `"Jess"` after `"Ari"`, and doesn't modify the original list at all. All values in Roc (including lists, but also records, strings, numbers, and so on) are immutable, meaning whenever we want to "change" them, we want to instead pass them to a function which returns some variation of what was passed in.
 

www/generate_tutorial/src/tutorial.roc

@@ -1,8 +1,8 @@
 app "roc-tutorial"
     packages { pf: "../../../examples/static-site-gen/platform/main.roc" }    
     imports [
-        pf.Html.{ html, head, body, footer, div, main, p, section, h1, h2, label, ol, input, text, nav, a, li, link, meta },
+        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.{ httpEquiv, content, name, for, id, type, placeholder, href, rel, lang, class, title },
+        pf.Html.Attributes.{ content, name, for, id, type, href, rel, lang, class, title, charset, src },
     ]
     provides [transformFileContent] to pf
 
@@ -14,9 +14,12 @@ view : Str -> Html.Node
 view = \htmlContent ->
     html [lang "en"] [
         head [] [
-            meta [httpEquiv "content-type", content "text/html; charset=utf-8"] [],
+            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,
@@ -24,10 +27,11 @@ view = \htmlContent ->
                 viewTutorialStart,
                 text htmlContent,
             ],
+            footer [] [
+                text "Made by people who like to make nice things. © 2022"
+            ]
         ],
-        footer [] [
+        script [src "/site.js"] [],
-            text "Made by people who like to make nice things. © 2022"
-        ]
     ]
 
 viewNavbar : Html.Node
@@ -50,7 +54,7 @@ viewTutorialStart =
         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"],
-            input [id "toc-search", type "text", placeholder "Search"] [],
+            # TODO fix search: input [id "toc-search", type "text", placeholder "Search"] [],
             ol [] tocLinks,
         ],
         tutorialIntro,
@@ -93,8 +97,8 @@ tutorialIntro =
             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 [] [
+            h2 [ id "installation" ] [
-                text "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",

www/public/site.css

@@ -8,11 +8,11 @@
     --header-link-hover: #222;
     --link-color: hsl(258, 73%, 58%);
     --h1-color: hsl(258, 73%, 70%);
-    --repl-prompt: #0ff4f4;
+    --repl-prompt: #0064ff;
     --body-bg: #fff;
     --code-bg: #e7e7e7;
-    --language-snippet-bg: #fcfcfc;
+    --code-snippet-bg: #fcfcfc;
-    --language-snippet-border: #bbb;
+    --code-snippet-border: #bbb;
     --code-color: #303030;
     --toc-background: #f3f3f3;
     --toc-border: #ddd;
@@ -121,16 +121,20 @@ code, samp {
     color: var(--code-color);
 }
 
-.language-snippet, samp {
+.code-snippet, samp {
     display: block;
     overflow: auto;
     white-space: pre;
     padding: 10px 16px;
-    background-color: var(--language-snippet-bg);
+    background-color: var(--code-snippet-bg);
     margin-bottom: 16px;
     font-size: 1.2rem;
     line-height: 1.76rem;
-    border: 1px solid var(--language-snippet-border);
+    border: 1px solid var(--code-snippet-border);
+}
+
+pre {
+    white-space: pre-wrap;
 }
 
 .repl-prompt:before {
@@ -140,7 +144,7 @@ code, samp {
 }
 
 .repl-err {
-    color: #ff5f5f;
+    color: #c20000;
 }
 
 samp .ann {
@@ -150,22 +154,17 @@ samp .ann {
 
 samp .autovar {
     /* automatic variable names in the repl, e.g. # val1 */
-    color: #48e111;
+    color: #338545;
 }
 
 samp .kw {
     /* language keywords, e.g. `if`*/
-    color: #3474db;
+    color: #004cc2;
 }
 
-samp .op {
+samp .op, samp .paren, samp .brace, samp .comma, samp .colon {
     /* operators, e.g. `+` */
-    color: #b157df;
+    color: #c20000;
-}
-
-samp .paren, samp .brace, samp .comma, samp .colon {
-    /* square braces, parens, commas */
-    color: #b157df;
 }
 
 samp .number {
@@ -188,7 +187,7 @@ samp .dim {
 }
 
 samp .comment {
-    color: #2b9d44;
+    color: #338545;
 }
 
 /* Tables */
@@ -315,7 +314,7 @@ td:last-child {
 
 /* Mobile-friendly screen width */
 @media only screen and (max-device-width: 480px) and (orientation: portrait) {
-    p, code, samp, .language-snippet {
+    p, code, samp, .code-snippet {
         font-size: 16px;
     }
 
@@ -416,19 +415,19 @@ h1 {
     color: var(--h1-color);
     margin-top: 0;
     margin-bottom: 1.75rem;
-    text-shadow: 2px 2px 2px #010101;
+    text-shadow: 1px 1px 1px #010101;
 }
 
 h2 {
     font-size: 4rem;
     line-height: 4rem;
-    text-shadow: 2px 2px 2px #010101;
+    text-shadow: 1px 1px 1px #010101;
 }
 
 h3 {
     font-size: 3rem;
     line-height: 3rem;
-    text-shadow: 2px 2px 1px #010101;
+    text-shadow: 1px 1px 1px #010101;
 }
 
 h4 {
@@ -530,14 +529,14 @@ h4 {
         --header-link-hover: #ddd;
         --h1-color: #1bc6bd;
         --link-color: #1bc6bd;
-        --repl-prompt: #0ff4f4;
+        --repl-prompt: var(--link-color);
         --body-bg: #0e0e0f;
         --code-bg: #303030;
-        --language-snippet-bg: #1a1a1a;
+        --code-snippet-bg: #1a1a1a;
-        --language-snippet-border: #444;
+        --code-snippet-border: #444;
         --code-color: #cdcdcd;
-        --toc-background: var(--language-snippet-bg);
+        --toc-background: var(--code-snippet-bg);
-        --toc-border: var(--language-snippet-border);
+        --toc-border: var(--code-snippet-border);
         --toc-search-bg: #333;
         --toc-search-border: #555;
     }
@@ -550,27 +549,32 @@ h4 {
         scrollbar-color: #444444 #2f2f2f;
     }
 
-    samp .paren, samp .brace, samp .comma {
-        /* square braces, parens, commas */
-        color: #67a0fb;
-    }
-
     samp .kw {
         /* language keywords, e.g. `if` */
-        color: #67a0fb;
+        color: #00c3ff;
     }
 
-    samp .op {
+    samp .colon, samp .op, samp .paren, samp .brace, samp .comma, .repl-err {
         /* operators, e.g. `+` */
-        color: #ca67fb;
+        color: #ff3966;
     }
 
     samp .str {
         /* string literals */
-        color: #26b2b9;
+        color: var(--link-color);
     }
 
-    samp .comment {
+    code .str {
-        color: #88c796;
+        /* string literals */
+        color: var(--link-color);
+    }
+
+    /* autovar = automatic variable names in the repl, e.g. # val1 */
+    samp .comment, samp .autovar {
+        color: #4ed86c;
+    }
+
+    samp .number {
+        color: #00c3ff;
     }
 }