From 90de54c359219cd52c049c6515e43c860401588f Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Tue, 20 Feb 2024 22:36:47 +0100
Subject: [PATCH] draft branches, some minor cleanups

---
 content/about-treehouse/emoji.tree      |  6 ++++++
 content/programming/blog/tairu.tree     |  8 ++++----
 crates/treehouse/src/html/tree.rs       | 13 ++++++++++++-
 crates/treehouse/src/tree/attributes.rs | 16 ++++++++++++++++
 static/css/{ => post}/tairu.css         |  9 ++++-----
 static/css/tree.css                     | 18 ++++++++++++++++++
 static/js/emoji.js                      |  8 ++++++--
 7 files changed, 66 insertions(+), 12 deletions(-)
 rename static/css/{ => post}/tairu.css (90%)

diff --git a/content/about-treehouse/emoji.tree b/content/about-treehouse/emoji.tree
index 096c0ff..14ad54f 100644
--- a/content/about-treehouse/emoji.tree
+++ b/content/about-treehouse/emoji.tree
@@ -72,6 +72,12 @@
     % id = "emoji/nap"
     - :nap: - <sub>z</sub>zZ
 
+        % id = "01HQ3YQCYQ995V33NY6QFW6TVJ"
+        - my little guy is asleep. please do not wake (he is actually kind of sleep deprived and needs the rest)
+
+        % id = "01HQ3YQCYQG20JTCF4T3507YVX"
+        - …stolen! from the Discord. again.
+
 % id = "01HQ162WWF60BD1F4K26E7ZZEV"
 - ### random places
 
diff --git a/content/programming/blog/tairu.tree b/content/programming/blog/tairu.tree
index ece2a4e..44102c5 100644
--- a/content/programming/blog/tairu.tree
+++ b/content/programming/blog/tairu.tree
@@ -3,7 +3,7 @@ scripts = [
     "components/literate-programming.js",
     "vendor/codejar.js",
 ]
-styles = ["tairu.css"]
+styles = ["post/tairu.css"]
 
 % id = "01HPD4XQPWM8ECT2QM6AT9YRWB"
 - I remember since my early days doing programming, I've been interested in how games like Terraria handle automatically tiling their terrain.
@@ -893,7 +893,7 @@ styles = ["tairu.css"]
         introducing variations and what not, such that the world doesn't look too bland… there has to be a better way!
 
             % id = "01HQ1M84GSE1N5WG88DGJZH0F8"
-            - and a better way… there is! but I'll get to that once my nap is over. <!--
+            - and a better way… there is! but I'll get to that once my nap is over.
 
 % id = "01HQ1M84GS0KJ9NA6GPS62RC95"
 - for now, have a big editor to play around with. it's a lot of fun arranging the tiles in various shapes!
