fix: missing css explainer
This commit is contained in:
parent
c384fa7ea1
commit
bca69910e5
5 changed files with 26 additions and 13 deletions
2
cache/jsonfeed-to-mastodon-timestamp.json
vendored
2
cache/jsonfeed-to-mastodon-timestamp.json
vendored
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"timestamp": 1686146575943
|
||||
"timestamp": 1686168182104
|
||||
}
|
||||
11
cache/jsonfeed-to-mastodon.json
vendored
11
cache/jsonfeed-to-mastodon.json
vendored
|
|
@ -3945,5 +3945,16 @@
|
|||
"https://social.lol/users/cory/statuses/110503301997648615"
|
||||
],
|
||||
"lastTootTimestamp": 1686146575941
|
||||
},
|
||||
"https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/": {
|
||||
"id": "https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/",
|
||||
"title": "📝: Optimizing for performance with Eleventy",
|
||||
"url": "https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/",
|
||||
"content_text": "📝: Optimizing for performance with Eleventy https://coryd.dev/posts/2023/optimizing-for-performance-with-eleventy/",
|
||||
"date_published": "2023-06-07T00:00:00-08:00",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/110504717978669650"
|
||||
],
|
||||
"lastTootTimestamp": 1686168182098
|
||||
}
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
"markdown-it-anchor": "^8.4.1",
|
||||
"markdown-it-footnote": "^3.0.3",
|
||||
"markdownlint-cli": "^0.34.0",
|
||||
"marked": "^5.0.4",
|
||||
"marked": "^5.0.5",
|
||||
"striptags": "^3.2.0",
|
||||
"tailwindcss": "^3.3.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./ta
|
|||
|
||||
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time:
|
||||
{% raw %}
|
||||
|
||||
```liquid
|
||||
{% capture css %}
|
||||
{% include "../assets/styles/prism.css" %}
|
||||
|
|
@ -69,9 +68,16 @@ The site include's Prism for code syntax highlighting and this is embedded and m
|
|||
{{ css | cssmin }}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
|
||||
{% raw %}
|
||||
```javascript
|
||||
const CleanCSS = require('clean-css')
|
||||
...
|
||||
// css filters
|
||||
eleventyConfig.addFilter('cssmin', (code) => new CleanCSS({}).minify(code).styles)
|
||||
```
|
||||
{% endraw %}
|
||||
## Minify HTML output
|
||||
|
||||
Final HTML output for the site is minified when it's built using `@sherby/eleventy-plugin-files-minifier` which, [per the docs](https://www.npmjs.com/package/@sherby/eleventy-plugin-files-minifier):
|
||||
|
|
@ -93,7 +99,6 @@ module.exports = function (eleventyConfig) {
|
|||
|
||||
Finally (and this is something that took me longer than it should have to do), we optimize images at build time using `@11ty/eleventy-image`, defining a shortcode in `.eleventy.js` as follows:
|
||||
{% raw %}
|
||||
|
||||
```javascript
|
||||
// image shortcode
|
||||
eleventyConfig.addShortcode('image', async function (src, alt, css, sizes, loading) {
|
||||
|
|
@ -115,15 +120,12 @@ eleventyConfig.addShortcode('image', async function (src, alt, css, sizes, loadi
|
|||
return Image.generateHTML(metadata, imageAttributes)
|
||||
})
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
This is most impactful on [my now page](https://coryd.dev/now) which is populated with quite a few images and, when used, looks something like this:
|
||||
{% raw %}
|
||||
|
||||
```liquid
|
||||
{% image artistImg, artistName, 'rounded-lg', '225px', 'eager' %}
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
For this page in particular, the images that are rendered above the fold are set to load as `eager` to mitigate performance impacts related to [too much lazy loading](https://web.dev/lcp-lazy-loading/). These images are fetched from caches hosted at [Bunny.net](https://bunny.net/?ref=revw3mehej) when the site is built.
|
||||
|
||||
|
|
|
|||
|
|
@ -3673,10 +3673,10 @@ markdownlint@~0.28.2:
|
|||
markdown-it "13.0.1"
|
||||
markdownlint-micromark "0.1.2"
|
||||
|
||||
marked@^5.0.4:
|
||||
version "5.0.4"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-5.0.4.tgz#69bc2b43de2e58ca46f5ff2ff294e9825c7f5cd1"
|
||||
integrity sha512-r0W8/DK56fAkV0qfUCO9cEt/VlFWUzoJOqEigvijmsVkTuPOHckh7ZutNJepRO1AxHhK96/9txonHg4bWd/aLA==
|
||||
marked@^5.0.5:
|
||||
version "5.0.5"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-5.0.5.tgz#1c7bd284d7d29d7d75d6241b26e5d5bf3b558a12"
|
||||
integrity sha512-auTmKJTBwZM/GLVFOhmkY7pL8v/0DxiDaXRC2kEyajcNJ0XXn9NphLD0106dbWrbPwcyD4Y0Dus16OkCzUMkfg==
|
||||
|
||||
maximatch@^0.1.0:
|
||||
version "0.1.0"
|
||||
|
|
|
|||
Reference in a new issue