🚏 Move docs from pages to app router (#2712)

* Move docs from pages to app router

* fix import

* fix more imports

* fix products page

* add hover to navy

* added TODO

app/docs/[...slug]/DocsPagesClient.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import MainDocsBodyHeader from 'components/AppRouterMigrationComponents/Docs/docsMain/docsMainBody';
+import TocOverflowButton from 'components/AppRouterMigrationComponents/Docs/docsMain/tocOverflowButton';
+import { LeftHandSideParentContainer } from 'components/AppRouterMigrationComponents/Docs/docsSearch/SearchNavigation';
+import ToC from 'components/AppRouterMigrationComponents/Docs/toc';
+import { screenResizer } from 'components/hooks/ScreenResizer';
+import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents';
+import { DocsPagination } from 'components/ui';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+import { useTocListener } from 'components/AppRouterMigrationComponents/Docs/toc_helper';
+
+export default function DocsClient(props) {
+
+  const { PageTableOfContents, NavigationDocsData } = props.props;
+  const DocumentationData = props.tinaProps.data.doc;
+
+  const allData = [DocumentationData, PageTableOfContents, NavigationDocsData];
+
+
+  const isScreenSmallerThan1200 = screenResizer().isScreenSmallerThan1200;
+  const isScreenSmallerThan840 = screenResizer().isScreenSmallerThan840;
+  const { activeIds, contentRef } = useTocListener(DocumentationData);
+
+  const previousPage = {
+    slug: DocumentationData?.previous?.id.slice(7, -4),
+    title: DocumentationData?.previous?.title,
+  };
+
+  const nextPage = {
+    slug: DocumentationData?.next?.id.slice(7, -4),
+    title: DocumentationData?.next?.title,
+  };
+
+
+
+  const lastEdited = DocumentationData?.last_edited;
+  const date = lastEdited === null ? null : new Date(lastEdited);
+  const formattedDate = date
+    ? date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    : '';
+  const gridClass = isScreenSmallerThan840
+    ? 'grid-cols-1'
+    : isScreenSmallerThan1200
+    ? 'grid-cols-[1.25fr_3fr]'
+    : 'grid-cols-[1.25fr_3fr_0.75fr]';
+
+
+
+  return ( 
+    <div className="relative my-6 lg:my-16 flex justify-center items-start">
+      <div className={`lg:px-16 px-3 w-full max-w-[2000px] grid ${gridClass}`}>
+        {/* LEFT COLUMN */}
+        <div
+          className={`block sticky top-32 h-[calc(100vh)] ${
+            isScreenSmallerThan840 ? 'hidden' : 'block'
+          }`}
+        >
+          <LeftHandSideParentContainer
+            tableOfContents={NavigationDocsData?.data}
+          />
+        </div>
+        {/* MIDDLE COLUMN */}
+        <div
+          className={`mx-8 max-w-full overflow-hidden break-words px-2 ${
+            DocumentationData?.tocIsHidden && !isScreenSmallerThan1200
+              ? 'col-span-2'
+              : ''
+          }`}
+        >
+          <MainDocsBodyHeader
+            allData={allData}
+            DocumentTitle={DocumentationData?.title}
+            screenResizing={isScreenSmallerThan840}
+            NavigationDocsItems={NavigationDocsData.data}
+          />
+          {isScreenSmallerThan1200 && !DocumentationData?.tocIsHidden && (
+            <TocOverflowButton tocData={PageTableOfContents} />
+          )}
+          <div ref={contentRef}>
+            {' '}
+            <TinaMarkdown
+              content={DocumentationData?.body}
+              components={docAndBlogComponents}
+            />
+          </div>
+
+          {formattedDate && (
+            <span className="text-slate-500 text-md">
+              {' '}
+              Last Edited: {formattedDate}
+            </span>
+          )}
+          <DocsPagination prevPage={previousPage} nextPage={nextPage} />
+        </div>
+        {/* RIGHT COLUMN */}
+        {DocumentationData?.tocIsHidden ? null : (
+          <div
+            className={`block sticky top-32 h-[calc(100vh)] ${
+              isScreenSmallerThan1200 ? 'hidden' : 'block'
+            }`}
+          >
+            <ToC tocItems={PageTableOfContents} activeIds={activeIds} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/docs/[...slug]/page.tsx

@@ -0,0 +1,74 @@
+import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents';
+import { glob } from 'fast-glob';
+import { NextSeo } from 'next-seo';
+import { notFound } from 'next/navigation';
+import client from 'tina/__generated__/client';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+import { getDocsNav } from 'utils/docs/getDocProps';
+import getTableOfContents from 'utils/docs/getTableOfContents';
+import { TinaClient } from 'app/tina-client';
+import DocsClient from './DocsPagesClient';
+
+export async function generateStaticParams() {
+  const contentDir = './content/docs/';
+  const files = await glob(`${contentDir}**/*.mdx`);
+
+  return files
+    .filter((file) => !file.endsWith('index.mdx'))
+    .map((file) => {
+      const path = file.substring(contentDir.length, file.length - 4); // Remove "./content/docs/" and ".mdx"
+      return { slug: path.split('/') };
+    });
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string[] };
+}) {
+  const slug = params.slug.join('/');
+  const { data } = await client.queries.doc({ relativePath: `${slug}.mdx` });
+
+  return {
+    title: `${data.doc.seo?.title || data.doc.title} | TinaCMS Docs`,
+    description: data.doc.seo?.description || '',
+    openGraph: {
+      title: data.doc.title,
+      description: data.doc.seo?.description,
+    },
+  };
+}
+
+export default async function DocPage({
+  params,
+}: {
+  params: { slug: string[] };
+}) {
+  const slug = params.slug.join('/');
+
+  try {
+    const [results, navDocData] = await Promise.all([
+      client.queries.doc({ relativePath: `${slug}.mdx` }),
+      getDocsNav(),
+    ]);
+
+    const docData = results.data.doc;
+    const PageTableOfContents = getTableOfContents(docData.body.children);
+
+    return (
+      <TinaClient
+        Component={DocsClient}
+        props={{
+          query: results.query,
+          variables: results.variables,
+          data: results.data,
+          PageTableOfContents,
+          DocumentationData: docData,
+          NavigationDocsData: navDocData,
+        }}
+      />
+    );
+  } catch (error) {
+    notFound();
+  }
+}

app/docs/page.tsx

@@ -0,0 +1,37 @@
+import { notFound } from 'next/navigation';
+import client from 'tina/__generated__/client';
+import { TinaClient } from 'app/tina-client';
+import DocsClient from './[...slug]/DocsPagesClient';
+import { getDocsNav } from 'utils/docs/getDocProps';
+import getTableOfContents from 'utils/docs/getTableOfContents';
+
+export default async function DocsPage() {
+  const slug = 'index'; // Default root document slug for /docs
+
+  try {
+    const [results, navDocData] = await Promise.all([
+      client.queries.doc({ relativePath: `${slug}.mdx` }),
+      getDocsNav(),
+    ]);
+
+    const docData = results.data.doc;
+    const PageTableOfContents = getTableOfContents(docData.body.children);
+
+    return (
+      <TinaClient
+        Component={DocsClient}
+        props={{
+          query: results.query,
+          variables: results.variables,
+          data: results.data,
+          PageTableOfContents,
+          DocumentationData: docData,
+          NavigationDocsData: navDocData,
+        }}
+      />
+    );
+  } catch (error) {
+
+    notFound();
+  }
+}

app/tina-client.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useTina } from 'tinacms/dist/react';
+import React from 'react';
+
+export type UseTinaProps = {
+  query: string;
+  variables: object;
+  data: object;
+};
+
+export type TinaClientProps<T> = {
+  props: UseTinaProps & T;
+  Component: React.FC<{ tinaProps: { data: object }; props: T }>;
+};
+
+export function TinaClient<T>({ props, Component }: TinaClientProps<T>) {
+  const { data } = useTina({
+    query: props.query,
+    variables: props.variables,
+    data: props.data,
+  });
+
+  return <Component tinaProps={{ data }} props={props} />;
+}

app/whats-new/tinacms/page.tsx

@@ -38,8 +38,7 @@ export default async function TinaCMSPage() {
 
   const { data, query } = await fetchWhatsNewData(vars);
 
-  console.log(data);
-  // return <div> banana</div>
+
   return <WhatsNewTinaCMSPageLayout data={data} />;
 }