re-add custom getLayout option removed in d50ae0f85a

pages/_app.tsx

@@ -9,10 +9,18 @@ import * as config from "../lib/config";
 import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
 import { themeClassNames } from "../lib/config/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
-const App = ({ Component, pageProps }: NextAppProps) => {
+export type AppProps = NextAppProps & {
+  Component: NextPage & {
+    getLayout?: (page: ReactElement) => ReactNode;
+  };
+};
+
+const App = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
 
   // get this page's URL with full domain, and hack around query parameters and anchors
@@ -45,6 +53,9 @@ const App = ({ Component, pageProps }: NextAppProps) => {
   // 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 (
     <>
       {/* all SEO config is in ../lib/config/seo.ts except for canonical URLs, which require access to next router */}
@@ -61,11 +72,7 @@ const App = ({ Component, pageProps }: NextAppProps) => {
       />
       <SocialProfileJsonLd {...socialProfileJsonLd} />
 
-      <ThemeProvider classNames={themeClassNames}>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </ThemeProvider>
+      <ThemeProvider classNames={themeClassNames}>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
     </>
   );
 };

pages/y2k.tsx

@@ -2,8 +2,10 @@ import { useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import dynamic from "next/dynamic";
 import { NextSeo } from "next-seo";
+import Layout from "../components/Layout";
 import Terminal from "../components/Terminal";
 import { styled } from "../lib/styles/stitches.config";
+import type { ReactElement, ComponentProps } from "react";
 
 // obviously, an interactive VNC display will not work even a little bit server-side
 const VNC = dynamic(() => import("../components/VNC"), { ssr: false });
@@ -11,10 +13,10 @@ const VNC = dynamic(() => import("../components/VNC"), { ssr: false });
 // https://github.com/jakejarvis/y2k
 const SOCKET_PROXY = "wss://y2k.jrvs.io";
 
-const Wallpaper = styled("div", {
+const Wallpaper = styled("main", {
   display: "flex",
   width: "100%",
-  minHeight: "450px",
+  minHeight: "500px",
   padding: "1.5em 0",
   justifyContent: "center",
   alignItems: "center",
@@ -28,7 +30,7 @@ const DOS = styled(Terminal, {
   maxWidth: "700px",
 });
 
-const Y2K = () => {
+const Wrapper = ({ style, ...rest }: ComponentProps<typeof Wrapper>) => {
   const [wallpaperUrl, setWallpaperUrl] = useState("");
 
   // set a random retro Windows ME desktop tile for the entire content area
@@ -36,6 +38,10 @@ const Y2K = () => {
     setWallpaperUrl(`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`);
   }, []);
 
+  return <Wallpaper style={{ backgroundImage: wallpaperUrl ? `url(${wallpaperUrl})` : "", ...style }} {...rest} />;
+};
+
+const Y2K = () => {
   // print a fancy console message (in browser only) just for funsies
   useEffect(() => {
     console.log(
@@ -63,13 +69,20 @@ const Y2K = () => {
         }}
       />
 
-      <Wallpaper style={{ backgroundImage: wallpaperUrl ? `url(${wallpaperUrl})` : "" }}>
-        <ErrorBoundary fallback={<DOS>Oh no, it looks like something's gone VERY wrong. Sorry about that!</DOS>}>
-          <VNC server={SOCKET_PROXY} />
-        </ErrorBoundary>
-      </Wallpaper>
+      <ErrorBoundary fallback={<DOS>Oh no, it looks like something's gone VERY wrong. Sorry about that!</DOS>}>
+        <VNC server={SOCKET_PROXY} />
+      </ErrorBoundary>
     </>
   );
 };
 
+// disable layout's default styles so the wallpaper component can go edge-to-edge:
+Y2K.getLayout = (page: ReactElement) => {
+  return (
+    <Layout container={false}>
+      <Wrapper>{page}</Wrapper>
+    </Layout>
+  );
+};
+
 export default Y2K;