♻️ 💸 Tech Debt Refactor – Converting the Product Tour into a (super cool) Reusable Component (tinacms#2672)

* moving the product tour page into a re-usable component

* wiring up the new component and removing old code

* completing card grid work in another branch

* removing console logs and other cleanup

* checking for ref unmount to avoid errors on redirect with scroll behaviour

* fixing an issue where the initial rendering height for the image was above the content window

* lockfile

* rectifying weird scroll behaviour and also pointer event illusions

Author: isaaclombardssw

components/tinaMarkdownComponents/docAndBlogComponents.tsx

@@ -1,6 +1,7 @@
 import { CardGrid } from 'components/blocks/CardGrid';
 import RecipeBlock from 'components/blocks/Recipe';
 import { GraphQLQueryResponseTabs } from 'components/ui/GraphQLQueryResponseTabs';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useState } from 'react';
 import { BiRightArrowAlt } from 'react-icons/bi';
@@ -10,6 +11,12 @@ import { Components, TinaMarkdown } from 'tinacms/dist/rich-text';
 import { getDocId } from 'utils/docs/getDocIds';
 import { WarningCallout } from 'utils/shortcodes';
 import { Prism } from '../styles/Prism';
+const ScrollBasedShowcase = dynamic(
+  () => import('./templateComponents/scrollBasedShowcase'),
+  {
+    ssr: false,
+  }
+);
 
 export const docAndBlogComponents: Components<{
   Iframe: { iframeSrc: string; height: string };
@@ -47,6 +54,14 @@ export const docAndBlogComponents: Components<{
       codeLineEnd?: number;
     }[];
   };
+  scrollBasedShowcase: {
+    showcaseItems: {
+      image: string;
+      title: string;
+      useAsSubsection: boolean;
+      content: string;
+    }[];
+  };
   cardGrid: {
     cards: {
       title: string;
@@ -56,6 +71,9 @@ export const docAndBlogComponents: Components<{
     }[];
   };
 }> = {
+  scrollBasedShowcase: (props) => {
+    return <ScrollBasedShowcase showcaseItems={props.showcaseItems} />;
+  },
   cardGrid: (props) => {
     return <CardGrid props={props} />;
   },
@@ -356,7 +374,7 @@ export const docAndBlogComponents: Components<{
 function FormatHeaders({ children, level }) {
   const HeadingTag = `h${level}` as any;
   const id = getDocId(
-    children.props.content.map((content) => content.text).join('')
+    children.props?.content.map((content) => content.text).join('') ?? children
   );
 
   const currentUrl =

components/tinaMarkdownComponents/templateComponents/scrollBasedShowcase.schema.tsx

@@ -0,0 +1,64 @@
+import { Template } from 'tinacms';
+
+const ScrollBasedShowcase: Template = {
+  label: 'Scroll Based Showcase',
+  name: 'scrollBasedShowcase',
+  fields: [
+    {
+      type: 'object',
+      label: 'Showcase Items',
+      name: 'showcaseItems',
+      list: true,
+      ui: {
+        defaultItem: {
+          title: 'Title',
+          image: '/img/placeholder.png',
+          content: {
+            type: 'root',
+            children: [
+              {
+                type: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    text: 'Default Text. Edit me!',
+                  },
+                ],
+              },
+            ],
+          },
+          useAsSubsection: false,
+        },
+        itemProps: (item) => {
+          return {
+            label: item.title,
+          };
+        },
+      },
+      fields: [
+        {
+          type: 'image',
+          label: 'Image',
+          name: 'image',
+        },
+        {
+          type: 'string',
+          label: 'Title',
+          name: 'title',
+        },
+        {
+          type: 'boolean',
+          label: 'Use as Subsection',
+          name: 'useAsSubsection',
+        },
+        {
+          type: 'rich-text',
+          label: 'Content',
+          name: 'content',
+        },
+      ],
+    },
+  ],
+};
+
+export default ScrollBasedShowcase;