authorgravatar for git@paperclover.netclover caruso <git@paperclover.net> 2026-02-12 22:22:37-08:00
committergravatar for git@paperclover.netclover caruso <git@paperclover.net> 2026-02-12 22:22:57-08:00
log4326328d78523d6933f7257ca0c9cbfa71b6cbb2
tree47781499b0cfc4057513f5bcb959394465d7ea87
parent525512dd8576feeeeb56a895aa90a2240cdd7c7a
signaturebadge-check Signed by SSH key SHA256:xbd+BjjhyBfwk7GVoURf9Yx0gzDerHbvYv7SddNWmAs

chore: add a cuter example to the readme


1 files changed, 25 insertions(+), 7 deletions(-)

README.md+25-7
...@@ -16,33 +16,51 @@ leveraging the existing ecosystem....@@ -16,33 +16,51 @@ leveraging the existing ecosystem.
16> specification and there are likely implementation differences. Treat with16> specification and there are likely implementation differences. Treat with
17> caution.17> caution.
1818
19Here's a glance at how things look. Complete example documents in <./examples>
20
19````21````
20---22---
23// in `clover` static site generator, `export const meta` powers meta and
24// open graph tags. frontmatter becomes exports and in-scope constants.
21meta:25meta:
22 title: some interesting blog post26 title: some interesting blog post
23 description: i could be really interesting27 description: i could be really interesting
24 embed:28 embed:
25 image: /something/fire.png29 image: /something/fire.png
26---30---
31// this component will look for `blog-layout.marko`
27<blog-layout title=meta.title description=meta.description>32<blog-layout title=meta.title description=meta.description>
2833
29i'm a catgirl and i love to **exist**. meow meow meow34# ${meta.title}
3035
31nyaa!!!!!36i'm a catgirl and i love to **meow**! meow meow meow!
3237
33```ts38```ts
34function yapfest() {39function doMyFavoriteThing() {
35 return 200;40 return "meow! ".repeat(Math.floor(Math.random() * 1000)).trim();
36}41}
37```42```
3843
39and then the demo of the above:44## photos of my favorite people
45
46i love using Marko components because they're extremely concise to write.
47a lot less brace hell for non-string attributes, and more treats!
4048
41<include "./examples/01-first-example.marko" />49<photo-grid
50 base="/friends"
51 cols=[40, 30, 30]
52 rows=[300, 400, 200]
53>
54 <@img src="IMG_4831.jpeg" />
55 <@img src="IMG_4838.jpeg" w=2 />
56 <@img src="IMG_4839.jpeg" w=2 align="top" />
57 <@img src="IMG_4833.jpeg" h=2 />
58 <@img src="IMG_4832.jpeg" w=2 />
59</>
4260
43## in conclusion61## in conclusion
4462
45it's sweet63i love being alive. ${'<3'} from ${new Date().getFullYear()}.
4664
47</blog-layout>65</blog-layout>
48````66````