Add a mini-tutorial to WIP homepage repl

www/wip_new_website/InteractiveExample.roc

@@ -1,6 +1,6 @@
 interface InteractiveExample
     exposes [view]
-    imports [pf.Html.{ pre, samp }, pf.Html.Attributes.{ class }]
+    imports [pf.Html.{ pre, samp, div, text, a, class, p }, pf.Html.Attributes.{ class, role, href, id }]
 
 Section : [Desc (List Token) Str, Indent, Outdent, Newline]
 Token : [
@@ -72,10 +72,18 @@ view =
             Desc [Literal "FileWriteErr", Ident "path", Kw "_", Kw "->", Ident "Stderr.line", StrInterpolation "\"Error writing to " "Path.display path" "\""] "<p>This line will run if the <code>File.writeUtf8</code> from earlier encountered a file I/O error.</p><p>It handles the error by printing an error message to <a href=\"https://en.wikipedia.org/wiki/Standard_streams#Standard_error_(stderr)\">stderr</a>.</p><p>The <code>_</code> is where more information about the error is stored in the <code>FileWriteErr</code>. If we wanted to print more detail about what the error was, we’d name that something other than <code>_</code> and actually use it.</p>",
         ]
 
-    pre [class "interactive-example"] [
-        samp [] [
-            Html.text output,
+    div [role "presentation"] [
+        pre [class "interactive-example"] [
+            samp [] [text output],
         ],
+        p [] [
+            text "To get started learning the language, try the ",
+            a [href "/tutorial"] [text "tutorial"],
+            text " next!",
+        ],
+        p [id "final-tutorial-link"] [
+            a [class "btn-small", href "/tutorial"] [text "Start Tutorial"]
+        ]
     ]
 
 tokensToStr : List Token -> Str

www/wip_new_website/build-dev-local.sh

@@ -16,4 +16,4 @@ mkdir -p dist/wip
 roc run main.roc -- content/ dist/wip/
 cp -r static/* dist/wip/
 
-simple-http-server -p 8080 --nocache --cors --index -- dist/
+npx http-server dist/ -p 8080 -c-1 --cors

www/wip_new_website/content/index.md

@@ -109,6 +109,41 @@ It is easy to add support for other languages too.
 
 You can create your own! Learn about **platforms and applications**...
 
+## Sponsors
+
+We are very grateful for our corporate sponsors [Vendr](https://www.vendr.com/), [RWX](https://www.rwx.com), and [Tweede golf](https://tweedegolf.nl/en):
+
+<p id="sponsor-logos">
+    <a href="https://www.vendr.com"><img src="https://user-images.githubusercontent.com/1094080/223597445-81755626-a080-4299-a38c-3c92e7548489.png" height="60" alt="Vendr logo"/></a>
+    <a href="https://www.rwx.com"><img src="https://github.com/roc-lang/roc/assets/1094080/82c0868e-d23f-42a0-ac2d-c6e6b2e16575" height="60" alt="RWX logo"/></a>
+    <a href="https://tweedegolf.nl/en"><img src="https://user-images.githubusercontent.com/1094080/183123052-856815b1-8cc9-410a-83b0-589f03613188.svg" height="60" alt="tweede golf logo"/></a>
+</p>
+
+If you would like your company to become a corporate sponsor of Roc's development, please [DM Richard Feldman on Zulip](https://roc.zulipchat.com/#narrow/pm-with/281383-user281383)!
+
+We'd also like to express our gratitude to each and every one of our fantastic [GitHub sponsors](https://github.com/sponsors/roc-lang/)! A special thanks to those sponsoring $25/month or more:
+
+<ul id="individual-sponsors">
+    <li><a href="https://github.com/aaronwhite">Aaron White</a></li>
+    <li><a href="https://github.com/ayazhafiz">Ayaz Hafiz</a></li>
+    <li><a href="https://github.com/cdolan">Christopher Dolan</a></li>
+    <li><a href="https://github.com/Ivo-Balbaert">Ivo Balbaert</a></li>
+    <li><a href="https://github.com/Ocupe">Jonas Schell</a></li>
+    <li><a href="https://github.com/rvcas">Lucas Rosa</a></li>
+    <li><a href="https://github.com/nickgravgaard">Nick Gravgaard</a></li>
+    <li><a href="https://github.com/rtfeldman">Richard Feldman</a></li>
+    <li><a href="https://github.com/shritesh">Shritesh Bhattarai</a></li>
+    <li><a href="https://github.com/popara">Zeljko Nesic</a></li>
+</ul>
+
+Thank you all so much for helping Roc progress! 💜
+
+You can sponsor Roc by donating to the [Roc Programming Language Foundation](https://foundation.roc-lang.org/), a registered [US 503(c)(3) nonprofit organization](https://en.wikipedia.org/wiki/501(c)(3)_organization) (meaning donations to it are tax-exempt in the US) using:
+- [GitHub](https://github.com/sponsors/roc-lang)
+- [Liberapay](https://liberapay.com/roc_lang)
+
+We are a small team trying to do big things, and every donation helps!
+
 ## [Larger Example](#larger-example) {#larger-example}
 
 Here’s a larger example that shows a few different aspects of Roc:

www/wip_new_website/main.roc

@@ -97,13 +97,13 @@ viewNavbar = \page ->
 
     header [id "top-bar"] [
         nav [ariaLabel "primary"] [
-            a [id "nav-home-link", href "/wip/index.html", title "The Roc Programming Language"] logo,
+            a [id "nav-home-link", href "/wip/", title "The Roc Programming Language"] logo,
             div [id "top-bar-links"] [
-                a [href "/wip/tutorial.html"] [text "tutorial"],
-                a [href "/wip/install.html"] [text "install"],
-                a [href "/wip/community.html"] [text "community"],
-                a [href "/wip/docs.html"] [text "docs"],
-                a [href "/wip/donate.html"] [text "donate"],
+                a [href "/wip/tutorial"] [text "tutorial"],
+                a [href "/wip/install"] [text "install"],
+                a [href "/wip/community"] [text "community"],
+                a [href "/wip/docs"] [text "docs"],
+                a [href "/wip/donate"] [text "donate"],
             ],
         ],
     ]

www/wip_new_website/static/repl.css

@@ -44,6 +44,7 @@
 .history {
     padding: 1em;
     padding-bottom: 0;
+    flex: 1;
 }
 
 #help-text,

www/wip_new_website/static/repl.js

@@ -13,19 +13,40 @@ import * as roc_repl_wasm from "./roc_repl_wasm.js";
 
 const isHomepage = document.getElementById("homepage-repl-container") != null;
 
+const tutorialButtonSvg = `<svg viewBox="0 -6 51 58" xmlns="http://www.w3.org/2000/svg" aria-labelledby="repl-tutorial-link" role="img" class="roc-logo"><title id="repl-tutorial-link">Return to Roc Home</title><polygon role="presentation" points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086"></polygon></svg>`;
+
 // ----------------------------------------------------------------------------
 // REPL state
 // ----------------------------------------------------------------------------
 
 const repl = {
   elemHistory: document.getElementById("history-text"),
   elemSourceInput: document.getElementById("source-input"),
+  description: document.getElementById("repl-description"),
 
   inputQueue: [],
   inputHistory: [],
   inputHistoryIndex: 0,
   inputStash: "", // stash the user input while we're toggling through history with up/down arrows
 
+  // Current progress through the repl tutorial
+  tutorialStep: 0,
+  tutorialSteps: [
+    {
+      match: ((input) => input.replace(/ /g, "") === "0.1+0.2"),
+      show: "<p>Was this the answer you expected? (If so, try this in other programming languages and see what their answers are.)</p><p>Roc has a <a href=\"/builtins/Num#Dec\">decimal</a> type as well as <a href=\"/builtins/Num#F64\">floating-point</a> for when performance is more important than decimal precision.</p><p>Next, enter <code>name = \"(put your name here)\"</code></p>",
+    },
+    {
+      match: ((input) => input.replace(/ /g, "").match(/^name="/i)),
+      show: "<p>This created a new <a href=\"https://www.roc-lang.org/tutorial#defs\">definition</a>&mdash;<code>name</code> is now defined to be equal to the <a href=\"/tutorial#strings-and-numbers\">string</a> you entered.</p><p>Try using this definition by entering <code>\"Hi, \\(name)!\"</code></p>"
+    },
+    {
+      match: ((input) => input.match(/^["][^\\]+\\\(name\)/i)),
+        show: `<p>Nicely done! This is an example of <a href=\"/tutorial#string-interpolation\">string interpolation</a>, which replaces part of a string with whatever you put inside the parentheses after a <code>\\</code>.</p><p>Now that you’ve written a few <a href=\"/tutorial#naming-things\">expressions</a>, you can either continue exploring in this REPL, or move on to the <a href=\"/tutorial\">tutorial</a> to learn how to make full programs.<p><p><span class='welcome-to-roc'>Welcome to Roc!</span> <a href='/tutorial' class='btn-small'>${tutorialButtonSvg} Start Tutorial</a></p>`
+    }
+  ],
+
+
   textDecoder: new TextDecoder(),
   textEncoder: new TextEncoder(),
 
@@ -127,7 +148,6 @@ function onInputKeydown(event) {
       if (replArrow != null) {
         replArrow.style.display = "none";
       }
-
     }
   }
 }
@@ -179,27 +199,40 @@ function setInput(value) {
   el.selectionEnd = value.length;
 }
 
+function showNextReplTutorialEntry(inputText) {
+  const nextStep = repl.tutorialSteps[repl.tutorialStep];
+
+  if (typeof nextStep === "object" && nextStep.match(inputText)) {
+    repl.description.innerHTML = repl.description.innerHTML + "<hr/>" + nextStep.show;
+
+    repl.tutorialStep = repl.tutorialStep + 1;
+  }
+}
+
 // Use a queue just in case we somehow get inputs very fast
 // We want the REPL to only process one at a time, since we're using some global state.
 // In normal usage we shouldn't see this edge case anyway. Maybe with copy/paste?
 async function processInputQueue() {
   while (repl.inputQueue.length) {
     const inputText = repl.inputQueue[0];
-    repl.inputHistoryIndex = createHistoryEntry(inputText);
-    repl.inputStash = "";
 
-    let outputText = "";
-    let ok = true;
     if (inputText) {
+      repl.inputHistoryIndex = createHistoryEntry(inputText);
+      repl.inputStash = "";
+
+      let outputText = "";
+      let ok = true;
       try {
         outputText = await roc_repl_wasm.entrypoint_from_js(inputText);
       } catch (e) {
         outputText = `${e}`;
         ok = false;
       }
+
+      updateHistoryEntry(repl.inputHistoryIndex, ok, outputText);
+      showNextReplTutorialEntry(inputText);
     }
 
-    updateHistoryEntry(repl.inputHistoryIndex, ok, outputText);
     repl.inputQueue.shift();
   }
 }

www/wip_new_website/static/site.css

@@ -71,6 +71,11 @@ footer {
     margin: 0 auto;
 }
 
+hr {
+    color: var(--primary-1);
+    margin-bottom: 1rem;
+}
+
 .logo-dark {
     fill: #612bde;
 }
@@ -79,6 +84,63 @@ footer {
     fill: #8257e5;
 }
 
+.btn-small {
+    white-space: nowrap;
+    background: #7c38f5;
+    border: 4px solid #9b6bf2;
+    color: #fff !important;
+    cursor: pointer;
+    text-decoration: none !important;
+    padding: 12px 16px;
+    padding-left: 8px;
+}
+
+.btn-small .roc-logo {
+    fill: #fff;
+    position: relative;
+    left: -4px;
+    top: 11px;
+}
+
+.btn-small:hover {
+   background: #9b6bf2;
+   border-color: #7c38f5;
+}
+
+#individual-sponsors {
+   list-style-type: none;
+   padding: 24px 40px;
+}
+
+#individual-sponsors li {
+  display: inline;
+  white-space: nowrap;
+}
+
+#individual-sponsors li::after {
+  content: ",";
+  white-space: pre; /* Preserve the space after the comma */
+}
+
+#individual-sponsors li:last-child::after {
+  content: ""; /* No comma after the last one */
+}
+
+#sponsor-logos {
+    background-color: #fff;
+    padding: 24px 36px;
+    padding-bottom: 12px;
+    border-radius: 24px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 24px;
+}
+
+#final-tutorial-link {
+    padding-top: 12px;
+}
+
 /* Used for e.g. displaying the instruction "Click" on desktop and "Touch" on mobile.
  * When we think we're on mobile (based on max-width), we can switch the instruction.
 */
@@ -192,6 +254,13 @@ main {
     box-sizing: border-box;
 }
 
+.welcome-to-roc {
+    white-space: nowrap;
+    overflow-x: hidden;
+    padding-right: 60px;
+    margin-bottom: 12px;
+}
+
 code,
 samp {
     font-family: var(--font-mono);
@@ -274,6 +343,7 @@ pre > code {
     font-size: var(--font-size-normal);
     min-height: 0; /* On /repl on mobile, this expands to fill the screen, which we don't want */
     margin-right: 6px;
+    max-width: 50%;
 }
 
 #homepage-repl-container #repl,
@@ -523,6 +593,10 @@ li {
         padding: 12px 8px;
         margin: 0;
     }
+
+    #homepage-repl-container #repl {
+        max-width: none;
+    }
 }
 
 /* iPhone SE and similar */