bunch o' tresh

README.md

@@ -17,13 +17,13 @@ You have been warned.
 To build the website:
 
 ```sh
-cargo run -p treehouse regenerate
+cargo run -p treehouse generate
 ```
 
 This will spit out a directory `target/site` containing the static pages. You're free to use any HTTP server you wish, but for development purposes treehouse includes one in the CLI:
 
 ```sh
-cargo run -p treehouse regenerate --serve
+cargo run -p treehouse generate --serve
 ```
 
 This will fire up a server on port 8080. No way to change that, sorry. Edit the source code.
@@ -31,7 +31,7 @@ This will fire up a server on port 8080. No way to change that, sorry. Edit the
 If you're developing, you may wanna use [`cargo-watch`](https://crates.io/crates/cargo-watch):
 
 ```sh
-cargo watch -- cargo run -p treehouse regenerate --serve
+cargo watch -- cargo run -p treehouse generate --serve
 ```
 
 The website will reload itself automatically if you change any file in the repository.

content/about.tree

@@ -2,7 +2,7 @@
 - hello! I am liquidex
 
     % id = "01H89P3CH8YZY1MTZS3DZGGFKX"
-    + also known as... (click to expand)
+    + also known as… (click to expand)
 
         % id = "01H89P3CH8GAHS8DDW1HHEWA3P"
         - liquidex (just including this here for linking sake)

crates/treehouse/src/cli/mod.rs

@@ -1,6 +1,6 @@
 pub mod fix;
+pub mod generate;
 mod parse;
-pub mod regenerate;
 
 use std::path::PathBuf;
 
