From e0cdcc46c59ce04f1fd504a0268bc13635ee6559 Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Wed, 21 Feb 2024 23:26:53 +0100
Subject: [PATCH] fix placeholder consoles

---
 crates/treehouse/src/cli/generate.rs         |  2 +-
 crates/treehouse/src/html/markdown.rs        |  6 ++++--
 static/css/main.css                          | 11 +++++++----
 static/js/components/literate-programming.js |  4 +++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/crates/treehouse/src/cli/generate.rs b/crates/treehouse/src/cli/generate.rs
index 371094a..74e2191 100644
--- a/crates/treehouse/src/cli/generate.rs
+++ b/crates/treehouse/src/cli/generate.rs
@@ -71,7 +71,7 @@ struct StaticTemplateData<'a> {
 }
 
 #[derive(Serialize)]
-pub struct PageTemplateData<'a> {
+struct PageTemplateData<'a> {
     pub config: &'a Config,
     pub page: Page,
     pub feeds: &'a HashMap<String, Feed>,
diff --git a/crates/treehouse/src/html/markdown.rs b/crates/treehouse/src/html/markdown.rs
index 1cee36b..7b20875 100644
--- a/crates/treehouse/src/html/markdown.rs
+++ b/crates/treehouse/src/html/markdown.rs
@@ -270,7 +270,7 @@ where
                             if let LiterateCodeKind::Output { placeholder_pic_id } = kind {
                                 if !placeholder_pic_id.is_empty() {
                                     self.write(
-                                        "<img class=\"placeholder\" loading=\"lazy\" src=\"",
+                                        "<img class=\"placeholder-image\" loading=\"lazy\" src=\"",
                                     )?;
                                     escape_html(
                                         &mut self.writer,
@@ -288,6 +288,8 @@ where
                                     self.write(">")?;
                                 }
                             }
+
+                            self.write("<pre class=\"placeholder-console\">")?;
                             Ok(())
                         }
                     },
@@ -409,7 +411,7 @@ where
             Tag::CodeBlock(kind) => {
                 self.write(match kind {
                     CodeBlockKind::Fenced(language) => match CodeBlockMode::parse(&language) {
-                        CodeBlockMode::LiterateProgram { .. } => "</th-literate-program>",
+                        CodeBlockMode::LiterateProgram { .. } => "</pre></th-literate-program>",
                         _ => "</code></pre>",
                     },
                     _ => "</code></pre>\n",
diff --git a/static/css/main.css b/static/css/main.css
index 03b4e35..ef5e4a8 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -609,18 +609,18 @@ th-literate-program[data-mode="output"] {
     border-radius: 0;
 
     & iframe,
-    & img.placeholder {
+    & img.placeholder-image {
         border-style: none;
         border-radius: 4px;
         display: block;
     }
 
-    & img.placeholder.js {
+    & img.placeholder-image.js {
         transition: opacity var(--transition-duration);
     }
 
     & iframe,
-    & img.placeholder.loading {
+    & img.placeholder-image.loading {
         opacity: 50%;
     }
 
@@ -659,8 +659,11 @@ th-literate-program[data-mode="output"] {
         }
     }
 
-    & pre.console {
+    & pre.console,
+    & pre.placeholder-console {
         position: relative;
+        margin-top: 0;
+        margin-bottom: 0;
 
         &:empty {
             display: none;
diff --git a/static/js/components/literate-programming.js b/static/js/components/literate-programming.js
index e11d976..012bca9 100644
--- a/static/js/components/literate-programming.js
+++ b/static/js/components/literate-programming.js
@@ -200,6 +200,7 @@ class OutputMode {
     }
 
     clearConsole() {
+        this.frame.removeChild(this.frame.placeholderConsole);
         this.console.replaceChildren();
     }
 
@@ -264,7 +265,8 @@ class LiterateProgram extends HTMLElement {
         this.frameIndex = this.program.frames.length;
         this.program.frames.push(this);
 
-        this.placeholderImage = this.getElementsByClassName("placeholder")[0];
+        this.placeholderImage = this.getElementsByClassName("placeholder-image")[0];
+        this.placeholderConsole = this.getElementsByClassName("placeholder-console")[0];
 
         this.mode = this.getAttribute("data-mode");
         if (this.mode == "input") {