mirror of
https://github.com/roc-lang/roc.git
synced 2024-10-26 18:28:43 +03:00
Make a bunch of improvements to homepage and repl
This commit is contained in:
Richard Feldman
parent
0ec3f799dd
commit
fddca7501a
@ -13,33 +13,16 @@ use roc_reporting::report::StyleCodes;
|
||||
|
||||
use crate::colors::GREEN;
|
||||
|
||||
// TODO add link to repl tutorial(does not yet exist).
|
||||
// TODO add link to repl tutorial (does not yet exist).
|
||||
pub const TIPS: &str = concatcp!(
|
||||
"\nEnter an expression to evaluate, or a definition (like ",
|
||||
BLUE,
|
||||
"x = 1",
|
||||
END_COL,
|
||||
") to use later.\n\n",
|
||||
|
||||
if cfg!(target_family = "wasm") {
|
||||
// In the web REPL, the :quit command doesn't make sense. Just close the browser tab!
|
||||
// We use Shift-Enter for newlines because it's nicer than our workaround for Unix terminals (see below)
|
||||
concatcp!(
|
||||
BLUE,
|
||||
" - ",
|
||||
END_COL,
|
||||
PINK,
|
||||
"Shift-Enter",
|
||||
END_COL,
|
||||
" or ",
|
||||
PINK,
|
||||
"Ctrl-Enter",
|
||||
END_COL,
|
||||
" makes a newline\n",
|
||||
BLUE,
|
||||
" - ",
|
||||
END_COL,
|
||||
":help"
|
||||
)
|
||||
"" // In the web repl, we render tips in the UI around the repl instead of in the repl itself.
|
||||
} else {
|
||||
// We use ctrl-v + ctrl-j for newlines because on Unix, terminals cannot distinguish between Shift-Enter and Enter
|
||||
concatcp!(
|
||||
|
||||
@ -27,21 +27,21 @@
|
||||
<section class="home-goals-container">
|
||||
<div class="home-goals-column">
|
||||
<div class="home-goals-content">
|
||||
<h3 class="home-goals-title">Fast</h3>
|
||||
<h3 class="home-goals-title"><a href="/fast">Fast</a></h3>
|
||||
<p class="home-goals-description">Roc code is designed to build fast and run fast. <span class="nobreak-on-mobile">It compiles to machine code or WebAssembly.</span></p>
|
||||
<p class="home-goals-learn-more"><a href="/fast">What does <i>fast</i> mean here?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-goals-column">
|
||||
<div class="home-goals-content">
|
||||
<h3 class="home-goals-title">Friendly</h3>
|
||||
<h3 class="home-goals-title"><a href="/friendly">Friendly</a></h3>
|
||||
<p class="home-goals-description">Roc’s syntax, semantics, and included toolset <span class="nobreak-on-mobile">all prioritize user-friendliness.</span></p>
|
||||
<p class="home-goals-learn-more"><a href="/friendly">What does <i>friendly</i> mean here?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-goals-column">
|
||||
<div class="home-goals-content">
|
||||
<h3 class="home-goals-title">Functional</h3>
|
||||
<h3 class="home-goals-title"><a href="/functional">Functional</a></h3>
|
||||
<p class="home-goals-description">
|
||||
Roc has a small number of simple language primitives. <span class="nobreak-on-mobile">It’s a single-paradigm functional language.</span></p>
|
||||
<p class="home-goals-learn-more"><a href="/design_goals.html#functional">What does <i>functional</i> mean here?</a></p>
|
||||
@ -51,22 +51,24 @@
|
||||
|
||||
## Try Roc
|
||||
|
||||
You can try out Roc right now using this read-eval-print loop (REPL), which runs entirely in this browser in [WebAssembly](https://webassembly.org/).
|
||||
|
||||
(You can turn off your network connection and it will keep working!)
|
||||
|
||||
<div id="repl">
|
||||
<code class="history">
|
||||
<div id="help-text"></div>
|
||||
<div id="history-text"><div id="loading-message">Loading REPL WebAssembly module…please wait!</div></div>
|
||||
</code>
|
||||
<section id="source-input-wrapper">
|
||||
<textarea rows="5" id="source-input" placeholder="You can enter Roc code here once the REPL loads!"
|
||||
disabled></textarea>
|
||||
<section id="homepage-repl-container">
|
||||
<div id="repl-description" role="presentation">
|
||||
<p>You can try out Roc using this read-eval-print loop (<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a>), which is running in your browser in <a href="https://webassembly.org">WebAssembly</a>.</p>
|
||||
<p><code>Shift-Enter</code> adds a newline.</p>
|
||||
<p><span id="repl-arrow">←</span> Try entering <code>0.1 + 0.2</code></p>
|
||||
</div>
|
||||
<div id="repl" role="presentation">
|
||||
<code class="history">
|
||||
<div id="help-text"></div>
|
||||
<div id="history-text"><div id="loading-message">Loading REPL WebAssembly module…please wait!</div></div>
|
||||
</code>
|
||||
<section id="source-input-wrapper">
|
||||
<textarea rows="5" id="source-input" placeholder="You can enter Roc code here once the REPL loads!"
|
||||
onfocus="document.getElementById('repl-arrow').style.display='none';"></textarea>
|
||||
</section>
|
||||
</div>
|
||||
<script type="module" src="/wip/repl.js"></script>
|
||||
</section>
|
||||
</div>
|
||||
<script type="module" src="/wip/repl.js"></script>
|
||||
</div>
|
||||
|
||||
## Use Cases
|
||||
|
||||
|
||||
@ -39,9 +39,8 @@
|
||||
}
|
||||
|
||||
#source-input:focus {
|
||||
border: 1px solid var(--cyan);
|
||||
outline: 2px solid var(--primary-1);
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.history {
|
||||
@ -79,7 +78,7 @@
|
||||
}
|
||||
|
||||
.panic {
|
||||
color: red;
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.input-line-prefix {
|
||||
@ -87,7 +86,7 @@
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: red;
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
|
||||
@ -41,9 +41,7 @@ repl.elemSourceInput.addEventListener("keydown", onInputKeydown);
|
||||
repl.elemSourceInput.addEventListener("keyup", onInputKeyup);
|
||||
roc_repl_wasm.default("/wip/roc_repl_wasm_bg.wasm").then(async (instance) => {
|
||||
repl.elemHistory.querySelector("#loading-message").remove();
|
||||
repl.elemSourceInput.disabled = false;
|
||||
repl.elemSourceInput.placeholder = "Type some Roc code and press Enter.";
|
||||
repl.elemSourceInput.focus();
|
||||
repl.compiler = instance;
|
||||
|
||||
// Get help text from the compiler, and display it at top of the history panel
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
--blue: #05006d;
|
||||
--violet: #7c38f5;
|
||||
--violet-bg: #ece2fd;
|
||||
--magenta: #a20031;
|
||||
--magenta: #ff32cf;
|
||||
|
||||
--primary-1: #9b6bf2;
|
||||
--primary-2: #7c38f5;
|
||||
@ -16,6 +16,7 @@
|
||||
--link-color: var(--primary-2);
|
||||
--code-link-color: var(--primary-2);
|
||||
--text-color: #000;
|
||||
--heading-color: #333;
|
||||
--text-hover-color: var(--primary-2);
|
||||
--body-bg-color: #ffffff;
|
||||
--border-color: #717171;
|
||||
@ -31,6 +32,7 @@
|
||||
--body-max-width: 1024px;
|
||||
--top-bar-height: 50px;
|
||||
--homepage-intro-box-width: 328px;
|
||||
--dark-code-bg: #202746;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -99,9 +101,7 @@ h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: "Neuton";
|
||||
font-weight: normal;
|
||||
color: var(--primary-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -110,6 +110,10 @@ h1 {
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
border-bottom: 4px solid var(--cyan);
|
||||
margin: 36px 0;
|
||||
padding: 36px 0;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -209,6 +213,66 @@ pre>samp {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#homepage-repl-container {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-description {
|
||||
padding: 0 36px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-description p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-description a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-description a:hover {
|
||||
color: var(--primary-1);
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl {
|
||||
flex: 1;
|
||||
border: 2px solid #444;
|
||||
box-shadow: 4px 4px var(--cyan);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl, #homepage-repl-container #repl code {
|
||||
color: white;
|
||||
background-color: var(--dark-code-bg);
|
||||
}
|
||||
|
||||
#homepage-repl-container #source-input {
|
||||
margin-bottom: -5px;
|
||||
font-size: 18px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
#homepage-repl-container #source-input-wrapper {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#homepage-repl-container p {
|
||||
position: relative; /* Needed for the repl arrow's position: absolute */
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-arrow {
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
color: var(--primary-1);
|
||||
font-size: 60px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -64px;
|
||||
text-shadow: 1px 1px 1px #444;
|
||||
}
|
||||
|
||||
.repl-prompt:before {
|
||||
/* Add this using CSS so it isn't selectable, which would be annoying when trying to copy/paste! */
|
||||
color: var(--repl-prompt);
|
||||
@ -301,7 +365,7 @@ li {
|
||||
|
||||
#first-code-sample,
|
||||
#first-code-sample .code-snippet {
|
||||
background-color: #202746;
|
||||
background-color: var(--dark-code-bg);
|
||||
}
|
||||
|
||||
#first-code-sample .string {
|
||||
@ -725,7 +789,7 @@ code .dim {
|
||||
justify-content: space-between;
|
||||
gap: 54px;
|
||||
width: 100%;
|
||||
margin-bottom: 70px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.home-goals-column {
|
||||
@ -740,8 +804,7 @@ code .dim {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
border: 1px solid #000;
|
||||
/* box-shadow: 4px 4px var(--border-color); */
|
||||
border: 2px solid #000;
|
||||
background-color: var(--cyan);
|
||||
color: black;
|
||||
}
|
||||
@ -753,6 +816,8 @@ code .dim {
|
||||
padding-top: 2px;
|
||||
color: white;
|
||||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
letter-spacing: 1px;
|
||||
word-spacing: 3px;
|
||||
}
|
||||
|
||||
.home-goals-content a {
|
||||
@ -787,6 +852,20 @@ code .dim {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.home-goals-title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.home-goals-learn-more a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.home-goals-description {
|
||||
line-height: 1.5;
|
||||
margin-bottom: 2em;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user