roc-lang/roc
1
1
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2024-09-20 07:17:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make a little repl mini-tutorial

Browse Source
This commit is contained in:
Richard Feldman 2023-11-06 20:01:32 -05:00
parent cd59b3f594
commit fe293abb01
No known key found for this signature in database
GPG Key ID: F1F21AA5B1D9E43B
3 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
www/wip_new_website/main.roc
View File

@ -97,13 +97,13 @@ viewNavbar = \page ->
header [id "top-bar"] [ header [id "top-bar"] [
nav [ariaLabel "primary"] [ 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"] [ div [id "top-bar-links"] [
a [href "/wip/tutorial.html"] [text "tutorial"], a [href "/wip/tutorial"] [text "tutorial"],
a [href "/wip/install.html"] [text "install"], a [href "/wip/install"] [text "install"],
a [href "/wip/community.html"] [text "community"], a [href "/wip/community"] [text "community"],
a [href "/wip/docs.html"] [text "docs"], a [href "/wip/docs"] [text "docs"],
a [href "/wip/donate.html"] [text "donate"], a [href "/wip/donate"] [text "donate"],
], ],
], ],
] ]

6
www/wip_new_website/static/repl.js
View File

@ -13,6 +13,8 @@ import * as roc_repl_wasm from "./roc_repl_wasm.js";
const isHomepage = document.getElementById("homepage-repl-container") != null; 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 // REPL state
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -36,11 +38,11 @@ const repl = {
}, },
{ {
match: ((input) => input.replace(/ /g, "").match(/^name="/i)), 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 string you entered.</p><p>Try using this definition by entering <code>\"Hi, \\(name)!\"</code></p>" 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)), match: ((input) => input.match(/^["][^\\]+\\\(name\)/i)),
show: "<p>nice</p>" 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>`
} }
], ],

35
www/wip_new_website/static/site.css
View File

@ -84,6 +84,29 @@ hr {
fill: #8257e5; 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;
}
/* Used for e.g. displaying the instruction "Click" on desktop and "Touch" on mobile. /* 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. * When we think we're on mobile (based on max-width), we can switch the instruction.
*/ */
@ -197,6 +220,13 @@ main {
box-sizing: border-box; box-sizing: border-box;
} }
.welcome-to-roc {
white-space: nowrap;
overflow-x: hidden;
padding-right: 60px;
margin-bottom: 12px;
}
code, code,
samp { samp {
font-family: var(--font-mono); font-family: var(--font-mono);
@ -279,6 +309,7 @@ pre > code {
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
min-height: 0; /* On /repl on mobile, this expands to fill the screen, which we don't want */ min-height: 0; /* On /repl on mobile, this expands to fill the screen, which we don't want */
margin-right: 6px; margin-right: 6px;
max-width: 50%;
} }
#homepage-repl-container #repl, #homepage-repl-container #repl,
@ -528,6 +559,10 @@ li {
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
} }
#homepage-repl-container #repl {
max-width: none;
}
} }
/* iPhone SE and similar */ /* iPhone SE and similar */