Not Found Page

fresh.gen.ts

@@ -3,25 +3,33 @@
 // This file is automatically updated during development when running `dev.ts`.
 
 import config from "./deno.json" assert { type: "json" };
-import * as $0 from "./routes/_app.tsx";
-import * as $1 from "./routes/api/graphqlGateway.ts";
-import * as $2 from "./routes/index.tsx";
-import * as $3 from "./routes/products/[product].tsx";
+import * as $0 from "./routes/[pageNotFound].tsx";
+import * as $1 from "./routes/_404.tsx";
+import * as $2 from "./routes/_app.tsx";
+import * as $3 from "./routes/api/graphqlGateway.ts";
+import * as $4 from "./routes/index.tsx";
+import * as $5 from "./routes/products/[product].tsx";
 import * as $$0 from "./islands/AddToCart.tsx";
 import * as $$1 from "./islands/Cart.tsx";
-import * as $$2 from "./islands/ProductDetails.tsx";
+import * as $$2 from "./islands/PageNotFoundCounter.tsx";
+import * as $$3 from "./islands/ProductDetails.tsx";
+import * as $$4 from "./islands/RedirectTo404.tsx";
 
 const manifest = {
   routes: {
-    "./routes/_app.tsx": $0,
-    "./routes/api/graphqlGateway.ts": $1,
-    "./routes/index.tsx": $2,
-    "./routes/products/[product].tsx": $3,
+    "./routes/[pageNotFound].tsx": $0,
+    "./routes/_404.tsx": $1,
+    "./routes/_app.tsx": $2,
+    "./routes/api/graphqlGateway.ts": $3,
+    "./routes/index.tsx": $4,
+    "./routes/products/[product].tsx": $5,
   },
   islands: {
     "./islands/AddToCart.tsx": $$0,
     "./islands/Cart.tsx": $$1,
-    "./islands/ProductDetails.tsx": $$2,
+    "./islands/PageNotFoundCounter.tsx": $$2,
+    "./islands/ProductDetails.tsx": $$3,
+    "./islands/RedirectTo404.tsx": $$4,
   },
   baseUrl: import.meta.url,
   config,

islands/PageNotFoundCounter.tsx

@@ -0,0 +1,40 @@
+import { useState, useEffect } from "preact/hooks";
+
+interface TimerProps {
+	initialSeconds: number;
+}
+
+const PageNotFoundCounter = ({ initialSeconds }: TimerProps) => {
+	const [seconds, setSeconds] = useState(initialSeconds);
+
+	useEffect(() => {
+		const myInterval = setInterval(() => {
+			if (seconds > 0) {
+				setSeconds(seconds - 1);
+			}
+		}, 1000);
+		return () => {
+			clearInterval(myInterval);
+		};
+	});
+
+	useEffect(() => {
+		if (seconds > 0) return;
+		location.href = "/";
+	}, [seconds]);
+
+	return (
+		<div>
+			{seconds === 0 ? (
+				<span class="text-bold text-2xl">Redirecting...</span>
+			) : (
+				<span class="text-bold text-2xl">
+					We will automatically redirect you to the homepage in
+					{" " + seconds} seconds.
+				</span>
+			)}
+		</div>
+	);
+};
+
+export default PageNotFoundCounter;

islands/RedirectTo404.tsx

@@ -0,0 +1,11 @@
+import {  useEffect } from "preact/hooks";
+
+const RedirectTo404 = () => {
+	useEffect(() => {
+		location.href = "/404";
+	}, []);
+
+	return <>/</>;
+};
+
+export default RedirectTo404;

routes/[pageNotFound].tsx

@@ -0,0 +1,51 @@
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { Footer } from "../components/Footer.tsx";
+import { HeadElement } from "../components/HeadElement.tsx";
+import { Header } from "../components/Header.tsx";
+import PageNotFoundCounter from "../islands/PageNotFoundCounter.tsx";
+import { graphqlClient } from "../utils/graphql.ts";
+
+const q = `query {
+    page (id:"UGFnZTox") {
+      title
+      content
+    }
+  }`;
+
+export const handler: Handlers = {
+	async GET(_req, ctx) {
+		const data = await graphqlClient(q);
+		return ctx.render(data);
+	},
+};
+
+export default function RandomPage(ctx: PageProps) {
+	const {
+		data: {
+			page: { title, content },
+		},
+		url,
+	} = ctx;
+
+	const formattedContent = JSON.parse(content);
+	const notFoundMessage = formattedContent.blocks[0]?.data?.text;
+
+	return (
+		<div>
+			<HeadElement description="Demo for Saleor Merch, powered by Deno" image={url.href + "og-image.png"} title="Saleor + Deno merch demo" url={url} />
+			<Header />
+			<div class="w-11/12 max-w-5xl mx-auto mt-28">
+				<div class="text-center">
+					<span class="text-bold text-2xl">{title}</span>
+				</div>
+				<div class="text-center mt-6">
+					<span class="text-bold text-1xl">{notFoundMessage ?? "You are not supposed to be here"}</span>
+				</div>
+				<div class="flex justify-center mt-12">
+					<PageNotFoundCounter initialSeconds={15}  />
+				</div>
+			</div>
+			<Footer />
+		</div>
+	);
+}

routes/_404.tsx

@@ -0,0 +1,5 @@
+import RedirectTo404 from "../islands/RedirectTo404.tsx";
+
+export default function NotFoundPage() {
+	return <RedirectTo404 />;
+}

routes/index.tsx

@@ -8,7 +8,7 @@ import IconCart from "@/components/IconCart.tsx";
 import { List, Product } from "../utils/types.ts";
 
 const q = `{
-  products(first: 25, channel: "default-channel", filter:{categories:["Q2F0ZWdvcnk6MTQ="]}) {
+  products(first: 25, channel: "default-channel", filter:{}) {
     edges {
       node {
         id