Merge branch 'main' into releaseNotes/TinaCloud-2025.01.65

app/layout.tsx

@@ -18,6 +18,10 @@ const TinaChatBot = dynamic(
 export const metadata = {
   title: data.seoDefaultTitle,
   descripton: data.description,
+  icons:
+  {
+    icon: '/favicon/favicon.ico',
+  },
   openGraph: {
     title: data.seoDefaultTitle,
     description: data.description,

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/CustomSlider.tsx

@@ -0,0 +1,86 @@
+import { useRef, useState, useEffect } from "react";
+
+export const Slider = ({ items, speed = 0.05, slidesToShow = 5 }) => {
+  const sliderRef = useRef(null);
+
+  const [isPaused, setIsPaused] = useState(false);
+
+
+
+  // Current scroll position in pixels (negative means moving left).
+  const scrollPosition = useRef(0);
+
+  // The width of one “set” of items. We render 2 sets total in a row.
+  const [oneSetWidth, setOneSetWidth] = useState(0);
+  useEffect(() => {
+    if (!sliderRef.current) return;
+
+    const measureId = requestAnimationFrame(() => {
+      const totalWidth = sliderRef.current.scrollWidth;
+
+      setOneSetWidth(totalWidth / 2);
+    });
+
+    return () => cancelAnimationFrame(measureId);
+  }, [items, slidesToShow]);
+
+  useEffect(() => {
+    let rafId;
+
+    function tick() {
+      if (!isPaused && oneSetWidth && sliderRef.current) {
+        // Move left by `speed` pixels per frame
+        scrollPosition.current -= speed;
+
+        // If we've scrolled left past the entire width of one set,
+        // jump forward by that width to create a seamless loop
+        if (scrollPosition.current <= -oneSetWidth) {
+          scrollPosition.current += oneSetWidth;
+        }
+
+        sliderRef.current.style.transform = `translateX(${scrollPosition.current}px)`;
+      }
+      rafId = requestAnimationFrame(tick);
+    }
+
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [isPaused, speed, oneSetWidth]);
+
+  /**
+   * 3) Pick the correct width class:
+   *    - 5 => `w-1/5`
+   *    - 3 => `w-1/3`
+   */
+  const widthClass = slidesToShow === 5 ? 'w-1/5' : 'w-1/3';
+
+  return (
+    <div
+      className="overflow-hidden relative w-full h-40"
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+    >
+      <div ref={sliderRef} className="flex whitespace-nowrap subpixel-antialiased backface-hidden">
+        {items.map((item, i) => (
+          <div
+            key={i}
+            // Ensure each item is exactly 1/5 or 1/3 of the container for even horiz spacing
+            className={`flex-none box-border px-2 ${widthClass}`}
+          >
+            {item}
+          </div>
+        ))}
+
+        {/* Duplicate items for the seamless loop */}
+        {items.map((item, i) => (
+          <div
+            key={`clone-${i}`}
+            className={`flex-none box-border px-2 ${widthClass}`}
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};