started prepping for old vs new docs setup

apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx

@@ -7,6 +7,8 @@ import * as NavItems from './NavigationMenu.constants'
 const NavigationMenuGuideList = ({ currentLevel, setLevel, tempBasePath, id }) => {
   const router = useRouter()
 
+  tempBasePath = ''
+
   const menu = NavItems[id]
 
   return (
@@ -66,7 +68,7 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, tempBasePath, id }) =
                   {x.items.map((x) => {
                     return (
                       <li key={x.name}>
-                        <Link href={`/${tempBasePath}${x.href}`} passHref>
+                        <Link href={`/${tempBasePath}${x.url}`} passHref>
                           <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900">
                             {x.name}
                           </a>
@@ -77,7 +79,7 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, tempBasePath, id }) =
                 </>
               ) : (
                 <li>
-                  <Link href={`/${tempBasePath}${x.href}`} passHref>
+                  <Link href={`/${tempBasePath}${x.url}`} passHref>
                     <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
                       {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
                       {x.name}

apps/docs/components/index.tsx

@@ -50,7 +50,7 @@ const components = {
       {props.children}
     </Heading>
   ),
-  code: (props: any) => {
+  pre: (props: any) => {
     const linesToHighlight = parseNumericRange(props.lines ?? '')
     return <CodeBlock {...props} linesToHighlight={linesToHighlight} />
   },

apps/docs/layouts/Default.tsx

@@ -19,6 +19,8 @@ interface Props {
 const Layout: FC<Props> = ({ meta, children, toc }) => {
   const { asPath } = useRouter()
 
+  console.log('asPath', asPath)
+
   useEffect(() => {
     const key = localStorage.getItem('supabaseDarkMode')
     if (!key) {
@@ -34,6 +36,8 @@ const Layout: FC<Props> = ({ meta, children, toc }) => {
 
   const pageType = getPageType(asPath)
 
+  console.log('Default, pageType', pageType)
+
   return (
     <>
       <NextSeo
@@ -42,7 +46,7 @@ const Layout: FC<Props> = ({ meta, children, toc }) => {
         openGraph={{
           title: meta?.title,
           description: meta?.description,
-          url: `https://supabase.com/docs/${currentPage}`,
+          url: `https://supabase.com/docs/${asPath}`,
           images: [
             {
               url: `https://supabase.com/docs/img/supabase-og-image.png`,

apps/docs/layouts/DefaultGuideLayout.tsx

@@ -9,18 +9,127 @@ import { useRouter } from 'next/router'
 import { getPageType } from '../lib/helpers'
 import components from '~/components'
 import { menuItems } from '../components/Navigation/Navigation.constants'
+import TableOfContents from '~/components/TableOfContents'
 
 interface Props {
-  meta: { title: string; description?: string; hide_table_of_contents?: boolean }
+  meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string }
   children: any
   toc?: any
   currentPage: string
 }
 
-const Layout: FC<Props> = ({ meta, children }) => {
+const Layout: FC<Props> = (props) => {
+  switch (process.env.NEXT_PUBLIC_NEW_DOCS) {
+    case 'true':
+      console.log('new layout')
+      return newLayout(props)
+      break
+    default:
+      console.log('old layout')
+      return archivedLayout(props)
+      break
+  }
+}
+
+const newLayout: FC<Props> = (props) => {
   const { asPath } = useRouter()
   const page = getPageType(asPath)
 
+  const [active, setActive] = useState(false)
+
+  console.log('page', page)
+
+  useEffect(() => {
+    const key = localStorage.getItem('supabaseDarkMode')
+    if (!key) {
+      // Default to dark mode if no preference config
+      document.documentElement.className = 'dark'
+    } else {
+      document.documentElement.className = key === 'true' ? 'dark' : ''
+    }
+  }, [])
+
+  const articleRef = useRef()
+  const [tocList, setTocList] = useState([])
+
+  useEffect(() => {
+    const articleEl = articleRef.current as HTMLElement
+
+    if (!articleRef.current) return
+    const headings = Array.from(articleEl.querySelectorAll('h2, h3'))
+    const newHeadings = headings
+      .filter((heading) => heading.id)
+      .map((heading) => {
+        const text = heading.textContent.replace('#', '')
+        const link = heading.querySelector('a').getAttribute('href')
+        const level = heading.tagName === 'H2' ? 2 : 3
+        return { text, link, level }
+      })
+    setTocList(newHeadings)
+  }, [])
+
+  useEffect(() => {
+    setTimeout(function () {
+      setActive(true)
+    }, 150)
+  }, [])
+
+  const hasTableOfContents = tocList.length > 0
+
+  return (
+    <>
+      <NextSeo
+        title={`${props.meta?.title} | Supabase`}
+        description={props.meta?.description ? props.meta?.description : props.meta?.title}
+        openGraph={{
+          title: props.meta?.title,
+          description: props.meta?.description,
+          url: `https://supabase.com/docs${asPath}`,
+          images: [
+            {
+              url: `https://supabase.com/docs/img/supabase-og-image.png`,
+            },
+          ],
+        }}
+      />
+
+      <div
+        className={[
+          'relative transition-all ease-out',
+          'duration-150',
+          active ? 'opacity-100 left-0' : 'opacity-0 left-10',
+        ].join(' ')}
+      >
+        <div>
+          <p className="text-brand-900 tracking-wider">Guides</p>
+          <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
+            <h1>{props.meta.title}</h1>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div>
+
+            <MDXProvider components={components} children={props.children} />
+          </article>
+        </div>
+        {hasTableOfContents && !props.meta?.hide_table_of_contents && (
+          <div
+            className={[
+              'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
+              'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+            ].join(' ')}
+          >
+            <TableOfContents toc={props.toc} video={props.meta.video} />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+const archivedLayout: FC<Props> = ({ meta, children }) => {
+  const { asPath } = useRouter()
+  const page = getPageType(asPath)
+
+  console.log('page', page)
+
   useEffect(() => {
     const key = localStorage.getItem('supabaseDarkMode')
     if (!key) {

apps/docs/layouts/SiteLayout.tsx

@@ -6,6 +6,10 @@ import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMen
 import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
 
 const Layout = ({ children }) => {
+  if (process.env.NEXT_PUBLIC_NEW_DOCS !== 'true') {
+    return <>{children}</>
+  }
+
   const router = useRouter()
 
   useEffect(() => {

apps/docs/pages/_app.tsx

@@ -5,6 +5,7 @@ import { AppPropsWithLayout } from 'types'
 import { SearchProvider } from '~/components/DocSearch'
 import Favicons from '~/components/Favicons'
 import { ThemeProvider } from '../components/Providers'
+import SiteLayout from '~/layouts/SiteLayout'
 import '../styles/algolia-search.scss'
 import '../styles/ch.scss'
 import '../styles/docsearch.scss'
@@ -66,7 +67,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       />
       <ThemeProvider>
         <SearchProvider>
-          <Component {...pageProps} />
+          <SiteLayout>
+            <Component {...pageProps} />
+          </SiteLayout>
         </SearchProvider>
       </ThemeProvider>
     </>

apps/docs/pages/index.mdx

@@ -1,4 +1,5 @@
 import Layout from '~/layouts/DefaultGuideLayout'
+import NewContent from '~/pages/new/index.mdx'
 
 export const meta = {
   id: 'introduction',
@@ -7,6 +8,10 @@ export const meta = {
   hide_table_of_contents: false,
 }
 
+export function CheckDoc() {
+  if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') return NewContent
+}
+
 Supabase is an open source Firebase alternative providing all the backend features you need to build a product.
 You can use it completely, or just the features you need.
 
@@ -86,7 +91,11 @@ Supabase is just Postgres, which makes it compatible with a large number of tool
 
 <Frameworks />
 
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
+export const Page = ({ children }) => {
+  if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
+    return NewContent()
+  }
+  return <Layout meta={meta} children={children} />
+}
 
 export default Page
-

apps/docs/pages/index.tsx

@@ -1,30 +0,0 @@
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-import components from '~/components'
-import { menuItems } from '~/components/Navigation/Navigation.constants'
-
-import Layout from '~/layouts/Default'
-import { getDocsBySlug } from '../lib/docs'
-export default function Home({
-  meta,
-  content,
-}: {
-  meta: { title: string; description: string }
-  content: any
-}) {
-  return (
-    <Layout meta={meta} menuItems={menuItems['docs']} currentPage="docs">
-      <MDXRemote {...content} components={components} />
-    </Layout>
-  )
-}
-export async function getStaticProps() {
-  const doc = getDocsBySlug('docs/introduction')
-  const content = await serialize(doc.content || '')
-  return {
-    props: {
-      ...doc,
-      content,
-    },
-  }
-}