Merge branch 'main' into PennyWalker-patch-1

.eslintignore

@@ -1,4 +1,4 @@
-.tina/__generated__
+tina/__generated__
 .next
 node_modules
 dist

.eslintrc

@@ -4,20 +4,28 @@
   "plugins": ["@typescript-eslint", "tailwindcss"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
+    "next/typescript",
+    "plugin:react/recommended",
     "plugin:tailwindcss/recommended",
-    "plugin:prettier/recommended",
     "next/core-web-vitals",
+    "plugin:prettier/recommended",
   ],
   "rules": {
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+      },
+    ],
     "quotes": ["error", "double"],
     "no-console": "warn",
     "tailwindcss/no-arbitrary-value": "error",
+    "tailwindcss/classnames-order": "off",
     "tailwindcss/no-custom-classname": [
       "error",
       {
-        "whitelist": ["g\\-yt.+", "legend"],
+        "whitelist": ["g\\-yt.+", "prose-.+", "text-3xl/9", "legend", "dark"],
       },
     ],
     "prettier/prettier": [

.prettierignore

@@ -1,4 +1,4 @@
-.tina/__generated__
+tina/__generated__
 .next
 node_modules
 content

.prettierrc

@@ -1,7 +1,7 @@
 {
-	"semi": true,
-	"singleQuote": false,
-	"tabWidth": 2,
-	"trailingComma": "es5",
-	"plugins": ["prettier-plugin-tailwindcss"]
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "tailwindConfig": "./tailwind.config.js"
 }

app/articles/[filename]/index.tsx

@@ -85,7 +85,7 @@ const ArticlePage = ({ props, tinaProps }: ArticlePageProps) => {
       {data.articles.subTitle && (
         <section
           className={classNames(
-            "prose mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 lg:flex"
+            "prose prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 mx-auto w-full max-w-9xl flex-row px-8 pb-8 lg:flex"
           )}
         >
           <div data-tina-field={tinaField(data.articles, "subTitle")}>

app/articles/[filename]/page.tsx

@@ -15,7 +15,6 @@ const getData = async (
   props: UseTinaProps & ArticlePageProps["props"];
 }> => {
   const tinaProps = await getArticle(filename);
-  tinaProps.data.articlesIndex.title;
   return {
     props: {
       data: tinaProps.data,

app/articles/index.tsx

@@ -28,8 +28,6 @@ type ArticlesIndexPageProps = {
 
 function ArticlesIndexPage({ props, tinaProps }: ArticlesIndexPageProps) {
   const { data } = tinaProps;
-  data.articlesIndex;
-  data.articlesIndex.seo;
   const { dehydratedState } = props;
   return (
     <>
@@ -63,7 +61,7 @@ function ArticlesIndexPage({ props, tinaProps }: ArticlesIndexPageProps) {
         </Section>
         <section
           className={classNames(
-            "prose mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 md:flex"
+            "prose prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 mx-auto w-full max-w-9xl flex-row px-8 pb-8 md:flex"
           )}
         >
           {data.articlesIndex._body.children.length > 0 && (

app/company/[filename]/index.tsx

@@ -44,7 +44,7 @@ export default function CompanyPage({ tinaProps, props }) {
         {data.company.subTitle && (
           <section
             className={classNames(
-              "prose mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0",
+              "prose prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 mx-auto w-full max-w-9xl flex-row px-8 pb-8",
               data.company.fullWidthBody ? "" : "md:flex"
             )}
           >

app/components/page-layout.tsx

@@ -6,7 +6,7 @@ type PageLayoutProps = {
 };
 const PageLayout = ({ children, megaMenu }: PageLayoutProps) => {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex h-screen min-h-screen flex-col">
       <header className="no-print">{megaMenu}</header>
       <main className="grow bg-white">{children}</main>
       <Footer />

app/consulting/[filename]/consulting2.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { Blocks } from "@/components/blocks-renderer";
+import { PreFooter } from "@/components/layout/footer/pre-footer";
+import { SectionColor } from "@/components/util/constants/styles";
+import { Container } from "@/components/util/container";
+import { Section } from "@/components/util/section";
+import { Consultingv2Query } from "@/tina/types";
+import _ from "lodash";
+import React, { memo } from "react";
+
+type ConsultingV2PageProps<T> = {
+  tinaProps: {
+    data: Consultingv2Query;
+    query: string;
+    variables: object;
+  };
+  props: T;
+};
+
+const Consulting2 = memo(
+  function ConsultingV2({ tinaProps }: ConsultingV2PageProps<object>) {
+    const { data } = tinaProps;
+
+    return (
+      <>
+        <div className="dark flex h-full flex-col">
+          <Section color={SectionColor.ToggleLightMode}>
+            <Container
+              size="custom"
+              width="custom"
+              padding="custom"
+              className="w-full p-0"
+            >
+              <div className="w-full">
+                {data.consultingv2.blocks ? (
+                  <Blocks
+                    prefix={"Consultingv2Blocks"}
+                    blocks={data.consultingv2.blocks}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </Container>
+          </Section>
+          <PreFooter />
+        </div>
+      </>
+    );
+  },
+  (prevProps, nextProps) => _.isEqual(prevProps, nextProps)
+);
+
+export default Consulting2;

app/consulting/[filename]/page.tsx

@@ -7,43 +7,96 @@ import { useSEO } from "hooks/useSeo";
 import { Metadata } from "next";
 import { Open_Sans } from "next/font/google";
 import { TinaClient } from "../../tina-client";
-import ConsultingPage from "./consulting";
-
+import OldConsultingPage from "./consulting";
+import ConsultingPage2 from "./consulting2";
 const openSans = Open_Sans({
   variable: "--open-sans-font",
   subsets: ["latin"],
   display: "swap",
   weight: ["300", "400", "600"],
 });
+type NewConsultingPage = Awaited<
+  ReturnType<typeof client.queries.consultingv2>
+>;
+
+type OldConsultingPage = Awaited<
+  ReturnType<typeof client.queries.consultingContentQuery>
+>;
+
+type NewConsultingPages = Awaited<
+  ReturnType<typeof client.queries.consultingv2Connection>
+>;
+type ConsultingPages = Awaited<
+  ReturnType<typeof client.queries.consultingConnection>
+>;
 
 export const dynamicParams = false;
 
-export async function generateStaticParams() {
-  let pageListData = await client.queries.consultingConnection();
-  const allPagesListData = pageListData;
+type ConsultingPageParams = {
+  filename: string;
+};
 
-  while (pageListData.data.consultingConnection.pageInfo.hasNextPage) {
-    const lastCursor =
-      pageListData.data.consultingConnection.pageInfo.endCursor;
-    pageListData = await client.queries.consultingConnection({
-      after: lastCursor,
-    });
+async function extractAllPages(query, field: string) {
+  let consultingFetch = await query();
 
-    allPagesListData.data.consultingConnection.edges.push(
-      ...pageListData.data.consultingConnection.edges
+  const accmulatedPages = consultingFetch;
+
+  while (consultingFetch.data[field].pageInfo.hasNextPage) {
+    const lastCursor = consultingFetch.data[field].pageInfo.endCursor;
+
+    consultingFetch = await query({ after: lastCursor });
+
+    accmulatedPages.data[field].edges.push(
+      ...consultingFetch.data[field].edges
     );
   }
+  return accmulatedPages;
+}
+
+export async function generateStaticParams(): Promise<ConsultingPageParams[]> {
+  const newConsultingPages: NewConsultingPages = await extractAllPages(
+    client.queries.consultingv2Connection,
+    "consultingv2Connection"
+  );
+
+  const newConsultingPagesData: ConsultingPageParams[] =
+    newConsultingPages.data.consultingv2Connection.edges.map((page) => {
+      return { filename: page.node._sys.filename, isNewConsultingPage: true };
+    });
 
-  const pages = allPagesListData.data.consultingConnection.edges.map(
-    (page) => ({
-      filename: page.node._sys.filename,
-    })
+  const consultingPagesData: ConsultingPages = await extractAllPages(
+    client.queries.consultingConnection,
+    "consultingConnection"
   );
+  const consultingPages: ConsultingPageParams[] =
+    consultingPagesData.data.consultingConnection.edges.map((page) => {
+      return { filename: page.node._sys.filename, isNewConsultingPage: false };
+    });
 
-  return pages;
+  return [...consultingPages, ...newConsultingPagesData];
 }
 
-const getData = async (filename: string) => {
+const newConsultingPageData = async (filename: string) => {
+  const tinaProps: NewConsultingPage = await client.queries.consultingv2({
+    relativePath: `${filename}.json`,
+  });
+  const global = await client.queries.global({ relativePath: "index.json" });
+  const seo = tinaProps.data.consultingv2.seo;
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      variables: tinaProps.variables,
+      header: {
+        url: global.data.global.header.url,
+      },
+      seo,
+      ...tinaProps,
+    },
+  };
+};
+
+const consultingPageData = async (filename: string) => {
   const tinaProps = await client.queries.consultingContentQuery({
     relativePath: `${filename}.mdx`,
     date: TODAY.toISOString(),
@@ -120,33 +173,69 @@ type GenerateMetaDataProps = {
 };
 
 export async function generateMetadata({
-  params,
+  params: { filename },
 }: GenerateMetaDataProps): Promise<Metadata> {
-  const tinaProps = await getData(params.filename);
+  const isNewConsultingPage = Boolean(await findConsultingPageType(filename));
+
+  const tinaProps = isNewConsultingPage
+    ? await newConsultingPageData(filename)
+    : await consultingPageData(filename);
 
-  const seo = tinaProps.props.seo;
+  const seo =
+    tinaProps.props.data[isNewConsultingPage ? "consultingv2" : "consulting"]
+      .seo;
   if (seo && !seo.canonical) {
-    seo.canonical = `${tinaProps.props.header.url}consulting/${params.filename}`;
+    seo.canonical = `${tinaProps.props.header.url}consulting/${filename}`;
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { seoProps } = useSEO(seo);
+  const seoData = useSEO(seo);
 
-  return { ...seoProps };
+  return seoData ? { ...seoData.seoProps } : {};
 }
 
 export default async function Consulting({
   params,
 }: {
-  params: { filename: string };
+  params: ConsultingPageParams;
 }) {
-  const { filename } = params;
-
-  const { props } = await getData(filename);
+  const isNewConsultingPage: boolean = Boolean(
+    await findConsultingPageType(params.filename)
+  );
+  let pageData:
+    | Awaited<ReturnType<typeof consultingPageData>>
+    | Awaited<ReturnType<typeof newConsultingPageData>>;
+
+  if (isNewConsultingPage) {
+    pageData = await newConsultingPageData(params.filename);
+  } else {
+    pageData = await consultingPageData(params.filename);
+  }
+  const { props } = pageData;
 
-  return (
+  return isNewConsultingPage ? (
+    <TinaClient props={props} Component={ConsultingPage2} />
+  ) : (
     <div className={openSans.className}>
-      <TinaClient props={props} Component={ConsultingPage} />
+      <TinaClient props={props} Component={OldConsultingPage} />
     </div>
   );
 }
+
+const findConsultingPageType = async (
+  filename: string
+): Promise<ConsultingPageType> => {
+  const v2Pages = await client.queries.consultingv2Connection();
+
+  for (const page of v2Pages.data.consultingv2Connection.edges) {
+    if (page.node._sys.filename === filename) {
+      return ConsultingPageType.New;
+    }
+  }
+  return ConsultingPageType.Old;
+};
+
+enum ConsultingPageType {
+  New = 1,
+  Old = 0,
+}