From 34ae55574059cf54850096aa044bed51489c8511 Mon Sep 17 00:00:00 2001
From: "Josh Berman [SSW]" <137844305+joshbermanssw@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:40:46 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E2=99=BB=EF=B8=8F=20Rework=20Do?=
 =?UTF-8?q?cs=20(#2580)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* main of desktop ui

* v1 of UI

* cleanup of logs

* lg view test passed

* test passed medium view

* sm view test passed

* extra clean

* make version select work

* push pr reviews

* bety changes

* betty changes

* make yt videos full width

* add search bar option to search page
---
 .../DocumentationNavigation/Breadcrumbs.tsx   |  34 +--
 .../DocumentationNavigation.tsx               |  25 +-
 .../docsMain/directoryOverflowButton.tsx      |  50 ++++
 components/docsMain/docsMainBody.tsx          |  21 ++
 components/docsMain/docsMobileHeader.tsx      |  77 ++++++
 components/docsMain/tocOverflowButton.tsx     |  66 ++++++
 components/docsSearch/SearchNavigation.tsx    |  41 +++-
 components/layout/DocsLayout.tsx              |  80 ++++---
 components/layout/Layout.tsx                  |   2 +-
 components/styles/Prism.tsx                   |  11 +-
 .../docAndBlogComponents.tsx                  |  50 +++-
 components/toc/index.tsx                      |  94 ++++----
 components/ui/DocsPagination.tsx              |  10 +-
 content/docs/data-fetching/custom-queries.mdx |   6 +-
 content/docs/editing/blocks.mdx               |  10 +-
 pages/docs/[...slug].tsx                      | 221 +++++++++++-------
 pages/docs/product-tour.tsx                   |   6 +-
 pages/search.tsx                              |  15 +-
 18 files changed, 583 insertions(+), 236 deletions(-)
 create mode 100644 components/docsMain/directoryOverflowButton.tsx
 create mode 100644 components/docsMain/docsMainBody.tsx
 create mode 100644 components/docsMain/docsMobileHeader.tsx
 create mode 100644 components/docsMain/tocOverflowButton.tsx

diff --git a/components/DocumentationNavigation/Breadcrumbs.tsx b/components/DocumentationNavigation/Breadcrumbs.tsx
index d1956b53a2..7be87c4aa2 100644
--- a/components/DocumentationNavigation/Breadcrumbs.tsx
+++ b/components/DocumentationNavigation/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import styled from 'styled-components'
-import { matchActualTarget } from 'utils'
+import React from 'react';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { matchActualTarget } from 'utils';
 
 export const ChevronRightIcon = ({ ...props }) => (
   <svg
@@ -14,10 +14,10 @@ export const ChevronRightIcon = ({ ...props }) => (
   >
     <path d="M11 24.792L12.2654 26L21.4773 17.2061C22.1747 16.5403 22.1737 15.4588 21.4773 14.7939L12.2654 6L11 7.208L20.2099 16L11 24.792Z" />
   </svg>
-)
+);
 
 export interface DocsNavProps {
-  navItems: any
+  navItems: any;
 }
 
 const getNestedBreadcrumbs = (
@@ -27,38 +27,38 @@ const getNestedBreadcrumbs = (
 ) => {
   for (const listItem of listItems || []) {
     if (matchActualTarget(pagePath, listItem.slug || listItem.href)) {
-      breadcrumbs.push(listItem)
-      return [listItem]
+      breadcrumbs.push(listItem);
+      return [listItem];
     }
     const nestedBreadcrumbs = getNestedBreadcrumbs(
       listItem.items,
       pagePath,
       breadcrumbs
-    )
+    );
     if (nestedBreadcrumbs.length) {
-      return [listItem, ...nestedBreadcrumbs]
+      return [listItem, ...nestedBreadcrumbs];
     }
   }
-  return []
-}
+  return [];
+};
 
 export function Breadcrumbs({ navItems }: DocsNavProps) {
-  const router = useRouter()
-  const breadcrumbs = getNestedBreadcrumbs(navItems, router.asPath) || []
+  const router = useRouter();
+  const breadcrumbs = getNestedBreadcrumbs(navItems, router.asPath) || [];
   return (
     <>
       <BreadcrumbList>
         {breadcrumbs.map((breadcrumb, i) => (
           <li key={breadcrumb.slug}>
             {i != 0 && <ChevronRightIcon />}
-            <a href={breadcrumb.slug}>
+            <a className="hover:text-orange-500" href={breadcrumb.slug}>
               {breadcrumb.title || breadcrumb.category}
             </a>
           </li>
         ))}
       </BreadcrumbList>
     </>
-  )
+  );
 }
 
 const BreadcrumbList = styled.ul`
@@ -107,4 +107,4 @@ const BreadcrumbList = styled.ul`
       opacity: 1 !important;
     }
   }
-`
+`;
diff --git a/components/DocumentationNavigation/DocumentationNavigation.tsx b/components/DocumentationNavigation/DocumentationNavigation.tsx
index 0dd99e5ff6..897d9e0043 100644
--- a/components/DocumentationNavigation/DocumentationNavigation.tsx
+++ b/components/DocumentationNavigation/DocumentationNavigation.tsx
@@ -11,6 +11,7 @@ import { searchIndices } from '../../components/search/indices';
 import { VersionSelect } from './VersionSelect';
 import { BiMenu } from 'react-icons/bi';
 import { IoMdClose } from 'react-icons/io';
+import { LeftHandSideParentContainer } from 'components/docsSearch/SearchNavigation';
 
 export interface DocsNavProps {
   navItems: any;
@@ -28,30 +29,6 @@ export function DocumentationNavigation({ navItems }: DocsNavProps) {
           onClick={() => setMobileNavIsOpen(!mobileNavIsOpen)}
         />
       )}
-      
-      <DocsLeftSidebar open={mobileNavIsOpen}>
-        <DocsSidebarHeaderWrapper>
-          <DocsSidebarHeader>
-            <div className="text-2xl leading-tight mt-2.5 ml-2 font-tuner text-orange-500">
-              Tina Docs
-            </div>
-            <VersionSelect />
-          </DocsSidebarHeader>
-
-         
-          <CloseButton mobileNavIsOpen={mobileNavIsOpen} onClick={() => setMobileNavIsOpen(false)}>
-            <IoMdClose className="icon text-orange-500 hover:text-orange-400" />
-          </CloseButton>
-
-          <Search collapse expanded={true} indices={searchIndices} />
-        </DocsSidebarHeaderWrapper>
-
-        {router.isFallback ? (
-          <FallbackPlaceholder />
-        ) : (
-          <DocsNavigationList navItems={navItems} />
-        )}
-      </DocsLeftSidebar>
 
       <Overlay
         open={mobileNavIsOpen}
