diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..490d928
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,2 @@
+[*.luau]
+max_line_length = 80
diff --git a/.luaurc b/.luaurc
index bd87ff3..c678188 100644
--- a/.luaurc
+++ b/.luaurc
@@ -5,6 +5,7 @@
   "globals": [
     "maivi",
     "h",
-    "this"
+    "this",
+    "Iter"
   ]
 }
diff --git a/data/about.md b/data/about.tkt
similarity index 73%
rename from data/about.md
rename to data/about.tkt
index f84f39e..a657d99 100644
--- a/data/about.md
+++ b/data/about.tkt
@@ -2,7 +2,7 @@
 title = "about me :)"
 +++
 
-###### ✨ i'm passionate about:
+~ ✨ i'm passionate about:
 
 <ul>
     <li><span class="rainbow">software (neovim, nix, rust, and more)</span></li>
@@ -10,7 +10,7 @@ title = "about me :)"
     <li><span class="rainbow">nature & mythology (gardens, forests, folklore)</span></li>
 </ul>
 
-###### 🌱 in my projects, i blend these passions together:
+~ 🌱 in my projects, i blend these passions together:
 
 <ul>
     <li><span class="rainbow">evergarden (a soft, nature-inspired colorscheme)</span></li>
@@ -19,13 +19,17 @@ title = "about me :)"
     <li><span class="rainbow">... and more.</span></li>
 </ul>
 
-> _"Among the roses, beneath the twilight."_ 🌙🌿
+<blockquote>
+  "Among the roses, beneath the twilight." 🌙🌿
+</blockquote>
 
-## how this site was build
+== how this site was build
 
 this site is build using the following tools:
 
-- zola, for static site generation
+- [maivi], for html templating in luau
 - nix, for reproducible builds everywhere
 
 you can read more about it [here](/blog/building-this-site).
+
+[maivi]: https://codeberg.org/comfysage/site
diff --git a/data/blog/building-this-site.md b/data/blog/building-this-site.tkt
similarity index 73%
rename from data/blog/building-this-site.md
rename to data/blog/building-this-site.tkt
index 26b4ddc..58b26f7 100644
--- a/data/blog/building-this-site.md
+++ b/data/blog/building-this-site.tkt
@@ -1,12 +1,12 @@
 +++
-title = "building this site"
+title = "[outdated] building this site"
 date = 2025-01-22
 modified = 2026-01-07
 desc = "my tiny adventure in static site generation"
 tags = site,
 +++
 
