mirror of
https://github.com/nature-of-code/noc-book-2
synced 2024-11-16 07:47:48 +01:00
Merge pull request #1009 from nature-of-code/dev/404
[feature] 404 page
This commit is contained in:
Daniel Shiffman
GitHub
commit
9f93526894
3 changed files with 227 additions and 5 deletions
|
|
@ -1,11 +1,80 @@
|
|||
import * as React from 'react';
|
||||
import { graphql, navigate } from 'gatsby';
|
||||
|
||||
import BaseLayout from '../layouts/BaseLayout';
|
||||
import { getRandomItem } from '../utils';
|
||||
|
||||
export default function NotFoundPage({ data }) {
|
||||
const [sketch, setSketch] = React.useState(null);
|
||||
const navigateToRandomChapter = () => {
|
||||
const {
|
||||
node: { slug },
|
||||
} = getRandomItem(data.allBookSection.edges);
|
||||
navigate(`/${slug}/`);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const getSketches = async () => {
|
||||
const sketches = await import('/static/404_sketches.json');
|
||||
setSketch(sketches?.[0] && getRandomItem(sketches));
|
||||
};
|
||||
|
||||
getSketches();
|
||||
}, []);
|
||||
|
||||
export default function NotFoundPage() {
|
||||
return (
|
||||
<div className="px-4">
|
||||
<div className="prose mx-auto my-8">
|
||||
<h1>404</h1>
|
||||
<BaseLayout>
|
||||
<div className="mx-auto my-8 flex max-w-6xl flex-col items-center">
|
||||
<h1 className="text-2xl font-bold">404 Page Not Found</h1>
|
||||
|
||||
{sketch && (
|
||||
<>
|
||||
<iframe
|
||||
title="Embedded p5.js sketch"
|
||||
src={sketch.url}
|
||||
height={644}
|
||||
width={802}
|
||||
className="mt-10 h-[644px] w-[802px] overflow-hidden rounded-xl border border-noc-200"
|
||||
></iframe>
|
||||
<p className="mt-2">
|
||||
<span>by </span>
|
||||
{sketch.name && <span>{sketch.name}</span>}
|
||||
{sketch.socialMedia && (
|
||||
<>
|
||||
<span className="mx-2 text-gray-400">|</span>
|
||||
<a
|
||||
href={sketch.socialMedia.url}
|
||||
className="text-noc-500"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{sketch.socialMedia.handle}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="mt-12 rounded-xl bg-noc-400 px-4 py-2 text-sm font-medium text-white"
|
||||
onClick={navigateToRandomChapter}
|
||||
>
|
||||
Bring Me To a Random Chapter!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export const query = graphql`
|
||||
query QueryTargetChapters {
|
||||
allBookSection(filter: { type: { eq: "chapter" } }) {
|
||||
edges {
|
||||
node {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
4
src/utils/index.js
Normal file
4
src/utils/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export const getRandomItem = (array) => {
|
||||
const randomIndex = Math.floor(Math.random() * array.length);
|
||||
return array[randomIndex];
|
||||
};
|
||||
149
static/404_sketches.json
Normal file
149
static/404_sketches.json
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
[
|
||||
{
|
||||
"url": "https://editor.p5js.org/kcarollee/full/r4DSHTU1M",
|
||||
"name": "Dukwon Karl Lee",
|
||||
"socialMedia": {
|
||||
"handle": "@kleemotfd",
|
||||
"url": "https://www.instagram.com/kleemotfd"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/ajuancer/full/L_3kqVNYQ",
|
||||
"name": "juancer",
|
||||
"socialMedia": {
|
||||
"handle": "juancer.me",
|
||||
"url": "https://juancer.me"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/moloxe/full/6TmgtimNB",
|
||||
"name": "Franco Moloche",
|
||||
"socialMedia": {
|
||||
"handle": "@franco.moloche",
|
||||
"url": "https://www.instagram.com/franco.moloche"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/Jennybkowalski/full/glUn71KN4",
|
||||
"name": "Jenny Kowalski",
|
||||
"socialMedia": {
|
||||
"handle": "@jennybkowalski",
|
||||
"url": "https://www.instagram.com/jennybkowalski"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/emeraldblackbird/full/Bz75zcXwa",
|
||||
"name": "Prisha B.",
|
||||
"socialMedia": {
|
||||
"handle": "@prishainabox",
|
||||
"url": "https://www.instagram.com/prishainabox"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/ant.bchan/full/Fw5hshI31",
|
||||
"name": "Antoinette Bumatay-Chan",
|
||||
"socialMedia": {
|
||||
"handle": "@antoinette.creates",
|
||||
"url": "https://www.instagram.com/antoinette.creates"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/ant.bchan/full/U7pOlDx8l",
|
||||
"name": "Antoinette Bumatay-Chan",
|
||||
"socialMedia": {
|
||||
"handle": "@antoinette.creates",
|
||||
"url": "https://www.instagram.com/antoinette.creates"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/greggelong/full/UACX4d56k",
|
||||
"name": "Gregory Kreisman",
|
||||
"socialMedia": {
|
||||
"handle": "@gregkreisman",
|
||||
"url": "https://www.instagram.com/gregkreisman"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/electr0cute/full/c45QD_KC8",
|
||||
"name": "Yafira",
|
||||
"socialMedia": {
|
||||
"handle": "@electrocutelab",
|
||||
"url": "https://www.instagram.com/electrocutelab"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/melissarodriguez/full/9EOgYp9Za",
|
||||
"name": "Melissa Rodriguez",
|
||||
"socialMedia": {
|
||||
"handle": "@hellomelissarodriguez",
|
||||
"url": "https://www.instagram.com/hellomelissarodriguez"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/ricoloic/full/cJmC8qLQp",
|
||||
"name": "Rico Studio",
|
||||
"socialMedia": {
|
||||
"handle": "@rico_studio",
|
||||
"url": "https://www.youtube.com/@rico_studio"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/benoitwimart/full/qEkwBbDyp",
|
||||
"name": "benoit wimart",
|
||||
"socialMedia": {
|
||||
"handle": "@modulofont",
|
||||
"url": "https://www.instagram.com/modulofont"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/kfahn/full/ZC3MhXe6Q",
|
||||
"name": "Kathy McGuiness",
|
||||
"socialMedia": {
|
||||
"handle": "kfahn22",
|
||||
"url": "https://www.github.com/kfahn22"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/leptr/full/L9uyWDVs4",
|
||||
"name": "Peter",
|
||||
"socialMedia": {
|
||||
"handle": "@dazaittv",
|
||||
"url": "https://x.com/dazaittv"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/kfahn/full/cN5k0ZOQ6",
|
||||
"name": "Kathy McGuiness"
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/cchristina/full/xeTVmGOOc",
|
||||
"name": "xtina",
|
||||
"socialMedia": {
|
||||
"handle": "xtina.gif"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/.Fragmented_HF_ang./full/r5x8heUVP",
|
||||
"name": "HF_ang"
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/.Fragmented_HF_ang./full/trT1x8SSh",
|
||||
"name": "HF_ang1012"
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/ChDudek/full/YzVl69jQf",
|
||||
"name": "ChDudek",
|
||||
"socialMedia": {
|
||||
"handle": "@ChDudek",
|
||||
"url": "https://x.com/ChDudek"
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "https://editor.p5js.org/Azz_adi/full/0amqRHapw",
|
||||
"name": "Aditya T. Kanade",
|
||||
"socialMedia": {
|
||||
"handle": "@azz_adi.xzbit",
|
||||
"url": "https://www.instagram.com/azz_adi.xzbit"
|
||||
}
|
||||
}
|
||||
]
|
||||
Loading…
Reference in a new issue