generate-responsive-image-data.js

import fm from 'front-matter';
import fs from 'fs';
import path from 'path';
import { BLOG_PATH } from './src/lib/utilities/blog.js';
import { makeDirectory } from './src/lib/utilities/file.js';
import { dominantColour, lowResolutionPlaceholder, metadata } from './src/lib/utilities/image.js';

const __dirname = path.resolve();
const formats = ['webp', 'auto'];
const sizes = [672];
const densities = [1.0, 2.0];
const maxWidth = sizes[sizes.length - 1];

// use sizes and densities arrays to determine the actual output widths needed
const outputSizes = [];
sizes.forEach((sizesElement) => {
  densities.forEach((densitiesElement) => outputSizes.push(densitiesElement * sizesElement));
});
outputSizes.sort((a, b) => b - a);

async function generateImageMeta(source) {
  const metaPromises = [
    metadata({ source }),
    dominantColour({ source }),
    lowResolutionPlaceholder({ source }),
  ];
  const [metadataResult, dominantColourObject, placeholder] = await Promise.all(metaPromises);
  const { format, width, height } = metadataResult;
  const { r, g, b } = dominantColourObject;
  const dominantColourValue = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
  return { dominantColour: dominantColourValue, placeholder, format, width, height };
}

function getPosts(location) {
  const directories = fs
    .readdirSync(location)
    .filter((element) => fs.lstatSync(`${location}/${element}`).isDirectory());
  const articles = [];

  directories.forEach((element) => {
    const contentPath = `${location}/${element}/index.md`;
    if (fs.existsSync(contentPath)) {
      const content = fs.readFileSync(contentPath, { encoding: 'utf-8' });
      const frontmatter = fm(content);
      const { featuredImage, featuredImageAlt, ogImage, ogSquareImage, twitterImage } =
        frontmatter.attributes;
      articles.push({
        slug: element,
        featuredImage,
        featuredImageAlt,
        ogImage,
        ogSquareImage,
        twitterImage,
      });
    }
  });
  return articles;
}

const main = async () => {
  try {
    const location = path.join(__dirname, BLOG_PATH);
    const posts = getPosts(location);

    const imageMetaPromises = posts.map(async (element) => {
      const { featuredImage, slug } = element;
      const source = path.join(__dirname, 'src/lib/assets/blog/', slug, featuredImage);
      return generateImageMeta(source);
    });
    const imageMetadata = await Promise.all(imageMetaPromises);

    console.log(`Generating image metadata for posts`);
    const postDataDir = path.join(__dirname, 'src/lib/generated/posts');
    await makeDirectory(postDataDir);

    posts.forEach((element, index) => {
      const { featuredImage, featuredImageAlt, ogImage, ogSquareImage, slug, twitterImage } =
        element;
      const postPath = path.join(postDataDir, `${slug}.js`);
      const { dominantColour, format, placeholder, width } = imageMetadata[index];
      const source = `$lib/assets/blog/${slug}/${featuredImage}`;
      const ogImageSource = `$lib/assets/blog/${slug}/${ogImage}`;
      const ogSquareImageSource = `$lib/assets/blog/${slug}/${ogSquareImage}`;
      const twitterImageSource = `$lib/assets/blog/${slug}/${twitterImage}`;
      const srcsetImportArray = formats.map(
        (formatsElement) =>
          `import srcset${formatsElement} from '${source}?w=${
            width < outputSizes[0] ? `${width};` : ''
          }${outputSizes.filter((outputSizesElement) => outputSizesElement <= width).join(';')}&${
            formatsElement === 'auto' ? format : formatsElement
          }&srcset';`,
      );
      const sources = `[\n${formats
        .map(
          (formatsElement) =>
            `    { srcset: ${`srcset${formatsElement}`}, type: ${
              formatsElement === 'auto' ? `'image/${format}'` : `'image/${formatsElement}'`
            } },`,
        )
        .join('\n')}\n  ]`;
      const result = `import meta from '${source}?width=${Math.min(maxWidth, width)}&metadata';
${srcsetImportArray.join('\n')}
import ogImage from '${ogImageSource}';
import ogSquareImage from '${ogSquareImageSource}';
import twitterImage from '${twitterImageSource}';

const { height, src, width } = meta;

const data = {
  slug: '${slug}',
  alt: '${featuredImageAlt.replace(/'/g, "\\'")}',
  width,
  height,
  src,
  sources: ${sources},
  dominantColour: '${dominantColour}',
  placeholder:
    '${placeholder}',
  ogImage,
  ogSquareImage,
  twitterImage,
};

export { data as default };
`;
      fs.writeFileSync(postPath, result, 'utf-8');
    });
  } catch (error) {
    console.log(`Error generating blog post responsive image data: ${error}`);
  }
};

main();