@@ -7,7 +7,7 @@ aliases = ["docs/using/sail-and-udon/"]
8Sail is Hoon markup that’s used to render a web page with XML. But what makes it special is that you can run arbitrary Hoon code within such a web page without using a separate markup language.
8Sail is Hoon markup that’s used to render a web page with XML. But what makes it special is that you can run arbitrary Hoon code within such a web page without using a separate markup language.
10−Udon is a way to write content for the web. It's a minimalist markup language for creating and rendering text documents, with a Markdown-inspired syntax. It's integrated with our Hoon programming language, allowing it to be used as standalone prose in its own file or embedded inside a Hoon source file, in which case it will be parsed into a tree of HTML nodes using Sail.
10+Udon is a way to write content for the web. It’s a minimalist markup language for creating and rendering text documents, with a Markdown-inspired syntax. It’s integrated with our Hoon programming language, allowing it to be used as standalone prose in its own file or embedded inside a Hoon source file, in which case it will be parsed into a tree of HTML nodes using Sail.
12This document will be divided into two main sections: the Sail guide and the Udon guide. Also, you should read the Getting Started section below, which applies to both Udon and Sail.
12This document will be divided into two main sections: the Sail guide and the Udon guide. Also, you should read the Getting Started section below, which applies to both Udon and Sail.
@@ -25,9 +25,9 @@ Before starting with either Sail or Udon, make sure that your ship is
25[mounted to Unix](@/using/install.md).
25[mounted to Unix](@/using/install.md).
27To host that output, your ship also has a web-server that can be found at
27To host that output, your ship also has a web-server that can be found at
28−`localhost` (default port 80) if it’s your first ship that’s running on the
28+`http://localhost/` (default port 80) if it’s your first ship that’s running on the
29machine, `http://localhost:8081/` if it’s the second ship on that same machine,
29machine, `http://localhost:8081/` if it’s the second ship on that same machine,
30−and so on. In the startup messages, a ship will tell you which HTTP port it's
30+and so on. In the startup messages, a ship will tell you which HTTP port it’s
33Udon and Sail files are often run as independent files (`.udon` and `.hoon`
33Udon and Sail files are often run as independent files (`.udon` and `.hoon`
@@ -35,7 +35,7 @@ respectively), but for the purpose of this guide, we will run them out of the
35`frontpage.hoon` file located in the `/gen` directory. The default content of
35`frontpage.hoon` file located in the `/gen` directory. The default content of
36`frontpage.hoon` is Sail code.
36`frontpage.hoon` is Sail code.
38−To use `frontpage.hoon`, we use a `|serve` command like this one in your ship's
38+To use `frontpage.hoon`, we use a `|serve` command like this one in your ship’s
@@ -44,17 +44,17 @@ Dojo:
45This command has three arguments:
45This command has three arguments:
46- The first is the URL we want to bind our site to. We chose `/test`, so the URL
46- The first is the URL we want to bind our site to. We chose `/test`, so the URL
47−we will find our site at is `localhost/test`.
47+we will find our site at is `http://localhost/test`.
48- The second is the desk we want to serve. We will be serving from `%home` in
48- The second is the desk we want to serve. We will be serving from `%home` in
49this tutorial.
49this tutorial.
50- The third is the file that we want to serve. In this tutorial, we will be
50- The third is the file that we want to serve. In this tutorial, we will be
51−using `/gen/frontpage/hoon`, which refers to `frontpage.hoon`.
51+using `/gen/frontpage/hoon`, which refers to `/gen/frontpage.hoon`.
53Run the command `|serve /test %home /gen/frontpage/hoon`. Now navigate to
53Run the command `|serve /test %home /gen/frontpage/hoon`. Now navigate to
54−`localhost/test` (or `localhost:8081/test` if your ship is on that port) in your
54+`http://localhost/test` (or `http://localhost:8081/test` if your ship is on that port) in your
55browser, and you should see the rendered Sail.
55browser, and you should see the rendered Sail.
57−**Note:** Important to remember that every time you edit a file in your ship's
57+**Note:** Important to remember that every time you edit a file in your ship’s
58pier (Unix directory), including `frontpage.hoon`, you need to run `|commit %home`
58pier (Unix directory), including `frontpage.hoon`, you need to run `|commit %home`
59to copy those changes to Urbit.
59to copy those changes to Urbit.
@@ -72,7 +72,7 @@ It’s easy to see how Sail can directly translate to HTML:
73 ;h1: Welcome!
73 ;h1: Welcome!
74 ; Hello, world!
74 ; Hello, world!
75− ; We're on the web.
75+ ; We’re on the web.
77 ;script@"http://unsafely.tracking.you/cookiemonster.js";
77 ;script@"http://unsafely.tracking.you/cookiemonster.js";
@@ -98,10 +98,10 @@ It’s easy to see how Sail can directly translate to HTML:
99You can test above Sail code by placing it
99You can test above Sail code by placing it
100under `^- manx` in your `frontpage.hoon` file, and then running `|commit %home`
100under `^- manx` in your `frontpage.hoon` file, and then running `|commit %home`
101−in the Dojo. If you've already run the `|serve` command code from the first
101+in the Dojo. If you’ve already run the `|serve` command code from the first
102−section, the new content should appear at `localhost/test`.
102+section, the new content should appear at `http://localhost/test`.
104−It shouldn't be hard to see the similarities between Sail and HTML. So let's go
104+It shouldn’t be hard to see the similarities between Sail and HTML. So let’s go
105into more detail about what the differences are.
105into more detail about what the differences are.
107### Tags and Closing
107### Tags and Closing
@@ -147,7 +147,7 @@ with `==`, because they expect a list of sub-tags. If we nest a line of plain
147text with no tag, a `<p>` is prepended.
147text with no tag, a `<p>` is prepended.
149Sail, like Hoon, is white-space sensitive. Unlike in Hoon, however, two spaces
149Sail, like Hoon, is white-space sensitive. Unlike in Hoon, however, two spaces
150−(called a "gap") is not necessarily equivalent to a line-break in Sail.
150+(called a `gap`) is not necessarily equivalent to a line-break in Sail.
@@ -160,12 +160,11 @@ Equals:
163− <h1>Blog title</h1>
163+ <h1>Blog title</h1>
164− <p>This is some good content.</p>
164+ <p>This is some good content.</p>
169Conversely, if we want to write a string with no tag at all, then we can prepend
168Conversely, if we want to write a string with no tag at all, then we can prepend
170those untagged lines with `;`.
169those untagged lines with `;`.
@@ -187,25 +186,23 @@ Equals:
191#### Attributes
189#### Attributes
193Attributes are key-value pairs that go into an HTML node.
191Attributes are key-value pairs that go into an HTML node.
195Adding attributes is simple: just add the desired attribute between parentheses,
193Adding attributes is simple: just add the desired attribute between parentheses,
196−right after the tag name without a space. We separate different attributes of
194+right after the tag name without a space. We separate different attributes of
197the same node by using `,`.
195the same node by using `,`.
199Attributes can be used in two forms: flat, which uses one line; and tall, which
197Attributes can be used in two forms: flat, which uses one line; and tall, which
200uses multiple lines, when a single line would not be practical. Flat forms and
198uses multiple lines, when a single line would not be practical. Flat forms and
201−flat forms are two syntaxes of semantically equivalent expressions.
199+tall forms are two syntaxes of semantically equivalent expressions.
204#### Generic
201#### Generic
206The code below produces a “Submit” button on the page.
203The code below produces a “Submit” button on the page.
208−Wide-form Sail:
205+Flat-form Sail:
211;input(type "submit", value "Submit");
208;input(type "submit", value "Submit");
@@ -223,7 +220,7 @@ Tall-form Sail:
226−<input type="submit" value="Submit">`
223+<input type="submit" value="Submit">
@@ -242,27 +239,34 @@ Add `#` after tag name to add an ID.
243#### Classes
240#### Classes
242+`;h1.text-blue: Title`
245−`;h1.text-blue: Title` equals `<h1 class="text-blue">Title</h1>`
246+`<h1 class="text-blue">Title</h1>`
247−Add `.` after tag name to add a class. However, if you want a class name that
248+Add `.` after tag name to add a class. However, if you want a class list that
248contains a space, you will need to use use the syntax of a generic attribute:
249contains a space, you will need to use use the syntax of a generic attribute:
250−`;div(class "logo inverse");` equals `<div class="logo inverse"></div>`
251+`;div(class "logo inverse");`
255+`<div class="logo inverse"></div>`
253#### Image
257#### Image
255`;img@"example.png";`
259`;img@"example.png";`
259−`<img src="example.png"/>`
263+`<img src="example.png" />`
261Add `@` after the tag name to link your source.
265Add `@` after the tag name to link your source.
263To add attributes to the image, like size specifications, add the
267To add attributes to the image, like size specifications, add the
264−desired attribute after the `"` of the image name and before the final `;` of
268+desired attribute after the closing `"` of the image name and before the final
265−the `img` tag.
269+`;` of the `img` tag.
267For example:
271For example:
@@ -272,12 +276,20 @@ For example:
273`;a/"urbit.org": A link to Urbit.org`
277`;a/"urbit.org": A link to Urbit.org`
277`<a href="urbit.org">A link to Urbit.org</a>`
281`<a href="urbit.org">A link to Urbit.org</a>`
279Add `/` after tag name to start an href.
283Add `/` after tag name to start an href.
285+To add attributes to the link, like target specifications, add the
286+desired attribute after the closing `"` of the link url and before the `:` of
291+`;a/"urbit.org"(target "_blank"): A link to Urbit.org`
281### Hoon in Sail
293### Hoon in Sail
283Our first example is useful to understand how Sail syntax translates to HTML
295Our first example is useful to understand how Sail syntax translates to HTML
@@ -320,7 +332,7 @@ interpolate with something that results in an atom. Try this now:
322We get a similar result, but we know that it’s a tape because it’s wrapped in
334We get a similar result, but we know that it’s a tape because it’s wrapped in
323−`""`. Bingo! With this knowledge, let’s perform a successful interpolation:
335+`""`. Bingo! With this knowledge, let’s perform a successful interpolation:
326> "I am a l{<(mul 3 11)>}t Urbit user."
338> "I am a l{<(mul 3 11)>}t Urbit user."
@@ -353,7 +365,7 @@ Then enter the following command in the Dojo:
356−You'll notice that the Sail subject is like a stripped-down version of the Dojo
368+You’ll notice that the Sail subject is like a stripped-down version of the Dojo
357subject. Its final line should match the Dojo subject.
369subject. Its final line should match the Dojo subject.
359Now swap the code below into your Sail file.
371Now swap the code below into your Sail file.
@@ -368,9 +380,9 @@ Now swap the code below into your Sail file.
371−You'll find that the resulting Sail subject is much larger. If you look closely,
383+You’ll find that the resulting Sail subject is much larger. If you look closely,
372−you'll see that there's some new similarities with the Dojo subject, such as
384+you’ll see that there’s some new similarities with the Dojo subject, such as
373−containing the name of your ship. There's also some new differences, since
385+containing the name of your ship. There’s also some new differences, since
374`fuel:html` contains things that are specifically useful for performing
386`fuel:html` contains things that are specifically useful for performing
375web-related operations.
387web-related operations.
@@ -402,13 +414,13 @@ example we saw before.
402 ;span: Check it out!
414 ;span: Check it out!
403 ;+ ?: show-list
415 ;+ ?: show-list
405− ;li(style "color: green"): We're doing interesting stuff now.
417+ ;li(style "color: green"): We’re doing interesting stuff now.
406− ;li: We're pretty-printing this sum with Hoon: {<(add 50 50)>}.
418+ ;li: We’re pretty-printing this sum with Hoon: {<(add 50 50)>}.
407 ;li: The code above is shorthand for {(scow %ud (add 50 50))}.
419 ;li: The code above is shorthand for {(scow %ud (add 50 50))}.
408 ;li: I am {(trip '~lodleb-ritrul')}.
420 ;li: I am {(trip '~lodleb-ritrul')}.
409− ;li: Actually, my name is {<p.bem.gas>}. I'm a {what-kind}.
421+ ;li: Actually, my name is {<p.bem.gas>}. I’m a {what-kind}.
411− ;div: My name is {<p.bem.gas>}. I'm a {what-kind}.
423+ ;div: My name is {<p.bem.gas>}. I’m a {what-kind}.
@@ -424,15 +436,15 @@ piece.
424/= gas /$ fuel:html
436/= gas /$ fuel:html
427−Later in this code we want produce the name of the ship is hosting it, something
439+Later in this code we want to produce the name of the ship which is hosting it,
428−that looks like ~lodleb-ritrul. In a generator, we could produce our ship name
440+something that looks like ~lodleb-ritrul. In a generator, we could produce our ship
429−by writing `our` -- try it in the Dojo. But remember that Sail is rendered
441+name by writing `our` -- try it in the Dojo. But remember that Sail is rendered
430against its own subject, `our` is not part of the default subject. To augment
442against its own subject, `our` is not part of the default subject. To augment
431our subject with the information that we need, we use `/= gas /$ fuel:html`.
443our subject with the information that we need, we use `/= gas /$ fuel:html`.
433The above expression uses two Ford runes, `/=` and `/$`, to add the relevant
445The above expression uses two Ford runes, `/=` and `/$`, to add the relevant
434information to the current subject. We can pull the ship’s name out of this
446information to the current subject. We can pull the ship’s name out of this
435−augmented subject later. It's important to note that these runes are not part of
447+augmented subject later. It’s important to note that these runes are not part of
436Hoon. They are part of Ford, our build system.
448Hoon. They are part of Ford, our build system.
438`/$` is used to get data from the environment, and `/=` adds that data to
450`/$` is used to get data from the environment, and `/=` adds that data to
@@ -481,7 +493,7 @@ subject and gives it the face `wid`. This noun is produced by the the
481standard-library function [`met`](/docs/reference/library/2c), which measures the number of
493standard-library function [`met`](/docs/reference/library/2c), which measures the number of
482[blocks](/docs/reference/library/1c/) of size `a` within `b`. Blocks are units that have a
494[blocks](/docs/reference/library/1c/) of size `a` within `b`. Blocks are units that have a
483bitwidth of `2^a`. So, in this case, it measures how many bytes (blocks of size
495bitwidth of `2^a`. So, in this case, it measures how many bytes (blocks of size
484−3 are bitwidths of 8; `2^3 = 8`) are fully contained in your ship's address.
496+3 are bitwidths of 8; `2^3 = 8`) are fully contained in your ship’s address.
486Galaxies contain zero to one 3-blocks; stars contain two 3-blocks; planets
498Galaxies contain zero to one 3-blocks; stars contain two 3-blocks; planets
487contain three to four 3-blocks; moons contain five to eight 3-blocks; comets
499contain three to four 3-blocks; moons contain five to eight 3-blocks; comets
@@ -505,7 +517,7 @@ perform less-than tests to see what kind of ship is running the web-server.
505Sail proper begins here. These four lines are four nodes. The `;html` node
517Sail proper begins here. These four lines are four nodes. The `;html` node
506indicates that the contained code should be rendered as HTML; this tag is closed
518indicates that the contained code should be rendered as HTML; this tag is closed
507on the final line. The `;head` node contains metadata, and is closed three lines
519on the final line. The `;head` node contains metadata, and is closed three lines
508−later. The `;meta` node sets the character set to UTF-8, and the `;title` node
520+later. The `;meta` node sets the character set to UTF-8, and the `;title` node
509sets the title of the page that shows up in the browser tab.
521sets the title of the page that shows up in the browser tab.
@@ -532,7 +544,7 @@ attributes, it continues the line without formatting. Following `;span:` with
532**two** spaces causes there to be single space following the produced `<span>`
544**two** spaces causes there to be single space following the produced `<span>`
533element, because one of those spaces is syntactically necessary.
545element, because one of those spaces is syntactically necessary.
535−In the following lines, we beginning to use some Hoon expressions again.
547+In the following lines, we begin to use some Hoon expressions again.
538 ;+ ?: show-list
550 ;+ ?: show-list
@@ -542,14 +554,14 @@ In the following lines, we beginning to use some Hoon expressions again.
542In the top line in the chunk above, we use the `;+` Sail rune, which
554In the top line in the chunk above, we use the `;+` Sail rune, which
543resolves an expression to a single node. That expression, in this case, is
555resolves an expression to a single node. That expression, in this case, is
544`?:`, which tests the truth value of `show-list`, which we assigned the value
556`?:`, which tests the truth value of `show-list`, which we assigned the value
545−`&` (meaning “true”) at the beginning of the program. It’s closed by the `==` on
557+`&` (meaning `true`) at the beginning of the program. It’s closed by the `==` on
546the last line.
558the last line.
548Thus, this program resolves to the first child of `show-list`, the node `;ol`.
560Thus, this program resolves to the first child of `show-list`, the node `;ol`.
549That node creates an ordered list, and the items contained within that node.
561That node creates an ordered list, and the items contained within that node.
552− ;li(style "color: green"): We're doing more interesting stuff now.
564+ ;li(style "color: green"): We’re doing more interesting stuff now.
555The line above is the only element of this list that does not use
567The line above is the only element of this list that does not use
@@ -560,14 +572,13 @@ The next items in the list use `{}`. Recall that these braces, pronounced “lob
560and “rob” in Hoon-speak, allow for the interpolation of code within a string.
572and “rob” in Hoon-speak, allow for the interpolation of code within a string.
563− ;li: We're pretty-printing this sum with Hoon: {<(add 50 50)>}.
575+ ;li: We’re pretty-printing this sum with Hoon: {<(add 50 50)>}.
566The line above is interpolated with Hoon code that produces the sum of 50 plus
578The line above is interpolated with Hoon code that produces the sum of 50 plus
56750, which is wrapped in `<>` to put the product in double quotes to make it a
57950, which is wrapped in `<>` to put the product in double quotes to make it a
568tape, like the rest of the line.
580tape, like the rest of the line.
572 ;li: The code above is shorthand for {(scow %ud (add 50 50))}.
583 ;li: The code above is shorthand for {(scow %ud (add 50 50))}.
@@ -577,7 +588,6 @@ writing the `{<(add 50 50)>}` expression. `scow` is a Hoon function that turns a
577noun into a `tape`, Hoon’s string type. `%ud` tells `scow` that its argument
588noun into a `tape`, Hoon’s string type. `%ud` tells `scow` that its argument
578should be displayed in the form of an unsigned decimal.
589should be displayed in the form of an unsigned decimal.
582 ;li: I am {(trip '~lodleb-ritrul')}.
592 ;li: I am {(trip '~lodleb-ritrul')}.
@@ -589,28 +599,28 @@ tape. So, by converting `~lodleb-ritrul` to a tape, it can be included in the
589tape that we are trying to insert it into without getting a type error.
599tape that we are trying to insert it into without getting a type error.
592− ;li: Actually, my name is {<p.bem.gas>}. I'm a {what-kind}.
602+ ;li: Actually, my name is {<p.bem.gas>}. I’m a {what-kind}.
596The line above has interpolated code that uses a wing expression to access the
606The line above has interpolated code that uses a wing expression to access the
597−name of the host ship, and then accesses the face `what-kind` contains a string
607+name of the host ship, and then accesses the face `what-kind` that contains a
598−describing what type of ship it is. We declared `gas` on the very first line so
608+string describing what type of ship it is. We declared `gas` on the very first
599−that we could add that sort of information to the subject that our Sail is
609+line so that we could add that sort of information to the subject that our Sail
600−rendered against. The wing expression `p.bem.gas` looks for `p` within `bem`
610+is rendered against. The wing expression `p.bem.gas` looks for `p` within `bem`
601within `gas`, which happens to be where the name of the ship is located.
611within `gas`, which happens to be where the name of the ship is located.
603Note that `{what-kind}` does not have a `<>` wrapper. Why do you think this is?
613Note that `{what-kind}` does not have a `<>` wrapper. Why do you think this is?
606− ;div; My name is {<p.bem.gas>}. I'm a {ship}.
616+ ;div; My name is {<p.bem.gas>}. I’m a {ship}.
611The `;div;` node above is only rendered, as an alternative to the above list,
621The `;div;` node above is only rendered, as an alternative to the above list,
612−if `show-list` is evaluated as true. This means it won’t be shown with your
622+if `show-list` is evaluated as `true`. This means it won’t be shown with your
613−default code. To show this line, change the `&` on line 2 to `|` (“false”).
623+default code. To show this line, change the `&` on line 2 to `|` (`false`).
615### Sail Runes
625### Sail Runes
@@ -627,7 +637,6 @@ is the expression that we use.
628`;=` turns a tuple of nodes into a list of nodes.
638`;=` turns a tuple of nodes into a list of nodes.
631To see how these runes work, let’s take a chunk of our previous code starting at
640To see how these runes work, let’s take a chunk of our previous code starting at
632line 20 and modify it a bit:
641line 20 and modify it a bit:
@@ -638,7 +647,7 @@ line 20 and modify it a bit:
638 ;li: Actually, my name is {<p.bem.gas>}.
647 ;li: Actually, my name is {<p.bem.gas>}.
641− ;div: My name is {<p.bem.gas>}. I'm a {what-kind}.
650+ ;div: My name is {<p.bem.gas>}. I’m a {what-kind}.
642 ;div: No list here!
651 ;div: No list here!
@@ -661,21 +670,21 @@ You should now have foundational knowledge for making web pages with Sail. There
661is, of course, more to learn.
670is, of course, more to learn.
663The [Ford manual](https://urbit.org/docs/arvo/internals/ford/runes/)
672The [Ford manual](https://urbit.org/docs/arvo/internals/ford/runes/)
664−can show you how to access various ship resources for user in your pages. To
673+can show you how to access various ship resources for use in your pages. To
665learn more about how the renderer works, take a look at the
674learn more about how the renderer works, take a look at the
666−`/home/ren/urb.hoon` file inside your urbit.
675+`/home/ren/urb.hoon` file inside your pier.
668## Udon: A Guide {#udon}
677## Udon: A Guide {#udon}
670−Udon is a way to write content for the web. It's a minimalist
679+Udon is a way to write content for the web. It’s a minimalist
671markup language for creating and rendering text documents, with a
680markup language for creating and rendering text documents, with a
672−Markdown-inspired syntax. It's integrated with our Hoon programming language,
681+Markdown-inspired syntax. It’s integrated with our Hoon programming language,
673allowing it to be used as standalone prose in its own file or embedded inside a
682allowing it to be used as standalone prose in its own file or embedded inside a
674Hoon source file, in which case it will be parsed into a tree of HTML nodes
683Hoon source file, in which case it will be parsed into a tree of HTML nodes
675−using Hoon's XML-templating syntax, Sail.
684+using Hoon’s XML-templating syntax, Sail.
677There are quite a few similarities between Udon and the
686There are quite a few similarities between Udon and the
678−CommonMark standard, but there are enough differences that you shouldn't rely on
687+CommonMark standard, but there are enough differences that you shouldn’t rely on
679existing knowledge of the latter. Udon generally supports only one
688existing knowledge of the latter. Udon generally supports only one
680syntax for each type of HTML node it emits. Udon is also stricter than
689syntax for each type of HTML node it emits. Udon is also stricter than
681Markdown: some syntax errors will prevent the file from being parsed at all.
690Markdown: some syntax errors will prevent the file from being parsed at all.
@@ -687,8 +696,8 @@ will use the `frontpage.hoon` method that we are already familiar with.
688To test out Udon, put a `;>` under the `^- manx` in your `frontpage.hoon` file,
697To test out Udon, put a `;>` under the `^- manx` in your `frontpage.hoon` file,
689and then put all your Udon code under that `;>`. Then run `|commit %home`
698and then put all your Udon code under that `;>`. Then run `|commit %home`
690−in the Dojo. If you've already run the `|serve` command code from the first
699+in the Dojo. If you’ve already run the `|serve` command code from the first
691−section, the new content should appear at `localhost/test`.
700+section, the new content should appear at `http://localhost/test`.
693## Udon Syntax
702## Udon Syntax
@@ -701,32 +710,32 @@ The first thing on a `.udon` file is a chunk of code called the front matter. It
701contains metadata about your page, such as date, title, and position relative
710contains metadata about your page, such as date, title, and position relative
702to sibling pages.
711to sibling pages.
704−As an example, let's look at the front matter of this very page:
713+As an example, let’s look at the front matter of this very page:
707:- :~ navhome/'/docs/'
716:- :~ navhome/'/docs/'
708− sort/'11'
717+ sort/'28'
709 title/'Udon'
718 title/'Udon'
714−What's going on here?
723+What’s going on here?
716`:-`, the Hoon rune for creating a cell, creates a cell composed of
725`:-`, the Hoon rune for creating a cell, creates a cell composed of
717the `:~` Hoon rune for creating a list, and `;>`, which is a Sail rune
726the `:~` Hoon rune for creating a list, and `;>`, which is a Sail rune
720`:~` creates a list out of the three elements: `navhome/'/docs/'`, which
729`:~` creates a list out of the three elements: `navhome/'/docs/'`, which
721−indicates that navigating "home" will bring you to the urbit.org/docs section
730+indicates that navigating “home” will bring you to the urbit.org/docs section
722−of the website; `sort/'28',` which assigns it the 28th position of the
731+of the website; `sort/'28'`, which assigns it the 28th position of the
723immediate section that contains it, the one you see in the sidebar;
732immediate section that contains it, the one you see in the sidebar;
724and `title/'Udon'`, which gives the page its title. The `==` digraph
733and `title/'Udon'`, which gives the page its title. The `==` digraph
725terminates the list.
734terminates the list.
727`;>` is a Sail rune that creates a node that contains everything that follows
736`;>` is a Sail rune that creates a node that contains everything that follows
728−it, telling the parser that that text should be interpreted as Udon.
737+it, telling the parser that this text should be interpreted as Udon.
729−It's not technically front matter, but you'll always find it following the
738+It’s not technically front matter, but you’ll always find it following the
730front matter, since all Udon must come after this rune.
739front matter, since all Udon must come after this rune.
732The categories listed in the example above -- `navhome`, `sort`, and `title` --
741The categories listed in the example above -- `navhome`, `sort`, and `title` --
@@ -749,16 +758,18 @@ parsing.
750Headers in Udon begin the line with one or more `#` characters,
759Headers in Udon begin the line with one or more `#` characters,
751followed by a single space. After that space comes the actual text to be
760followed by a single space. After that space comes the actual text to be
752−displayed. The number of leading `#`s corresponds to the resulting HTML
761+displayed. The number of leading `#` characters corresponds to the resulting HTML
753header-size element: `#` yields an `<h1>`, `##` yields an `<h2>`, and so on,
762header-size element: `#` yields an `<h1>`, `##` yields an `<h2>`, and so on,
754through `<h6>`. The header for this section is `### Headers`.
763through `<h6>`. The header for this section is `### Headers`.
756**Example:**
765**Example:**
758#### Header (h4)
768#### Header (h4)
760##### Header (h5)
770##### Header (h5)
762**Produces:**
773**Produces:**
764#### Header (h4)
775#### Header (h4)
@@ -773,7 +784,6 @@ element.
773Enclosing text with `*` will cause that text to appear bolded, using a `<b>`
784Enclosing text with `*` will cause that text to appear bolded, using a `<b>`
777**Example:**
787**Example:**
@@ -793,35 +803,37 @@ the _same line_.
793**Example:**
803**Example:**
796−Here's the first line.
806+Here’s the first line.
798−This second line is separated by two newlines, so it's a separate paragraph.
808+This second line is separated by two newlines, so it’s a separate paragraph.
800−This line looks like a distinct paragraph, but...
810+This line looks like a distinct paragraph, but …
801−It's only separated by a single newline, so it's included in the same paragraph.
811+It’s only separated by a single newline, so it’s included in the same paragraph.
806−Here's the first line.
816+Here’s the first line.
808−This second line is separated by two newlines, so it's a separate paragraph.
818+This second line is separated by two newlines, so it’s a separate paragraph.
810−This line looks like a distinct paragraph, but...
820+This line looks like a distinct paragraph, but …
811−It's only separated by a single newline, so it's included in the same paragraph.
821+It’s only separated by a single newline, so it’s included in the same paragraph.
813#### Backslash Line Break
823#### Backslash Line Break
815A backslash at the end of a line inserts a line break (`<br>`)
825A backslash at the end of a line inserts a line break (`<br>`)
816−after that line. This contrasts with the normal udon behavior of
826+after that line. This contrasts with the normal Udon behavior of
817converting newlines to spaces.
827converting newlines to spaces.
819**Example:**
829**Example:**
821I wonder how long each line
832I wonder how long each line
822will be if I put backslashes\
833will be if I put backslashes\
823at the ends of the lines.
834at the ends of the lines.
825**Produces:**
837**Produces:**
827I wonder how long each line
839I wonder how long each line
@@ -837,14 +849,13 @@ as an escape character, causing it to be rendered raw.
839Here is some *bold* text.
851Here is some *bold* text.
840−Here is some \*not bold* text.
852+Here is some \*not bold\* text.
843**Produces:**
855**Produces:**
845Here is some **bold** text.
857Here is some **bold** text.
846−Here is some \*not bold* text.
858+Here is some \*not bold\* text.
@@ -859,18 +870,18 @@ a number corresponding to its position in that list.
859New list elements are delineated by newlines beginning with list symbols of
870New list elements are delineated by newlines beginning with list symbols of
860the appropriate type (`-` or `+`).
871the appropriate type (`-` or `+`).
862−Just as with non-list text, text on a bare newline will appear on line before,
873+Just as with non-list text, text on a bare newline will appear on the line before,
863−separated by a space. A `\\` is used to create a line-break that isn't the list
874+separated by a space. A `\\` is used to create a line-break that isn’t the list
864−itself and isn't a list. Both of these kinds of newlines must be indented by two
875+itself and isn’t a list. Both of these kinds of newlines must be indented by two
865spaces, or else the page will not parse.
876spaces, or else the page will not parse.
867Indentation is also used for creating nested sub-lists. Sub-lists of one kind
878Indentation is also used for creating nested sub-lists. Sub-lists of one kind
868−can be used with parent lists of the other kind. Sub-lists can't be nested
879+can be used with parent lists of the other kind. Sub-lists can’t be nested
869−directly after either kind of aforementioned newline that isn't a list element;
880+directly after either kind of aforementioned newline that isn’t a list element;
870only lines that are themselves list elements can nest sub-lists.
881only lines that are themselves list elements can nest sub-lists.
872A newline after a blank line is interpreted as a new paragraph in normal text.
883A newline after a blank line is interpreted as a new paragraph in normal text.
873−Between to list elements, however, a blank line is semantically equivalent to
884+Between two list elements, however, a blank line is semantically equivalent to
874a bare newline. To separate two lists with blank space, create a blank line
885a bare newline. To separate two lists with blank space, create a blank line
875followed by a `\\` on its own line.
886followed by a `\\` on its own line.
@@ -884,15 +895,15 @@ followed by a `\\` on its own line.
884- Chicken\
895- Chicken\
885 Make sure that you get enough for the barbecue
896 Make sure that you get enough for the barbecue
887− + Ask the baker what's fresh
898+ + Ask the baker what’s fresh
888 + Buy the second-freshest batch
899 + Buy the second-freshest batch
892+ First, separate eggs into a bowl
903+ First, separate eggs into a bowl
893+ Then, add a splash of cream
904+ Then, add a splash of cream
894− - If you don't have cream, you can use milk, but cream is preferred
905+ - If you don’t have cream, you can use milk, but cream is preferred
895− + If you don't have milk or cream, melt an eighth of a stick of butter on
906+ + If you don’t have milk or cream, melt an eighth of a stick of butter on
896 a skillet
907 a skillet
897 + Scramble the eggs in the bowl
908 + Scramble the eggs in the bowl
898 + Pour the eggs onto the skillet before the butter browns
909 + Pour the eggs onto the skillet before the butter browns
@@ -914,15 +925,15 @@ Produces
914- Chicken\
925- Chicken\
915 Make sure that you get enough for the barbecue
926 Make sure that you get enough for the barbecue
917− 1. Ask the baker what's fresh
928+ 1. Ask the baker what’s fresh
918 1. Buy the second-freshest batch
929 1. Buy the second-freshest batch
9221. First, separate eggs into a bowl
9331. First, separate eggs into a bowl
9231. Then, add a splash of cream
9341. Then, add a splash of cream
924− - If you don't have cream, you can use milk, but cream is preferred
935+ - If you don’t have cream, you can use milk, but cream is preferred
925− 1. If you don't have milk or cream, melt an eighth of a stick of butter on
936+ 1. If you don’t have milk or cream, melt an eighth of a stick of butter on
926 a skillet
937 a skillet
927 1. Scramble the eggs in the bowl
938 1. Scramble the eggs in the bowl
928 1. Pour the eggs onto the skillet before the butter browns
939 1. Pour the eggs onto the skillet before the butter browns
@@ -945,26 +956,26 @@ destination.
945**Example:**
956**Example:**
948−[I'm an inline-style link](https://urbit.org/operations/#using-the-shell)
959+[I’m an inline-style link](https://urbit.org/operations/#using-the-shell)
951**Produces:**
962**Produces:**
953−[I'm an inline-style link](https://urbit.org/operations/#using-the-shell)
964+[I’m an inline-style link](https://urbit.org/operations/#using-the-shell)
955The second type is a reference-style link, which uses a relative path, based on
966The second type is a reference-style link, which uses a relative path, based on
956−the current page's location. Instead of the full url, we use `..` to fill in
967+the current page’s location. Instead of the full url, we use `..` to fill in
957−the all of the URL that the destination has in common with the origin page.
968+all of the URL that the destination has in common with the origin page.
959**Example:**
970**Example:**
962−[I'm a reference-style link](../shell)
973+[I’m a reference-style link](../shell)
965**Produces:**
976**Produces:**
967−[I'm a reference-style link](../shell)
978+[I’m a reference-style link](../shell)
969If this page is located at `https://www.urbit.org/docs/reference/`, then these two
980If this page is located at `https://www.urbit.org/docs/reference/`, then these two
970examples should have the same destination.
981examples should have the same destination.
@@ -979,14 +990,16 @@ so we need to use some [Sail](#sail). If there are two or more anchors with
979the same `id` on the page, you will arrive at the earliest instance of the the
990the same `id` on the page, you will arrive at the earliest instance of the the
993+Note that each HTML element `id` should be unique and not be used more than once.
982**Example:**
995**Example:**
985Check out this [section](#here-we-are) that we want to jump to.
998Check out this [section](#here-we-are) that we want to jump to.
987−Four score and seven years ago....
1000+Four score and seven years ago …
989−It was the best of times, it was the worst of times...
1002+It was the best of times, it was the worst of times …
991## Here we are!
1004## Here we are!
@@ -995,9 +1008,9 @@ It was the best of times, it was the worst of times...
996Check out this [section](#here-we-are) that we want to jump to.
1009Check out this [section](#here-we-are) that we want to jump to.
998−Four score and seven years ago....
1011+Four score and seven years ago …
1000−It was the best of times, it was the worst of times...
1013+It was the best of times, it was the worst of times …
1002## Here we are!
1015## Here we are!
@@ -1015,7 +1028,6 @@ opening and closing quotes -- that is, `“` and `”`.
1016“Yes,” he said. “That is the way with him.”
1029“Yes,” he said. “That is the way with him.”
1019### Code Literal
1031### Code Literal
1021There are two ways to show the literal text of code without running it: inline
1033There are two ways to show the literal text of code without running it: inline
@@ -1035,20 +1047,22 @@ Enclosing some text in `` ` `` characters will cause it to be displayed as code,
1035inside a `<code>` HTML element with monospace font and highlighted with a
1047inside a `<code>` HTML element with monospace font and highlighted with a
1036different background color.
1048different background color.
1038−Using `` ` `` is useful when you want to designated only part of a line as code.
1050+Using `` ` `` is useful when you want to designate only part of a line as code.
1039−Since this page is written in Udon, we've been using this operation
1051+Since this page is written in Udon, we’ve been using this operation
1040−throughout this guide to `format text` to distinguish code from prose.
1052+throughout this guide to _format text_ to distinguish `code` from prose.
1042**Example:**
1054**Example:**
1044−`*[a 2 b c] -> *[*[a b] *[a c]]` is like lisp's `apply`.
1057+`*[a 2 b c] -> *[*[a b] *[a c]]` is like lisp’s `apply`.
1046**Produces:**
1060**Produces:**
1048−`*[a 2 b c] -> *[*[a b] *[a c]]` is like lisp's `apply`.
1062+`*[a 2 b c] -> *[*[a b] *[a c]]` is like lisp’s `apply`.
1050Also, using the `++` prefix before a word will cause the word to be rendered as
1064Also, using the `++` prefix before a word will cause the word to be rendered as
1051−code with the `++` displayed, since that's the standard notation for an arm in
1065+code with the `++` displayed, since that’s the standard notation for an arm in
1054**Example:**
1068**Example:**
@@ -1070,7 +1084,6 @@ Most of our examples so far have used.
1071**Example:**
1085**Example:**
1075 (def Y (fn [f]
1088 (def Y (fn [f]
1076 ((fn [x]
1089 ((fn [x]
@@ -1094,7 +1107,7 @@ Most of our examples so far have used.
1094### Hoon Constants
1107### Hoon Constants
1096Hoon has several syntactic forms for literals (numbers, strings, dates, etc.)
1109Hoon has several syntactic forms for literals (numbers, strings, dates, etc.)
1097−that can be used in udon as well. Udon detects such code, and so these
1110+that can be used in Udon as well. Udon detects such code, and so these
1098forms will automatically appear inside a `<code>` element like inline code.
1111forms will automatically appear inside a `<code>` element like inline code.
@@ -1105,17 +1118,16 @@ Example:
1108−produces:\
1121+Produces:\
1110`~2017.8.29` \
1123`~2017.8.29` \
1111`0xdead.beef` \
1124`0xdead.beef` \
1115### Horizontal Rule
1127### Horizontal Rule
1117Three or more hyphens, such as `---`, on their own line produce an `<hr>`
1129Three or more hyphens, such as `---`, on their own line produce an `<hr>`
1118−element, the 'horizontal rule'. This is rendered as a horizontal line the
1130+element, the “horizontal rule”. This is rendered as a horizontal line the
1119width of its containing paragraph.
1131width of its containing paragraph.
1121**Example:**
1133**Example:**
@@ -1130,7 +1142,6 @@ And below this line, too
1131**Produces:**
1143**Produces:**
1134Above the line
1145Above the line
@@ -1144,7 +1155,7 @@ And below this line, too
1144### Block Quote
1155### Block Quote
1146A section of text with the first line beginning with `>` and a space,
1157A section of text with the first line beginning with `>` and a space,
1147−and each successive newline indented by two spaces yields a
1158+and each successive newline indented by two spaces, yields a
1148`<blockquote>` HTML element. This block quote can itself contain more Udon,
1159`<blockquote>` HTML element. This block quote can itself contain more Udon,
1149including more block quotes to render nested levels of quotation.
1160including more block quotes to render nested levels of quotation.
@@ -1175,10 +1186,9 @@ Quote break.
1176> He is pale and thin, he wears a thin and ragged linen shirt.
1187> He is pale and thin, he wears a thin and ragged linen shirt.
1181−A poem is a section of text with meaningful newlines. Recall that,
1191+A poem is a section of text with meaningful newlines. Recall that,
1182normally in Udon, newlines are treated as spaces and do not create a
1192normally in Udon, newlines are treated as spaces and do not create a
1183new line of text. If you want to embed text where newlines are retained, then
1193new line of text. If you want to embed text where newlines are retained, then
1184indent the text in question with **eight spaces**.
1194indent the text in question with **eight spaces**.
@@ -1191,6 +1201,7 @@ indent the text in question with **eight spaces**.
1191 Is moving its slow thighs, while all about it
1201 Is moving its slow thighs, while all about it
1192 Reel shadows of the indignant desert birds.
1202 Reel shadows of the indignant desert birds.
1194**Produces:**
1205**Produces:**
1196 A shape with lion body and the head of a man,
1207 A shape with lion body and the head of a man,
@@ -1198,14 +1209,12 @@ indent the text in question with **eight spaces**.
1198 Is moving its slow thighs, while all about it
1209 Is moving its slow thighs, while all about it
1199 Reel shadows of the indignant desert birds.
1210 Reel shadows of the indignant desert birds.
1202## Sail Expressions
1212## Sail Expressions
1204−It's possible to use Udon as an HTML templating language akin to
1214+It’s possible to use Udon as an HTML templating language akin to
1205PHP, ERB, JSP, or Handlebars templates. This facility derives
1215PHP, ERB, JSP, or Handlebars templates. This facility derives
1206in part from the support for embedding Hoon code inside the markup.
1216in part from the support for embedding Hoon code inside the markup.
1209Sail is a domain-specific language within Hoon for creating XML nodes,
1218Sail is a domain-specific language within Hoon for creating XML nodes,
1210including HTML. It can be used directly within Udon to provide
1219including HTML. It can be used directly within Udon to provide
1211scripting capability with Hoon and also to provide more precise control over the
1220scripting capability with Hoon and also to provide more precise control over the
@@ -1217,7 +1226,7 @@ Example:
1220− ;strong: Don't panic!
1229+ ;strong: Don’t panic!
1222 ;small: [reactive publishing intensifies]
1231 ;small: [reactive publishing intensifies]
@@ -1226,9 +1235,8 @@ Example:
1227Produces:
1236Produces:
1231− <strong>Don't panic!</strong>
1239+ <strong>Don’t panic!</strong>
1233− <small>[reactive publishing intensifies]</small>
1241+ <small>[reactive publishing intensifies]</small>