4564574 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

sail: switch to tables

4564574Tinnus Napbus5 years ago

content/docs/hoon/guides/sail.md+103−169

compare with master

unifiedsplit

@@ -15,9 +15,8 @@ This document will walk through the basics of Sail and its syntax.

16It’s easy to see how Sail can directly translate to HTML:

18−#### Sail code

18+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead>

19−

19+<tbody><tr><td><pre class="language-hoon">

20−```hoon

21;html

20;html

22 ;head

21 ;head

23 ;title: My page

22 ;title: My page

@@ -30,30 +29,26 @@ It’s easy to see how Sail can directly translate to HTML:

30 ; Welcome to my page.

29 ; Welcome to my page.

31 ; Here is an image:

30 ; Here is an image:

32 ;br;

31 ;br;

33− ;img@"https://media.urbit.org/docs/userspace/dist/wut.svg";

32+ ;img@"/foo.png";

34 ==

33 ==

35 ==

34 ==

36==

35==

37−```

36+</pre></td><td><pre>

38−

39−#### HTML code

40−

41−```

42−<html>

37+&lt;html>

43− <head>

38+ &lt;head>

44− <title>My page</title>

39+ &lt;title>My page&lt;/title>

45− <meta charset="utf-8" />

40+ &lt;meta charset="utf-8" />

46− </head>

41+ &lt;/head>

47− <body>

42+ &lt;body>

48− <h1>Welcome!</h1>

43+ &lt;h1>Welcome!&lt;/h1>

49− <p>Hello, world! Welcome to my

44+ &lt;p>Hello, world! Welcome to my

50 page. Here is an image:

45 page. Here is an image:

51− <br />

46+ &lt;br />

52− <img src="https://media.urbit.org/docs/userspace/dist/wut.svg" />

47+ &lt;img src="/foo.png" />

53− </p>

48+ &lt;/p>

54− </body>

49+ &lt;/body>

55−</html>

50+&lt;/html>

56−```

51+</pre></td></tr></tbody></table>

58## Tags and Closing

53## Tags and Closing

@@ -73,15 +68,9 @@ particular will be rendered as a single tag like `<br />` and `<img src="s

73Filled tags are closed via line-break. To fill text inside, add `:` after the

68Filled tags are closed via line-break. To fill text inside, add `:` after the

74tag name, then insert your plain text following a space. Example:

69tag name, then insert your plain text following a space. Example:

76−```hoon

71+| Sail | HTML |

77−;h1: The title

72+| ---------------- | -------------------------- |

78−```

79−

80−Produces:

81−

82−```

83−<h1>The title</h1>

73+| `;h1: The title` | `<h1>The title</h1>` |

84−```

86### Nested

75### Nested

@@ -91,41 +80,36 @@ tag, the text will be wrapped in a `<p>` tag.

92Example:

81Example:

94−```hoon

83+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>

84+<pre class="language-hoon">

95;body

85;body

96 ;h1: Blog title

86 ;h1: Blog title

97 This is some good content.

87 This is some good content.

98==

88==

99−```

89+</pre></td><td><pre>

100−

101−Produces:

102−

103−```

104−<body>

90+&lt;body>

105− <h1>Blog title</h1>

91+ &lt;h1>Blog title&lt;/h1>

106− <p>This is some good content.</p>

92+ &lt;p>This is some good content.&lt;/p>

107−</body>

93+&lt;/body>

108−```

94+</pre></td></tr></tbody></table>

109

110If we want to write a string with no tag at all, then we can prepend

96If we want to write a string with no tag at all, then we can prepend

111those untagged lines with `;` and then a space:

97those untagged lines with `;` and then a space:

112

113−```hoon

99+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>

100+<pre class="language-hoon">

114;body

101;body

115 ;h1: Welcome!

102 ;h1: Welcome!

116 ; Hello, world!

103 ; Hello, world!

117 ; We’re on the web.

104 ; We’re on the web.

118==

105==

119−```

106+</pre></td><td><pre>

120−

121−Produces:

122−

123−```

124−<body>

107+&lt;body>

125− <h1>Welcome!</h1>

108+ &lt;h1>Welcome!&lt;/h1>

109+ Hello, world!

126− Hello, world. We’re on the web.

110+ We’re on the web.

127−</body>

111+&lt;/body>

128−```

112+</pre></td></tr></tbody></table>

129

113

130## Attributes

114## Attributes

131

115

@@ -139,111 +123,72 @@ shown below.

139

123

140### Generic

124### Generic

141

125

142−Wide-form attributes:

126+<table><thead><tr><th>Form</th><th>Example</th></tr></thead><tbody>

143−

127+<tr><td>Wide</td><td><pre class="language-hoon">

144−```hoon

