Fix page not found

.github/workflows/deploy.yml

@@ -1,6 +1,9 @@
 name: "Deploy frontend"
 
 on:
+  push:
+    branches:
+      - "main"
   workflow_dispatch:
 
 jobs:
@@ -18,6 +21,11 @@ jobs:
       - name: Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: Run Typecheck/Lint
+        run: |
+          npm run lint
+          npm run typecheck
+
       - name: Run frontend tests
         run: |
           npm run build

app/components/Header/Header.tsx

@@ -15,7 +15,6 @@ export function Header({ links }: Props) {
               <NavLink
                 to={link.url}
                 className={({ isActive }) => (isActive ? styles.active : "")}
-                prefetch="intent"
               >
                 {link.name}
               </NavLink>

app/components/NotFound/NotFound.module.css

@@ -0,0 +1,3 @@
+.container {
+  width: 100%;
+}

app/components/NotFound/NotFound.tsx

@@ -0,0 +1,11 @@
+import { Link } from "@remix-run/react";
+import styles from "./NotFound.module.css";
+
+export function NotFound() {
+  return (
+    <div className={styles.container}>
+      <h2>Denne siden finnes ikke lenger</h2>
+      <Link to={"/"}>Gå til forsiden</Link>
+    </div>
+  );
+}

app/components/PageLayout/PageLayout.module.css

@@ -1,13 +1,15 @@
 .container {
   display: flex;
   gap: 24px;
-  margin-top: 24px;
+  margin: 24px 0px;
   max-width: var(--width-max-content);
+  width: 100%;
+  box-sizing: border-box;
 }
 
 @media only screen and (max-width: 600px) {
   .container {
-    padding: 0 8px;
+    padding: 0px 8px;
     flex-direction: column;
     align-items: start;
   }

app/components/PageLayout/PageLayout.tsx

@@ -2,7 +2,7 @@ import styles from "./PageLayout.module.css";
 
 type Props = {
   content: React.ReactNode;
-  rightContent: React.ReactNode;
+  rightContent?: React.ReactNode;
 };
 export function PageLayout({ content, rightContent }: Props) {
   return (

app/index.css

@@ -11,10 +11,6 @@ body {
   padding: 0;
 }
 
-main {
-  margin-bottom: 26px;
-}
-
 h1,
 h2,
 h3,

app/root.tsx

@@ -5,13 +5,15 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useRouteError,
   useRouteLoaderData,
 } from "@remix-run/react";
 import { getPages } from "./sanity";
 import { Header } from "./components/Header/Header";
 import "./index.css";
 import { Container } from "./components/Container/Container";
 import { Footer } from "./components/Footer/Footer";
+import { LoaderFunctionArgs } from "@remix-run/node";
 
 export const meta: MetaFunction = () => {
   return [
@@ -61,8 +63,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export async function clientLoader() {
-  return { pages: await getPages() };
+export async function clientLoader({ request }: LoaderFunctionArgs) {
+  return { pages: await getPages(request.signal) };
 }
 
 export default function App() {
@@ -72,3 +74,20 @@ export default function App() {
 export function HydrateFallback() {
   return <p>Laster...</p>;
 }
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return <h1>Unknown Error</h1>;
+  }
+}

app/routes/$pageSlug.tsx

@@ -6,10 +6,12 @@ import { PageLayout } from "~/components/PageLayout/PageLayout";
 import { TextBlock } from "~/components/TextBlock/TextBlock";
 import { ImageGrid } from "~/components/Image/Image";
 import { getPageContent } from "~/sanity";
+import { NotFound } from "~/components/NotFound/NotFound";
 
 export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
+  const title = data?.page ? "Accosta | " + data?.page.title : "Accosta";
   return [
-    { title: "Accosta | " + data?.page.title },
+    { title },
     {
       name: "description",
       content:
@@ -19,9 +21,10 @@ export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
 };
 
 export async function clientLoader({
+  request,
   params: { pageSlug },
 }: LoaderFunctionArgs) {
-  return { page: await getPageContent(pageSlug) };
+  return { page: await getPageContent(pageSlug, request.signal) };
 }
 
 const components: ComponentProps<typeof PortableText>["components"] = {
@@ -39,6 +42,11 @@ const components: ComponentProps<typeof PortableText>["components"] = {
 
 export default function Page() {
   const { page } = useLoaderData<typeof clientLoader>();
+
+  if (page === null) {
+    return <PageLayout content={<NotFound />} />;
+  }
+
   return (
     <PageLayout
       content={<PortableText value={page.content} components={components} />}

app/sanity.ts

@@ -14,21 +14,28 @@ type Slug = {
 };
 
 // uses GROQ to query content: https://www.sanity.io/docs/groq
-export async function getPages(): Promise<{ title: string; slug: Slug }[]> {
+export async function getPages(
+  signal: AbortSignal
+): Promise<{ title: string; slug: Slug }[]> {
   return client.fetch(
     `*[_type == "page"] | order(order asc) {
     title,
     slug,
     order
-  }`
+  }`,
+    {},
+    { signal }
   );
 }
 
-export async function getPageContent(slug: string | undefined): Promise<{
+export async function getPageContent(
+  slug: string | undefined,
+  signal: AbortSignal
+): Promise<{
   title: string;
   content: PortableTextBlock;
   sideContent: PortableTextBlock;
-}> {
+} | null> {
   return client.fetch(
     `*[_type == "page" && slug.current == "${slug}"]{
       title,
@@ -41,6 +48,8 @@ export async function getPageContent(slug: string | undefined): Promise<{
         "images": lineImages[]->{ "imageUrl" : image.asset -> url, alt, link, size, showAltText },
         ...
       }
-    }[0]`
+    }[0]`,
+    {},
+    { signal }
   );
 }