feat: 11ty image plugin + optimize images
This commit is contained in:
parent
b59886a56e
commit
c87e893046
5 changed files with 39 additions and 54 deletions
24
.eleventy.js
24
.eleventy.js
|
|
@ -3,6 +3,8 @@ const heroIcons = require('eleventy-plugin-heroicons')
|
|||
const pluginUnfurl = require('eleventy-plugin-unfurl')
|
||||
const pluginFilesMinifier = require('@sherby/eleventy-plugin-files-minifier')
|
||||
const schema = require('@quasibit/eleventy-plugin-schema')
|
||||
const { eleventyImagePlugin } = require('@11ty/eleventy-img')
|
||||
const Image = require('@11ty/eleventy-img')
|
||||
const markdownIt = require('markdown-it')
|
||||
const markdownItAnchor = require('markdown-it-anchor')
|
||||
const markdownItFootnote = require('markdown-it-footnote')
|
||||
|
|
@ -21,6 +23,7 @@ module.exports = function (eleventyConfig) {
|
|||
eleventyConfig.addPlugin(pluginUnfurl)
|
||||
eleventyConfig.addPlugin(pluginFilesMinifier)
|
||||
eleventyConfig.addPlugin(schema)
|
||||
eleventyConfig.addPlugin(eleventyImagePlugin)
|
||||
|
||||
// tailwind watches
|
||||
eleventyConfig.addWatchTarget('./tailwind.config.js')
|
||||
|
|
@ -89,9 +92,24 @@ module.exports = function (eleventyConfig) {
|
|||
return md.render(content)
|
||||
})
|
||||
|
||||
// asset_img shortcode
|
||||
eleventyConfig.addLiquidShortcode('asset_img', (filename, alt) => {
|
||||
return `<img class="my-4" src="/assets/img/posts/${filename}" alt="${alt}" />`
|
||||
// image shortcode
|
||||
eleventyConfig.addShortcode('image', async function (src, alt, css, sizes, loading) {
|
||||
let metadata = await Image(src, {
|
||||
widths: [75, 150, 300, 600],
|
||||
formats: ['webp'],
|
||||
urlPath: '/assets/img/cache/',
|
||||
outputDir: './_site/assets/img/cache/',
|
||||
})
|
||||
|
||||
let imageAttributes = {
|
||||
class: css,
|
||||
alt,
|
||||
sizes,
|
||||
loading: loading || 'lazy',
|
||||
decoding: 'async',
|
||||
}
|
||||
|
||||
return Image.generateHTML(metadata, imageAttributes)
|
||||
})
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const ALBUM_DENYLIST = ['no-love-deep-web', 'unremittance']
|
|||
|
||||
module.exports = {
|
||||
artist: (media) =>
|
||||
`https://cdn.coryd.dev/artists/min/${media.replace(/\s+/g, '-').toLowerCase()}.webp`,
|
||||
`https://cdn.coryd.dev/artists/${media.replace(/\s+/g, '-').toLowerCase()}.jpg`,
|
||||
album: (media) => {
|
||||
return !ALBUM_DENYLIST.includes(media.name.replace(/\s+/g, '-').toLowerCase())
|
||||
? media.image[media.image.length - 1]['#text'].replace(
|
||||
|
|
@ -11,8 +11,7 @@ module.exports = {
|
|||
)
|
||||
: `https://cdn.coryd.dev/albums/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
|
||||
},
|
||||
tv: (episode) =>
|
||||
`https://cdn.coryd.dev/tv/min/${episode.replace(/\s+/g, '-').toLowerCase()}.webp`,
|
||||
tv: (episode) => `https://cdn.coryd.dev/tv/${episode.replace(/\s+/g, '-').toLowerCase()}.jpg`,
|
||||
movie: (url, host, cdn) => {
|
||||
return url.replace(host, cdn).replace('600', '200').replace('900', '300')
|
||||
},
|
||||
|
|
|
|||
|
|
@ -55,13 +55,9 @@ layout: main
|
|||
{{ artist.playcount }} plays
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="{{artist.name | artist}}"
|
||||
onerror="this.onerror=null; this.src='/assets/img/media/404-music.jpg'"
|
||||
width="350"
|
||||
height="350"
|
||||
class="rounded-lg"
|
||||
alt="{{artist.name | escape}}" />
|
||||
{%- capture artistImg %}{{ artist.name | artist }}{% endcapture -%}
|
||||
{%- capture artistName %}{{ artist.name | escape }}{% endcapture -%}
|
||||
{% image artistImg, artistName, 'rounded-lg', '225px', 'eager' %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
|
@ -84,14 +80,9 @@ layout: main
|
|||
{{ album.artist.name }}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="{{album | album}}"
|
||||
onerror="this.onerror=null; this.src='/assets/img/media/404-music.jpg'"
|
||||
width="350"
|
||||
height="350"
|
||||
class="rounded-lg"
|
||||
alt="{{album.name | escape}}"
|
||||
loading="lazy" />
|
||||
{%- capture albumImg %}{{ album | album }}{% endcapture -%}
|
||||
{%- capture albumName %}{{ album.name | escape }}{% endcapture -%}
|
||||
{% image albumImg, albumName, 'rounded-lg', '225px' %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
|
@ -143,14 +134,9 @@ layout: main
|
|||
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||
<div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
|
||||
</div>
|
||||
<img
|
||||
src="{{movie.image | movie: site.letterboxd-host, site.cdn-movies}}"
|
||||
onerror="this.onerror=null; this.src='/assets/img/media/404-movie.jpg'"
|
||||
width="226"
|
||||
height="337"
|
||||
class="rounded-lg"
|
||||
alt="{{movie.title | escape}}"
|
||||
loading="lazy" />
|
||||
{%- capture movieImg %}{{movie.image | movie: site.letterboxd-host, site.cdn-movies}}{% endcapture -%}
|
||||
{%- capture movieName %}{{movie.title | escape}}{% endcapture -%}
|
||||
{% image movieImg, movieName, 'rounded-lg w-full', '180px' %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
|
@ -173,14 +159,9 @@ layout: main
|
|||
{{ episode.show.title }} • <strong>S</strong>{{ episode.episode.season }}<strong>E</strong>{{ episode.episode.number }}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="{{ episode.show.title | tv }}"
|
||||
onerror="this.onerror=null; this.src='/assets/img/media/404-movie.jpg'"
|
||||
width="226"
|
||||
height="337"
|
||||
class="rounded-lg"
|
||||
alt="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}"
|
||||
loading="lazy" />
|
||||
{%- capture tvImg %}{{episode.show.title | tv}}{% endcapture -%}
|
||||
{%- capture tvName %}{{ episode.episode.title | escape}} {{ episode.show.title | escape }}{% endcapture -%}
|
||||
{% image tvImg, tvName, 'rounded-lg w-full', '180px' %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,7 @@
|
|||
{% for mention in mentions['repost-of'] %}
|
||||
<li class="-ml-3 inline">
|
||||
<a href={{mention.url}}>
|
||||
<img
|
||||
src="{{mention.author.photo}}"
|
||||
alt="{{mention.author.name}}"
|
||||
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400"
|
||||
loading="lazy" />
|
||||
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400', '56px' %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
@ -26,11 +22,7 @@
|
|||
{% for mention in mentions['like-of'] %}
|
||||
<li class="-ml-3 inline">
|
||||
<a href={{mention.url}}>
|
||||
<img
|
||||
src="{{mention.author.photo}}"
|
||||
alt="{{mention.author.name}}"
|
||||
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400"
|
||||
loading="lazy" />
|
||||
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-400', '56px' %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
@ -43,11 +35,7 @@
|
|||
{% for mention in mentions['in-reply-to'] %}
|
||||
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
|
||||
<a class="group flex flex-row space-between items-center" href={{mention.url}}>
|
||||
<img
|
||||
src="{{mention.author.photo}}"
|
||||
alt="{{mention.author.name}}"
|
||||
class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400"
|
||||
loading="lazy" />
|
||||
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400', '56px' %}
|
||||
<div class="ml-3">
|
||||
<p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.content.text }}</p>
|
||||
<p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.published | isoDateOnly }}</p>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,8 @@ meta:
|
|||
image:
|
||||
src: https://coryd.dev/assets/img/avatar.webp
|
||||
---
|
||||
|
||||
<div class="flex items-center justify-center w-full">
|
||||
<img class="max-w-xs w-full h-auto mt-0 mb-1" src="/assets/img/avatar.webp" alt="{{ site.name }}" loading="lazy" />
|
||||
{% image './src/assets/img/avatar.webp', site.name, 'max-w-xs w-full h-auto mt-0 mb-1', '320px', 'eager' %}
|
||||
</div>
|
||||
<h1 class="text-xxl font-black -leading-tight tracking-normal dark:text-gray-200 md:text-3xl text-center">Hi, I'm Cory</h1>
|
||||
|
||||
|
|
|
|||
Reference in a new issue