Docs Refactor gen-og-images script to leverage satori over puppeteer

### WHY are these changes introduced?

- Fixes Shopify/polaris-internal#1278

Our existing `gen-og-images` script creates an og-image layout using
HTML markup and then runs puppeteer to take snapshots of each generated
layout. This is relatively slow, this PR aims to swap this logic out for
[Satori](https://github.com/vercel/satori) vercel's library for doing
the exact same markup to og-image procedure but without having to spin
up a puppeteer instance.


### WHAT is this pull request doing?
* Convert our HTML markup to JSX 
* Convert `<style>` tag CSS to inline css for each of our JSX elements.
(This is a limitation of satori, in that it does not support global
<style> tags
* Remove puppeteer logic in favor of a single call to satori 
```tsx
satori(someMarkup, someConfig)
```
* Leverage [@inter-ui](https://www.npmjs.com/package/inter-ui) to
download non-variable versions of Inter for use in our generated layout.
(A limitation of the underlying library that Satori leverages for type
support (opentype.js) is that it does not support variable fonts)
* Leverage
[@napi-rs/image](https://www.npmjs.com/package/@napi-rs/image) to
convert our generated svg from satori into a png file for use as an
og-image.

---------

Co-authored-by: Jess Telford <jess.telford@shopify.com>

polaris-icons/package.json

@@ -61,7 +61,6 @@
     "hast-util-select": "^3.0.0",
     "js-yaml": "^4.0.0",
     "rehype-parse": "^7.0.1",
-    "svgo": "^2.8.0",
     "unified": "^9.2.1"
   }
 }

polaris.shopify.com/content/components/index.mdx

@@ -2,7 +2,6 @@
 title: Components
 order: 7
 icon: AppsMajor
-previewImg: /images/components.png
 ---
 
 # {frontmatter.title}

polaris.shopify.com/package.json

@@ -20,7 +20,7 @@
     "create-component": "generact --root src/components src/components/Template/Template.tsx",
     "gen-sitemap": "yarn next-sitemap",
     "get-props": "./scripts/get-props/src/get-props.ts",
-    "gen-assets": "yarn get-props && node scripts/gen-cache-json.mjs && ts-node scripts/gen-site-map.ts && ts-node scripts/gen-og-images.ts",
+    "gen-assets": "yarn get-props && node scripts/gen-cache-json.mjs && ts-node scripts/gen-site-map.ts && ts-node scripts/gen-og-images.tsx",
     "gen-colors": "ts-node ./scripts/gen-colors.ts"
   },
   "dependencies": {
@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@esm2cjs/p-map": "^5.5.0",
+    "@napi-rs/image": "^1.7.0",
     "@types/base-64": "^1.0.0",
     "@types/gtag.js": "^0.0.10",
     "@types/js-yaml": "^4.0.5",
@@ -84,15 +85,16 @@
     "generact": "^0.4.0",
     "get-site-urls": "3.0.0-alpha.1",
     "globby": "^11.1.0",
+    "inter-ui": "3.19.3",
     "is-ci": "^3.0.1",
     "js-yaml": "^4.1.0",
     "lodash.set": "^4.3.2",
     "marked": "^4.0.16",
     "ora": "^5.4.1",
     "p-map": "^5.5.0",
     "playroom": "^0.28.0",
-    "puppeteer": "^16.0.0",
     "sass": "^1.49.9",
+    "satori": "^0.10.11",
     "style-loader": "^3.3.1",
     "ts-node": "^10.7.0",
     "typescript": "^4.9.3"