Building a seasonal veg app with Eleventy. Part 1
Intro
I wanted to learn Eleventy for fun. Looking for inspo on what to build, I came across their Speedlify leadership board which lists sites built with Eleventy that are top performing in Lighthouse metrics. I found seasonal.today, a clean and simple site that shows you seasonal fruit and vegetables in the UK for your current month (as well as the rest of the year), and thought hey... I could recreate that but for the Netherlands.
Some little things to consider while building:
- It would be cool to aim for the top of the leaderboard. That means I should use as less JS and CSS as possible.
- Show the fruit/vegetables both in English and Dutch, to add a little language learning in there.
- Just enjoy the learning process of a new tech stack (coming from a Vue/React/Nextjs background), which this blog helps to document!
The setup
I followed the straight forward steps of 11ty Recipes, which I appreciated.
Oops wrong approach
I created a month.njk nunjuck template to display the fruit and vegetables for each month (using pagination approach) and a json file in _data folder for all the months and their fruit/vegetables.
{# month.njk file with my current month template setup #}
---
pagination:
data: months
size: 1
alias: month
permalink: "/{{ month.name | slugify }}/"
layout: base
---
<h1>What's in season in {{ month.name }}?</h1>
<h2>Vegetables</h2>
{{month.vegetables}}
<h2>Fruit</h2>
{{month.fruit}}
With that, I could start working on the logic where it shows the current month's seasonal veg on the home page.
I started following how to get data using Javascript. But then I realised- this JS will only run on build time... so the "current month" will always be when I last run a build, and not the user's current month, which makes more sense.
Maybe that's the issue seasonal.today has? Because the site always shows October (its January now).
I could change the approach so I run JS to update the content on client side, but it goes against trying to use as minimum JS as possible and I guess against the beauty of Static Site Generation with Eleventy. So for now, i'll make it so the user has to manually select the month. Maybe in the future I could consider running a build at the beginning of every month to regenerate the home page? 🤷♀️