From bd2bd2c52f00caa0d9d7ab1c7029aa2684556c4a Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 16 Dec 2022 15:35:47 -0330
Subject: [PATCH] Add NextSEO to refdocs crawler files

---
 apps/docs/components/reference/RefSEO.tsx     | 25 +++++++++++++
 apps/docs/layouts/ref/RefSubLayout.tsx        | 36 ++++++++++++-------
 .../reference/dart/crawlers/[...slug].tsx     | 21 +++++++----
 .../reference/dart/v0/crawlers/[...slug].tsx  | 20 +++++++----
 .../javascript/crawlers/[...slug].tsx         | 21 +++++++----
 .../javascript/v1/crawlers/[...slug].tsx      | 22 ++++++++----
 6 files changed, 107 insertions(+), 38 deletions(-)
 create mode 100644 apps/docs/components/reference/RefSEO.tsx

diff --git a/apps/docs/components/reference/RefSEO.tsx b/apps/docs/components/reference/RefSEO.tsx
new file mode 100644
index 00000000000..237ecec3f15
--- /dev/null
+++ b/apps/docs/components/reference/RefSEO.tsx
@@ -0,0 +1,25 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+
+function RefSEO({ title }) {
+  const router = useRouter()
+
+  const path = router.asPath.replace('crawlers/', '')
+
+  return (
+    <NextSeo
+      title={title}
+      openGraph={{
+        title,
+        url: `https://supabase.com/docs${path}`,
+        images: [
+          {
+            url: `https://supabase.com/docs/img/supabase-og-image.png`,
+          },
+        ],
+      }}
+    />
+  )
+}
+
+export default RefSEO
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index 26e1c612515..3357e427ed1 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -4,6 +4,7 @@ import { highlightSelectedNavItem } from '~/components/CustomHTMLElements/Custom
 import { useRouter } from 'next/router'
 import { useNavigationMenuContext } from '~/components/Navigation/NavigationMenu/NavigationMenu.Context'
 import { menuState } from '~/hooks/useMenuState'
+import Image from 'next/image'
 
 interface ISectionContainer {
   id: string
@@ -77,8 +78,13 @@ const Section: FC<ISectionContainer> = (props) => {
 
 const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
   const router = useRouter()
+
   const { setActiveRefItem } = useNavigationMenuContext()
 
+  // we're serving search bots a different file (/crawlers/[...slug])
+  // and need to modify content to suit that
+  const isCrawlerPage = router.route.includes('/crawlers/[...slug]')
+
   const { ref } = useInView({
     threshold: 1,
     rootMargin: '30% 0% -35% 0px',
@@ -99,21 +105,25 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
     <div className={['flex items-center gap-3 not-prose', icon && 'mb-8'].join(' ')}>
       {icon && (
         <div className="w-8 h-8 bg-brand-500 rounded flex items-center justify-center">
-          <img className="w-6 h-6" src={`${icon}.svg`} />
+          <Image width={16} height={16} alt={icon} src={`${icon}.svg`} />
         </div>
       )}
-      <h2
-        ref={ref}
-        id={props.slug}
-        data-ref-id={props.id}
-        className={[
-          'text-2xl font-medium text-scale-1200 scroll-mt-24',
-          !icon && 'mb-8',
-          props.monoFont && 'font-mono',
-        ].join(' ')}
-      >
-        {props.title && <span className="max-w-xl">{props.title}</span>}
-      </h2>
+      {isCrawlerPage ? (
+        <h1>{props.title}</h1>
+      ) : (
+        <h2
+          ref={ref}
+          id={props.slug}
+          data-ref-id={props.id}
+          className={[
+            'text-2xl font-medium text-scale-1200 scroll-mt-24',
+            !icon && 'mb-8',
+            props.monoFont && 'font-mono',
+          ].join(' ')}
+        >
+          {props.title && <span className="max-w-xl">{props.title}</span>}
+        </h2>
+      )}
     </div>
   )
 }
diff --git a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
index afdc202a05f..c12f3cabbf2 100644
--- a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
+import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
 
@@ -15,13 +16,21 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
+
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 
diff --git a/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
index 3ef20b302fe..2e67a5b5c8e 100644
--- a/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
+import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
 
@@ -15,13 +16,20 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 
diff --git a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
index bd631d0e07e..2e6e0b271a9 100644
--- a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
+import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
 
@@ -15,13 +16,21 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
+
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }
 
diff --git a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
index d1aa3ec92ee..bbb38f4598a 100644
--- a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
@@ -7,7 +7,7 @@ import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
-
+import RefSEO from '~/components/reference/RefSEO'
 const sections = flattenSections(clientLibsCommonSections)
 
 export default function JSReference(props) {
@@ -15,13 +15,21 @@ export default function JSReference(props) {
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
 
+  const pageTitle = filteredSection[0]?.title
+    ? `${filteredSection[0]?.title} | Supabase`
+    : 'Supabase'
+
   return (
-    <RefSectionHandler
-      sections={filteredSection}
-      spec={spec}
-      typeSpec={typeSpec}
-      pageProps={props}
-    />
+    <>
+      <RefSEO title={pageTitle} />
+
+      <RefSectionHandler
+        sections={filteredSection}
+        spec={spec}
+        typeSpec={typeSpec}
+        pageProps={props}
+      />
+    </>
   )
 }