145;div(title "a tooltip", style "color:red")

128;div(title "a tooltip", style "color:red")

146 ;h1: Foo

129 ;h1: Foo

147 foo bar baz

130 foo bar baz

148==

131==

149−```

132+</pre></td></tr>

150−

133+<tr><td>Tall</td><td><pre class="language-hoon">

151−Tall-form attributes:

152−

153−```hoon

154;div

134;div

155 =title "a tooltip"

135 =title "a tooltip"

156 =style "color:red"

136 =style "color:red"

157 ;h1: Foo

137 ;h1: Foo

158 foo bar baz

138 foo bar baz

159==

139==

160−```

140+</pre></td></tr>

161−

141+<tr><td>HTML</td><td><pre>

162−Produces:

163−

164−```

165−<div title="a tooltip" style="color:red">

142+&lt;div title="a tooltip" style="color:red">

166− <h1>Foo</h1>

143+ &lt;h1>Foo&lt;/h1>

167− <p>foo bar baz </p>

144+ &lt;p>foo bar baz &lt;/p>

168−</div>

145+&lt;/div>

169−```

146+</pre></td></tr></tbody></table>

170

147

171### IDs

148### IDs

172

149

173Add `#` after tag name to add an ID:

150Add `#` after tag name to add an ID:

174

151

175−```hoon

152+| Sail | HTML |

176−;nav#header: Menu

153+| ------------------- | ----------------------------------- |

177−```

178−

179−Produces:

180−

181−```

182−<nav id="header">Menu</nav>

154+| `;nav#header: Menu` | `<nav id="header">Menu</nav>` |

183−```

184

155

185### Classes

156### Classes

186

157

187Add `.` after tag name to add a class:

158Add `.` after tag name to add a class:

188

159

189−```hoon

160+| Sail | HTML |

190−;h1.text-blue: Title

161+| ---------------------- | ---------------------------------------- |

191−```

192−

193−Produces:

194−

195−```

196−<h1 class="text-blue">Title</h1>

162+| `;h1.text-blue: Title` | `<h1 class="text-blue">Title</h1>` |

197−```

198

163

199If you want a class name that contains a space, you will need to use use the

164If you want a class name that contains a space, you will need to use use the

200syntax of a generic attribute:

165syntax of a generic attribute:

201

166

202−```hoon

167+| Sail | HTML |

203−;div(class "logo inverse");

168+| ----------------------------- | ---------------------------------------- |

204−```

205−

206−Produces:

207−

208−```

209−<div class="logo inverse"></div>

169+| `;div(class "logo inverse");` | `<div class="logo inverse"></div>` |

210−```

211

170

212### Images

171### Images

213

172

214Add `@` after the tag name to link your source:

173Add `@` after the tag name to link your source:

215

174

216−```hoon

175+| Sail | HTML |

217−;img@"example.png";

176+| --------------------- | ----------------------------- |

218−```

219−

220−Produces:

221−

222−```

223−<img src="example.png"/>

177+| `;img@"example.png";` | `<img src="example.png"/>` |

224−```

225

178

226To add attributes to the image, like size specifications, add the desired

179To add attributes to the image, like size specifications, add the desired

227attribute after the `"` of the image name and before the final `;` of the `img`

180attribute after the `"` of the image name and before the final `;` of the `img`

228−tag:

229−

230−```hoon

231−;img@"example.png"(width "100%");

181+tag like ;img@"example.png"(width "100%");`.

232−```

233

182

234### Links

183### Links

235

184

236Add `/` after tag name to start an `href`.

185Add `/` after tag name to start an `href`.

237

186

238−```hoon

187+<table><tr><th>Sail</th></tr><tr><td><pre class="language-hoon">

239;a/"urbit.org": A link to Urbit.org

188;a/"urbit.org": A link to Urbit.org

240−```

189+</pre></td></tr><tr><th>HTML</th></tr><tr><td><pre>

241−

242−Produces:

243−

244−```

245−<a href="urbit.org">A link to Urbit.org</a>

190+&lt;a href="urbit.org">A link to Urbit.org&lt;/a>

246−```

191+</pre></td></tr></table>

247

192

248## Interpolation

193## Interpolation

249

194

@@ -251,36 +196,29 @@ The textual content of tags, despite not being enclosed in double-quotes, are

251actually tapes. This means they support interpolated Hoon expressions in the

196actually tapes. This means they support interpolated Hoon expressions in the

252usual manner. For example:

197usual manner. For example:

253

198

254−```hoon

199+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>

200+<pre class="language-hoon">

255=| =time

201=| =time

256−;p: foo {<time>} bar

202+;p: foo {&lt;time>} bar

