merge dev into main

e2e/about.spec.ts

@@ -10,14 +10,7 @@ test.describe('about', () => {
   });
 
   test('should render correctly', async () => {
-    await expect(page.locator('h1').first()).toHaveText('About');
-
-    await expect(
-      page.locator(
-        "text=Hey I'm Luke, a Software Engineer currently based in the UK.",
-      ),
-    ).toBeVisible();
-
-    await expect(page.locator('text=Skills')).toBeVisible();
+    await expect(page.locator("[data-testid='AboutPage-intro']")).toBeVisible();
+    await expect(page.locator('text=Experience')).toBeVisible();
   });
 });

e2e/commandmenu.spec.ts

@@ -86,7 +86,7 @@ test.describe('command menu', () => {
 
     // about
     await navigation.locator('text=About').click();
-    await expect(page.locator('h1').first()).toHaveText('About');
+    await expect(page.locator('[data-testid="AboutPage-intro"]')).toBeVisible();
     await page.goBack();
 
     await page.keyboard.press(`${key}+K`, {

e2e/footer.spec.ts

@@ -25,7 +25,7 @@ test.describe('footer', () => {
 
     // about
     await page.click('[data-testid="footer"] >> text="About"');
-    await expect(page.locator('h1').first()).toHaveText('About');
+    await expect(page.locator('[data-testid="AboutPage-intro"]')).toBeVisible();
     await page.goBack();
 
     // projects

e2e/index.spec.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-await-in-loop */
 import { test, expect, Page } from '@playwright/test';
 import { baseUrl } from './config/baseUrl';
-import { projectsWithSiteUrls } from './utils/projects';
 
 let page: Page;
 
@@ -13,9 +12,8 @@ test.describe('index', () => {
 
   test('should render intro correctly', async () => {
     await expect(page.locator('[data-testid="intro-heading"]')).toBeVisible();
-    await expect(
-      page.locator('[data-testid="intro-description"]'),
-    ).toBeVisible();
+    await expect(page.locator('[data-testid="view-experience"]')).toBeVisible();
+    await expect(page.locator('[data-testid="read-cv"]')).toBeVisible();
   });
 
   test('should display recent posts', async () => {
@@ -50,40 +48,4 @@ test.describe('index', () => {
       ).not.toHaveText('');
     }
   });
-  test('should display Highlighted projects', async () => {
-    await expect(page.getByText('Highlighted Projects')).toBeVisible();
-
-    for (let i = 0; i < 3; i += 1) {
-      await expect(
-        page.locator('[data-testid="project-image"]').nth(i),
-      ).toBeVisible();
-
-      await expect(
-        page.locator('[data-testid="project-title"]').nth(i),
-      ).toBeVisible();
-
-      await expect(
-        page.locator('[data-testid="project-title"]').nth(i),
-      ).not.toBeEmpty();
-
-      await expect(
-        page.locator('[data-testid="project-intro"]').nth(i),
-      ).toBeVisible();
-
-      await expect(
-        page.locator('[data-testid="project-intro"]').nth(i),
-      ).not.toBeEmpty();
-
-      await expect(
-        page.locator('[data-testid="project-github"]').nth(i),
-      ).toBeVisible();
-
-      const projectLinks = page.locator('[data-testid="project-link"]');
-      if (projectsWithSiteUrls.includes(projectLinks[i])) {
-        await expect(
-          page.locator('[data-testid="project-siteUrl"]').nth(i),
-        ).toBeVisible();
-      }
-    }
-  });
 });

e2e/project.spec.ts

@@ -9,8 +9,12 @@ test.describe('project', () => {
   test.beforeAll(async ({ browser }) => {
     page = await browser.newPage();
     await page.goto(`${baseUrl}/projects`);
-    await expect(page.locator('h1').first()).toHaveText('Projects');
-    await expect(page.locator('p').first()).toHaveText('Personal projects');
+    await expect(page.locator('[data-testid=project-heading]')).toHaveText(
+      'Projects',
+    );
+    await expect(page.locator('[data-testid=project-description]')).toHaveText(
+      "Personal projects I've worked on",
+    );
   });
 
   test('shows project posts & project slug pages correctly', async () => {

next.config.js → next.config.mjs

@@ -1,17 +1,18 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
 
 const withVanillaExtract = createVanillaExtractPlugin();
+
 const contentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' *.youtube.com *.twitter.com *.googletagmanager.com *.vitals.vercel-insights.com static.cloudflareinsights.com eu-assets.i.posthog.com js-agent.newrelic.com;
  child-src *.youtube.com *.google.com *.twitter.com *.googletagmanager.com *.vitals.vercel-insights.com;
- style-src 'self' 'unsafe-inline' *.googleapis.com app-static.eu.posthog.com;
+ style-src 'self' 'unsafe-inline' *.googleapis.com app-static.eu.posthog.com https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css;
  img-src * blob: data: https://*.googletagmanager.com;
  media-src 'none';
  connect-src * cloudflareinsights.com;
- font-src 'self' fonts.gstatic.com;
+ font-src 'self' fonts.gstatic.com https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?;
 `;
+
 const securityHeaders = [
   // https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
   {
@@ -62,9 +63,11 @@ const nextConfig = {
   experimental: {
     webVitalsAttribution: ['CLS', 'LCP'],
     optimizePackageImports: ['framer-motion'],
+
     // Force SWC transform on build to stop Next.js trying to use babel
     // since babel is only needed to support vanilla-extract in unit tests
     forceSwcTransforms: true,
+    serverComponentsExternalPackages: ['shiki'],
 
     // // monitoring
     // serverComponentsExternalPackages: ['newrelic'],
@@ -123,7 +126,7 @@ const nextConfig = {
         headers: [
           {
             key: 'Cache-Control',
-            value: 'public, max-age=31536000, immutable',
+            value: 'public, max-age=3600, immutable', // 1 hour cache
           },
         ],
       },
@@ -132,7 +135,7 @@ const nextConfig = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   webpack: (config, { dev, isServer, ...options }) => {
     if (process.env.ANALYZE) {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      // eslint-disable-next-line @typescript-eslint/no-require-imports, global-require
       const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
       config.plugins.push(
         new BundleAnalyzerPlugin({
@@ -143,6 +146,7 @@ const nextConfig = {
         }),
       );
     }
+
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
@@ -151,4 +155,4 @@ const nextConfig = {
     return config;
   },
 };
-module.exports = withVanillaExtract(nextConfig);
+export default withVanillaExtract(nextConfig);

package.json

@@ -29,16 +29,26 @@
     "@mdx-js/mdx": "^3.1.0",
     "@newrelic/next": "^0.10.0",
     "@next/eslint-plugin-next": "^14.2.15",
+    "@next/mdx": "^15.0.3",
     "@next/third-parties": "^14.2.15",
     "@opentelemetry/api": "^1.9.0",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@rehype-pretty/transformers": "^0.13.2",
+    "@sanity/cli": "^3.63.0",
     "@sanity/client": "^6.22.2",
+    "@sanity/dashboard": "^4.1.0",
     "@sanity/image-url": "^1.1.0",
-    "@shikijs/rehype": "^1.22.2",
+    "@sanity/ui": "^2.8.22",
+    "@sanity/vision": "3.63.0",
+    "@sindresorhus/slugify": "^2.2.1",
     "@tanstack/react-query": "^5.59.19",
     "@tanstack/react-query-next-experimental": "^5.59.19",
     "@vanilla-extract/css": "^1.16.0",
@@ -50,50 +60,67 @@
     "axios": "^1.7.7",
     "check-node-version": "^4.2.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.3",
+    "cmdk": "^1.0.4",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.3",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
+    "easymde": "2",
     "framer-motion": "^11.11.11",
     "gen-env-types": "^1.3.4",
     "gray-matter": "^4.0.3",
     "groq": "3.62.3",
     "immer": "^10.1.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
+    "mdx": "^0.3.1",
     "motion": "^10.18.0",
     "nanoid": "^5.0.8",
     "newrelic": "^12.6.0",
     "next": "^14.2.15",
     "next-mdx-remote": "^5.0.0",
-    "next-sanity": "^9.8.8",
+    "next-sanity": "9.8.10",
     "next-seo": "^6.6.0",
     "next-themes": "^0.3.0",
     "nodemon": "^3.1.7",
     "nprogress": "^0.2.0",
+    "parse-numeric-range": "^1.3.0",
+    "prism-react-renderer": "^2.4.0",
     "prom-client": "^15.1.3",
     "react": "^18.3.1",
+    "react-children-utilities": "^2.10.0",
     "react-dom": "^18.3.1",
     "react-feather": "^2.0.10",
     "react-ga4": "^2.1.0",
     "react-icons": "5.2.1",
     "react-lite-youtube-embed": "^2.4.0",
+    "react-markdown": "^9.0.1",
+    "react-rough-notation": "^1.0.5",
     "react-spring": "^9.7.4",
+    "react-syntax-highlighter": "^15.6.1",
     "react-wrap-balancer": "^1.1.1",
     "rehype-accessible-emojis": "^0.3.2",
     "rehype-code-titles": "^1.2.0",
     "rehype-highlight": "^7.0.1",
+    "rehype-pretty-code": "^0.14.0",
     "rehype-prism-plus": "^2.0.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
     "remark-highlight.js": "^7.0.1",
+    "remark-parse": "^11.0.0",
     "remark-prism": "^1.3.6",
+    "remark-rehype": "^11.1.1",
+    "remark-shiki-twoslash": "^3.1.3",
     "rss": "^1.2.2",
+    "sanity": "3.63.0",
+    "sanity-plugin-markdown": "^4.1.2",
     "sass": "^1.80.6",
     "sharp": "^0.33.5",
     "shiki": "^1.22.2",
     "the-new-css-reset": "^1.11.3",
     "tinykeys": "^3.0.0",
+    "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "use-immer": "^0.10.0",
     "use-roving-index": "^2.0.0",
@@ -104,8 +131,9 @@
     "@commitlint/config-conventional": "^19.5.0",
     "@next/env": "^14.2.15",
     "@playwright/test": "^1.48.2",
+    "@shikijs/rehype": "^1.22.2",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "^1.7.42",
+    "@swc/core": "^1.8.0",
     "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",