git.iko.soy/htmlang
on v2026.9.25170201 help sign in
htmlang/examples/docs.hl
76 lines 2.6 kB history raw
1-- A documentation page: sidebar nav + prose content + code samples.
2@page Docs · Getting Started
3@lang en
4@let ink #0f172a
5@let muted #64748b
6@let primary #3b82f6
7@let code-bg #f1f5f9
9@let nav-link $label $href
10 @link [
11 padding 8, padding-x 12, rounded 6, color $ink,
12 hover:background #f1f5f9, transition all 0.1s ease
13 ] $href
14 $label
16@row [min-height 100vh]
17 -- Sidebar
18 @aside [
19 width 240, padding 32, padding-x 20,
20 background #fafafa, border-right 1 #e5e7eb, spacing 4
21 ]
22 @text [bold, size 13, color $muted, text-transform uppercase, letter-spacing 1] Introduction
23 @nav-link [label Overview, href #overview]
24 @nav-link [label Installation, href #install]
25 @nav-link [label First page, href #first-page]
26 @text [
27 bold, size 13, color $muted, text-transform uppercase, letter-spacing 1,
28 margin-block-start 20
29 ] Guides
30 @nav-link [label Layout, href #layout]
31 @nav-link [label Styling, href #styling]
32 @nav-link [label Functions, href #functions]
34 -- Prose
35 @main [padding 48, padding-x 56, max-width 800, spacing 24]
36 @text [bold, size 36, color $ink] Getting started
38 @paragraph [color $ink, line-height 1.7, size 17]
39 htmlang is a minimalist layout language that compiles to a single static
40 HTML file. This guide walks through the essentials in about five minutes.
42 @text [bold, size 24, color $ink] Installation
44 @pre [background $code-bg, padding 16, rounded 8, overflow-x auto]
45 cargo install --path .
47 @text [bold, size 24, color $ink] Your first page
49 @paragraph [color $ink, line-height 1.7]
50 Create a file called {@code [background $code-bg, padding 2 6, rounded 4] hello.hl} with:
52 @pre [background $code-bg, padding 16, rounded 8, overflow-x auto]
53 @page Hello
54 @column [padding 40, spacing 16]
55 @text [bold, size 32] Hi there
57 @paragraph [color $ink, line-height 1.7]
58 Compile it:
60 @pre [background $code-bg, padding 16, rounded 8, overflow-x auto]
61 htmlang hello.hl
63 @paragraph [color $ink, line-height 1.7]
64 You now have {@code [background $code-bg, padding 2 6, rounded 4] hello.html},
65 a single self-contained file with embedded CSS. No dependencies, no
66 JavaScript, no build step beyond the one command you just ran.
68 @text [bold, size 24, color $ink] Next steps
70 @list [spacing 8]
71 @item
72 @link [color $primary] /docs/layout Learn the layout model
73 @item
74 @link [color $primary] /docs/styling Customize styling
75 @item
76 @link [color $primary] /docs/functions Extract reusable components