jbrechtel
5abf5490b4
Cooklang timer references (~{15%minutes}) now render as clickable
spans. Clicking one starts a live countdown displayed in-place
with MM:SS format. A reset button (↺) restarts the timer from
the original duration. A close button (✕) returns to the static
label. When the timer reaches zero, the display pulses and turns
rust-colored for 3 cycles.
Implementation:
- durationToSeconds helper converts Duration to total seconds
- Timer span uses data-seconds attribute for the total
- Label + controls (display, reset, close) structure pre-rendered
in HTML, toggled via a .running CSS class
- Timer JS initializes all .roux-timer-tag elements on page load
- Each timer manages its own setInterval, multiple timers can
run simultaneously across different steps
Roux
Roux is a personal/family recipe management site.
It's intended to be low friction for entering recipes and tracking when you've cooked them.
Cooklang
Roux uses Cooklang (https://cooklang.org/) as a source of truth for all recipe content. Any recipe either starts in Cooklang or is immediately converted to Cooklang by one mechanism or another.
Other details
Cook history
Roux lets you track when you cook recipes. I like this because we cook a lot of different recipes and I like to be able to go back to find things I liked in the past so I don't forget about them.
Technical details
Development environment
Docker is used for all development tools. Nothing is required to be installed on the local machine except Docker.
Backend API: Haskell + SQLite
Frontend: Static HTML + Pico CSS
The actual backing for recipes themselves is a single cooklang directory with an in-process search index that gets rebuilt whenever a file is added to the directory.
Project structure:
cooklang-hs
A Cooklang parser written in Haskell.
roux-server
The webserver for Roux. Parses Cooklang files on disk, indexes them, renders HTML templates for presenting recipes.