Add basic 404.

nulib · Mar 9, 2023 · 7064c99 · 7064c99
1 parent 34d19f8
commit 7064c99
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 3 deletions.
diff --git a/components/Hero/Basic.styled.ts b/components/Hero/Basic.styled.ts
@@ -10,6 +10,7 @@ const HeroBasicStyled = styled("section", {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
+  background: "url(/images/liz__O8A9903_final.jpg)",
 
   "&:before": {
     content: "",
@@ -18,7 +19,6 @@ const HeroBasicStyled = styled("section", {
     left: 0,
     width: "100%",
     height: "100%",
-    background: "url(/images/liz__O8A9903_final.jpg)",
     backgroundRepeat: "no-repeat",
     backgroundSize: "cover",
     backgroundPosition: "center, center",

diff --git a/components/Hero/Basic.tsx b/components/Hero/Basic.tsx
@@ -10,7 +10,7 @@ const HeroBasic: React.FC<Props> = ({ bgImage, children }) => {
   return (
     <HeroBasicStyled
       css={{
-        heroBgImage: bgImage,
+        background: `url(${bgImage})`,
       }}
     >
       <Content>{children}</Content>

diff --git a/components/Hero/Hero.styled.ts b/components/Hero/Hero.styled.ts
@@ -3,7 +3,7 @@ import { styled } from "@/stitches.config";
 /* eslint sort-keys: 0 */
 
 const HeroActions = styled("div", {
-  paddingTop: "$gr3",
+  marginTop: "$gr4",
 
   a: {
     textTransform: "uppercase",

diff --git a/lib/constants/404.ts b/lib/constants/404.ts
@@ -0,0 +1,60 @@
+import { DC_URL } from "./endpoints";
+import { HeroCollection } from "./homepage";
+
+/* eslint sort-keys: 0 */
+
+export const pageNotFoundCollection: HeroCollection = {
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  id: "https://devbox.library.northwestern.edu:3000/homepage-hero.json",
+  type: "Collection",
+  label: {
+    none: ["Page Not Found"],
+  },
+  items: [
+    {
+      id: "https://api.dc.library.northwestern.edu/api/v2/works/f880a614-6e75-4cd0-9af6-8b86af34f370?as=iiif",
+      type: "Collection",
+      label: { none: ["Page Not Found"] },
+      summary: {
+        none: [
+          "Sorry, the page you are looking for does not exist here. Please try again.",
+        ],
+      },
+      thumbnail: [
+        {
+          id: `/full/3000,/0/default.jpg`,
+          type: "Image",
+          format: "image/jpeg",
+          service: [
+            {
+              id: "https://iiif.dc.library.northwestern.edu/iiif/2/2b1e0758-122f-4f45-b37b-393f2ab0427e",
+              profile: "http://iiif.io/api/image/2/level2.json",
+              type: "ImageService2",
+            },
+          ],
+          width: 1650,
+          height: 1309,
+        },
+      ],
+      homepage: [
+        {
+          id: `${DC_URL}`,
+          type: "Text",
+        },
+      ],
+      seeAlso: [
+        {
+          id: `${DC_URL}`,
+          type: "Text",
+          label: { none: ["To Homepage"] },
+        },
+        {
+          id: `${DC_URL}/search`,
+          type: "Text",
+          label: { none: ["Search Works"] },
+        },
+      ],
+      nul_hero_region: "350,200,5000,4000",
+    },
+  ],
+};
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -0,0 +1,36 @@
+import Head from "next/head";
+import Hero from "@/components/Hero/Hero";
+import Layout from "@/components/layout";
+import type { NextPage } from "next";
+import { loadDefaultStructuredData } from "@/lib/json-ld";
+import { pageNotFoundCollection } from "@/lib/constants/404";
+import { styled } from "@/stitches.config";
+
+const StyledPageNotFound = styled("div", {
+  minHeight: "60vh",
+  position: "relative",
+});
+
+const PageNotFound: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <script
+          key="app-ld-json"
+          id="app-ld-json"
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(loadDefaultStructuredData(), null, "\t"),
+          }}
+        />
+      </Head>
+      <Layout header="hero">
+        <StyledPageNotFound>
+          <Hero collection={pageNotFoundCollection} />
+        </StyledPageNotFound>
+      </Layout>
+    </>
+  );
+};
+
+export default PageNotFound;
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
@@ -203,6 +203,11 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   const id = context?.params?.id;
   const collection = await getCollection(id as string);
 
+  if (typeof collection === "undefined")
+    return {
+      notFound: true,
+    };
+
   /** Add values to GTM's dataLayer object */
   const dataLayer = buildDataLayer({
     adminset: "",

diff --git a/pages/items/[id].tsx b/pages/items/[id].tsx
@@ -114,6 +114,11 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   const id = context?.params?.id;
   const work = await getWork(id as string);
 
+  if (typeof work === "undefined")
+    return {
+      notFound: true,
+    };
+
   const collectionWorkCounts = work?.collection
     ? await getCollectionWorkCounts(work?.collection.id)
     : null;