docsify/src/core/render/compiler/image.js

A magical documentation generator.

import { escapeHtml, getAndRemoveConfig } from '../utils.js';
import { isAbsolutePath, getPath, getParentPath } from '../../router/util.js';

export const imageCompiler = ({ renderer, contentBase, router }) =>
  (renderer.image = ({ href, title, text }) => {
    let url = href;
    const attrs = [];

    const { str, config } = getAndRemoveConfig(title);
    title = str;

    if (config['no-zoom']) {
      attrs.push('data-no-zoom');
    }

    if (title) {
      attrs.push(`title="${escapeHtml(title)}"`);
    }

    if (config.size) {
      const [width, height] = /** @type {string} */ (config.size).split('x');
      if (height) {
        attrs.push(`width="${width}" height="${height}"`);
      } else {
        attrs.push(`width="${width}"`);
      }
    }

    if (config.class) {
      let classes = config.class;
      if (Array.isArray(config.class)) {
        classes = config.class.join(' ');
      }
      attrs.push(`class="${classes}"`);
    }

    if (config.id) {
      attrs.push(`id="${config.id}"`);
    }

    if (!isAbsolutePath(href)) {
      url = getPath(contentBase, getParentPath(router.getCurrentPath()), href);
    }

    return /* html */ `<img src="${escapeHtml(url)}" data-origin="${escapeHtml(href)}" alt="${escapeHtml(text)}" ${attrs.join(
      ' ',
    )} />`;
  });