fix: Playroom fix (#583)

washingtonpost · Feb 27, 2024 · 16ff754 · 16ff754
1 parent fe5163d
commit 16ff754
Show file tree

Hide file tree

Showing 18 changed files with 155 additions and 109 deletions.
diff --git a/build.washingtonpost.com/components/next-seo/defaultSeo.tsx b/build.washingtonpost.com/components/next-seo/defaultSeo.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import Head from "next/head";
+
+interface SeoConfig {
+  defaultTitle: string;
+  description: string;
+  openGraph: {
+    type: string;
+    locale: string;
+    url: string;
+    site_name: string;
+    title: string;
+    images: // array of images
+    {
+      url: string;
+      width: number;
+      height: number;
+      alt: string;
+    }[];
+  };
+  twitter: {
+    handle: string;
+    site: string;
+    cardType: string;
+    url: string;
+    title: string;
+    description: string;
+  };
+}
+
+interface DefaultSeoProps {
+  seoConfig: SeoConfig;
+}
+
+export const DefaultSeo: React.FC<DefaultSeoProps> = ({ seoConfig }) => {
+  return (
+    <Head>
+      <title>{seoConfig.defaultTitle}</title>
+      <meta name="description" content={seoConfig.description} />
+      <meta property="og:type" content={seoConfig.openGraph.type} />
+      <meta property="og:locale" content={seoConfig.openGraph.locale} />
+      <meta property="og:url" content={seoConfig.openGraph.url} />
+      <meta property="og:site_name" content={seoConfig.openGraph.site_name} />
+      <meta property="og:title" content={seoConfig.openGraph.title} />
+      {seoConfig.openGraph.images.map((image, index) => (
+        <meta key={index} property="og:image" content={image.url} />
+      ))}
+      <meta name="twitter:site" content={seoConfig.twitter.site} />
+      <meta name="twitter:card" content={seoConfig.twitter.cardType} />
+      <meta name="twitter:url" content={seoConfig.twitter.url} />
+      <meta name="twitter:title" content={seoConfig.twitter.title} />
+      <meta
+        name="twitter:description"
+        content={seoConfig.twitter.description}
+      />
+      <meta name="twitter:creator" content={seoConfig.twitter.handle} />
+      <meta name="robots" content="index,follow"/>
+    </Head>
+  );
+};
diff --git a/build.washingtonpost.com/components/next-seo/index.tsx b/build.washingtonpost.com/components/next-seo/index.tsx
@@ -0,0 +1,2 @@
+export { DefaultSeo } from "./defaultSeo";
+export { NextSeo } from "./nextSeo";
diff --git a/build.washingtonpost.com/components/next-seo/nextSeo.tsx b/build.washingtonpost.com/components/next-seo/nextSeo.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Head from "next/head";
+
+interface pageSeoConfig {
+  title: string;
+  description: string;
+}
+
+export const NextSeo: React.FC<pageSeoConfig> = ({ title, description }) => {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+    </Head>
+  );
+};
diff --git a/build.washingtonpost.com/package.json b/build.washingtonpost.com/package.json
@@ -34,7 +34,6 @@
     "lz-string": "^1.4.4",
     "next": "^14",
     "next-mdx-remote": "^4.4.1",
-    "next-seo": "5.15.0",
     "next-themes": "0.2.1",
     "param-case": "^3.0.4",
     "pascal-case": "^3.1.2",

diff --git a/build.washingtonpost.com/pages/_app.js b/build.washingtonpost.com/pages/_app.js
@@ -3,7 +3,7 @@
 import React from "react";
 import { ThemeProvider } from "next-themes";
 import Script from "next/script";
