🚏 Move /whats-new pages to app router (tinacms#2690)

* whats-new pages move to app router

* fix names

app/whats-new/tinacloud/WhatsNewTinaCloudPageLayout.tsx

@@ -0,0 +1,49 @@
+import { whatsNewMDComponents } from 'components/styles/WhatsNewMDComponents';
+import Link from 'next/link';
+import { FaNewspaper } from 'react-icons/fa';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+
+export const WhatsNewTinaCloudPageLayout = ({ data }) => {
+  const items = data.WhatsNewTinaCloudConnection.edges.map((edge) => edge.node);
+
+  return (
+    <div className="p-6 py-12 lg:py-16 last:pb-20 last:lg:pb-32 max-w-prose mx-auto">
+      <h1 className="text-center justify-center font-tuner text-3xl lg:text-4xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-600 to-orange-700 group-hover:from-orange-300 group-hover:via-orange-500 group-hover:to-orange-700 bg-clip-text text-transparent">
+        What's new with TinaCloud
+      </h1>
+      <div className="mt-8">
+        {items.length === 0 ? (
+          <p className="text-gray-500">No items found</p>
+        ) : (
+          items.map((item) => (
+            <div
+              key={item.id}
+              className="mb-6 p-10 shadow-xl rounded-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-white/25 via-white/50 to-white/75"
+            >
+              <h2 className="text-2xl bg-gradient-to-br from-blue-700 to-blue-1000 bg-clip-text text-transparent text-blue-700 font-semibold">
+                Version {item.versionNumber}
+              </h2>
+              <p className="text-sm text-gray-500">
+                Released on {new Date(item.dateReleased).toLocaleDateString()}
+              </p>
+              <TinaMarkdown
+                content={item.body}
+                components={whatsNewMDComponents}
+              />
+            </div>
+          ))
+        )}
+      </div>
+      <div className="font-tuner text-lg text-center text-blue-700">
+        <Link
+          href="https://us20.campaign-archive.com/home/?u=1fea337bee20e7270d025ea8a&id=c1062536a1"
+          className="flex items-center justify-center hover:text-blue-800"
+        >
+          See Newsletters <FaNewspaper className="ml-2" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default WhatsNewTinaCloudPageLayout;

app/whats-new/tinacloud/page.tsx

@@ -0,0 +1,50 @@
+import { client } from 'tina/__generated__/client';
+import WhatsNewTinaCloudPageLayout from './WhatsNewTinaCloudPageLayout';
+
+export async function generateMetadata() {
+  const vars = { last: 10, sort: 'dateReleased' };
+  const { data } = await fetchTinaCloudData(vars);
+  const nodesData = data.WhatsNewTinaCloudConnection.edges.map(
+    (edge) => edge.node
+  );
+  const seoData = (nodesData[0] as { seo?: any })?.seo || {
+    title: "What's New in TinaCloud",
+    description:
+      'Stay updated with the latest improvements and features in TinaCloud.',
+  };
+
+  return {
+    title: seoData.title,
+    description: seoData.description,
+    openGraph: {
+      title: seoData.title,
+      description: seoData.description,
+      type: 'website',
+      locale: 'en_CA',
+      site_name: 'https://tina.io/tinacloud',
+      images: [
+        {
+          url: 'https://tina.io/img/tina-og.png',
+          width: 1200,
+          height: 628,
+          alt: 'Tina - The Markdown CMS',
+        },
+      ],
+    },
+  };
+}
+
+export default async function TinaCloudPage() {
+  const vars = { last: 10, sort: 'dateReleased' };
+  const { data, query } = await fetchTinaCloudData(vars);
+
+  return <WhatsNewTinaCloudPageLayout data={data} />;
+}
+
+const fetchTinaCloudData = async (vars = {}) => {
+  const res = await client.queries.WhatsNewTinaCloudConnection(vars);
+  return {
+    data: res.data,
+    query: res.query,
+  };
+};

app/whats-new/tinacms/WhatsNewTinaCMSLayout.tsx

@@ -0,0 +1,52 @@
+import { Layout } from 'components/layout';
+import { whatsNewMDComponents } from 'components/styles/WhatsNewMDComponents';
+import Link from 'next/link';
+import { FaGithub, FaNewspaper } from 'react-icons/fa';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+
+const WhatsNewTinaCMSPageLayout = ({ data }) => {
+  const items = data.WhatsNewTinaCMSConnection.edges.map((edge) => edge.node);
+
+  return (
+    <div className="p-6 py-12 lg:py-16 last:pb-20 last:lg:pb-32 max-w-prose md:mx-auto">
+      <h1 className="text-center justify-center font-tuner text-3xl lg:text-4xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-600 to-orange-700 group-hover:from-orange-300 group-hover:via-orange-500 group-hover:to-orange-700 bg-clip-text text-transparent">
+        What's new with TinaCMS
+      </h1>
+      <div className="mt-8">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className="mb-6 p-10 shadow-xl rounded-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-white/25 via-white/50 to-white/75"
+          >
+            <h2 className="text-2xl bg-gradient-to-br from-blue-700 to-blue-1000 bg-clip-text text-transparent text-blue-700 font-semibold">
+              Version {item.versionNumber}
+            </h2>
+            <p className="text-sm text-gray-500">
+              Released on {new Date(item.dateReleased).toLocaleDateString()}
+            </p>
+            <TinaMarkdown
+              content={item.body}
+              components={whatsNewMDComponents}
+            />
+          </div>
+        ))}
+      </div>
+      <div className="font-tuner text-lg text-center text-blue-700">
+        <Link
+          href="https://github.com/tinacms/tinacms/blob/main/packages/tinacms/CHANGELOG.md"
+          className="flex items-center justify-center hover:text-blue-800"
+        >
+          See more on GitHub <FaGithub className="ml-2" />
+        </Link>
+        <Link
+          href="https://us20.campaign-archive.com/home/?u=1fea337bee20e7270d025ea8a&id=c1062536a1"
+          className="flex items-center justify-center hover:text-blue-800"
+        >
+          See Newsletters <FaNewspaper className="ml-2" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default WhatsNewTinaCMSPageLayout;

app/whats-new/tinacms/page.tsx

@@ -0,0 +1,52 @@
+import { client } from 'tina/__generated__/client';
+import WhatsNewTinaCMSPageLayout from './WhatsNewTinaCMSLayout';
+
+export async function generateMetadata() {
+  const vars = { last: 10, sort: 'dateReleased' };
+  const { data } = await fetchWhatsNewData(vars);
+  const nodesData = data.WhatsNewTinaCMSConnection.edges.map(
+    (edge: any) => edge.node
+  );
+  const whatsNewSEOData = nodesData[0].seo || {
+    title: "What's New in TinaCMS",
+    description: 'Discover the latest updates and features in TinaCMS.',
+  };
+
+  return {
+    title: whatsNewSEOData.title,
+    description: whatsNewSEOData.description,
+    openGraph: {
+      title: whatsNewSEOData.title,
+      description: whatsNewSEOData.description,
+      type: 'website',
+      locale: 'en_CA',
+      site_name: 'https://tina.io/whats-new',
+      images: [
+        {
+          url: 'https://tina.io/img/tina-og.png',
+          width: 1200,
+          height: 628,
+          alt: `Tina - The Markdown CMS`,
+        },
+      ],
+    },
+  };
+}
+
+export default async function TinaCMSPage() {
+  const vars = { last: 10, sort: 'dateReleased' };
+
+  const { data, query } = await fetchWhatsNewData(vars);
+
+  console.log(data);
+  // return <div> banana</div>
+  return <WhatsNewTinaCMSPageLayout data={data} />;
+}
+
+const fetchWhatsNewData = async (vars = {}) => {
+  const res = await client.queries.WhatsNewTinaCMSConnection(vars);
+  return {
+    data: res.data,
+    query: res.query,
+  };
+};

components/blocks/LogoGrid/LogoGrid.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import React from 'react';
-import Slider from 'react-infinite-logo-slider';
 
 const Logo = ({ data, windowWidth = 1000 }) => {
   if (!data) return null;
@@ -73,7 +72,7 @@ export function LogoGridBlock({ data, index }) {
           <h1 className="pl-3 font-tuner inline w-fit m-auto text-3xl lg:text-5xl lg:leading-tight bg-gradient-to-br from-blue-600/80 via-blue-800/80 to-blue-1000 bg-clip-text text-transparent text-balance text-center mt-10">
             {data.title || 'Trusted By'}
           </h1>
-          <Slider
+          {/* <Slider
             width="250px"
             duration={40}
             pauseOnHover={true}
@@ -85,7 +84,7 @@ export function LogoGridBlock({ data, index }) {
                 <Logo data={item} windowWidth={windowSize.width} />
               </Slider.Slide>
             ))}
-          </Slider>
+          </Slider> */}
         </div>
       </section>
     </>