mirror of
https://github.com/roc-lang/roc.git
synced 2024-09-19 23:07:33 +03:00
Merge remote-tracking branch 'origin/main' into improve-wip-website
This commit is contained in:
Richard Feldman
commit
65ba4250c5
5
.gitignore
vendored
5
.gitignore
vendored
@ -76,3 +76,8 @@ www/src/roc-tutorial
|
||||
|
||||
# checkmate
|
||||
checkmate_*.json
|
||||
|
||||
# ignore the examples folder in the WIP website, this is copied from roc-lang/examples in when building the site
|
||||
www/wip_new_website/content/examples
|
||||
www/examples-main.zip
|
||||
www/examples-main
|
||||
3
crates/cli/tests/fixtures/.gitignore
vendored
3
crates/cli/tests/fixtures/.gitignore
vendored
@ -6,3 +6,6 @@ libapp.so
|
||||
metadata
|
||||
preprocessedhost
|
||||
packages-test
|
||||
|
||||
multi-dep-str/multi-dep-str
|
||||
multi-dep-thunk/multi-dep-thunk
|
||||
5
crates/cli_testing_examples/.gitignore
vendored
5
crates/cli_testing_examples/.gitignore
vendored
@ -5,3 +5,8 @@ dynhost
|
||||
preprocessedhost
|
||||
metadata
|
||||
expects
|
||||
|
||||
benchmarks/rbtree-ck
|
||||
benchmarks/rbtree-insert
|
||||
benchmarks/test-astar
|
||||
benchmarks/test-base64
|
||||
|
||||
5
examples/.gitignore
vendored
5
examples/.gitignore
vendored
@ -9,3 +9,8 @@ helloWorld
|
||||
helloWorldNoURL
|
||||
inspect-gui
|
||||
inspect-logging
|
||||
swiftui
|
||||
parser/examples/example
|
||||
gui/hello-gui
|
||||
gui/breakout/breakout
|
||||
gui/breakout/hello-gui
|
||||
12
www/build.sh
12
www/build.sh
@ -19,6 +19,18 @@ rm -rf build/
|
||||
cp -r public/ build/
|
||||
mkdir build/wip # for WIP site
|
||||
|
||||
# download the latest code for the examples
|
||||
echo 'Downloading latest examples...'
|
||||
curl -fLJO https://github.com/roc-lang/examples/archive/refs/heads/main.zip
|
||||
unzip examples-main.zip
|
||||
cp -R examples-main/examples/ wip_new_website/content/examples/
|
||||
|
||||
# relace links in wip_new_website/content/examples/index.md to work on the WIP site
|
||||
sed -i 's|](/|](/wip/examples/|g' wip_new_website/content/examples/index.md
|
||||
|
||||
# clean up examples artifacts
|
||||
rm -rf examples-main examples-main.zip
|
||||
|
||||
# download fonts just-in-time so we don't have to bloat the repo with them.
|
||||
DESIGN_ASSETS_COMMIT="4d949642ebc56ca455cf270b288382788bce5873"
|
||||
DESIGN_ASSETS_TARFILE="roc-lang-design-assets-4d94964.tar.gz"
|
||||
|
||||
3
www/generate_tutorial/.gitignore
vendored
3
www/generate_tutorial/.gitignore
vendored
@ -1 +1,2 @@
|
||||
roc-tutorial
|
||||
tutorial
|
||||
src/output/tutorial.html
|
||||
@ -14,12 +14,12 @@ view : Str -> Html.Node
|
||||
view = \htmlContent ->
|
||||
html [lang "en"] [
|
||||
head [] [
|
||||
meta [charset "utf-8"] [],
|
||||
meta [charset "utf-8"],
|
||||
Html.title [] [text "Roc Tutorial"],
|
||||
meta [name "description", content "Learn how to use the Roc programming language."] [],
|
||||
meta [name "viewport", content "width=device-width"] [],
|
||||
link [rel "stylesheet", href "/site.css"] [],
|
||||
link [rel "icon", href "/favicon.svg"] [],
|
||||
meta [name "description", content "Learn how to use the Roc programming language."],
|
||||
meta [name "viewport", content "width=device-width"],
|
||||
link [rel "stylesheet", href "/site.css"],
|
||||
link [rel "icon", href "/favicon.svg"],
|
||||
],
|
||||
body [] [
|
||||
viewNavbar,
|
||||
|
||||
@ -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>
|
||||
@ -71,6 +71,12 @@
|
||||
<script type="module" src="/wip/repl.js"></script>
|
||||
</section>
|
||||
|
||||
## Examples
|
||||
|
||||
**TODO MOVE ME TO A BETTER LOCATION**
|
||||
|
||||
[EXAMPLES](/wip/examples)
|
||||
|
||||
## [Use Cases](#use-cases) {#use-cases}
|
||||
|
||||
Roc is a very young language (it doesn’t even have a numbered release yet, just nightly builds!) but it can already be used for several things if you’re up for being an early adopter—with all the bugs and missing features which come with that territory.
|
||||
@ -79,11 +85,21 @@ Currently these use cases are the best-supported:
|
||||
|
||||
### Command-Line Interfaces (CLIs)
|
||||
|
||||
You can use Roc to write command-line tools and scripts.
|
||||
|
||||
Checkout [roc-lang/basic-cli](https://github.com/roc-lang/basic-cli) for a basic platform to build your own CLI tools.
|
||||
|
||||
### Web Servers
|
||||
|
||||
You can use Roc to write web servers.
|
||||
|
||||
*(Coming soon)*
|
||||
|
||||
### Embedding
|
||||
|
||||
Calling Roc functions from another language
|
||||
You can call Roc from another language. See [basic examples](https://github.com/roc-lang/roc/tree/main/examples) to help you get started with Node.js, JVM, Ruby, Python, Swift, and WASM.
|
||||
|
||||
It is easy to add support for other languages too.
|
||||
|
||||
### Others
|
||||
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
#repl-prompt {
|
||||
position: relative;
|
||||
left: 16px;
|
||||
top: 41px;
|
||||
top: 25px;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
height: 0;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--light-cyan);
|
||||
|
||||
@ -209,36 +209,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.
|
||||
@ -247,8 +247,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
|
||||
@ -262,7 +262,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)
|
||||
@ -346,14 +346,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.
|
||||
|
||||
@ -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.
|
||||
@ -235,7 +235,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);
|
||||
@ -274,7 +275,8 @@ pre>samp {
|
||||
min-width: 496px; /* Make sure the placeholder doesn't wrap */
|
||||
}
|
||||
|
||||
#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 +480,7 @@ li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#tutorial-toc-toggle:checked+#tutorial-toc {
|
||||
#tutorial-toc-toggle:checked + #tutorial-toc {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -614,7 +616,7 @@ li {
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
fill: #8A66DE;
|
||||
fill: #8a66de;
|
||||
}
|
||||
|
||||
#homepage-h1 {
|
||||
@ -644,7 +646,8 @@ li {
|
||||
border-color: var(--gray);
|
||||
}
|
||||
|
||||
#first-code-sample, #homepage-repl-container #repl {
|
||||
#first-code-sample,
|
||||
#homepage-repl-container #repl {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@ -758,7 +761,6 @@ code .dim {
|
||||
text-shadow: 1px 1px 1px #010101;
|
||||
}
|
||||
|
||||
|
||||
/* HOME GOALS */
|
||||
|
||||
.home-goals-container {
|
||||
@ -845,7 +847,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 {
|
||||
@ -857,14 +860,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;
|
||||
}
|
||||
@ -879,7 +882,7 @@ code .dim {
|
||||
}
|
||||
|
||||
.interactive-example label:hover,
|
||||
.interactive-radio:checked+label {
|
||||
.interactive-radio:checked + label {
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -903,7 +906,7 @@ code .dim {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.interactive-radio:checked+label+.interactive-desc {
|
||||
.interactive-radio:checked + label + .interactive-desc {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user