-import { DefaultSeo } from "next-seo";
+import { DefaultSeo } from "../components/next-seo";
 import "react-toastify/dist/ReactToastify.css";
 import {
   globalStyles,
@@ -87,7 +87,7 @@ function App({ Component, pageProps }) {
 
   return (
     <>
-      <DefaultSeo {...SEO} />
+      <DefaultSeo seoConfig={SEO} />
       <ThemeProvider
         attribute="class"
         defaultTheme="system"

diff --git a/build.washingtonpost.com/pages/_document.js b/build.washingtonpost.com/pages/_document.js
@@ -1,72 +1,50 @@
 import React from "react";
-import NextDocument, { Html, Head, Main, NextScript } from "next/document";
-import { getCssText, reset } from "@washingtonpost/wpds-ui-kit";
+import { Html, Head, Main, NextScript } from "next/document";
+import { getCssText } from "@washingtonpost/wpds-ui-kit";
 import { Favicon } from "@washingtonpost/site-favicons";
 
-/**
- * Get the css and reset the internal css representation.
- * This is very *IMPORTANT* to do as the server might handle multiple requests
- * and we don't want to have the css accumulated from previous requests
- */
-const getCssAndReset = () => {
-  const css = getCssText();
-  reset();
-  return css;
-};
+export default function Document() {
+  return (
+    <Html lang="en" id="wpds">
+      <Head>
+        <Favicon />
+        <style
+          id="stitches"
+          dangerouslySetInnerHTML={{ __html: getCssText() }}
+        />
+        <link
+          rel="preload"
+          href="https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
 
-export default class Document extends NextDocument {
-  static async getInitialProps(ctx) {
-    let initialProps = { html: "<></>" };
-    try {
-      initialProps = await NextDocument.getInitialProps(ctx);
-      return { ...initialProps };
-    } catch (e) {
-      return initialProps;
-    }
-  }
+        <link
+          rel="preload"
+          href="https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
 
-  render() {
-    return (
-      <Html lang="en" id="wpds">
-        <Head>
-          <Favicon />
-          <style
-            id="stitches"
-            dangerouslySetInnerHTML={{ __html: getCssAndReset() }}
-          />
-          <link
-            rel="preload"
-            href="https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-          <link
-            rel="preload"
-            href="https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-
-          <link
-            rel="preload"
-            href="https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-
-          <link
-            rel="preload"
-            href="https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-          <style
-            dangerouslySetInnerHTML={{
-              __html: `@font-face {
+        <link
+          rel="preload"
+          href="https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `@font-face {
 								font-family: Postoni;
 								font-weight: 700;
 								font-display: fallback;
@@ -99,25 +77,24 @@ export default class Document extends NextDocument {
 								  U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f1, U+f3-f5, U+fa, U+2009, U+2013,
 								  U+2014, U+2018, U+2019, U+201c, U+201d, U+2026;
 							  }`,
+          }}
+        />
+      </Head>
+      <body>
+        <noscript>
+          <iframe
+            src="https://www.googletagmanager.com/ns.html?id=GTM-KHRH42S"
+            height="0"
+            width="0"
+            style={{
+              display: "none",
+              visibility: "hidden",
             }}
-          />
-        </Head>
-        <body>
-          <noscript>
-            <iframe
-              src="https://www.googletagmanager.com/ns.html?id=GTM-KHRH42S"
-              height="0"
-              width="0"
-              style={{
-                display: "none",
-                visibility: "hidden",
-              }}
-            ></iframe>
-          </noscript>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
+          ></iframe>
+        </noscript>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
 }
diff --git a/build.washingtonpost.com/pages/components/[slug].js b/build.washingtonpost.com/pages/components/[slug].js
@@ -1,6 +1,6 @@
 import React from "react";
 import { MDXRemote } from "next-mdx-remote";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 
 import { styled } from "@washingtonpost/wpds-ui-kit";
 

diff --git a/build.washingtonpost.com/pages/foundations/[slug].js b/build.washingtonpost.com/pages/foundations/[slug].js
@@ -1,7 +1,7 @@
 import React from "react";
 import { MDXRemote } from "next-mdx-remote";
 import dynamic from "next/dynamic";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import { styled, theme } from "@washingtonpost/wpds-ui-kit";
 import MDXStyling from "~/components/Markdown/Styling";
 

diff --git a/build.washingtonpost.com/pages/playroom.js b/build.washingtonpost.com/pages/playroom.js
@@ -18,6 +18,7 @@ import { Header } from "~/components/Markdown/Components/headers";
 import MDXStyling from "~/components/Markdown/Styling";
 import { CopyCodeButton } from "~/components/Markdown/Components/Sandbox";
 import { Box } from "@washingtonpost/wpds-ui-kit";
+import { NextSeo } from "~/components/next-seo";
 
 const Canvas = Kit.styled("div", {
   color: "$accessible",
@@ -312,8 +313,9 @@ export default function Playroom({
       }}
     >
       <Head>
-        <title>WPDS - Playroom</title>
+        <meta name="robots" content="noindex, nofollow" />
       </Head>
+      <NextSeo title="WPDS - Playroom" description="WPDS - Playroom" />
       <SandpackProvider
         template="react"
         customSetup={{

diff --git a/build.washingtonpost.com/pages/release-notes/index.js b/build.washingtonpost.com/pages/release-notes/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import { getNavigation } from "~/services";
 import { Icon, styled } from "@washingtonpost/wpds-ui-kit";
 import Header from "~/components/Typography/Headers";

diff --git a/build.washingtonpost.com/pages/resources/[category]/[slug].js b/build.washingtonpost.com/pages/resources/[category]/[slug].js
@@ -1,6 +1,6 @@
 import React from "react";
 import { MDXRemote } from "next-mdx-remote";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import MDXStyling from "~/components/Markdown/Styling";
 import Header from "~/components/Typography/Headers";
 import {

diff --git a/build.washingtonpost.com/pages/resources/[category]/index.js b/build.washingtonpost.com/pages/resources/[category]/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { styled } from "@washingtonpost/wpds-ui-kit";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import Header from "~/components/Typography/Headers";
 import CustomLink from "~/components/Typography/link";
 import { getAllPathsByCategory, getNavigation, getResources } from "~/services";

diff --git a/build.washingtonpost.com/pages/resources/index.js b/build.washingtonpost.com/pages/resources/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import { styled, theme, Box } from "@washingtonpost/wpds-ui-kit";
 
 import { getDocsListBySection, getNavigation } from "~/services";

diff --git a/build.washingtonpost.com/pages/support/[slug].js b/build.washingtonpost.com/pages/support/[slug].js
@@ -1,7 +1,7 @@
 import React from "react";
 import { MDXRemote } from "next-mdx-remote";
 import dynamic from "next/dynamic";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import { styled, theme } from "@washingtonpost/wpds-ui-kit";
 import MDXStyling from "~/components/Markdown/Styling";
 

diff --git a/build.washingtonpost.com/pages/support/index.js b/build.washingtonpost.com/pages/support/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import { getDocsListBySection, getNavigation } from "~/services";
 import { Box, styled } from "@washingtonpost/wpds-ui-kit";
 import { Header } from "~/components/Markdown/Components/headers";

diff --git a/build.washingtonpost.com/pages/zzz/[slug].js b/build.washingtonpost.com/pages/zzz/[slug].js
@@ -1,7 +1,7 @@
 import React from "react";
 import { MDXRemote } from "next-mdx-remote";
 import dynamic from "next/dynamic";
-import { NextSeo } from "next-seo";
+import { NextSeo } from "~/components/next-seo";
 import { styled, theme } from "@washingtonpost/wpds-ui-kit";
 import MDXStyling from "~/components/Markdown/Styling";
 

diff --git a/build.washingtonpost.com/tsconfig.json b/build.washingtonpost.com/tsconfig.json
@@ -17,8 +17,8 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "isolatedModules": true
   },
   "exclude": [
     "node_modules",

diff --git a/package-lock.json b/package-lock.json