Josh test

app/blog/[...slug]/BlogPageClient.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { formatDate } from 'components/AppRouterMigrationComponents/utils/formatDate';
+import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents';
+import { DocsPagination } from 'components/ui';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+
+export default function BlogPageClient(props: any) {
+  const blogPostData = props.data.post;
+  const postedDate = formatDate(blogPostData?.date);
+  const lastEditedDate = formatDate(blogPostData?.last_edited);
+
+  const previousPage = {
+    slug: blogPostData?.prev?.id.slice(7, -4),
+    title: blogPostData?.prev?.title,
+  };
+  const nextPage = {
+    slug: blogPostData?.next?.id.slice(7, -4),
+    title: blogPostData?.next?.title,
+  };
+  return (
+    <div>
+      <BlogPageTitle title={blogPostData?.title} />
+      <div className="p-6">
+        <div className="py-12 lg:py-16 last:pb-20 last:lg:pb-32 max-w-prose mx-auto">
+          <div className="flex flex-col items-center opacity-80 m-0">
+            {postedDate}
+            <div className="flex flex-row text-lg gap-1 pb-4">
+              <span>By </span>
+              <strong>{blogPostData?.author}</strong>
+            </div>
+          </div>
+          <div className="text-[#241748]">
+            <TinaMarkdown
+              content={blogPostData?.body}
+              components={docAndBlogComponents}
+            />
+          </div>
+
+          {lastEditedDate && (
+            <div className="mt-2 text-sm opacity-50">
+              Last Edited: {lastEditedDate}
+            </div>
+          )}
+          <DocsPagination prevPage={previousPage} nextPage={nextPage} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BlogPageTitle({ title }: { title: string }) {
+  const blogTitleStyling =
+    'leading-[1.3] max-w-[9em] bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 ' +
+    'text-transparent bg-clip-text font-tuner mx-auto text-4xl md:text-5xl lg:text-6xl';
+
+  return (
+    <div className="relative z-10 overflow-visible text-center px-8 py-12 lg:py-16">
+      <div className={blogTitleStyling}>{title}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { notFound } from 'next/navigation';
+import client from 'tina/__generated__/client';
+import BlogPageClient from './BlogPageClient';
+
+export async function generateStaticParams() {
+  let allPosts = [];
+  let hasNextPage = true;
+  let after: string | null = null;
+
+  while (hasNextPage) {
+    const postsResponse = await client.queries.postConnection({ after });
+
+    const edges = postsResponse?.data?.postConnection?.edges || [];
+    const pageInfo = postsResponse?.data?.postConnection?.pageInfo || {
+      hasNextPage: false,
+      endCursor: null,
+    };
+
+    allPosts = allPosts.concat(
+      edges.map((post) => ({
+        slug: [post?.node?._sys?.filename],
+      }))
+    );
+
+    hasNextPage = pageInfo.hasNextPage;
+    after = pageInfo.endCursor;
+  }
+
+  console.log(allPosts);
+  const dataSize = new TextEncoder().encode(JSON.stringify(allPosts)).length;
+  console.log(`Total posts fetched: ${allPosts.length}`);
+  console.log(`Size of allPosts data: ${dataSize} bytes (${(dataSize / 1024).toFixed(2)} KB)`);
+
+  return allPosts;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const slug = params.slug;
+  const vars = { relativePath: `${slug}.mdx` };
+
+  try {
+    const { data } = await client.queries.getExpandedPostDocument(vars);
+
+    if (!data?.post) {
+      console.warn(`No metadata found for slug: ${slug}`);
+      return notFound();
+    }
+
+    return {
+      title: `${data.post.title} | TinaCMS Blog`,
+      openGraph: {
+        title: data.post.title,
+      },
+    };
+  } catch (error) {
+    console.error('Error generating metadata:', error);
+    return {
+      title: 'Blog Post | TinaCMS',
+      description: 'Read our latest blog post.',
+    };
+  }
+}
+
+export default async function BlogPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  console.log('the params: ', params);
+  const slug = params.slug;
+  const vars = { relativePath: `${slug}.mdx` };
+
+  try {
+    const res = await client.queries.getExpandedPostDocument(vars);
+
+    if (!res?.data?.post) {
+      console.warn(`Post not found for slug: ${slug}`);
+      return notFound();
+    }
+
+    return <BlogPageClient {...res} />;
+  } catch (error) {
+    console.error(`Error fetching post for slug: ${slug}`, error);
+    return notFound();
+  }
+}

app/blog/page.tsx

@@ -0,0 +1,6 @@
+import BlogPaginationPage from './page/[page_index]/page';
+
+export default async function BlogPage() {
+  const params = { page_index: '1' }; 
+  return await BlogPaginationPage({ params });
+}

app/blog/page/[page_index]/BlogIndexPageClient.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { DynamicLink } from 'components/ui';
+import React from 'react';
+import { formatDate } from 'components/AppRouterMigrationComponents/utils/formatDate';
+import { MarkdownContent } from 'components/layout';
+import NewBlogPagination from 'components/AppRouterMigrationComponents/Blogs/BlogPagination';
+import { extractTextFromBody } from 'components/AppRouterMigrationComponents/utils/extractTextFromBody';
+
+interface Post {
+  id: string;
+  title: string;
+  date?: string;
+  author?: string;
+  body?: string;
+  seo?: {
+    title?: string;
+    description?: string;
+  };
+  _sys: {
+    filename: string;
+    basename: string;
+    breadcrumbs: string[];
+    path: string;
+    relativePath: string;
+    extension: string;
+  };
+}
+
+
+interface BlogPageClientProps {
+  currentPageIndexNumber: number;
+  numberOfPages: number;
+  postsForPageIndex: Post[];
+}
+export default function BlogIndexPageClient({
+  currentPageIndexNumber: pageIndex,
+  postsForPageIndex: posts,
+  numberOfPages: numPages,
+}: BlogPageClientProps) {
+
+  return (
+    <div className="p-6">
+      <div className="py-12 lg:py-16 last:pb-20 last:lg:pb-32 max-w-prose mx-auto">
+        {posts.map((post) => (
+          <DynamicLink
+            key={post.id}
+            href={`/blog/${post._sys.filename}`}
+            passHref
+          >
+            <div className="w-full group flex flex-col gap-6 lg:gap-8 items-start mb-6 lg:mb-8">
+              <h3 className="font-tuner text-3xl lg:text-4xl lg:leading-tight bg-gradient-to-br from-blue-700/70 via-blue-900/90 to-blue-1000 group-hover:from-orange-300 group-hover:via-orange-500 group-hover:to-orange-700 bg-clip-text text-transparent">
+                {post.title}
+              </h3>
+              <div className="w-full text-[#241748] ">
+                <div className="flex justify-between items-center w-full mb-6 -mt-2">
+                  <p className="opacity-70">
+                    <span className="mr-1">By</span>
+                    <strong>{post.author}</strong>
+                  </p>
+                  <p className="opacity-70">{formatDate(post.date || '')}</p>
+                </div>
+                <div className=' font-light mb-6'>
+                <MarkdownContent skipHtml={true} content={extractTextFromBody(post.body)} />  
+                </div>
+
+                <hr className="block border-none bg-[url('/svg/hr.svg')] bg-no-repeat bg-[length:auto_100%] h-[7px] w-full my-8" />
+              </div>
+            </div>
+          </DynamicLink>
+        ))}
+        <div className="mt-12">
+          <NewBlogPagination currentPage={pageIndex} numPages={numPages} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/blog/page/[page_index]/page.tsx

@@ -0,0 +1,52 @@
+import client from 'tina/__generated__/client';
+
+import { glob } from 'fast-glob';
+import BlogIndexPageClient from './BlogIndexPageClient';
+
+const POSTS_PER_PAGE = 8;
+
+export async function generateStaticParams() {
+  const contentDir = './content/blog/';
+  const files = await glob(`${contentDir}**/*.mdx`);
+  const numFiles = Math.ceil(files.length / POSTS_PER_PAGE);
+  console.log(Array.from(Array(numFiles).keys()).join().split(','));
+  return Array.from(Array(numFiles).keys()).map((page) => ({
+    page_index: (page + 1).toString(),
+  }));
+}
+
+export default async function BlogPaginationPage({
+  params,
+}: {
+  params: { page_index: string };
+}) {
+  const contentDir = './content/blog/';
+  const posts = await glob(`${contentDir}**/*.mdx`);
+  const numPages = Math.ceil(posts.length / POSTS_PER_PAGE);
+  const pageIndex = parseInt(params.page_index) || 1;
+  const startIndex = (pageIndex - 1) * POSTS_PER_PAGE;
+
+  const postResponse = await client.queries.postConnection({
+    first: posts.length,
+    sort: 'date',
+  });
+
+  const reversedPosts = postResponse?.data?.postConnection?.edges
+    ?.map((edge) => edge.node)
+    .reverse();
+
+  const finalisedPostData = reversedPosts.slice(
+    startIndex,
+    startIndex + POSTS_PER_PAGE
+  );
+
+  return (
+    <>
+      <BlogIndexPageClient
+        currentPageIndexNumber={pageIndex}
+        postsForPageIndex={finalisedPostData}
+        numberOfPages={numPages}
+      />
+    </>
+  );
+}

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

@@ -4,19 +4,25 @@ import MainDocsBodyHeader from 'components/AppRouterMigrationComponents/Docs/doc
 import TocOverflowButton from 'components/AppRouterMigrationComponents/Docs/docsMain/tocOverflowButton';
 import { LeftHandSideParentContainer } from 'components/AppRouterMigrationComponents/Docs/docsSearch/SearchNavigation';
 import ToC from 'components/AppRouterMigrationComponents/Docs/toc';
+import { useTocListener } from 'components/AppRouterMigrationComponents/Docs/toc_helper';
+import { formatDate } from 'components/AppRouterMigrationComponents/utils/formatDate';
 import { screenResizer } from 'components/hooks/ScreenResizer';
 import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents';
 import { DocsPagination } from 'components/ui';
+import { useTina } from 'tinacms/dist/react';
 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];
+export default function DocsClient({ props, tinaProps }) {
+  const { data } = useTina({
+    query: props.query,
+    variables: props.variables,
+    data: props.data,
+  });
 
+  const { PageTableOfContents, NavigationDocsData } = props;
+  const DocumentationData = data.doc;
+
+  const allData = [DocumentationData, PageTableOfContents, NavigationDocsData];
 
   const isScreenSmallerThan1200 = screenResizer().isScreenSmallerThan1200;
   const isScreenSmallerThan840 = screenResizer().isScreenSmallerThan840;
@@ -32,26 +38,15 @@ export default function DocsClient(props) {
     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 formattedDate = formatDate(lastEdited);
   const gridClass = isScreenSmallerThan840
     ? 'grid-cols-1'
     : isScreenSmallerThan1200
     ? 'grid-cols-[1.25fr_3fr]'
     : 'grid-cols-[1.25fr_3fr_0.75fr]';
 
-
-
-  return ( 
+  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 */}