compost.party

This is the static website for https://compost.party. It is built from a bunch of static files living in the src folder using a static site generator called Eleventy. 11ty runs on nodejs, which along with npm is a hard dependency to generate the html files:

node --version
# v18.19.0
npm --version
# 10.2.3

Other versions may work, the ones above are the ones that certainly work at the time of writing this README.

If you have the dependencies installed (you can use the flake.nix in the root of this repository if you use nix for your system packages), you can spin up alocal version of the site by running:

npm ci # install dependencies; only needs to be run once
npm run dev # start a local server to preview the page

The following command will create and fill a dist folder whose contents you can upload to any static file host:

npm run build

Battery gauge

The battery gauge works correctly only if the battery level is logged regularly:

# crontab -l
# minute hour	day	month	day-of-week	
*/15	*	*	*	*	$HOME/.local/bin/power-info | jq -c --arg t $(date '+%FT%T%z') '. + {timestamp: $t}' | logger -i --tag $LOGNAME/power-info
*/30	*	*	*	*	cd $HOME/git/compost.party && git stash && git pull --rebase && { git stash pop || true; } && ./scripts/update-data.sh && npm run build -- --output=$HOME/html/

Adding maintenance log entries

To create a new log entry, create a file named after the date of the entry in src/maintenance:

# create a log entry for today:
today="$(date +%F)"
touch "src/maintenance/$today.md"

# if you want to add images, create a folder next to it to keep things tidy:
# mkdir "src/maintenance/$today"

The log entries contain markdown, you can just start writing. They will under https://compost.party/maintenance/, the most recent will be the topmost.

Adding dithered images

The log entries can contain some front matter, which, if formatted in a certain way, can be used to add images to each log entry. The first couple of lines in entries with images look like this (taken from ./src/maintenance/2024-12-12.md):

---
images:
- src: ./2024-12-12/phone-battery-doerthe-dithered.png
  alt: Dithered photo of the server-phone on a carpet with a honeycomb-like pattern. A curly cable connects it to a battery pack, and the feet of a cat are visible tiptoeing around it.
---
Right after this you would continue to write the log entry as you normally would…

Dithering is currently done individually for each file using didder. The snippet below can be used to dither all jpeg files in a given folder:

today="$(date +%F)"
for f in $today/*.{jpg,jpeg}; do
    didder --palette '#f5f5f5 #d6d6d6 #24b400' --in "$f" --out "$(echo $f | sed -E 's|.jpe?g|-dithered.png|') --height 300 bayer 16x16
done

The resulting dithered png can often be further optimized with oxipng.