Meson/wren
1
0
Fork 0
forked from Mirror/wren
Code Pull Requests Activity

Recolor doc site.

Browse Source
This commit is contained in:
Bob Nystrom
2014-04-07 21:03:16 -07:00
parent 57fa694c36
commit 6b1b1083c9
4 changed files with 68 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
doc/site/functions.markdown
View File

@ -8,9 +8,7 @@ Functions are objects like everything else in Wren, instances of the `Fn` class.
Most of the time you create a function just to pass it to some method. For example, if you want to filter a [list](lists.html) by some criteria, you'll call its `where` method, passing in a function that defines the predicate you're filtering on.
Since that's the most common usage pattern, Wren's syntax optimizes for that. Taking a page from Ruby, a function is created by passing a *block argument* to a method.
At it's simplest, it looks like this:
Since that's the most common usage pattern, Wren's syntax optimizes for that. Taking a page from Ruby, a function is created by passing a *block argument* to a method. At it's simplest, it looks like this:
:::dart
blondie.callMe {
@ -19,7 +17,7 @@ At it's simplest, it looks like this:
Here we're invoking the `callMe` method on `blondie`. We're passing one argument, a function whose body is everything between that pair of curly braces.
Methods that receive a block argument take as a normal parameter. `callMe` could be defined like so:
Methods that take a block argument receive it as a normal parameter. `callMe` could be defined like so:
:::dart
class Blondie {
@ -47,7 +45,7 @@ Block arguments are purely sugar for creating a function and passing it in one l
IO.print("Hi!")
}
As you can see it takes a block argument too! All the constructor does it return that, so there's no special syntax here.
As you can see it takes a block argument too! All the constructor does it return that, so this exists purely as a convenience method for you.
## Calling functions
@ -73,9 +71,38 @@ Functions expose a `call` method that executes the body of the function. Of cour
## Function parameters
**TODO**
Of course, functions aren't very useful if you can't pass values to them. The functions that we've seen so far take no parameters. To change that, you can provide a parameter list surrounded by `|` immediately after the opening brace of the body, like so:
**TODO: Implicit returns from short bodies.**
:::dart
blondie.callMe {|first, last|
IO.print("Hi, " + first + " " + last + "!")
}
Here we're passing a function to `greet` that takes two parameters, `first` and `last`. They are passed to the function when it's called:
:::dart
class Blondie {
callMe(fn) {
fn.call("Debbie", "Harry")
}
}
It's an error to call a function with fewer or more arguments than its parameter list expects.
## Returning values
Function bodies return values just like methods. If the body is a single expression—more precisely if there is no newline after the `{` or parameter list—then the function implicitly returns the value of the expression.
Otherwise, the body returns `null` by default. You can explicitly return a value using a `return` statement. In other words, these two functions do the same thing:
:::dart
new Fn { "return value" }
new Fn {
return "return value"
}
**TODO: Non-local returns?**
## Closures

2
doc/site/lists.markdown
View File

@ -7,7 +7,7 @@ A list is a compound object that holds a collection of elements identified by in
Here, we've created a list of three elements. Notice that the elements don't have to be the same type.
## Accessing Elements
## Accessing elements
You can access an element from a list by calling the [subscript operator](method-calls.html#subscript-operators) on it with the index of the element you want. Like most languages, indexes start at zero:

64
doc/site/style.scss
View File

@ -1,16 +1,16 @@
//$header: "Sanchez", helvetica, arial, sans-serif;
$header: "Dosis", helvetica, arial, sans-serif;
$body: "Source Sans Pro", georgia, serif;
$code: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
// roboto: boring
// dosis: nice, "wren" looks good, bit nerdy
// mont: nice and wide
// raleway: great w
$primary: hsl(30, 40%, 65%);
$link: hsl(30, 50%, 40%);
$link-hover: hsl(195, 100%, 40%);
$link-glow: hsla(195, 100%, 60%, 0.2);
$p: 195;
$secondary-hue: 195;
$light-gray: hsl($p, 20%, 80%);
$light-gray: hsl(30, 10%, 80%);
$lighter-gray: hsl(30, 10%, 93%);
* {
box-sizing: border-box;
@ -37,38 +37,36 @@ h2 {
}
h3 {
font: normal 18px $header;
font: normal 20px $header;
margin: 24px 0 0 0;
}
h1, h2, h3 {
color: hsl($p, 90%, 50%);
color: $primary;
outline: none;
}
a {
color: hsl($p, 80%, 40%);
color: $link;
text-decoration: none;
transition: color 0.3s, text-shadow 0.3s;
}
a:hover {
color: hsl(330, 100%, 50%);
text-shadow: 0 0 6px hsla(330, 100%, 50%, 0.2);
}
.header-anchor {
display: none;
}
h2:hover > .header-anchor, h3:hover > .header-anchor {
h2:hover > .header-anchor,
h3:hover > .header-anchor {
display: inline;
color: hsl($p, 30%, 90%);
color: $lighter-gray;
}
h2:hover > .header-anchor:hover, h3:hover > .header-anchor:hover {
color: hsl($p, 70%, 40%);
text-shadow: 0 0 6px hsla($p, 100%, 50%, 0.2);
a:hover,
h2:hover > .header-anchor:hover,
h3:hover > .header-anchor:hover {
color: $link-hover;
text-shadow: 0 0 6px $link-glow;
}
p, li {
@ -81,12 +79,11 @@ p + p {
}
code, pre {
color: hsl($p, 20%, 40%);
color: hsl($secondary-hue, 20%, 40%);
font: 14px $code;
background: hsl($p, 20%, 97%);
background: hsl($secondary-hue, 30%, 97%);
border-radius: 4px;
border: solid 1px hsl($p, 30%, 92%);
border: solid 1px hsl($secondary-hue, 30%, 92%);
}
code {
@ -110,13 +107,13 @@ pre {
position: absolute;
width: 840px;
height: 100px;
border-bottom: solid 1px hsl($p, 20%, 93%);
border-bottom: solid 1px $lighter-gray;
h1 {
position: absolute;
left: 0;
bottom: 0;
font: 56px $header;
font: 64px $header;
font-weight: 300;
margin: 0;
letter-spacing: 2px;
@ -128,6 +125,7 @@ pre {
bottom: 7px;
color: $light-gray;
font: 18px $header;
font-weight: 300;
letter-spacing: 1px;
}
}
@ -148,6 +146,7 @@ pre {
h2 {
color: $light-gray;
font: normal 18px $header;
font-weight: 300;
margin: 0;
letter-spacing: 1px;
}
@ -173,17 +172,18 @@ pre {
}
// Syntax highlighting.
.codehilite pre span.c1 { color: hsl($p, 20%, 65%); } /* line comment */
.codehilite pre span.cm { color: hsl($p, 20%, 65%); } /* block comment */
.codehilite pre span.c1 { color: hsl($secondary-hue, 20%, 65%); } /* line comment */
.codehilite pre span.cm { color: hsl($secondary-hue, 20%, 65%); } /* block comment */
.codehilite pre span.vg { color: #5d3a85; } /* global variable */
.codehilite pre span.vi { color: #784bab; } /* instance variable */
.codehilite pre span.k { color: hsl($p, 80%, 40%); } /* keyword message */
.codehilite pre span.k { color: hsl($secondary-hue, 100%, 40%); } /* keyword message */
.codehilite pre span.kd { color: hsl($secondary-hue, 100%, 40%); } /* keyword decl */
.codehilite pre span.p { color: #777; } /* punctuation ()[]{} */
.codehilite pre span.s { color: hsl(330, 60%, 55%); } /* string */
.codehilite pre span.s { color: hsl(30, 40%, 55%); } /* string */
.codehilite pre span.s2 { color: hsl(30, 40%, 55%); } /* string escape */
.codehilite pre span.se { color: hsl(30, 90%, 45%); } /* string escape */
.codehilite pre span.nb { color: #30a138; } /* built-in name: self undefined */
.codehilite pre span.o { color: hsl($p, 100%, 35%); } /* operator */
.codehilite pre span.kd { color: hsl($p, 100%, 45%); } /* keyword decl */
.codehilite pre span.o { color: hsl($secondary-hue, 100%, 35%); } /* operator */
.codehilite pre span.nv { color: #24a36a; } /* argument name */
.codehilite pre span.ow { color: #30a186; } /* user-defined operator */
.codehilite pre span.mi { } /* number */

2
doc/site/syntax.markdown
View File

@ -20,7 +20,7 @@ or be within a single one. Unlike C, block comments can nest in Wren:
:::dart
/* This is /* a nested */ comment. */
## Reserved Words
## Reserved words
Some people like to see all of the reserved words in a programming language in
one lump. If you're one of those folks, here you go: