From 91c528193d55e8feda5875ced3dc2a797489fa47 Mon Sep 17 00:00:00 2001 From: Richard Feldman Date: Sat, 18 Nov 2023 21:33:38 -0500 Subject: [PATCH 1/5] cargo fmt --- crates/docs/src/lib.rs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/crates/docs/src/lib.rs b/crates/docs/src/lib.rs index faa90e6baa3..5fc3d5753a5 100644 --- a/crates/docs/src/lib.rs +++ b/crates/docs/src/lib.rs @@ -200,7 +200,12 @@ fn render_package_index(root_module: &LoadedModule) -> String { // The HTML for the index page let mut index_buf = String::new(); - push_html(&mut index_buf, "h2", vec![("class", "module-name")], "Exposed Modules"); + push_html( + &mut index_buf, + "h2", + vec![("class", "module-name")], + "Exposed Modules", + ); push_html( &mut index_buf, "ul", From b725a114cf4374fed665083171af55ebe07e44d3 Mon Sep 17 00:00:00 2001 From: Richard Feldman Date: Sat, 18 Nov 2023 22:16:14 -0500 Subject: [PATCH 2/5] Remove fancy quote from rockin' roc repl --- crates/repl_cli/src/lib.rs | 2 +- www/generate_tutorial/src/input/tutorial.md | 2 +- www/public/repl/index.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/crates/repl_cli/src/lib.rs b/crates/repl_cli/src/lib.rs index 5d70da11bb9..965ce87906a 100644 --- a/crates/repl_cli/src/lib.rs +++ b/crates/repl_cli/src/lib.rs @@ -20,7 +20,7 @@ use target_lexicon::Triple; use crate::cli_gen::eval_llvm; pub const WELCOME_MESSAGE: &str = concatcp!( - "\n The rockin’ ", + "\n The rockin' ", BLUE, "roc repl", END_COL, diff --git a/www/generate_tutorial/src/input/tutorial.md b/www/generate_tutorial/src/input/tutorial.md index fd1f7b41fc4..c22cc822616 100644 --- a/www/generate_tutorial/src/input/tutorial.md +++ b/www/generate_tutorial/src/input/tutorial.md @@ -8,7 +8,7 @@ Let's start by getting acquainted with Roc's [_Read-Eval-Print-Loop_](https://en If Roc is [installed](#installation), you should see this: -
The rockin’ roc repl
+
The rockin' roc repl
So far, so good! diff --git a/www/public/repl/index.html b/www/public/repl/index.html index a26ddb85cfd..878ed8a2cd3 100644 --- a/www/public/repl/index.html +++ b/www/public/repl/index.html @@ -24,7 +24,7 @@
-

The rockin’ Roc REPL

+

The rockin' Roc REPL

Loading REPL WebAssembly module…please wait!
From 42630d8b500d153e3be7373c3ee2802b60327a2f Mon Sep 17 00:00:00 2001 From: Richard Feldman Date: Sat, 18 Nov 2023 22:16:27 -0500 Subject: [PATCH 3/5] Restyle WIP tutorial --- www/wip_new_website/main.roc | 9 +++++---- www/wip_new_website/static/site.css | 28 +++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 5 deletions(-) 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..a3397e30779 100644 --- a/www/wip_new_website/static/site.css +++ b/www/wip_new_website/static/site.css @@ -685,6 +685,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"; @@ -1100,7 +1113,20 @@ code .dim { border-color: var(--light-cyan); } -/* Tutorial Table of Contents */ +/* Tutorial */ + +#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; + color: var(--header-link-color); + border: none; +} #tutorial-toc { background-color: var(--gray-bg); From 3ad2c677b372bea06c609a0829100a8e45584d74 Mon Sep 17 00:00:00 2001 From: Richard Feldman Date: Sat, 18 Nov 2023 23:26:18 -0500 Subject: [PATCH 4/5] Update WIP tutorial --- www/wip_new_website/content/tutorial.md | 62 ++++++----- www/wip_new_website/static/site.css | 140 +++++++++++++++++++++++- www/wip_new_website/static/site.js | 2 +- 3 files changed, 174 insertions(+), 30 deletions(-) diff --git a/www/wip_new_website/content/tutorial.md b/www/wip_new_website/content/tutorial.md index 23aafa00c61..b6a79bdfa3e 100644 --- a/www/wip_new_website/content/tutorial.md +++ b/www/wip_new_website/content/tutorial.md @@ -1,29 +1,37 @@ -# 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](#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: @@ -2008,3 +2016,5 @@ Here are various Roc expressions involving operators, and what they desugar to. 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/static/site.css b/www/wip_new_website/static/site.css index a3397e30779..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 { @@ -758,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; @@ -778,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 { @@ -1115,6 +1131,12 @@ code .dim { /* Tutorial */ +#tutorial-main main { + display: flex; + flex-direction: row-reverse; + max-width: 1024px; +} + #tutorial-main h1, #tutorial-main h2, #tutorial-main h3, @@ -1124,12 +1146,68 @@ code .dim { line-height: 1rem; margin-top: 1.75rem; margin-bottom: 0; - color: var(--header-link-color); 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 { @@ -1148,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), From 71f6bd6cbd1b7bee3f15aacdbb493ed863ef9caa Mon Sep 17 00:00:00 2001 From: Richard Feldman Date: Sat, 18 Nov 2023 23:29:35 -0500 Subject: [PATCH 5/5] Revise final tutorial section --- www/wip_new_website/content/tutorial.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/www/wip_new_website/content/tutorial.md b/www/wip_new_website/content/tutorial.md index b6a79bdfa3e..ca78769139d 100644 --- a/www/wip_new_website/content/tutorial.md +++ b/www/wip_new_website/content/tutorial.md @@ -17,6 +17,7 @@
  • Tasks
  • Abilities
  • Advanced Concepts
    • +
  • Reserved Keywords
  • Operator Desugaring Table
    • @@ -1989,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. @@ -2011,10 +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`