mirror of
https://github.com/roc-lang/roc.git
synced 2024-09-19 23:07:33 +03:00
Make a little repl mini-tutorial
This commit is contained in:
parent
cd59b3f594
commit
fe293abb01
@ -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"],
|
||||
],
|
||||
],
|
||||
]
|
||||
|
@ -13,6 +13,8 @@ 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
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -36,11 +38,11 @@ const repl = {
|
||||
},
|
||||
{
|
||||
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>—<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>—<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>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>`
|
||||
}
|
||||
],
|
||||
|
||||
|
@ -84,6 +84,29 @@ hr {
|
||||
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.
|
||||
* 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;
|
||||
}
|
||||
|
||||
.welcome-to-roc {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
padding-right: 60px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
code,
|
||||
samp {
|
||||
font-family: var(--font-mono);
|
||||
@ -279,6 +309,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,
|
||||
@ -528,6 +559,10 @@ li {
|
||||
padding: 12px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhone SE and similar */
|
||||
|
Loading…
Reference in New Issue
Block a user