mirror of
https://github.com/roc-lang/roc.git
synced 2024-09-19 23:07:33 +03:00
Revise homepage color scheme and content
This commit is contained in:
Richard Feldman
parent
257b397fd1
commit
fed75cee67
@ -10,14 +10,15 @@ view =
|
||||
output =
|
||||
# # Select anything here to see an explanation.
|
||||
# main =
|
||||
# cacheUserInfo (Path.fromStr "url.txt")
|
||||
# Path.fromStr "url.txt"
|
||||
# |> storeEmail
|
||||
# |> Task.onErr handleErr
|
||||
#
|
||||
# cacheUserInfo = \filename ->
|
||||
# storeEmail = \filename ->
|
||||
# url <- File.readUtf8 filename |> Task.await
|
||||
# { username, email } <- Http.get url Json.codec |> Task.await
|
||||
# { name, email } <- Http.get url Json.codec |> Task.await
|
||||
#
|
||||
# File.writeUtf8 (Path.fromStr "\(username).txt") email
|
||||
# File.writeUtf8 (Path.fromStr "\(name).txt") email
|
||||
#
|
||||
# handleUrl = \err ->
|
||||
# when err is
|
||||
@ -25,21 +26,45 @@ view =
|
||||
# FileReadErr path _ -> Stderr.line "Error reading \(Path.display path)"
|
||||
# FileWriteErr path _ -> Stderr.line "Error writing \(Path.display path)"
|
||||
sectionsToStr [
|
||||
Desc [Comment "<span class='desktop'>Click anything here to see an explanation.</span><span class='mobile'>Tap anything here to\n# see an explanation.</span>"] "<p>Comments in Roc begin with a <code>#</code> and go to the end of the line.</p>",
|
||||
Desc [Comment "<span class='desktop'>Click anything here to see an explanation.</span><span class='mobile'>Tap anything here to\n# see an explanation.</span>"] "<p><a href=\"/tutorial#comments\">Comments</a> in Roc begin with a <code>#</code> and go to the end of the line.</p>",
|
||||
Newline,
|
||||
Desc [Ident "main", Kw "="] "<p>This begins the definition of <code class=\"ident\">main</code>, which is the code our program will run when it starts up.</p><p>In Roc, assignments are always constant, which means writing <code class=\"ident\">main =</code> again in the same scope would give an error.</p><p><a href=\"https://www.roc-lang.org/tutorial#naming-things\">Learn more about naming things</a></p>",
|
||||
Desc [Ident "main", Kw "="] "<p>This begins the definition of <code class=\"ident\">main</code>, which is where our program will begin.</p><p>In Roc, <a href=\"/tutorial#https://www.roc-lang.org/tutorial#naming-things\">assignments are always constant</a>, which means writing <code class=\"ident\">main =</code> again in the same scope would give an error.</p>",
|
||||
Indent,
|
||||
Desc [Ident "cacheUserInfo", Str "\"url.txt\""] "<p>This calls the <code class=\"ident\">cacheUserInfo</code> function, passing the string <code class=\"str\">\"url.txt\"</code> as an argument.</p><p>In Roc, function arguments are separated with spaces and/or newlines. Parentheses are only used in nested function calls.</p>",
|
||||
Desc [Ident "Path.fromStr", Str "\"url.txt\""] "<p>This converts the string <code>\"url.txt\"</code> into a <code>Path</code> by passing it to the <code>Path.fromStr</code> function.</p><p>Function arguments are separated with whitespace rather than commas. Parens are only needed in <a href=\"/tutorial#calling-functions\">nested function calls</a>.</p>",
|
||||
Newline,
|
||||
Desc [Kw "|>", Ident "Task.onErr", Ident "handleErr"] "<p>TODO</p>",
|
||||
Desc [Kw "|>", Ident "storeEmail"] "<p>The <a href=\"/tutorial#the-pipe-operator\">pipe operator</a> (<code>|></code>) is syntax sugar for passing the previous answer to the next function in the “pipeline.”</p><p>So far this pipeline desugars to:</p><pre><code>storeEmail\n (Path.fromStr \"url.txt\")</code></pre><p>The next <code>|></code> continues the pipeline.</p>",
|
||||
Newline,
|
||||
Desc [Kw "|>", Ident "Task.onErr", Ident "handleErr"] "<p>If the task returned by the previous step in the pipeline fails, pass its error to <code>handleErr</code>.</p><p>The whole pipeline now desugars to:</p><pre><code>Task.onErr\n (storeEmail …)\n handleErr</code></pre><p>It creates a <code>Path</code> from a string, then stores an email based on that path, then handles any errors that happened.</p>",
|
||||
Outdent,
|
||||
Newline,
|
||||
Desc [Ident "cacheUserInfo", Kw "=", Lambda ["filename"]] "<p>TODO</p>",
|
||||
Desc [Ident "storeEmail", Kw "=", Lambda ["filename"]] "<p>This <a href=\"/tutorial#defining-functions\">defines a function</a> named <code>storeEmail</code>.</p><p>In Roc, functions are ordinary values, so we assign names to them using <code>=</code> like with any other value.</p><p>The <code>\\arg1, arg2 -></code> syntax begins a function, and the part after <code>-></code> is the function's body.</p>",
|
||||
Indent,
|
||||
Desc [Ident "url", Kw "<-", Ident "File.readUtf8", Ident "filename"] "<p>TODO backpassing</p>",
|
||||
Desc [Ident "url", Kw "<-", Ident "File.readUtf8", Ident "filename", Kw "|>", Ident "Task.await"] "<p>This reads the contents of the file (as a <a href=\"https://en.wikipedia.org/wiki/UTF-8\">UTF-8</a> string) into <code>url</code>.</p><p>The <code><-</code> operator does <a href=\"/tutorial#backpassing\">backpassing</a>, which is syntax sugar for defining a function. This whole line desugars to:</p><pre><code>Task.await\n (File.readUtf8 filename)\n \\url -></code></pre><p>The lines after this one form the body of the <code>\\url -></code> <a href=\"https://en.wikipedia.org/wiki/Callback_(computer_programming)\">callback</a> function, which runs if the file read succeeds.</p>",
|
||||
Newline,
|
||||
Desc [Literal "{", Ident "name", Literal ",", Ident "email", Literal "}"] "<p>This is <a href=\"/tutorial#record-destructuring\">record destructuring</a> syntax.</p><p>It takes ",
|
||||
Desc [Kw "<-", Ident "Http.get", Ident "url", Ident "Json.codec"] "<p>TODO Json.codec, type inference, early error</p>",
|
||||
Desc [Kw "|>", Ident "Task.await"] "<p>TODO Task.await</p>",
|
||||
Newline,
|
||||
# Desc [Literal "{", Ident "username", Literal ",", Ident "email", Literal "}", Kw "<-"] "<p>TODO record destructuring and backpassing</p>",
|
||||
Desc [Ident "dest", Kw "=", Str "\"\\(name).txt\""] "<p>The <code>\\(name)</code> will be replaced in the string with the contents of <code>name</code>. This is called <a href=\"/tutorial#string-interpolation\">string interpolation</a>.</p><p>Note that there's no <code>|> Task.await</code> on this line. Earlier lines needed that because they were I/O <a href=\"/tutorial#tasks\">tasks</a>, but this line is an ordinary assignment, so there's no task to await.</p>",
|
||||
Newline,
|
||||
Desc [Literal "_"] "<p>In Roc, if you don’t want to bother naming something, you can always choose the name <code>_</code>.</p><p>You can name as many things as you like <code>_</code>, even in the same scope, but you can’t reference anything named <code>_</code>.</p><p>So it’s only useful for when you don’t want to choose a name.</p>",
|
||||
Desc [Kw "<-", Ident "File.writeUtf8", Ident "(Path.fromStr dest)", Ident "email", Kw "|>", Ident "Task.await"] "<p>This writes the <code>email</code> string to the file encoded as <a href=\"https://en.wikipedia.org/wiki/UTF-8\">UTF-8</a>.</p><p>The parentheses here show where the nested call to <code>Path.fromStr</code> begins and ends.</p>",
|
||||
Newline,
|
||||
Desc [Ident "Stdout.line", Str "\"Wrote email to \\(dest)\""] "<p>Note that there’s no <code>|> Task.await</code> here, like there were after earlier tasks.</p><p>That’s because, although <code>Stdout.line</code> does return a <a href=\"/tutorial#tasks\">task</a>, we don’t need to await it because nothing else happens after it.</p>",
|
||||
Outdent,
|
||||
Newline,
|
||||
Desc [Ident "handleErr", Kw "=", Lambda ["err"]] "<p>Like <code>storeEmail</code>, <code>handleErr</code> is also a function.</p><p>Although type annotations are optional everywhere in Roc—because the language has 100% type inference—you could add type annotations to <code>main</code>, <code>storeEmail</code>, and <code>handleErr</code> if you wanted to.</p>",
|
||||
Indent,
|
||||
Desc [Kw "when", Ident "err", Kw "is"] "<p>TODO when</p>",
|
||||
Indent,
|
||||
Desc [Literal "HttpErr", Ident "path", Kw "_", Kw "->"] "<p>TODO</p>",
|
||||
Desc [Ident "Stderr.line", Str "\"Error fetching URL \\(url)\""] "<p>TODO</p>",
|
||||
Newline,
|
||||
Desc [Literal "FileReadErr", Ident "path", Kw "_", Kw "->"] "<p>TODO</p>",
|
||||
Desc [Ident "Stderr.line", Str "\"Error reading from \\(Path.display path)\""] "<p>TODO</p>",
|
||||
Newline,
|
||||
Desc [Literal "FileWriteErr", Ident "path", Kw "_", Kw "->"] "<p>TODO</p>",
|
||||
Desc [Ident "Stderr.line", Str "\"Error writing to \\(Path.display path)\""] "<p>TODO</p>",
|
||||
]
|
||||
|
||||
pre [] [
|
||||
@ -52,7 +77,7 @@ tokensToStr : List Token -> Str
|
||||
tokensToStr = \tokens ->
|
||||
List.walk tokens "" \buf, token ->
|
||||
bufWithSpace =
|
||||
if Str.isEmpty buf then
|
||||
if Str.isEmpty buf || token == Literal "," then
|
||||
buf
|
||||
else
|
||||
Str.concat buf " "
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<div class="home-goals-column">
|
||||
<div 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. It compiles to machine code or <a href="https://webassembly.org/">WebAssembly</a>.</p>
|
||||
<p class="home-goals-description">Roc code is designed to build fast and run fast. It compiles to machine code or WebAssembly.</p>
|
||||
<p class="home-goals-learn-more"><a href="/fast">What does <i>fast</i> mean here?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,7 +43,7 @@
|
||||
<div 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. It's a single-paradigm <a href="https://en.wikipedia.org/wiki/Functional_programming">functional</a> language.</p>
|
||||
Roc has a small number of simple language primitives. It's a single-paradigm functional language.</p>
|
||||
<p class="home-goals-learn-more"><a href="/design_goals.html#functional">What does <i>functional</i> mean here?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +64,33 @@
|
||||
<script type="module" src="/wip/repl.js"></script>
|
||||
</div>
|
||||
|
||||
## Examples
|
||||
## Use Cases
|
||||
|
||||
Roc can be used for lots of things, but currently these are the best-supported.
|
||||
|
||||
### Command-Line Interfaces (CLIs)
|
||||
|
||||
### Web Servers
|
||||
|
||||
### Embedding
|
||||
|
||||
Calling Roc functions from another language
|
||||
|
||||
### Others
|
||||
|
||||
You can create your own! Learn about **platforms and applications**...
|
||||
|
||||
## Larger Example
|
||||
|
||||
Here’s a larger example that shows a few different aspects of Roc:
|
||||
* File I/O and HTTP
|
||||
* Pattern matching for error handling
|
||||
* JSON deserialization via type inference
|
||||
* Common syntax sugar: string interpolation, pipelines, and backpassing
|
||||
|
||||
The [tutorial](/tutorial) introduces these gradually and in more depth, but this gives you a brief overview.
|
||||
|
||||
<!-- ## More Examples
|
||||
|
||||
We have developed a number of smaller code [examples](https://github.com/roc-lang/examples) which demonstrate how to use Roc. These cover a range of topics from basic syntax to more advanced features such as random number generation and using the popular `Task` feature.
|
||||
|
||||
@ -90,4 +116,4 @@ If you'd like to learn more about Roc check out one of these videos:
|
||||
* [A taste of Roc](https://youtu.be/6qzWm_eoUXM) - September 23, 2021 (syntax, application examples)
|
||||
* [Roc at the Philly ETE conference](https://youtu.be/cpQwtwVKAfU?t=75) - May 6, 2021 (platforms and applications)
|
||||
* [Roc on Zig Showtime](https://youtu.be/FMyyYdFSOHA) - April 24, 2021 (making a platform)
|
||||
* [Roc at the Berlin FP Meetup](https://youtu.be/ZnYa99QoznE?t=4790) - September 1, 2020 (overall vision for the language)
|
||||
* [Roc at the Berlin FP Meetup](https://youtu.be/ZnYa99QoznE?t=4790) - September 1, 2020 (overall vision for the language) -->
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
--gray: #717171;
|
||||
--orange: #bf5000;
|
||||
--green: #0b8400;
|
||||
--cyan: #067c94;
|
||||
--cyan: #1bd6bd;
|
||||
--blue: #05006d;
|
||||
--violet: #7c38f5;
|
||||
--violet-bg: #ece2fd;
|
||||
@ -99,24 +99,20 @@ h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: "Permanent Marker";
|
||||
padding-left: 12px;
|
||||
font-family: "Neuton";
|
||||
font-weight: normal;
|
||||
color: var(--primary-2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--primary-1);
|
||||
font-size: 5rem;
|
||||
text-shadow: 1px 1px 1px #010101;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--primary-1);
|
||||
font-size: 3rem;
|
||||
text-shadow: 1px 1px 1px #010101;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--cyan);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@ -259,7 +255,7 @@ td:last-child {
|
||||
p,
|
||||
aside,
|
||||
li {
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: 18px;
|
||||
line-height: 1.85rem;
|
||||
}
|
||||
|
||||
@ -272,11 +268,13 @@ li {
|
||||
|
||||
#homepage-h1 {
|
||||
color: #222;
|
||||
font-family: "Merriweather";
|
||||
text-shadow: none;
|
||||
font-family: inherit;
|
||||
font-size: 64px;
|
||||
padding: 0;
|
||||
padding-top: 60px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
#homepage-logo {
|
||||
@ -290,8 +288,10 @@ li {
|
||||
#first-code-sample {
|
||||
width: var(--homepage-intro-box-width);
|
||||
margin-top: 60px;
|
||||
margin-bottom: 70px;
|
||||
line-height: 1.85em;
|
||||
color: #fcf9fd;
|
||||
box-shadow: 4px 4px 0px var(--cyan);
|
||||
}
|
||||
|
||||
#first-code-sample .kw,
|
||||
@ -601,6 +601,10 @@ li {
|
||||
td {
|
||||
border-color: var(--gray);
|
||||
}
|
||||
|
||||
#first-code-sample {
|
||||
border: 1px solid var(--cyan);
|
||||
}
|
||||
}
|
||||
|
||||
/* Comments `#` and Documentation comments `##` */
|
||||
@ -715,8 +719,9 @@ code .dim {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 60px;
|
||||
gap: 54px;
|
||||
width: 100%;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.home-goals-column {
|
||||
@ -731,20 +736,24 @@ code .dim {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
border: 2px solid var(--primary-2);
|
||||
box-shadow: 4px 4px var(--primary-2)
|
||||
border: 1px solid #000;
|
||||
/* box-shadow: 4px 4px var(--border-color); */
|
||||
background-color: var(--cyan);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.home-goals-content h3 {
|
||||
font-family: inherit;
|
||||
text-transform: lowercase;
|
||||
color: var(--primary-2);
|
||||
padding-bottom: 12px;
|
||||
padding-top: 2px;
|
||||
color: white;
|
||||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.home-goals-content p {
|
||||
font-size: 18px;
|
||||
.home-goals-content a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.home-goals-content>h3 {
|
||||
@ -786,7 +795,7 @@ code .dim {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
height: 508px;
|
||||
padding-right: 300px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user