@scribalous/branding/scripts/capture.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

// eslint-disable-next-line @typescript-eslint/no-var-requires
const puppeteer = require('puppeteer')

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const captureImage = async (page, { name, link, height, width }) => {
  await page.goto(`http://localhost:3000/${link}?noframe=true`)
  await page.screenshot({
    path: `./assets/${name}_${width}x${height}.png`,
    clip: {
      x: 0,
      y: 0,
      width: width,
      height: height
    }
  })
}

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
;(async () => {
  const browser = await puppeteer.launch({ defaultViewport: null })
  const page = await browser.newPage()

  await page.setViewport({
    width: 1280,
    height: 1280
  })

  await captureImage(page, {
    name: 'social_media_preview',
    link: 'social_media_preview',
    width: 1280,
    height: 640
  })

  await captureImage(page, {
    name: 'banner_logo',
    link: 'banner_logo',
    width: 480,
    height: 160
  })

  await captureImage(page, {
    name: 'square_logo',
    link: 'square_logo_big',
    width: 512,
    height: 512
  })

  await captureImage(page, {
    name: 'square_logo',
    link: 'square_logo_medium',
    width: 192,
    height: 192
  })

  await captureImage(page, {
    name: 'square_logo',
    link: 'square_logo_small',
    width: 64,
    height: 64
  })

  await browser.close()
})()