add support for per-page layouts

pages/_app.tsx

@@ -6,6 +6,8 @@ import * as Fathom from "fathom-client";
 import Layout from "../components/Layout/Layout";
 import * as config from "../lib/config";
 import { defaultSeo, socialProfileJsonLd } from "../lib/seo";
+import type { ReactElement, ReactNode } from "react";
+import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 
 // global webfonts -- imported here so they're processed through PostCSS
@@ -26,7 +28,14 @@ import "../styles/colors.css";
 import "../styles/typography.css";
 import "../styles/index.css";
 
-const App = ({ Component, pageProps }: AppProps) => {
+// https://nextjs.org/docs/basic-features/layouts#with-typescript
+type Props = AppProps & {
+  Component: NextPage & {
+    getLayout?: (page: ReactElement) => ReactNode;
+  };
+};
+
+const App = ({ Component, pageProps }: Props) => {
   const router = useRouter();
 
   // get this page's URL with full domain, and hack around query parameters and anchors
@@ -54,6 +63,9 @@ const App = ({ Component, pageProps }: AppProps) => {
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // 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/seo.ts except for canonical URLs, which require access to next router */}
@@ -70,11 +82,7 @@ const App = ({ Component, pageProps }: AppProps) => {
       />
       <SocialProfileJsonLd {...socialProfileJsonLd} />
 
-      <ThemeProvider>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </ThemeProvider>
+      <ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
     </>
   );
 };

pages/api/contact.ts

@@ -24,7 +24,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     res.setHeader("Pragma", "no-cache");
 
     if (req.method !== "POST") {
-      return res.status(405).send(""); // 405 Method Not Allowed
+      return res.status(405).end(); // 405 Method Not Allowed
     }
 
     const { body } = req;

pages/api/hits.ts

@@ -13,7 +13,7 @@ Sentry.init({
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   try {
     if (req.method !== "GET") {
-      return res.status(405).send(""); // 405 Method Not Allowed
+      return res.status(405).end(); // 405 Method Not Allowed
     }
 
     const client = new faunadb.Client({

pages/y2k.tsx

@@ -1,7 +1,9 @@
 import { useEffect } from "react";
 import dynamic from "next/dynamic";
 import { NextSeo } from "next-seo";
+import Layout from "../components/Layout/Layout";
 import Wallpaper from "../components/Wallpaper/Wallpaper";
+import type { ReactElement } from "react";
 
 // obviously, an interactive VNC display will not work even a little bit server-side
 const VNC = dynamic(() => import("../components/VNC/VNC"), { ssr: false });
@@ -44,17 +46,12 @@ const Y2K = () => {
         header {
           position: relative !important;
         }
-
-        /* make an exception for the wrapper (and its background) to fill up the normal content area */
-        main {
-          padding: 0 !important;
-        }
-        main > div {
-          max-width: 100% !important;
-        }
       `}</style>
     </>
   );
 };
 
+// disable layout's default styles so the wallpaper component can go edge-to-edge
+Y2K.getLayout = (page: ReactElement) => <Layout noContainer>{page}</Layout>;
+
 export default Y2K;