diff --git a/components/docsMain/directoryOverflowButton.tsx b/components/docsMain/directoryOverflowButton.tsx
new file mode 100644
index 0000000000..890207fcf1
--- /dev/null
+++ b/components/docsMain/directoryOverflowButton.tsx
@@ -0,0 +1,50 @@
+import { DocsNavigationList } from 'components/DocumentationNavigation/DocsNavigationList';
+import { useState, useEffect, useRef } from 'react';
+import { MdMenu } from 'react-icons/md';
+
+const DirectoryOverflow = ({ tocData }) => {
+  return (
+    <div className="absolute z-20 bg-white mt-4 rounded-lg w-full p-6 shadow-xl animate-fade-down animate-duration-300 overflow-y-scroll h-96">
+      <DocsNavigationList navItems={tocData.tocData} />
+    </div>
+  );
+};
+
+const DirectoryOverflowButton = (tocData) => {
+  const [isTableOfContentsOpen, setIsTableOfContentsOpen] = useState(false);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsTableOfContentsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="pb-6 w-full" ref={containerRef}>
+      <div
+        className="py-2 px-4 border-slate-400 bg-gradient-to-r from-white/50 to-white/30 rounded-lg shadow-lg cursor-pointer"
+        onClick={() => setIsTableOfContentsOpen(!isTableOfContentsOpen)}
+      >
+        <span className="flex items-center space-x-2 py-1">
+          <MdMenu size={20} className="text-orange-500" />
+          <span className="text-slate-600">Topics</span>
+        </span>
+      </div>
+      {isTableOfContentsOpen && (
+        <div className="w-full relative">
+          <DirectoryOverflow tocData={tocData} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DirectoryOverflowButton;
diff --git a/components/docsMain/docsMainBody.tsx b/components/docsMain/docsMainBody.tsx
new file mode 100644
index 0000000000..e8f06208c9
--- /dev/null
+++ b/components/docsMain/docsMainBody.tsx
@@ -0,0 +1,21 @@
+import { Breadcrumbs } from 'components/DocumentationNavigation/Breadcrumbs';
+import DocsMobileHeader from './docsMobileHeader';
+
+const MainDocsBodyHeader = (docData) => {
+  const DocumentTitle = docData.data.new.results.data.doc.title;
+
+  return (
+    <div>
+      {docData.screenSizing && (
+        <DocsMobileHeader data={docData}></DocsMobileHeader>
+      )}
+
+      <Breadcrumbs navItems={docData.data.navDocData.data} />
+      <div className="pt-4 font-tuner text-4xl bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent">
+        {DocumentTitle}
+      </div>
+    </div>
+  );
+};
+
+export default MainDocsBodyHeader;
diff --git a/components/docsMain/docsMobileHeader.tsx b/components/docsMain/docsMobileHeader.tsx
new file mode 100644
index 0000000000..82184e48d6
--- /dev/null
+++ b/components/docsMain/docsMobileHeader.tsx
@@ -0,0 +1,77 @@
+import { DocsSearchBarHeader } from 'components/docsSearch/SearchNavigation';
+import { useState } from 'react';
+import { FaChevronRight } from 'react-icons/fa';
+import DirectoryOverflowButton from './directoryOverflowButton';
+
+export const MobileVersionSelect = () => {
+  const versions = [
+    ['v.Latest', ''],
+    [
+      'v.0.68.13',
+      'https://tinacms-site-next-i08bcbicy-tinacms.vercel.app/docs/',
+    ],
+    ['v.0.67.3', 'https://tinacms-site-next-pu1t2v9y4-tinacms.vercel.app/'],
+    ['v.Pre-Beta', 'https://pre-beta.tina.io/'],
+  ];
+  const [versionSelected, setVersionSelected] = useState(versions[0][0]);
+  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
+
+  const handleVersionClick = (version) => {
+    setVersionSelected(version[0]);
+    setIsOverflowOpen(false);
+
+    if (version[0] !== 'v.Latest') {
+      window.location.href = version[1];
+    }
+  };
+
+  return (
+    <div className="relative">
+      {/* VERSION SELECT PILL BUTTON */}
+      <div
+        className="bg-white cursor-pointer px-4 py-1 rounded-2xl shadow-sm flex justify-center text-center items-center text-stone-600"
+        onClick={() => setIsOverflowOpen(!isOverflowOpen)}
+      >
+        <div>{versionSelected}</div>
+        <div>
+          <FaChevronRight
+            className={`ml-2 transform transition-transform duration-300 ${
+              isOverflowOpen ? 'rotate-90' : ''
+            }`}
+          />
+        </div>
+      </div>
+      {/* VERSION SELECT OVERFLOW */}
+      {isOverflowOpen && (
+        <div className="absolute bg-white shadow-lg mt-2 right-1 rounded-lg w-full z-10 animate-fade-down animate-duration-300">
+          {versions.map((version, index) => (
+            <div
+              key={index}
+              className="px-4 py-2 hover:bg-stone-100 cursor-pointer text-stone-600"
+              onClick={() => handleVersionClick(version)}
+            >
+              {version[0]}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DocsMobileHeader = (data) => {
+  return (
+    <div className="relative pb-20">
+      <DocsSearchBarHeader
+        paddingGlobal="pb-4"
+        headerColour="orange"
+        headerPadding=""
+        searchMargin=""
+        searchBarPadding="py-3"
+      />
+      <DirectoryOverflowButton tocData={data.data.data.navDocData.data} />
+    </div>
+  );
+};
+
+export default DocsMobileHeader;
diff --git a/components/docsMain/tocOverflowButton.tsx b/components/docsMain/tocOverflowButton.tsx
new file mode 100644
index 0000000000..0e622e2799
--- /dev/null
+++ b/components/docsMain/tocOverflowButton.tsx
@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import { useState, useEffect, useRef } from 'react';
+import { MdMenu } from 'react-icons/md';
+import { getDocId } from 'utils/docs/getDocIds';
+
+const TocOverflow = ({ tocData }) => {
+  return (
+    <div className="absolute z-10 bg-white mt-4 rounded-lg w-full p-6 shadow-lg animate-fade-down animate-duration-300 max-h-96 overflow-y-scroll">
+      {tocData.tocData.map((item, index) => {
+        const textIndentation =
+          item.type === 'h3' ? 'ml-4' : item.type === 'h4' ? 'ml-8' : '';
+
+        const linkHref = `#${item.text.replace(/\s+/g, '-').toLowerCase()}`;
+
+        return (
+          <Link
+            key={index}
+            href={linkHref}
+            className={`block hover:text-orange-500 transition-colors pl-6 ${textIndentation} pb-1`}
+          >
+            {item.text}
+          </Link>
+        );
+      })}
+    </div>
+  );
+};
+
+const TocOverflowButton = (tocData) => {
+  const [isTableOfContentsOpen, setIsTableOfContentsOpen] = useState(false);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsTableOfContentsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="py-6 w-full" ref={containerRef}>
+      <div
+        className="py-2 px-4 border-slate-400 bg-gradient-to-r from-white/50 to-white/30 rounded-lg shadow-lg cursor-pointer"
+        onClick={() => setIsTableOfContentsOpen(!isTableOfContentsOpen)}
+      >
+        <span className="flex items-center space-x-2">
+          <MdMenu size={20} className="text-orange-500" />
+          <span className="text-slate-600 py-1">Table of Contents</span>
+        </span>
+      </div>
+      {isTableOfContentsOpen && (
+        <div className="w-full relative">
+          <TocOverflow tocData={tocData} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TocOverflowButton;
diff --git a/components/docsSearch/SearchNavigation.tsx b/components/docsSearch/SearchNavigation.tsx
index 52fa68d82b..383fd8991a 100644
--- a/components/docsSearch/SearchNavigation.tsx
+++ b/components/docsSearch/SearchNavigation.tsx
@@ -1,8 +1,9 @@
 import { DocsNavigationList } from 'components/DocumentationNavigation/DocsNavigationList';
 import { VersionSelect } from 'components/DocumentationNavigation/VersionSelect';
+import { MobileVersionSelect } from 'components/docsMain/docsMobileHeader';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { fetchAlgoliaSearchResults } from 'utils/new-search';
 
@@ -91,7 +92,7 @@ export const SearchResultsOverflowTabs = ({ query }) => {
           <nav className="relative flex gap-16 px-4">
             <button
               ref={(el) => (tabRefs.current[0] = el)}
-              className={`font-inter font-semibold text-lg ${
+              className={`font-inter font-semibold text-sm ${
                 activeTab === 'DOCS' ? 'text-blue-800' : 'text-gray-500'
               }`}
               onClick={() => setActiveTab('DOCS')}
@@ -100,7 +101,7 @@ export const SearchResultsOverflowTabs = ({ query }) => {
             </button>
             <button
               ref={(el) => (tabRefs.current[1] = el)}
-              className={`font-inter font-semibold text-lg ${
+              className={`font-inter font-semibold text-sm ${
                 activeTab === 'BLOG' ? 'text-blue-800' : 'text-gray-500'
               }`}
               onClick={() => setActiveTab('BLOG')}
@@ -146,13 +147,23 @@ export const SearchResultsOverflow = ({ query }) => {
   );
 };
 
-export const LeftHandSideHeader = ({}) => {
+export const DocsSearchBarHeader = ({
+  paddingGlobal,
+  headerColour,
+  headerPadding,
+  searchMargin,
+  searchBarPadding,
+}) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [userHasTyped, setUserHasTyped] = useState(false);
   const [searchOverFlowOpen, setSearchOverflowOpen] = useState(false);
   const router = useRouter();
+  const headerStyling =
+    headerColour.toLowerCase() === 'blue'
+      ? 'from-blue-600/80 via-blue-800/80 to-blue-1000'
+      : 'from-orange-400 via-orange-500 to-orange-600';
 
   const handleKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchOverflowOpen(true);
@@ -188,19 +199,21 @@ export const LeftHandSideHeader = ({}) => {
   };
 
   return (
-    <div className="p-4 pt-10">
+    <div className={`${paddingGlobal} pt-10`}>
       <div className="flex justify-between">
-        <h1 className="text-3xl pb-4 font-tuner bg-gradient-to-br pl-4 from-blue-600/80 via-blue-800/80 to-blue-1000 bg-clip-text text-transparent">
-          Tina Docs
+        <h1
+          className={`text-4xl pb-4 font-tuner bg-gradient-to-br ${headerStyling} ${headerPadding}  bg-clip-text text-transparent`}
+        >
+          Docs
         </h1>
         <div className="mr-3">
-          <VersionSelect />
+          <MobileVersionSelect />
         </div>
       </div>
-      <div className="relative mx-3">
+      <div className={`relative ${searchMargin}`}>
         <input
           type="text"
-          className="w-full p-2 pl-6 rounded-full border border-gray-300/20"
+          className={`w-full p-2 pl-6 rounded-full border border-gray-300/20 bg-white/50 shadow-lg ${searchBarPadding}`}
           placeholder="Search"
           onKeyDown={handleKeyDown}
           onChange={handleKeyChange}
@@ -226,7 +239,13 @@ export const LeftHandSideHeader = ({}) => {
 export const LeftHandSideParentContainer = ({ tableOfContents }) => {
   return (
     <div className="rounded-2xl shadow-xl w-full bg-white/50 ">
-      <LeftHandSideHeader />
+      <DocsSearchBarHeader
+        paddingGlobal="p-4"
+        headerColour="blue"
+        headerPadding="pl-4"
+        searchMargin="mx-3"
+        searchBarPadding=""
+      />
       <div className="overflow-y-scroll overflow-x-hidden max-h-[62vh] 2xl:max-h-[75vh] pl-4 2xl:pl-0 ">
         <DocsNavigationList navItems={tableOfContents} />
       </div>
diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index 6d8d43a738..0b7b669182 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -2,54 +2,51 @@ import React from 'react';
 import styled from 'styled-components';
 import { DefaultSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import { DocumentationNavigation } from 'components/DocumentationNavigation';
-import { Footer } from './Footer'; 
+import { Footer } from './Footer';
 import { DocsTextWrapper } from './DocsTextWrapper';
 import { Overlay } from '../ui';
 import { Navbar } from './Navbar';
 import { Layout } from './Layout';
+import { LeftHandSideParentContainer } from 'components/docsSearch/SearchNavigation';
 
 interface DocsLayoutProps {
   navItems: any;
   children: any;
 }
 
-export const DocsLayout = React.memo(({ children, navItems }: DocsLayoutProps) => {
-  const router = useRouter();
-  return (
-    <>
-      <DefaultSeo openGraph={{ url: 'https://tina.io' + router.asPath }} />
-      <Layout sticky={false}>
-        <DocsLayoutGrid>
-        <DocumentationNavigation navItems={navItems} />
-        <DocsMain>
-          <DocsTextWrapper>{children}</DocsTextWrapper>
-        </DocsMain>
-        <DocsFooterWrapper>
-        </DocsFooterWrapper>
-      </DocsLayoutGrid>
-      </Layout>
-      
-    </>
-  );
-});
+export const DocsLayout = React.memo(
+  ({ children, navItems }: DocsLayoutProps) => {
+    const router = useRouter();
+    return (
+      <>
+        <DefaultSeo openGraph={{ url: 'https://tina.io' + router.asPath }} />
+        <Layout sticky={false}>
+          <DocsLayoutGrid>
+            <Sidebar>
+              <LeftHandSideParentContainer tableOfContents={navItems} />
+            </Sidebar>
+            <DocsMain>
+              <DocsTextWrapper>{children}</DocsTextWrapper>
+            </DocsMain>
+            <DocsFooterWrapper>
+            </DocsFooterWrapper>
+          </DocsLayoutGrid>
+        </Layout>
+      </>
+    );
+  }
+);
 
 const DocsLayoutGrid = styled.div`
-  @media (min-width: 840px) {
-    width: 100%;
-    display: grid;
-    grid-template-columns: min(33vw, 20rem) minmax(0, 1fr);
-    grid-template-rows: auto auto 1fr auto; 
-    grid-template-areas:
-      'navbar navbar'
-      'sidebar header'
-      'sidebar main'
-      'sidebar footer';
-
-    ${Overlay} {
-      display: none;
-    }
-  }
+  display: grid;
+  min-height: 100vh; /* Ensure grid stretches to viewport height */
+  grid-template-columns: min(33vw, 20rem) minmax(0, 1fr);
+  grid-template-rows: auto 1fr auto; /* Header, main, footer */
+  grid-template-areas:
+    'sidebar header'
+    'sidebar main'
+    'sidebar footer';
+  overflow: visible;
 
   @media (min-width: 1200px) {
     grid-template-columns: 20rem minmax(0, 1fr);
@@ -60,6 +57,16 @@ const DocsLayoutGrid = styled.div`
   }
 `;
 
+const Sidebar = styled.div`
+  grid-area: sidebar;
+  position: sticky;
+  top: 1rem;
+  padding-left: 1rem;
+  align-self: start;
+  overflow: visible;
+  margin-top: 4rem;
+`;
+
 const DocsMain = styled.div`
   grid-area: main;
   place-self: stretch;
@@ -70,4 +77,5 @@ const DocsFooterWrapper = styled.div`
   grid-area: footer;
   z-index: 1;
   position: relative;
+  margin-top: auto; 
 `;
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index 28b78519d9..3337d905d5 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -21,7 +21,7 @@ export const Layout = ({ children, color, sticky = true }: LayoutProps) => {
             url: 'https://tina.io' + router.asPath,
           }}
         />
-        <div className="lg:pb-20">
+        <div className="pb-0 lg:pb-20">
           <Navbar sticky={sticky}/>
         </div>
         <div className="flex flex-col flex-1">{children}</div>
diff --git a/components/styles/Prism.tsx b/components/styles/Prism.tsx
index 05fb90b730..909ea8e053 100644
--- a/components/styles/Prism.tsx
+++ b/components/styles/Prism.tsx
@@ -20,7 +20,16 @@ export const Prism = (props: {
       language={props.lang || ''}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre className={className} style={{...style, width: "100%", border: 'none', marginBottom: 0}}>
+        <pre
+          className={className}
+          style={{
+            ...style,
+            width: '100%',
+            border: 'none',
+            marginBottom: 0,
+            borderRadius: '12px', 
+          }}
+        >
           {tokens.map((line, i) => (
             <div {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (
diff --git a/components/tinaMarkdownComponents/docAndBlogComponents.tsx b/components/tinaMarkdownComponents/docAndBlogComponents.tsx
index 2c030d7053..2c45c828c8 100644
--- a/components/tinaMarkdownComponents/docAndBlogComponents.tsx
+++ b/components/tinaMarkdownComponents/docAndBlogComponents.tsx
@@ -70,6 +70,12 @@ export const docAndBlogComponents: Components<{
       </div>
     );
   },
+  code: (props) => (
+    <code
+      className="px-1 text-orange-500 py-0.5 border-y-stone-600 bg-white rounded"
+      {...props}
+    />
+  ),
 
   Summary: (props) => {
     const [openTab, setOpenTab] = useState(false);
@@ -105,9 +111,9 @@ export const docAndBlogComponents: Components<{
   h4: (props) => <FormatHeaders level={5} {...props} />,
   h5: (props) => <FormatHeaders level={5} {...props} />,
   h6: (props) => <FormatHeaders level={6} {...props} />,
-  ul: (props) => <ul className="list-disc ml-5" {...props} />,
+  ul: (props) => <ul className="list-disc my-6 ml-5" {...props} />,
   ol: (props) => <ol className="list-decimal ml-5" {...props} />,
-  li: (props) => <li className="mb-2" {...props} />,
+  li: (props) => <li className="mb-2 ml-10" {...props} />,
   a: (props) => {
     return (
       <a
@@ -118,6 +124,16 @@ export const docAndBlogComponents: Components<{
       //Ripped the styling from styles/RichText.tsx " a:not([class]) "
     );
   },
+  //@ts-ignore it doesnt recognside blockquote but wont render block_quote and wil render blockquote....???
+  blockquote: (props) => (
+    <blockquote
+      style={{
+        backgroundColor: 'var(--color-seafoam)',
+      }}
+      className="my-6 border-l-4 py-6 border-x-teal-400/50 pl-4"
+      {...props}
+    />
+  ),
 
   Iframe: ({ iframeSrc, height }) => {
     return (
@@ -143,10 +159,9 @@ export const docAndBlogComponents: Components<{
     </div>
   ),
   Youtube: ({ embedSrc }) => (
-    <div className="youtube-container">
+    <div className="youtube-container my-6 w-full relative" style={{ paddingBottom: '56.25%' }}>
       <iframe
-        width="560"
-        height="315"
+        className="absolute top-0 left-0 w-full h-full"
         src={embedSrc}
         title="YouTube video player"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -154,6 +169,7 @@ export const docAndBlogComponents: Components<{
       ></iframe>
     </div>
   ),
+  
   CreateAppCta: ({ ctaText, cliText }) => (
     <>
       <a
@@ -265,11 +281,15 @@ export const docAndBlogComponents: Components<{
   // @ts-ignore TODO: fix this in TinaCMS
   code_block: ({ value, lang, children }) => {
     return (
-      <Prism
+      <div className='py-3 word-break white-space overflow-x-hidden'>
+        <Prism
         value={children || value || ''}
         lang={lang || 'jsx'}
         theme="nightOwl"
+
+        
       />
+      </div>
     );
   },
   GraphQLCodeBlock: ({ query, response, preselectResponse }) => {
@@ -330,9 +350,23 @@ function FormatHeaders({ children, level }) {
     typeof window !== 'undefined' ? window.location.pathname : '';
   const linkHref = `${currentUrl}#${id}`;
 
+  const styles = {
+    1: 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-4xl mt-4 mb-4',
+    2: 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-3xl mt-4 mb-3',
+    3: 'bg-gradient-to-br from-blue-800 via-blue-900 to-blue-100 bg-clip-text text-transparent text-xl font-medium mt-2 mb-2',
+    4: 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-xl font-medium mt-2 mb-2',
+    5: 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-lg font-medium mt-2 mb-1',
+    6: 'text-gray-500 text-base font-normal mt-2 mb-1',
+  };
+
   return (
-    <HeadingTag id={id} className="relative cursor-pointer">
-      <a href={linkHref} className="no-underline group">
+    <HeadingTag id={id} className={`${styles[level]} relative cursor-pointer`}>
+      <a
+        href={linkHref}
+        className="no-underline group"
+        onClick={() => navigator.clipboard.writeText(`tina.io${linkHref}`)}
+      >
+        {' '}
         {children}
         <FiLink className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 inline-flex mb-2" />
       </a>
diff --git a/components/toc/index.tsx b/components/toc/index.tsx
index 083a85d589..f9e06c36d5 100644
--- a/components/toc/index.tsx
+++ b/components/toc/index.tsx
@@ -1,45 +1,45 @@
-import { useState, useEffect } from 'react'
-import ReactMarkdown from 'react-markdown'
-import styled, { css } from 'styled-components'
-import RightArrowSvg from '../../public/svg/right-arrow.svg'
-import { getDocId } from 'utils/docs/getDocIds'
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import styled, { css } from 'styled-components';
+import RightArrowSvg from '../../public/svg/right-arrow.svg';
+import { getDocId } from 'utils/docs/getDocIds';
 
 interface TocProps {
-  tocItems: Array<{ type: string; text: string }>
-  activeIds: string[]
+  tocItems: Array<{ type: string; text: string }>;
+  activeIds: string[];
 }
 
-const generateMarkdown = (tocItems: Array<{ type: string; text: string }>) => {
+export const generateMarkdown = (tocItems: Array<{ type: string; text: string }>) => {
   return tocItems
     .map((item) => {
-      const anchor = getDocId(item.text)
-      const prefix = item.type === 'h3' ? '  ' : ''
-      return `${prefix}- [${item.text}](#${anchor})`
+      const anchor = getDocId(item.text);
+      const prefix = item.type === 'h3' ? '  ' : '';
+      return `${prefix}- [${item.text}](#${anchor})`;
     })
-    .join('\n')
-}
+    .join('\n');
+};
 
 const ToC = ({ tocItems, activeIds }: TocProps) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    const close = () => setIsOpen(false)
-    const allLinks = document.querySelectorAll('a')
+    const close = () => setIsOpen(false);
+    const allLinks = document.querySelectorAll('a');
     if (allLinks.length > 0) {
-      allLinks.forEach((a) => a.addEventListener('click', close))
+      allLinks.forEach((a) => a.addEventListener('click', close));
     }
     return () => {
       if (allLinks.length > 0) {
-        allLinks.forEach((a) => a.removeEventListener('click', close))
+        allLinks.forEach((a) => a.removeEventListener('click', close));
       }
-    }
-  }, [])
+    };
+  }, []);
 
   if (!tocItems || tocItems.length === 0) {
-    return null
+    return null;
   }
 
-  const tocMarkdown = generateMarkdown(tocItems)
+  const tocMarkdown = generateMarkdown(tocItems);
 
   return (
     <TocWrapper>
@@ -49,13 +49,28 @@ const ToC = ({ tocItems, activeIds }: TocProps) => {
       </TocButton>
       <TocContent activeIds={activeIds} isOpen={isOpen}>
         <TocDesktopHeader>Table of Contents</TocDesktopHeader>
-        <ReactMarkdown>{tocMarkdown}</ReactMarkdown>
+        <ReactMarkdown
+          components={{
+            li: ({ children }) => (
+              <li className="hover:text-orange-500 transition-colors">
+                {children}
+              </li>
+            ),
+            a: ({ children, ...props }) => (
+              <a {...props} className="hover:text-orange-500 transition-colors">
+                {children}
+              </a>
+            ),
+          }}
+        >
+          {tocMarkdown}
+        </ReactMarkdown>
       </TocContent>
     </TocWrapper>
-  )
-}
+  );
+};
 
-export default ToC
+export default ToC;
 
 export const TocDesktopHeader = styled.span`
   display: none;
@@ -69,7 +84,7 @@ export const TocDesktopHeader = styled.span`
   @media (min-width: 1200px) {
     display: block;
   }
-`
+`;
 
 export const TocWrapper = styled.div`
   margin-bottom: -0.375rem;
@@ -77,9 +92,10 @@ export const TocWrapper = styled.div`
 
   @media (min-width: 1200px) {
     position: sticky;
-    top: 1.5rem;
+    top: 8rem;
+    // this now matches the sticky of the left hand toc too
   }
-`
+`;
 
 export const TocButton = styled.button<{ isOpen: boolean }>`
   display: block;
@@ -134,11 +150,11 @@ export const TocButton = styled.button<{ isOpen: boolean }>`
   @media (min-width: 1200px) {
     display: none;
   }
-`
+`;
 
 export interface TocContentProps {
-  isOpen: boolean
-  activeIds: string[]
+  isOpen: boolean;
+  activeIds: string[];
 }
 
 export const TocContent = styled.div<TocContentProps>`
@@ -193,15 +209,11 @@ export const TocContent = styled.div<TocContentProps>`
 
   a {
     color: var(--color-secondary);
-    /* font-family: var(--font-tuner); */
-  }
+    text-decoration: underline;
 
-  /* Hide underline except on hover or focus */
-  a {
-    :not(:focus) {
-      :not(:hover) {
-        text-decoration-color: transparent !important;
-      }
+    &:hover,
+    &:focus {
+      text-decoration: none;
     }
   }
 
@@ -224,4 +236,4 @@ export const TocContent = styled.div<TocContentProps>`
       }
     }
   }
-`
+`;
diff --git a/components/ui/DocsPagination.tsx b/components/ui/DocsPagination.tsx
index 8e7c8c67e1..f417d0e53b 100644
--- a/components/ui/DocsPagination.tsx
+++ b/components/ui/DocsPagination.tsx
@@ -23,9 +23,9 @@ export function DocsPagination({ prevPage, nextPage }: PaginationProps) {
           >
             <span className="text-sm uppercase opacity-50 pl-10">Previous</span>
             <h5
-              className="text-xl leading-[1.3] m-0 pl transition-all ease-out duration-150 text-blue-800 group-hover:text-orange-500 flex items-center"
+              className="text-base md:text-xl eading-[1.3] m-0 pl transition-all ease-out duration-150 text-blue-800 group-hover:text-orange-500 flex items-center"
             >
-              <RightArrowSvg className="w-8 h-8 fill-gray-400 transition-all ease-out duration-150 rotate-180 group-hover:fill-orange-500 mr-2" />
+              <RightArrowSvg className="w-7 h-7 fill-gray-400 transition-all ease-out duration-150 rotate-180 group-hover:fill-orange-500 mr-2" />
               {prevPage.title}
             </h5>
           </div>
@@ -37,12 +37,12 @@ export function DocsPagination({ prevPage, nextPage }: PaginationProps) {
             className="col-start-2 block p-4 text-right relative transition-all group border border-gray-100 cursor-pointer"
             style={{ backgroundColor: '#FAFAFA' }}
           >
-            <span className="text-sm uppercase opacity-50 pr-10">Next</span>
+            <span className="text-sm uppercase opacity-50 md:pr-10 pr-6">Next</span>
             <h5
-              className="text-xl leading-[1.3] m-0 transition-all ease-out duration-150 text-blue-800 group-hover:text-orange-500 flex items-center justify-end"
+              className="text-base md:text-xl leading-[1.3] m-0 transition-all ease-out duration-150 text-blue-800 group-hover:text-orange-500 flex items-center justify-end"
             >
               {nextPage.title}
-              <RightArrowSvg className="w-8 h-8 fill-gray-400 transition-all ease-out duration-150 group-hover:fill-orange-500 ml-2" />
+              <RightArrowSvg className="w-7 h-7 fill-gray-400 transition-all ease-out duration-150 group-hover:fill-orange-500 ml-2" />
             </h5>
           </div>
         </DynamicLink>
diff --git a/content/docs/data-fetching/custom-queries.mdx b/content/docs/data-fetching/custom-queries.mdx
index 68442a5265..0928caf7b2 100644
--- a/content/docs/data-fetching/custom-queries.mdx
+++ b/content/docs/data-fetching/custom-queries.mdx
@@ -1,14 +1,16 @@
 ---
 id: /docs/data-fetching/custom-queries
 title: Writing Custom Queries
-last_edited: '2024-08-13T00:50:07.040Z'
+last_edited: '2024-12-04T06:28:14.144Z'
+next: ''
 previous: content/docs/data-fetching/overview.mdx
 ---
 
 For most simple cases, you should be able to leverage the Tina Client's generated queries to do your data fetching:
 
 ```ts
-const myPost = await client.queries.post({ relativePath: 'HelloWorld.md' })
+const myPost = await client.queries.post(
+  { relativePath: 'HelloWorld.md' })
 ```
 
 In more advanced cases, you may want more control on the underlying GraphQL query. In these cases you have two options:
diff --git a/content/docs/editing/blocks.mdx b/content/docs/editing/blocks.mdx
index 4bed1d71bf..b113bd7a68 100644
--- a/content/docs/editing/blocks.mdx
+++ b/content/docs/editing/blocks.mdx
@@ -1,14 +1,14 @@
 ---
 id: /docs/editing/blocks
 title: Block-based editing
-last_edited: '2024-09-29T14:32:01.268Z'
+last_edited: '2024-12-04T04:48:32.050Z'
 next: content/docs/editing/single-document-collections.mdx
 previous: content/docs/editing/markdown.mdx
 ---
 
 Tina supports block-based editing, so that your editors can build out full pages using your pre-defined blocks.
 
-<WebmEmbed embedSrc="/img/docs/your-blocks.webm"/>
+<WebmEmbed embedSrc="/img/docs/your-blocks.webm" />
 
 Let's say you want your editors to build out a page, and you have 3 main "block" types to start:
 
@@ -33,7 +33,7 @@ const heroBlock: Template = {
     defaultItem: {
       tagline: "Here's some text above the other text",
       headline: 'This Big Text is Totally Awesome',
-      text: 'Phasellus scelerisque, libero eu finibus rutrum, risus risus accumsan libero, nec molestie urna dui a leo.',
+      text: 'Phasellus scelerisque,
     },
   },
   fields: [
@@ -88,7 +88,7 @@ const contentBlock: Template = {
   label: 'Content',
   ui: {
     defaultItem: {
-      body: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.',
+      body: 'Lorem ipsum dolor sit amet,
     },
   },
   fields: [
@@ -258,7 +258,7 @@ In our case:
 
 ## Adding a visual block selector (Experimental)
 
-<WebmEmbed embedSrc="/img/docs/editing/visual-selector-preview.webm"/>
+<WebmEmbed embedSrc="/img/docs/editing/visual-selector-preview.webm" />
 
 <WarningCallout body="This is an experimental feature, and the API is subject to change. Have any thoughts? Let us know in the chat, or through one of our community channels" />
 
diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx
index 143f9249b7..9eef6601a4 100644
--- a/pages/docs/[...slug].tsx
+++ b/pages/docs/[...slug].tsx
@@ -1,78 +1,116 @@
-import { Breadcrumbs } from 'components/DocumentationNavigation/Breadcrumbs'
-import { DocsLayout, MarkdownContent } from 'components/layout'
-import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents'
-import ToC from 'components/toc/index'
-import { DocsPagination, LastEdited, NavToggle } from 'components/ui'
-import { GetStaticPaths, GetStaticProps } from 'next'
-import { NextSeo } from 'next-seo'
-import Error from 'next/error'
-import { useRouter } from 'next/router'
-import { doc } from 'prettier'
-import React, { useEffect } from 'react'
-import styled from 'styled-components'
-import client from 'tina/__generated__/client'
-import { useTina } from 'tinacms/dist/react'
-import { TinaMarkdown } from 'tinacms/dist/rich-text'
-import { getDocsNav } from 'utils/docs/getDocProps'
-import { getSeoDescription } from 'utils/docs/getSeoDescription'
-import getTableOfContents from 'utils/docs/getTableOfContents'
-import { NotFoundError } from 'utils/error/NotFoundError'
-import { openGraphImage } from 'utils/open-graph-image'
-import { useTocListener } from 'utils/toc_helpers'
-import SetupOverview from '../../components/layout/setup-overview'
-import * as ga from '../../utils/ga'
+import { Breadcrumbs } from 'components/DocumentationNavigation/Breadcrumbs';
+import MainDocsBodyHeader from 'components/docsMain/docsMainBody';
+import { LeftHandSideParentContainer } from 'components/docsSearch/SearchNavigation';
+import { DocsLayout, Layout, MarkdownContent } from 'components/layout';
+import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents';
+import ToC from 'components/toc/index';
+import { DocsPagination, LastEdited, NavToggle } from 'components/ui';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { NextSeo } from 'next-seo';
+import Error from 'next/error';
+import { useRouter } from 'next/router';
+import { doc } from 'prettier';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import client from 'tina/__generated__/client';
+import { useTina } from 'tinacms/dist/react';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+import { getDocsNav } from 'utils/docs/getDocProps';
+import { getSeoDescription } from 'utils/docs/getSeoDescription';
+import getTableOfContents from 'utils/docs/getTableOfContents';
+import { NotFoundError } from 'utils/error/NotFoundError';
+import { openGraphImage } from 'utils/open-graph-image';
+import { useTocListener } from 'utils/toc_helpers';
+import SetupOverview from '../../components/layout/setup-overview';
+import * as ga from '../../utils/ga';
+import { format } from 'path';
+import TocOverflowButton from 'components/docsMain/tocOverflowButton';
 
 export function DocTemplate(props) {
   if (props.new.results.data.doc._sys.filename.includes('setup-overview')) {
-    return <SetupOverview {...props} />
+    return <SetupOverview {...props} />;
   }
-  return <_DocTemplate {...props} />
+  return <_DocTemplate {...props} />;
 }
 
-function _DocTemplate(props) {
+function screenResizer(){
+  const [isScreenSmallerThan1200, setIsScreenSmallerThan1200] = useState(false);
+  const [isScreenSmallerThan840, setIsScreenSmallerThan840] = useState(false);
+
+  useEffect(() => {
+    const updateScreenSize = () => {
+      setIsScreenSmallerThan1200(window.innerWidth < 1200);
+      setIsScreenSmallerThan840(window.innerWidth < 840);
+    };
+
+    updateScreenSize();
+
+    window.addEventListener('resize', updateScreenSize);
 
+    return () => window.removeEventListener('resize', updateScreenSize);
+  }, []);
+
+  return {isScreenSmallerThan1200, isScreenSmallerThan840};
+};
+
+function _DocTemplate(props) {
   // fallback workaround
   if (props.notFound) {
-    return <Error statusCode={404} />
+    return <Error statusCode={404} />;
   }
 
   const { data } = useTina({
     query: props.new?.results.query,
     data: props.new?.results.data,
     variables: props.new?.results.variables,
-  })
+  });
+
+  const router = useRouter();
 
-  const router = useRouter()
-  const doc_data = data.doc
+  const doc_data = data.doc;
   const previousPage = {
     slug: doc_data.previous?.id.slice(7, -4),
     title: doc_data.previous?.title,
-  }
+  };
   const nextPage = {
     slug: doc_data.next?.id.slice(7, -4),
     title: doc_data.next?.title,
-  }
-  const TableOfContents = getTableOfContents(doc_data.body.children)
-  const description = doc_data.seo?.description?.trim() || getSeoDescription(doc_data.body);
+  };
+  const TableOfContents = getTableOfContents(doc_data.body.children);
+  const description =
+    doc_data.seo?.description?.trim() || getSeoDescription(doc_data.body);
   const title = doc_data.seo?.title || doc_data.title;
+  const { activeIds, contentRef } = useTocListener(doc_data);
+  const lastEdited = props.new.results.data.doc.last_edited;
+  const date = new Date(lastEdited);
+  const formattedDate = date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
 
-  const { activeIds, contentRef } = useTocListener(doc_data)
+  const isScreenSmallerThan1200 = screenResizer().isScreenSmallerThan1200;
+  const isScreenSmallerThan840 = screenResizer().isScreenSmallerThan840;
+  const gridClass = isScreenSmallerThan840
+  ? 'grid-cols-1'
+  : isScreenSmallerThan1200
+  ? 'grid-cols-[1.25fr_3fr]'
+  : 'grid-cols-[1.25fr_3fr_0.75fr]';
 
   useEffect(() => {
     const handleRouteChange = (url) => {
-      ga.pageview(url)
-    }
+      ga.pageview(url);
+    };
     //When the component is mounted, subscribe to router changes
     //and log those page views
-    router.events.on('routeChangeComplete', handleRouteChange)
+    router.events.on('routeChangeComplete', handleRouteChange);
 
     // If the component is unmounted, unsubscribe
     // from the event with the `off` method
     return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [router.events])
-
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
 
   return (
     <>
@@ -86,71 +124,88 @@ function _DocTemplate(props) {
           images: [openGraphImage(doc_data.title, '| TinaCMS Docs')],
         }}
       />
-      <DocsLayout navItems={props.navDocData.data}>
-        <DocsGrid>
-          <DocGridHeader>
-            <Breadcrumbs navItems={props.navDocData.data} />
-            <DocsPageTitle>{doc_data.title}</DocsPageTitle>
-          </DocGridHeader>
-          <DocGridToc>
-            <ToC tocItems={TableOfContents} activeIds={activeIds} />
-          </DocGridToc>
-          <DocGridContent ref={contentRef}>
-            <hr />
-            <TinaMarkdown content={doc_data.body} components={docAndBlogComponents} />
-            <LastEdited date={doc_data.last_edited} />
-            <DocsPagination prevPage={previousPage} nextPage={nextPage} />
-          </DocGridContent>
-        </DocsGrid>
-      </DocsLayout>
+      <Layout>
+        <div className="relative my-6 lg:my-16 flex justify-center items-center">
+          <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={props.navDocData.data}
+              />
+            </div>
+            {/* MIDDLE COLUMN */} 
+            <div className="mx-8 max-w-full overflow-hidden break-words px-2">
+              <MainDocsBodyHeader data={props} screenSizing={isScreenSmallerThan840}/>
+              {isScreenSmallerThan1200 && <TocOverflowButton tocData={TableOfContents}/>}
+              <div
+                ref={contentRef}
+                
+              >
+                <TinaMarkdown
+                  content={doc_data.body}
+                  components={docAndBlogComponents}
+                />
+                <span className="text-slate-500 text-md">
+                  Last Edited: {formattedDate}
+                </span>
+                <DocsPagination prevPage={previousPage} nextPage={nextPage} />
+              </div>
+            </div>
+            {/* RIGHT COLUMN */}
+            <div className={`pt-28 ${isScreenSmallerThan1200 ? 'hidden' : 'block'}`}>
+              <ToC tocItems={TableOfContents} activeIds={activeIds} />
+            </div>
+          </div>
+        </div>
+      </Layout>
     </>
-  )
+  );
 }
 
-export default DocTemplate
+export default DocTemplate;
 
 /*
  * DATA FETCHING ------------------------------------------------------
  */
 
 export const getStaticProps: GetStaticProps = async function (props) {
-  let { slug: slugs } = props.params
+  let { slug: slugs } = props.params;
 
   // @ts-ignore This should maybe always be a string[]?
-  const slug = slugs.join('/')
+  const slug = slugs.join('/');
 
   try {
     const [results, navDocData] = await Promise.all([
       client.queries.doc({ relativePath: `${slug}.mdx` }),
-      getDocsNav() 
-    ])
+      getDocsNav(),
+    ]);
     return {
       props: {
         new: { results },
         navDocData,
       },
-    }
+    };
   } catch (e) {
     if (e) {
       return {
         props: {
           error: { ...e }, //workaround since we cant return error as JSON
         },
-      }
+      };
     } else if (e instanceof NotFoundError) {
       return {
         props: {
           notFound: true,
         },
-      }
+      };
     }
   }
-}
+};
 
 export const getStaticPaths: GetStaticPaths = async function () {
-  const fg = require('fast-glob')
-  const contentDir = './content/docs/'
-  const files = await fg(`${contentDir}**/*.mdx`)
+  const fg = require('fast-glob');
+  const contentDir = './content/docs/';
+  const files = await fg(`${contentDir}**/*.mdx`);
   return {
     fallback: false,
     paths: files
@@ -159,11 +214,11 @@ export const getStaticPaths: GetStaticPaths = async function () {
           !file.endsWith('index.mdx') && !file.endsWith('product-tour.mdx')
       )
       .map((file) => {
-        const path = file.substring(contentDir.length, file.length - 4)
-        return { params: { slug: path.split('/') } }
+        const path = file.substring(contentDir.length, file.length - 4);
+        return { params: { slug: path.split('/') } };
       }),
-  }
-}
+  };
+};
 
 /*
  * STYLES --------------------------------------------------------------
@@ -193,12 +248,12 @@ export const DocsGrid = styled.div`
     grid-column-gap: 5rem;
     justify-content: left;
   }
-`
+`;
 
 export const DocGridHeader = styled.div`
   grid-area: header;
   width: 100%;
-`
+`;
 
 export const DocGridToc = styled.div`
   grid-area: toc;
@@ -207,16 +262,16 @@ export const DocGridToc = styled.div`
   @media (min-width: 1200px) {
     padding-top: 4.5rem;
   }
-`
+`;
 
 interface ContentProps {
-  ref: any
+  ref: any;
 }
 
 export const DocGridContent = styled.div<ContentProps>`
   grid-area: content;
   width: 100%;
-`
+`;
 
 export const DocsPageTitle = styled.h1`
   font-size: 2rem;
@@ -232,7 +287,7 @@ export const DocsPageTitle = styled.h1`
   @media (max-width: 1199px) {
     margin: 0 0 1.25rem 0 !important;
   }
-`
+`;
 
 export const DocsNavToggle = styled(NavToggle)`
   position: fixed;
@@ -243,4 +298,4 @@ export const DocsNavToggle = styled(NavToggle)`
   @media (min-width: 999px) {
     display: none;
   }
-`
+`;
diff --git a/pages/docs/product-tour.tsx b/pages/docs/product-tour.tsx
index ef95a9f19c..adf3c02018 100644
--- a/pages/docs/product-tour.tsx
+++ b/pages/docs/product-tour.tsx
@@ -144,7 +144,8 @@ export default function Page(props) {
           images: [openGraphImage(doc_data.title, '| TinaCMS Docs')],
         }}
       />
-      <DocsLayout navItems={props.docsToc.data}>
+
+        <DocsLayout navItems={props.docsToc.data}>
         <DocContainer>
           <DocGridHeader>
             <Breadcrumbs navItems={props.docsToc.data} />
@@ -153,6 +154,7 @@ export default function Page(props) {
           <DocGridContent ref={contentRef}>
             <hr />
             <SplitContent>
+            
               <div id="main-content-container">
                 <TinaMarkdown content={doc_data.body} components={docAndBlogComponents} />
               </div>
@@ -174,6 +176,8 @@ export default function Page(props) {
           </DocGridContent>
         </DocContainer>
       </DocsLayout>
+
+      
     </>
   )
 }
diff --git a/pages/search.tsx b/pages/search.tsx
index 81a402de3f..58476d20fc 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -9,7 +9,10 @@ import {
   SearchHeader,
   SearchTabs,
 } from 'components/docsSearch/SearchComponent';
-import { LeftHandSideParentContainer } from 'components/docsSearch/SearchNavigation';
+import {
+  DocsSearchBarHeader,
+  LeftHandSideParentContainer,
+} from 'components/docsSearch/SearchNavigation';
 
 const DocsSearchPage = ({
   tableOfContents,
@@ -29,6 +32,16 @@ const DocsSearchPage = ({
             <LeftHandSideParentContainer tableOfContents={formatted.data} />
           </div>
           <div className="mx-16 lg:mx-0">
+            <div className='block lg:hidden'>
+              <DocsSearchBarHeader
+                paddingGlobal={undefined}
+                headerColour="orange"
+                headerPadding=''
+                searchMargin='mb-6'
+                searchBarPadding=''
+              />
+            </div>
+
             <SearchHeader query={searchQuery} />
             <SearchTabs query={searchQuery} />
           </div>