Auto-generated social images

PostLayout.js

import PageLayout from './PageLayout';
import PropTypes from 'prop-types';
import React from 'react';
import getShareImage from '@jlengstorf/get-share-image';
import {Helmet} from 'react-helmet';

export default function PostLayout({children, pageContext}) {
  const {title, description, tags} = pageContext.frontmatter;
  const shareImage = getShareImage({
    title,
    tagline: description,
    cloudName: 'dybmuhvem',
    imagePublicID: 'template_ijwmdw',
    titleFont: 'montserrat-bold.ttf',
    taglineFont: 'montserrat-regular.ttf',
    textColor: '1A202C'
  });

  return (
    <PageLayout pageContext={pageContext}>
      <Helmet title={title}>
        <meta name="description" content={description} />
        <meta name="image" content={shareImage} />
        <meta property="og:image" content={shareImage} />
      </Helmet>
      some extra blog stuff
      <ul>
        {tags?.map((tag, index) => (
          <li key={index}>{tag}</li>
        ))}
      </ul>
      {children}
    </PageLayout>
  );
}

PostLayout.propTypes = {
  children: PropTypes.node.isRequired,
  pageContext: PropTypes.object.isRequired
};

VOD: https://www.youtube.com/watch?v=Idc6Kn3YJ_A
@jlengstorf/get-share-image: https://www.npmjs.com/package/@jlengstorf/get-share-image
Social card design template: https://www.learnwithjason.dev/blog/design-social-sharing-card/

In the video, I go through getting your imagePublicID by uploading your template image to Cloudinary, uploading fonts to use in your share image, and designing the template.