Skip to content

Commit

Permalink
Merge branch 'wip-updates' into more-wip-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukewilliamboswell
lukewilliamboswell committed Nov 3, 2023
2 parents a59d295 + 6ea34a7 commit 15c705f
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 126 deletions.
12 changes: 6 additions & 6 deletions www/wip_new_website/content/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,22 @@

<section class="home-goals-container" aria-label="Roc's Design: Fast, Friendly, Functional">
<div class="home-goals-column">
<a href="/wip/fast" class="home-goals-content">
<h2 class="home-goals-title">Fast</h2>
<a href="/wip/fast.html" class="home-goals-content">
<h3 class="home-goals-title">Fast</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">What does <i>fast</i> mean here?</p>
</a>
</div>
<div class="home-goals-column">
<a href="/wip/friendly" class="home-goals-content">
<h2 class="home-goals-title">Friendly</h2>
<a href="/wip/friendly.html" class="home-goals-content">
<h3 class="home-goals-title">Friendly</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">What does <i>friendly</i> mean here?</p>
</a>
</div>
<div class="home-goals-column">
<a href="/wip/functional" class="home-goals-content">
<h2 class="home-goals-title">Functional</h2>
<a href="/wip/functional.html" class="home-goals-content">
<h3 class="home-goals-title">Functional</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">What does <i>functional</i> mean here?</p>
Expand Down
151 changes: 75 additions & 76 deletions www/wip_new_website/static/repl.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
#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 {
Expand All @@ -25,29 +25,29 @@
}

#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,
Expand All @@ -61,107 +61,106 @@
}

#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;
}
}
67 changes: 36 additions & 31 deletions www/wip_new_website/static/repl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,36 +184,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.
Expand All @@ -222,8 +222,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
Expand All @@ -237,7 +237,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)
Expand Down Expand Up @@ -321,14 +321,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.
Expand Down
Loading

0 comments on commit 15c705f

Please sign in to comment.