git.iko.soy/htmlang
on master help sign in
htmlang/examples/blog.hl
86 lines 2.9 kB history raw
1-- A blog index: a layout function with named slots, posts loaded from JSON,
2-- and loops and conditions over records.
3@page [lang=en] Notes on the Web
4@meta description Short essays on static HTML, layout and tooling.
6@let --ink #1f2937
7@let --muted #6b7280
8@let --accent #3b82f6
9@let --line #e5e7eb
11-- Posts are records: $post.title, $post.tags, ...
12@data $posts posts.json
14-- A layout is an ordinary function. @slot blocks are filled by name; the
15-- rest of the caller's content replaces @children.
16@let @site
17 @el [width fill, max-width 720, center-x, padding 48 24, spacing 40, color var(--ink), line-height 1.6]
18 @header [spacing 4]
19 @link [font-weight 800, font-size 28, letter-spacing -0.5] / Notes on the Web
20 @slot tagline
21 @text [color var(--muted)] Short essays.
22 @main [spacing 40]
23 @children
24 @footer [padding-block-start 24, border-top 1 solid var(--line), color var(--muted), font-size 14]
25 @slot footer
26 Built with htmlang.
28-- A pill for each tag
29@let @tag [name]
30 @link [
31 padding 2 10,
32 border-radius 999,
33 background #eff6ff,
34 color var(--accent),
35 font-size 13,
36 hover:background #dbeafe
37 ] /tags/$name
38 #$name
40-- A post summary. `featured` is optional: a parameter with a default
41@let @post-card [post, featured false]
42 @article [
43 spacing 8,
44 border-radius 12,
45 if($featured, [padding 24, background #f8fafc, border 1 solid var(--line)])
46 ]
47 @if $featured
48 @text [font-size 12, font-weight 700, text-transform uppercase, letter-spacing 1, color var(--accent)] Featured
49 @h2 [font-size 22, line-height 1.3]
50 @link [hover:color var(--accent)] /posts/$post.slug $post.title
51 @row [spacing 8, align-items center, wrap, font-size 14, color var(--muted)]
52 @time [datetime=$post.date] $post.display_date
53 @text ·
54 @each $name in $post.tags
55 @tag [name $name]
56 @paragraph [color var(--muted), line-clamp 2] $post.summary
58-- Multi-line content: a function whose body is text
59@let @about
60 I write about building for the web with as little machinery as possible:
61 plain HTML, a little CSS, and tools that {@em stay out of the way}.
63@site
64 @slot tagline
65 @paragraph [color var(--muted)]
66 @about
68 @section [spacing 32]
69 @each $post in $posts
70 @post-card [post $post, featured $post.featured]
71 @else
72 @text [color var(--muted)] Nothing here yet.
74 @section [spacing 12]
75 @h2 [font-size 18] Tooling posts
76 @ul [spacing 4, list-style disc, padding-inline-start 20, children:display list-item]
77 @each $post in $posts
78 @if contains($post.tags, tooling)
79 @li
80 @link [color var(--accent), hover:text-decoration underline] /posts/$post.slug $post.title
82 @slot footer
83 @row [spacing 16]
84 @text ${length($posts)} posts
85 @spacer
86 @link [hover:color var(--ink)] /feed.xml RSS