| ... | ... | @@ -16,33 +16,51 @@ leveraging the existing ecosystem. |
| 16 | 16 | > specification and there are likely implementation differences. Treat with |
| 17 | 17 | > caution. |
| 18 | 18 | |
| 19 | Here'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. |
| 21 | 25 | meta: |
| 22 | 26 | title: some interesting blog post |
| 23 | 27 | description: i could be really interesting |
| 24 | 28 | embed: |
| 25 | 29 | image: /something/fire.png |
| 26 | 30 | --- |
| 31 | // this component will look for `blog-layout.marko` |
| 27 | 32 | <blog-layout title=meta.title description=meta.description> |
| 28 | 33 | |
| 29 | | i'm a catgirl and i love to **exist**. meow meow meow |
| 34 | # ${meta.title} |
| 30 | 35 | |
| 31 | | nyaa!!!!! |
| 36 | i'm a catgirl and i love to **meow**! meow meow meow! |
| 32 | 37 | |
| 33 | 38 | ```ts |
| 34 | | function yapfest() { |
| 35 | | return 200; |
| 39 | function doMyFavoriteThing() { |
| 40 | return "meow! ".repeat(Math.floor(Math.random() * 1000)).trim(); |
| 36 | 41 | } |
| 37 | 42 | ``` |
| 38 | 43 | |
| 39 | | and then the demo of the above: |
| 44 | ## photos of my favorite people |
| 45 | |
| 46 | i love using Marko components because they're extremely concise to write. |
| 47 | a lot less brace hell for non-string attributes, and more treats! |
| 40 | 48 | |
| 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 | </> |
| 42 | 60 | |
| 43 | 61 | ## in conclusion |
| 44 | 62 | |
| 45 | | it's sweet |
| 63 | i love being alive. ${'<3'} from ${new Date().getFullYear()}. |
| 46 | 64 | |
| 47 | 65 | </blog-layout> |
| 48 | 66 | ```` |
clover caruso <git@paperclover.net> 2026-02-12 22:22:37-08:00
Signed by SSH key SHA256:xbd+BjjhyBfwk7GVoURf9Yx0gzDerHbvYv7SddNWmAs