import { MDXProvider } from '@mdx-js/react' import Head from 'next/head' import { FC, useEffect } from 'react' import Footer from '~/components/Footer' import SideBar from '~/components/Navigation/SideBar' import TableOfContents from '~/components/TableOfContents' import { Tabs } from 'ui' // var toc = require('markdown-toc') interface Props { meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string } children: any toc?: any menuItems: any currentPage: string } const Layout: FC = (props: Props) => { 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 contentString = renderToString(props.children) // const content = serialize(contentString || '') // console.log(props) // const _toc = /toc(children, { maxdepth: 1, firsth1: false }) const MDXComponents = { Tabs: Tabs, } const hasTableOfContents = props.toc !== undefined && props.toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0 return ( <> {props.meta?.title} | Supabase

{/* */}

Tutorials

{props.meta.title}

{hasTableOfContents && !props.meta?.hide_table_of_contents && ( )}

) } export default Layout