Dynamic Social Sharing Images

shoot-sharing-image.js

const puppeteer = require('puppeteer');
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

// Get the URL and the slug segment from it
const url = process.argv[2];
const segments = url.split('/');
const slug = segments[segments.length-2];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url + 'sharing');
  await page.setViewport({
  	width: 600,
  	height: 315,
  	deviceScaleFactor: 2
  });
  await page.screenshot({path: slug + '.png'});
  await browser.close();

  await imagemin([slug + '.png'], 'build', {
	  plugins: [
	    imageminPngquant({quality: '75-90'})
	  ]
	});
})();

Thank you for sharing this. I was looking on building something similar and i might be able to automate this somehow.

I'll get back to you if I do.

Justa sidenote for people reaching this without having read the article, the article's link is https://24ways.org/2018/dynamic-social-sharing-images/