Migrated logo page to app router (#3649)

* migrated logo page to app router

* fixed static site generation

* renamed for better readability

* Update app/logo/[[...filename]]/page.tsx

Co-authored-by: Aman Kumar [SSW] <71385247+amankumarrr@users.noreply.github.com>

* fix lint

---------

Co-authored-by: Aman Kumar [SSW] <71385247+amankumarrr@users.noreply.github.com>

app/logo/[[...filename]]/index.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Breadcrumbs } from "@/app/components/breadcrumb";
+import { Blocks } from "@/components/blocks-renderer";
+import { BuiltOnAzure } from "@/components/blocks/builtOnAzure";
+import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
+import { Container } from "@/components/util/container";
+import { Section } from "@/components/util/section";
+import { removeExtension } from "@/services/client/utils.service";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export default function LogoPage({ props, tinaProps }) {
+  const { data } = tinaProps;
+
+  return (
+    <>
+      <Container className="flex-1 pt-2">
+        {props?.seo?.showBreadcrumb && (
+          <Breadcrumbs
+            path={removeExtension(props.variables.relativePath)}
+            title={data.logos?.seo?.title}
+          />
+        )}
+        <h1
+          data-tina-field={tinaField(data?.logos, "header")}
+          className="pt-0 text-3xl"
+        >
+          {data?.logos?.header}
+        </h1>
+        {data.logos?.subHeader && (
+          <span data-tina-field={tinaField(data?.logos, "subHeader")}>
+            <TinaMarkdown content={data.logos?.subHeader} />
+          </span>
+        )}
+        <Blocks prefix="Logos_body" blocks={data.logos?._body} />
+        {data.logos?.footer && (
+          <Section className="w-full flex-col gap-6 text-center">
+            <TinaMarkdown
+              data-tina-field={tinaField(data.logos, "footer")}
+              content={data.logos.footer}
+              components={componentRenderer}
+            />
+          </Section>
+        )}
+      </Container>
+      <BuiltOnAzure data={data.logos.azureBanner} />
+    </>
+  );
+}

app/logo/[[...filename]]/page.tsx

@@ -0,0 +1,76 @@
+import { TinaClient } from "@/app/tina-client";
+import { TODAY } from "@/hooks/useFetchEvents";
+import { useSEO } from "@/hooks/useSeo";
+import client from "@/tina/client";
+import { Metadata } from "next";
+import LogoPage from ".";
+
+export const dynamicParams = false;
+
+type GenerateMetaDataProps = {
+  params: { filename: string[] };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  params,
+}: GenerateMetaDataProps): Promise<Metadata> {
+  const tinaProps = await getData(params.filename);
+  const seo = tinaProps.props.seo;
+
+  if (seo && !seo.canonical) {
+    seo.canonical = `${tinaProps.props.header.url}logo${params.filename ? `/${params.filename}` : ""}`;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { seoProps } = useSEO(seo);
+  return { ...seoProps };
+}
+
+export async function generateStaticParams() {
+  const pagesListData = await client.queries.logosConnection();
+
+  return pagesListData.data.logosConnection.edges.map((page) => {
+    if (page.node._sys.filename === "index") {
+      return {
+        filename: [],
+      };
+    }
+
+    return {
+      filename: page.node._sys.breadcrumbs,
+    };
+  });
+}
+
+const getData = async (filename: string[]) => {
+  const fileNameUpdated = filename ? filename.join("/") : "index";
+
+  const tinaProps = await client.queries.logosContentQuery({
+    relativePath: `${fileNameUpdated}.mdx`,
+    date: TODAY.toISOString(),
+  });
+
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      variables: tinaProps.variables,
+      seo: tinaProps.data.logos.seo,
+      header: {
+        url: tinaProps.data.global.header.url,
+      },
+    },
+  };
+};
+
+export default async function Logos({
+  params,
+}: {
+  params: { filename: string[] };
+}) {
+  const { filename } = params;
+  const { props } = await getData(filename);
+
+  return <TinaClient props={props} Component={LogoPage} />;
+}