From 17b6e54976d666363f77d1acbc01ac0c6c5d80f3 Mon Sep 17 00:00:00 2001 From: lqdev Date: Fri, 18 Aug 2023 18:26:41 +0200 Subject: [PATCH] only slightly better visuals --- content/tree/root.tree | 30 ++++++- crates/treehouse/src/html/tree.rs | 25 +++++- static/css/main.css | 131 ++++++++++++++++++++++++++++-- static/js/usability.js | 1 - 4 files changed, 173 insertions(+), 14 deletions(-) diff --git a/content/tree/root.tree b/content/tree/root.tree index 7ed066f..88f76ec 100644 --- a/content/tree/root.tree +++ b/content/tree/root.tree @@ -1,6 +1,6 @@ - # treehouse - - welcome to treehouse! + - welcome to the treehouse! - 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 @@ -47,16 +47,38 @@ - ### heading 3 headings lower than this aren't really supported because c'mon who would be this crazy - - + - this is supposed to be **bold** and this is supposed to be _italic_ - - here is my favorite fluffy boy ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png) + - there's a line break
+ here + + - and it's supposed to render correctly + + - 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) + + + here is my favorite fluffy boy ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png) + + - without a hat is also nice uwu - also a block quote - > Enough You Foolish Children - - yes i will totally abuse you with deltarune references and you cannot stop me + - yes i will totally abuse you with Deltarune references and you cannot stop me - ``` this is some block of code it looks pretty cool doesn't it ``` + + - ``` + and here's a multiline code block which also looks cool + many many many lines + ``` + + - and a table because benchmarks use those + + - + | weeee | woosh | wa-ho | + | --- | --- | --- | + | yep | that's | a table | + | looks | pretty cool | huh | diff --git a/crates/treehouse/src/html/tree.rs b/crates/treehouse/src/html/tree.rs index d8e26d7..9e9c2ef 100644 --- a/crates/treehouse/src/html/tree.rs +++ b/crates/treehouse/src/html/tree.rs @@ -3,7 +3,11 @@ use treehouse_format::{ast::Branch, pull::BranchKind}; use super::markdown; pub fn branch_to_html(s: &mut String, branch: &Branch, source: &str) { - s.push_str("
  • "); + s.push_str(if !branch.children.is_empty() { + "
  • " + } else { + "
  • " + }); { if !branch.children.is_empty() { s.push_str(match branch.kind { @@ -15,13 +19,26 @@ pub fn branch_to_html(s: &mut String, branch: &Branch, source: &str) { let raw_block_content = &source[branch.content.clone()]; let mut unindented_block_content = String::with_capacity(raw_block_content.len()); - let indent = " ".repeat(branch.indent_level); for line in raw_block_content.lines() { - unindented_block_content.push_str(line.strip_prefix(&indent).unwrap_or(line)); + // Bit of a jank way to remove at most branch.indent_level spaces from the front. + let mut space_count = 0; + for i in 0..branch.indent_level { + if line.as_bytes().get(i).copied() == Some(b' ') { + space_count += 1; + } else { + break; + } + } + + dbg!(&line[space_count..]); + unindented_block_content.push_str(&line[space_count..]); unindented_block_content.push('\n'); } - let markdown_parser = pulldown_cmark::Parser::new(&unindented_block_content); + let markdown_parser = pulldown_cmark::Parser::new_ext(&unindented_block_content, { + use pulldown_cmark::Options; + Options::ENABLE_STRIKETHROUGH | Options::ENABLE_TABLES + }); markdown::push_html(s, markdown_parser); if !branch.children.is_empty() { diff --git a/static/css/main.css b/static/css/main.css index 77d50f1..336aea7 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,11 @@ +/* Article-style layout. Center everything and give it a maximum width */ + +body { + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} + /* Choose more pretty colors than vanilla HTML */ body { @@ -5,13 +13,14 @@ body { color: #333; } -/* Set up fonts */ +/* Set up typography */ body, pre, code { font-family: 'RecVar', sans-serif; font-size: 14px; + line-height: 1.5; } :root { @@ -36,13 +45,92 @@ code { h1 { --recursive-slnt: 0.0; --recursive-casl: 0.0; - --recursive-crsv: 0.0; --recursive-wght: 900; + + font-size: 2.5rem; +} + +h2 { + --recursive-slnt: 0.0; + --recursive-casl: 0.5; + --recursive-wght: 800; + + font-size: 2rem; +} + +h3 { + --recursive-slnt: 0.0; + --recursive-casl: 0.5; + --recursive-wght: 700; + + font-size: 1.5rem; } pre, code { --recursive-mono: 1.0; + --recursive-casl: 0.0; + --recursive-slnt: 0.0; +} + +b, +strong { + --recursive-wght: 700; +} + +i, +em { + --recursive-slnt: -16.0; +} + +/* Lay out elements a bit more compactly */ + +p, +pre { + margin: 6px 0; +} + +h1, +h2, +h3 { + margin: 12px 0; +} + +/* Lay out elements a little less compactly (actually just have some blank space past the end) */ + +body { + padding-bottom: 10rem; +} + +/* Make code examples a little prettier by giving them visual separation from the rest of the page */ + +pre { + min-width: 70%; + margin-left: 12px; + padding: 8px 12px; + background-color: rgba(0, 0, 0, 5%); +} + +/* Also don't let images get out of hand */ + +img { + max-width: 100%; +} + +/* Fix the default blue and ugly purple links normally have */ + +a { + color: #004ec8; +} + +a:visited { + color: #6c2380; +} + +/* The tree indents shouldn't be too spaced out */ + +.tree ul { + padding-left: 24px; } /* Make the tree have + and - instead of the default details/summary arrow */ @@ -56,12 +144,44 @@ code { list-style: none; } +/* Also, lone paragraphs should have a bullet point beside to give you a bit of a visual anchor */ +.tree li.leaf>p:first-child::before, +/* Lone paragraphs include 
     elements */
+.tree li.leaf>pre:first-child::before {
+    content: 'ยท';
+    opacity: 0.5;
+
+    display: inline-block;
+    height: 0;
+
+    margin-left: -1.5rem;
+    width: 1.5rem;
+
+    --recursive-mono: 1.0;
+    font-size: 14px;
+}
+
+/* Dirty hack to make pres render the way I want this to */
+.tree li.leaf>pre:first-child::before {
+    transform: translateX(-8px);
+}
+
+pre {
+    transform: translateX(8px);
+    border-radius: 6px;
+}
+
 .tree details::before {
     content: '+';
     opacity: 0.5;
 
-    padding-right: 8px;
-    vertical-align: text-bottom;
+    display: inline-block;
+    margin-left: -1em;
+
+    margin-left: -1.5rem;
+    width: 1.5rem;
+
+    vertical-align: middle;
 
     --recursive-mono: 1.0;
 }
@@ -70,6 +190,7 @@ code {
     content: '-';
 }
 
-.tree details *:first-child {
+.tree details>*:first-child,
+.tree li.leaf>*:first-child {
     display: inline-block;
 }
diff --git a/static/js/usability.js b/static/js/usability.js
index e1192c2..abb5404 100644
--- a/static/js/usability.js
+++ b/static/js/usability.js
@@ -3,7 +3,6 @@
 // We want to let the user have a selection on collapsible blocks without collapsing them when
 // the user finishes marking their selection.
 document.addEventListener("click", event => {
-    console.log(getSelection());
     if (getSelection().type == "Range") {
         event.preventDefault();
     }