Generate all assets (#7018)

- [x] `gen-assets` is decoupled from build
- [x] `gen-assets` creates `og-images` and `sitemap.xml`
- [x] `gen-assets` is ran in `polaris-site-container-builder` and optionally locally Shopify/polaris-site-container-builder#18
- [x] No more `sitemap.xml` changing in PR's problems
- [x] Adds turborepo script so it can be ran at root by `polaris-site-container-builder`

Author: alex-page

.changeset/kind-dodos-rest.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Generate assets once with a seperate script

.gitignore

@@ -12,4 +12,5 @@ node_modules
 /polaris-react/build-internal
 /polaris-react/src/styles/_media-queries.scss
 /polaris-tokens/build
+/polaris.shopify.com/public/sitemap.xml
 /polaris.shopify.com/public/og-images

package.json

@@ -34,6 +34,7 @@
     "format": "prettier . --write",
     "type-check": "tsc --build",
     "changeset": "changeset",
+    "gen-assets": "turbo run gen-assets --filter=polaris.shopify.com",
     "preversion-packages": "turbo run preversion",
     "version-packages": "yarn preversion-packages && changeset version",
     "release": "turbo run build --filter=polaris.shopify.com^... && changeset publish",

polaris.shopify.com/next-sitemap.config.js

@@ -3,17 +3,15 @@
   "version": "0.13.0",
   "private": true,
   "scripts": {
-    "build": "yarn run gen-assets && next build",
+    "build": "next build",
     "dev": "open http://localhost:3000 && next dev",
-    "postbuild": "yarn gen-sitemap",
-    "start": "next start ",
+    "start": "next start",
     "lint": "run-p lint:*",
     "lint:js": "TIMING=1 eslint --cache .",
     "lint:styles": "stylelint '**/*.{css,scss}'",
     "clean": "rm -rf .turbo node_modules .next *.tsbuildinfo",
     "create-component": "generact --root src/components src/components/Template/Template.tsx",
-    "gen-assets": "node scripts/gen-og-images.mjs",
-    "gen-sitemap": "yarn next-sitemap",
+    "gen-assets": "node scripts/gen-assets.mjs",
     "get-props": "ts-node --skip-project ./scripts/get-props.ts"
   },
   "dependencies": {
@@ -42,12 +40,13 @@
     "@types/react": "*",
     "eslint-config-next": "12.1.0",
     "eslint": "8.10.0",
+    "execa": "^6.1.0",
     "frontmatter": "^0.0.3",
+    "get-site-urls": "3.0.0-alpha.1",
     "generact": "^0.4.0",
     "globby": "^11.1.0",
     "js-yaml": "^4.1.0",
     "marked": "^4.0.16",
-    "next-sitemap": "^3.1.5",
     "puppeteer": "^16.0.0",
     "rehype-raw": "^6.1.1",
     "sass": "^1.49.9",

polaris.shopify.com/package.json

@@ -1,8 +1,10 @@
 import puppeteer from 'puppeteer';
-import {writeFile, readFile, mkdir, rm} from 'fs/promises';
 import matter from 'gray-matter';
+import {execa} from 'execa';
 import path from 'path';
+
 import {existsSync} from 'fs';
+import {writeFile, readFile, mkdir, rm} from 'fs/promises';
 
 const imgDir = path.join(process.cwd(), 'public/og-images');
 
@@ -168,7 +170,19 @@ const getPNG = async (url, browser) => {
   await writeFile(`${imgDir}${imgPath}/${slug}.png`, image);
 };
 
-const generateImages = async () => {
+const genAssets = async () => {
+  const server = execa('node_modules/.bin/next', ['dev']);
+
+  const {stdout} = await execa('npx', [
+    'get-site-urls',
+    'http://localhost:3000',
+    '--output=public/sitemap.xml',
+    '--alias=https://polaris.shopify.com',
+  ]);
+  console.log(stdout);
+
+  await server.kill();
+
   if (existsSync(imgDir)) await rm(imgDir, {recursive: true});
   await mkdir(imgDir, {recursive: true});
   const urls = await getUrls();
@@ -182,6 +196,7 @@ const generateImages = async () => {
   await Promise.all(generateImages);
 
   await browser.close();
+  console.log(`✅ Created ${urls.length} og-images from sitemap`);
 };
 
-await generateImages();
+await genAssets();

polaris.shopify.com/public/sitemap.xml

@@ -21,6 +21,9 @@
     },
     "preversion": {
       "cache": false
+    },
+    "gen-assets": {
+      "cache": false
     }
   }
 }