wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: add update post

Browse source
This commit is contained in:
Devin Haska 2025-01-24 23:19:05 -08:00
parent f7233bf5d1
commit b5ce1f7c77
1 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/content/posts/2025-01-24-now-using-11ty-v3.md Normal file
View file

@ -0,0 +1,33 @@
---
title: Now Using 11ty V3
date: 2025-01-24T12:07-07:00
excerpt: Finally upgrading to the latest version of Eleventy.
tags:
- webdev
- site-updates
- 11ty
---
It feels like I've had this baking for far too long. I'm finally using [Eleventy v3](https://github.com/11ty/eleventy/releases/tag/v3.0.0).
The upgrade process was so smooth. The [Upgrade Helper](https://www.11ty.dev/docs/plugins/upgrade-help/) plugin made the transition especially easy, and the only really challenging part was converting all of my JavaScript-related functions to use ESM instead of CommonJS (and that conversion process is opt-in, Eleventy still works great with CommonJS if preferred).
The upgraded version of the [Image](https://www.11ty.dev/docs/plugins/image/) plugin means I no longer require a shortcode to use, which is great (just plain ol' Markdown syntax). That said, I decided to add a new [markdown-it plugin](https://www.npmjs.com/package/markdown-it-attrs) to give myself a bit more control over image rendering using standard HTML attributes. It works like this:
```markdown
![](https://path.to.img/myimage.png){width=200}
```
Thanks to the [Image plugin checking the `width` property](https://github.com/11ty/eleventy-img/issues/234) (new in v6), this works great! As a convenience for myself, I created two new CSS classes `image-shrink` and `image-tiny` that apply percentage widths instead, and can be added using `{class=image-shrink}`.
I also took the time to give myself a bit of a design refresh. I'm trying to make my personal site reflect my creative developer skills, so I've added a dash of flair and fun to the entire site. There is more I'd like to explore, but at some point I had to decide that I've done enough or I'd be at it endlessly.
Finally, my Catalogue section has had a major overhaul. Each section has been given it's own "index page" to help make browsing easier. I was heavily inspired by a bunch of other websites that have similar sections (but especially [Cory Dransfeldt](https://coryd.dev/)). I got sidetracked trying to add all content I could before launching this version of my site, but like the theme updates I had to declare a stopping point before I got carried away. While I was at it I also added some filters for each of the major catalogue sections now to hopefully make browsing easier.
Still missing is my years of music-related content. I used to be a heavy user of [Rate Your Music](https://rateyourmusic.com/) but fell off for some reason. I've got a veritable treasure trove of ratings and reviews I could move over (and probably be only slightly embarrassed from my takes 10-15 years ago).
In between all of these upgrades I was testing various CMS solutions to ideally make organizing all this content simple. As before I considered options like WordPress and going headless, but gravitated more towards solutions like [Sanity](https://www.sanity.io/) or [Contentful](https://www.contentful.com/). [Directus](https://directus.io/solutions/headless-cms) looked interesting as a self-hosted solution too.
In the end though I decided to keep things where I like them: inside [Obsidian](https://obsidian.md/). Working with flat files makes the most sense to me, even if it introduces a bit of challenge in transforming my notes into a website.
If you'd like to dig into my specific code changes, you can [check out the PR](https://github.com/wonderfulfrog/wonderfulfrog.com/pull/11). Otherwise, enjoy! Now, what should I work on next...?