fix placeholder consoles

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>,

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",

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;

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") {