diff --git a/polaris-icons/package.json b/polaris-icons/package.json
index a6a8e0b8b3b..66b740457ce 100644
--- a/polaris-icons/package.json
+++ b/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"
}
}
diff --git a/polaris.shopify.com/content/components/index.mdx b/polaris.shopify.com/content/components/index.mdx
index eff9fb7b251..a2773b0afea 100644
--- a/polaris.shopify.com/content/components/index.mdx
+++ b/polaris.shopify.com/content/components/index.mdx
@@ -2,7 +2,6 @@
title: Components
order: 7
icon: AppsMajor
-previewImg: /images/components.png
---
# {frontmatter.title}
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 4744d9364e1..357b9109062 100644
--- a/polaris.shopify.com/package.json
+++ b/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,6 +85,7 @@
"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",
@@ -91,8 +93,8 @@
"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"
diff --git a/polaris.shopify.com/scripts/gen-og-images.ts b/polaris.shopify.com/scripts/gen-og-images.ts
deleted file mode 100644
index 4a51c2259fe..00000000000
--- a/polaris.shopify.com/scripts/gen-og-images.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import * as polarisIcons from '@shopify/polaris-icons';
-import puppeteer from 'puppeteer';
-import {existsSync} from 'fs';
-import path from 'path';
-import {writeFile, readFile, mkdir, rm} from 'fs/promises';
-import pMap from '@esm2cjs/p-map';
-import ora from 'ora';
-import typedSiteJSON from '../.cache/site';
-
-const imgDir = path.join(process.cwd(), 'public/og-images');
-
-const shopifyLogo = `
-`;
-
-const defaultImage = `
-`;
-
-const generateHTML = async (data, url) => {
- const {frontMatter} = data[url];
- const title = frontMatter.title;
-
- let htmlImg = `${defaultImage}
`;
-
- if (url.startsWith('/components/')) {
- const imgPath = path.join(process.cwd(), `public/images${url}.png`);
- const image = await readFile(imgPath);
- const base64 = Buffer.from(image).toString('base64');
- htmlImg = `
`;
- }
-
- if (
- url.startsWith('/foundations/') ||
- url.startsWith('/design/') ||
- url.startsWith('/content/')
- ) {
- if (frontMatter?.icon && frontMatter?.icon in polarisIcons) {
- const iconFilePath = path.join(
- process.cwd(),
- `../polaris-icons/dist/svg/${frontMatter.icon}.svg`,
- );
- const iconData = await readFile(iconFilePath);
-
- htmlImg = `${iconData}
`;
- }
- }
-
- const html = `
-
-
-
- ${title}
- ${htmlImg}
-
- ${shopifyLogo} Polaris
-
-`;
-
- return Buffer.from(html).toString('base64');
-};
-
-const genOgImages = async () => {
- const spinner = ora('Generating Open Graph images from sitemap').start();
- if (existsSync(imgDir)) {
- await rm(imgDir, {recursive: true});
- }
-
- await mkdir(imgDir, {recursive: true});
- const urls = Object.keys(typedSiteJSON);
- const browser = await puppeteer.launch({
- defaultViewport: {width: 1200, height: 630},
- args: ['--no-sandbox', '--disable-setuid-sandbox'],
- });
-
- let completed = 0;
-
- const getPNG = async (url) => {
- try {
- const imgPath =
- url === ''
- ? 'home'
- : new URL(url, 'https://polaris.shopify.com').pathname;
- const html = await generateHTML(typedSiteJSON, url);
- const encodedUrl = `data:text/html;charset=utf-8;base64,${html}`;
- const page = await browser.newPage();
- await page.goto(encodedUrl, {waitUntil: 'networkidle0'});
- const image = await page.screenshot();
- if (!existsSync(`${imgDir}${imgPath}`)) {
- await mkdir(`${imgDir}${imgPath}`, {recursive: true});
- }
- await writeFile(`${imgDir}${imgPath}.png`, image);
- await page.close();
- completed++;
- spinner.text = `Generated ${completed} of ${urls.length} Open Graph images from sitemap`;
- } catch (error) {
- spinner.fail(`Failed to generate Open Graph png for ${url}`);
- throw error;
- }
- };
-
- const generateImages = await pMap(urls, getPNG, {concurrency: 30});
-
- await Promise.all(generateImages);
-
- await browser.close();
- spinner.succeed(
- `Generated ${urls.length} of ${urls.length} Open Graph images from sitemap`,
- );
-};
-
-genOgImages().then(() => {
- console.log('✅ OG Image creation done');
-});
diff --git a/polaris.shopify.com/scripts/gen-og-images.tsx b/polaris.shopify.com/scripts/gen-og-images.tsx
new file mode 100644
index 00000000000..084cc3f9603
--- /dev/null
+++ b/polaris.shopify.com/scripts/gen-og-images.tsx
@@ -0,0 +1,212 @@
+import React from 'react';
+import * as polarisIcons from '@shopify/polaris-icons';
+import {Transformer, ResizeFilterType} from '@napi-rs/image';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {writeFile, mkdir, rm} from 'fs/promises';
+import ora from 'ora';
+import satori, {type SatoriOptions} from 'satori';
+import typedSiteJSON from '../.cache/site';
+
+const WIDTH = 1200;
+const HEIGHT = 630;
+const PADDING = 60;
+const LOGO_SCALE = 0.9;
+// To maintain a 1:1 aspect ratio, we can't use regular CSS (we're using a
+// limited set of yoga), so we calculate it manually here.
+const IMG_SIZE = (HEIGHT - PADDING * 2) * LOGO_SCALE;
+
+const interDir = path.join(
+ path.dirname(require.resolve('inter-ui')),
+ 'Inter (web)',
+);
+
+const imgDir = path.join(process.cwd(), 'public/og-images');
+
+const shopifyLogo = (
+
+);
+
+const defaultImage = (
+
+);
+
+const generateSvg = async (url, frontMatter, satoriConfig: SatoriOptions) => {
+ const title = frontMatter.title;
+ let logo = shopifyLogo;
+
+ return satori(
+
+ {defaultImage}
+
+
+
+ {title}
+
+
+
+ {logo} Polaris
+
+
+