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

fix: various fixes

Browse source
This commit is contained in:
Devin Haska 2024-03-01 21:09:07 -08:00
parent fde28b2c02
commit b69ff8a750
3 changed files with 44 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/css/blocks/prism.css
View file

@ -56,7 +56,8 @@ pre:has(code) {
font-style: italic; font-style: italic;
} }
.token.attr-name { .token.attr-name,
.token.property {
color: #73daca; color: #73daca;
} }

1
src/css/global/global-styles.css
View file

@ -163,6 +163,7 @@ aside {
mark { mark {
background-color: var(--color-border); background-color: var(--color-border);
color: var(--color-text); color: var(--color-text);
padding-block: var(--spacing-0\.25);
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {

34
src/posts/2024-03-02-version-3.md
View file

@ -15,6 +15,8 @@ I’ve had a Figma file ready for months now that outlined my basic design - all
{% image "https://cdn.wonderfulfrog.com/figma-v3.png", "A screenshot from Figma showing my blog prototype. There are various elements visible like buttons and widgets. A colour scheme using teal.", "Figma screenshot" %} {% image "https://cdn.wonderfulfrog.com/figma-v3.png", "A screenshot from Figma showing my blog prototype. There are various elements visible like buttons and widgets. A colour scheme using teal.", "Figma screenshot" %}
{% image "https://cdn.wonderfulfrog.com/figma-v3-lightmode.png", "Another screenshot from Figma showing my blog prototype. This is showing the 'light theme' with a serif title font, monospaced body font, and teal accent colours.", "Astute observers will notice the current version doesn't look a whole lot like the site now!" %}
Something that always frustrated me was having my content along the code. I sought out a solution for this for months. I tried a whole bunch of headless CMS options like [Sanity](https://www.sanity.io/), [Hygraph](https://hygraph.com/), [Ghost](https://ghost.org/), and even hosting my own [WordPress](https://wordpress.com) (that was an exciting prospect until I discovered their mobile app does not support plugins). Something that always frustrated me was having my content along the code. I sought out a solution for this for months. I tried a whole bunch of headless CMS options like [Sanity](https://www.sanity.io/), [Hygraph](https://hygraph.com/), [Ghost](https://ghost.org/), and even hosting my own [WordPress](https://wordpress.com) (that was an exciting prospect until I discovered their mobile app does not support plugins).
I was always paranoid that bad actors would clone my git repo and steal my content, so I was so focused on finding a secure, obfuscated method to store content. I was always paranoid that bad actors would clone my git repo and steal my content, so I was so focused on finding a secure, obfuscated method to store content.
@ -41,9 +43,10 @@ My first thought was WordPress. That’s nice boring technology. Battle tested.
After a while I remembered a project I’d seen ages ago that I knew a lot of folks were using. It’s called [Eleventy](https://www.11ty.dev/) (or 11ty for short). [There’s a video of the creator trying out a blog using the latest version all the way back to the earliest versions of the project](https://www.youtube.com/watch?v=bPtQmsjXMuo)[^2]. Now that’s what I like to see. Stable. Fast. Let’s do it. After a while I remembered a project I’d seen ages ago that I knew a lot of folks were using. It’s called [Eleventy](https://www.11ty.dev/) (or 11ty for short). [There’s a video of the creator trying out a blog using the latest version all the way back to the earliest versions of the project](https://www.youtube.com/watch?v=bPtQmsjXMuo)[^2]. Now that’s what I like to see. Stable. Fast. Let’s do it.
{% youtube "bPtQmsjXMuo", "How Stable is Eleventy? Can we run a 5-year old project as-is with Eleventy 2.0?" } {% youtube "bPtQmsjXMuo", "How Stable is Eleventy? Can we run a 5-year old project as-is with Eleventy 2.0?" %}
So I decided to do what every web dev with a blog does: rebuild their blog from scratch. At least I had some content to play with! So I decided to do what every web dev with a blog does: rebuild their blog from scratch. At least I had some content to play with!
## Cranking it up to 11(ty) ## Cranking it up to 11(ty)
Eleventy is a static site generator. It does what probably other popular options like Next.js or Astro do. I chose it because: Eleventy is a static site generator. It does what probably other popular options like Next.js or Astro do. I chose it because:
@ -78,7 +81,7 @@ Something I’d like to mention and emphasize is the tool chain (or lack of). Un
I wanted to focus on vanilla CSS as much as possible, and use a little post-processing to tidy things up, add missing prefixes (if needed), and all the boring stuff. Otherwise, let's try using some new features like `:has`! I wanted to focus on vanilla CSS as much as possible, and use a little post-processing to tidy things up, add missing prefixes (if needed), and all the boring stuff. Otherwise, let's try using some new features like `:has`!
A methodology that resonated with me was [CUBE CSS](https://cube.fyi/). CUBE standing for Composition, Utility, Block, and Exception. The site has a great explanation of how that breaks down, but for my own purposes, I interpreted it as: A methodology that resonated with me was [CUBE CSS](https://cube.fyi/). CUBE standing for <mark>Composition, Utility, Block, and Exception</mark>. The site has a great explanation of how that breaks down, but for my own purposes, I interpreted it as:
- Composition: utility classes that do one thing and one thing well, e.g. a wrapper class for centering a layout and giving it a `max-width`. - Composition: utility classes that do one thing and one thing well, e.g. a wrapper class for centering a layout and giving it a `max-width`.
- Utility: Design tokens and extremely simple utility classes. Very similar to the utility classes that [Tailwind](https://tailwindcss.com/) provides, albeit fewer. - Utility: Design tokens and extremely simple utility classes. Very similar to the utility classes that [Tailwind](https://tailwindcss.com/) provides, albeit fewer.
@ -342,8 +345,8 @@ This was a thorny issue for me. I couldn't decide on how I wanted to manage medi
As I dug into 11ty, I discovered a truly magical plugin called [`eleventy-img`](https://www.11ty.dev/docs/plugins/image/). It takes an image (either locally or remote), optimizes it, and stores it in the _output_ directory. The image can therefore be put anywhere you like, and with a small bit of shortcode it works like magic. For example: As I dug into 11ty, I discovered a truly magical plugin called [`eleventy-img`](https://www.11ty.dev/docs/plugins/image/). It takes an image (either locally or remote), optimizes it, and stores it in the _output_ directory. The image can therefore be put anywhere you like, and with a small bit of shortcode it works like magic. For example:
```njk ```
{% image "https://path.to.image.jpg" %} {% raw %}{% image "https://path.to.image.jpg" %}{% endraw %}
``` ```
It's a little bit of extra syntax compared to a Markdown image (and the newest version of `eleventy-img` doesn't even require shortcodes), but it saves so much manual effort of resizing and optimizing images. It's a little bit of extra syntax compared to a Markdown image (and the newest version of `eleventy-img` doesn't even require shortcodes), but it saves so much manual effort of resizing and optimizing images.
@ -378,18 +381,18 @@ As mentioned, a bunch of `.json` files that have my design tokens in here. That'
### Plugins ### Plugins
11ty has a lot of [built-in plugins](https://www.11ty.dev/docs/plugins/), but also makes it easy to define your own. In my case I've defined a customized Markdown processor using `markdown-it`. I added some neat features: 11ty has a lot of [built-in plugins](https://www.11ty.dev/docs/plugins/), but also makes it easy to define your own. In my case I've defined a customized Markdown processor using [`markdown-it`](https://github.com/markdown-it/markdown-it). I added some neat features:
- [Footnotes](https://github.com/markdown-it/markdown-it-footnote) - [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
- [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) - [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
- [Heading anchors](https://github.com/valeriangalliat/markdown-it-anchor) - [Heading anchors](https://github.com/valeriangalliat/markdown-it-anchor)
- [Code highlighting using Prism](https://github.com/jGleitz/markdown-it-prism) - [Code highlighting using Prism](https://github.com/jGleitz/markdown-it-prism)
I'm also using the [@11ty/eleventy-plugin-rss](https://www.11ty.dev/docs/plugins/rss/) plugin to generate my RSS feed. I'm glad to see that 11ty supports RSS feeds out-of-the-box. I always hated that setting up an RSS feed in Next.js felt rather hacky. I'm also using the [`@11ty/eleventy-plugin-rss`](https://www.11ty.dev/docs/plugins/rss/) plugin to generate my RSS feed. I'm glad to see that 11ty supports RSS feeds out-of-the-box. I always hated that setting up an RSS feed in Next.js felt rather hacky.
### Shortcodes ### Shortcodes
[Shortcodes](https://www.11ty.dev/docs/shortcodes/) are cool. They're like custom Markdown but supercharged. I have my aforementioned `image` shortcode, and another for embedding YouTube videos using `lite-youtube`. [Shortcodes](https://www.11ty.dev/docs/shortcodes/) are cool. They're like custom Markdown but supercharged. I have my aforementioned `image` shortcode, and another for embedding YouTube videos using [`lite-youtube`](https://github.com/justinribeiro/lite-youtube).
### Transforms ### Transforms
@ -444,15 +447,18 @@ Here are some resources I used (likely heavily) while building the site.
- [Lea Verou](https://lea.verou.me/) ([view source](https://github.com/LeaVerou/lea.verou.me)) - [Lea Verou](https://lea.verou.me/) ([view source](https://github.com/LeaVerou/lea.verou.me))
### Data Cascade ### Data Cascade
- https://www.11ty.dev/docs/data-cascade/ - [The Data Cascade](https://www.11ty.dev/docs/data-cascade/)
- https://benmyers.dev/blog/eleventy-data-cascade/ - [I Finally Understand Eleventy's Data Cascade.](https://benmyers.dev/blog/eleventy-data-cascade/)
### Setting up an 11ty blog ### 11ty setup and configuration
- https://benmyers.dev/blog/eleventy-blogroll/ - [Build a Blogroll with Eleventy](https://benmyers.dev/blog/eleventy-blogroll/)
- https://heydonworks.com/article/wordpress-to-eleventy/ - [From Wordpress To Eleventy With Ease](https://heydonworks.com/article/wordpress-to-eleventy/)
- [Optimizing Images with the 11ty Image Plugin](https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/)
### Implementing design tokens ### 11ty and design
- https://heydonworks.com/article/design-tokens-in-eleventy/ - [What Are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)
- [Configuring Web Fonts in 11ty with Global Data](https://www.aleksandrhovhannisyan.com/blog/configuring-web-fonts-in-11ty-with-global-data/)
- [Easily Use Design Tokens In Eleventy](https://heydonworks.com/article/design-tokens-in-eleventy/)
[^1]: Search for "nextjs react hydration error" to see what I mean. [^1]: Search for "nextjs react hydration error" to see what I mean.
[^2]: Here is [a post on 11ty.dev](https://www.11ty.dev/blog/stability/) with additional information, if you're curious. [^2]: Here is [a post on 11ty.dev](https://www.11ty.dev/blog/stability/) with additional information, if you're curious.