@@ -910,9 +910,9 @@ new TilesetTileEditor({
 ```output tairu
 ```
 
-:nap:
+:nap: <!--
 
-% disabled = true
+% stage = "Draft"
   id = "01HQ1M84GS3WKE2X6QV2SNQX46"
 - TODO: next chapter! if you're reading this, you're in on it soon. that's quite sad, but YOU CAN STILL TURN BACK! I advise you to do that immediately.
 
diff --git a/crates/treehouse/src/html/tree.rs b/crates/treehouse/src/html/tree.rs
index d4ad217..0317fba 100644
--- a/crates/treehouse/src/html/tree.rs
+++ b/crates/treehouse/src/html/tree.rs
@@ -7,7 +7,10 @@ use crate::{
     config::Config,
     html::EscapeAttribute,
     state::{FileId, Treehouse},
-    tree::{attributes::Content, mini_template, SemaBranchId},
+    tree::{
+        attributes::{Content, Stage},
+        mini_template, SemaBranchId,
+    },
 };
 
 use super::{markdown, EscapeHtml};
@@ -22,6 +25,10 @@ pub fn branch_to_html(
     let source = treehouse.source(file_id);
     let branch = treehouse.tree.branch(branch_id);
 
+    if !cfg!(debug_assertions) && branch.attributes.stage == Stage::Draft {
+        return;
+    }
+
     let has_children =
         !branch.children.is_empty() || matches!(branch.attributes.content, Content::Link(_));
 
@@ -32,6 +39,10 @@ pub fn branch_to_html(
         class.push_str(&branch.attributes.classes.branch);
     }
 
+    if branch.attributes.stage == Stage::Draft {
+        class.push_str(" draft");
+    }
+
     let component = if let Content::Link(_) = branch.attributes.content {
         "th-b-linked"
     } else {
diff --git a/crates/treehouse/src/tree/attributes.rs b/crates/treehouse/src/tree/attributes.rs
index ea12138..dd0c087 100644
--- a/crates/treehouse/src/tree/attributes.rs
+++ b/crates/treehouse/src/tree/attributes.rs
@@ -64,6 +64,11 @@ pub struct Attributes {
     /// Enable `mini_template` templating in this branch.
     #[serde(default)]
     pub template: bool,
+
+    /// Publishing stage; if `Draft`, the branch is invisible unless treehouse is compiled in
+    /// debug mode.
+    #[serde(default)]
+    pub stage: Stage,
 }
 
 /// Controls for block content presentation.
@@ -100,3 +105,14 @@ pub struct Classes {
     #[serde(default)]
     pub branch_children: String,
 }
+
+/// Publish stage of a branch.
+///
+/// Draft branches are not included in release builds of treehouse. In debug builds, they are also
+/// marked with an extra "draft" before the content.
+#[derive(Debug, Default, Clone, PartialEq, Eq, Deserialize)]
+pub enum Stage {
+    #[default]
+    Public,
+    Draft,
+}
diff --git a/static/css/tairu.css b/static/css/post/tairu.css
similarity index 90%
rename from static/css/tairu.css
rename to static/css/post/tairu.css
index c3d4adc..1cbce86 100644
--- a/static/css/tairu.css
+++ b/static/css/post/tairu.css
@@ -20,13 +20,12 @@
         width: 56px;
         height: 56px;
         margin: 8px;
-        background-image: url('../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
+        background-image: url('../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
         background-size: 400%;
         image-rendering: pixelated;
         position: relative;
     }
 
-
     & .east,
     & .south,
     & .west,
@@ -128,7 +127,7 @@
         width: 72px;
         height: 72px;
 
-        background-image: url('../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
+        background-image: url('../../pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png');
         background-size: 400%;
         background-position: 100% 100%;
         image-rendering: pixelated;
@@ -136,14 +135,14 @@
         position: relative;
 
         &.bend {
-            background-image: url('../pic/01HQ183RANGH4S7VZSG1ZGH0S5-the-tile+width72+pixel.png');
+            background-image: url('../../pic/01HQ183RANGH4S7VZSG1ZGH0S5-the-tile+width72+pixel.png');
             background-size: 100%;
             background-position: 0 0;
             background-repeat: no-repeat;
         }
 
         &.notabend {
-            background-image: url('../pic/01HQ18E39K5F9Q5P41XAEVSEWK-the-also-tile.png');
+            background-image: url('../../pic/01HQ18E39K5F9Q5P41XAEVSEWK-the-also-tile.png');
             background-size: 100%;
             background-position: 0 0;
             background-repeat: no-repeat;
diff --git a/static/css/tree.css b/static/css/tree.css
index 4d3f3ef..e63924f 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -243,6 +243,24 @@ th-bc {
     }
 }
 
+/* Display a [draft] pill for branches that are drafts. */
+.tree li.draft {
+
+    &>details>summary>th-bc::before,
+    &>div>th-bc::before {
+        content: 'draft';
+
+        display: block;
+        width: min-content;
+
+        background-color: #058ef0;
+        color: #ffffff;
+        padding: 4px 12px;
+        margin-bottom: 4px;
+        border-radius: 100px;
+    }
+}
+
 /* bb - button bar */
 th-bb {
     height: 100%;
diff --git a/static/js/emoji.js b/static/js/emoji.js
index 87a7d84..85e278a 100644
--- a/static/js/emoji.js
+++ b/static/js/emoji.js
@@ -46,18 +46,22 @@ class EmojiTooltip extends HTMLElement {
 customElements.define("th-emoji-tooltip", EmojiTooltip);
 
 let emojiTooltips = null;
-addEventListener("wheel", event => emojiTooltips.closeTooltips(event));
 
 class EmojiTooltips extends HTMLElement {
     constructor() {
         super();
         this.tooltips = new Set();
         this.abortController = new AbortController();
-
     }
 
     connectedCallback() {
         emojiTooltips = this;
+
+        addEventListener(
+            "wheel",
+            event => emojiTooltips.closeTooltips(event),
+            { signal: this.abortController.signal },
+        );
     }
 
     disconnectedCallback() {