chore: improve minification

.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)
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', copyErrorPages)
-  eleventyConfig.on('afterBuild', minifyJsComponents)
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', minifyJsComponents)
 
   // transforms
-  if (process.env.ELEVENTY_PRODUCTION) {
+  if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.addTransform('html-minify', (content, path) => {
-    eleventyConfig.addTransform('html-minify', (content, path) => {
+    if (path && path.endsWith('.html')) {
-      if (path && path.endsWith('.html')) {
+      return htmlmin.minify(content, {
-        return htmlmin.minify(content, {
+        collapseBooleanAttributes: true,
-          collapseBooleanAttributes: true,
+        collapseWhitespace: true,
-          collapseWhitespace: true,
+        decodeEntities: true,
-          decodeEntities: true,
+        includeAutoGeneratedTags: false,
-          includeAutoGeneratedTags: false,
+        minifyCSS: true,
-          minifyCSS: true,
+        minifyJS: true,
-          minifyJS: true,
+        minifyURLs: true,
-          minifyURLs: true,
+        noNewlinesBeforeTagClose: true,
-          noNewlinesBeforeTagClose: true,
+        quoteCharacter: '"',
-          quoteCharacter: '"',
+        removeComments: true,
-          removeComments: true,
+        sortAttributes: true,
-          sortAttributes: true,
+        sortClassName: true,
-          sortClassName: true,
+        useShortDoctype: true,
-          useShortDoctype: true,
+        processScripts: ['application/ld+json'], // minify JSON-LD scripts
-          processScripts: ['application/ld+json'], // minify JSON-LD scripts
+      })
-        })
+    }
-      }
+    return content
-      return content
+  })
-    })
-  }
 
   return {
     passthroughFileCopy: true,

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}`)
 }

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

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": {

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'
+    })
+  })
 })

src/assets/scripts/text-toggle.js

@@ -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'
-    })
-})

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 -%}
-<script>{{ js }}</script>
 <noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
 <a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <article class="artist-focus">

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 -%}
-<script>{{ js }}</script>
 <noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
 <a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <h2>{{ genre.name }}</h2>