Time to Read: ~2 minI love to write about running. One of the most rewarding things about training for a race is the journey, not necessarily the destination. I view races as the topping on a sundae, because the real transformation happens during the weeks leading up to a race. When I started my 16-week training plan for my Christmas Half Marathon, I knew I wanted to write about the training, but not as I've done in the past with a weekly post. I felt like this called for something more bite-sized. So, I decided to create a page that talked about what I was training for, and provided a way for me to provide bits of commentary as the training plan unfolded.
Since I converted this web site to Eleventy recently, a natural choice for doing this was to have the commentary in a JSON file. The page would be dynamically generated based on updates to the file. If you're curiuos about how I did this with Eleventy, check out the raw template and the source JSON file.
I didn't want to overwhelm my readers with a massive list of dispatches from the road. Rather, I designed it so the current week was expanded, while prior weeks showed a paragraph recap and an option to view the individual dispatches from the week. I used Marcus Burnette's All-CSS Toggle Switch (Checkbox Hack) as a starting point and extended it to include section visibility and to have the header act as part of the toggle using a duplicate label. Here's the code I used:
Here's how it looks, and you can always click through to the actual page to see it in action. I really like how the page exposes the most recent week (a little Eleventy magic) and the others are one click away.
My CSS-only toggle switch in action