diff --git a/README.md b/README.md index 049b372..3a42f7c 100644 --- a/README.md +++ b/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. diff --git a/content/about.tree b/content/about.tree index f599d30..d04840d 100644 --- a/content/about.tree +++ b/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) diff --git a/crates/treehouse/src/cli/regenerate.rs b/crates/treehouse/src/cli/generate.rs similarity index 100% rename from crates/treehouse/src/cli/regenerate.rs rename to crates/treehouse/src/cli/generate.rs diff --git a/crates/treehouse/src/cli/mod.rs b/crates/treehouse/src/cli/mod.rs index ca3e86c..a0d6ff3 100644 --- a/crates/treehouse/src/cli/mod.rs +++ b/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, diff --git a/crates/treehouse/src/main.rs b/crates/treehouse/src/main.rs index 67b5cca..be6ce2c 100644 --- a/crates/treehouse/src/main.rs +++ b/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?; } } diff --git a/static/css/main.css b/static/css/main.css index 4a40350..ffc86ad 100644 --- a/static/css/main.css +++ b/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 { diff --git a/static/css/tree.css b/static/css/tree.css index 68e44bf..483806e 100644 --- a/static/css/tree.css +++ b/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 { diff --git a/static/js/thanks-webkit.js b/static/js/thanks-webkit.js new file mode 100644 index 0000000..a2c99a9 --- /dev/null +++ b/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 = `
  • `; + +// 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"; +} diff --git a/template/tree.hbs b/template/tree.hbs index 4bcc4bb..67d4e8a 100644 --- a/template/tree.hbs +++ b/template/tree.hbs @@ -17,6 +17,7 @@ + @@ -50,6 +51,14 @@ +
    +

    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.

    +

    in the meantime I suggest switching to something more modern.

    +

    sorry for the inconvenience!

    +
    +
    {{{ tree }}}