From a3aa5f1e264562d8e9a8cc69449634378ffe3444 Mon Sep 17 00:00:00 2001 From: Luke Boswell Date: Fri, 3 Nov 2023 11:27:15 +1100 Subject: [PATCH 1/3] fix broken links to FFF pages --- www/wip_new_website/content/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/wip_new_website/content/index.md b/www/wip_new_website/content/index.md index 53c7482500c..98ac5048d5c 100644 --- a/www/wip_new_website/content/index.md +++ b/www/wip_new_website/content/index.md @@ -25,21 +25,21 @@
- +

Fast

Roc code is designed to build fast and run fast. It compiles to machine code or WebAssembly.

What does fast mean here?
- +

Friendly

Roc’s syntax, semantics, and included toolset all prioritize user-friendliness.

What does friendly mean here?
- +

Functional

Roc has a small number of simple language primitives. It’s a single-paradigm functional language.

From 3a1867f64fabb203a4501457f56bb2b645acabd4 Mon Sep 17 00:00:00 2001 From: Luke Boswell Date: Fri, 3 Nov 2023 11:27:55 +1100 Subject: [PATCH 2/3] format CSS/JS files using Prettier --- www/wip_new_website/static/repl.css | 178 ++++++++++++++-------------- www/wip_new_website/static/repl.js | 67 ++++++----- www/wip_new_website/static/site.css | 82 ++++++++----- 3 files changed, 175 insertions(+), 152 deletions(-) diff --git a/www/wip_new_website/static/repl.css b/www/wip_new_website/static/repl.css index 0d8d2645833..24a4b4c61eb 100644 --- a/www/wip_new_website/static/repl.css +++ b/www/wip_new_website/static/repl.css @@ -1,167 +1,165 @@ #repl { - display: flex; - flex-direction: column; - font-size: 18px; + display: flex; + flex-direction: column; + font-size: 18px; } #source-input-wrapper { - position: relative; - width: 100%; - box-sizing: border-box; + position: relative; + width: 100%; + box-sizing: border-box; } #source-input-wrapper::before { - content: "» "; - position: absolute; - left: 15px; - top: 18px; - line-height: 16px; - height: 16px; - z-index: 2; - font-family: var(--font-mono); - color: var(--cyan); - /* Let clicks pass through to the textarea */ - pointer-events: none; + content: "» "; + position: absolute; + left: 15px; + top: 18px; + line-height: 16px; + height: 16px; + z-index: 2; + font-family: var(--font-mono); + color: var(--cyan); + /* Let clicks pass through to the textarea */ + pointer-events: none; } #source-input { - width: 100%; - font-family: var(--font-mono); - color: var(--code-color); - background-color: var(--code-bg); - display: inline-block; - height: 76px; - padding: 16px; - padding-left: 36px; - border: 1px solid transparent; - margin: 0; - margin-bottom: 2em; - box-sizing: border-box; - font-size: 18px; + width: 100%; + font-family: var(--font-mono); + color: var(--code-color); + background-color: var(--code-bg); + display: inline-block; + height: 76px; + padding: 16px; + padding-left: 36px; + border: 1px solid transparent; + margin: 0; + margin-bottom: 2em; + box-sizing: border-box; + font-size: 18px; } #source-input:focus { - outline: 2px solid var(--primary-1); - box-sizing: border-box; + outline: 2px solid var(--primary-1); + box-sizing: border-box; } .history { - padding: 1em; - padding-bottom: 0; + padding: 1em; + padding-bottom: 0; } #help-text, #history-text { - white-space: pre-wrap; - + white-space: pre-wrap; } #history-text { - margin-top: 16px; + margin-top: 16px; } #loading-message { - text-align: center; - /* approximately match height after loading and printing help message */ - height: 96px; + text-align: center; + /* approximately match height after loading and printing help message */ + height: 96px; } .history-item { - margin-bottom: 24px; + margin-bottom: 24px; } .history-item .input { - margin: 0; - margin-bottom: 8px; + margin: 0; + margin-bottom: 8px; } .history-item .output { - margin: 0; + margin: 0; } .panic { - color: #ff6666; + color: #ff6666; } .input-line-prefix { - color: var(--cyan); + color: var(--cyan); } .color-red { - color: #ff6666; + color: #ff6666; } .color-green { - color: var(--green); + color: var(--green); } .color-yellow { - color: var(--orange); + color: var(--orange); } .color-blue { - color: var(--cyan); + color: var(--cyan); } .color-magenta { - color: var(--primary-1); + color: var(--primary-1); } .color-cyan { - color: var(--cyan); + color: var(--cyan); } .color-white { - /* Really this isn't white so much as "default text color." For the repl, this should be black + /* Really this isn't white so much as "default text color." For the repl, this should be black in a light color scheme, and only white in dark mode. The name could be better! */ - color: black; + color: black; } @media (prefers-color-scheme: dark) { - .color-white { - color: white; - } + .color-white { + color: white; + } } .bold { - font-weight: bold; + font-weight: bold; } .underline { - text-decoration: underline; + text-decoration: underline; } /* Mobile-friendly screen width */ @media only screen and (max-width: 767px) { - #repl { - margin: 0; - padding: 0; - min-height: calc(100vh - var(--top-bar-height)); - } - - - code.history { - flex-grow: 1; - } - - #source-input { - margin: 0 - } - - #loading-message { - margin: 0; - } - - #homepage-repl-container { - flex-direction: column; - } - - #homepage-repl-container #repl-description { - padding: 0; - margin-bottom: 1.5em; - } - - #repl-arrow { - display: none; - } + #repl { + margin: 0; + padding: 0; + min-height: calc(100vh - var(--top-bar-height)); + } + + code.history { + flex-grow: 1; + } + + #source-input { + margin: 0; + } + + #loading-message { + margin: 0; + } + + #homepage-repl-container { + flex-direction: column; + } + + #homepage-repl-container #repl-description { + padding: 0; + margin-bottom: 1.5em; + } + + #repl-arrow { + display: none; + } } diff --git a/www/wip_new_website/static/repl.js b/www/wip_new_website/static/repl.js index 8dddf7a0b79..0454834c48b 100644 --- a/www/wip_new_website/static/repl.js +++ b/www/wip_new_website/static/repl.js @@ -168,36 +168,36 @@ async function processInputQueue() { var ROC_PANIC_INFO = null; function send_panic_msg_to_js(rocstr_ptr, panic_tag) { - const { memory } = repl.app.exports; + const { memory } = repl.app.exports; - const rocStrBytes = new Int8Array(memory.buffer, rocstr_ptr, 12); - const finalByte = rocStrBytes[11] + const rocStrBytes = new Int8Array(memory.buffer, rocstr_ptr, 12); + const finalByte = rocStrBytes[11]; - let stringBytes = ""; - if (finalByte < 0) { - // small string + let stringBytes = ""; + if (finalByte < 0) { + // small string - // bitwise ops on negative JS numbers are weird. This clears the bit that we - // use to indicate a small string. In rust it's `finalByte as u8 ^ 0b1000_0000` - const length = finalByte + 128; - stringBytes = new Uint8Array(memory.buffer, rocstr_ptr, length); - } else { - // big string - const rocStrWords = new Uint32Array(memory.buffer, rocstr_ptr, 3); - const [ptr, len, _cap] = rocStrWords; + // bitwise ops on negative JS numbers are weird. This clears the bit that we + // use to indicate a small string. In rust it's `finalByte as u8 ^ 0b1000_0000` + const length = finalByte + 128; + stringBytes = new Uint8Array(memory.buffer, rocstr_ptr, length); + } else { + // big string + const rocStrWords = new Uint32Array(memory.buffer, rocstr_ptr, 3); + const [ptr, len, _cap] = rocStrWords; - const SEAMLESS_SLICE_BIT = 1 << 31; - const length = len & (~SEAMLESS_SLICE_BIT); + const SEAMLESS_SLICE_BIT = 1 << 31; + const length = len & (~SEAMLESS_SLICE_BIT); - stringBytes = new Uint8Array(memory.buffer, ptr, length); - } + stringBytes = new Uint8Array(memory.buffer, ptr, length); + } - const decodedString = repl.textDecoder.decode(stringBytes); + const decodedString = repl.textDecoder.decode(stringBytes); - ROC_PANIC_INFO = { - msg: decodedString, - panic_tag: panic_tag, - }; + ROC_PANIC_INFO = { + msg: decodedString, + panic_tag: panic_tag, + }; } // Load Wasm code into the browser's virtual machine, so we can run it later. @@ -206,8 +206,8 @@ function send_panic_msg_to_js(rocstr_ptr, panic_tag) { async function js_create_app(wasm_module_bytes) { const { instance } = await WebAssembly.instantiate(wasm_module_bytes, { env: { - send_panic_msg_to_js: send_panic_msg_to_js, - } + send_panic_msg_to_js: send_panic_msg_to_js, + }, }); // Keep the instance alive so we can run it later from shared REPL code @@ -221,7 +221,7 @@ function js_run_app() { // Run the user code, and remember the result address // We'll pass it to Rust in the next callback try { - repl.result_addr = wrapper(); + repl.result_addr = wrapper(); } catch (e) { // an exception could be that roc_panic was invoked, // or some other crash (likely a compiler bug) @@ -305,14 +305,19 @@ function updateHistoryEntry(index, ok, outputText) { // Scroll the input element into view so you can see the most recent output. // Only do this if it's currently out of view though! const bounds = repl.elemSourceInput.getBoundingClientRect(); - const isInView = - bounds.top >= 0 && + const isInView = bounds.top >= 0 && bounds.left >= 0 && - bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - bounds.right <= (window.innerWidth || document.documentElement.clientWidth); + bounds.bottom <= + (window.innerHeight || document.documentElement.clientHeight) && + bounds.right <= + (window.innerWidth || document.documentElement.clientWidth); if (!isInView) { - repl.elemSourceInput.scrollIntoView({ behavior: "instant", block: "end", inline: "nearest" }); + repl.elemSourceInput.scrollIntoView({ + behavior: "instant", + block: "end", + inline: "nearest", + }); } } else { // Scroll the page to the bottom so you can see the most recent output. diff --git a/www/wip_new_website/static/site.css b/www/wip_new_website/static/site.css index a0da6c938e7..bc1ba53edfc 100644 --- a/www/wip_new_website/static/site.css +++ b/www/wip_new_website/static/site.css @@ -72,11 +72,11 @@ footer { } .logo-dark { - fill: #612BDE; + fill: #612bde; } .logo-light { - fill: #8257E5; + fill: #8257e5; } /* Used for e.g. displaying the instruction "Click" on desktop and "Touch" on mobile. @@ -233,7 +233,7 @@ pre { background-color: var(--dark-code-bg); } -pre>samp { +pre > samp { overflow-x: auto; display: block; background-color: var(--dark-code-bg); @@ -271,7 +271,8 @@ pre>samp { min-height: 0; /* On /repl on mobile, this expands to fill the screen, which we don't want */ } -#homepage-repl-container #repl, #homepage-repl-container #repl code { +#homepage-repl-container #repl, +#homepage-repl-container #repl code { color: white; background-color: var(--dark-code-bg); } @@ -478,7 +479,7 @@ li { display: block; } - #tutorial-toc-toggle:checked+#tutorial-toc { + #tutorial-toc-toggle:checked + #tutorial-toc { display: block; } @@ -538,8 +539,10 @@ li { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; - 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"); + 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; @@ -550,8 +553,10 @@ li { font-family: "Merriweather"; font-style: normal; font-weight: 400; - src: url("/fonts/merriweather-v30-latin-ext_latin/merriweather-v30-latin-ext_latin-regular.woff2") format("woff2"), - url("/fonts/merriweather-v30-latin-ext_latin/merriweather-v30-latin-ext_latin-regular.woff") format("woff"); + src: url("/fonts/merriweather-v30-latin-ext_latin/merriweather-v30-latin-ext_latin-regular.woff2") + format("woff2"), + url("/fonts/merriweather-v30-latin-ext_latin/merriweather-v30-latin-ext_latin-regular.woff") + format("woff"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -561,8 +566,10 @@ li { font-family: "Merriweather"; font-style: normal; font-weight: 400; - src: url("/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff2") format("woff2"), - url("/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff") format("woff"); + src: url("/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff2") + format("woff2"), + url("/fonts/merriweather-v30-latin/merriweather-v30-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; @@ -573,8 +580,10 @@ li { font-family: "Merriweather Sans"; font-style: normal; font-weight: 400; - src: url("/fonts/merriweather-sans-v22-latin-ext_latin/merriweather-sans-v22-latin-ext_latin-regular.woff2") format("woff2"), - url("/fonts/merriweather-sans-v22-latin-ext_latin/merriweather-sans-v22-latin-ext_latin-regular.woff") format("woff"); + src: url("/fonts/merriweather-sans-v22-latin-ext_latin/merriweather-sans-v22-latin-ext_latin-regular.woff2") + format("woff2"), + url("/fonts/merriweather-sans-v22-latin-ext_latin/merriweather-sans-v22-latin-ext_latin-regular.woff") + format("woff"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -584,8 +593,10 @@ li { font-family: "Merriweather Sans"; font-style: normal; font-weight: 400; - src: url("/fonts/merriweather-sans-v22-latin/merriweather-sans-v22-latin-regular.woff2") format("woff2"), - url("/fonts/merriweather-sans-v22-latin/merriweather-sans-v22-latin-regular.woff") format("woff"); + src: url("/fonts/merriweather-sans-v22-latin/merriweather-sans-v22-latin-regular.woff2") + format("woff2"), + url("/fonts/merriweather-sans-v22-latin/merriweather-sans-v22-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; @@ -596,8 +607,10 @@ li { font-family: "Lato"; font-style: normal; font-weight: 400; - src: url("/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff2") format("woff2"), - url("/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff") format("woff"); + src: url("/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff2") + format("woff2"), + url("/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff") + format("woff"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -607,7 +620,8 @@ li { font-family: "Lato"; font-style: normal; font-weight: 400; - src: url("/fonts/lato-v23-latin/lato-v23-latin-regular.woff2") format("woff2"), + src: url("/fonts/lato-v23-latin/lato-v23-latin-regular.woff2") + format("woff2"), url("/fonts/lato-v23-latin/lato-v23-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, @@ -619,8 +633,10 @@ li { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; - src: url("/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff2") format("woff2"), - url("/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff") format("woff"); + src: url("/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff2") + format("woff2"), + url("/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff") + format("woff"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -630,8 +646,10 @@ li { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; - src: url("/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff2") format("woff2"), - url("/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff") format("woff"); + src: url("/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff2") + format("woff2"), + url("/fonts/source-code-pro-v22-latin/source-code-pro-v22-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; @@ -667,7 +685,7 @@ li { } .logo-light { - fill: #8A66DE; + fill: #8a66de; } #homepage-h1 { @@ -697,7 +715,8 @@ li { border-color: var(--gray); } - #first-code-sample, #homepage-repl-container #repl { + #first-code-sample, + #homepage-repl-container #repl { border: 1px solid #ddd; } @@ -811,7 +830,6 @@ code .dim { text-shadow: 1px 1px 1px #010101; } - /* HOME GOALS */ .home-goals-container { @@ -846,7 +864,8 @@ code .dim { padding-bottom: 42px; padding-top: 2px; font-style: italic; - text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, + 1px 1px 0 #000; letter-spacing: 1px; word-spacing: 3px; margin: 0; @@ -901,7 +920,8 @@ code .dim { .home-goals-title a:hover { color: black; - text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; + text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, + 1px 1px 0 #fff; } .home-goals-learn-more a:hover { @@ -913,14 +933,14 @@ code .dim { margin-bottom: 2em; } - /* Interactive example on homepage */ .interactive-example { font-size: var(--font-size-normal); } -.interactive-example, .interactive-example samp { +.interactive-example, +.interactive-example samp { background-color: #202746; color: white; } @@ -935,7 +955,7 @@ code .dim { } .interactive-example label:hover, -.interactive-radio:checked+label { +.interactive-radio:checked + label { background-color: #000; cursor: pointer; } @@ -958,7 +978,7 @@ code .dim { display: none; } -.interactive-radio:checked+label+.interactive-desc { +.interactive-radio:checked + label + .interactive-desc { display: block; position: absolute; top: 0; From 6ea34a7b51dd2048cec28f85279b24682447b1eb Mon Sep 17 00:00:00 2001 From: Luke Boswell Date: Fri, 3 Nov 2023 11:28:43 +1100 Subject: [PATCH 3/3] fix styling for pre>code --- www/wip_new_website/static/site.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/www/wip_new_website/static/site.css b/www/wip_new_website/static/site.css index bc1ba53edfc..c2ec1a18a2f 100644 --- a/www/wip_new_website/static/site.css +++ b/www/wip_new_website/static/site.css @@ -233,7 +233,8 @@ pre { background-color: var(--dark-code-bg); } -pre > samp { +pre > samp, +pre > code { overflow-x: auto; display: block; background-color: var(--dark-code-bg);