refactor: ♻️ Fix formatting and remove gap above images
parent
897ad020c6
commit
a5ccef9235
GPG Key ID:
DF773B3F4A88DA86
|
|
@ -12,8 +12,9 @@ module.exports = function(eleventyConfig) {
|
|||
// https://www.11ty.dev/docs/data-deep-merge/
|
||||
eleventyConfig.setDataDeepMerge(true)
|
||||
|
||||
// Optimized images
|
||||
// https://www.11ty.dev/docs/plugins/image/#make-your-own-markup
|
||||
eleventyConfig.addShortcode("image", async (src, alt) => {
|
||||
eleventyConfig.addShortcode('image', async (src, alt) => {
|
||||
const metadata = await pluginImage(`./_src${src}`, {
|
||||
widths: [...IMAGE_SIZES, 'auto'],
|
||||
formats: ['auto', 'webp', 'avif'],
|
||||
|
|
@ -26,37 +27,57 @@ module.exports = function(eleventyConfig) {
|
|||
})
|
||||
const lowsrc = metadata.webp[0]
|
||||
const highsrc = metadata.webp[metadata.webp.length - 1]
|
||||
return `<a href="${src}"><picture>\n${Object.values(metadata).map(imageFormat =>
|
||||
`\t<source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${IMAGE_SIZES.reverse().reduce((str,size) =>
|
||||
`(max-width:${size}px) ${size}px, ${str}`,'100vw')}">`).join("\n")}\n\t<img src="${lowsrc.url}" width="${highsrc.width}" height="${highsrc.height}" alt="${alt}" decoding="async">\n</picture></a>`
|
||||
return `<a href="${src}"><picture>${Object.values(metadata).map(imageFormat =>
|
||||
`\t<source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(', ')}" sizes="${IMAGE_SIZES.reverse().reduce((str,size) =>
|
||||
`(max-width:${size}px) ${size}px, ${str}`,'100vw')}">`).join('')}<img src="${lowsrc.url}" width="${highsrc.width}" height="${highsrc.height}" alt="${alt}" decoding="async"></picture></a>`
|
||||
})
|
||||
|
||||
eleventyConfig.addFilter('readableDate', dateObj => {
|
||||
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('dd LLL yyyy')
|
||||
})
|
||||
// Video embed
|
||||
eleventyConfig.addShortcode('vid', (src, autoplay=false) =>
|
||||
`<video controls ${(autoplay)?'autoplay':''}width="100%"><source src="${src}" type="video/${src.split('.').pop()}">Embedded videos are not supported in this browser.</video>`
|
||||
)
|
||||
eleventyConfig.addShortcode('vidraw', (src) =>
|
||||
`<video width="100%"><source src="${src}">Embedded videos are not supported in this browser.</video>`
|
||||
)
|
||||
|
||||
// YouTube
|
||||
eleventyConfig.addShortcode('yt', (shortcode) =>
|
||||
`<iframe width="100%" height="500vh" src="https://www.youtube.com/embed/${shortcode}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
|
||||
)
|
||||
|
||||
// Audio embed
|
||||
eleventyConfig.addShortcode('audio', (src, fmt) =>
|
||||
`<audio controls><source src="${src}" type="audio/${fmt}">Embedded audio is not supported in this browser.</audio>`
|
||||
)
|
||||
|
||||
// iFrame
|
||||
eleventyConfig.addShortcode('iframe', (url, height) =>
|
||||
`<iframe width="100%" height="${height}" src="${url}"</iframe>`
|
||||
)
|
||||
|
||||
eleventyConfig.addFilter('readableDate', dateObj =>
|
||||
DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('dd LLL yyyy')
|
||||
)
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
|
||||
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd')
|
||||
})
|
||||
eleventyConfig.addFilter('htmlDateString', (dateObj) =>
|
||||
DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd')
|
||||
)
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter('head', (array, n) => {
|
||||
if( n < 0 ) {
|
||||
return array.slice(n)
|
||||
}
|
||||
return array.slice(0, n)
|
||||
})
|
||||
eleventyConfig.addFilter('head', (array, n) =>
|
||||
(n<0)? array.slice(n): array.slice(0, n)
|
||||
)
|
||||
|
||||
// Return the smallest number argument
|
||||
eleventyConfig.addFilter('min', (...numbers) => {
|
||||
return Math.min.apply(null, numbers)
|
||||
})
|
||||
eleventyConfig.addFilter('min', (...numbers) =>
|
||||
Math.min.apply(null, numbers)
|
||||
)
|
||||
|
||||
eleventyConfig.addFilter('filterTagList', tags => {
|
||||
eleventyConfig.addFilter('filterTagList', tags =>
|
||||
// should match the list in tags.njk
|
||||
return (tags || []).filter(tag => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1)
|
||||
})
|
||||
(tags || []).filter(tag => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1)
|
||||
)
|
||||
|
||||
// Convert text to hex
|
||||
eleventyConfig.addFilter('toHex', (str) => {
|
||||
|
|
@ -88,7 +109,7 @@ module.exports = function(eleventyConfig) {
|
|||
})
|
||||
|
||||
// Customize Markdown library and settings:
|
||||
eleventyConfig.setLibrary("md", markdownIt({
|
||||
eleventyConfig.setLibrary('md', markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
|
|
@ -105,9 +126,10 @@ module.exports = function(eleventyConfig) {
|
|||
ready: async (err, browserSync) => {
|
||||
const content_404 = await fs.readFile('_site/404.html')
|
||||
|
||||
browserSync.addMiddleware("*", (req, res) => {
|
||||
browserSync.addMiddleware('*', (req, res) => {
|
||||
// Provides the 404 content without redirect.
|
||||
res.writeHead(404, {"Content-Type": "text/html charset=UTF-8"})
|
||||
res.writeHead(404, {
|
||||
'Content-Type': 'text/html charset=UTF-8' })
|
||||
res.write(content_404)
|
||||
res.end()
|
||||
})
|
||||
|
|
@ -118,11 +140,9 @@ module.exports = function(eleventyConfig) {
|
|||
})
|
||||
|
||||
return {
|
||||
// Control which files Eleventy will process
|
||||
// e.g.: *.md, *.njk, *.html, *.liquid
|
||||
templateFormats: [
|
||||
"md",
|
||||
"njk",
|
||||
'md',
|
||||
'njk',
|
||||
'html',
|
||||
'liquid',
|
||||
'css',
|
||||
|
|
|
|||
Loading…
Reference in New Issue