An Eleventy Strava Experiment in Three Parts

For the last two days I have been experimenting with reproducing my Strava timeline in Eleventy using a CSV file, for a change, as well as a JavaScript file to import new GPX files and map them correctly for the CSV file. That CSV file is then read by Eleventy to populate a site.

Part 1. Getting the Data

Initially I was going to use the API. Due to the API site not working I switched to exporting my strava history and downloading it. I created eleventy-strava and then added _data/raw and that’s where the csv files live. I have activities, privacy, bikes, shoes, and one or two other csv files.

With a few lines of JavaScript and Nunjuck I am able to extract the photos, the title, average heart rate, max heart rate and the comment/description for each activity.

The result is that within four seconds my entire Strava history is created, going all the way back to 2008.

Using MyAI and Gemini

When I was starting the experiment I ran out of tokens with MyAI almost instantly so I fell back to Gemini. For the intial setup Gemini worked fantastically, but when I wanted to add more functionality it provided me with erroneous code over, and over again so my enthusiasm has waned. We’re dealing with a lot of data, and I expect that by sharing data too generously I got Gemini narced, due to the pressure of all that data. I’m alluding to nitrogen narcosis and scuba diving in this image, not DEA activities.

GPX Imports

As I mentioned before, I’m experimenting with a static CSV file, rather than the API so the site is “dead”, in that data is refreshed only when I refresh it. That’s why I have the GPX import.js file. The idea is simple. I go for a run, a walk, a hike, a bike ride, or another sport and I come home. The activity is uploaded from my Suunto, Garmin, Apple watch or other to Strava and creates an individual activity. This activity has a strava ID and I give it a title.

The next step is that I download the gpx file from Strava. I rename it activity-id-name-of-activity.gpx, and my import.js file sees the id and title, parses, it, and then populates the CSV file with the name, title, hr info and more, in the appropriate 101 fields, before Eleventy rebuilds the site with the latest activity.

That’s when clever things happen

Automatic Hyperlinking to Strava

If I wanted to use GPX files directly, then I’d have several thousand data points per activity, several million over twenty years. If I wantd to map my activities it would take time, and effort. Instead I have my activities automatically connect with their Strava couterpart. This means that you have the Eleventy version that is light, fast, and easy to access and search, and the Strava version that is great for seeing the activity’s map and more. I’ve offloaded part of the work.

Part 2. Future Pairing With my Static Blog

For now the logic for my activities and my blog is seperate but I could very easily see myself pairing my daily blog post with the daily sporting activity. As you read the day’s post, you could then be drawn to the day’s sporting activity, and vice versa. With a build time of four seconds this doesn’t add much to the overhead of building my eleventy-blog site.

Part 3. Plenty of Flexibility

For now I have a summary page where I can see total distance for each sport where the distance isn’t 0km as well as the total climbed meters per sport. In theory, according to the data I have travelled 40,821km and climbed four hundred and sixty five metres. I could add information about average per year and more.

Proper Search

One of the key things missing from Strava, and Komoot, is the ability to search one’s own activities to find hikes. Several times I tried to find the Lammenhütte hike without much luck. With the flexibility offered by Eleventy I could add pagefind, and add search functionality quite easily, with filters for location and more. Even without search I wrote “lammen” and within a few milliseconds it found the lammenhutte hike that would take half an hour, using Strava.

And Finally

I’m only two days into this project. I could add monthly and yearly summaries for each sport, as well as searchability, and integration with my blog. I could also integrate my scuba diving log.

There are opportunities for me to explore.