feat: add seo images setup

.npmrc

@@ -1,3 +1,4 @@
 engine-strict=true
 resolution-mode=highest
 auto-install-peers=true
+enable-pre-post-scripts=true

bin/generate-graph-images.ts

@@ -0,0 +1,29 @@
+import { glob, fs } from 'zx';
+import puppeteer from 'puppeteer-core';
+
+const folder = 'build/assets/graph';
+
+const [images, browser] = await Promise.all([
+	glob(`${folder}/*.svg`),
+	puppeteer.launch({
+		channel: 'chrome'
+	})
+]);
+
+await Promise.all(
+	images.map(async (image) => {
+		const [svg, page] = await Promise.all([
+			fs.readFile(image, 'utf-8'), //
+			browser.newPage()
+		]);
+		await Promise.all([
+			page.setContent(svg), //
+			page.setViewport({ width: 1200, height: 627 })
+		]);
+		const pngBuffer = await page.screenshot({ type: 'png' });
+		await fs.writeFile(`${image.replace('.svg', '')}.png`, pngBuffer);
+		await page.close();
+	})
+);
+
+await browser.close();

package.json

@@ -1,20 +1,23 @@
 {
-	"name": "my-app",
+	"name": "website",
 	"version": "0.0.1",
 	"private": true,
 	"packageManager": "pnpm@8.6.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"postbuild": "npm run generate",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"generate": "tsx ./bin/generate-graph-images.ts"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.5.0",
+		"@types/dedent": "^0.7.0",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"eslint": "^8.28.0",
@@ -26,16 +29,21 @@
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
 		"tslib": "^2.4.1",
+		"tsx": "^3.12.7",
 		"typescript": "^5.0.0",
-		"vite": "^4.3.0"
+		"vite": "^4.3.0",
+		"zx": "^7.2.2"
 	},
 	"type": "module",
 	"dependencies": {
 		"@fontsource-variable/sora": "^5.0.1",
 		"@portabletext/svelte": "^2.0.0",
 		"@sanity/client": "^6.1.2",
 		"@sanity/image-url": "^1.0.2",
+		"dedent": "^0.7.0",
+		"puppeteer-core": "^20.7.2",
 		"sass": "^1.62.1",
+		"svelte-meta-tags": "^2.8.0",
 		"svelte-preprocess": "^5.0.4",
 		"zod": "^3.21.4"
 	}