@@ -15,14 +15,14 @@ pub struct ProgramArgs {
 #[derive(Subcommand)]
 pub enum Command {
     /// Regenerate the website.
-    Regenerate(#[clap(flatten)] RegenerateArgs),
+    Generate(#[clap(flatten)] GenerateArgs),
 
     /// Populate missing metadata in blocks.
     Fix(#[clap(flatten)] FixArgs),
 }
 
 #[derive(Args)]
-pub struct RegenerateArgs {
+pub struct GenerateArgs {
     /// Start a web server serving the static files. Useful with `cargo watch`.
     #[clap(short, long)]
     pub serve: bool,

crates/treehouse/src/main.rs

@@ -3,7 +3,7 @@ use std::path::Path;
 use clap::Parser;
 use cli::{
     fix::fix_file_cli,
-    regenerate::{self, regenerate_or_report_error, Paths},
+    generate::{self, regenerate_or_report_error, Paths},
     Command, ProgramArgs,
 };
 use log::{error, info};
@@ -19,7 +19,7 @@ async fn fallible_main() -> anyhow::Result<()> {
     let args = ProgramArgs::parse();
 
     match args.command {
-        Command::Regenerate(regenerate_args) => {
+        Command::Generate(regenerate_args) => {
             let dirs = Paths {
                 target_dir: Path::new("target/site"),
                 config_file: Path::new("treehouse.toml"),
@@ -35,7 +35,7 @@ async fn fallible_main() -> anyhow::Result<()> {
             regenerate_or_report_error(&dirs);
 
             if regenerate_args.serve {
-                regenerate::web_server().await?;
+                generate::web_server().await?;
             }
         }
 

static/css/main.css

@@ -1,6 +1,13 @@
 /* Color scheme. */
 
 :root {
+    /* naturally */
+    --liquidex-brand-blue: #058ef0;
+
+    --text-color-light: #55423e;
+    --link-color-light: #004ec8;
+    --link-color-visited-light: #6c2380;
+
     --background-color: rgb(255, 253, 246);
     --text-color: #55423e;
     --link-color: #004ec8;
@@ -51,6 +58,15 @@ main {
 body {
     background-color: var(--background-color);
     color: var(--text-color);
+
+    scrollbar-color: var(--background-color);
+    scrollbar-width: auto;
+    scrollbar-gutter: stable;
+}
+
+body::selection {
+    /* Even though this color doesn't yield the most readable text, browsers  */
+    background-color: var(--liquidex-brand-blue);
 }
 
 /* Set up typography */
@@ -127,13 +143,13 @@ em {
 
 p,
 pre {
-    margin: 6px 0;
+    margin: 0 0;
 }
 
 h1,
 h2,
 h3 {
-    margin: 12px 0;
+    margin: 4px 0;
 }
 
 /* Lay out elements a little less compactly (actually just have some blank space past the end) */
@@ -207,6 +223,7 @@ th {
 .noscript {
     padding: 16px;
     background-color: #fde748;
+    color: var(--text-color-light);
     border: 1px solid #6c581c;
     border-radius: 8px;
     width: fit-content;
@@ -223,6 +240,19 @@ th {
     margin-bottom: 0;
 }
 
+.noscript a {
+    color: var(--link-color-light);
+}
+
+.noscript a:visited {
+    color: var(--link-color-visited-light);
+}
+
+/* also, webkit. */
+#webkit-makes-me-go-insane {
+    display: none;
+}
+
 /* Give the logo on the top some nicer looks */
 
 nav {

static/css/tree.css

@@ -11,7 +11,7 @@
     --tree-icon-space: 28px;
 
     /* I have no clue why this works, deal with it */
-    --tree-hover-expansion: 0.01px;
+    --tree-hover-expansion: 6px;
 
     position: relative;
 }
@@ -21,6 +21,11 @@
     cursor: pointer;
 }
 
+/* Can webkit not be a dick for once? */
+.tree details>summary::-webkit-details-marker {
+    display: none;
+}
+
 .tree li {
     list-style: none;
 
@@ -80,6 +85,8 @@
     background-position: var(--tree-icon-position);
     padding-left: var(--tree-icon-space);
     margin-left: calc(- var(--tree-icon-space));
+    padding-top: var(--tree-hover-expansion);
+    padding-bottom: var(--tree-hover-expansion);
 }
 
 .tree details[open]>summary {

static/js/thanks-webkit.js

@@ -0,0 +1,21 @@
+// Detect if we can have crucial functionality (ie. custom elements call constructors).
+// This doesn't seem to happen in Epiphany, and possibly also other Webkit-based browsers.
+let works = false;
+class WebkitMoment extends HTMLLIElement {
+    constructor() {
+        super();
+        works = true;
+    }
+}
+
+customElements.define("th-webkit-moment", WebkitMoment, { extends: "li" });
+
+let willItWorkOrWillItNot = document.createElement("div");
+willItWorkOrWillItNot.innerHTML = `<li is="th-webkit-moment"></li>`;
+
+// If my takeoff fails
+// tell my mother I'm sorry
+let box = document.getElementById("webkit-makes-me-go-insane");
+if (!works) {
+    box.style = "display: block";
+}

template/tree.hbs

@@ -17,6 +17,7 @@
     <script type="module" src="{{ config.site }}/navmap.js"></script>
     <script type="module" src="{{ config.site }}/static/js/tree.js"></script>
     <script type="module" src="{{ config.site }}/static/js/usability.js"></script>
+    <script type="module" src="{{ config.site }}/static/js/thanks-webkit.js"></script>
 </head>
 
 <body>
@@ -50,6 +51,14 @@
         </div>
     </noscript>
 
+    <div id="webkit-makes-me-go-insane" class="noscript" role="note">
+        <p>hey! looks like you're using a weird or otherwise quirky web browser. this basically means, the website will
+            not work for you correctly. I might fix it in the future but I have very limited time to work on this
+            website and so don't have an estimate on when that might happen.</p>
+        <p>in the meantime I suggest switching to <a href="https://firefox.com">something more modern.</a></p>
+        <p>sorry for the inconvenience!</p>
+    </div>
+
     <main class="tree">
         {{{ tree }}}
     </main>