Merge pull request #13 from nblackburn/feature/404

404 page

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.3.0",
+    "version": "1.4.0",
     "scripts": {
         "start": "astro dev",
         "build": "astro build",

src/components/notFound.css.ts

@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css';
+import { sizes, vars, primaryAccent, containers } from '@styles/theme.css';
+
+export const notFound = style({
+    flex: 1,
+    display: 'flex',
+    fontSize: '1.2rem',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center'
+});
+
+export const container = style({
+    textAlign: 'center',
+    maxWidth: containers.small
+});
+
+export const title = style({
+    margin: 0,
+    fontWeight: 'bold',
+    color: primaryAccent,
+    fontSize: sizes.xtraLarge,
+    marginBottom: sizes.small
+});
+
+export const subTitle = style({
+    margin: 0,
+    fontSize: sizes.medium,
+    color: vars.colors.davyGrey,
+    '@media': {
+        '(prefers-color-scheme: dark)': {
+            color: vars.colors.silverChalice
+        }
+    }
+});
+
+export const description = style({
+    lineHeight: 1.5
+});

src/components/notFound.vue

@@ -0,0 +1,22 @@
+<template>
+    <section :class="styles.notFound">
+        <div :class="styles.container">
+            <h1 :class="styles.title">404</h1>
+            <h2 :class="styles.subTitle">Page not found</h2>
+            <p :class="styles.description">
+                Well this is embarrasing, the link you clicked appears to be
+                broken or the page has moved.
+            </p>
+        </div>
+    </section>
+</template>
+
+<script lang="ts">
+import * as styles from './notFound.css';
+
+export default {
+    setup() {
+        return { styles };
+    }
+};
+</script>

src/layouts/base.astro

@@ -11,7 +11,7 @@ import { getActivePalette } from '@utilities/paletteManager';
 
 export interface Props {
     title: string;
-    activePage: string;
+    activePage?: string;
     description?: string;
 }
 

src/pages/404.astro

@@ -0,0 +1,11 @@
+---
+import BaseLayout from '@layouts/base.astro';
+import NotFound from '@components/notFound.vue';
+
+const title = '404';
+const description = 'Page not found';
+---
+
+<BaseLayout title={title} description={description}>
+    <NotFound />
+</BaseLayout>