| ... | @@ -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 with | 16 | > specification and there are likely implementation differences. Treat with |
| 17 | > caution. | 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 | meta: | 25 | meta: |
| 22 | title: some interesting blog post | 26 | title: some interesting blog post |
| 23 | description: i could be really interesting | 27 | description: i could be really interesting |
| 24 | embed: | 28 | embed: |
| 25 | image: /something/fire.png | 29 | 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> |
| 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 | ```ts | 38 | ```ts |
| 34 | function yapfest() { | 39 | function doMyFavoriteThing() { |
| 35 | return 200; | 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 | ## in conclusion | 61 | ## in conclusion |
| 44 | | 62 | |
| 45 | it's sweet | 63 | i love being alive. ${'<3'} from ${new Date().getFullYear()}. |
| 46 | | 64 | |
| 47 | </blog-layout> | 65 | </blog-layout> |
| 48 | ```` | 66 | ```` |