blog/scripts/image.js

'use strict'
/* global hexo */

/*
*  Embed an image with responsive images in a post
*  https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
*  Image is resized on-the-fly using Statically (https://statically.io/)
*  Usage: ![alt](/path/to/img "title")
*/

const { join } = require('path').posix

hexo.extend.filter.register('marked:renderer', (renderer) => {
  renderer.image = (href, title, alt) => {
    if (!alt) alt = ''
    if (!title) title = alt

    if (href.endsWith('.svg')) return `<img class="svg" src="${href}" alt="${alt}" title="${title}">`

    // embed external image
    if (href.startsWith('http')) return `<img src="${href}" alt="${alt}" title="${title}">`

    const fLink = (path, width) => {
      const query = new URLSearchParams('f=auto')
      if (typeof width === 'number') query.set('width', width)
      const url = new URL('http://example.com/' + join('img', path) + '?' + query)

      return url.pathname + url.search
    }

    return `<a href="${join('/img', href)}">` +
      `<img srcset="${fLink(href, 320)} 320w,` +
      `${fLink(href, 468)} 468w,` +
      `${fLink(href, 768)} 768w,` +
      `${fLink(href)} 800w"` +
      ' sizes="(max-width: 320px) 320px,' +
      '(max-width: 468px) 468px,' +
      '(max-width: 768px) 768px,' +
      '800px"' +
      ` src="${fLink(href)}" title="${title}" alt="${alt}" loading="lazy"></a>`
  }
})