Migrate site to Vite and Vike for SSG

.github/workflows/release.yml

@@ -32,10 +32,11 @@ jobs:
         run: pnpm i
 
       - name: Deploy site & create release PR or publish to npm
-        uses: changesets/action@c2918239208f2162b9d27a87f491375c51592434
+        uses: changesets/action@v1
         with:
           version: pnpm run version
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.SEEK_OSS_CI_GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}
+          IS_GITHUB_PAGES: true

.npmrc

@@ -0,0 +1,8 @@
+prefer-workspace-packages=true
+
+# Make sure the default patterns are still included (https://pnpm.io/npmrc#public-hoist-pattern)
+public-hoist-pattern[]="*eslint*"
+public-hoist-pattern[]="*prettier*"
+
+# Polyfills are only used in the site, but with `preconstruct dev` they are imported by our own code
+public-hoist-pattern[]="vite-plugin-node-polyfills"

package.json

@@ -45,36 +45,34 @@
   "homepage": "https://github.com/seek-oss/capsize#readme",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "@babel/preset-typescript": "^7.18.6",
-    "@changesets/changelog-github": "^0.4.7",
-    "@changesets/cli": "^2.25.0",
-    "@manypkg/cli": "^0.21.0",
-    "@preconstruct/cli": "^2.2.2",
-    "@storybook/addon-viewport": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/cli": "^6.5.13",
-    "@storybook/html": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@types/jest": "^29.2.0",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-typescript": "^7.23.3",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
+    "@manypkg/cli": "^0.21.2",
+    "@preconstruct/cli": "^2.8.3",
+    "@storybook/addon-viewport": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/cli": "^6.5.16",
+    "@storybook/html": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.11.13",
     "@vanilla-extract/babel-plugin": "^1.2.0",
-    "@vanilla-extract/webpack-plugin": "^2.2.0",
+    "@vanilla-extract/webpack-plugin": "^2.3.4",
     "chromatic": "^5.9.2",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "is-ci": "^3.0.1",
-    "jest": "^29.2.2",
-    "prettier": "^2.7.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "typescript": "^4.8.4",
-    "webpack": "^5.75.0"
+    "jest": "^29.7.0",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.0"
   },
-  "resolutions": {
-    "remark-mdx": "^1.6.22"
-  },
-  "packageManager": "[email protected]",
+  "packageManager": "[email protected]",
   "volta": {
-    "node": "16.18.0"
+    "node": "20.11.0"
   }
 }

packages/core/package.json

@@ -49,7 +49,7 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@emotion/css": "^11.1.3"
+    "@babel/core": "^7.23.9",
+    "@emotion/css": "^11.11.2"
   }
 }

packages/metrics/package.json

@@ -47,16 +47,14 @@
   "devDependencies": {
     "@capsizecss/unpack": "^1.0.0",
     "@types/cli-progress": "^3.9.2",
-    "@types/dedent": "^0.7.0",
-    "@types/node": "^16.18.2",
     "@types/node-fetch": "^2.6.2",
     "cli-progress": "^3.9.1",
-    "dedent": "^0.7.0",
+    "dedent": "^1.5.1",
     "del": "^6.0.0",
     "node-fetch": "^2.6.2",
     "p-queue": "^6.6.2",
     "sort-keys": "^5.0.0",
-    "tsx": "^4.1.2",
-    "typescript": "^4.8.4"
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3"
   }
 }

packages/metrics/scripts/analyse.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import googleFontsMetrics from './googleFonts.json';
 
-type FontMetrics = typeof googleFontsMetrics[number];
+type FontMetrics = (typeof googleFontsMetrics)[number];
 interface Report {
   name: string;
   run: (fontMetrics: FontMetrics) => boolean;

packages/metrics/scripts/build.ts

@@ -128,7 +128,7 @@ const buildFiles = async ({
 
   await queue.addAll(systemMetrics.map((m) => async () => await buildFiles(m)));
   await queue.addAll(
-    googleFonts.items.map((font: typeof googleFonts.items[number]) => {
+    googleFonts.items.map((font: (typeof googleFonts.items)[number]) => {
       const fontUrl =
         'regular' in font.files && font.files.regular
           ? font.files.regular

packages/unpack/src/index.ts

@@ -1,7 +1,8 @@
 import 'cross-fetch/polyfill';
 
 import blobToBuffer from 'blob-to-buffer';
-import fontkit, { Font as FontKitFont } from 'fontkit';
+import * as fontkit from 'fontkit';
+import type { Font as FontKitFont } from 'fontkit';
 
 // Ref: https://en.wikipedia.org/wiki/Letter_frequency#Relative_frequencies_of_letters_in_other_languages
 const weightings = {