feat: Added anchor links, refactored config file

This commit is contained in:
Keith Irwin 2023-11-01 10:32:36 -06:00
parent b6cb9e9d66
commit 1a4cec4f01
Signed by: ki9
GPG Key ID: DF773B3F4A88DA86
4 changed files with 255 additions and 189 deletions

View File

@ -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;
}

View File

@ -5,235 +5,253 @@ 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
const IMAGE_SIZES = [300, 600, 900, 1200]
const dirs ={
input: '_src',
includes: '_includes',
data: '_data',
output: '_site',
input: '_src',
includes: '_includes',
data: '_data',
output: '_site',
}
module.exports = (eleventyConfig) => {
eleventyConfig.setServerOptions({
liveReload: false,
})
eleventyConfig.setServerOptions({
liveReload: false,
})
// Add plugins
eleventyConfig.addPlugin(pluginRss)
eleventyConfig.addPlugin(pluginSyntaxHighlight)
eleventyConfig.addPlugin(pluginNavigation)
// Add plugins
eleventyConfig.addPlugin(pluginRss)
eleventyConfig.addPlugin(pluginSyntaxHighlight)
eleventyConfig.addPlugin(pluginNavigation)
// https://www.11ty.dev/docs/data-deep-merge/
eleventyConfig.setDataDeepMerge(true)
// https://www.11ty.dev/docs/data-deep-merge/
eleventyConfig.setDataDeepMerge(true)
// Alias `layout: post` to `layout: layouts/post.njk`
eleventyConfig.addLayoutAlias('post', 'layouts/post.njk')
// 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')
})
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
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) =>
(n<0)? array.slice(n) : array.slice(0, n)
)
// Get the first `n` elements of a collection.
eleventyConfig.addFilter('head', (array, n) =>
(n<0)? array.slice(n): array.slice(0, n)
)
// Sanitize out apostrophes
eleventyConfig.addFilter('noApostrophes', (str) =>
str.replace(/['"]+/g,'')
)
// Sanitize out apostrophes
eleventyConfig.addFilter('noApostrophes', (str) =>
str.replace(/['"]+/g,'')
)
// Return the smallest number argument
eleventyConfig.addFilter('min', (...numbers) =>
Math.min.apply(null, numbers)
)
// Return the smallest number argument
eleventyConfig.addFilter('min', (...numbers) =>
Math.min.apply(null, numbers)
)
eleventyConfig.addFilter('toFixed', (num,digits) =>
num? num.toFixed(digits) : ''
)
eleventyConfig.addFilter('toFixed', (num,digits) =>
num? num.toFixed(digits) : ''
)
eleventyConfig.addFilter('srintegrity', async (asset,bits=256) =>
`sha${String(bits)}-` +
createHash(`sha${String(bits)}`)
.update(await fs.readFile(`${dirs.input}${asset}`))
.digest('base64')
)
eleventyConfig.addFilter('srintegrity', async (asset,bits=256) =>
`sha${String(bits)}-` +
createHash(`sha${String(bits)}`)
.update(await fs.readFile(`${dirs.input}${asset}`))
.digest('base64')
)
eleventyConfig.addFilter('filterCatList', cats =>
// should match the list in categories.njk
(cats || []).filter(cat => ['all','nav','post','posts'].indexOf(cat) === -1)
)
eleventyConfig.addFilter('filterTagList', tags =>
// should match the list in tags.njk
(tags || []).filter(tag => ['all','nav','post','posts'].indexOf(tag) === -1)
)
eleventyConfig.addFilter('filterCatList', cats =>
// should match the list in categories.njk
(cats || []).filter(cat => ['all','nav','post','posts'].indexOf(cat) === -1)
)
eleventyConfig.addFilter('filterTagList', tags =>
// should match the list in tags.njk
(tags || []).filter(tag => ['all','nav','post','posts'].indexOf(tag) === -1)
)
eleventyConfig.addFilter('dimsToVol', (dims) => { return {
in3: Object.values(dims.in).reduce((a,c) => a*c, 1)
} } )
eleventyConfig.addFilter('dimsToVol', (dims) => { return {
in3: Object.values(dims.in).reduce((a,c) => a*c, 1)
} } )
// Create an array of all tags
eleventyConfig.addCollection('tagList', function(collection) {
let tagSet = new Set()
collection.getAll().forEach(item => {
(item.data.tags || []).forEach(tag => tagSet.add(tag))
});
// Create an array of all tags
eleventyConfig.addCollection('tagList', function(collection) {
let tagSet = new Set()
collection.getAll().forEach(item => {
(item.data.tags || []).forEach(tag => tagSet.add(tag))
});
return [...tagSet];
})
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})
eleventyConfig.addPairedShortcode('md', (content) =>
mdFilter.render(content) )
// Markdown "md" filter for nunjucks
// https://github.com/11ty/eleventy/issues/658#issuecomment-599173643
const mdFilter = new markdownIt({html:true})
eleventyConfig.addPairedShortcode('md', (content) =>
mdFilter.render(content) )
// Override Browsersync defaults (used only with --serve)
eleventyConfig.setBrowserSyncConfig({
callbacks: {
ready: function(err, browserSync) {
const content_404 = fs.readFileSync('_site/404.html')
// Override Browsersync defaults (used only with --serve)
eleventyConfig.setBrowserSyncConfig({
callbacks: {
ready: function(err, browserSync) {
const content_404 = fs.readFileSync('_site/404.html')
browserSync.addMiddleware('*', (req, res) => {
// Provides the 404 content without redirect.
res.writeHead(404, {
'Content-Type': 'text/html; charset=UTF-8' })
res.write(content_404)
res.end()
});
},
},
ui: false,
ghostMode: false,
})
eleventyConfig.addPassthroughCopy('_src/assets/fonts')
eleventyConfig.addPassthroughCopy('_src/assets/base.css')
eleventyConfig.addPassthroughCopy('_src/assets/shop.css')
eleventyConfig.addPassthroughCopy('_src/assets/site.webmanifest')
eleventyConfig.addPassthroughCopy('_src/assets/scripts')
browserSync.addMiddleware('*', (req, res) => {
// Provides the 404 content without redirect.
res.writeHead(404, {'Content-Type': 'text/html; charset=UTF-8'})
res.write(content_404)
res.end()
});
},
},
ui: false,
ghostMode: false,
})
eleventyConfig.addPassthroughCopy('_src/assets/fonts')
eleventyConfig.addPassthroughCopy('_src/assets/base.css')
eleventyConfig.addPassthroughCopy('_src/assets/shop.css')
eleventyConfig.addPassthroughCopy('_src/assets/site.webmanifest')
eleventyConfig.addPassthroughCopy('_src/assets/scripts')
// Optimized images
// https://www.11ty.dev/docs/plugins/image/#make-your-own-markup
eleventyConfig.addShortcode('image', async (src, alt) => {
const metadata = await pluginImage(`./_src${src}`, {
widths: [...IMAGE_SIZES, 'auto'],
formats: ['auto', 'webp', 'avif'],
// https://www.11ty.dev/docs/plugins/image/#custom-filenames
filenameFormat: (id, src, width, format) =>
`${path.basename(src,path.extname(src))}-${width}w.${format}`,
// https://alexpeterhall.com/blog/2021/04/05/responsive-images-eleventy/#eleventy-configuration
urlPath: path.dirname(src),
outputDir: `_site/${path.dirname(src)}`,
})
const lowsrc = metadata.webp[0]
const highsrc = metadata.webp[metadata.webp.length - 1]
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>`
})
// Resize images
// https://www.11ty.dev/docs/plugins/image/#make-your-own-markup
eleventyConfig.addShortcode("image", async (src, alt='') => {
if (alt==='') alt = path.basename(src)
const metadata = await pluginImage(`./_src${src}`, {
widths: [...IMAGE_SIZES, 'auto'],
formats: ['auto', 'webp', 'avif'],
// https://www.11ty.dev/docs/plugins/image/#custom-filenames
filenameFormat: (id, src, width, format) =>
`${path.basename(src,path.extname(src))}-${width}w.${format}`,
// https://alexpeterhall.com/blog/2021/04/05/responsive-images-eleventy/#eleventy-configuration
urlPath: path.dirname(src),
outputDir: `_site/${path.dirname(src)}`,
})
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>`
})
// 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>`
)
// Video shortcode
eleventyConfig.addShortcode('vid', (videoName) => `
<video controls width="100%">
<source src="${videoName}" type="video/${videoName.split('.').pop()}">
<a href="${videoName}">${videoName}</a>
</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>`
)
// 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>`)
// Audio embed
eleventyConfig.addShortcode('audio', (src, fmt) =>
`<audio controls><source src="${src}" type="audio/${fmt}">Embedded audio is not supported in this browser.</audio>`
)
// Products and categories collections
eleventyConfig.addCollection('products', async (ca) =>
ca.getFilteredByTag('product')
)
eleventyConfig.addCollection('featured', async (ca) =>
ca.getFilteredByTags('product', 'featured')
)
eleventyConfig.addCollection('computers', async (ca) =>
ca.getFilteredByTags('product', 'computer')
)
eleventyConfig.addCollection('desktops', async (ca) =>
ca.getFilteredByTags('product', 'computer', 'desktop')
)
eleventyConfig.addCollection('laptops', async (ca) =>
ca.getFilteredByTags('product', 'computer', 'laptop')
)
eleventyConfig.addCollection('all-in-ones', async (ca) =>
ca.getFilteredByTags('product', 'computer', 'all-in-one')
)
eleventyConfig.addCollection('phones', async (ca) =>
ca.getFilteredByTags('product', 'phone')
)
eleventyConfig.addCollection('routers', async (ca) =>
ca.getFilteredByTags('product', 'router')
)
eleventyConfig.addCollection('accessories', async (ca) =>
ca.getFilteredByTags('product', 'accessory')
)
// iFrame
eleventyConfig.addShortcode('iframe', (url, height) =>
`<iframe width="100%" height="${height}" src="${url}"</iframe>`
)
return {
// Control which files Eleventy will process
// e.g.: *.md, *.njk, *.html, *.liquid
templateFormats: [
'md',
'txt',
'njk',
'html',
'liquid',
'pdf',
'png',
'webp',
'jpg',
'svg',
'ico',
'gif',
'mp4',
],
// 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,
}))
// -----------------------------------------------------------------
// If your site deploys to a subdirectory, change `pathPrefix`.
// Dont worry about leading and trailing slashes, we normalize these.
// Products and categories collections
eleventyConfig.addCollection('products', async (ca) =>
ca.getFilteredByTag('product')
)
eleventyConfig.addCollection('featured', async (ca) =>
ca.getFilteredByTags('product', 'featured')
)
eleventyConfig.addCollection('computers', async (ca) =>
ca.getFilteredByTags('product', 'computer')
)
eleventyConfig.addCollection('desktops', async (ca) =>
ca.getFilteredByTags('product', 'computer', 'desktop')
)
eleventyConfig.addCollection('laptops', async (ca) =>
ca.getFilteredByTags('product', 'computer', 'laptop')
)
eleventyConfig.addCollection('all-in-ones', async (ca) =>
ca.getFilteredByTags('product', 'computer', 'all-in-one')
)
eleventyConfig.addCollection('phones', async (ca) =>
ca.getFilteredByTags('product', 'phone')
)
eleventyConfig.addCollection('routers', async (ca) =>
ca.getFilteredByTags('product', 'router')
)
eleventyConfig.addCollection('accessories', async (ca) =>
ca.getFilteredByTags('product', 'accessory')
)
// If you dont have a subdirectory, use '' or '/' (they do the same thing)
// This is only used for link URLs (it does not affect your file structure)
// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
return {
// Control which files Eleventy will process
// e.g.: *.md, *.njk, *.html, *.liquid
templateFormats: [
'md',
'txt',
'njk',
'html',
'liquid',
'pdf',
'png',
'webp',
'jpg',
'svg',
'ico',
'gif',
'mp4',
],
// You can also pass this in on the command line using `--pathprefix`
// -----------------------------------------------------------------
// If your site deploys to a subdirectory, change `pathPrefix`.
// Dont worry about leading and trailing slashes, we normalize these.
// Optional (default is shown)
pathPrefix: '/',
// -----------------------------------------------------------------
// If you dont have a subdirectory, use '' or '/' (they do the same thing)
// This is only used for link URLs (it does not affect your file structure)
// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
// Pre-process *.md files with: (default: `liquid`)
markdownTemplateEngine: 'njk',
// You can also pass this in on the command line using `--pathprefix`
// Pre-process *.html files with: (default: `liquid`)
htmlTemplateEngine: 'njk',
// Optional (default is shown)
pathPrefix: '/',
// -----------------------------------------------------------------
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
dataTemplateEngine: false,
// Pre-process *.md files with: (default: `liquid`)
markdownTemplateEngine: 'njk',
// Set at top
dir: dirs,
}
// Pre-process *.html files with: (default: `liquid`)
htmlTemplateEngine: 'njk',
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
dataTemplateEngine: false,
// Set at top
dir: dirs,
}
}

38
package-lock.json generated
View File

@ -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",

View File

@ -39,5 +39,8 @@
"markdown-it": "^13.0.1",
"nodemailer": "^6.9.1",
"stripe": "^11.13.0"
},
"devDependencies": {
"markdown-it-anchor": "^8.6.7"
}
}