From b6fb54ab983fa823889dc3e1782249de2be91956 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Sun, 10 Dec 2023 20:37:18 -0800 Subject: [PATCH] chore: clean up config + file structure --- .eleventy.js | 113 +++--------------- config/dateFilters.js | 44 ------- config/feedFilters.js | 31 ----- config/filters.js | 102 ---------------- config/filters/index.js | 210 +++++++++++++++++++++++++++++++++ config/mediaFilters.js | 36 ------ config/shortcodes/img/index.js | 70 +++++++++++ config/shortcodes/index.js | 4 + package.json | 2 +- 9 files changed, 300 insertions(+), 312 deletions(-) delete mode 100644 config/dateFilters.js delete mode 100644 config/feedFilters.js delete mode 100644 config/filters.js create mode 100644 config/filters/index.js delete mode 100644 config/mediaFilters.js create mode 100644 config/shortcodes/img/index.js create mode 100644 config/shortcodes/index.js diff --git a/.eleventy.js b/.eleventy.js index 8b66b736..4e805f34 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -3,100 +3,38 @@ const tablerIcons = require('eleventy-plugin-tabler-icons') 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 pluginRss = require('@11ty/eleventy-plugin-rss') -const outdent = require('outdent') -const Image = require('@11ty/eleventy-img') const embedYouTube = require('eleventy-plugin-youtube-embed') + const markdownIt = require('markdown-it') const markdownItAnchor = require('markdown-it-anchor') const markdownItFootnote = require('markdown-it-footnote') -const filters = require('./config/filters.js') -const dateFilters = require('./config/dateFilters.js') -const mediaFilters = require('./config/mediaFilters.js') -const feedFilters = require('./config/feedFilters.js') + +const filters = require('./config/filters/index.js') + const CleanCSS = require('clean-css') -const now = String(Date.now()) const { execSync } = require('child_process') + const tagAliases = require('./src/_data/json/tag-aliases.json') // load .env require('dotenv-flow').config() -const imageShortcode = async ( - src, - alt, - className = undefined, - loading = 'lazy', - widths = [75, 150, 300, 600, 900, 1200], - formats = ['webp', 'jpeg'], - sizes = '100vw' -) => { - const imageMetadata = await Image(src, { - widths: [...widths, null], - formats: [...formats, null], - outputDir: './_site/assets/img/cache/', - urlPath: '/assets/img/cache/', - }) +/** + * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig + */ - const stringifyAttributes = (attributeMap) => { - return Object.entries(attributeMap) - .map(([attribute, value]) => { - if (typeof value === 'undefined') return '' - return `${attribute}="${value}"` - }) - .join(' ') - } +const packageVersion = require('./package.json').version - const sourceHtmlString = Object.values(imageMetadata) - .map((images) => { - const { sourceType } = images[0] - const sourceAttributes = stringifyAttributes({ - type: sourceType, - srcset: images.map((image) => image.srcset).join(', '), - sizes, - }) - - return `` - }) - .join('\n') - - const getLargestImage = (format) => { - const images = imageMetadata[format] - return images[images.length - 1] - } - - const largestUnoptimizedImg = getLargestImage(formats[0]) - const imgAttributes = stringifyAttributes({ - src: largestUnoptimizedImg.url, - width: largestUnoptimizedImg.width, - height: largestUnoptimizedImg.height, - alt, - loading, - decoding: 'async', - }) - - const imgHtmlString = `` - const pictureAttributes = stringifyAttributes({ - class: className, - }) - - const picture = ` - ${sourceHtmlString} - ${imgHtmlString} - ` - - return outdent`${picture}` -} +// module import shortcodes +const { img } = require('./config/shortcodes/index.js') module.exports = function (eleventyConfig) { - // plugins eleventyConfig.addPlugin(syntaxHighlight) eleventyConfig.addPlugin(tablerIcons) eleventyConfig.addPlugin(pluginUnfurl) eleventyConfig.addPlugin(pluginFilesMinifier) eleventyConfig.addPlugin(schema) - eleventyConfig.addPlugin(eleventyImagePlugin) eleventyConfig.addPlugin(embedYouTube, { modestBranding: true, lite: { @@ -120,7 +58,7 @@ module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy('_redirects') // shortcodes - eleventyConfig.addShortcode('version', () => now) + eleventyConfig.addShortcode('version', () => packageVersion) // enable merging of tags eleventyConfig.setDataDeepMerge(true) @@ -181,41 +119,20 @@ module.exports = function (eleventyConfig) { md.use(markdownItFootnote) eleventyConfig.setLibrary('md', md) - // markdown filter eleventyConfig.addLiquidFilter('markdown', (content) => { if (!content) return return md.render(content) }) - // filters Object.keys(filters).forEach((filterName) => { eleventyConfig.addLiquidFilter(filterName, filters[filterName]) }) - - // date filters - Object.keys(dateFilters).forEach((filterName) => { - eleventyConfig.addLiquidFilter(filterName, dateFilters[filterName]) - }) - - // media filters - Object.keys(mediaFilters).forEach((filterName) => { - eleventyConfig.addLiquidFilter(filterName, mediaFilters[filterName]) - }) - - // feed filters - Object.keys(feedFilters).forEach((filterName) => { - eleventyConfig.addLiquidFilter(filterName, feedFilters[filterName]) - }) - - // css filters - eleventyConfig.addFilter('cssmin', (code) => new CleanCSS({}).minify(code).styles) - - // rss filters eleventyConfig.addLiquidFilter('dateToRfc822', pluginRss.dateToRfc822) eleventyConfig.addLiquidFilter('absoluteUrl', pluginRss.absoluteUrl) - // image shortcode - eleventyConfig.addShortcode('image', imageShortcode) + eleventyConfig.addFilter('cssmin', (code) => new CleanCSS({}).minify(code).styles) + + eleventyConfig.addShortcode('image', img) eleventyConfig.on('eleventy.after', () => { execSync(`npx pagefind --site _site --glob "**/*.html"`, { encoding: 'utf-8' }) diff --git a/config/dateFilters.js b/config/dateFilters.js deleted file mode 100644 index ba4c44d0..00000000 --- a/config/dateFilters.js +++ /dev/null @@ -1,44 +0,0 @@ -const { DateTime } = require('luxon') - -module.exports = { - readableDate: (date) => { - return DateTime.fromISO(date).toFormat('LLLL d, yyyy') - }, - toDateTime: (date) => { - const formatted = DateTime.fromISO(date) - - const trail = (number) => { - return parseInt(number, 10) < 10 ? `0${number}` : number - } - - return `${formatted.year}-${trail(formatted.month)}-${trail(formatted.day)} ${trail( - formatted.hour - )}:${trail(formatted.minute)}` - }, - toDateTimeFromUnix: (date) => { - const formatted = DateTime.fromSeconds(parseInt(date, 10)) - - const trail = (number) => { - return parseInt(number, 10) < 10 ? `0${number}` : number - } - - return `${trail(formatted.month)}.${trail(formatted.day)}.${formatted.year} ${trail( - formatted.hour - )}:${trail(formatted.minute)}` - }, - isoDateOnly: (date) => { - let d = new Date(date) - let month = '' + (d.getMonth() + 1) - let day = '' + d.getDate() - let year = d.getFullYear() - - if (month.length < 2) month = '0' + month - if (day.length < 2) day = '0' + day - - return [month, day, year].join('.') - }, - stringToDate: (string) => { - if (!string) return - return new Date(string) - }, -} diff --git a/config/feedFilters.js b/config/feedFilters.js deleted file mode 100644 index b4cb21e6..00000000 --- a/config/feedFilters.js +++ /dev/null @@ -1,31 +0,0 @@ -const markdownIt = require('markdown-it') - -const { URL } = require('url') -const BASE_URL = 'https://coryd.dev' - -module.exports = { - normalizeEntries: (entries) => { - const md = markdownIt({ html: true, linkify: true }) - const posts = [] - entries.forEach((entry) => { - const dateKey = Object.keys(entry).find((key) => key.includes('date')) - const date = new Date(entry[dateKey]) - let excerpt = '' - - // set the entry excerpt - if (entry.description) excerpt = entry.description - if (entry.data?.post_excerpt) excerpt = md.render(entry.data.post_excerpt) - - // if there's a valid entry return a normalized object - if (entry) - posts.push({ - title: entry.data?.title || entry.title, - url: entry.url.includes('http') ? entry.url : new URL(entry.url, BASE_URL).toString(), - content: entry.description, - date, - excerpt, - }) - }) - return posts - }, -} diff --git a/config/filters.js b/config/filters.js deleted file mode 100644 index d05f08be..00000000 --- a/config/filters.js +++ /dev/null @@ -1,102 +0,0 @@ -const marked = require('marked') -const sanitizeHTML = require('sanitize-html') - -const utmPattern = /[?&](utm_[^&=]+=[^&#]*)/gi -const BASE_URL = 'https://coryd.dev' - -module.exports = { - trim: (string, limit) => { - return string.length <= limit ? string : `${string.slice(0, limit)}...` - }, - stripIndex: (path) => { - return path.replace('/index.html', '/') - }, - mdToHtml: (content) => { - return marked.parse(content) - }, - btoa: (string) => { - return btoa(string) - }, - dashLower: (string) => string.replace(/\s+/g, '-').toLowerCase(), - encodeAmp: (string) => { - if (!string) return - const pattern = /&(?!(?:[a-zA-Z]+|#[0-9]+|#x[0-9a-fA-F]+);)/g - const replacement = '&' - return string.replace(pattern, replacement) - }, - stripUtm: (string) => { - if (!string) return - return string.replace(utmPattern, '') - }, - getPostImage: (image) => { - if (image && image !== '') return image - return `${BASE_URL}/assets/img/social-card.jpg` - }, - getPopularPosts: (posts, analytics) => { - return posts - .filter((post) => { - if (analytics.find((p) => p.page === post.url)) return true - }) - .sort((a, b) => { - const visitors = (page) => analytics.filter((p) => p.page === page.url).pop().visitors - return visitors(b) - visitors(a) - }) - }, - tagLookup: (url, tagMap) => { - if (!url) return - if (url.includes('thestorygraph.com')) return '#Books #NowReading #TheStoryGraph' - if (url.includes('trakt.tv')) return '#Movies #Watching #Trakt' - return tagMap[url] || '' - }, - webmentionsByUrl: (webmentions, url) => { - const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of'] - - const data = { - 'like-of': [], - 'repost-of': [], - 'in-reply-to': [], - 'mention-of': [], - 'link-to': [], - } - - const hasRequiredReplyFields = (entry) => { - const { author, published, content } = entry - return author.name && author.photo && published && content - } - - const hasRequiredMentionFields = (entry) => { - const { name, url } = entry - return name && url - } - - const filtered = - webmentions - .filter((entry) => entry['wm-target'] === `${BASE_URL}${url}`) - .filter((entry) => allowedTypes.includes(entry['wm-property'])) || [] - - filtered.forEach((m) => { - if (data[m['wm-property']]) { - const isReply = m['wm-property'] === 'in-reply-to' - const isMention = m['wm-property'] === 'mention-of' - const isValidReply = (isReply || isMention) && hasRequiredReplyFields(m) - if (isReply || isMention) { - if (isValidReply) { - m.sanitized = sanitizeHTML(m.content.html) - data[m['wm-property']].unshift(m) - } - - if (isMention && hasRequiredMentionFields(m)) data['link-to'].push(m) - return - } - data[m['wm-property']].unshift(m) - } - }) - - data['in-reply-to'] = [...data['in-reply-to'], ...data['mention-of']] - data['in-reply-to'].sort((a, b) => - a.published > b.published ? 1 : b.published > a.published ? -1 : 0 - ) - - return data - }, -} diff --git a/config/filters/index.js b/config/filters/index.js new file mode 100644 index 00000000..640e1d75 --- /dev/null +++ b/config/filters/index.js @@ -0,0 +1,210 @@ +const { DateTime } = require('luxon') +const markdownIt = require('markdown-it') +const { URL } = require('url') +const marked = require('marked') +const sanitizeHTML = require('sanitize-html') + +const utmPattern = /[?&](utm_[^&=]+=[^&#]*)/gi +const BASE_URL = 'https://coryd.dev' + +module.exports = { + // general + trim: (string, limit) => { + return string.length <= limit ? string : `${string.slice(0, limit)}...` + }, + stripIndex: (path) => { + return path.replace('/index.html', '/') + }, + mdToHtml: (content) => { + return marked.parse(content) + }, + btoa: (string) => { + return btoa(string) + }, + dashLower: (string) => string.replace(/\s+/g, '-').toLowerCase(), + encodeAmp: (string) => { + if (!string) return + const pattern = /&(?!(?:[a-zA-Z]+|#[0-9]+|#x[0-9a-fA-F]+);)/g + const replacement = '&' + return string.replace(pattern, replacement) + }, + stripUtm: (string) => { + if (!string) return + return string.replace(utmPattern, '') + }, + getPostImage: (image) => { + if (image && image !== '') return image + return `${BASE_URL}/assets/img/social-card.jpg` + }, + getPopularPosts: (posts, analytics) => { + return posts + .filter((post) => { + if (analytics.find((p) => p.page === post.url)) return true + }) + .sort((a, b) => { + const visitors = (page) => analytics.filter((p) => p.page === page.url).pop().visitors + return visitors(b) - visitors(a) + }) + }, + tagLookup: (url, tagMap) => { + if (!url) return + if (url.includes('thestorygraph.com')) return '#Books #NowReading #TheStoryGraph' + if (url.includes('trakt.tv')) return '#Movies #Watching #Trakt' + return tagMap[url] || '' + }, + webmentionsByUrl: (webmentions, url) => { + const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of'] + + const data = { + 'like-of': [], + 'repost-of': [], + 'in-reply-to': [], + 'mention-of': [], + 'link-to': [], + } + + const hasRequiredReplyFields = (entry) => { + const { author, published, content } = entry + return author.name && author.photo && published && content + } + + const hasRequiredMentionFields = (entry) => { + const { name, url } = entry + return name && url + } + + const filtered = + webmentions + .filter((entry) => entry['wm-target'] === `${BASE_URL}${url}`) + .filter((entry) => allowedTypes.includes(entry['wm-property'])) || [] + + filtered.forEach((m) => { + if (data[m['wm-property']]) { + const isReply = m['wm-property'] === 'in-reply-to' + const isMention = m['wm-property'] === 'mention-of' + const isValidReply = (isReply || isMention) && hasRequiredReplyFields(m) + if (isReply || isMention) { + if (isValidReply) { + m.sanitized = sanitizeHTML(m.content.html) + data[m['wm-property']].unshift(m) + } + + if (isMention && hasRequiredMentionFields(m)) data['link-to'].push(m) + return + } + data[m['wm-property']].unshift(m) + } + }) + + data['in-reply-to'] = [...data['in-reply-to'], ...data['mention-of']] + data['in-reply-to'].sort((a, b) => + a.published > b.published ? 1 : b.published > a.published ? -1 : 0 + ) + + return data + }, + + // dates + readableDate: (date) => { + return DateTime.fromISO(date).toFormat('LLLL d, yyyy') + }, + toDateTime: (date) => { + const formatted = DateTime.fromISO(date) + + const trail = (number) => { + return parseInt(number, 10) < 10 ? `0${number}` : number + } + + return `${formatted.year}-${trail(formatted.month)}-${trail(formatted.day)} ${trail( + formatted.hour + )}:${trail(formatted.minute)}` + }, + toDateTimeFromUnix: (date) => { + const formatted = DateTime.fromSeconds(parseInt(date, 10)) + + const trail = (number) => { + return parseInt(number, 10) < 10 ? `0${number}` : number + } + + return `${trail(formatted.month)}.${trail(formatted.day)}.${formatted.year} ${trail( + formatted.hour + )}:${trail(formatted.minute)}` + }, + isoDateOnly: (date) => { + let d = new Date(date) + let month = '' + (d.getMonth() + 1) + let day = '' + d.getDate() + let year = d.getFullYear() + + if (month.length < 2) month = '0' + month + if (day.length < 2) day = '0' + day + + return [month, day, year].join('.') + }, + stringToDate: (string) => { + if (!string) return + return new Date(string) + }, + + // feeds + normalizeEntries: (entries) => { + const md = markdownIt({ html: true, linkify: true }) + const posts = [] + entries.forEach((entry) => { + const dateKey = Object.keys(entry).find((key) => key.includes('date')) + const date = new Date(entry[dateKey]) + let excerpt = '' + + // set the entry excerpt + if (entry.description) excerpt = entry.description + if (entry.data?.post_excerpt) excerpt = md.render(entry.data.post_excerpt) + + // if there's a valid entry return a normalized object + if (entry) + posts.push({ + title: entry.data?.title || entry.title, + url: entry.url.includes('http') ? entry.url : new URL(entry.url, BASE_URL).toString(), + content: entry.description, + date, + excerpt, + }) + }) + return posts + }, + + // media + normalizeMedia: (media) => + media.map((item) => { + let normalized = { + image: item['image'], + url: item['url'], + } + if (item.type === 'album') { + normalized['title'] = item['title'] + normalized['alt'] = `${item['title']} by ${item['artist']}` + normalized['subtext'] = `${item['artist']}` + } + if (item.type === 'artist') { + normalized['title'] = item['title'] + normalized['alt'] = `${item['plays']} plays of ${item['title']}` + normalized['subtext'] = `${item['plays']} plays` + } + if (item.type === 'movie') normalized['alt'] = item['title'] + if (item.type === 'book') { + normalized['alt'] = `${item['title']} by ${item['author']}` + normalized['subtext'] = `${item['percentage']} finished` + normalized['percentage'] = item['percentage'] + } + if (item.type === 'tv') { + normalized['title'] = item['title'] + normalized['alt'] = `${item['title']} from ${item['name']}` + normalized['subtext'] = item['subtext'] + } + if (item.type === 'tv-range') { + normalized['title'] = item['name'] + normalized['alt'] = `${item['subtext']} from ${item['name']}` + normalized['subtext'] = item['subtext'] + } + return normalized + }), +} diff --git a/config/mediaFilters.js b/config/mediaFilters.js deleted file mode 100644 index f88f65f1..00000000 --- a/config/mediaFilters.js +++ /dev/null @@ -1,36 +0,0 @@ -module.exports = { - normalizeMedia: (media) => - media.map((item) => { - let normalized = { - image: item['image'], - url: item['url'], - } - if (item.type === 'album') { - normalized['title'] = item['title'] - normalized['alt'] = `${item['title']} by ${item['artist']}` - normalized['subtext'] = `${item['artist']}` - } - if (item.type === 'artist') { - normalized['title'] = item['title'] - normalized['alt'] = `${item['plays']} plays of ${item['title']}` - normalized['subtext'] = `${item['plays']} plays` - } - if (item.type === 'movie') normalized['alt'] = item['title'] - if (item.type === 'book') { - normalized['alt'] = `${item['title']} by ${item['author']}` - normalized['subtext'] = `${item['percentage']} finished` - normalized['percentage'] = item['percentage'] - } - if (item.type === 'tv') { - normalized['title'] = item['title'] - normalized['alt'] = `${item['title']} from ${item['name']}` - normalized['subtext'] = item['subtext'] - } - if (item.type === 'tv-range') { - normalized['title'] = item['name'] - normalized['alt'] = `${item['subtext']} from ${item['name']}` - normalized['subtext'] = item['subtext'] - } - return normalized - }), -} diff --git a/config/shortcodes/img/index.js b/config/shortcodes/img/index.js new file mode 100644 index 00000000..956684fc --- /dev/null +++ b/config/shortcodes/img/index.js @@ -0,0 +1,70 @@ +const outdent = require('outdent') +const Image = require('@11ty/eleventy-img') + +const img = async ( + src, + alt, + className = undefined, + loading = 'lazy', + widths = [75, 150, 300, 600, 900, 1200], + formats = ['webp', 'jpeg'], + sizes = '100vw' +) => { + const imageMetadata = await Image(src, { + widths: [...widths, null], + formats: [...formats, null], + outputDir: './_site/assets/img/cache/', + urlPath: '/assets/img/cache/', + }) + + const stringifyAttributes = (attributeMap) => { + return Object.entries(attributeMap) + .map(([attribute, value]) => { + if (typeof value === 'undefined') return '' + return `${attribute}="${value}"` + }) + .join(' ') + } + + const sourceHtmlString = Object.values(imageMetadata) + .map((images) => { + const { sourceType } = images[0] + const sourceAttributes = stringifyAttributes({ + type: sourceType, + srcset: images.map((image) => image.srcset).join(', '), + sizes, + }) + + return `` + }) + .join('\n') + + const getLargestImage = (format) => { + const images = imageMetadata[format] + return images[images.length - 1] + } + + const largestUnoptimizedImg = getLargestImage(formats[0]) + const imgAttributes = stringifyAttributes({ + src: largestUnoptimizedImg.url, + width: largestUnoptimizedImg.width, + height: largestUnoptimizedImg.height, + alt, + loading, + decoding: 'async', + }) + + const imgHtmlString = `` + const pictureAttributes = stringifyAttributes({ + class: className, + }) + + const picture = ` + ${sourceHtmlString} + ${imgHtmlString} + ` + + return outdent`${picture}` +} + +module.exports = img diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js new file mode 100644 index 00000000..fd426a15 --- /dev/null +++ b/config/shortcodes/index.js @@ -0,0 +1,4 @@ +const img = require('./img') +module.exports = { + img, +} diff --git a/package.json b/package.json index 7cccf761..1defaa3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "2.5.1", + "version": "2.5.3", "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.", "main": "index.html", "scripts": {