feat: ✨ Added anchor links, refactored config file
This commit is contained in:
Keith Irwin
parent
b6cb9e9d66
commit
1a4cec4f01
GPG Key ID:
DF773B3F4A88DA86
|
|
@ -111,6 +111,13 @@ h1, h2, h3 {
|
|||
h4, h5, h6 {
|
||||
font-family: 'ubuntu', sans-serif;
|
||||
}
|
||||
.header-anchor {
|
||||
text-decoration: none;
|
||||
color: rgba(255,255,255,.75);
|
||||
}
|
||||
.header-anchor:hover {
|
||||
color: rgba(255,255,255,1)
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ const pluginRss = require('@11ty/eleventy-plugin-rss')
|
|||
const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
|
||||
const pluginNavigation = require('@11ty/eleventy-navigation')
|
||||
const markdownIt = require('markdown-it')
|
||||
const markdownItAnchor = require('markdown-it-anchor')
|
||||
const createHash = require('crypto').createHash
|
||||
const pluginImage = require('@11ty/eleventy-img')
|
||||
// Widths in pixels of responsive images to be generated
|
||||
|
|
@ -34,14 +35,14 @@ module.exports = (eleventyConfig) => {
|
|||
// Alias `layout: post` to `layout: layouts/post.njk`
|
||||
eleventyConfig.addLayoutAlias('post', 'layouts/post.njk')
|
||||
|
||||
eleventyConfig.addFilter('readableDate', dateObj => {
|
||||
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('dd LLL yyyy')
|
||||
})
|
||||
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) =>
|
||||
|
|
@ -92,14 +93,6 @@ module.exports = (eleventyConfig) => {
|
|||
return [...tagSet];
|
||||
})
|
||||
|
||||
// Customize Markdown library and settings:
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true
|
||||
})
|
||||
eleventyConfig.setLibrary('md', markdownLibrary)
|
||||
|
||||
// Markdown "md" filter for nunjucks
|
||||
// https://github.com/11ty/eleventy/issues/658#issuecomment-599173643
|
||||
const mdFilter = new markdownIt({html:true})
|
||||
|
|
@ -114,7 +107,8 @@ module.exports = (eleventyConfig) => {
|
|||
|
||||
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()
|
||||
});
|
||||
|
|
@ -130,10 +124,9 @@ module.exports = (eleventyConfig) => {
|
|||
eleventyConfig.addPassthroughCopy('_src/assets/site.webmanifest')
|
||||
eleventyConfig.addPassthroughCopy('_src/assets/scripts')
|
||||
|
||||
// Resize images
|
||||
// Optimized images
|
||||
// https://www.11ty.dev/docs/plugins/image/#make-your-own-markup
|
||||
eleventyConfig.addShortcode("image", async (src, alt='') => {
|
||||
if (alt==='') alt = path.basename(src)
|
||||
eleventyConfig.addShortcode('image', async (src, alt) => {
|
||||
const metadata = await pluginImage(`./_src${src}`, {
|
||||
widths: [...IMAGE_SIZES, 'auto'],
|
||||
formats: ['auto', 'webp', 'avif'],
|
||||
|
|
@ -146,20 +139,45 @@ module.exports = (eleventyConfig) => {
|
|||
})
|
||||
const lowsrc = metadata.webp[0]
|
||||
const highsrc = metadata.webp[metadata.webp.length - 1]
|
||||
return `<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>`
|
||||
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>`
|
||||
})
|
||||
|
||||
// Video shortcode
|
||||
eleventyConfig.addShortcode('vid', (videoName) => `
|
||||
<video controls width="100%">
|
||||
<source src="${videoName}" type="video/${videoName.split('.').pop()}">
|
||||
<a href="${videoName}">${videoName}</a>
|
||||
</video>`)
|
||||
// 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 shortcode
|
||||
eleventyConfig.addShortcode('yt', (shortCode) => `<iframe width="100%" height="400vh" src="https://www.youtube-nocookie.com/embed/${shortCode}" frameborder="0" allow="autoplay;clipboard-write;encrypted-media;picture-in-picture" allowfullscreen></iframe>`)
|
||||
// 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>`
|
||||
)
|
||||
|
||||
// Customize Markdown library and settings:
|
||||
eleventyConfig.setLibrary("md", markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
}).use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.headerLink(),
|
||||
level: [2, 3, 4, 5, 6],
|
||||
slugify: eleventyConfig.getFilter('slugify'),
|
||||
tabIndex: false,
|
||||
}))
|
||||
|
||||
// Products and categories collections
|
||||
eleventyConfig.addCollection('products', async (ca) =>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@
|
|||
"markdown-it": "^13.0.1",
|
||||
"nodemailer": "^6.9.1",
|
||||
"stripe": "^11.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"markdown-it-anchor": "^8.6.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/dependency-tree": {
|
||||
|
|
@ -332,6 +335,31 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/linkify-it": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.4.tgz",
|
||||
"integrity": "sha512-hPpIeeHb/2UuCw06kSNAOVWgehBLXEo0/fUs0mw3W2qhqX89PI2yvok83MnuctYGCPrabGIoi0fFso4DQ+sNUQ==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/markdown-it": {
|
||||
"version": "13.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.4.tgz",
|
||||
"integrity": "sha512-FAIUdEXrCDnQmAAmJC+UeW/3p0eCI4QZ/+W0lX/h83VD3v78IgTFYftjnAeXS8H0g4PFQCgipc51cQDA8tjgLw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/linkify-it": "*",
|
||||
"@types/mdurl": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/mdurl": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.4.tgz",
|
||||
"integrity": "sha512-ARVxjAEX5TARFRzpDRVC6cEk0hUIXCCwaMhz8y7S1/PxU6zZS1UMjyobz7q4w/D/R552r4++EhwmXK1N2rAy0A==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/minimatch": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
|
||||
|
|
@ -1994,6 +2022,16 @@
|
|||
"markdown-it": "bin/markdown-it.js"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it-anchor": {
|
||||
"version": "8.6.7",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz",
|
||||
"integrity": "sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@types/markdown-it": "*",
|
||||
"markdown-it": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it/node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -39,5 +39,8 @@
|
|||
"markdown-it": "^13.0.1",
|
||||
"nodemailer": "^6.9.1",
|
||||
"stripe": "^11.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"markdown-it-anchor": "^8.6.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue