Image dimension checker component in development

[bleonard]

I was having trouble knowing the correct width and height props to put on the screenshots I was making for a blog post. I would take the screenshot and then use image tools and even a spreadsheet to figure out the right ratio/dimensions for how I wanted it to show up in the UI.

If the width and height do not match the ratio of the actual image, it will become distorted, so that's a problem.

This creates a component that wraps the next/image component. If the width and height do not match the reality of the image, it shows a little red overlay (while in development). The banner uses the passed in dimensions to suggest changes that would match either the height or width.

This is accomplished with a component that uses an API request. The server-side code seems to be needed to actually inspect the actual image on disk.

In this case, the component looked like this:

<Image
  src="/posts/developing-grouparoo-on-macos-big-sur/big-sur.jpg"
  width={800}
  height={520}
/>

The component checked with the api
GET /api/imgdim?w=800&h=520&url=%2Fposts%2Fdeveloping-grouparoo-on-macos-big-sur%2Fbig-sur.jpg
Response:

{
  "optimized": false,
  "message": "W x H: 800 x 534, 779 x 520",
  "dimensions": [
    {
      "w": 800,
      "h": 534
    },
    {
      "w": 779,
      "h": 520
    }
  ],
  "ratio": 1.4978354978354977
}

This then showed in the UI, suggesting to make it either 800 x 534 or 779 x 520 to fit the ratio.
if optimized is true, the component doesn't show anything.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/grouparoo/www-grouparoo-com/332of6uqu
✅ Preview: https://www-grouparoo-com-git-image-dimensions.grouparoo.vercel.app

[github-actions]

