From 782758f7e74329ff2a0fb228baf56556bf1fed08 Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Sun, 20 Aug 2023 18:37:00 +0200
Subject: [PATCH] a story

---
 content/2023-08-20-under-construction.tree |   1 +
 content/about-treehouse.tree               | 292 +++++++++++++++++++++
 content/about.tree                         | 185 +++++++++++++
 content/index.tree                         | 182 ++-----------
 content/secret.tree                        |   2 -
 content/ulid-test.tree                     |  35 ---
 static/js/tree.js                          |  10 +-
 7 files changed, 509 insertions(+), 198 deletions(-)
 create mode 100644 content/2023-08-20-under-construction.tree
 create mode 100644 content/about-treehouse.tree
 create mode 100644 content/about.tree
 delete mode 100644 content/secret.tree
 delete mode 100644 content/ulid-test.tree

diff --git a/content/2023-08-20-under-construction.tree b/content/2023-08-20-under-construction.tree
new file mode 100644
index 0000000..5fcaf6c
--- /dev/null
+++ b/content/2023-08-20-under-construction.tree
@@ -0,0 +1 @@
+- section under construction. sorry! in the meantime, maybe you wanna read [my ramblings about the treehouse](#01H89RFHCQCD3E1XS5XAPW86J5)?
diff --git a/content/about-treehouse.tree b/content/about-treehouse.tree
new file mode 100644
index 0000000..b0ce9b5
--- /dev/null
+++ b/content/about-treehouse.tree
@@ -0,0 +1,292 @@
+% id = "01H89RFHCQCD3E1XS5XAPW86J5"
+- liquidex's treehouse can be thought of as many things.
+
+% id = "01H89RFHCQQMBNFETGPY4HHDT6"
++ ### the treehouse is a reflection of my own personality
+
+    % id = "01H89RFHCQ4XHDXK0FH376SNZ8"
+    - this is a literal braindump
+
+    % id = "01H89RFHCQEQ2RAWRTRN6HZ8A3"
+    - whatever's on my mind at the time that I wanna share with the world, I write down here
+
+    % id = "01H89RFHCQY5EE9Y46PHJT9DFR"
+    - I built this treehouse because I love sharing cool stuff with people
+
+        % id = "01H89RFHCQR0H2CRNA81XAGXWJ"
+        - and also because I am obsessed with many things and I wanna share this obsession with the world
+
+    % id = "01H89RFHCQDC73N0MD2ZF629MF"
+    - wouldn't you make yourself at home?
+
+% id = "01H89RFHCQKAPHSGCDN832QRMD"
++ ### the treehouse is a statement of artistic expression
+
+    % id = "01H89RFHCQAD7WKW59CAFAX814"
+    - the treehouse is not your typical blog
+
+    % id = "01H89RFHCQKJPNXX7QKWM9X8GM"
+    - as you can tell the structure is quite different
+
+        % id = "01H89RFHCQJNJSTJCTXSDCVF6C"
+        - instead of containing finished posts, it just sort of… is
+
+        % id = "01H89RFHCQHWWE24N1NF1N2V85"
+        + nesting indefinitely
+
+            % id = "01H89RFHCQNX4PP80E49AWWQPM"
+            + like really, where does it end?
+
+                % id = "01H89RFHCQCCWWMZCXEXF704Q3"
+                + *where?*
+
+                    % id = "01H89RFHCQW4NN6PW6V6RFCVH3"
+                    + ***WHERE???***
+
+                        % id = "01H89RFHCQ83APVW034YC40K5P"
+                        + here, actually.
+
+                            % id = "01H89RFHCQ0SYWSQZDYHRXKAR0"
+                            - I lied. I didn't build this tech to support infinite nesting, as that would require infinite disk space. which I don't have.
+
+        % id = "01H89RFHCQPAMNSN81SRVH2TZ5"
+        - always evolving and shaping and shifting
+
+            % id = "01H89RFHCQEJZQFXKVVQ92816R"
+            - so that I never need to *finish* anything
+
+            % id = "01H89RFHCQ3Q6W2Q0QKRHRVFVW"
+            - I can just sit down, type something out
+
+                % id = "01H89RFHCQCTZFY3RV0J5MPMW9"
+                - then forget about it
+
+                % id = "01H89RFHCQ3J04CRY0RAVN8YG5"
+                - then come back again, type out something more
+
+                % id = "01H89RFHCQYK8R7SG5SNH5JNC8"
+                - isn't this just way more pleasant?
+
+                % id = "01H89RFHCQ4F0AWTGVWVQXFFGK"
+                - isn't that… in the spirit of [Agile](https://en.wikipedia.org/wiki/Agile_software_development)
+
+                    % id = "01H89RFHCQHS0R71CP198SRX16"
+                    - …of all things?
+
+                    % id = "01H89RFHCQYH846FGW8Z8EFX2E"
+                    - not that I designed around its ideas, but there's a semblance, isn't there?
+
+    % id = "01H89RFHCQQK8Q1WHZK4ZK1EK1"
+    + it is designed to be elegant and clutter-free
+
+        % id = "01H89RFHCQ4N6GMFF0Q2N4PCM6"
+        - the treehouse contains no ads to annoy you, no sidebars to interrupt
+
+        % id = "01H89RFHCQDMWX7WNSMBDWJC9G"
+        - it doesn't even have a navigation bar, because it doesn't need one
+
+        % id = "01H89RFHCQ9WEBCQMQH7PSQDFS"
+        - it's built to focus on the substance
+
+        % id = "01H89RFHCQ9PVANQV8YNKBY399"
+        - it's built to let your imagination go free
+
+        % id = "01H89RFHCQR2R4XX7CRX8HZRAF"
+        - it's just a cool space to let go of your worries, and breathe
+
+    % id = "01H89RFHCQ6WVDR3CWVY99F87M"
+    + it is designed to be user-friendly
+
+        % id = "01H89RFHCQBDVZX9Y7JTSGRV5G"
+        - because there is too much software nowadays that does not care about _you_
+
+        % id = "01H89RFHCQEFERYSZ77ZD2DS0M"
+        - and that frustrates me, too
+
+        % id = "01H89RFHCQ3EAP0F6PRSEK7S1T"
+        - there are bits of JavaScript that power this site, to make it just that little bit more pleasant
+
+            % id = "01H89RFHCQGF3R8FAP0QHYB6WM"
+            - but without overwhelming your computer or bandwidth
+
+            % id = "01H89RFHCQ1XA3BB3BTKXH36CX"
+            - you can disable the JavaScript, and everything will still work
+
+                % id = "01H89RFHCQS2WW7PBP1YV0BEJZ"
+                - but you may not find the experience favorable
+
+    % id = "01H89RFHCQ7HTZSP6P2RZR8JHE"
+    + but most importantly of all, it is *weird*.
+
+        % id = "01H89RFHCQTRVPZ0AJ0DGJHXKX"
+        - weird as me
+
+        % id = "01H89RFHCQ3D3Z82YGJRNV8ASR"
+        - writing this "poem"
+
+            % id = "01H89RFHCQXB6F45KN28P91YCK"
+            + can you even call it that?
+
+                % id = "01H89RFHCQ48R7BCZV8JWPVFCY"
+                - have I invented something new here?
+
+% id = "01H89RFHCQAXJ0ST31TP1A104V"
++ ### the treehouse is a mostly statically generated website
+
+    % id = "01H89RFHCQ2GWJPTAKTRGS1QAC"
+    - weird poems and philosophical talk are over, it's time to focus on the tech.
+
+    % id = "01H89RFHCQF4N9T05B9DVWX67K"
+    - treehouse is built in the programming language that gives me the most pleasure while developing.
+
+        - no need for you to know more. :shhh:
+
+        % id = "01H89RFHCQRA4BBBWDC8K68BB0"
+        - I don't currently have the software open source because I wanna figure out a strategy for
+          building *it* (the software) and *this* (the content) in parallel,
+
+        % id = "01H89RFHCQA32MCR4MDCANDNC7"
+        - but being the altruist I am - don't worry, it _will_ be open source one day.
+
+            - in case you're reading this in the far future, and this is still here…
+              you wouldn't mind [dropping me a line](#01H89P3CH8CD28KGX9GVRFK60E) would you?
+
+    % id = "01H89RFHCQAQVXP6B2H0T8NNDS"
+    - personally… the language you build a personal project in almost never matters. it's rather how you execute your ideas.
+
+        + therefore I find boasting that my project is powered by a `$LANGUAGE` or a `$FRAMEWORK` unnecessary.
+
+            + but if you really care that much, it's built with Rust, plain HTML5, plain CSS, and
+              [Vanilla JS](http://vanilla-js.com/).
+
+                - (yes, I know that website is super old, but I still find it incredibly funny :hueh:)
+
+    % id = "01H89RFHCQFWC2FWBAE9PVNC08"
+    - as I alluded to [here](#01H89RFHCQ3EAP0F6PRSEK7S1T), treehouse is built to decay gracefully
+      as you take away the fancy parts.
+
+        - you will be able to read it just fine without JavaScript, just that it'll be a little
+          less pleasant.
+
+            - that's because the JS handles stuff like lazy loading of linked trees.
+
+                - you may have seen a brief _"Loading…"_ text flash before your eyes as you opened this
+                _about this_ branch - that's it downloading another tree and pasting it into this document
+
+                    - when JS is unavailable we fall back to a plain old `<a>` link through a
+                    `<noscript>` tag. if you have uBlock Origin, or any other JS blocker, you can try
+                    that out yourself!
+
+            - the JS also lets you select text in these `<details>` elements without them collapsing
+              as you release the mouse button.
+
+                - I have no clue why it is this way by default, but frankly it's like a 5 line
+                  usability fix, so why not.
+
+                    - if you have accessibility concerns about this decision, please let me know.
+
+        - treehouse will not work *as* fine without CSS though - the `<details>` will look extremely
+          janky, but the content should still be fully readable.
+
+    - myself, I'm writing this content in a bespoke format called `.tree`.
+
+        - the structure of `.tree` files is extremely minimal. there are only a few syntactic features to speak of.
+
+        - here's a taste of `.tree`:
+        ```
+        \% id = "root"
+        \- this is a branch
+
+            \% id = "child"
+            \- this is a child branch
+
+            \+ this is a branch that is collapsed
+
+                \- and this is a child of that branch
+
+            \% content.link = "some-other-tree"
+            \- and this branch links to another tree
+        ```
+
+        - the `.tree` format is line-based. that means the `%`, `-`, and `+` tokens are only
+          interpreted when at the beginning of a line.
+
+        - the basic unit of `.tree` is a branch. branches…
+
+            - …are located at a specific _indent level_
+
+            - …may or may not have _attributes_ - that's what the percentage sign `%` begins
+
+            - …may or may not be expanded by default (this is the branch's _kind_) - that's what the minus `-` and plus `+` tokens do
+
+            - …are sequenced like: optional attributes, kind, content
+
+            - …end when another line beginning with `%`, `-`, or `+` is found.
+
+        - other than that, `.tree` assumes nothing about what format the branch attributes or content are encoded in.
+
+            - I chose TOML and Markdown for their ease of use and flexibility, but the parser couldn't care less.
+
+                - …actually, that's a lie. see that code example above? Markdown code fences \`\`\` are handled specially to let you do that kind of stuff. that's all.
+
+    - you may have noticed in that code example above that almost every branch has an `id` attribute.
+
+        - this is because I want every branch to be individually linkable and quotable.
+
+            - if you ever want to link anything I said in an argument online: hover over a branch, right-click that little _permalink_ icon that's on the right side of the screen, and _Copy Link_.
+
+        - but manually coming up with ids for branches would be quite the nuisance.
+
+        - that's why with the power of Tools Programming™, I built a tool that fills out all the ids for me.
+
+            - I chose [ulids](https://github.com/ulid/spec) for generated ids, for a few reasons:
+
+                - they're guaranteed to be unique, so I can be sure no two branches end up having the same id
+
+                    - which is precisely what lets me pull the trick where I embed one tree within another, and you just dig into `index.html`.
+
+                - they embed a timestamp, which I can use to display the date/time when a branch was written, because I generally `fix` branches right after writing
+
+                    - as well as highlight branches which were added since your last visit
+
+                    - not that either of these features are implemented as of writing this (2023-08-20)
+
+                - they're much more compact than [uuids](https://en.wikipedia.org/wiki/Uuid)
+
+                    - which use 32 hexadecimal digits separated unevenly by 4 dashes, giving you 36 characters.
+
+                        - who even remembers how many digits there are between each dash? I know I don't.
+
+                    - ulids on the other hand are 26 digits encoded with [Crockford's base32](https://www.crockford.com/base32.html)
+
+                        - which is cool because it's much denser while avoiding ambiguous characters - `0`, `O`, and `o` are all interpreted as `0` (zero).
+
+    - while not strictly a technical topic, I'd like to shout out [Recursive](https://recursive.design) for being an awesome font :ralsei_love:
+
+        - (not to be confused with Font Awesome, which I do not use here. icon designs are my own.)
+
+        - being a variable font, I can tweak the text's look and feel on many different axes.
+
+        - the one that I wanted to shout out in particular is `CASL`, which lets me make it look a lot more happy and playful.
+
+            + almost like Comic Sans, but without all the stigma.
+
+                - I actually considered using [Comic Neue](https://comicneue.com/) as the font on this website, but ultimately chose Recursive.
+
+                    - Comic Neue and not the Real™ Comic Sans MS because it's licensed under the SIL Open Font License, which means I could redistribute it on my website.
+
+                        - not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn't ideal.
+
+            - in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).
+
+                + that little bit of slant makes it look just a little more like handwriting.
+
+                    - I actually thought of handwriting all the text in the treehouse, but ultimately thought it would be too much work. and a technical challenge too.
+
+                        - how to make it scalable (as in, how to keep it smooth when you zoom in?)
+
+                        - how to make it scalable (as in, my hand really fucking hurts from writing this much, and I *really* do not wanna go back to the times of writing school essays please?)
+
+                        - how to make it scalable (as in, how to distribute this many images to the user without tanking their internet connection?)
+
+                        - not to mention I'd have to handwrite a lot of text, and *then* either use OCR or type it all out again for accessibility. yeah, no thanks methinks.
diff --git a/content/about.tree b/content/about.tree
new file mode 100644
index 0000000..84fbd96
--- /dev/null
+++ b/content/about.tree
@@ -0,0 +1,185 @@
+% id = "01H89P3CH836K8WKQ9BPR6RE3C"
+- hello! I am liquidex
+
+    % id = "01H89P3CH8YZY1MTZS3DZGGFKX"
+    + also known as... (click to expand)
+
+        % id = "01H89P3CH8GAHS8DDW1HHEWA3P"
+        - liquidex (just including this here for linking sake)
+
+        % id = "01H89P3CH8ER0M5WZBXQ292A2N"
+        - liquidev on various programming-related platforms
+
+        % id = "01H89P3CH8943QGT52K7MRW12Q"
+        - lqdev, before I realized that name is taken. since then I use liquidev but you may see
+          this older name in some places
+
+        % id = "01H89P3CH81FTHTQ552N7N1S3A"
+        - daknus on SoundCloud
+
+        % id = "01H89P3CH8PB76G26M4T8P6QDZ"
+        - limiter sometimes jokingly on Discord
+
+            % id = "01H89P3CH8Z4MXQ0C9EWV01DPX"
+            + limitre, which is British for limiter
+
+                % id = "01H89P3CH8P7HAGDJVGVWD96K7"
+                - y'know. like centre is British for center, metre is British for meter? :hueh:
+
+    % id = "01H89P3CH8FA0JTX1TPRZV4BFM"
+    - before you ask, pronouns are _he/him_
+
+    % id = "01H89P3CH8A12NYRT3SC324Y2M"
+    - I'm a programmer from Poland
+
+        % id = "01H89P3CH8VN1MPKS4RQFFW778"
+        + I work in the game industry
+
+            % id = "01H89P3CH88PKW82498V91VZ4W"
+            - somehow my skills brought me to work at CD PROJEKT RED
+
+                % id = "01H89P3CH8SPX5RZDWR00CZ436"
+                - not sure how that happened still so don't ask but
+
+                % id = "01H89P3CH8P36XFC0F6KB5G477"
+                - I work there as a programmer on the new Witcher game
+
+        % id = "01H89P3CH8QSQY1M7TZVH1FYQM"
+        - but that game programming thing is just coincidence, in reality I love toying with
+          computers in general
+
+            % id = "01H89P3CH8TACWXWWZGGHQD2MK"
+            - so you may see me doing other random and weird stuff
+
+            % id = "01H89P3CH89P2Q9XGQD7BCF0R6"
+            - perhaps [compilers][stitchkit/repo] are one of those weird things
+
+            % id = "01H89P3CH8DYZHMQTGZDAEBNXN"
+            + or [audio][dawd3/repo]
+
+                % id = "01H89P3CH859AAGFEABN8EANSJ"
+                - my favorite part of that is blowing my own eardrums out with my math skill, which is rather *underdeveloped* so to speak
+
+            % id = "01H89P3CH8R9WKSMMQVY0XARSF"
+            + heck even web development out of all things. I mean you're reading _my_ website right
+              now after all
+
+                % id = "01H89P3CH88M1GZ3WN3RXCW1NN"
+                - like truly *my my* website with *my own* backend, static generator, and all that
+
+                % id = "01H89P3CH8CFBVXBF5W3GYA70X"
+                - none of that pre-built stuff, this baby is generated from the *purest* samples
+                  of Uranium-235 I could source
+
+                    % id = "01H89P3CH8HYM5XZRH56880TP5"
+                    - ... wait you're saying building your own nuclear reactor at home is illegal?
+                      UHHHHHHHHHH
+
+            % id = "01H89P3CH8EGD14MHJEET6MJ27"
+            - who knows at this point
+
+    % id = "01H89P3CH8RFRCTC500059H5G8"
+    - apart from programming I also take interest in other various things
+
+        % id = "01H89P3CH864VWM4JXQ0N5C1YV"
+        - like [video games][page:/games]
+
+            % id = "01H89P3CH8WK8F2XKBXFVE8KNX"
+            - yeah those are pretty great aren't they
+
+            % id = "01H89P3CH817HEVWCFHGJEGQHR"
+            - my faves are:
+
+                % id = "01H89P3CH8MHZMYKRFV30GSYWC"
+                - [A Hat in Time](https://hatintime.com)
+
+                % id = "01H89P3CH8G625Q1NQVT8CJ3K1"
+                - [DELTARUNE](https://deltarune.com)
+
+                % id = "01H89P3CH89TQ3SFG2Z40J29HX"
+                - they're pretty great you should check them out (also check out [my games corner][page:/games]? :pleading_face:)
+
+        % id = "01H89P3CH8AJATQ5DJBBFXJ1NH"
+        - or [music][page:/music]
+
+            % id = "01H89P3CH8XQ59YZD3RFRYQ2BM"
+            - various genres from electronic through jazz and even rock
+
+                % id = "01H89P3CH8V8H7BVWYTFHYQQTZ"
+                - in that order of priority
+
+                % id = "01H89P3CH8ZMVBKS6CXGRB8QHB"
+                - electronic definitely leaning toward the more um, _eccentric_ side
+
+                    % id = "01H89P3CH836WYRR77815D8HCH"
+                    - all you have to know is I listen to Venetian Snares pretty regularly
+
+                    % id = "01H89P3CH8C719GX9CTK36FXXN"
+                    + if you don't know what that means then good for you
+
+                        + but if you so insist… [you have been warned](https://www.youtube.com/watch?v=BB7ExLcUuH0)
+
+                            - (this is one of the more crazy ones anyways. he makes some [more normal stuff](https://www.youtube.com/watch?v=IuI6MMUtNdU) too if you care)
+
+                % id = "01H89P3CH8XP6ZA1RWYVZWRXN3"
+                - jazz and rock I don't really know as well but I've been trying to broaden my
+                  horizons a bit
+
+                    % id = "01H89P3CH8EYKDYN83VPQQ088C"
+                    + I really like artists who merge them with elements of electronic music
+
+                        % id = "01H89P3CH8G5CFPME3Z88GNDD8"
+                        - while the music corner is under construction I can recommend [Elaenia by Floating Points](https://floatingpoints.bandcamp.com/album/elaenia)
+                          as a good example of that
+
+    % id = "01H89P3CH8P5MPMRTGWG61XH4M"
+    - feel free to come up to me and say hi
+
+        % id = "01H89P3CH823H89YQJKH9DWMW9"
+        - I would love to make some new friends :ralsei_love:
+
+        % id = "01H89P3CH8ZQ11ABP0YW86APN7"
+        - in person I'm pretty much exactly as on this website lol
+
+            % id = "01H89P3CH8DHJC5BJMHVBMDAXS"
+            - like this website is literally meant to be a reflection of my personality and a literal braindump
+
+            % id = "01H89P3CH80XYPAHXH1QZJ9SMZ"
+            + so I type here like I would type on some chat platform. but it's a tree, just like Reddit!
+
+                - except on chat I don't capitalize "I" so if that pisses you off you may wanna brace yourself (or just tell me, I'll do my best to adapt)
+
+        % id = "01H89P3CH8CD28KGX9GVRFK60E"
+        - anyways you can find me on
+
+            % id = "01H89P3CH8EMM31JEMJRVRAKF4"
+            + Discord - username is [this](#01H89P3CH8GAHS8DDW1HHEWA3P)
+
+                % id = "01H89P3CH89HHDVHGB9GE287TR"
+                - I'm most active there so you'll have the best chance of getting a reply
+
+                % id = "01H89P3CH8FBBJ6FKDCYDMD3T5"
+                - you'll know it's me if you see a profile with a fluffy boy avatar
+
+            % id = "01H89P3CH8WTBKXP0GGN0HYQK2"
+            + Matrix - username is [this](#01H89P3CH8943QGT52K7MRW12Q) at gacko.pl
+
+                % id = "01H89P3CH832E4GK0NJ77KED06"
+                - I try to be as active there as on Discord but my availability may be a little more
+                  limited
+
+            % id = "01H89P3CH8A31GJE0A0JTMK00B"
+            - just don't forget to wave at me when you do! I need to tell you apart from bots somehow
+
+            % id = "01H89P3CH8R323RCDZAG6Y6C1X"
+            - my email for humans is under this domain and is `hi`
+
+                % id = "01H89P3CH8TAC5AB4QVA3E2Z0E"
+                - if you are not a human you can, I dunno. what do robots like doing?
+
+                % id = "01H89P3CH8QTANJJ5F1E4GCBNK"
+                - listen I'm trying to ward off the spam with this weird wording but I bet you can
+                  figure out my email address from this pretty easily
+
+                % id = "01H89P3CH80QR285WFDTK5X5VF"
+                - if not then look at my GitHub it also has an email address
diff --git a/content/index.tree b/content/index.tree
index 00abecb..8c3198c 100644
--- a/content/index.tree
+++ b/content/index.tree
@@ -1,170 +1,32 @@
-% always_expanded = true
-  id = "treehouse"
-- # treehouse
+% id = "treehouse"
+- # liquidex's treehouse
 
-    % id = "01H87RD70VKPZMHFFM10YHN3E8"
-      # example
-    - welcome to the treehouse!
+    - welcome! make yourself at home
 
-        % id = "01H87RD70V39Y628G58AYM2J3V"
-        - treehouse is a brand new static website generator, inspired by the likes of Jekyll and Hugo, but offering a writing experience more close to Logseq
+        - this is my treehouse, the place on the Internet I like to call home.
 
-            % id = "01H87RD70VKK2JY7ES8G19G13B"
-            - ie. a public braindump adsadasdsad
+    % id = "about"
+      content.link = "about"
+    + ## about yourself
 
-    % id = "01H87RD70VT45CC130D7DFQEAM"
-    - since you're here, you're probably just setting up
+    % id = "about-treehouse"
+      content.link = "about-treehouse"
+    + ## about this
 
-        % id = "01H87RD70VC8Z5RZX7BX7FW1H5"
-        - i'd highly recommend familiarizing yourself with the syntax by visiting `content/tree/root.tree`
+    ---
 
-            % id = "01H87RD70VZBJ3VJ0HF13MYNM7"
-            - this special file is almost like your index.html
+    - below you can find my Special Interest Corners™
 
-            % id = "01H87RD70VXPV3AW3GY91GSVED"
-            + the .tree syntax is pretty simple
+        - ie. thoughts on stuff that I wanna jot down somewhere
 
-                % id = "01H87RD70VASWHBMW8A95XJN54"
-                - separate blocks are delimited with a blank line
+    % id = "programming"
+      content.link = "2023-08-20-under-construction"
+    + ## programming
 
-                % id = "01H87RD70VGN7FR5Q7MRWZYRV8"
-                - the indentation level (number of spaces) decides how nested the block is
+    % id = "music"
+      content.link = "2023-08-20-under-construction"
+    + ## music
 
-                    % id = "01H87RD70VFZSXAT3X8X5RM1QR"
-                    - the exact amount doesn't matter, just that more nested blocks must have more spaces before them than their parents
-
-                    % id = "01H87RD70VA48JYHA7K3V5SVTE"
-                    - also blocks on the same level must be indented with the same number of spaces but that's hopefully pretty obvious
-
-                % id = "01H87RD70VFEYPTBS6PFM0HBSV"
-                + the block content begins with a dash `-` or a plus `+`
-
-                    % id = "01H87RD70VV1BF1FNQ9TAYMSMP"
-                    - a dash `-` means that the block is open by default
-
-                    % id = "01H87RD70V5Y7P06QN2BD3BN10"
-                    - a plus `+` means that the block is hidden by default
-
-                % id = "01H87RD70VG436W4BCTMHPGBR4"
-                - before the block content, there can be an arbitrary amount of TOML pecifying the block attributes
-
-                    % id = "01H87RD70V4DWDTBHRM3V7ASDZ"
-                    - many keys are available but they aren't really documented outside of code
-
-                % id = "01H87RD70VZ0G2EH387M4B933Z"
-                - blocks can span multiple lines as long as they are not broken apart with a blank line
-
-                    % id = "01H87RD70VJWX76JKSXARTTAWB"
-                    - that means each block can contain at most one paragraph, unless you use dirty HTML hacks (cheater!)
-
-            % id = "01H87RD70V10A30WK19C9T9F8M"
-            - .tree composes together with Markdown to let you format text however you want
-
-                % id = "01H87RD70V36JFQXR9ZD69CBHY"
-                - here's a bunch of stuff formatted
-
-                    % id = "01H87RD70VN395W0RE2WZRTJHX"
-                    - # heading 1
-
-                    % id = "01H87RD70V4K2PAQ4KJ3HZK15C"
-                    - ## heading 2
-
-                    % id = "01H87RD70V4MGZ6FB4BBTZG3XP"
-                    - ### heading 3
-                      headings lower than this aren't really supported because c'mon who would be this crazy
-
-                    % id = "01H87RD70VVGS5TKRPFM7877QX"
-                    - this is supposed to be **bold** and this is supposed to be _italic_
-
-                    % id = "01H87RD70VCE6DQ7NFGJVAPBT7"
-                    - there's a line break<br>
-                    here
-
-                        % id = "01H87RD70VVE57EAQQHC173CTW"
-                        - and it's supposed to render correctly
-
-                    % id = "01H87RD70V7N2VV9RN0BAV868Y"
-                    - <https://liquidev.net> also [a link that you have not visited because there is nothing there](https://liquidev.net/nothing-to-see-here-lmfao-did-you-really-expect-me-to-create-such-a-behemoth-of-a-URL)
-
-                    % id = "01H87RD70VJYPEBNB0SS8W59Y5"
-                    + here is my favorite fluffy boy
-
-                        % id = "01H87RD70VW5EY37KENKHW44MT"
-                        - ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png)
-
-                        % id = "01H87RD70VDHN74M2V40ERPXR8"
-                        - wow he very beeg
-
-                        % id = "01H87RD70V74QGFR5W1YPD7Y6R"
-                        - without a hat is also nice uwu
-
-                    % id = "01H87RD70VM0T037022X4BD9BF"
-                    - also a block quote
-
-                        % id = "01H87RD70V0N1RHRY1TRTWPPEH"
-                        - > Enough You Foolish Children
-
-                        % id = "01H87RD70V8H7SFG7KFJCN70NJ"
-                        - yes i will totally abuse you with Deltarune references and you cannot stop me
-
-                    % id = "01H87RD70VSV3XG2PPDF0VAFSA"
-                    - ```
-                    this is some block of code it looks pretty cool doesn't it
-                    ```
-
-                    % id = "01H87RD70V915BH987XG3J84TQ"
-                    - ```
-                    and here's a multiline code block which also looks cool
-                    many many many lines
-                    ```
-
-                    % id = "01H87RD70V8AF94YR6X8MNQAWZ"
-                    - and a table because benchmarks use those
-
-                        % id = "01H87RD70VJVPK637SGVQW9R0N"
-                        -
-                        | weeee | woosh | wa-ho |
-                        | --- | --- | --- |
-                        | yep | that's | a table |
-                        | looks | pretty cool | huh |
-
-                        % id = "01H87RD70VSPHHVVRMCJMFCQMW"
-                        - sorry for how ugly the table styles look i spent like literally 5 minutes on them please don't jugde them too hard
-
-    % id = "01H87RD70VVXHYTRZXRVHAGS5H"
-    - well anyways here's a braindump for SVGs
-
-        % id = "01H87RD70V8DR91Y24KY4BNR5F"
-        - leaf node
-        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="2" fill="currentColor"/></svg>
-
-        % id = "01H87RD70V7HK38BZZYT1GTSZ8"
-        - collapsed
-        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2"/><line x1="8" y1="4" x2="8" y2="12" stroke="currentColor" stroke-width="2"/></svg>
-
-        % id = "01H87RD70V6ZTQN5E9NG28JPPJ"
-        - expanded
-        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2"/></svg>
-
-    % id = "01H87RD70V2RKTDV3E2KZAYPCH"
-    + some tests for multiple ps in one block
-
-        % id = "01H87RD70VYHGWDSXE84HE0YH2"
-        - here's a test for multiple paragraphs in one block
-
-        this should be working fine
-
-        % id = "01H87RD70V6GZSE3ZASMJSP843"
-        - and this shouldn't be breaking yeah
-
-        % id = "01H87RD70VBA933H07APZZ1GDT"
-        - nor should
-
-        this be
-
-            % id = "01H87RD70VNVQ75DCWW5FQG9AR"
-            - breaking
-
-    % content.link = "secret"
-      id = "01H89KGMPBCNKH4D39ZNQJDPQ9"
-    + this block includes another block's content
+    % id = "games"
+      content.link = "2023-08-20-under-construction"
+    + ## games
diff --git a/content/secret.tree b/content/secret.tree
deleted file mode 100644
index c9caa46..0000000
--- a/content/secret.tree
+++ /dev/null
@@ -1,2 +0,0 @@
-% id = "01H87RB4MB7RM6V2K1DR8XBV8N"
-- He is behind the tree.
diff --git a/content/ulid-test.tree b/content/ulid-test.tree
deleted file mode 100644
index 687c338..0000000
--- a/content/ulid-test.tree
+++ /dev/null
@@ -1,35 +0,0 @@
-% always_expanded = true
-  id = "treehouse"  # this one has a custom id
-- root
-
-    % id = "01H87R133DNH9JRGS4ZWN586M4"
-      # this one is missing an ULID
-    - child
-
-        % id = "01H87R133D75W92HRESGAXBTC5"
-
-            # this one is formatted a bit weirdly
-        - another child
-
-            % id = "custom-id"
-            - intertwined with one that has a custom ID
-
-            % id = "01H87R133D4MXM01VGTEXHPVAR"
-
-              # this is on a separate line and lacks indentation
-            - and another child
-
-    % always_expanded = true
-      id = "01H87R133D9GDXRD7WA14ECDES"
-    - this one has a custom attribute but not an ID
-
-        % id = "01H87R7PVRJ7FTWKC1SXHGQXDC"
-        - hellow
-
-    % id = "01H87R133DHQPZWJVTMWPKVGP0"
-    - <!-- and that one is plain empty, including the content. or conten't, for that matter. -->
-
-% id = "01H87R133DRJ7VKEMBSJKHYRJN"
-
-    # comment
--
diff --git a/static/js/tree.js b/static/js/tree.js
index 56df70a..0a00e06 100644
--- a/static/js/tree.js
+++ b/static/js/tree.js
@@ -36,7 +36,12 @@ class LinkedBranch extends HTMLLIElement {
             this.state = "loading";
 
             fetch(`/${this.linkedTree}.html`)
-                .then(request => request.text())
+                .then(response => {
+                    if (response.status == 404) {
+                        throw `Hmm, seems like the tree "${this.linkedTree}" does not exist.`;
+                    }
+                    return response.text();
+                })
                 .then(text => {
                     let parser = new DOMParser();
                     let linkedDocument = parser.parseFromString(text, "text/html");
@@ -49,9 +54,12 @@ class LinkedBranch extends HTMLLIElement {
                     for (let i = 0; i < ul.childNodes.length; ++i) {
                         this.innerUL.appendChild(ul.childNodes[i]);
                     }
+
+                    this.state = "loaded";
                 })
                 .catch(error => {
                     this.loadingText.innerText = error.toString();
+                    this.state = "error";
                 });
         }
     }