content: template and content update for 404 page

ajfisher · Dec 7, 2024 · 6db4ef5 · 6db4ef5
1 parent 463477f
commit 6db4ef5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 15 deletions.
diff --git a/site/src/components/layout.js b/site/src/components/layout.js
@@ -135,12 +135,14 @@ export const Aside = styled.aside`
   }
 `;
 
-const Layout = ({ children, title, excerpt, largetitle, smalltitle, slug}) => {
+const Layout = ({ children, title, excerpt, featuredimage, largetitle, smalltitle, slug}) => {
 
   return (
     <>
       <Header title={title} excerpt={excerpt}
-        largetitle={largetitle} smalltitle={smalltitle}/>
+        largetitle={largetitle} smalltitle={smalltitle}
+        featuredimage={featuredimage}
+      />
       <Main>
         <Article>
           {children}

diff --git a/site/src/pages/404.js b/site/src/pages/404.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'gatsby';
+import { Link, graphql } from 'gatsby';
 
 import Layout from '../components/layout';
 import PageHead from '../components/page-head';
@@ -8,36 +8,63 @@ export const Head = () => {
   return (
     <>
       <PageHead
-        title="This page cannot be found | ajfisher"
+        title="This page cannot be found"
         description="The page you requested does not exist or has moved."
         type="website"
       />
     </>
   );
 };
 
-const NotFoundPage = ({location}) => {
+const NotFoundPage = ({location, data}) => {
+  const { featureimage } = data?.headimage?.nodes[0];
+
+  const featuredImage = featureimage || null;
+
   const title = 'This page cannot be found';
   const slug = '/404';
-  const excerpt = `Sometimes life is hard and doesn't give us what we want. This is one of those times. The page you have requested does not exist or has moved somewhere else.`;
+  const excerpt = `Hmmm, this is awkward. The page you’re looking for vanished into the ether or never existed in the first place. Either way, it’s not here. Let’s find you something better!`;
 
   return (
-    <Layout slug={slug} title={title} excerpt={excerpt} largetitle="true" >
+    <Layout slug={slug} title={title} excerpt={excerpt}
+      largetitle="true" featuredimage={featuredImage}
+    >
       <PageHead title={title}/>
       <section class="content">
         <p>You made a request for <strong>{location.pathname}</strong>.</p>
-        <p>Unfortunately this page doesn't exist or has been permanently moved
-        somewhere else without a redirection.</p>
+        <p>This page doesn't exist or has been moved permanently.</p>
+
         <h2>Where to next?</h2>
-        <p>Going back to the <Link to="/">home page</Link> will show you featured
-          articles and recent posts.</p>
-        <p>You can also <Link to="/who">learn about ajfisher</Link> if
-          you want to find out more about what he does and where he works.</p>
-        <p>Finally, if nothing else, you can check out <Link to="/blog">the full
-          list of articles</Link> that have ever been published.</p>
+        <p>
+          1. <Link to="/">Go to the home page</Link>: Check out recent articles
+          and featured content.
+        </p>
+        <p>
+          2. <Link to="/who">Learn more about ajfisher</Link>: Find out what I
+          do and how I do it.
+        </p>
+        <p>
+          3. <Link to="/blog">Explore all articles</Link>: Peruse the complete
+          archive of published content.
+        </p>
       </section>
     </Layout>
   );
 };
 
 export default NotFoundPage
+
+export const pageQuery = graphql`
+  query {
+    headimage: allImageSharp(
+      filter: {original: {
+        src: {regex: "/404_page/"}
+      }}
+    ) {
+      nodes {
+        id
+        featureimage: gatsbyImageData(layout: FULL_WIDTH)
+      }
+    }
+  }
+`;