-## static site generation
+= static site generation
 
 while looking for a static site generator for my site i tried a few interesting
 tools, like hugo and astro. i even tried building my own ssg (which failed
@@ -16,13 +16,13 @@ written in rust. zola uses tera templates to build sites with minimal effort.
 zola separates content from templates. where markdown files can specify which
 templates to use.
 
-### templates
+== templates
 
 here is my blog page. it specifies a template to use for the section. in this
 template i can use zola's section variables to create a dynamic posts page
 (which i'll get into in a bit).
 
-```markdown
+~~~ markdown
 +++
 title = "blog"
 description = "questionable ideas put to paper"
@@ -30,7 +30,7 @@ sort_by = "date"
 template = "pages/blog.html"
 page_template = "pages/post.html"
 +++
-```
+~~~
 
 the blog page also specifies a `page_template`. this is the template that will
 be used for all child pages (my blogposts).
@@ -38,7 +38,7 @@ be used for all child pages (my blogposts).
 in my `pages/blog.html` template i can use zola's section variables to iterate
 over all my blogposts and generate a list at build time.
 
-```tera
+~~~ tera
 {% block content %}
   {{ section.content | safe }}
   <ul class="blog-previews">
@@ -47,9 +47,9 @@ over all my blogposts and generate a list at build time.
     {% endfor %}
   </ul>
 {% endblock content %}
-```
+~~~
 
-## build and deploy
+= build and deploy
 
 to ease building and deploying the site i use nix to setup my tools and build.
 because the site is static i simply can use github pages to deploy.
@@ -57,7 +57,7 @@ because the site is static i simply can use github pages to deploy.
 the nix builder simply takes zola as a buildinput and runs the build. i then
 copy the static content to the `$out` directory.
 
-```nix
+~~~ nix
 stdenvNoCC.mkDerivation {
   src = ./.;
 
@@ -80,26 +80,23 @@ stdenvNoCC.mkDerivation {
     runHook postInstall
   '';
 }
-```
+~~~
 
 deployment is done using a single github
 action you can find
 [here](https://codeberg.org/comfysage/site/src/commit/0b94d7338c1d7c50c09635b4d20fbeab552d58fd/.github/workflows/deploy.yml).
 
-<aside class="note">
-  <h6>update: codeberg ci</h6>
-  <p>
-    deployment is now done with codeberg ci using woodpecker using the config
-    you can find
-    [here](https://codeberg.org/comfysage/site/src/commit/0b94d7338c1d7c50c09635b4d20fbeab552d58fd/.woodpecker/deploy.yaml)
-  </p>
-</aside>
+< (note) ~ update: codeberg ci
+< deployment is now done with codeberg ci using woodpecker using the config
+< you can find [here][codeberg ci]
 
-## resources
+[codeberg ci]: https://codeberg.org/comfysage/site/src/commit/0b94d7338c1d7c50c09635b4d20fbeab552d58fd/.woodpecker/deploy.yaml
+
+= resources
 
 <ul>
-    <li><a class="rainbow" href="https://www.getzola.org">zola</a></li>
-    <li><a class="rainbow" href="https://ebil.club">ebil.club</a></li>
-    <li><a class="rainbow" href="https://github.com/comfysage/evergarden">evergarden</a></li>
-    <li><a class="rainbow" href="https://nixos.org">nix</a></li>
+  <li><a class="rainbow" href="https://www.getzola.org">zola</a></li>
+  <li><a class="rainbow" href="https://ebil.club">ebil.club</a></li>
+  <li><a class="rainbow" href="https://github.com/comfysage/evergarden">evergarden</a></li>
+  <li><a class="rainbow" href="https://nixos.org">nix</a></li>
 <ul>
diff --git a/data/blog/creating-a-colorscheme.md b/data/blog/creating-a-colorscheme.tkt
similarity index 97%
rename from data/blog/creating-a-colorscheme.md
rename to data/blog/creating-a-colorscheme.tkt
index a01de41..f96e7b0 100644
--- a/data/blog/creating-a-colorscheme.md
+++ b/data/blog/creating-a-colorscheme.tkt
@@ -23,14 +23,14 @@ own colorscheme journey. these tips are based on my extensive time researching
 color theory, both in creating colorschemes and art in
 general.
 
-### where to start
+== where to start
 
 the best thing is to start with a concept. use a scene, videogame or movie you
 like as inspiration. next, collect some images relating to your concept. by
 creating a moodboard, you quickly have access to reference material for your
 colorscheme.
 
-### finding your neutral colors
+== finding your neutral colors
 
 every colorscheme starts with a background color. it is quite difficult to
 select foreground colors until you know which color they will contrast with;
@@ -54,7 +54,7 @@ next up is creating your neutral shades. this can simply be done by
 incrementally changing the components of your background color until they reach
 the value of your foreground color.
 
-### how to select colors
+== how to select colors
 
 look in your reference material for a _single_ color that you find
 representative of your concept. next, crank up the lightness and
@@ -66,7 +66,7 @@ the hue over about 60 to 90 degrees each time. by selecting colors that
 differ only in _one_ component, either hue or lightness or saturation, you
 create a palette that looks quite harmonious.
 
-### adjusting your colors
+== adjusting your colors
 
 you might notice that some of your colors look a little off. this is because
 saturation and lightness in the hsl (or hsv) color space is not perceptually
@@ -84,7 +84,7 @@ in general, there are a few rules for a coherent palette: your reds and oranges
 will have a higher saturation than your other colors, whereas your blues and
 greens will have a lower saturation.
 
-### look at community resources
+== look at community resources
 
 to further help you on your journey I have selected a collection of resources I
 discovered while researching colorschemes. the end result of these resources
diff --git a/data/blog/neovim-artio-picker.md b/data/blog/neovim-artio-picker.tkt
similarity index 94%
rename from data/blog/neovim-artio-picker.md
rename to data/blog/neovim-artio-picker.tkt
index 942fe77..950188a 100644
--- a/data/blog/neovim-artio-picker.md
+++ b/data/blog/neovim-artio-picker.tkt
@@ -5,7 +5,7 @@ desc = "working on a neovim general picker using the ui2 framework and native fe
 tags = neovim,plugin
 +++
 
-## preface
+= preface
 
 Fuzzy searching in neovim has been a heavily debated topic for years. There
 were those we fought for telescope being merged into core (which fortunately
@@ -39,7 +39,7 @@ in the cmdline like it's a normal buffer. This is very similar to emacs'
 minibuffer feature, which allows plugin authors to use the same UI component
 (at the bottom of the screen) to show information.
 
-## overview
+= overview
 
 [artio.nvim] is a lightweight fuzzy picker for neovim built on top of the new
 ui2 window system. It aims to provide a simple and responsive selection UI
@@ -56,7 +56,7 @@ plugins and core features. Since `vim.ui.select` allows plugin authors to pass
 [additional attributes][vim-ui-select-attributes] to its props artio can use these to add additional
 functionality.
 
-```lua
+~~~ lua
 local files = vim.iter(vim.fs.dir('.')):map(function(node, nodetype)
     return nodetype == 'file' and node
   end):totable()
@@ -72,9 +72,9 @@ vim.ui.select(files, {
     -- artio exclusive:
     get_icon = function(item) return require('mini.icons').get("file", item.v) end,
   }, function(item, _) vim.cmd.cd(item) end)
-```
+~~~
 
-## features
+= features
 
 Artio provides a fuzzy-filtered selection window implemented entirely in lua.
 it uses ui2 for layout and rendering, which keeps the interface consistent
@@ -94,16 +94,16 @@ to be a plugin focused on performance. If you want these features, you can imple
 
 For example, if you want to process fuzzy sorting through and external dependency you can do so by overwriting the default sorter:
 
-```lua
+~~~ lua
 package.loaded['artio'].sorter = function(lst, input)
     local output = ... -- run your external cmd through `vim.system`
 
     -- process output and return matches
     return vim.iter(output):fold({}, ...)
 end
-```
+~~~
 
-## configuration
+= configuration
 
 The configuration of artio is similarly designed like most neovim components:
 to be extensible and flexible. E.g., you can simply change some resizing behavior
@@ -112,7 +112,7 @@ with `config.shrink` or change the way the preview is drawn with
 
 an example setup could look something like this:
 
-```lua
+~~~ lua
 vim.pack.add({ "https://codeberg.org/comfysage/artio.nvim" })
 
 -- after installation, calling its setup function allows you to adjust behavior
@@ -138,11 +138,11 @@ require('artio').setup({
     hidestatusline = true,
   },
 })
-```
+~~~
 
 Keymappings are left to the user. You can find some examples in the [README]:
 
-```lua
+~~~ lua
 vim.keymap.set("n", "<leader><leader>", "<Plug>(artio-files)")
 vim.keymap.set("n", "<leader>fg", "<Plug>(artio-grep)")
 
@@ -154,22 +154,20 @@ vim.keymap.set("n", "<leader>fh", "<Plug>(artio-helptags)")
 vim.keymap.set("n", "<leader>fb", "<Plug>(artio-buffers)")
 vim.keymap.set("n", "<leader>f/", "<Plug>(artio-buffergrep)")
 vim.keymap.set("n", "<leader>fo", "<Plug>(artio-oldfiles)")
-```
+~~~
 
 These mappings are available through the [`<Plug>`][plug-key] interface. These
 are abstract 'keys' that have been mapped by plugin authors (like me) to certain action
 and can be mapped to by users with their custom keybinds.
 
-<!--
-TODO: comparison with other pickers
-- position relative to builtin UI
-- related tools and comparison
-- contrast with Telescope
-- contrast with fzf-lua
-- contrast with snacks
--->
+# TODO: comparison with other pickers
+# - position relative to builtin UI
+# - related tools and comparison
+# - contrast with Telescope
+# - contrast with fzf-lua
+# - contrast with snacks
 
-## future
+= future
 
 Currently artio is in a relatively stable state. Improvements or changes might
 be made to solve issues or improve performance but there (probably) won't be
@@ -178,22 +176,18 @@ any major api changes.
 As for possible future features, im mostly looking into leveraging async
 handling of sorters but i'm open to further suggestions.
 
-<!--
-TODO:
-- future direction
-- possible improvements
-- areas intentionally left open
-- maintenance philosophy (long-term intent)
--->
-
-## closing
-
-<!--
-> closing summary (wrap-up)
-> restating purpose
-> who should use it
-> who probably should not
--->
+# TODO:
+# - future direction
+# - possible improvements
+# - areas intentionally left open
+# - maintenance philosophy (long-term intent)
+
+= closing
+
+# closing summary (wrap-up)
+# restating purpose
+# who should use it
+# who probably should not
 
 I discovered a lot of cool features and weird neovim quirks while designing
 this plugin. Neovim's ui2 definitely is not finished yet and a minibuffer
diff --git a/data/blog/neovim-native-configuration.md b/data/blog/neovim-native-configuration.tkt
similarity index 81%
rename from data/blog/neovim-native-configuration.md
rename to data/blog/neovim-native-configuration.tkt
index 8445531..b30cb1c 100644
--- a/data/blog/neovim-native-configuration.md
+++ b/data/blog/neovim-native-configuration.tkt
@@ -5,19 +5,11 @@ desc = "my adventure building a native-first neovim experience"
 tags = neovim,config
 +++
 
-<!--
-### intro
-
-(set the scene and intent)
-
-- why i wanted a quieter, native-first neovim experience
-
-- frustration with sprawling plugin ecosystems and fragile abstractions
-
-- goal: a configuration that feels like neovim, not a replacement for it
-
-- result: sylvee, a native-first neovim distro — and lynn, the small plugin manager that powers it
--->
+# intro
+# - why i wanted a quieter, native-first neovim experience
+# - frustration with sprawling plugin ecosystems and fragile abstractions
+# - goal: a configuration that feels like neovim, not a replacement for it
+# - result: sylvee, a native-first neovim distro — and lynn, the small plugin manager that powers it
 
 if you're like me and love configuring your neovim setup, you might reach a
 point of customization where the different plugins you're using start holding
@@ -33,21 +25,14 @@ focus on bringing features to my editor using built-in building blocks and
 components. this meant no [nvim-cmp] or [blink-cmp] and, most importantly, no
 [lazy.nvim].
 
-### philosophy and foundation
-
-<!--
-### section 1: philosophy and foundation
-
-(what kind of user sylvee is built for)
-
-- starting from neovim’s built-in features
+== philosophy and foundation
 
-- avoiding wrapping everything in custom logic
-
-- respecting the defaults, only extending when necessary
-
-- the garden metaphor: letting neovim bloom on its own
--->
+# section 1: philosophy and foundation
+# (what kind of user sylvee is built for)
+# - starting from neovim’s built-in features
+# - avoiding wrapping everything in custom logic
+# - respecting the defaults, only extending when necessary
+# - the garden metaphor: letting neovim bloom on its own
 
 neovim has become incredibly powerful out-of-the-box and i want to take advantage of that.
 so i created [sylvee][], a native-first neovim configuration that builds on the amazing
@@ -57,7 +42,7 @@ to power plugin management i created a wrapper around [`vim.pack`], neovim
 nightly's native plugin manager. this wrapper is called [lynn.nvim][], and it
 powers the configuration that i made.
 
-## neovim's built-in features
+= neovim's built-in features
 
 sylvee was built to extend neovim's built-in features. i didn't want to wrap my
 clean and powerful editor in a layer of bloated plugins. using neovim's
@@ -93,25 +78,9 @@ get sourced. all you need to do is enable the lsp's you use using
 simplified: you no longer have to even `require` this plugin - just
 throw it in your plugin list and it works.
 
-<!-- TODO: mention `vim.pack` -->
-
-### sylvee: keeping configuration gentle
-
-<!--
-
-### section 2: keeping configuration gentle
-
-(how sylvee stays legible and minimal)
-
-- using the plugin/ directory for simple autoloading
-
-- only mapping keys when the default is missing
+# TODO: mention `vim.pack`
 
-- splitting plugin config into clean, isolated files
-
-- relying on built-in commands over external tools when possible
-
--->
+= sylvee: keeping configuration simple
 
 a core part of sylvee is the idea that configuration should be simple and
 minimal. this meant using the `plugin/` to load custom scripts instead of death
@@ -127,29 +96,9 @@ keymap model: switching tabs made more sense with `bracket + <tab>` than
 [`gt/gT`]. although the goal is minimalism, i didn't want to compromise on my
 preferences - sylvee can be a little opinionated sometimes.
 
-## lynn - a plugin manager with charm
-
-<!--
-
-### section 3: introducing lynn — a plugin manager with charm
-
-(what problem lynn solves and how it fits)
-
-- why i didn’t want to use lazy.nvim or packer
-
-- neovim 0.12 introduced vim.pack — a good foundation
-
-- lynn as a lightweight wrapper: no magic, just convenience
+= lynn: a plugin manager with charm
 
-- declarative plugin spec in one file
-
-- plugin configs in config/ matched by name, sourced with :runtime
-
-- no opts/config nesting or plugin-specific logic
-
--->
-
-### why i don't like lazy.nvim or packer
+== why i don't like lazy.nvim or packer
 
 over time the neovim community has reinvented plugin management time and time
 again - to me the days of `vim-plug` dont feel that far away and we've come a
@@ -190,7 +139,7 @@ led me to create [lynn.nvim], a plugin manager that leverages neovim's builtin
 features which are responsible for all the heavy lifting and creates a configuration interface that fits
 neovim's file based model.
 
-### lynn as a lightweight wrapper: no magic, just convenience
+== lynn as a lightweight wrapper: no magic, just convenience
 
 lynn didnt need to do a lot: git cloning, installing, and setting up the plugin
 path was already handled by [`vim.pack`]. lynn simply needed to help with urls
@@ -215,33 +164,15 @@ done by the `:runtime` command - neovim already has a builtin mechanism for
 finding files in your setup and there is no need for lua code going over your
 filesystem.
 
-## using lynn and sylvee
-
-<!--
-
-### section 4: implementation details
-
-(technical walkthrough for both tools)
+= using lynn and sylvee
 
-- how plugin specs work in lynn
-
-- how `require("lynn").setup("plugins")` integrates with vim.pack.add
-
-- how sylvee calls lynn and sets up the config directory
-
-- using NVIM_APPNAME=sylvee nvim to isolate config
-
-- optional tools: fzf, ripgrep, etc for enhancements
-
--->
-
-### adding plugins to lynn
+== adding plugins to lynn
 
 plugin specs are quite simple. you're probably already familiar with most of the fields it supports.
 
-a simple example would look like this:
+here's an example with all the possible options:
 
-```lua
+~~~ lua
 {
   'owner/repo',
   url = 'https://github.com/owner/repo', -- optionally specify a custom url
@@ -254,7 +185,7 @@ a simple example would look like this:
   after = function() end, -- pass a function to run after the plugin is loaded, by default sources the `config/plugin-name.lua` file
   before = function() end, -- pass a function to run before the plugin is loaded
 }
-```
+~~~
 
 lazy loading is only done if `lazy` is set to `true` or an autocmd event is
 specified. this means that normally lynn will load the plugin after neovim's
@@ -265,40 +196,24 @@ to be used. `after` will default to loading your config file so any important
 code should go there. `before` is only useful if you want to run code before
 the plugin is loaded.
 
-### using sylvee
+== using sylvee
 
 using sylvee is as simple as cloning the repo and running neovim with [`NVIM_APPNAME`] set to `"sylvee"`.
 
-```bash
+~~~ bash
 git clone https://github.com/comfysage/sylvee.git ~/.config/sylvee
 NVIM_APPNAME=sylvee nvim
-```
+~~~
 
 this can be simplified even more by creating a quick wrapper script for sylvee:
 
-```bash
+~~~ bash
 #!/usr/bin/env sh
 # ~/.local/bin/sylvee
 NVIM_APPNAME=sylvee nvim "$@"
-```
-
-## what sylvee and lynn don’t do
-
-<!--
+~~~
 
-### section 5: tradeoffs and boundaries
-
-(what sylvee and lynn don’t do, on purpose)
-
-- no snapshot lockfiles (you manage updates yourself)
-
-- no plugin-specific helpers or config DSLs
-
-- no complex lazy-loading rules or nested plugin metadata
-
-- this makes lynn less “powerful” than full managers — but more understandable
-
--->
+== what sylvee and lynn don’t do
 
 sylvee and lynn don't aim to solve every problem. they just try to stay out of
 your way sylvee is a minimalistic approach that tries to remove the friction of
@@ -322,23 +237,7 @@ edge-cases.
 
 [neovim/pr/lock]: https://github.com/neovim/neovim/issues/34776
 
-## growing your own garden
-
-<!--
-
-### section 6: growing your own garden
-
-(how others can build on this approach)
-
-- using sylvee as a base, or picking just ideas from it
-
-- using lynn standalone in any neovim config
-
-- how the philosophy might scale (or not) for other users
-
-- future thoughts: themed variants, small enhancements, no abstractions
-
--->
+= growing your own garden
 
 i would also like to note that the philosophy of sylvee and lynn is not to be a
 complete solution, but rather a starting point for those that want to build
@@ -360,23 +259,6 @@ own lazy-loading solution (ofcourse thats always a viable and fun option).
 [neovim/docs/grep]: https://neovim.io/doc/user/quickfix.html#_5.-using-:vimgrep-and-:grep
 [neovim/docs/marks]: https://neovim.io/doc/user/motion.html#_7.-marks
 
-<!--
-
-### outro
-
-(closing thoughts)
-
-- this setup works because it trusts neovim
-
-- small tools, small files, small surprises
-
-- sylvee and lynn don’t aim to solve every problem
-- they just try to stay out of your way
-
-- if that sounds like your kind of garden, give them a try
-
--->
-
 i hope that this setup works for you. i personally loved working on it and
 learned a lot about how powerful of an editor neovim can be if you try to look
 into some of its more complex aspects. the neovim core team has worked really
@@ -392,7 +274,7 @@ if that sounds like your kind of garden, give sylvee and lynn a try. i think
 they're something interesting to try out. if you have any questions or feedback
 please [let me know](https://github.com/comfysage/sylvee/discussions)!
 
-# references
+= references
 
 here are some references that add more context to this blogpost:
 
diff --git a/data/index.md b/data/index.md
deleted file mode 100644
index a0e79c8..0000000
--- a/data/index.md
+++ /dev/null
@@ -1,21 +0,0 @@
-## 🪴 garden
-
-welcome to my internet garden, a cozy corner of the internet for storing my ideas and sharing what i'm working on.
-
-```bash
-curl -L robinwobin.dev
-```
-
-in my garden you can find my [blog posts](/blog) and more frequently some small [notes](/notes).
-
-this is where i keep the tools i've built - small creations designed to make
-development smoother, workflows simpler, and ideas easier to bring to life.
-
-- <a class="rainbow" href="https://github.com/everviolet/nvim">evergarden</a> - a soft, nature-inspired colorscheme
-- <a class="rainbow" href="/tools/ivy">ivy</a> - a nix-based neovim setup
-- <a class="rainbow" href="/tools/lynn">lynn.nvim</a> - a lightweight neovim plugin manager _(you can read more about it [here](/blog/neovim-native-configuration))_
-- <a class="rainbow" href="https://github.com/comfysage/artio.nvim">artio.nvim</a> - a minimal, nature-infused file picker for neovim using the new extui window
-
-more tools are always growing here - check back later! 🌿
-
-you can find links to some cool people on the [badges](/badges) page.
diff --git a/data/index.tkt b/data/index.tkt
new file mode 100644
index 0000000..22b8f41
--- /dev/null
+++ b/data/index.tkt
@@ -0,0 +1,23 @@
+== 🪴 garden
+
+welcome to my internet garden, a cozy corner of the internet for storing my ideas and sharing what i'm working on.
+
+~~~ bash
+curl -L robinwobin.dev
+~~~
+
+in my garden you can find my [blog posts](/blog) and more frequently some small [notes](/notes).
+
+this is where i keep the tools i've built - small creations designed to make
+development smoother, workflows simpler, and ideas easier to bring to life.
+
+<ul>
+  <li><a class="rainbow" href="https://github.com/everviolet/nvim">evergarden</a> - a soft, nature-inspired colorscheme</li>
+  <li><a class="rainbow" href="/tools/ivy">ivy</a> - a nix-based neovim setup</li>
+  <li><a class="rainbow" href="/tools/lynn">lynn.nvim</a> - a lightweight neovim plugin manager (you can read more about it <a href="/blog/neovim-native-configuration">here</a>)</li>
+  <li><a class="rainbow" href="https://github.com/comfysage/artio.nvim">artio.nvim</a> - a minimal, nature-infused file picker for neovim using the new extui window</li>
+</ul>
+
+more tools are always growing here so check back later! 🌿
+
+you can find links to some cool people on the [badges](/badges) page.
diff --git a/data/notes/artio-live-mode-toggle.md b/data/notes/artio-live-mode-toggle.tkt
similarity index 100%
rename from data/notes/artio-live-mode-toggle.md
rename to data/notes/artio-live-mode-toggle.tkt
diff --git a/data/notes/artio-released.md b/data/notes/artio-released.tkt
similarity index 100%
rename from data/notes/artio-released.md
rename to data/notes/artio-released.tkt
diff --git a/data/notes/aspen-released.md b/data/notes/aspen-released.tkt
similarity index 100%
rename from data/notes/aspen-released.md
rename to data/notes/aspen-released.tkt
diff --git a/data/notes/ebil-released.md b/data/notes/ebil-released.tkt
similarity index 100%
rename from data/notes/ebil-released.md
rename to data/notes/ebil-released.tkt
diff --git a/data/notes/evergarden-npm-release.md b/data/notes/evergarden-npm-release.tkt
similarity index 96%
rename from data/notes/evergarden-npm-release.md
rename to data/notes/evergarden-npm-release.tkt
index bf94ceb..fd81e76 100644
--- a/data/notes/evergarden-npm-release.md
+++ b/data/notes/evergarden-npm-release.tkt
@@ -7,7 +7,7 @@ you can install the evergarden palette as an npm package: `@everviolet/palette`
 
 here’s how to bring the garden into your stylesheets:
 
-```css
+~~~ css
 /* if you have it installed with a package manager & a css loader configured */
 @import "@everviolet/palette/css/fall.css";
 
@@ -18,13 +18,13 @@ here’s how to bring the garden into your stylesheets:
   background-color: var(--ev-winter-green);
   color: var(--ev-winter-crust);
 }
-```
+~~~
 
-```scss
+~~~ scss
 @use "@everviolet/palette/scss/evergarden" as *;
 
 .button {
   background-color: $green;
   color: $crust;
 }
-```
+~~~
diff --git a/data/notes/evergarden-site-release.md b/data/notes/evergarden-site-release.tkt
similarity index 100%
rename from data/notes/evergarden-site-release.md
rename to data/notes/evergarden-site-release.tkt
diff --git a/data/notes/evergarden-sublime-text-release.md b/data/notes/evergarden-sublime-text-release.tkt
similarity index 100%
rename from data/notes/evergarden-sublime-text-release.md
rename to data/notes/evergarden-sublime-text-release.tkt
diff --git a/data/notes/evergarden-userstyles-release.md b/data/notes/evergarden-userstyles-release.tkt
similarity index 58%
rename from data/notes/evergarden-userstyles-release.md
rename to data/notes/evergarden-userstyles-release.tkt
index d2dbb7e..da340cb 100644
--- a/data/notes/evergarden-userstyles-release.md
+++ b/data/notes/evergarden-userstyles-release.tkt
@@ -5,10 +5,9 @@ date = 2026-03-02
 
 evergarden is now available as a userstyle!!
 
-i created a small patcher for the [catppuccin userstyles
-repo](https://github.com/catppuccin/userstyles) with the help of their lead
-maintainer, [@uncenter]. this allows us to use their amazing userstyles with evergarden
-colors!
+i created a small patcher for the [catppuccin userstyles repo](https://github.com/catppuccin/userstyles)
+with help from [@june]. this allows us to use
+their amazing userstyles with evergarden colors!
 
 the userstyles are available on [github] and [codeberg].
 
@@ -16,4 +15,4 @@ the userstyles are available on [github] and [codeberg].
 
 [github]: http://github.com/everviolet/userstyles
 [codeberg]: https://codeberg.org/evergarden/userstyles
-[@uncenter]: https://github.com/uncenter
+[@june]: https://koi.rip
diff --git a/data/notes/lylla-sections.md b/data/notes/lylla-sections.tkt
similarity index 100%
rename from data/notes/lylla-sections.md
rename to data/notes/lylla-sections.tkt
diff --git a/data/notes/mimi-released.md b/data/notes/mimi-released.tkt
similarity index 100%
rename from data/notes/mimi-released.md
rename to data/notes/mimi-released.tkt
diff --git a/data/notes/site-zig-minimal.md b/data/notes/site-zig-minimal.tkt
similarity index 100%
rename from data/notes/site-zig-minimal.md
rename to data/notes/site-zig-minimal.tkt
diff --git a/lua/components/meta/date.luau b/lua/components/meta/date.luau
new file mode 100644
index 0000000..44418a8
--- /dev/null
+++ b/lua/components/meta/date.luau
@@ -0,0 +1,9 @@
+return maivi.component(function(_, children)
+  local date = children[1]
+  return date
+      and h.span({
+        class = "meta date",
+        os.date("%d %b %Y", date),
+      })
+    or nil
+end)
diff --git a/lua/components/meta/desc.luau b/lua/components/meta/desc.luau
new file mode 100644
index 0000000..57c0ac9
--- /dev/null
+++ b/lua/components/meta/desc.luau
@@ -0,0 +1,7 @@
+return maivi.component(function(_, children)
+  local desc = children[1]
+  return desc and h.div({
+    class = "description",
+    h.em(desc),
+  }) or nil
+end)
diff --git a/lua/components/postpageitem.luau b/lua/components/postpageitem.luau
index ef1a3e0..d27dc67 100644
--- a/lua/components/postpageitem.luau
+++ b/lua/components/postpageitem.luau
@@ -1,22 +1,20 @@
-return maivi.component(function(props)
+local metadate = maivi.mod("components/meta/date")
+local metadesc = maivi.mod("components/meta/desc")
+local taglist = maivi.mod("components/taglist")
+
+return function(props)
   return h.li({
     class = "blogpost",
     h.a({
       class = "blogpost-info",
       href = props.url,
 
-      props.date and h.div({
-        class = "date",
-        os.date("%d %b %Y", props.date),
-      }),
+      metadate(props.date),
       h.h2({ class = "title", props.title }),
 
-      props.desc and h.div({
-        class = "description",
-        h.em(props.desc),
-      }),
+      metadesc(props.desc),
     }),
 
-    h.components.taglist(props),
+    taglist(props.tags),
   })
-end)
+end
diff --git a/lua/components/svg.luau b/lua/components/svg.luau
index d43cc70..d64b1cb 100644
--- a/lua/components/svg.luau
+++ b/lua/components/svg.luau
@@ -1,4 +1,4 @@
-return function(props)
+return maivi.component(function(props)
   return h.div({
     class = "icon",
     style = table.concat({
@@ -12,4 +12,4 @@ return function(props)
       props.style,
     }),
   })
-end
+end)
diff --git a/lua/components/taglist.luau b/lua/components/taglist.luau
index fbcd67b..e76664d 100644
--- a/lua/components/taglist.luau
+++ b/lua/components/taglist.luau
@@ -1,9 +1,9 @@
-return function(props)
+return maivi.component(function(_, children)
   return h.ul({
     role = "list",
     class = "tag-list",
 
-    props.tags and h(Iter.lst(props.tags)
+    h(Iter.lst(children)
       :map(function(_, tag)
         return h.li({
           h.a({
@@ -14,6 +14,6 @@ return function(props)
           }),
         })
       end)
-      :to()) or nil,
+      :to()),
   })
-end
+end)
diff --git a/lua/init.luau b/lua/init.luau
index 5afa12f..1e67413 100644
--- a/lua/init.luau
+++ b/lua/init.luau
@@ -1,34 +1,34 @@
 return function()
-  maivi.router:add("/", h.pages.index, { content = { path = "data/index.md" } })
-  maivi.router:add("/404", h.pages["404"], {
+  maivi.router:add("/", maivi.mod("pages/index"), { path = "data/index.tkt" })
+  maivi.router:add("/404", maivi.mod("pages/404"), {
     title = "404",
     desc = "i dont know how you ended up here",
   })
 
-  maivi.router:add("/blog", h.pages.blog, {
+  maivi.router:add("/blog", maivi.mod("pages/blog"), {
     title = "blog",
     desc = "questionable ideas put to paper",
   })
-  maivi.router:add("/notes", h.pages.notes, {
+  maivi.router:add("/notes", maivi.mod("pages/notes"), {
     title = "notes",
     desc = "small short notes, announcements and other cool stuff",
   })
-  maivi.router:add("/about", h.pages._empty, {
+  maivi.router:add("/about", maivi.mod("pages/_empty"), {
     title = "about me :)",
-    content = { path = "data/about.md" },
+    path = "data/about.tkt",
   })
-  maivi.router:add("/badges", h.pages.badges, {
+  maivi.router:add("/badges", maivi.mod("pages/badges"), {
     title = "badges",
     desc = "collection of cool badges",
   })
 
-  maivi.router:add("/start", h.pages.start, {
+  maivi.router:add("/start", maivi.mod("pages/start"), {
     title = "start 🌱",
     desc = "cool start page:)",
   })
 
   -- TODO: add atom.xml
-  maivi.router:add("/rss.xml", h.pages.rss, {})
+  maivi.router:add("/rss.xml", maivi.mod("pages/rss"), {})
 
   -- data =======================================================================
 
@@ -42,7 +42,7 @@ return function()
         return
       end
 
-      if string.sub(file, -3) ~= ".md" then
+      if not (string.sub(file, -4) ~= ".tkt" or string.sub(file, -3) ~= ".md") then
         return
       end
 
@@ -52,8 +52,9 @@ return function()
         return
       end
 
-      data.content = { path = file }
+      data.path = file
       data.url = url
+
       return url, data
     end
   end
@@ -67,6 +68,6 @@ return function()
   maivi.data.notes = Iter.tbl(this.data):mapattrs(selectmd("^data/notes/")):to()
   maivi.data.tools = Iter.tbl(this.data):mapattrs(selectmd("^data/tools/")):to()
 
-  Iter.tbl(maivi.data.posts):each(rendermd(h.pages.post))
-  Iter.tbl(maivi.data.tools):each(rendermd(h.pages._empty))
+  Iter.tbl(maivi.data.posts):each(rendermd(maivi.mod("pages/post")))
+  Iter.tbl(maivi.data.tools):each(rendermd(maivi.mod("pages/_empty")))
 end
diff --git a/lua/layouts/base.luau b/lua/layouts/base.luau
index 7d33d22..adbe354 100644
--- a/lua/layouts/base.luau
+++ b/lua/layouts/base.luau
@@ -1,80 +1,136 @@
-return h.layout(function(slots)
-  return function(props)
-    local title = props.title and string.format("%s | robinwobin", props.title) or "robinwobin"
+local search = maivi.mod("partials/search")
+
+return maivi.layout(function(slots)
+  return maivi.component(function(props)
+    local title = props.title and string.format("%s | robinwobin", props.title)
+      or "robinwobin"
     local description = props.desc or "a cozy site"
 
     return h.document({
       h.html({
         lang = "en",
-        slots.head or h.head({
-          h.meta({ charset = "utf-8" }),
-          h.meta({ name = "viewport", content = "width=device-width, initial-scale=1" }),
-          h.meta({ name = "color-scheme", content = "dark light" }),
-          h.meta({ name = "darkreader-lock" }),
-
-          h.stylesheet({
-            href = "/evergarden-winter.css",
-            media = "(prefers-color-scheme: dark)",
-          }),
-          h.stylesheet({
-            href = "/evergarden-summer.css",
-            media = "(prefers-color-scheme: light)",
-          }),
+        slots.head
+          or h.head({
+            h.meta({ charset = "utf-8" }),
+            h.meta({
+              name = "viewport",
+              content = "width=device-width, initial-scale=1",
+            }),
+            h.meta({ name = "color-scheme", content = "dark light" }),
+            h.meta({ name = "darkreader-lock" }),
 
-          h.title(title),
-          h.meta({ name = "author", content = "robinwobin" }),
-          h.meta({ name = "description", content = description }),
-          h.link({ rel = "canonical", href = this.base_url }),
-          h.link({ rel = "expect", href = "#below-the-fold", blocking = "render" }),
-
-          h.meta({ property = "twitter:domain", content = "robinwobin.dev" }),
-          h.meta({ name = "twitter:image", content = "/me.webp" }),
-          h.meta({ name = "twitter:card", content = description }),
-
-          h.meta({ property = "og:title", content = title }),
-          h.meta({ property = "og:url", content = this.base_url }),
-          h.meta({ property = "og:site_name", content = "robinwobin.dev" }),
-          h.meta({ property = "og:description", content = description }),
-          h.meta({ property = "og:type", content = "website" }),
-          h.meta({ property = "og:image:url", content = "/me.webp" }),
-
-          h.meta({ name = "theme-color", content = "#cbe3b3" }),
-
-          h.link({ rel = "alternate", type = "application/rss+xml", href = "/rss.xml" }),
-          h.link({ rel = "alternate", type = "application/atom+xml", href = "/atom.xml" }),
-          h.link({ type = "text/plain", rel = "author", href = "/humans.txt" }),
-
-          h.link({ rel = "icon", href = "/favicon.svg" }),
-          h.link({ rel = "mask-icon", href = "/favicon.svg", color = "#cbe3b3" }),
-
-          h.style([[ @layer reset, theme, base, layout, components, partials, page, media; ]]),
-          -- reset
-          h.stylesheet({ href = "/styles/reset.css" }),
-          h.stylesheet({ href = "/styles/media.css" }),
-          -- preload
-          h.stylesheet({ href = "/styles/fonts.css" }),
-          h.stylesheet({ href = "/styles/colors.css" }),
-          -- base
-          h.stylesheet({ href = "/styles/base.css" }),
-          h.stylesheet({ href = "/styles/layout.css" }),
-          -- components
-          h.stylesheet({ href = "/styles/components/links.css" }),
-          h.stylesheet({ href = "/styles/components/text.css" }),
-          h.stylesheet({ href = "/styles/components/page.css" }),
-
-          -- partials
-          h.stylesheet({ href = "/styles/partials/section.css" }),
-          h.stylesheet({ href = "/styles/partials/sidebar.css" }),
-          h.stylesheet({ href = "/styles/partials/search.css" }),
-          h.stylesheet({ href = "/styles/partials/navbar.css" }),
-          h.stylesheet({ href = "/styles/partials/bloglist.css" }),
-          h.stylesheet({ href = "/styles/partials/footer.css" }),
-          h.stylesheet({ href = "/styles/partials/blog.css" }),
-          h.stylesheet({ href = "/styles/partials/sitename.css" }),
-          h.stylesheet({ href = string.format("/styles/pages/%s.css", props.path) }),
-
-          slots.additionalHeader,
-        }),
+            h.stylesheet({
+              href = "/evergarden-winter.css",
+              media = "(prefers-color-scheme: dark)",
+            }),
+            h.stylesheet({
+              href = "/evergarden-summer.css",
+              media = "(prefers-color-scheme: light)",
+            }),
+
+            h.title(title),
+            h.meta({ name = "author", content = "robinwobin" }),
+            h.meta({ name = "description", content = description }),
+            h.link({ rel = "canonical", href = this.base_url }),
+            h.link({
+              rel = "expect",
+              href = "#below-the-fold",
+              blocking = "render",
+            }),
+            h.meta({ property = "og:title", content = title }),
+            h.meta({ property = "og:url", content = this.base_url }),
+            h.meta({ property = "og:site_name", content = "robinwobin.dev" }),
+            h.meta({ property = "og:description", content = description }),
+            h.meta({ property = "og:type", content = "website" }),
+            h.meta({ property = "og:image:url", content = "/me.webp" }),
+
+            h.meta({ name = "theme-color", content = "#cbe3b3" }),
+
+            h.link({
+              rel = "alternate",
+              type = "application/rss+xml",
+              href = "/rss.xml",
+            }),
+            h.link({
+              rel = "alternate",
+              type = "application/atom+xml",
+              href = "/atom.xml",
+            }),
+            h.link({
+              type = "text/plain",
+              rel = "author",
+              href = "/humans.txt",
+            }),
+
+            h.link({ rel = "icon", href = "/favicon.svg" }),
+            h.link({
+              rel = "mask-icon",
+              href = "/favicon.svg",
+              color = "#cbe3b3",
+            }),
+
+            -- link rel ========================================================
+
+            h.link({
+              title = "email",
+              rel = "me",
+              href = "mailto:me@robinwobin.dev",
+            }),
+            h.link({
+              title = "codeberg",
+              rel = "me",
+              href = "https://codeberg.org/comfysage",
+            }),
+            h.link({
+              title = "github",
+              rel = "me",
+              href = "https://github.com/comfysage",
+            }),
+            h.link({
+              title = "bluesky",
+              rel = "me atproto",
+              href = "https://bsky.app/profile/did:plc:khzb5upklnupwpxllpbmrv5a",
+            }),
+            h.link({
+              title = "mastodon",
+              rel = "me fediverse",
+              href = "https://plush.city/@robin",
+            }),
+
+            -- styles ==========================================================
+
+            h.style(
+              [[ @layer reset, theme, base, layout, components, partials, page, media; ]]
+            ),
+            -- reset
+            h.stylesheet({ href = "/styles/reset.css" }),
+            h.stylesheet({ href = "/styles/media.css" }),
+            -- preload
+            h.stylesheet({ href = "/styles/fonts.css" }),
+            h.stylesheet({ href = "/styles/colors.css" }),
+            -- base
+            h.stylesheet({ href = "/styles/base.css" }),
+            h.stylesheet({ href = "/styles/layout.css" }),
+            -- components
+            h.stylesheet({ href = "/styles/components/links.css" }),
+            h.stylesheet({ href = "/styles/components/text.css" }),
+            h.stylesheet({ href = "/styles/components/page.css" }),
+
+            -- partials
+            h.stylesheet({ href = "/styles/partials/section.css" }),
+            h.stylesheet({ href = "/styles/partials/sidebar.css" }),
+            h.stylesheet({ href = "/styles/partials/search.css" }),
+            h.stylesheet({ href = "/styles/partials/navbar.css" }),
+            h.stylesheet({ href = "/styles/partials/bloglist.css" }),
+            h.stylesheet({ href = "/styles/partials/footer.css" }),
+            h.stylesheet({ href = "/styles/partials/blog.css" }),
+            h.stylesheet({ href = "/styles/partials/sitename.css" }),
+            h.stylesheet({
+              href = string.format("/styles/pages/%s.css", props.url),
+            }),
+
+            slots.additionalHeader,
+          }),
         h.body({
           h.div({
             id = "root",
@@ -83,8 +139,8 @@ return h.layout(function(slots)
               class = "site-header",
               h.div({
                 class = "site-header-wrapper",
-                h.partials.sitename(),
-                h.partials.breadcrumbs(),
+                maivi.mod("partials/sitename"),
+                maivi.mod("partials/breadcrumbs"),
               }),
             }),
 
@@ -97,33 +153,35 @@ return h.layout(function(slots)
                 slots.left or h({
                   h.div({
                     class = "sidebar-search",
-                    h.partials.search(),
+                    search,
                   }),
-                  h.partials.nav(),
+                  maivi.mod("partials/nav"),
                 }),
               }),
 
-              slots.header or h.div({
-                class = "page-header",
-
-                h.partials.search(),
-
-                h.hgroup({
-                  class = "text",
-                  slots.pageheader or h({
-                    h.h1({
-                      class = "page-title",
-                      props.title,
-                    }),
-                    h.p({
-                      class = "subtitle subtle",
-                      props.desc,
-                    }),
+              slots.header
+                or h.div({
+                  class = "page-header",
+
+                  search,
+
+                  h.hgroup({
+                    class = "text",
+                    slots.pageheader
+                      or h({
+                        h.h1({
+                          class = "page-title",
+                          props.title,
+                        }),
+                        h.p({
+                          class = "subtitle subtle",
+                          props.desc,
+                        }),
+                      }),
                   }),
-                }),
 
-                slots.additionalPageheader,
-              }),
+                  slots.additionalPageheader,
+                }),
 
               slots.main or h.section({
                 id = "main",
@@ -140,7 +198,7 @@ return h.layout(function(slots)
               slots.footer or h.footer({
                 class = "page-footer",
 
-                h.partials.footer(),
+                maivi.mod("partials/footer"),
 
                 slots.additionalFooter,
               }),
@@ -151,5 +209,5 @@ return h.layout(function(slots)
         h.script({ type = "text/javascript", src = "/search.js" }),
       }),
     })
-  end
+  end)
 end)
diff --git a/lua/pages/404.luau b/lua/pages/404.luau
index ac3bc50..491dd69 100644
--- a/lua/pages/404.luau
+++ b/lua/pages/404.luau
@@ -1,4 +1,6 @@
-return h.layouts.base(function(props, _)
+local base = maivi.mod("layouts/base")
+
+return base(function(props, _)
   return {
     pageheader = h({
       h.h1({ class = "page-title", props.title }),
@@ -9,9 +11,9 @@ return h.layouts.base(function(props, _)
       h.a({ href = "/", [[home]] }),
     }),
     left = h({
-      h.div({ class = "sidebar-search", h.partials.search() }),
-      h.partials.nav(),
-      h.partials.bloglist(),
+      h.div({ class = "sidebar-search", maivi.mod("partials/search") }),
+      maivi.mod("partials/nav"),
+      maivi.mod("partials/bloglist"),
     }),
   }
 end)
diff --git a/lua/pages/_empty.luau b/lua/pages/_empty.luau
index ac667eb..69b6152 100644
--- a/lua/pages/_empty.luau
+++ b/lua/pages/_empty.luau
@@ -1,3 +1,5 @@
-return h.layouts.base(function(props, _)
+local base = maivi.mod("layouts/base")
+
+return base(function(props, _)
   return {}
 end)
diff --git a/lua/pages/badges.luau b/lua/pages/badges.luau
index f74bee3..e31e1b3 100644
--- a/lua/pages/badges.luau
+++ b/lua/pages/badges.luau
@@ -1,3 +1,5 @@
+local base = maivi.mod("layouts/base")
+
 local function badge(name, url, src, alt)
   return h.a({
     target = "_blank",
@@ -11,7 +13,7 @@ local function badge(name, url, src, alt)
   })
 end
 
-return h.layouts.base(function(_, _)
+return base(function(_, _)
   return {
     content = h({
       badge("robin", "https://robinwobin.dev", "/badges/me.gif"),
@@ -45,9 +47,21 @@ return h.layouts.base(function(_, _)
         "https://dinpixels.neocities.org",
         "https://dinpixels.neocities.org/src/img/buttons/dinbtn0.gif"
       ),
-      badge("oyaswmi", "https://oyaswmi.net", "https://oyaswmi.net/legacy/stamps/OyaButton.gif"),
-      badge("appledust", "https://www.lejlart.com", "https://www.lejlart.com/flist/ad_skullsprinkles.gif"),
-      badge("lilithdev", "https://lilithdev.neocities.org", "https://lilithdev.neocities.org/buttons/lilithdevbtn.gif"),
+      badge(
+        "oyaswmi",
+        "https://oyaswmi.net",
+        "https://oyaswmi.net/legacy/stamps/OyaButton.gif"
+      ),
+      badge(
+        "appledust",
+        "https://www.lejlart.com",
+        "https://www.lejlart.com/flist/ad_skullsprinkles.gif"
+      ),
+      badge(
+        "lilithdev",
+        "https://lilithdev.neocities.org",
+        "https://lilithdev.neocities.org/buttons/lilithdevbtn.gif"
+      ),
       badge("espy", "https://espy.world", "https://espy.world/img/button.gif"),
     }),
   }
diff --git a/lua/pages/blog.luau b/lua/pages/blog.luau
index b12a1d4..b766db1 100644
--- a/lua/pages/blog.luau
+++ b/lua/pages/blog.luau
@@ -1,7 +1,11 @@
-return h.layouts.base(function(props, _)
+local base = maivi.mod("layouts/base")
+
+local postpageitem = maivi.mod("components/postpageitem")
+
+return base(function(props, _)
   local posts = Iter.tbl(maivi.data.posts)
     :map(function(_, page)
-      return h.components.postpageitem(page)
+      return postpageitem(page)
     end)
     :to()
 
diff --git a/lua/pages/index.luau b/lua/pages/index.luau
index d064a32..4da9f50 100644
--- a/lua/pages/index.luau
+++ b/lua/pages/index.luau
@@ -1,25 +1,29 @@
-return h.layouts.base(function(props, _)
+local base = maivi.mod("layouts/base")
+
+return base(function(props, _)
   return {
     content = h({
       props.content,
-      this.rev ~= "dev" and h.iframe({
-        src = "https://ad.ari.lt/ads/embed?from=robinwobin.dev",
-        sandbox = "allow-popups allow-popups-to-escape-sandbox",
-        referrerpolicy = "no-referrer",
-        title = "An advertisement showing a silly image and author information.",
-        style = "border:none;max-width:100%",
-        width = "722",
-        height = "98",
-        loading = "lazy",
-      }) or nil,
+      this.rev ~= "dev"
+          and h.iframe({
+            src = "https://ad.ari.lt/ads/embed?from=robinwobin.dev",
+            sandbox = "allow-popups allow-popups-to-escape-sandbox",
+            referrerpolicy = "no-referrer",
+            title = "An advertisement showing a silly image and author information.",
+            style = "border:none;max-width:100%",
+            width = "722",
+            height = "98",
+            loading = "lazy",
+          })
+        or nil,
     }),
     left = h({
       h.div({
         class = "sidebar-search",
-        h.partials.search(),
+        maivi.mod("partials/search"),
       }),
-      h.partials.nav(),
-      h.partials.bloglist(),
+      maivi.mod("partials/nav"),
+      maivi.mod("partials/bloglist"),
     }),
     right = h({
       h.div({
@@ -34,10 +38,26 @@ return h.layouts.base(function(props, _)
               category = "links",
             },
 
-            h.li({ h.a({ class = "datalink", href = "https://github.com/comfysage", "github" }) }),
-            h.li({ h.a({ class = "datalink", href = "https://codeberg.org/comfysage", "codeberg" }) }),
             h.li({
-              h.a({ class = "datalink", href = "https://bsky.app/profile/did:plc:khzb5upklnupwpxllpbmrv5a", "bluesky" }),
+              h.a({
+                class = "datalink",
+                href = "https://github.com/comfysage",
+                "github",
+              }),
+            }),
+            h.li({
+              h.a({
+                class = "datalink",
+                href = "https://codeberg.org/comfysage",
+                "codeberg",
+              }),
+            }),
+            h.li({
+              h.a({
+                class = "datalink",
+                href = "https://bsky.app/profile/did:plc:khzb5upklnupwpxllpbmrv5a",
+                "bluesky",
+              }),
             }),
           }),
         }),
diff --git a/lua/pages/notes.luau b/lua/pages/notes.luau
index 2385a16..e235399 100644
--- a/lua/pages/notes.luau
+++ b/lua/pages/notes.luau
@@ -1,7 +1,11 @@
-return h.layouts.base(function(props, _)
+local base = maivi.mod("layouts/base")
+
+local note = maivi.mod("partials/note")
+
+return base(function(props, _)
   local notes = Iter.tbl(maivi.data.notes)
-    :map(function(_, note)
-      return h.partials.note(note)
+    :map(function(_, item)
+      return note(item)
     end)
     :to()
 
diff --git a/lua/pages/post.luau b/lua/pages/post.luau
index 1f07857..1bf0041 100644
--- a/lua/pages/post.luau
+++ b/lua/pages/post.luau
@@ -1,3 +1,5 @@
+local taglist = maivi.mod("components/taglist")
+
 return h.layouts.base(function(props, _)
   return {
     pageheader = h({
@@ -11,17 +13,25 @@ return h.layouts.base(function(props, _)
       }),
       h.div({
         class = "metadata",
-        props.date and h({
-          h.p({ class = "subtitle", os.date("%B %d, %Y", props.date) }),
-          props.modified and h.p({
-            class = "subtitle updated",
-            string.format("updated: %s", os.date("%B %d, %Y", props.modified)),
-          }) or nil,
-        }) or nil,
+        props.date
+            and h({
+              h.p({ class = "subtitle", os.date("%B %d, %Y", props.date) }),
+              props.modified and h.p({
+                class = "subtitle updated",
+                string.format(
+                  "updated: %s",
+                  os.date("%B %d, %Y", props.modified)
+                ),
+              }) or nil,
+            })
+          or nil,
       }),
-      props.reading_time and h.p({ class = "subtitle", string.format("%d min", props.reading_time) }) or nil,
+      props.reading_time and h.p({
+        class = "subtitle",
+        string.format("%d min", props.reading_time),
+      }) or nil,
     }),
-    additionalHeader = h.components.taglist(props),
+    additionalHeader = taglist(props.tags),
     content = h.pre({ props.content }),
   }
 end)
diff --git a/lua/pages/rss.luau b/lua/pages/rss.luau
index 1ab33d4..d4b9ec7 100644
--- a/lua/pages/rss.luau
+++ b/lua/pages/rss.luau
@@ -25,12 +25,16 @@ return function(_)
         h.description([[my little garden of stupid stuff]]),
         h("link", [[https://robinwobin.dev]]), -- do not use <link />
         h.generator([[maivi]]),
-        this.rev ~= "dev" and h({
-          h.websiteHash({
-            this.rev,
-          }),
-          h.websiteHashUrl("https://codeberg.org/comfysage/site/commit/" .. this.rev),
-        }) or nil,
+        this.rev ~= "dev"
+            and h({
+              h.websiteHash({
+                this.rev,
+              }),
+              h.websiteHashUrl(
+                "https://codeberg.org/comfysage/site/commit/" .. this.rev
+              ),
+            })
+          or nil,
         maivi.elem("atom:link", { empty = true })({
           href = string.format("%s/rss.xml", this.base_url),
           rel = "self",
diff --git a/lua/pages/start.luau b/lua/pages/start.luau
index ddc2bf2..9c8d667 100644
--- a/lua/pages/start.luau
+++ b/lua/pages/start.luau
@@ -71,13 +71,19 @@ return h.layouts.base(function(_, _)
             class = "links dev",
             h.h6([[tools]]),
             h.ul({
-              item("https://www.bairesdev.com/tools/color-palette-app/editor/", [[palettte.app]]),
+              item(
+                "https://www.bairesdev.com/tools/color-palette-app/editor/",
+                [[palettte.app]]
+              ),
               item("https://cobalt.tools", [[cobalt.tools]]),
               item("https://litterbox.catbox.moe", [[litterbox]]),
             }),
             h.h6([[nix]]),
             h.ul({
-              item("https://searchix.ovh/packages/nixpkgs/search", [[searchix]]),
+              item(
+                "https://searchix.ovh/packages/nixpkgs/search",
+                [[searchix]]
+              ),
               item("https://noogle.dev", [[nooogle]]),
             }),
           }),
diff --git a/lua/partials/bloglist.luau b/lua/partials/bloglist.luau
index 7d170c1..962de97 100644
--- a/lua/partials/bloglist.luau
+++ b/lua/partials/bloglist.luau
@@ -1,4 +1,6 @@
-return function()
+local metadate = require("components/meta/date")
+
+return maivi.component(function()
   local posts = Iter.tbl(maivi.data.posts)
     :take(3)
     :map(function(url, page)
@@ -7,7 +9,7 @@ return function()
         h.a({ href = url, h.span({ class = "title", page.title }) }),
         h.div({
           class = "subtitle",
-          page.date and h.div({ class = "date", h.strong(os.date("%d %b %Y", page.date)) }),
+          metadate(page.date),
         }),
       })
     end)
@@ -36,4 +38,4 @@ return function()
       }),
     }),
   })
-end
+end)
diff --git a/lua/partials/footer.luau b/lua/partials/footer.luau
index 0f957c9..930bf24 100644
--- a/lua/partials/footer.luau
+++ b/lua/partials/footer.luau
@@ -47,13 +47,16 @@ return function()
           href = "https://codeberg.org/comfysage/site",
           [[source]],
         }),
-        this.rev ~= "dev" and h({
-          [[ ]],
-          h.a({
-            href = "https://codeberg.org/comfysage/site/commit/" .. this.rev,
-            string.format("(%s)", this.rev:sub(0, 7)),
-          }),
-        }) or nil,
+        this.rev ~= "dev"
+            and h({
+              [[ ]],
+              h.a({
+                href = "https://codeberg.org/comfysage/site/commit/"
+                  .. this.rev,
+                string.format("(%s)", this.rev:sub(0, 7)),
+              }),
+            })
+          or nil,
         [[ - EUPL-1.2]],
       }),
     }),
diff --git a/lua/partials/note.luau b/lua/partials/note.luau
index 2ee9ea9..afee6e8 100644
--- a/lua/partials/note.luau
+++ b/lua/partials/note.luau
@@ -1,5 +1,5 @@
 return function(props)
-  local content = type(props.content) == "table" and props.content.path and read(props.content.path) or props.content
+  local content = props.md and read(props.md) or props.content
 
   local id = string.format("note-%s", maivi.escape(props.title))
 
diff --git a/lua/partials/search.luau b/lua/partials/search.luau
index 8bfa9c7..73a281e 100644
--- a/lua/partials/search.luau
+++ b/lua/partials/search.luau
@@ -1,10 +1,16 @@
+local svg = maivi.mod("components/svg")
+
 return function()
   return h.div({
     class = "search",
     h.button({
       class = "search-button",
       h.p([[search]]),
-      h.components.svg({ src = "/img/icons/search.svg", size = 18, style = "margin:0 .5rem;" }),
+      svg({
+        src = "/img/icons/search.svg",
+        size = 18,
+        style = "margin:0 .5rem;",
+      }),
     }),
     h.dialog({
       class = "search-dialog",
diff --git a/lua/partials/sitename.luau b/lua/partials/sitename.luau
index 1b16d64..78d5e18 100644
--- a/lua/partials/sitename.luau
+++ b/lua/partials/sitename.luau
@@ -1,4 +1,4 @@
-return function()
+return maivi.component(function()
   return h.div({
     class = "sitename",
     h.a({
@@ -6,6 +6,6 @@ return function()
       href = "/",
       [[robin]],
     }),
-    h.partials.nav(),
+    maivi.mod("partials/nav"),
   })
-end
+end)
diff --git a/src/data.zig b/src/data.zig
index 534a460..82e2988 100644
--- a/src/data.zig
+++ b/src/data.zig
@@ -27,20 +27,12 @@ pub const Date = packed struct {
     day: c_int = 0,
 };
 
-pub const Data = struct {
-    title: ?[]const u8 = null,
-    desc: ?[]const u8 = null,
-    date: ?Date = null,
-    modified: ?Date = null,
-    props: DataL,
-};
-
-const DataT = union(enum) { str: []const u8, date: Date, list: std.ArrayList([]const u8) };
+const DataT = union(enum) { str: []const u8, date: Date, list: [][]const u8 };
 const DataKV = struct { k: []const u8, v: DataT };
 const DataL = std.ArrayList(DataKV);
 /// parse if the first line == '+++' until first next line that == '+++'
-fn parse_data(buf: *[16]DataKV, reader: *Io.Reader) !Data {
-    var props: DataL = .initBuffer(buf);
+fn parse_data(data_allocator: Allocator, reader: *Io.Reader) !DataL {
+    var props: DataL = try .initCapacity(data_allocator, 16);
 
     const first = try reader.take(3);
     if (!std.mem.eql(u8, first, "+++")) return error.NoFrontMatter;
@@ -65,17 +57,16 @@ fn parse_data(buf: *[16]DataKV, reader: *Io.Reader) !Data {
         if (value[0] == '"') {
             if (value[value.len - 1] != '"') continue :w;
             const str = value[1 .. value.len - 1];
-            try props.appendBounded(.{ .k = key, .v = .{ .str = str } });
+            try props.append(data_allocator, .{ .k = key, .v = .{ .str = str } });
             continue :w;
         }
         if (std.mem.findScalar(u8, value, ',')) |_| {
-            var lbuf: [16][]const u8 = undefined;
-            var list: std.ArrayList([]const u8) = .initBuffer(&lbuf);
+            var list: std.ArrayList([]const u8) = try .initCapacity(data_allocator, 16);
 
             var l_it = std.mem.splitScalar(u8, value, ',');
-            while (l_it.next()) |item| if (item.len > 0) try list.appendBounded(item);
+            while (l_it.next()) |item| if (item.len > 0) try list.append(data_allocator, item);
 
-            try props.appendBounded(.{ .k = key, .v = .{ .list = list } });
+            try props.append(data_allocator, .{ .k = key, .v = .{ .list = try list.toOwnedSlice(data_allocator) } });
             continue :w;
         }
 
@@ -86,22 +77,10 @@ fn parse_data(buf: *[16]DataKV, reader: *Io.Reader) !Data {
                 .err(err).log();
             continue :w;
         };
-        try props.appendBounded(.{ .k = key, .v = .{ .date = date } });
+        try props.append(data_allocator, .{ .k = key, .v = .{ .date = date } });
     }
 
-    var data: Data = .{ .props = props };
-    for (data.props.items) |kv| {
-        if (std.mem.eql(u8, kv.k, "title") and kv.v == .str)
-            data.title = kv.v.str
-        else if (std.mem.eql(u8, kv.k, "desc") and kv.v == .str)
-            data.desc = kv.v.str
-        else if (std.mem.eql(u8, kv.k, "date") and kv.v == .date)
-            data.date = kv.v.date
-        else if (std.mem.eql(u8, kv.k, "modified") and kv.v == .date)
-            data.modified = kv.v.date;
-    }
-
-    return data;
+    return props;
 }
 
 fn parse_file(file: Io.File) !void {
@@ -113,11 +92,14 @@ fn parse_file(file: Io.File) !void {
     var file_reader = file.reader(maivi.io, &buf);
     const reader = &file_reader.interface;
 
-    var databuf: [16]DataKV = undefined;
-    const data = parse_data(&databuf, reader) catch |err| switch (err) {
+    var a: std.heap.ArenaAllocator = .init(maivi.allocator);
+    defer a.deinit();
+    const data_allocator = a.allocator();
+    var data = parse_data(data_allocator, reader) catch |err| switch (err) {
         error.NoFrontMatter => return,
         else => return err,
     };
+    defer data.deinit(data_allocator);
 
     fern.debug().ctx("data.parse_file")
         .msg("adding data")
@@ -145,41 +127,56 @@ pub fn load_data() !void {
     try parse_dir(data_dir);
 }
 
-pub fn add_data(l: *zlua.Lua, path: []const u8, d: Data) !void {
+pub fn add_data(l: *zlua.Lua, path: []const u8, d: DataL) !void {
+    const stack_size_on_entry = l.getTop();
+
     _ = l.getGlobal("this");
     _ = l.getField(-1, "data");
 
-    l.createTable(0, 4);
+    l.createTable(0, @as(i32, @intCast(d.items.len)));
 
-    if (d.title) |title| {
-        _ = l.pushString(title);
-        l.setField(-2, "title");
-    }
-    if (d.desc) |desc| {
-        _ = l.pushString(desc);
-        l.setField(-2, "desc");
-    }
-    if (d.date) |date| {
-        try pushdate(l, date);
-        l.setField(-2, "date");
-    }
-    if (d.modified) |modified| {
-        try pushdate(l, modified);
-        l.setField(-2, "modified");
+    _for: for (d.items) |kv| {
+        if (kv.v == .str)
+            _ = l.pushString(kv.v.str)
+        else if (kv.v == .list)
+            try pushlist(l, kv.v.list)
+        else if (kv.v == .date)
+            try pushdate(l, kv.v.date)
+        else
+            continue :_for;
+
+        const str = try maivi.allocator.dupeZ(u8, kv.k);
+        defer maivi.allocator.free(str);
+        l.setField(-2, str);
     }
 
     const str = try maivi.allocator.dupeZ(u8, path);
     defer maivi.allocator.free(str);
-    l.setField(-2, str); // pops newTable
+    l.setField(-2, str); // pops data field table
 
     l.pop(2); // pops "data" and "this"
+
+    if (stack_size_on_entry != l.getTop()) return error.Unexpected;
+}
+
+fn pushlist(l: *zlua.Lua, lst: [][]const u8) !void {
+    const stack_size_on_entry = l.getTop();
+
+    l.createTable(@as(i32, @intCast(lst.len)), 0);
+
+    for (lst, 1..lst.len + 1) |item, n| {
+        _ = l.pushString(item);
+        l.setIndexRaw(-2, @as(c_int, @intCast(n)));
+    }
+
+    if (stack_size_on_entry + 1 != l.getTop()) return error.Unexpected;
 }
 
 fn pushdate(l: *zlua.Lua, date: Date) !void {
-    const n = l.getTop();
+    const stack_size_on_entry = l.getTop();
     _ = l.getGlobal("os");
     _ = l.getField(-1, "time");
-    l.remove(n + 1);
+    l.remove(stack_size_on_entry + 1);
     if (!l.isFunction(-1)) return error.Unexpected;
 
     l.createTable(0, 3);
@@ -192,7 +189,7 @@ fn pushdate(l: *zlua.Lua, date: Date) !void {
 
     try lua.pcall(l, .{ .args = 1, .results = 1 });
 
-    if (n + 1 != l.getTop()) return error.Unexpected;
+    if (stack_size_on_entry + 1 != l.getTop()) return error.Unexpected;
 }
 
 // needs format YYYY-MM-DD
diff --git a/src/lua_display.zig b/src/lua_display.zig
index cf98218..5ab3954 100644
--- a/src/lua_display.zig
+++ b/src/lua_display.zig
@@ -20,9 +20,21 @@ pub fn lua_opendisplay(l: *Lua) !i32 {
 }
 
 fn elem(l: *Lua) !i32 {
+    if (l.isFunction(-1)) {
+        try maivi.lua.pcall(l, .{ .results = 1 });
+        return try elem(l);
+    }
     if (l.isTable(-1)) {
         return try recursive_concat(l, null);
     }
+    if (l.isBoolean(-1)) {
+        const str = switch (l.toBoolean(-1)) {
+            true => "true",
+            false => "false",
+        };
+        _ = l.pushString(str);
+        return 1;
+    }
     l.pushValue(-1);
     _ = try l.toString(-1);
     return 1;
@@ -32,12 +44,20 @@ fn attr(l: *Lua) !i32 {
     if (l.isTable(-1)) {
         return try recursive_concat(l, " ");
     }
+    if (l.isBoolean(-1)) {
+        const str = switch (l.toBoolean(-1)) {
+            true => "true",
+            false => "false",
+        };
+        _ = l.pushString(str);
+        return 1;
+    }
     l.pushValue(-1);
     _ = try l.toString(-1);
     return 1;
 }
 
-const Error = error{ ExpectedString, ExpectedTable } || std.mem.Allocator.Error;
+const Error = error{ ExpectedString, ExpectedTable } || error{ LuaRuntime, LuaMsgHandler } || std.mem.Allocator.Error;
 fn recursive_concat(l: *Lua, sep: ?[]const u8) Error!i32 {
     var arena: std.heap.ArenaAllocator = .init(maivi.allocator);
     defer arena.deinit();
diff --git a/src/root.zig b/src/root.zig
index 3c5063a..9cf047f 100644
--- a/src/root.zig
+++ b/src/root.zig
@@ -146,26 +146,7 @@ pub fn handle(h: *Handler, req: *helpers.Request, res: *helpers.Response) !void
 
     const user_agent = req.request.header("user-agent");
     if (user_agent) |ua| if (std.mem.startsWith(u8, ua, "curl")) {
-        if (req.path.len == 1) {
-            fern.debug().ctx("maivi.handle")
-                .msg("using index.txt")
-                .int("id", req.id)
-                .log();
-            return res.redirect(MESSAGE_PATH, null);
-        }
-
-        const mdpath = try std.mem.concat(allocator, u8, &.{ "data", req.path, ".md" });
-        defer allocator.free(mdpath);
-        const dir = try std.Io.Dir.openDirAbsolute(io, config.root, .{});
-        return res.set_file(dir, mdpath) catch |err| switch (err) {
-            error.FileNotFound => {
-                return h.notFound(req.request, res.response);
-            },
-            else => {
-                const status = helpers.statusFromErr(err) orelse return err;
-                res.status(status);
-            },
-        };
+        return try handlemd(h, req, res);
     };
 
     var it = std.mem.splitBackwardsScalar(u8, req.path, '/');
@@ -214,6 +195,29 @@ fn handlebuild(_: *Handler, req: *helpers.Request, res: *helpers.Response, trans
     return try res.set_file(dir, new_path);
 }
 
+pub fn handlemd(h: *Handler, req: *helpers.Request, res: *helpers.Response) !void {
+    if (req.path.len == 1) {
+        fern.debug().ctx("maivi.handle")
+            .msg("using index.txt")
+            .int("id", req.id)
+            .log();
+        return res.redirect(MESSAGE_PATH, null);
+    }
+
+    const mdpath = try std.mem.concat(allocator, u8, &.{ "data", req.path, ".md" });
+    defer allocator.free(mdpath);
+    const dir = try std.Io.Dir.openDirAbsolute(io, config.root, .{});
+    return res.set_file(dir, mdpath) catch |err| switch (err) {
+        error.FileNotFound => {
+            return h.notFound(req.request, res.response);
+        },
+        else => {
+            const status = helpers.statusFromErr(err) orelse return err;
+            res.status(status);
+        },
+    };
+}
+
 // helpers ====================================================================
 
 fn transform_dir_path(req: *helpers.Request) ![]const u8 {
diff --git a/src/router.zig b/src/router.zig
index a74d0c4..37d0a10 100644
--- a/src/router.zig
+++ b/src/router.zig
@@ -56,9 +56,9 @@ pub fn lua_add(l: *Lua) !i32 {
         l.pushValue(-1);
         defer l.pop(1);
 
-        // set props.path
+        // set props.url
         _ = l.pushString(path);
-        l.setField(-2, "path");
+        l.setField(-2, "url");
 
         break :blk l.ref(-1);
     };
@@ -78,6 +78,16 @@ pub fn lua_add(l: *Lua) !i32 {
 // - set content
 // - caching?
 pub fn action(h: *maivi.Handler, req: *maivi.helpers.Request, res: *maivi.helpers.Response) !void {
+    if (req.request.method != .GET) {
+        res.status(.MethodNotAllowed);
+        return;
+    }
+
+    const user_agent = req.request.header("user-agent");
+    if (user_agent) |ua| if (std.mem.startsWith(u8, ua, "curl")) {
+        return try maivi.handlemd(h, req, res);
+    };
+
     handle(h, req, res) catch |err| {
         fern.err().err(err).log();
         res.response.status = 500;
@@ -97,11 +107,32 @@ fn lhandle(l: *Lua, req: *maivi.helpers.Request, res: *maivi.helpers.Response, f
     _ = l.getIndexRaw(zlua.registry_index, props);
     if (!l.isTable(-1)) return error.LuaValueNotATable;
 
+    // read content
+    try blk: {
+        // stack: -1 => getIndexRaw(props)
+        const stack_size_on_entry = l.getTop();
+        _ = l.getField(-1, "path");
+        if (l.isNil(-1) or !l.isString(-1)) break :blk l.pop(1);
+
+        const mdpath = try l.toString(-1);
+        const dir = try std.Io.Dir.openDirAbsolute(maivi.io, maivi.config.root, .{});
+        const contents = try maivi.helpers.read_file(maivi.allocator, dir, mdpath);
+        defer maivi.allocator.free(contents);
+
+        _ = l.pushString(contents);
+        l.setField(-3, "content");
+
+        l.pop(1); // pops "path"
+
+        if (l.getTop() != stack_size_on_entry) break :blk error.UnexpectedStackSize;
+    };
+
     // prepare ctx
     try blk: {
+        // stack: -1 => getIndexRaw(props)
         const stack_size_on_entry = l.getTop();
         _ = l.getGlobal("this");
-        l.pushValue(-2); // getIndexRaw(props)
+        l.pushValue(-2); // props
         l.setField(-2, "_ctx");
         l.pop(1);
 
diff --git a/src/runtime/h.luau b/src/runtime/h.luau
index 8081bb9..6cc0631 100644
--- a/src/runtime/h.luau
+++ b/src/runtime/h.luau
@@ -1,19 +1,3 @@
-local function defaulttable(t: { [any]: any }, f: (string) -> any, mt: { [any]: any }?)
-  local mt_ = {
-    __index = function(self, k)
-      local v = f(k)
-      rawset(self, k, v)
-      return rawget(self, k)
-    end,
-  }
-  if mt then
-    for k, v in pairs(mt) do
-      mt_[k] = v
-    end
-  end
-  return setmetatable(t, mt_)
-end
-
 local h = {}
 
 h.document = maivi.elem("!DOCTYPE html", { close = false })
@@ -29,30 +13,7 @@ h.stylesheet = function(args)
   return h.link(args)
 end
 
-local function pathtable(root)
-  return function(k)
-    local modname = string.format("%s/%s", root, k)
-    return function(...)
-      return require(modname)(...)
-    end
-  end
-end
-
-h.layouts = defaulttable({}, pathtable("layouts"))
-h.pages = defaulttable({}, pathtable("pages"))
-h.partials = defaulttable({}, pathtable("partials"))
-h.components = defaulttable({}, pathtable("components"))
-
-h.layout = function(f: (slots: PropsOrChildren) -> Component)
-  return function(page: Component): Component
-    return function(props)
-      local slots = page(props)
-      return f(slots)(props)
-    end
-  end
-end
-
-return defaulttable(h, maivi.elem, {
+return maivi.defaulttable(h, maivi.elem, {
   __call = function(_, tagorelem, elem)
     local tag
     if not elem then
diff --git a/src/runtime/maivi.luau b/src/runtime/maivi.luau
index e7e4da3..85db1a8 100644
--- a/src/runtime/maivi.luau
+++ b/src/runtime/maivi.luau
@@ -3,6 +3,30 @@ maivi = _G.maivi or {}
 
 maivi.data = {}
 
+-- util =======================================================================
+
+type table<K, V> = { [K]: V }
+
+function maivi.defaulttable<T>(
+  t: table<string, T>,
+  f: (string) -> T,
+  mt: table<any, any>?
+)
+  local mt_ = {
+    __index = function(self, k)
+      local v = f(k)
+      rawset(self, k, v)
+      return rawget(self, k)
+    end,
+  }
+  if mt then
+    for k, v in pairs(mt) do
+      mt_[k] = v
+    end
+  end
+  return setmetatable(t, mt_)
+end
+
 -- display ====================================================================
 
 function maivi.escape(str: string): string
@@ -36,7 +60,11 @@ export type Component = (props: Props, children: Children) -> VNode
 
 type ElementConfig = { close: boolean?, empty: boolean? }
 
-function maivi.parse(args: PropsOrChildren): { props: Props, children: Children, boolean_props: { string } }
+function maivi.parse(args: PropsOrChildren): {
+  props: Props,
+  children: Children,
+  boolean_props: { string },
+}
   local props: Props = {}
   local children: Children = {}
   local boolean_props: { string } = {}
@@ -124,6 +152,8 @@ function maivi.elem(name: string, config: ElementConfig?): Element
   end
 end
 
+-- components =================================================================
+
 function maivi.component(f: Component): Element
   return function(args: PropsOrChildren?)
     local parsed = maivi.parse(args)
@@ -131,4 +161,51 @@ function maivi.component(f: Component): Element
   end
 end
 
+function maivi.layout(f: (slots: table<string, VNode>) -> Component)
+  return function(page: Component): Component
+    return function(args)
+      local parsed = maivi.parse(args)
+      local slots = page(parsed.props, parsed.children)
+      return f(slots)(parsed.props, parsed.children)
+    end
+  end
+end
+
+-- modules ====================================================================
+
+maivi.mod = setmetatable({
+  graph = {},
+}, {
+  __call = function(t, modname: string)
+    local source = debug.info(2, "s")
+    t.graph[source] = t.graph[source] or {}
+    table.insert(t.graph[source], modname)
+
+    local info = debug.info(2, "ln")
+    return function(...)
+      local ok, result = pcall(require, modname)
+      if not ok then
+        error(
+          ([[%s:%s error while loading module '%s':\t\n%s]]):format(
+            source,
+            info,
+            modname,
+            result
+          )
+        )
+      end
+      if type(result) ~= "function" then
+        error(
+          ([[%s:%s return value from module '%s' is not a function]]):format(
+            source,
+            info,
+            modname
+          )
+        )
+      end
+      return result(...)
+    end
+  end,
+})
+
 return maivi
diff --git a/stylua.toml b/stylua.toml
index 5957975..32d4fb8 100644
--- a/stylua.toml
+++ b/stylua.toml
@@ -1,6 +1,6 @@
 indent_type = "Spaces"
 indent_width = 2
-column_width = 120
+column_width = 80
 quote_style = "AutoPreferDouble"
 call_parentheses = "Always"
 line_endings = "Unix"
diff --git a/test.luau b/test.luau
index 4afed2d..eb9100b 100644
--- a/test.luau
+++ b/test.luau
@@ -1 +1 @@
-print(maivi.router)
+maivi.mod('init')