fix: Upgrade to Next 15 and optimise page loads

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.idea

.nvmrc

@@ -1 +1 @@
-16.20.1
+24.4.1

.tool-versions

@@ -1 +1 @@
-nodejs 16.20.1
+nodejs 24.4.1

README.md

@@ -9,7 +9,7 @@ This project is built with [Contentful](https://www.contentful.com), [Next.js](h
 
 ### System Requirements
 
-- [Node.js 16.20.1](https://nodejs.org/) or later
+- [Node.js 24.4.1](https://nodejs.org/) or later
 
 ### Setup
 
@@ -20,22 +20,18 @@ Follow nvm setup instructions [here](https://github.com/nvm-sh/nvm/blob/master/R
 2. Install Node.js locally
 
 ```
-nvm install 16.20.1
-nvm use 16.20.1
+nvm install 24.4.1
+nvm use 24.4.1
 ```
 
-3. Install `yarn`
+3. Install `pnpm`
 
-```
-npm install yarn -g
-```
+Follow pnpm setup instruction [here](https://pnpm.io/installation).
 
 4. Install dependencies
 
-Using `--frozen-lockfile` makes sure that the environment is consistent on any machine by installing the exact package versions listed in the [yarn.lock](yarn.lock).
-
 ```
-yarn install --frozen-lockfile
+pnpm install
 ```
 
 5. Signup for a free [Contentful](https://www.contentful.com/) account and create an organisation and within that create a space.
@@ -59,15 +55,14 @@ yarn install --frozen-lockfile
 ## Developing
 
 - For accessbility testing we use the [axe-react](https://github.com/dequelabs/axe-core-npm/blob/develop/packages/react/README.md) plugin.
-- We use the [Headwind](https://github.com/heybourn/headwind) VSCode extension for sorting TailwindCSS classes.
 - We use [classnames](https://www.npmjs.com/package/classnames) to organise our classes into groups that combine at build time.
 
 If you are new to Next.js, this is a helpful introduction: https://nextjs.org/docs
 
 Now you can run the development server:
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the Session homepage.
@@ -136,7 +131,7 @@ We can't use template literals with classes if we want to purge (shrink) the CSS
 You can run the project in a production environment by running:
 
 ```
-yarn run build && yarn run start
+pnpm run build && pnpm run start
 ```
 
 **Make sure to do this locally and check for errors before pushing any code changes to your hosted repository**
@@ -150,7 +145,7 @@ If you want to see your Contentful changes faster while using a production serve
 You can test the project in a staging environment by running:
 
 ```
-yarn run build:staging && yarn run start:staging
+pnpm run build:staging && pnpm run start:staging
 ```
 
 Staging environments are password protected using the password you assign to `STAGING_SECRET` in `.env.local`.

biome.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["./**/*.ts", "./**/*.tsx"]
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "bracketSpacing": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "recommended": true,
+        "noUndeclaredDependencies": "off",
+        "useImportExtensions": "off"
+      },
+      "complexity": {
+        "recommended": true,
+        "noVoid": "off",
+        "useSimplifiedLogicExpression": "off",
+        "noExcessiveCognitiveComplexity": {
+          "level": "warn",
+          "options": {
+            "maxAllowedComplexity": 20
+          }
+        }
+      },
+      "a11y": {
+        "recommended": true
+      },
+      "performance": {
+        "recommended": true,
+        "noBarrelFile": "off",
+        "noReExportAll": "off"
+      },
+      "security": {
+        "recommended": true
+      },
+      "suspicious": {
+        "recommended": true,
+        "noReactSpecificProps": "off",
+        "noConsole": "off"
+      },
+      "nursery": {
+        "useSortedClasses": {
+          "fix": "safe",
+          "level": "info",
+          "options": {
+            "functions": ["clsx", "cva", "cn"]
+          }
+        }
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

components/BlogPost.tsx

@@ -0,0 +1,35 @@
+import type { ReactElement } from 'react';
+import Post from '@/components/posts/Post';
+import Layout from '@/components/ui/Layout';
+import METADATA from '@/constants/metadata';
+import type { IPost } from '@/types/cms';
+
+interface Props {
+  post: IPost;
+  otherPosts?: IPost[];
+}
+
+export default function BlogPost(props: Props): ReactElement {
+  const { post } = props;
+  return (
+    <Layout
+      title={post.title}
+      metadata={{
+        TYPE: 'article',
+        DESCRIPTION: post.description,
+        CANONICAL_URL: `${METADATA.HOST_URL}/blog`,
+        OG_IMAGE: {
+          URL: post.featureImage?.imageUrl ?? METADATA.OG_IMAGE.URL,
+          WIDTH: Number(post.featureImage?.width) ?? METADATA.OG_IMAGE.WIDTH,
+          HEIGHT: Number(post.featureImage?.height) ?? METADATA.OG_IMAGE.HEIGHT,
+          ALT: post.featureImage?.title ?? METADATA.OG_IMAGE.ALT,
+        },
+        TAGS: post.tags,
+        ARTICLE_SECTION: post.tags[0],
+        PUBLISHED_TIME: post.publishedDateISO,
+      }}
+    >
+      <Post {...props} />
+    </Layout>
+  );
+}

components/Container/index.tsx → components/Container.tsx

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
+import type { ReactElement, ReactNode } from 'react';
 import { useScreen } from '@/contexts/screen';
 
 export interface IContainerSizes {
@@ -20,14 +20,7 @@ interface Props {
 }
 
 export default function Container(props: Props): ReactElement {
-  const {
-    id,
-    hasMinHeight = false,
-    heights,
-    fullWidth = false,
-    classes,
-    children,
-  } = props;
+  const { id, hasMinHeight = false, heights, fullWidth = false, classes, children } = props;
   const minHeights: IContainerSizes = {
     small: '568px',
     medium: '1024px',
@@ -50,11 +43,7 @@ export default function Container(props: Props): ReactElement {
       id={id}
       className={classNames(
         'mx-auto',
-        !fullWidth && [
-          'container max-w-6xl p-6',
-          'md:p-12',
-          'lg:py-0 lg:px-10',
-        ],
+        !fullWidth && ['container max-w-6xl p-6', 'md:p-12', 'lg:px-10 lg:py-0'],
         classes
       )}
       // mobile safari needs style props to be explicitly undefined if not used