257−```

203+</pre></td><td><pre>

258−

259−Produces:

260−

261−```

262−<p>foo ~2000.1.1 baz</p>

204+&lt;p>foo ~2000.1.1 baz&lt;/p>

263−```

205+</pre></td></tr></tbody></table>

264

206

265Likewise:

207Likewise:

266

208

267−```hoon

209+<table><tr><th>Sail</th></tr><tr><td><pre class="language-hoon">

268=/ txt=tape " bananas"

210=/ txt=tape " bananas"

269;article

211;article

270 ;b: {(a-co:co (mul 42 789))}

212 ;b: {(a-co:co (mul 42 789))}

271 ; {txt}

213 ; {txt}

272− {<our>} {<now>} {<`@ux`(end 6 eny)>}

214+ {&lt;our>} {&lt;now>} {&lt;`@ux`(end 6 eny)>}

273==

215==

274−```

216+</pre></td></tr><tr><th>HTML</th></tr><tr><td><pre>

275−

276−Produces:

277−

278−```

279−<article>

217+&lt;article>

280− <b>33138</b> bananas

218+ &lt;b>33138&lt;/b> bananas

281− <p>~zod ~2022.2.21..09.54.21..5b63 0x9827.99c7.06f4.8ef9</p>

219+ &lt;p>~zod ~2022.2.21..09.54.21..5b63 0x9827.99c7.06f4.8ef9&lt;/p>

282−</article>

220+&lt;/article>

283−```

221+</pre></td></tr></table>

284

222

285## A note on CSS

223## A note on CSS

286

224

@@ -445,7 +383,8 @@ The [mictar rune](/docs/hoon/reference/rune/mic#-mictar) makes a `$marl` (a list

445of XML nodes) from a complex hoon expression. This rune lets you add many

383of XML nodes) from a complex hoon expression. This rune lets you add many

446elements inside another Sail element. For example:

384elements inside another Sail element. For example:

447

385

448−```hoon

386+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>

387+<pre class="language-hoon">

449=/ nums=(list @ud) (gulf 1 9)

388=/ nums=(list @ud) (gulf 1 9)

450;p

389;p

451 ;* %+ turn nums

390 ;* %+ turn nums

@@ -454,17 +393,15 @@ elements inside another Sail element. For example:

454 ;sup: {(a-co:co n)}

393 ;sup: {(a-co:co n)}

455 ;sub: {(a-co:co n)}

394 ;sub: {(a-co:co n)}

456==

395==

457−```

396+</pre></td><td><pre>

458−

397+&lt;p>

459−Produces:

398+ &lt;sub>1&lt;/sub>&lt;sup>2&lt;/sup>

460−

399+ &lt;sub>3&lt;/sub>&lt;sup>4&lt;/sup>

461−```

400+ &lt;sub>5&lt;/sub>&lt;sup>6&lt;/sup>

462−<p>

401+ &lt;sub>7&lt;/sub>&lt;sup>8&lt;/sup>

463− <sub>1</sub><sup>2</sup><sub>3</sub>

402+ &lt;sub>9&lt;/sub>

464− <sup>4</sup><sub>5</sub><sup>6</sup>

403+&lt;/p>

465− <sub>7</sub><sup>8</sup><sub>9</sub>

404+</pre></td></tr></tbody></table>

466−</p>

467−```

468

405

469### `;=` Mictis

406### `;=` Mictis

470

407

@@ -473,23 +410,20 @@ of XML nodes) from a series of `$manx`es. This is mostly useful if you want to

473make the list outside of an element and then be able to insert it afterwards.

410make the list outside of an element and then be able to insert it afterwards.

474For example:

411For example:

475

412

476−```hoon

413+<table><thead><tr><th>Sail</th><th>HTML</th></tr></thead><tbody><tr><td>

414+<pre class="language-hoon">

477=/ paras=marl

415=/ paras=marl

478− ;= ;p: This is the first node.

416+ ;= ;p: First node.

479− ;p: This is the second.

417+ ;p: Second node.

480− ;p: Here is the last one.

418+ ;p: Third node.

481 ==

419 ==

482;main

420;main

483 ;* paras

421 ;* paras

484==

422==

485−```

423+</pre></td><td><pre>

486−

487−Produces:

488−

489−```

490−<main>

424+&lt;main>

491− <p>This is the first node.</p>

425+ &lt;p>First node.&lt;/p>

492− <p>This is the second.</p>

426+ &lt;p>Second node.&lt;/p>

493− <p>Here is the last one.</p>

427+ &lt;p>Third node.&lt;/p>

494−</main>

428+&lt;/main>

495−```

429+</pre></td></tr></tbody></table>