real-og

If you need a thing to generate social media og:image social card images from the markdown pages on your static site, then this library may help you piece together a script to do so.

Usage

const realOg = require('real-og')

// Async function, returns a promise
realOg('posts/my-post.md', 'img/my-post.png', {

  // Will be parsed as an EJS template and passed the following object:
  //   `data` - frontmatter of the markdown file
  //   `content.markdown` - Markdown below the frontmatter
  //   `content.html` - Compiled HTML of the Markdown below the frontmatter
  //   `summary.markdown` - Markdown up to the `summarySeparatory`
  //   `summary.html` - Compiled HTML up to the Markdown's `summarySeparatory`
  //   `globals.*` - Whatever you set as `globals` on this object
  template: 'template/social.html',

  // Optional options

  fileType: 'png', // jpg, gif, webp
  summarySeparator: '<!--more-->', // token that separates
  width: 1200,
  height: 630,
  globals: {
    /* Any additional stuff you want to send to the template. */
  },
  // Override the tailwind classes of elements generated by markdown
  markdownTailwindClasses: {
    p: 'mt-0 mb-6',
    h1: 'font-size-3xl',
  },
  // Override the style attribute for these markdown elements
  markdownStyleAttrs: {
    p: 'text-overflow: ellipsis',
  },
  // Remove these tags since Satori can't really handle inline text elements
  markdownUnwrapElements: ['a', 'em'],
  // Custom extensions for showdown's markdown processing.
  // See: https://github.com/showdownjs/showdown/wiki/Extensions
  markdownExtensions: [
    {
      type: 'output',
      regex: new RegExp(`<li([^>]*)>([^<]*)<\\/li>`, 'g'),
      replace: '<li$1>• $2</li>'
    }
  ],


  // At least one font is required by the satori package
  fonts: [
    {
      name: 'Source Sans Pro',
      data: fs.readFileSync(require.resolve('@fontsource/source-sans-pro/files/source-sans-pro-latin-400-normal.woff')),
      weight: 400,
      style: 'normal'
    }
  ]
})

The template can contain any of the subset of HTML and CSS supported by satori, including Tailwind classes via a tw attribute.

Acknowledgements

This package was started by adapting the meat of eleventy-plugin-og-imag into a standalone package exposing its core functionality as an API that isn't coupled to the separately-excellent 11ty

Code of Conduct

This project follows Test Double's code of conduct for all community interactions, including (but not limited to) one-on-one communications, public posts/comments, code reviews, pull requests, and GitHub issues. If violations occur, Test Double will take any action they deem appropriate for the infraction, up to and including blocking a user from the organization's repositories.