From 55326dab7dedec6567f12c77c5fc33e3e37bf52d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Thu, 29 Aug 2024 08:20:16 -0700 Subject: [PATCH] chore: improve minification --- .eleventy.js | 50 ++++++++++----------- config/events/index.js | 25 +++++++++-- package-lock.json | 4 +- package.json | 2 +- src/assets/scripts/index.js | 20 +++++++++ src/assets/scripts/text-toggle.js | 17 ------- src/pages/dynamic/music/artists/artist.html | 4 -- src/pages/dynamic/music/genre.html | 4 -- 8 files changed, 69 insertions(+), 57 deletions(-) delete mode 100644 src/assets/scripts/text-toggle.js diff --git a/.eleventy.js b/.eleventy.js index 6f511287..1cce19d6 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -22,7 +22,7 @@ const appVersion = require('./package.json').version export default async function (eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight) eleventyConfig.addPlugin(tablerIcons) - eleventyConfig.addPlugin(cssConfig) + if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.addPlugin(cssConfig) // quiet build output eleventyConfig.setQuietMode(true) @@ -92,33 +92,31 @@ export default async function (eleventyConfig) { eleventyConfig.addShortcode('currentYear', () => DateTime.now().year) // events - eleventyConfig.on('afterBuild', copyErrorPages) - eleventyConfig.on('afterBuild', minifyJsComponents) + if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', copyErrorPages) + if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', minifyJsComponents) // transforms - if (process.env.ELEVENTY_PRODUCTION) { - eleventyConfig.addTransform('html-minify', (content, path) => { - if (path && path.endsWith('.html')) { - return htmlmin.minify(content, { - collapseBooleanAttributes: true, - collapseWhitespace: true, - decodeEntities: true, - includeAutoGeneratedTags: false, - minifyCSS: true, - minifyJS: true, - minifyURLs: true, - noNewlinesBeforeTagClose: true, - quoteCharacter: '"', - removeComments: true, - sortAttributes: true, - sortClassName: true, - useShortDoctype: true, - processScripts: ['application/ld+json'], // minify JSON-LD scripts - }) - } - return content - }) - } + if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.addTransform('html-minify', (content, path) => { + if (path && path.endsWith('.html')) { + return htmlmin.minify(content, { + collapseBooleanAttributes: true, + collapseWhitespace: true, + decodeEntities: true, + includeAutoGeneratedTags: false, + minifyCSS: true, + minifyJS: true, + minifyURLs: true, + noNewlinesBeforeTagClose: true, + quoteCharacter: '"', + removeComments: true, + sortAttributes: true, + sortClassName: true, + useShortDoctype: true, + processScripts: ['application/ld+json'], // minify JSON-LD scripts + }) + } + return content + }) return { passthroughFileCopy: true, diff --git a/config/events/index.js b/config/events/index.js index 1b0d3b81..50d48609 100644 --- a/config/events/index.js +++ b/config/events/index.js @@ -32,6 +32,7 @@ export const copyErrorPages = () => { export const minifyJsComponents = async () => { const scriptsDir = '_site/assets/scripts' + let combinedJs = '' const minifyJsFilesInDir = async (dir) => { const files = fs.readdirSync(dir) @@ -40,15 +41,33 @@ export const minifyJsComponents = async () => { const stat = fs.statSync(filePath) if (stat.isDirectory()) { - await minifyJsFilesInDir(filePath) + if (fileName === 'components') { + const componentFiles = fs.readdirSync(filePath) + for (const componentFile of componentFiles) { + const componentFilePath = path.join(filePath, componentFile) + if (componentFile.endsWith('.js')) { + const componentContent = fs.readFileSync(componentFilePath, 'utf8') + const minified = await minify(componentContent) + fs.writeFileSync(componentFilePath, minified.code) + } + } + } else { + await minifyJsFilesInDir(filePath) + } } else if (fileName.endsWith('.js')) { - const minified = await minify(fs.readFileSync(filePath, 'utf8')) + const fileContent = fs.readFileSync(filePath, 'utf8') + const minified = await minify(fileContent) fs.writeFileSync(filePath, minified.code) + combinedJs += minified.code + ';\n' } else { - console.log(`⚠ No .js file to minify in ${filePath}`) + console.log(`⚠ No .js files to minify in ${filePath}`) } } } await minifyJsFilesInDir(scriptsDir) + const outputFilePath = path.join(scriptsDir, 'index.js') + fs.writeFileSync(outputFilePath, combinedJs) + + console.log(`Combined and minified .js files into ${outputFilePath}`) } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b34717b2..29d1dfcb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "24.3.1", + "version": "24.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "24.3.1", + "version": "24.3.2", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.5.0", diff --git a/package.json b/package.json index 46c2ff3c..132605de 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "24.3.1", + "version": "24.3.2", "description": "The source for my personal site. Built using 11ty (and other tools).", "type": "module", "scripts": { diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index 20cbecef..d29f1432 100644 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -40,4 +40,24 @@ window.addEventListener('load', () => { } }) })() + + ;(() => { + const button = document.querySelector('[data-toggle-button]') + const content = document.querySelector('[data-toggle-content]') + const text = document.querySelectorAll('[data-toggle-content] p') + const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css + const interiorHeight = Array.from(text).reduce((acc, node) => acc + node.scrollHeight, 0) + + if (!button || !content || !text) return + + if (interiorHeight < minHeight) { + content.classList.remove('text-toggle-hidden') + button.style.display = 'none' + } + + button.addEventListener('click', () => { + const isHidden = content.classList.toggle('text-toggle-hidden') + button.textContent = isHidden ? 'Show more' : 'Show less' + }) + }) }) \ No newline at end of file diff --git a/src/assets/scripts/text-toggle.js b/src/assets/scripts/text-toggle.js deleted file mode 100644 index 04e71da3..00000000 --- a/src/assets/scripts/text-toggle.js +++ /dev/null @@ -1,17 +0,0 @@ -window.addEventListener('load', () => { - const button = document.querySelector('[data-toggle-button]') - const content = document.querySelector('[data-toggle-content]') - const text = document.querySelectorAll('[data-toggle-content] p') - const minHeight = 500 // this needs to match the height set on [data-toggle-content].text-toggle-hidden in text-toggle.css - const interiorHeight = Array.from(text).reduce((acc, node) => acc + node.scrollHeight, 0) - - if (interiorHeight < minHeight) { - content.classList.remove('text-toggle-hidden') - button.style.display = 'none' - } - - button.addEventListener('click', () => { - const isHidden = content.classList.toggle('text-toggle-hidden') - button.textContent = isHidden ? 'Show more' : 'Show less' - }) -}) \ No newline at end of file diff --git a/src/pages/dynamic/music/artists/artist.html b/src/pages/dynamic/music/artists/artist.html index 2fa3080d..4e81935e 100644 --- a/src/pages/dynamic/music/artists/artist.html +++ b/src/pages/dynamic/music/artists/artist.html @@ -11,9 +11,6 @@ schema: artist {%- capture alt -%} {{ artist.name }} / {{ artist.country }} {%- endcapture -%} -{%- capture js -%} - {% render "../../../../assets/scripts/text-toggle.js" %} -{%- endcapture -%} {%- capture playLabel -%} {%- if artist.totalPlays == 1 -%} play @@ -21,7 +18,6 @@ schema: artist plays {%- endif -%} {%- endcapture -%} - {% tablericon "arrow-left" "Go back to the music index page" %} Back to music
diff --git a/src/pages/dynamic/music/genre.html b/src/pages/dynamic/music/genre.html index fbea350f..badec0b6 100644 --- a/src/pages/dynamic/music/genre.html +++ b/src/pages/dynamic/music/genre.html @@ -17,10 +17,6 @@ schema: genre {% endif %} {%- endcapture -%} {%- assign mediaLinks = genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 -%} -{%- capture js -%} - {% render "../../../assets/scripts/text-toggle.js" %} -{%- endcapture -%} - {% tablericon "arrow-left" "Go back to the music index page" %} Back to music

{{ genre.name }}