More files

2026-10-05 09:25:06 +03:00 · 2022-11-15 18:01:41 -03:30
1 parent 3b85e6933f
commit 994c4f2718
@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import extensions from '../data/extensions.json'
+
+export default function Extensions() {
+  const [filter, setFilter] = useState('')
+  return (
+    <>
+      <div className="mb-8 grid">
+        <label className="text-xs mb-2">Filter extensions</label>
+        <input
+          type="text"
+          className="border text-gray-200"
+          placeholder="Extension name"
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+      <div className="grid sm:grid-cols-2 gap-4">
+        {extensions
+          .filter((x) => x.name.indexOf(filter) >= 0)
+          .map((extension) => (
+            <div className={' my-2 px-2'} key={extension.name}>
+              <div className="border rounded-sm p-4">
+                <h3 className="m-0">
+                  <code className="text-sm">{extension.name}</code>
+                </h3>
+                <p className=" mt-4">
+                  {extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
+                </p>
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,74 @@
+import { FC } from 'react'
+import { removeAnchor } from './CustomHTMLElements/CustomHTMLElements.utils'
+
+const formatSlug = (slug: string) => {
+  // [Joshen] We will still provide support for headers declared like this:
+  //    ## REST API {#rest-api-overview}
+  // At least for now, this was a docusaurus thing.
+  if (slug.includes('#')) return slug.split('#')[1]
+  return slug
+}
+
+const formatTOCHeader = (content: string) => {
+  let begin = false
+  const res = []
+  for (const x of content) {
+    if (x === '`') {
+      if (!begin) {
+        begin = true
+        res.push(`<code class="text-xs border rounded bg-scale-400 border-scale-500">`)
+      } else {
+        begin = false
+        res.push(`</code>`)
+      }
+    } else {
+      res.push(x)
+    }
+  }
+  return res.join('')
+}
+
+interface TOCHeader {
+  id: number
+  level: number
+  text: string
+  link: string
+}
+
+interface Props {
+  list: TOCHeader[]
+}
+
+const GuidesTableOfContents: FC<Props> = ({ list }) => {
+  return (
+    <ul className="toc-menu list-none pl-4 text-[0.8rem] grid gap-2 mt-12">
+      {list.map((item, i) => (
+        <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
+          <a
+            href={`#${formatSlug(item.link)}`}
+            className="text-scale-1000 hover:text-brand-900 transition-colors"
+            dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
+          />
+        </li>
+      ))}
+    </ul>
+
+    // <ul className="toc-menu list-none pl-4 text-[0.8rem] grid gap-2 mt-12">
+    //   {(toc.json as TOCHeader[])
+    //     .filter((item) => item.lvl !== 1 && item.lvl <= 3)
+    //     .map((item: any, i: number) => {
+    //       return (
+    //         <li key={i} id={item.lvl} style={{ marginLeft: `${(item.lvl - 2) * 1}rem` }}>
+    //           <a
+    //             href={`#${formatSlug(item.slug)}`}
+    //             className="text-scale-1000 hover:text-brand-900 transition-colors"
+    //             dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.content)) }}
+    //           />
+    //         </li>
+    //       )
+    //     })}
+    // </ul>
+  )
+}
+
+export default GuidesTableOfContents
@@ -1,3 +1,7 @@
+// [Terry]
+// Delete this after we've implemented GuidesTableofContents and moved all guides
+// and rename GuidesTableofContents to TableOfContents
+
 import { FC } from 'react'
 import { getAnchor, removeAnchor } from './CustomHTMLElements/CustomHTMLElements.utils'

@@ -11,11 +11,13 @@ import JwtGenerator from './JwtGenerator'
 import Frameworks from './Frameworks'
 import AuthProviders from './AuthProviders'
 import FunctionsExamples from './FunctionsExamples'
+import Extensions from './Extensions'

 // Other components
 import { Heading } from './CustomHTMLElements'
 import QuickstartIntro from './MDX/quickstart_intro.mdx'
 import ProjectSetup from './MDX/project_setup.mdx'
+import { Mermaid } from 'mdx-mermaid/Mermaid'

 const components = {
  Admonition,
@@ -28,6 +30,8 @@ const components = {
  JwtGenerator,
  QuickstartIntro,
  ProjectSetup,
+  Mermaid,
+  Extensions,
  Alert: (props: any) => (
    <Alert {...props} className="not-prose">
      {props.children}
@@ -4,7 +4,7 @@ import Head from 'next/head'
 import NavBar from '../components/Navigation/NavBar'
 import SideBar from '../components/Navigation/SideBar'
 import Footer from '../components/Footer'
-import TableOfContents from '~/components/TableOfContents'
+import GuidesTableOfContents from '~/components/GuidesTableOfContents'
 import { useRouter } from 'next/router'
 import { getPageType } from '../lib/helpers'
 import components from '~/components'
@@ -17,7 +17,7 @@ interface Props {
  currentPage: string
 }

-const Layout: FC<Props> = ({ meta, children, toc: pageToc, currentPage }) => {
+const Layout: FC<Props> = ({ meta, children }) => {
  const { asPath } = useRouter()
  const page = getPageType(asPath)

@@ -32,25 +32,25 @@ const Layout: FC<Props> = ({ meta, children, toc: pageToc, currentPage }) => {
  }, [])

  const articleRef = useRef()
-  const [headingsArr, setHeadingsArr] = useState([])
+  const [tocList, setTocList] = useState([])

  useEffect(() => {
    const articleEl = articleRef.current as HTMLElement

    if (!articleRef.current) return
-    const headings = Array.from(articleEl.querySelectorAll('h2, h3, h4'))
-    setHeadingsArr(headings)
-    console.log(headings)
+    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)
  }, [])

-  function generateTocItem(item) {
-    const id = item.id
-    console.log(id)
-  }
-
-  const hasTableOfContents = true
-  // pageToc !== undefined &&
-  // pageToc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
+  const hasTableOfContents = tocList.length > 0

  return (
    <>
@@ -83,6 +83,8 @@ const Layout: FC<Props> = ({ meta, children, toc: pageToc, currentPage }) => {
                  meta?.hide_table_of_contents || !hasTableOfContents ? 'xl:min-w-[880px]' : ''
                } doc-content-container prose dark:prose-dark dark:bg-scale-200 width-full mt-8 2xl:max-w-[880px]`}
              >
+                {meta?.title && <h1>{meta.title}</h1>}
+
                <MDXProvider components={components}>{children}</MDXProvider>
              </article>
            </div>
@@ -93,9 +95,7 @@ const Layout: FC<Props> = ({ meta, children, toc: pageToc, currentPage }) => {
                  'thin-scrollbar overflow-y-auto sticky hidden xl:block md:col-span-3 px-2',
                ].join(' ')}
              >
-                {headingsArr.length > 0 && headingsArr.map((item) => generateTocItem(item))}
-
-                {/* <TableOfContents toc={pageToc} /> */}
+                <GuidesTableOfContents list={tocList} />
              </div>
            )}
          </div>
@@ -10,7 +10,7 @@ const withMDX = nextMdx({
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeSlug],
    // This is required for `MDXProvider` component
-    providerImportSource: '@mdx-js/react',
+    // providerImportSource: '@mdx-js/react',
  },
 })

@@ -50,6 +50,7 @@
    "jsrsasign": "^10.5.26",
    "lodash": "^4.17.21",
    "markdown-toc": "^1.2.0",
+    "mdx-mermaid": "^1.3.2",
    "next": "12.1.0",
    "next-compose-plugins": "^2.2.1",
    "next-mdx-remote": "^3.0.8",
@@ -75,15 +76,15 @@
    "config": "*",
    "ejs": "^3.1.8",
    "eslint": "8.9.0",
+    "globby": "^12.0.2",
    "minimist": "^1.2.6",
    "next-transpile-modules": "9.0.0",
    "npm-run-all": "^4.1.5",
    "openapi-types": "^12.0.2",
+    "prettier": "^2.2.1",
    "sass": "^1.55.0",
    "ts-node": "^10.9.1",
    "tsconfig": "*",
-    "typescript": "^4.5.3",
-    "globby": "^12.0.2",
-    "prettier": "^2.2.1"
+    "typescript": "^4.5.3"
  }
 }
@@ -38,7 +38,6 @@ export default function Doc({ meta, content, toc }: Props) {

 export async function getStaticProps({ params }: { params: { slug: string[] } }) {
  let slug
-
  if (params.slug.length > 1) {
    slug = `docs/${params.slug.join('/')}`
  } else {
@@ -48,6 +47,7 @@ export async function getStaticProps({ params }: { params: { slug: string[] } })
  let doc = getDocsBySlug(slug)
  const content = await serialize(doc.content || '')

+  console.log(doc.content)
  return {
    props: {
      ...doc,
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: api
-title: Serverless APIs
-description: Auto-generating and Realtime APIs.
-sidebar_label: Overview
---
+  id: 'api',
+  title: 'Serverless APIs',
+  description: 'Auto-generating and Realtime APIs.',
+  sidebar_label: 'Overview',
+}

 Supabase auto-generates three types of API directly from your database schema.

@@ -375,3 +375,7 @@ The expected value for `useconfig` should be:
 ```sql
 ['session_preload_libraries=supautils, safeupdate']
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth
-title: Auth
-description: Use Supabase to Authenticate and Authorize your users.
-sidebar_label: Overview
---
+  id: 'auth',
+  title: 'Auth',
+  description: 'Use Supabase to Authenticate and Authorize your users.',
+  sidebar_label: 'Overview',
+}

 ## Overview

@@ -122,3 +122,7 @@ When users sign up, Supabase assigns them a unique ID. You can reference this ID
 <video width="99%" muted playsInline controls="true">
  <source src="/docs/videos/auth-zoom2.mp4" type="video/mp4" muted playsInline />
 </video>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-apple
-title: 'Login with Apple'
-description: Add Apple OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-apple',
+  title: 'Login with Apple',
+  description: 'Add Apple OAuth to your Supabase project',
+}

 To enable Apple Auth for your project, you need to set up an Apple OAuth application and add the application credentials to your Supabase Dashboard.

@@ -204,3 +201,7 @@ async function signout() {
 - [Ruby](https://www.ruby-lang.org/en/) Docs.
 - [ruby-jwt](https://github.com/jwt/ruby-jwt) library.
 - Thanks to [Janak Amarasena](https://medium.com/@janakda) who did all the heavy lifting in [How to configure Sign In with Apple](https://medium.com/identity-beyond-borders/how-to-configure-sign-in-with-apple-77c61e336003).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-azure
-title: 'Login with Azure'
-description: Add Azure OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-azure',
+  title: 'Login with Azure',
+  description: 'Add Azure OAuth to your Supabase project',
+}

 To enable Azure Auth for your project, you need to set up an Azure OAuth application and add the application credentials to your Supabase Dashboard.

@@ -100,3 +97,7 @@ async function signout() {

 - [Azure Developer Account](https://portal.azure.com)
 - [GitHub Discussion](https://github.com/supabase/gotrue/pull/54#issuecomment-757043573)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-bitbucket
-title: 'Login with Bitbucket'
-description: Add Bitbucket OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-bitbucket',
+  title: 'Login with Bitbucket',
+  description: 'Add Bitbucket OAuth to your Supabase project',
+}

 To enable Bitbucket Auth for your project, you need to set up a BitBucket OAuth application and add the application credentials to your Supabase Dashboard.

@@ -92,3 +89,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Bitbucket Account](https://bitbucket.org)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-captcha
-title: 'Enable Captcha Protection'
-description: Add Captcha Protection to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-captcha',
+  title: 'Enable Captcha Protection',
+  description: 'Add Captcha Protection to your Supabase project',
+}

 Supabase provides you with the option of adding captcha to your sign-in, sign-up, and password reset forms. This keeps your website safe from bots and malicious scripts. Supabase authentication has support for [hCaptcha](https://www.hcaptcha.com/).

@@ -111,3 +108,7 @@ captcha.current.resetCaptcha()
 In order to test that this works locally we will need to use something like [ngrok](https://ngrok.com/) or add an entry to your hosts file. You can read more about this in the [hCaptcha docs](https://docs.hcaptcha.com/#local-development).

 Run the application and you should now be provided with a captcha challenge.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-discord
-title: 'Login with Discord'
-description: Add Discord OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-discord',
+  title: 'Login with Discord',
+  description: 'Add Discord OAuth to your Supabase project',
+}

 To enable Discord Auth for your project, you need to set up a Discord Application and add the Application OAuth credentials to your Supabase Dashboard.

@@ -94,3 +91,7 @@ async function signout() {
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Discord Account](https://discord.com)
 - [Discord Developer Portal](https://discord.com/developers)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-email
-title: 'Login With Email'
-description: Use Supabase to Authenticate and Authorize your users using email.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-email',
+  title: 'Login With Email',
+  description: 'Use Supabase to Authenticate and Authorize your users using email.',
+}

 ## Overview

@@ -101,3 +98,7 @@ Future<void> signOut() async {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Supabase Flutter Client](https://github.com/supabase/supabase-flutter)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-facebook
-title: 'Login with Facebook'
-description: Add Facebook OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-facebook',
+  title: 'Login with Facebook',
+  description: 'Add Facebook OAuth to your Supabase project',
+}

 To enable Facebook Auth for your project, you need to set up a Facebook OAuth application and add the application credentials to your Supabase Dashboard.

@@ -109,3 +106,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Facebook Developers Dashboard](https://developers.facebook.com/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-github
-title: 'Login with GitHub'
-description: Add GitHub OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-github',
+  title: 'Login with GitHub',
+  description: 'Add GitHub OAuth to your Supabase project',
+}

 To enable GitHub Auth for your project, you need to set up a GitHub OAuth application and add the application credentials to your Supabase Dashboard.

@@ -102,3 +99,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [GitHub Developer Settings](https://github.com/settings/developers)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-gitlab
-title: 'Login with GitLab'
-description: Add GitLab OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-gitlab',
+  title: 'Login with GitLab',
+  description: 'Add GitLab OAuth to your Supabase project',
+}

 To enable GitLab Auth for your project, you need to set up a GitLab OAuth application and add the application credentials to your Supabase Dashboard.

@@ -89,3 +86,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [GitLab Account](https://gitlab.com)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-google
-title: 'Login with Google'
-description: Add Google OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-google',
+  title: 'Login with Google',
+  description: 'Add Google OAuth to your Supabase project',
+}

 To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard.

@@ -117,3 +114,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: index
-title: Auth Helpers
-description: A collection of framework-specific Auth utilities for working with Supabase.
-sidebar_label: Overview
---
+  id: 'index',
+  title: 'Auth Helpers',
+  description: 'A collection of framework-specific Auth utilities for working with Supabase.',
+  sidebar_label: 'Overview',
+}

 A collection of framework-specific Auth utilities for working with Supabase.

@@ -54,3 +54,7 @@ The Auth Helpers are in `beta`. They are usable in their current state, but it's

 - [Source code](https://github.com/supabase/auth-helpers)
 - [Known bugs and issues](https://github.com/supabase/auth-helpers/issues)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-ui
-title: Auth UI
-description: A prebuilt, customizable React component for authenticating users.
---
+  id: 'auth-ui',
+  title: 'Auth UI',
+  description: 'A prebuilt, customizable React component for authenticating users.',
+}

 Auth UI is a pre-built React component for authenticating users.
 It supports custom themes and extensible styles to match your brand and aesthetic.
@@ -275,3 +275,7 @@ const App = () => (
  />
 )
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: nextjs
-title: Supabase Auth with Next.js
-description: Authentication helpers for Next.js API routes, middleware, and SSR.
-sidebar_label: 'Next.js'
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'nextjs',
+  title: 'Supabase Auth with Next.js',
+  description: 'Authentication helpers for Next.js API routes, middleware, and SSR.',
+  sidebar_label: 'Next.js',
+}

 This submodule provides convenience helpers for implementing user authentication in Next.js applications.

@@ -840,3 +837,7 @@ import { Database } from '../database.types'

 const supabaseClient = useSupabaseClient<Database>()
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: remix
-title: Supabase Auth with Remix
-description: Authentication helpers for loaders and actions in Remix.
-sidebar_label: 'Remix'
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'remix',
+  title: 'Supabase Auth with Remix',
+  description: 'Authentication helpers for loaders and actions in Remix.',
+  sidebar_label: 'Remix',
+}

 This submodule provides convenience helpers for implementing user authentication in Remix applications.

@@ -879,3 +876,7 @@ export default function ProtectedPage() {
  return <pre>{JSON.stringify({ user, allRepos }, null, 2)}</pre>;
 }
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: sveltekit
-title: Supabase Auth with SvelteKit
-description: Convenience helpers for implementing user authentication in SvelteKit.
-sidebar_label: SvelteKit
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'sveltekit',
+  title: 'Supabase Auth with SvelteKit',
+  description: 'Convenience helpers for implementing user authentication in SvelteKit.',
+  sidebar_label: 'SvelteKit',
+}

 This submodule provides convenience helpers for implementing user authentication in [SvelteKit](https://kit.svelte.dev/) applications.

@@ -1119,3 +1116,7 @@ export const GET: RequestHandler = withAuth(async ({ session, getSupabaseClient
 - [SvelteKit example](https://github.com/supabase/auth-helpers/tree/main/examples/sveltekit)
 - [SvelteKit Email/Password example](https://github.com/supabase/auth-helpers/tree/main/examples/sveltekit-email-password)
 - [SvelteKit Magiclink example](https://github.com/supabase/auth-helpers/tree/main/examples/sveltekit-magic-link)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-keycloak
-title: 'Login with Keycloak'
-description: Add Keycloak OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-keycloak',
+  title: 'Login with Keycloak',
+  description: 'Add Keycloak OAuth to your Supabase project',
+}

 To enable Keycloak Auth for your project, you need to set up an Keycloak OAuth application and add the application credentials to your Supabase Dashboard.

@@ -86,3 +83,7 @@ async function signout() {

 - You can find the keycloak openid endpoint configuration under the realm settings.
  ![Keycloak OpenID Endpoint Configuration](/docs/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-linkedin
-title: 'Login with LinkedIn'
-description: Add LinkedIn OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-linkedin',
+  title: 'Login with LinkedIn',
+  description: 'Add LinkedIn OAuth to your Supabase project',
+}

 To enable LinkedIn Auth for your project, you need to set up a LinkedIn OAuth application and add the application credentials to your Supabase Dashboard.

@@ -88,3 +85,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [LinkedIn Developer Dashboard](https://api.LinkedIn.com/apps)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-magic-link
-title: 'Login With Magic Link'
-description: Use Supabase to authenticate and authorize your users using magic links.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-magic-link',
+  title: 'Login With Magic Link',
+  description: 'Use Supabase to authenticate and authorize your users using magic links.',
+}

 Magic links are a form of passwordless logins where users click on a link sent to their email address to log in to their accounts.
 Magic links only work with email addresses. By default, a user can only request a magic link once every 60 seconds.
@@ -93,3 +90,7 @@ Future<void> signOut() async {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Supabase Flutter Client](https://github.com/supabase/supabase-flutter)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-messagebird
-title: Phone Auth with MessageBird
-description: How to set up and use Mobile OTP with MessageBird and Supabase.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-messagebird',
+  title: 'Phone Auth with MessageBird',
+  description: 'How to set up and use Mobile OTP with MessageBird and Supabase.',
+}

 ## Overview

@@ -283,3 +280,7 @@ The user does not have a password therefore will need to sign in via this method
 - [MessageBird Signup](https://dashboard.messagebird.com/en/sign-up)
 - [Supabase Dashboard](https://app.supabase.com)
 - [Supabase Row Level Security](/docs/guides/auth#row-level-security)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,12 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-mfa
-title: 'Multi-Factor Authentication'
-description: Add an additional layer of security to your apps with Supabase Auth multi-factor authentication.
---
-
-import { Mermaid } from 'mdx-mermaid/Mermaid'
+  id: 'auth-mfa',
+  title: 'Multi-Factor Authentication',
+  description:
+    'Add an additional layer of security to your apps with Supabase Auth multi-factor authentication.',
+}

 <Admonition type="note">

@@ -629,3 +628,7 @@ Currently recognized methods are:
 - `mfa/totp` - a TOTP additional factor.

 This list will expand in the future.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-notion
-title: 'Login with Notion'
-description: Add Notion OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-notion',
+  title: 'Login with Notion',
+  description: 'Add Notion OAuth to your Supabase project',
+}

 To enable Notion Auth for your project, you need to set up a Notion Application and add the Application OAuth credentials to your Supabase Dashboard.

@@ -92,3 +89,7 @@ async function signout() {
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Notion Account](https://notion.so)
 - [Notion Developer Portal](https://www.notion.so/my-integrations)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-slack
-title: 'Login with Slack'
-description: Add Slack OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-slack',
+  title: 'Login with Slack',
+  description: 'Add Slack OAuth to your Supabase project',
+}

 To enable Slack Auth for your project, you need to set up a Slack OAuth application and add the application credentials to your Supabase Dashboard.

@@ -101,3 +98,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Slack Developer Dashboard](https://api.slack.com/apps)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-spotify
-title: 'Login with Spotify'
-description: Add Spotify OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-spotify',
+  title: 'Login with Spotify',
+  description: 'Add Spotify OAuth to your Supabase project',
+}

 To enable Spotify Auth for your project, you need to set up a Spotify OAuth application and add the application credentials to your Supabase Dashboard.

@@ -96,3 +93,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-twilio
-title: Phone Auth with Twilio
-description: How to set up and use Mobile OTP with Twilio and Supabase.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-twilio',
+  title: 'Phone Auth with Twilio',
+  description: 'How to set up and use Mobile OTP with Twilio and Supabase.',
+}

 ## Overview

@@ -302,3 +299,7 @@ The user does not have a password therefore will need to sign in via this method
 - [Twilio Signup](https://www.twilio.com/try-twilio)
 - [Supabase Dashboard](https://app.supabase.com)
 - [Supabase Row Level Security](/docs/guides/auth#row-level-security)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-twitch
-title: 'Login with Twitch'
-description: Add Twitch OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-twitch',
+  title: 'Login with Twitch',
+  description: 'Add Twitch OAuth to your Supabase project',
+}

 To enable Twitch Auth for your project, you need to set up a Twitch Application and add the Application OAuth credentials to your Supabase Dashboard.

@@ -108,3 +105,7 @@ async function signout() {
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Twitch Account](https://twitch.tv)
 - [Twitch Developer Console](https://dev.twitch.tv/console)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-twitter
-title: 'Login with Twitter'
-description: Add Twitter OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-twitter',
+  title: 'Login with Twitter',
+  description: 'Add Twitter OAuth to your Supabase project',
+}

 To enable Twitter Auth for your project, you need to set up a Twitter OAuth application and add the application credentials to your Supabase Dashboard.

@@ -97,3 +94,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-vonage
-title: Phone Auth with Vonage
-description: How to set up and use Mobile OTP with Vonage and Supabase.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-vonage',
+  title: 'Phone Auth with Vonage',
+  description: 'How to set up and use Mobile OTP with Vonage and Supabase.',
+}

 ## Overview

@@ -274,3 +271,7 @@ The user does not have a password therefore will need to sign in via this method
 - [Vonage Signup](https://dashboard.nexmo.com/sign-up)
 - [Supabase Dashboard](https://app.supabase.com)
 - [Supabase Row Level Security](/docs/guides/auth#row-level-security)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-workos
-title: 'Login with WorkOS'
-description: Add WorkOS OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-workos',
+  title: 'Login with WorkOS',
+  description: 'Add WorkOS OAuth to your Supabase project',
+}

 To enable WorkOS Auth for your project, you need to set up WorkOS OAuth application and add the application credentials to your Supabase Dashboard.

@@ -90,3 +87,7 @@ async function signout() {
 ## Resources

 - [WorkOS Documentation](https://workos.com/docs/sso/guide)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth-zoom
-title: 'Login with Zoom'
-description: Add Zoom OAuth to your Supabase project
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'auth-zoom',
+  title: 'Login with Zoom',
+  description: 'Add Zoom OAuth to your Supabase project',
+}

 To enable Zoom Auth for your project, you need to set up a Zoom OAuth application and add the application credentials to your Supabase Dashboard.

@@ -97,3 +94,7 @@ async function signout() {
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Zoom App Marketplace](https://marketplace.zoom.us/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: managing-user-data
-title: Managing User Data
-description: Securing your user data with Row Level Security.
---
+  id: 'managing-user-data',
+  title: 'Managing User Data',
+  description: 'Securing your user data with Row Level Security.',
+}

 For security purposes, the `auth` schema is not exposed on the auto-generated API.

@@ -105,3 +105,7 @@ create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: row-level-security
-title: Row Level Security
-description: Secure your data using Postgres Row Level Security.
---
+  id: 'row-level-security',
+  title: 'Row Level Security',
+  description: 'Secure your data using Postgres Row Level Security.',
+}

 When you need granular authorization rules, nothing beats PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html).

@@ -365,3 +365,7 @@ Deprecated. Use `auth.jwt() ->> 'email'` instead.
 </Admonition>

 Returns the email of the user making the request.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: server-side-rendering
-title: Server-Side Rendering
-description: Render pages with user information on the server.
---
+  id: 'server-side-rendering',
+  title: 'Server-Side Rendering',
+  description: 'Render pages with user information on the server.',
+}

 Single-page apps with server-side rendering (SSR) is a popular way to optimize rendering
 performance and leverage advanced caching strategies.
@@ -207,3 +207,7 @@ data belonging to different users!

 Also be sure you set proper cache control headers. We recommend invalidating
 cache keys every hour or less.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,12 +1,13 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: cli
-title: Supabase CLI
-description: The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.
-sidebar_label: Overview
-toc_max_heading_level: 2
---
+  id: 'cli',
+  title: 'Supabase CLI',
+  description:
+    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
+  sidebar_label: 'Overview',
+  toc_max_heading_level: 2,
+}

 The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.
 You can also use the CLI to manage your Supabase projects, handle database migrations and CI/CD workflows, and generate types directly from your database schema.
@@ -115,3 +116,7 @@ brew upgrade supabase
 - [Supabase CLI Reference](/docs/reference/cli/usage)
 - [Local Development](/docs/guides/cli/local-development)
 - [Managing Environments](/docs/guides/cli/managing-environments)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: local-development
-title: Local Development
-description: How to use Supabase on your local development machine.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'local-development',
+  title: 'Local Development',
+  description: 'How to use Supabase on your local development machine.',
+}

 Learn how to use the Supabase CLI to develop your project locally and deploy to the Supabase Platform.

@@ -240,3 +237,7 @@ The local development environment is not as feature-complete as the Supabase Pla
 ```

 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: managing-environments
-title: Managing Environments
-description: How to deploy Supabase schema changes with a CI / CD pipeline.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'managing-environments',
+  title: 'Managing Environments',
+  description: 'How to deploy Supabase schema changes with a CI / CD pipeline.',
+}

 ## Overview

@@ -417,3 +414,7 @@ supabase db reset
 In case [`reset`](/docs/reference/cli/usage#supabase-db-reset) fails, you can manually resolve conflicts by editing `<t+2>_dev_A.sql` file.

 Once validated locally, commit your changes to Git and push to GitHub.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: database
-title: Database
-description: Use Supabase to manage your data.
-sidebar_label: Overview
---
+  id: 'database',
+  title: 'Database',
+  description: 'Use Supabase to manage your data.',
+  sidebar_label: 'Overview',
+}

 Every Supabase project comes with a full [Postgres](https://www.postgresql.org/) database, a free and open source
 database which is considered one of the world's most stable and advanced databases.
@@ -87,3 +87,7 @@ Read about resetting your database password [here](/docs/guides/database/managin

 - Read more about [Postgres](/docs/postgres/server/about)
 - Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: arrays
-title: 'Working With Arrays'
-description: How to use arrays in PostgreSQL and the Supabase API.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'arrays',
+  title: 'Working With Arrays',
+  description: 'How to use arrays in PostgreSQL and the Supabase API.',
+}

 PostgreSQL supports flexible [array types](https://www.postgresql.org/docs/12/arrays.html). These arrays are also supported in the Supabase Dashboard and in the JavaScript API.

@@ -162,3 +159,7 @@ returns:
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Supabase Account - Free Tier OK](https://supabase.com)
 - [PostgreSQL Arrays](https://www.postgresql.org/docs/12/arrays.html)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: connecting-to-postgres
-title: 'Database Connections'
-description: There are various ways to connect to your Postgres database.
---
+  id: 'connecting-to-postgres',
+  title: 'Database Connections',
+  description: 'There are various ways to connect to your Postgres database.',
+}

 Supabase provides several options for programmatically connecting to your Postgres database:

@@ -135,3 +135,7 @@ psql "sslmode=verify-full sslrootcert=$HOME/Downloads/prod-ca-2021.cer host=db.a
   file-picker modal. Select the certificate you downloaded from your Supabase dashboard and save the server details. PgAdmin
   should now be able to connect to your Postgres via SSL.
   ![Add Connection Info.](/docs/img/guides/database/add-ssl-config.png)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: extensions
-title: Overview
-description: Using Postgres extensions.
---
-
-import ExtensionsComponent from '@site/src/components/Extensions'
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'extensions',
+  title: 'Overview',
+  description: 'Using Postgres extensions.',
+}

 Extensions are exactly as they sound - they "extend" the database with functionality which isn't part of the Postgres core.
 Supabase has pre-installed some of the most useful open source extensions.
@@ -58,4 +54,8 @@ Enabling some extensions with `create extension <extension-name> with schema ext

 Supabase is pre-configured with over 50 extensions. You can also install your own SQL extensions directly in the database through our SQL editor.

-<ExtensionsComponent />
+<Extensions />
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: http
-title: 'http: RESTful Client'
-description: An HTTP Client for PostgreSQL Functions.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'http',
+  title: 'http: RESTful Client',
+  description: 'An HTTP Client for PostgreSQL Functions.',
+}

 The `http` extension allows you to call RESTful endpoints within Postgres.

@@ -116,3 +113,7 @@ from
 ## Resources

 - Official [`http` GitHub Repository](https://github.com/pramsey/pgsql-http)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: pgcron
-title: 'pg_cron: Job Scheduling'
-description: 'pgnet: a simple cron-based job scheduler for PostgreSQL that runs inside the database.'
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'pgcron',
+  title: 'pg_cron: Job Scheduling',
+  description:
+    'pgnet: a simple cron-based job scheduler for PostgreSQL that runs inside the database.',
+}

 The `pg_cron` extension is a simple cron-based job scheduler for PostgreSQL that runs inside the database.

@@ -98,3 +96,7 @@ SELECT cron.unschedule('nightly-vacuum');
 ## Resources

 - [pg_cron GitHub Repository](https://github.com/citusdata/pg_cron)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: pgnet
-title: 'pg_net: Async Networking'
-description: 'pg_net: an async networking extension for PostgreSQL.'
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'pgnet',
+  title: 'pg_net: Async Networking',
+  description: 'pg_net: an async networking extension for PostgreSQL.',
+}

 <Admonition type="caution">

@@ -253,3 +250,7 @@ Possible values for `net.http_response_result.status` are `('PENDING', 'SUCCESS'

 - Source code: [github.com/supabase/pg_net](https://github.com/supabase/pg_net/)
 - Official Docs: [supabase.github.io/pg_net](https://supabase.github.io/pg_net/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: pgtap
-title: 'pgTAP: Unit Testing'
-description: Unit testing in PostgreSQL.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'pgtap',
+  title: 'pgTAP: Unit Testing',
+  description: 'Unit testing in PostgreSQL.',
+}

 `pgTAP` is a unit testing extension for PostgreSQL.

@@ -158,3 +155,7 @@ API:
 ## Resources

 - Official [`pgTAP` documentation](https://pgtap.org/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: plv8
-title: 'plv8: JavaScript Language'
-description: JavaScript language for PostgreSQL.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'plv8',
+  title: 'plv8: JavaScript Language',
+  description: 'JavaScript language for PostgreSQL.',
+}

 The `plv8` extension allows you use JavaScript within Postgres.

@@ -144,3 +141,7 @@ $$ language plv8;

 - Official [`plv8` documentation](https://plv8.github.io/)
 - [plv8 GitHub Repository](https://github.com/plv8/plv8)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: uuid-ossp
-title: 'uuid-ossp: Unique Identifiers'
-description: A UUID generator for PostgreSQL.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'uuid-ossp',
+  title: 'uuid-ossp: Unique Identifiers',
+  description: 'A UUID generator for PostgreSQL.',
+}

 The `uuid-ossp` extension can be used to generate a `UUID`.

@@ -65,9 +62,10 @@ Once the extension is enabled, you now have access to a `uuid` type.

 Creates a UUID value based on the combination of computer’s MAC address, current timestamp, and a random value.

-:::note
-UUIDv1 leaks identifiable details, which might make it unsuitable for certain security-sensitive applications.
-:::
+<Admonition type="note">
+  UUIDv1 leaks identifiable details, which might make it unsuitable for certain security-sensitive
+  applications.
+</Admonition>

 ### `uuid_generate_v4()`

@@ -99,3 +97,7 @@ create table contacts (

 - [Choosing a Postgres Primary Key](https://supabase.com/blog/choosing-a-postgres-primary-key)
 - [The Basics Of PostgreSQL `UUID` Data Type](https://www.postgresqltutorial.com/postgresql-uuid/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: full-text-search
-title: 'Full Text Search'
-description: How to use full text search in PostgreSQL.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'full-text-search',
+  title: 'Full Text Search',
+  description: 'How to use full text search in PostgreSQL.',
+}

 Postgres has built-in functions to handle `Full Text Search` queries. This is like a "search engine" within Postgres.

@@ -590,3 +587,7 @@ final result = await client
 ## Resources

 - [PostgreSQL: Text Search Functions and Operators](https://www.postgresql.org/docs/12/functions-textsearch.html)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: functions
-title: Database Functions
-description: Creating and using Postgres functions.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'functions',
+  title: 'Database Functions',
+  description: 'Creating and using Postgres functions.',
+}

 Postgres has built-in support for [SQL functions](https://www.postgresql.org/docs/current/sql-createfunction.html).
 These functions live inside your database, and they can be [used with the API](../../reference/javascript/rpc).
@@ -346,3 +343,7 @@ GRANT EXECUTE ON FUNCTION hello_world TO service_role;
    allowFullScreen
  ></iframe>
 </div>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: json
-title: 'JSON'
-description: Using the JSON data type in PostgreSQL.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'json',
+  title: 'JSON',
+  description: 'Using the JSON data type in PostgreSQL.',
+}

 PostgreSQL supports [JSON functions and operators](https://www.postgresql.org/docs/current/functions-json.html) which gives flexibility when storing data inside a database column.

@@ -268,3 +265,7 @@ Note that the `->` operator returns JSONB data. If you want TEXT/STRING data ret
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [PostgreSQL: JSON Functions and Operators](https://www.postgresql.org/docs/12/functions-json.html)
 - [PostgreSQL JSON types](https://www.postgresql.org/docs/12/datatype-json.html)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: managing-passwords
-title: 'Passwords'
-description: How to change your PostgreSQL database password.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'managing-passwords',
+  title: 'Passwords',
+  description: 'How to change your PostgreSQL database password.',
+}

 Your PostgreSQL database is the core of your Supabase project, so it's important that it has a strong, secure password at all times.

@@ -30,3 +27,7 @@ It's absolutely critical that you store your customers' data safely. Here are so
 ## Resources

 - [PostgreSQL `ALTER USER` Documentation](https://www.postgresql.org/docs/12/sql-alteruser.html)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: managing-timezones
-title: 'Timezones'
-slug: managing-timezones
-description: How to change your database timezone.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'managing-timezones',
+  title: 'Timezones',
+  slug: 'managing-timezones',
+  description: 'How to change your database timezone.',
+}

 Every Supabase database is set to UTC timezone by default. We strongly recommend keeping it this way, even if your users are in a different location.
 This is because it makes it much easier to calculate differences between timezones if you adopt the mental model that "everything in my database is in UTC time".
@@ -77,3 +74,7 @@ where name ilike '%york%';

 </TabPanel>
 </Tabs>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: replication
-title: 'Replication'
-slug: replication
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'replication',
+  title: 'Replication',
+  slug: 'replication',
+}

 Replication is a technique for copying the data from one database to another. Supabase uses replication functionality to provide a real-time API. Replication is useful for:

@@ -93,3 +90,7 @@ begin;
  create publication publication_name;
 commit;
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: sql-to-api
-title: 'Converting SQL to JavaScript API'
-description: Implementing common SQL patterns in the JavaScript API
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'sql-to-api',
+  title: 'Converting SQL to JavaScript API',
+  description: 'Implementing common SQL patterns in the JavaScript API',
+}

 <!-- @TODO: this one is a very daunting read on first attempt. Need to check what is the purpose of it? -->

@@ -83,3 +80,7 @@ const { data, error } = await supabase
 - [Supabase API: JavaScript select](/docs/reference/javascript/select)
 - [Supabase API: JavaScript modifiers](/docs/reference/javascript/using-modifiers)
 - [Supabase API: JavaScript filters](/docs/reference/javascript/using-filters)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: tables
-title: Tables and Data
-description: Creating and using Postgres tables.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'tables',
+  title: 'Tables and Data',
+  description: 'Creating and using Postgres tables.',
+}

 Tables are where you store your data.

@@ -506,3 +503,7 @@ Creating a materialized view is not a solution to inefficient queries. You shoul
 - [PostgreSQL Tutorial: Create tables](https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-create-table/)
 - [PostgreSQL Tutorial: Add column](https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-add-column/)
 - [PostgreSQL Tutorial: Views](https://www.postgresqltutorial.com/postgresql-views/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: testing
-title: Testing Your Database
-description: Test your database schema, tables, functions, and policies.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'testing',
+  title: 'Testing Your Database',
+  description: 'Test your database schema, tables, functions, and policies.',
+}

 You can use the Supabase CLI to test your database. The minimum required version of the CLI is [v1.11.4](https://github.com/supabase/cli/releases). To get started:

@@ -70,3 +67,7 @@ Result: PASS

 - [pgTAP extension](/docs/guides/database/extensions/pgtap)
 - Official [pgTAP documentation](https://pgtap.org/)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: timeouts
-title: Timeouts
-description: Timeouts and optimization
---
+  id: 'timeouts',
+  title: 'Timeouts',
+  description: 'Timeouts and optimization',
+}

 By default, Supabase limits the maximum statement execution time to _3 seconds_ for users accessing the API using the anon key, and _8 seconds_ for authenticated users. Additionally, all users are subject to a global limit of _2 minutes_. This serves as a backstop against resource exhaustion due to either poorly written queries, or abusive usage.

@@ -27,3 +27,7 @@ set statement_timeout to 60000; -- 1 minute in milliseconds
 All Supabase projects come with the [`pg_stat_statements`](https://www.postgresql.org/docs/current/pgstatstatements.html) extension installed, which tracks planning and execution statistics for all statements executed against it. These statistics can be used in order to diagnose the performance of your project.

 This data can further be used in conjunction with the [`explain`](https://www.postgresql.org/docs/current/using-explain.html) functionality of Postgres to optimize your usage.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: webhooks
-title: 'Database Webhooks'
-description: Trigger external payloads on database events.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'webhooks',
+  title: 'Database Webhooks',
+  description: 'Trigger external payloads on database events.',
+}

 Database Webhooks allow you to send real-time data from your database to another system whenever a table event occurs.

@@ -73,3 +70,7 @@ type DeletePayload = {
 ## Resources

 - [pg_net](/docs/guides/database/extensions/pgnet): an async networking extension for PostgreSQL
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -155,3 +155,7 @@ Build a basic Todo List with Supabase and your favorite frontend framework:
 - [Heavy Bit](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-71-open-source-firebase-alternative-with-paul-copplestone-of-supabase/)
 - [Log Rocket](https://podrocket.logrocket.com/9)
 - [FS Jam](https://fsjam.org/episodes/episode-33-supabase-with-paul-copplestone)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: functions
-title: Edge Functions
-description: 'Globally distributed TypeScript functions.'
-sidebar_label: Overview
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'functions',
+  title: 'Edge Functions',
+  description: 'Globally distributed TypeScript functions.',
+  sidebar_label: 'Overview',
+}

 Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks).

@@ -277,3 +274,7 @@ Edge Functions supports `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, and `OPTIONS`.
 - Edge Functions
  - Local development - only one function at a time
  - Serving of HTML content is not supported (`GET` requests that return `text/html` will be rewritten to `text/plain`).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: auth
-title: Auth
-description: Supabase Edge Functions and Auth.
---
+  id: 'auth',
+  title: 'Auth',
+  description: 'Supabase Edge Functions and Auth.',
+}

 Edge Functions work seamlessly with [Supabase Auth](/docs/guides/auth), allowing you to identify which user called your function.

@@ -58,3 +58,7 @@ serve(async (req: Request) => {
 ```

 See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: cicd-workflow
-title: CI / CD Workflow
-description: How to deploy Supabase Edge Functions with a CI / CD pipeline.
---
+  id: 'cicd-workflow',
+  title: 'CI / CD Workflow',
+  description: 'How to deploy Supabase Edge Functions with a CI / CD pipeline.',
+}

 As described in the Supabase CLI [Environments Guide](/docs/guides/cli/managing-environments), you can use the [`setup-cli` GitHub Action](https://github.com/marketplace/actions/supabase-cli-action) to run Supabase CLI commands in your GitHub Actions, for example to deploy a Supabase Edge Function:

@@ -36,3 +36,7 @@ jobs:
 ```

 See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/.github/workflows/deploy.yaml).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,17 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: examples
-title: Examples
-description: Useful Supabase Edge Functions Examples
---
+  id: 'examples',
+  title: 'Examples',
+  description: 'Useful Supabase Edge Functions Examples',
+}

 You can find a list of useful [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.

 <div className="container" style={{ padding: 0 }}>
  <FunctionsExamples />
 </div>
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: platform
-title: Supabase Platform
-description: Getting started with the Supabase Platform.
-sidebar_label: Overview
---
+  id: 'platform',
+  title: 'Supabase Platform',
+  description: 'Getting started with the Supabase Platform.',
+  sidebar_label: 'Overview',
+}

 Supabase is a hosted platform which makes it very simple to get started without needing to manage any infrastructure.

@@ -80,3 +80,7 @@ If Supabase experiences outages, we keep you as informed as possible, as early a
 - Slack Alerts: You can receive updates via the RSS feed, using Slack's [built-in RSS functionality](https://slack.com/help/articles/218688467-Add-RSS-feeds-to-Slack) <br />`/feed subscribe https://status.supabase.com/history.atom`

 Make sure to review our [SLA](/docs/company/sla) for details on our commitment to Platform Stability.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -7,9 +7,6 @@ description: 'Migrate Firebase auth users to a Supabase project.'
 sidebar_label: Firebase Auth
 ---

-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/auth) to help migrate auth users from a Firebase project to a Supabase project. There are two parts to the migration process:

 - `firestoreusers2json` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.js)) exports users from an existing Firebase project to a `.json` file on your local system.
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: custom-domains
-title: Custom Domains
-description: Configuring a Custom Domain for your Supabase project.
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'custom-domains',
+  title: 'Custom Domains',
+  description: 'Configuring a Custom Domain for your Supabase project.',
+}

 <Admonition type="note">

@@ -28,7 +25,7 @@ To get started:

 This example assumes your Supabase project is `foobar` with a corresponding API URL `foobarbaz.supabase.co` and configures a custom domain at `api.example.com`.

-### <a id="cname-configure"></a>Configure a CNAME
+### Configure a CNAME

 Set up a CNAME record for `api.example.com`, resolving to `foobarbaz.supabase.co.`, with as low a TTL as possible.

@@ -91,3 +88,7 @@ As with the final activation stage of the process for setting up a custom domain
 ## Limitations

 Edge functions do not honor the custom domain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: database-usage
-title: Database usage
-description: Understanding how database usage applies to your subscription.
---
+  id: 'database-usage',
+  title: 'Database usage',
+  description: 'Understanding how database usage applies to your subscription.',
+}

 Database storage refers to the _monthly average storage usage_, as reported by Postgres. This metric is reported in your project's [billing usage](https://app.supabase.com/project/_/settings/billing/usage) and is updated daily.

@@ -57,3 +57,7 @@ However, it can be necessary to either [fine-tune](https://www.percona.com/blog/
 the [autovacuum parameters](https://www.enterprisedb.com/blog/postgresql-vacuum-and-analyze-best-practice-tips),
 or [manually initiate](https://www.postgresql.org/docs/current/sql-vacuum.html) vacuum operations.
 For example, running a manual vacuum after deleting large amounts of data from your DB could help reduce the reported disk usage by Postgres.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: going-into-prod
-title: 'Production Readiness'
-description: 'Things to do before making your app publicly available'
---
+  id: 'going-into-prod',
+  title: 'Production Readiness',
+  description: 'Things to do before making your app publicly available',
+}

 After developing your project and deciding it's Production Ready, you should run through this checklist to ensure that your project:

@@ -57,3 +57,7 @@ After developing your project and deciding it's Production Ready, you should run
 ## Next steps

 This checklist is always growing so be sure to check back frequently, and also feel free to suggest additions and amendments by making a PR on [GitHub](https://github.com/supabase/supabase).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: logs
-title: Logging
-description: Getting started with Supabase Platform Log Browser
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-import ThemedImage from '@theme/ThemedImage'
+  id: 'logs',
+  title: 'Logging',
+  description: 'Getting started with Supabase Platform Log Browser',
+}

 The Supabase Platform includes a Logs Explorer that allows log tracing and debugging. Log retention is based on your [project's pricing plan](https://supabase.com/pricing).

@@ -162,14 +158,7 @@ The resulting `metadata` key is rendered as an array of objects in the Logs Expl

 <!--  Scene is here https://app.excalidraw.com/s/8gj16loJfGZ/3HzccK9MyLx -->

-<ThemedImage
-  alt="Without Unnesting"
-  sources={{
-    light: '/docs/img/guides/platform/logs/unnesting-none.png',
-    dark: '/docs/img/guides/platform/logs/unnesting-none-dark.png',
-  }}
-  style={{ maxHeight: 200 }}
-/>
+![Without Unnesting](/docs/img/unnesting-none.png)

 Perform a `cross join unnest()` to work with the keys nested in the `metadata` key.

@@ -184,15 +173,7 @@ cross join unnest(request.headers) as header
 ```

 This surfaces the following columns available for selection:
-
-<ThemedImage
-  alt="With Two Level Unnesting"
-  sources={{
-    light: '/docs/img/guides/platform/logs/unnesting-2.png',
-    dark: '/docs/img/guides/platform/logs/unnesting-2-dark.png',
-  }}
-  style={{ maxHeight: 200 }}
-/>
+![With Two Level Unnesting](/docs/img/unnesting-2.png)

 This allows you to select the `method` and `cf_ipcountry` columns. In JS dot notation, the full paths for each selected column are:

@@ -246,3 +227,7 @@ from edge_logs
  cross join unnest(r.headers) AS h
 where h.x_real_ip is not null and r.method = "GET"
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: metrics
-title: Metrics
-description: Observability for your Supabase project
---
+  id: 'metrics',
+  title: 'Metrics',
+  description: 'Observability for your Supabase project',
+}

 In addition to the reports and charts built in to the Supabase dashboard, each project hosted on the Supabase platform comes with a [Prometheus](https://prometheus.io/)-compatible metrics endpoint, which can be used to gather insight into the health and status of your project.

@@ -31,3 +31,7 @@ Your project's metrics endpoint is accessible at `https://<project-ref>.supabase
 ```

 Additionally, we [maintain a guide](https://github.com/supabase/grafana-agent-fly-example/) on quickly setting up a scraping agent to work with Grafana Cloud.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: migrating-and-upgrading-projects
-title: 'Migrating and Upgrading Projects'
-description: Upgrade your project to the latest version of Supabase.
-sidebar_label: 'Migrating and upgrading'
---
+  id: 'migrating-and-upgrading-projects',
+  title: 'Migrating and Upgrading Projects',
+  description: 'Upgrade your project to the latest version of Supabase.',
+  sidebar_label: 'Migrating and upgrading',
+}

 Supabase ships fast and we endeavor to add all new features to existing projects wherever possible.
 In some cases, access to new features require upgrading or migrating your Supabase project.
@@ -118,3 +118,7 @@ const NEW_PROJECT_SERVICE_KEY = 'new-project-service-key-yyy'
  }
 })()
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: performance
-title: Performance Tuning
-description: Getting the best results out of your Supabase project
---
+  id: 'performance',
+  title: 'Performance Tuning',
+  description: 'Getting the best results out of your Supabase project',
+}

 The Supabase platform automatically optimizes your Postgres database to take advantage of the compute resources of the tier your project is on. However, these optimizations are based on assumptions about the type of workflow the project is being utilized for, and it is likely that better results can be obtained by tuning the database for your particular workflow.

@@ -90,3 +90,7 @@ Using the query plan analyzer to optimize your queries is a large topic, with a
 - [Enterprise DB.](https://www.enterprisedb.com/blog/postgresql-query-optimization-performance-tuning-with-explain-analyze)

 You can pair the information available from `pg_stat_statements` with the detailed system metrics available [via your metrics endpoint](../platform/metrics) to better understand the behavior of your DB and the queries you're executing against it.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: permissions
-title: Permissions
-description: Permissions requirements for the Supabase Cloud hosting environment
---
+  id: 'permissions',
+  title: 'Permissions',
+  description: 'Permissions requirements for the Supabase Cloud hosting environment',
+}

 The Supabase platform offers additional services (e.g. Storage) on top of the Postgres database that comes with each project. These services default to storing their operational data within your database, to ensure that you retain complete control over it.

@@ -14,3 +14,7 @@ However, these services assume a base level of access to their data, in order to
 - all entitites under the `auth` schema are owned by `supabase_auth_admin`

 It is possible for violations of these assumptions to not cause an immediate outage, but take effect at a later time when a newer migration becomes available.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: realtime
-title: Realtime
-description: Supabase Realtime with Broadcast, Presence, and Postgres CDC.
-sidebar_label: Overview
---
+  id: 'realtime',
+  title: 'Realtime',
+  description: 'Supabase Realtime with Broadcast, Presence, and Postgres CDC.',
+  sidebar_label: 'Overview',
+}

 Supabase provides a globally distributed cluster of [Realtime](https://github.com/supabase/realtime) servers that enable the following functionality:

@@ -51,3 +51,7 @@ We strongly encourage you to enable RLS on your database tables and have RLS pol

 - [Realtime quickstart](/docs/guides/realtime/quickstart)
 - [Realtime: Multiplayer Edition](https://supabase.com/blog/supabase-realtime-multiplayer-general-availability) blog post
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,10 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: postgres-cdc
-title: Postgres CDC
-description: Getting started with Realtime's Postgres CDC feature
---
+  id: 'postgres-cdc',
+  title: 'Postgres CDC',
+  description: "Getting started with Realtime's Postgres CDC feature",
+}

 Realtime's Postgres Change Data Capture (CDC) feature listens for database changes and sends them to clients. Clients are required to subscribe with a JWT dictating which changes they are allowed to receive based on the database's [Row Level Security](/docs/guides/auth/row-level-security).

@@ -117,3 +117,7 @@ const channel = supabase
  )
  .subscribe()
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: quickstart
-title: Realtime Quickstart
-description: Getting started with Realtime's Features
-sidebar_label: Quickstart
---
+  id: 'quickstart',
+  title: 'Realtime Quickstart',
+  description: "Getting started with Realtime's Features",
+  sidebar_label: 'Quickstart',
+}

 Learn how to build [multiplayer.dev](https://multiplayer.dev), a collaborative app that demonstrates Broadcast, Presence, and Postgres CDC using [Realtime](/docs/guides/realtime).

@@ -258,3 +258,7 @@ channel.subscribe(async (status) => {
  }
 })
 ```
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: rate-limits
-title: Realtime Rate Limits
-description: Understanding Realtime rate limiting
-sidebar_label: Rate Limits
---
+  id: 'rate-limits',
+  title: 'Realtime Rate Limits',
+  description: 'Understanding Realtime rate limiting',
+  sidebar_label: 'Rate Limits',
+}

 Supabase Realtime is a global cluster. We've implemented some rate limits to help ensure high availability for all customers.

@@ -78,3 +78,7 @@ The following limits apply to Presence messages:

 - 10 keys per object
 - Message rate limit is 10% of your Realtime message rate limit
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: storage-cdn
-title: Storage CDN
-description: How Supabase Storage caches objects with a CDN
-sidebar_label: CDN
---
+  id: 'storage-cdn',
+  title: 'Storage CDN',
+  description: 'How Supabase Storage caches objects with a CDN',
+  sidebar_label: 'CDN',
+}

 ## CDN basics

@@ -34,3 +34,7 @@ The cache status of a particular request is sent in the `cf-cache-status` header
 ## Public vs Private Buckets

 Objects in public buckets do not require any Authorization to access objects. This leads to a better cache hit rate compared to private buckets. For private buckets, permissions for accessing each object is checked on a per user level. For example, if two different users access the same object in a private bucket from the same region, it results in a cache miss for both the users since they might have different security policies attached to them. On the other hand, if two different users access the same object in a public bucket from the same region, it results in a cache hit for the second user.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: storage
-title: Storage
-description: Use Supabase to store and serve files.
-sidebar_label: Overview
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'storage',
+  title: 'Storage',
+  description: 'Use Supabase to store and serve files.',
+  sidebar_label: 'Overview',
+}

 Supabase Storage makes it simple to store and serve large files.

@@ -371,3 +368,7 @@ using ( auth.uid() = owner );
 - [Swagger API documentation](https://supabase.github.io/storage-api)
 - Official [JavaScript](/docs/reference/javascript/storage-createbucket) and [Dart](/docs/reference/dart/storage-createbucket) documentation
 - [Community libraries](https://github.com/supabase-community)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,13 +1,10 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: storage-sample
-title: 'Storage Sample Doc'
-description: Storage Sample Doc
---
-
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+  id: 'storage-sample',
+  title: 'Storage Sample Doc',
+  description: 'Storage Sample Doc',
+}

 ## Description

@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: with-flutter
-title: 'Quickstart: Flutter'
-description: Learn how to use Supabase in your Flutter App.
-sidebar_label: Flutter
---
+  id: 'with-flutter',
+  title: 'Quickstart: Flutter',
+  description: 'Learn how to use Supabase in your Flutter App.',
+  sidebar_label: 'Flutter',
+}

 <QuickstartIntro />

@@ -794,3 +794,7 @@ Congratulations, that is it! You have now built a fully functional user manageme
 ## See also

 - [Flutter Tutorial: building a Flutter chat app](https://supabase.com/blog/flutter-tutorial-building-a-chat-app)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: with-ionic-angular
-title: 'Quickstart: Ionic Angular'
-description: Learn how to use Supabase in your Ionic Angular App.
-sidebar_label: Ionic Angular
---
+  id: 'with-ionic-angular',
+  title: 'Quickstart: Ionic Angular',
+  description: 'Learn how to use Supabase in your Ionic Angular App.',
+  sidebar_label: 'Ionic Angular',
+}

 <QuickstartIntro />

@@ -532,3 +532,7 @@ At this stage you have a fully functional application!
 ## Resources

 - [Authentication in Ionic Angular with Supabase](https://supabase.com/blog/authentication-in-ionic-angular)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,11 +1,11 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: with-ionic-react
-title: 'Quickstart: Ionic React'
-description: Learn how to use Supabase in your Ionic React App.
-sidebar_label: Ionic React
---
+  id: 'with-ionic-react',
+  title: 'Quickstart: Ionic React',
+  description: 'Learn how to use Supabase in your Ionic React App.',
+  sidebar_label: 'Ionic React',
+}

 <QuickstartIntro />

@@ -501,3 +501,7 @@ At this stage you have a fully functional application!

 - Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
 - Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,12 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: with-ionic-vue
-title: 'Quickstart: Ionic Vue'
-description: Learn how to use Supabase in your Ionic Vue App.
-sidebar_label: Ionic Vue
---
+  id: 'with-ionic-vue',
+  title: 'Quickstart: Ionic Vue',
+  description: 'Learn how to use Supabase in your Ionic Vue App.',
+  sidebar_label: 'Ionic Vue',
+}

-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
 import QuickstartIntro from '/components/MDX/quickstart_intro.mdx'
 import ProjectSetup from '/components/MDX/project_setup.mdx'

@@ -566,3 +564,7 @@ At this stage you have a fully functional application!

 - Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
 - Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,13 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: with-nextjs
-title: 'Quickstart: Next.js'
-description: Learn how to use Supabase in your Next App.
-sidebar_label: 'Next.js'
---
+  id: 'with-nextjs',
+  title: 'Quickstart: Next.js',
+  description: 'Learn how to use Supabase in your Next App.',
+  sidebar_label: 'Next.js',
+}

-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+import QuickstartIntro from '/components/MDX/quickstart_intro.mdx'
 import ProjectSetup from '/components/MDX/project_setup.mdx'

 <QuickstartIntro />
@@ -736,3 +735,7 @@ At this stage you have a fully functional application!
 - See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub.
 - Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
 - Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
@@ -1,14 +1,12 @@
 import Layout from '~/layouts/DefaultGuideLayout'

 export const meta = {
-id: with-nuxt-3
-title: 'Quickstart: Nuxt 3'
-description: Learn how to use Supabase in your Nuxt 3 App.
-sidebar_label: Nuxt 3
---
+  id: 'with-nuxt-3',
+  title: 'Quickstart: Nuxt 3',
+  description: 'Learn how to use Supabase in your Nuxt 3 App.',
+  sidebar_label: 'Nuxt 3',
+}

-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
 import QuickstartIntro from '/components/MDX/quickstart_intro.mdx'
 import ProjectSetup from '/components/MDX/project_setup.mdx'

@@ -431,3 +429,7 @@ At this stage you have a fully functional application!

 - Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
 - Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page