liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 39 Activity

fix placeholder consoles

Browse source
This commit is contained in:
liquidex 2024-02-21 23:26:53 +01:00
parent a1464bb865
commit e0cdcc46c5
4 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/treehouse/src/cli/generate.rs
View file

@ -71,7 +71,7 @@ struct StaticTemplateData<'a> {
} }
#[derive(Serialize)] #[derive(Serialize)]
pub struct PageTemplateData<'a> { struct PageTemplateData<'a> {
pub config: &'a Config, pub config: &'a Config,
pub page: Page, pub page: Page,
pub feeds: &'a HashMap<String, Feed>, pub feeds: &'a HashMap<String, Feed>,

6
crates/treehouse/src/html/markdown.rs
View file

@ -270,7 +270,7 @@ where
if let LiterateCodeKind::Output { placeholder_pic_id } = kind { if let LiterateCodeKind::Output { placeholder_pic_id } = kind {
if !placeholder_pic_id.is_empty() { if !placeholder_pic_id.is_empty() {
self.write( self.write(
"<img class=\"placeholder\" loading=\"lazy\" src=\"", "<img class=\"placeholder-image\" loading=\"lazy\" src=\"",
)?; )?;
escape_html( escape_html(
&mut self.writer, &mut self.writer,
@ -288,6 +288,8 @@ where
self.write(">")?; self.write(">")?;
} }
} }
self.write("<pre class=\"placeholder-console\">")?;
Ok(()) Ok(())
} }
}, },
@ -409,7 +411,7 @@ where
Tag::CodeBlock(kind) => { Tag::CodeBlock(kind) => {
self.write(match kind { self.write(match kind {
CodeBlockKind::Fenced(language) => match CodeBlockMode::parse(&language) { CodeBlockKind::Fenced(language) => match CodeBlockMode::parse(&language) {
CodeBlockMode::LiterateProgram { .. } => "</th-literate-program>", CodeBlockMode::LiterateProgram { .. } => "</pre></th-literate-program>",
_ => "</code></pre>", _ => "</code></pre>",
}, },
_ => "</code></pre>\n", _ => "</code></pre>\n",

11
static/css/main.css
View file

@ -609,18 +609,18 @@ th-literate-program[data-mode="output"] {
border-radius: 0; border-radius: 0;
& iframe, & iframe,
& img.placeholder { & img.placeholder-image {
border-style: none; border-style: none;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
} }
& img.placeholder.js { & img.placeholder-image.js {
transition: opacity var(--transition-duration); transition: opacity var(--transition-duration);
} }
& iframe, & iframe,
& img.placeholder.loading { & img.placeholder-image.loading {
opacity: 50%; opacity: 50%;
} }
@ -659,8 +659,11 @@ th-literate-program[data-mode="output"] {
} }
} }
& pre.console { & pre.console,
& pre.placeholder-console {
position: relative; position: relative;
margin-top: 0;
margin-bottom: 0;
&:empty { &:empty {
display: none; display: none;

4
static/js/components/literate-programming.js
View file

@ -200,6 +200,7 @@ class OutputMode {
} }
clearConsole() { clearConsole() {
this.frame.removeChild(this.frame.placeholderConsole);
this.console.replaceChildren(); this.console.replaceChildren();
} }
@ -264,7 +265,8 @@ class LiterateProgram extends HTMLElement {
this.frameIndex = this.program.frames.length; this.frameIndex = this.program.frames.length;
this.program.frames.push(this); 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"); this.mode = this.getAttribute("data-mode");
if (this.mode == "input") { if (this.mode == "input") {