remove and optimize images

.eleventy.js

@@ -14,7 +14,7 @@ const DocumentModelConverter = require('./lib/document-model-converter.js')
 asciidoctor.ConverterFactory.register(new DocumentModelConverter(), ['json'])
 
 module.exports = function (eleventyConfig, rest) {
-  eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,ico,txt,json,webmanifest,xml}')
+  eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,webp,ico,txt,json,webmanifest,xml}')
   eleventyConfig.setBrowserSyncConfig({
     files: ['_site/**/*'],
     open: false

data/images/.gitignore

+node_modules/
+dist/

data/images/index.js

+import { ImagePool } from '@squoosh/lib'
+import { cpus } from 'os'
+import fs from 'fs/promises'
+import { dirname, join, parse } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const imagePool = new ImagePool(cpus().length)
+
+const imagesDirectory  = join(__dirname, 'img')
+const distDirectory  = join(__dirname, 'dist')
+
+const imageNames = await fs.readdir(imagesDirectory)
+for (let imageName of imageNames) {
+  if (imageName.endsWith('.png') || imageName.endsWith('.jpeg') || imageName.endsWith('.jpg')) {
+    console.log(`Processing ${imageName}...`)
+    const file = await fs.readFile(join(imagesDirectory, imageName))
+    const image = imagePool.ingestImage(file)
+    await image.preprocess({
+      quant: {
+        numColors: 256,
+        dither: 1
+      }
+    })
+    await image.encode({ oxipng: { level: 3 }, webp: { quality: 85 } })
+    const oxipngEncodedImage = await image.encodedWith.oxipng
+    await fs.writeFile(join(distDirectory, imageName), oxipngEncodedImage.binary)
+    const webpEncodedImage = await image.encodedWith.webp
+    await fs.writeFile(join(distDirectory, `${parse(imageName).name}.webp`), webpEncodedImage.binary)
+  }
+}
+
+await imagePool.close();

data/images/package.json

+{
+  "name": "asciidoc.org-images",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "license": "EPL-2.0",
+  "devDependencies": {
+    "@squoosh/lib": "^0.4.0",
+    "puppeteer": "^13.3.1"
+  }
+}

lib/document-model-converter.js

 const asciidoctor = require('@asciidoctor/core')()
+const { parse, dirname, join } = require('path')
+
+function encodeAttributeValue(val) {
+ return val.includes('"') ? val.replaceAll('"', '"') : val
+}
 
 class DocumentModelConverter {
   constructor () {
@@ -20,7 +25,6 @@ class DocumentModelConverter {
           }
         } else if (block.getNodeName() === 'section') {
           const id = block.getId()
-          const tabsBlocks = block.findBy({context: 'example', style: 'tabs'})
           const contents = []
           const sectionBlocks = block.getBlocks()
           const title = block.getTitle()
@@ -121,6 +125,23 @@ class DocumentModelConverter {
       }
       return this.result
     }
+    const nodeName = node.getNodeName()
+    if (nodeName === 'image') {
+      const target = node.getAttribute('target')
+      if (target.endsWith('.svg')) {
+        return this.baseConverter.convert(node, transform)
+      }
+      const img = `<img src="${node.getImageUri(target)}" alt=${encodeAttributeValue(node.getAlt())}/>`
+      const mimeType = target.endsWith('png') ? 'image/png' : 'image/jpeg'
+      const targetInfo = parse(target)
+      return `<div class="imageblock">
+  <picture class="content">
+    <source srcset="${targetInfo.dir}/${targetInfo.name}.webp" type="image/webp">
+    <source srcset="${node.getImageUri(target)}" type="${mimeType}">
+    ${img}
+  </picture>
+</div>`
+    }
     return this.baseConverter.convert(node, transform)
   }
 }

package.json

@@ -14,7 +14,9 @@
     "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint .eleventy.js rollup.config.js pages/assets/js/**.js",
     "lint:css": "stylelint 'pages/assets/**/*.css'",
-    "build": "rollup -c --environment BUILD:production && eleventy --config .eleventy.js",
+    "build": "npm run build:js && npm run build:site",
+    "build:js": "rollup -c --environment BUILD:production",
+    "build:site": "eleventy --config .eleventy.js",
     "start": "rollup -c -w & eleventy --serve --config .eleventy.js"
   },
   "devDependencies": {

pages/assets/img/couchbase-logo.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 517 142"><defs><style>.cls-1{fill:#ea2328;}.cls-1,.cls-2{fill-rule:evenodd;}</style></defs><path id="Logo-Icon" class="cls-1" d="M100,81.23a7.07,7.07,0,0,1-6,7.32c-6.84,1.2-21.2,1.93-33.23,1.93s-26.39-.73-33.23-1.93a7.08,7.08,0,0,1-6-7.32V58.44a7.59,7.59,0,0,1,6-7.33A76.79,76.79,0,0,1,38,50.43a2.58,2.58,0,0,1,2.52,2.77V69.14c7.07,0,13.21-.43,20.3-.43s13.23.4,20.29.43V53.2a2.58,2.58,0,0,1,2.52-2.77,76.91,76.91,0,0,1,10.42.68,7.59,7.59,0,0,1,6,7.33Zm-39.2-68.6a58.37,58.37,0,1,0,58,58.37,58.18,58.18,0,0,0-58-58.37Z"/><g id="Logo-Type"><path id="Fill-1" class="cls-2" d="M180.22,99c-18,0-27.05-13.16-27.05-27.64s9.35-27.48,27.22-27.48c6.86,0,11.72,1.51,15.84,4.25l-5.12,8.51a18.68,18.68,0,0,0-10.89-3.1c-9.64,0-14.82,7.79-14.82,17.5,0,10,4.94,18.21,15,18.21a18.32,18.32,0,0,0,11.81-4l4.72,8.19c-2.68,2.45-9,5.61-16.7,5.61"/><path id="Fill-3" class="cls-2" d="M218.6,99c-13.43,0-19.36-10.25-19.36-20.31s5.85-20.58,19.29-20.58,19.58,10.17,19.58,20.24c0,9.91-6,20.65-19.51,20.65m-.21-32.74c-5.78,0-7.64,4.92-7.64,12.09s2.26,12.34,8,12.34,7.83-4.81,7.83-12-2.39-12.43-8.22-12.43"/><path id="Fill-5" class="cls-2" d="M255.12,59V84c0,3.84,1.32,5.75,5,5.75,3.88,0,6.86-3.74,7.64-4.69V59h10.86V86.54a58.36,58.36,0,0,0,1,11.45H269a28.45,28.45,0,0,1-.8-5.17A15.31,15.31,0,0,1,255.81,99c-8.47,0-11.54-5.51-11.54-12.66V59Z"/><path id="Fill-7" class="cls-2" d="M305.22,99c-12.39,0-20.07-8.21-20.07-20.4,0-13.09,8.62-20.49,20.39-20.49,6.22,0,9.94,1.88,11.76,3.08l-3.45,7.51a14,14,0,0,0-8-2.26c-6,0-9.24,4.74-9.24,11.83s3.06,12.24,9.48,12.24a15,15,0,0,0,8.19-2.31l3.29,7.32C315.8,96.65,312.25,99,305.22,99"/><path id="Fill-9" class="cls-2" d="M346.63,98V73c0-3.83-1.32-5.74-4.94-5.74-3.95,0-6.92,3.67-7.71,4.7V98H323.13V40.47H334V63.68a15.71,15.71,0,0,1,12-5.62c8.47,0,11.55,5.47,11.55,12.68V98Z"/><path id="Fill-11" class="cls-2" d="M377.18,40.47V62.08a13.48,13.48,0,0,1,9.38-4c9.55,0,16.31,6.63,16.31,20.15S394,99,382.34,99c-8.77,0-14.12-2.22-16-3.12V40.47Zm0,49.05a14.53,14.53,0,0,0,5.16.84c5.62,0,9-4.15,9-12.15,0-7.2-2.41-11.48-7.88-11.48a8.78,8.78,0,0,0-6.31,2.9Z"/><path id="Fill-13" class="cls-2" d="M429.83,98a22.16,22.16,0,0,1-.65-4.14A13.89,13.89,0,0,1,418.44,99c-6.56,0-11.64-4-11.64-11,0-10.12,10.26-13.86,20.49-13.86h1.32V71.94c0-3.23-1.3-5.21-6.13-5.21a16.09,16.09,0,0,0-9.75,3.64L408,63.7c2.32-2.12,7.44-5.64,15.7-5.64,10.66,0,15.66,4.12,15.66,14.52V86.27A55,55,0,0,0,440.51,98Zm-1.22-17.17h-1.32c-6,0-10.09,1.79-10.09,6.21,0,2.77,2.19,4,4.57,4a9.05,9.05,0,0,0,6.84-3.28Z"/><path id="Fill-15" class="cls-2" d="M458.93,99c-7,0-11.39-2.08-13.75-3.68l3.62-7.66a17.93,17.93,0,0,0,9.47,3.19c4,0,6.19-1.14,6.19-3.36,0-2.55-4.36-3.23-9.81-5.88-5.29-2.59-8.43-5.6-8.43-11.47,0-7.37,5.77-12,14.51-12a23.59,23.59,0,0,1,12.4,3.1l-3.76,7.49a16,16,0,0,0-8.2-2.44c-3.66,0-5.2,1.3-5.2,3.3,0,2.56,3.54,3.18,7.94,5C470,77,474.29,79.84,474.29,86.39c0,8.24-5.81,12.56-15.36,12.56"/><path id="Fill-17" class="cls-2" d="M499.44,90.8a19.44,19.44,0,0,0,10-2.66l3.47,7C510.32,96.65,506.4,99,498.43,99c-12.92,0-20.27-8.17-20.27-20.63s8.46-20.26,19.15-20.26c12.12,0,18,8.53,16.69,23.1H489.77c.51,5.81,3.46,9.64,9.67,9.64Zm4.14-17c-.08-4.31-1.77-7.81-6.43-7.81-4.29,0-6.73,2.78-7.44,7.81Z"/></g></svg>
\ No newline at end of file