remove per-page getLayout option (maybe temporarily?)

pages/_app.tsx

@@ -9,18 +9,10 @@ import * as config from "../lib/config";
 import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
 import { themeClassNames } from "../lib/styles/helpers/themes";
 import { globalStyles } from "../lib/styles/stitches.config";
-import type { ReactElement, ReactNode } from "react";
-import type { NextPage } from "next";
 import type { AppProps as NextAppProps } from "next/app";
 
 // https://nextjs.org/docs/basic-features/layouts#with-typescript
-export type AppProps = NextAppProps & {
-  Component: NextPage & {
-    getLayout?: (page: ReactElement) => ReactNode;
-  };
-};
-
-const App = ({ Component, pageProps }: AppProps) => {
+const App = ({ Component, pageProps }: NextAppProps) => {
   const router = useRouter();
 
   // get this page's URL with full domain, and hack around query parameters and anchors
@@ -48,14 +40,11 @@ const App = ({ Component, pageProps }: AppProps) => {
       // unassign event listener
       router.events.off("routeChangeComplete", onRouteChangeComplete);
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [router.events]);
 
   // inject body styles defined in ../lib/styles/stitches.config.ts
   globalStyles();
 
-  // allow layout overrides per-page, but default to plain `<Layout />`
-  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
-
   return (
     <ThemeProvider classNames={themeClassNames}>
       {/* all SEO config is in ../lib/config/seo.ts except for canonical URLs, which require access to next router */}
@@ -72,7 +61,9 @@ const App = ({ Component, pageProps }: AppProps) => {
       />
       <SocialProfileJsonLd {...socialProfileJsonLd} />
 
-      {getLayout(<Component {...pageProps} />)}
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </ThemeProvider>
   );
 };

pages/y2k.tsx

@@ -1,9 +1,7 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { NextSeo } from "next-seo";
-import Layout from "../components/Layout";
-import Wallpaper from "../components/Wallpaper";
-import type { ReactElement } from "react";
+import { styled } from "../lib/styles/stitches.config";
 
 // obviously, an interactive VNC display will not work even a little bit server-side
 const VNC = dynamic(() => import("../components/VNC"), { ssr: false });
@@ -11,7 +9,25 @@ const VNC = dynamic(() => import("../components/VNC"), { ssr: false });
 // https://github.com/jakejarvis/y2k
 const SOCKET_PROXY = "wss://y2k.jrvs.io";
 
+const Wallpaper = styled("div", {
+  display: "flex",
+  width: "100%",
+  minHeight: "450px",
+  padding: "1.5em 0",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundRepeat: "repeat",
+  backgroundPosition: "center",
+});
+
 const Y2K = () => {
+  const [wallpaperUrl, setWallpaperUrl] = useState("");
+
+  // set a random retro Windows ME desktop tile for the entire content area
+  useEffect(() => {
+    setWallpaperUrl(`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`);
+  }, []);
+
   // print a fancy console message (in browser only) just for funsies
   useEffect(() => {
     console.log(
@@ -39,32 +55,11 @@ const Y2K = () => {
         }}
       />
 
-      <VNC server={SOCKET_PROXY} />
+      <Wallpaper style={{ backgroundImage: wallpaperUrl ? `url(${wallpaperUrl})` : "" }}>
+        <VNC server={SOCKET_PROXY} />
+      </Wallpaper>
     </>
   );
 };
 
-// disable layout's default styles so the wallpaper component can go edge-to-edge:
-Y2K.getLayout = (page: ReactElement) => {
-  // set a random retro Windows ME desktop tile for the entire content area
-  const randomTile = `/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`;
-
-  return (
-    <Layout container={false} stickyHeader={false}>
-      <Wallpaper
-        image={randomTile}
-        tile
-        css={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          padding: "1.5em 0",
-        }}
-      >
-        {page}
-      </Wallpaper>
-    </Layout>
-  );
-};
-
 export default Y2K;