Path	Performance	Accessibility	Best Practices	SEO
/	🟠 82	🟢 94	🟢 100	🟢 96
/about	🟠 82	🟢 93	🟢 100	🟢 96
/blog	🟠 84	🟢 92	🟢 100	🟢 91
/docs	🟠 85	🟢 98	🟢 100	🟠 86
/integrations	🟠 85	🟢 97	🟢 100	🟢 96
/meet	🟠 85	🟠 88	🟢 100	🟢 95
/pricing	🟠 85	🟢 94	🟢 100	🟢 96
/support	🟠 87	🟢 97	🟢 100	🟢 94
/whats-new	🟠 63	🟢 93	🟢 100	🟠 71
/blog/any-wreaks-havoc-on-overloads	🟠 77	🟢 90	🟢 100	🟢 94
/blog/bigquery-source	🟠 74	🟢 91	🟢 100	🟠 87
/blog/building-a-sync-engine	🟠 73	🟢 90	🟢 100	🟢 94
/blog/developing-grouparoo-on-macos-big-sur	🟠 73	🟢 90	🟢 93	🟢 94
/blog/events-are-probably-wrong-for-you	🟠 82	🟢 91	🟢 100	🟢 94
/blog/exports-is-not-a-function	🟠 76	🟢 90	🟢 100	🟢 94
/blog/google-sheets-source	🟠 75	🟢 90	🟢 100	🟢 94
/blog/grouparoo-monorepo-deployment	🟠 73	🟢 91	🟢 100	🟢 94
/blog/how-grouparoo-works-as-a-team	🟠 78	🟢 90	🟢 100	🟢 94
/blog/how-to-format-zendesk-tags	🟠 78	🟢 90	🟢 100	🟢 94
/blog/hubspot-destination	🟠 79	🟢 91	🟢 100	🟢 94
/blog/mailchimp-destination	🟠 73	🟢 91	🟢 100	🟢 94
/blog/marketing-challenges	🟠 83	🟢 91	🟢 100	🟢 94
/blog/marketo-destination	🟠 74	🟢 90	🟢 100	🟢 94
/blog/nextjs-plugins	🟠 78	🟠 89	🟢 100	🟢 95
/blog/pull-the-data-you-actually-want	🟠 76	🟢 90	🟢 100	🟢 94
/blog/sailthru-destination	🟠 75	🟢 90	🟢 100	🟢 94
/blog/salesforce-destination	🟠 72	🟢 91	🟢 100	🟢 94
/blog/save-your-high-water-marks-as-strings	🟠 77	🟢 91	🟢 100	🟢 94
/blog/seed-round	🟠 78	🟢 90	🟢 100	🟢 94
/blog/simulating-cohorts	🟠 77	🟢 91	🟢 100	🟢 94
/blog/steps-for-marketing-tests	🟠 72	🟢 91	🟢 100	🟢 94
/blog/the-shots-you-get-to-take	🟠 79	🟢 90	🟢 100	🟢 94
/blog/typescript-frontend-backend	🟠 83	🟢 90	🟢 100	🟢 94
/docs/community	🟠 85	🟢 94	🟢 100	🟠 86
/docs/deployment	🟠 84	🟢 97	🟢 100	🟢 94
/docs/development	🟠 83	❓ null	🟢 100	🟢 93
/docs/guides	🟠 86	🟢 95	🟢 100	🟢 93
/solutions/healthcare	🟠 83	🟢 97	🟢 100	🟢 96
/solutions/marketers	🟠 83	🟢 97	🟢 100	🟢 96
/whats-new/2020-03-26-mailchimp	🔴 56	🟢 93	🟢 100	🟠 71
/docs/community/code-of-conduct	🟠 86	🟢 97	🟢 100	🟢 93
/docs/community/legal	🟠 86	🟢 97	🟢 100	🟢 94
/docs/deployment/aws-and-k8s	🟠 84	🟢 97	🟢 100	🟢 94
/docs/deployment/code-config	🟠 83	🟢 97	🟢 100	🟢 94
/docs/deployment/common-issues	🟠 85	🟢 97	🟢 100	🟢 93
/docs/deployment/docker	🟠 86	🟢 97	🟢 100	🟢 94
/docs/deployment/heroku	🟠 85	🟢 97	🟢 100	🟢 94
/docs/deployment/monitoring-and-debugging	🟠 86	🟢 97	🟢 100	🟢 93
/docs/deployment/security	🟠 86	🟢 97	🟢 100	🟢 94
/docs/deployment/telemetry	🟠 86	🟢 97	🟢 100	🟢 94
/docs/deployment/topology	🟠 82	🟢 97	🟢 100	🟢 94
/docs/deployment/upgrading-grouparoo	🟠 85	🟢 97	🟢 100	🟢 93
/docs/development/databases	🟠 86	🟢 97	🟢 100	🟢 94
/docs/development/dataflow	🟠 83	🟢 97	🟢 100	🟢 94
/docs/development/events	🟠 84	🟢 97	🟢 100	🟢 94
/docs/development/plugins	🟠 82	🟢 97	🟢 100	🟢 94
/docs/development/publishing	🟠 85	🟢 97	🟢 100	🟠 86
/docs/development/security-disclosures	🟠 86	🟢 97	🟢 100	🟢 93
/docs/development/tools	🟠 85	🟢 97	🟢 100	🟢 94
/docs/development/typescript-api	🟠 83	🟢 97	🟢 100	🟢 93
/docs/guides/add-apps	🟠 85	🟢 97	🟢 100	🟢 94
/docs/guides/create-destinations	🟠 85	🟢 97	🟢 100	🟢 94
/docs/guides/create-groups	🟠 86	🟢 97	🟢 100	🟢 94
/docs/guides/create-profile-properties	🟠 86	🟢 97	🟢 100	🟢 94
/docs/guides/create-sources	🟠 86	🟢 95	🟢 100	🟢 94
/docs/guides/first-time-setup	🟠 86	🟢 97	🟢 100	🟢 94
/docs/guides/product-concepts	🟠 86	🟢 97	🟢 100	🟢 94
/integrations/destinations/hubspot	🟠 82	🟢 97	🟢 100	🟢 95
/integrations/destinations/mailchimp	🟠 81	🟢 97	🟢 100	🟢 95
/integrations/destinations/marketo	🟠 82	🟢 97	🟢 100	🟢 95
/integrations/destinations/sailthru	🟠 82	🟢 97	🟢 100	🟢 95
/integrations/destinations/salesforce	🟠 82	🟢 97	🟢 100	🟢 95
/integrations/destinations/zendesk	🟠 84	🟢 97	🟢 100	🟢 95
/integrations/sources/bigquery	🟠 82	🟢 97	🟢 100	🟢 95
/integrations/sources/mysql	🟠 83	🟢 97	🟢 100	🟢 95
/integrations/sources/postgres	🟠 83	🟢 97	🟢 100	🟢 95
/integrations/sources/redshift	🟠 82	🟢 97	🟢 100	🟢 95
/integrations/sources/snowflake	🟠 84	🟢 97	🟢 100	🟢 95