cbillowes/gatsby-remark-interactive-gifs

const path = require(`path`);
const fs = require(`fs-extra`);
const gifFrames = require(`gif-frames`);
const sizeOf = require(`image-size`);

let Reporter = console;

/**
 * @typedef {object} PluginOptions
 * @property {string} root Project's working directory. Absolute path.
 * @property {string} src Where all the interactive gifs are stored. Absolute path.
 * @property {string} dest A directory in public where the gifs should be copied to. Absolute path.
 * @property {string} play The image that indicates that the gif can be interacted with. Absolute path.
 * @property {string} placeholder The image which shows when the gif is missing in action. Absolute path.
 * @property {string} loading The image which shows when the gif is downloading. Absolute path.
 */

/**
 * Verifies if the path exists.
 * @param {string} option
 * @param {string} path
 * @returns {Promise}
 */
async function verifyPathExists(option, path) {
  return fs.pathExists(path, (err, exists) => {
    if (err || !exists)
      Reporter.error(`Path does not exist [${option}]: ${path}`);
    return exists;
  });
}

/**
 * Validate if all required paths exist.
 * @param {PluginOptions} pluginOptions
 * @returns {boolean}
 */
const validate = (pluginOptions) => {
  const verifies = [
    verifyPathExists(`root`, pluginOptions.root),
    verifyPathExists(`src`, pluginOptions.src),
    verifyPathExists(`play`, pluginOptions.play),
    verifyPathExists(`placeholder`, pluginOptions.placeholder),
  ];
  return verifies.every(Boolean);
};

/**
 * Gets that bas64 contents of a file.
 * @param {string} pathAndfilename
 * @returns {string}
 */
const getBase64 = (pathAndfilename) => {
  return Buffer.from(fs.readFileSync(pathAndfilename)).toString(`base64`);
};

/**
 * Copy gifs, play and placeholder images from src to dest.
 * @param {string[]} files A list of all gif file names to be copied.
 * @param {PluginOptions} pluginOptions
 * @returns {void}
 */
const copyFiles = (files, pluginOptions) => {
  let copy = files.map((filename) => path.join(pluginOptions.src, filename));
  copy.push(pluginOptions.play);
  copy.push(pluginOptions.placeholder);
  copy.push(pluginOptions.loading);
  copy.map((src) => {
    const dest = path.join(pluginOptions.dest, path.basename(src));
    fs.copyFile(src, dest);
  });
};

/**
 * Create the still image from a gif.
 * @param {string} file A file name for the gif that will generate a still image from src to dest.
 * @param {PluginOptions} pluginOptions
 * @returns {void}
 */
const createStill = (file, pluginOptions) => {
  const src = path.join(pluginOptions.src, file);
  const dest = path.join(pluginOptions.dest, `still-${path.basename(src)}`);

  // @es-ignore
  gifFrames({ url: src, frames: 0 })
    // @ts-ignore
    .then((frameData) => {
      frameData[0].getImage().pipe(fs.createWriteStream(dest));
    });
};

/**
 * Gets the relative path of a file from its absolute path.
 * @param {string} absolutePath
 * @param {string} filePath
 * @returns {string}
 */
const getRelativePath = (absolutePath, filePath) => {
  return path.relative(absolutePath, filePath).replace(/public/gi, ``);
};

/**
 * Create the node data.
 * @param {string} filename
 * @param {string} base64
 * @param {PluginOptions} pluginOptions
 * @returns {object}
 */
const createNodeData = (filename, base64, pluginOptions) => {
  const src = path.join(pluginOptions.src, filename);
  const dest = path.join(pluginOptions.dest, filename);
  const still = path.join(pluginOptions.dest, `still-${filename}`);
  const { width, height } = sizeOf.imageSize(src);
  const root = pluginOptions.root;
  return {
    absolutePath: dest,
    sourcePath: src,
    relativePath: getRelativePath(root, dest),
    stillRelativePath: getRelativePath(root, still),
    base64,
    width,
    height,
  };
};

/**
 * @param {string} filename
 * @param {string} base64
 * @param {Function} createNodeId
 * @param {Function} createContentDigest
 * @returns {object}
 */
const createNodeMeta = (
  filename,
  base64,
  createNodeId,
  createContentDigest,
) => {
  return {
    id: createNodeId(`interactive-gif-${filename}`),
    parent: null,
    children: [],
    internal: {
      type: `InteractiveGif`,
      mediaType: `image/gif`,
      content: filename,
      contentDigest: createContentDigest(base64),
    },
  };
};

/**
 * Creates the source node.
 * @param {string} filename Of the gif to be added to GraphQL.
 * @param {object} options
 * @param {PluginOptions} pluginOptions
 * @returns {void}
 */
const createSourceNode = (filename, options, pluginOptions) => {
  const { actions, createNodeId, createContentDigest } = options;
  const { createNode } = actions;
  const base64 = getBase64(path.join(pluginOptions.src, filename));
  const data = createNodeData(filename, base64, pluginOptions);
  const meta = createNodeMeta(
    filename,
    base64,
    createNodeId,
    createContentDigest,
  );
  const node = Object.assign(data, meta);
  createNode(node);
};

/**
 * @param {{ reporter: object; }} options
 * @param {PluginOptions} pluginOptions
 * @returns {void}
 */
exports.sourceNodes = (options, pluginOptions) => {
  const { reporter } = options;
  Reporter = reporter;

  if (validate(pluginOptions)) {
    fs.mkdirp(pluginOptions.dest, (err) => {
      if (err)
        Reporter.error(
          `Cannot make directory [dest]: ${pluginOptions.dest} -> ${err}`,
        );
    });

    fs.readdir(pluginOptions.src, (err, files) => {
      if (err) {
        Reporter.error(
          `Cannot read directory [src]: ${pluginOptions.src} -> ${err}`,
        );
        return;
      }

      const gifFiles = files.filter(function (file) {
        return path.extname(file).toLowerCase() === '.gif';
      });

      copyFiles(gifFiles, pluginOptions);
      gifFiles.forEach((filename) => {
        createStill(filename, pluginOptions);
        createSourceNode(filename, options, pluginOptions);
      });
    });
  }
};