refactor: move ai, realtime, functions, remaining auth docs to content directory (#21259)

.github/workflows/prettier.yml

@@ -63,6 +63,7 @@ jobs:
         with:
           sparse-checkout: |
             apps/docs/pages
+            apps/docs/content
       # Installing all dependencies takes up to three minutes, hacking around to only installing prettier+deps
       - name: Download dependencies
         run: |
@@ -72,4 +73,4 @@ jobs:
       - name: Run prettier
         run: |-
           # Check mdx files which contain sql code blocks
-          grep -lr '```sql' apps/docs/pages/**/*.mdx | xargs npx prettier -c
+          grep -lr '```sql' apps/docs/{pages,content}/**/*.mdx | xargs npx prettier -c

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -657,20 +657,20 @@ export const auth = {
       items: [
         {
           name: 'Part One: JWTs',
-          url: '/learn/auth-deep-dive/auth-deep-dive-jwts',
+          url: '/guides/auth/auth-deep-dive/auth-deep-dive-jwts',
         },
         {
           name: 'Part Two: Row Level Security',
-          url: '/learn/auth-deep-dive/auth-row-level-security',
+          url: '/guides/auth/auth-deep-dive/auth-row-level-security',
         },
         {
           name: 'Part Three: Policies',
-          url: '/learn/auth-deep-dive/auth-policies',
+          url: '/guides/auth/auth-deep-dive/auth-policies',
         },
-        { name: 'Part Four: GoTrue', url: '/learn/auth-deep-dive/auth-gotrue' },
+        { name: 'Part Four: GoTrue', url: '/guides/auth/auth-deep-dive/auth-gotrue' },
         {
           name: 'Part Five: Google OAuth',
-          url: '/learn/auth-deep-dive/auth-google-oauth',
+          url: '/guides/auth/auth-deep-dive/auth-google-oauth',
         },
       ],
     },

apps/docs/components/RealtimeLimitsEstimator/index.tsx

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const Estimator = lazy(() => import('./RealtimeLimitsEstimator'))
+
+export function RealtimeLimitsEstimator() {
+  return (
+    <Suspense>
+      <Estimator />
+    </Suspense>
+  )
+}

apps/docs/components/index.tsx

@@ -33,6 +33,7 @@ import { NavData } from './NavData'
 // Partials
 import DatabaseSetup from './MDX/database_setup.mdx'
 import GetSessionWarning from './MDX/get_session_warning.mdx'
+import HuggingFaceDeployment from './MDX/ai/quickstart_hf_deployment.mdx'
 import MigrationWarnings from './MDX/migration_warnings.mdx'
 import ProjectSetup from './MDX/project_setup.mdx'
 import QuickstartIntro from './MDX/quickstart_intro.mdx'
@@ -67,6 +68,7 @@ import {
 // Heavy/rare (lazy-loaded)
 import { AppleSecretGenerator } from './AppleSecretGenerator'
 import { Mermaid } from './Mermaid'
+import { RealtimeLimitsEstimator } from './RealtimeLimitsEstimator'
 
 const components = {
   ...markdownComponents,
@@ -102,6 +104,7 @@ const components = {
       {props.children}
     </Heading>
   ),
+  HuggingFaceDeployment,
   IconMenuApi,
   IconMenuAuth,
   IconMenuCli,
@@ -133,6 +136,7 @@ const components = {
   ProjectConfigVariables,
   ProjectSetup,
   QuickstartIntro,
+  RealtimeLimitsEstimator,
   RefHeaderSection: (props: any) => <RefHeaderSection {...props} />,
   RefSubLayout,
   SocialProviderSettingsSupabase,

apps/docs/content/guides/ai.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai',
-  title: 'AI & Vectors',
-  description: 'The best vector database is the database you already have.',
-  subtitle: 'The best vector database is the database you already have.',
-  sidebar_label: 'Overview',
-}
+---
+id: 'ai'
+title: 'AI & Vectors'
+description: 'The best vector database is the database you already have.'
+subtitle: 'The best vector database is the database you already have.'
+hideToc: true
+---
 
 Supabase provides an open source toolkit for developing AI applications using Postgres and pgvector. Use the Supabase client libraries to store, index, and query your vector embeddings at scale.
 
@@ -109,7 +107,26 @@ export const integrations = [
 ## Case studies
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {customers.map((x) => (
+  {[
+    {
+      name: 'Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector',
+      description:
+        'Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.',
+      href: 'https://supabase.com/customers/berriai',
+    },
+    {
+      name: 'Mendable switches from Pinecone to Supabase for PostgreSQL vector embeddings',
+      description:
+        'How Mendable boosts efficiency and accuracy of chat powered search for documentation using Supabase with pgvector',
+      href: 'https://supabase.com/customers/mendableai',
+    },
+    {
+      name: 'Markprompt: GDPR-Compliant AI Chatbots for Docs and Websites',
+      description:
+        "AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and GDPR-compliant prompt experiences on top of their content, by leveraging Supabase's secure and privacy-focused database and authentication solutions",
+      href: 'https://supabase.com/customers/markprompt',
+    },
+  ].map((x) => (
     <div className="col-span-4" key={x.href}>
       <Link href={x.href} passHref>
         <GlassPanel title={x.name}>{x.description}</GlassPanel>
@@ -117,28 +134,3 @@ export const integrations = [
     </div>
   ))}
 </div>
-
-export const customers = [
-  {
-    name: 'Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector',
-    description:
-      'Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.',
-    href: 'https://supabase.com/customers/berriai',
-  },
-  {
-    name: 'Mendable switches from Pinecone to Supabase for PostgreSQL vector embeddings',
-    description:
-      'How Mendable boosts efficiency and accuracy of chat powered search for documentation using Supabase with pgvector',
-    href: 'https://supabase.com/customers/mendableai',
-  },
-  {
-    name: 'Markprompt: GDPR-Compliant AI Chatbots for Docs and Websites',
-    description:
-      "AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and GDPR-compliant prompt experiences on top of their content, by leveraging Supabase's secure and privacy-focused database and authentication solutions",
-    href: 'https://supabase.com/customers/markprompt',
-  },
-]
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page

apps/docs/content/guides/ai/choosing-compute-addon.mdx

@@ -1,14 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { Tabs } from 'ui'
-export const TabPanel = Tabs.Panel
-
-export const meta = {
-  id: 'ai-choosing-compute-addon',
-  title: 'Choosing your Compute Add-on',
-  description: 'Choosing the right Compute Add-on for your vector workload.',
-  subtitle: 'Choosing the right Compute Add-on for your vector workload.',
-  sidebar_label: 'Choosing Compute Add-on',
-}
+---
+id: 'ai-choosing-compute-addon'
+title: 'Choosing your Compute Add-on'
+description: 'Choosing the right Compute Add-on for your vector workload.'
+subtitle: 'Choosing the right Compute Add-on for your vector workload.'
+sidebar_label: 'Choosing Compute Add-on'
+---
 
 You have two options for scaling your vector workload:
 
@@ -339,7 +335,3 @@ We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikber
 Each test is run for a minimum of 30-40 minutes. They include a series of experiments executed at different concurrency levels to measure the engine's performance under different load types. The results are then averaged.
 
 As a general recommendation, we suggest using a concurrency level of 5 or more for most workloads and 30 or more for high-load workloads.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/concepts.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-concepts',
-  title: 'Concepts',
-  description: 'Learn about embeddings within AI and vector applications.',
-  sidebar_label: 'Concepts',
-}
+---
+id: 'ai-concepts'
+title: 'Concepts'
+description: 'Learn about embeddings within AI and vector applications.'
+sidebar_label: 'Concepts'
+---
 
 Embeddings are core to many AI and vector applications. This guide covers these concepts. If you prefer to get started right away, see our guide on [Generating Embeddings](/docs/guides/ai/quickstarts/generate-text-embeddings).
 
@@ -61,7 +59,3 @@ Why is this useful? Once we have generated embeddings on multiple texts, it is t
 ## See also
 
 - [Structured and Unstructured embeddings](/docs/guides/ai/structured-unstructured)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/engineering-for-scale.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-engineering-for-scale',
-  title: 'Engineering for Scale',
-  description: 'Building an enterprise-grade vector architecture',
-  subtitle: 'Building an enterprise-grade vector architecture.',
-  sidebar_label: 'Engineering for Scale',
-}
+---
+id: 'ai-engineering-for-scale'
+title: 'Engineering for Scale'
+description: 'Building an enterprise-grade vector architecture'
+subtitle: 'Building an enterprise-grade vector architecture.'
+sidebar_label: 'Engineering for Scale'
+---
 
 Content sources for vectors can be extremely large. As you grow you should run your Vector workloads across several secondary databases (sometimes called "pods"), which allows each collection to scale independently.
 
@@ -145,7 +143,3 @@ This diagram provides an example architecture that allows you to access the coll
     }}
   />
 </div>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/examples/building-chatgpt-plugins.mdx

@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Building ChatGPT plugins',
-  subtitle: 'Use Supabase as a Retrieval Store for your ChatGPT plugin.',
-  breadcrumb: 'AI Examples',
-}
+---
+title: 'Building ChatGPT plugins'
+subtitle: 'Use Supabase as a Retrieval Store for your ChatGPT plugin.'
+breadcrumb: 'AI Examples'
+---
 
 ChatGPT recently released [Plugins](https://openai.com/blog/chatgpt-plugins) which help ChatGPT access up-to-date information, run computations, or use third-party services.
 If you're building a plugin for ChatGPT, you'll probably want to answer questions from a specific source. We can solve this with “retrieval plugins”, which allow ChatGPT to access information from a database.
@@ -151,6 +148,3 @@ And after ChatGPT receives a response from the plugin it will answer your questi
 
 - ChatGPT Retrieval Plugin: [github.com/openai/chatgpt-retrieval-plugin](https://github.com/openai/chatgpt-retrieval-plugin)
 - ChatGPT Plugins: [official documentation](https://platform.openai.com/docs/plugins/introduction)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-export default Page

apps/docs/content/guides/ai/examples/headless-vector-search.mdx

@@ -1,12 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Adding generative Q&A for your documentation',
-  subtitle:
-    'Learn how to build a ChatGPT-style doc search powered using our headless search toolkit.',
-  breadcrumb: 'AI Examples',
-}
+---
+title: 'Adding generative Q&A for your documentation'
+subtitle: 'Learn how to build a ChatGPT-style doc search powered using our headless search toolkit.'
+breadcrumb: 'AI Examples'
+---
 
 Supabase provides a [Headless Search Toolkit](https://github.com/supabase/headless-vector-search) for adding "Generative Q&A" to your documentation. The toolkit is "headless", so that you can integrate it into your existing website and style it to match your website theme.
 
@@ -119,6 +115,3 @@ const onSubmit = (e: Event) => {
 - Read about how we built [ChatGPT for the Supabase Docs](https://supabase.com/blog/chatgpt-supabase-docs).
 - Read the pgvector Docs for [Embeddings and vector similarity](/docs/guides/database/extensions/pgvector)
 - See how to build something like this from scratch [using Next.js](/docs/guides/ai/examples/nextjs-vector-search).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-export default Page

apps/docs/content/guides/ai/examples/huggingface-image-captioning.mdx

@@ -1,14 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Generate image captions using Hugging Face',
-  description:
-    'Use the Hugging Face Inference API to make calls to 100,000+ Machine Learning models from Supabase Edge Functions.',
-  subtitle:
-    'Use the Hugging Face Inference API to make calls to 100,000+ Machine Learning models from Supabase Edge Functions.',
-  video: 'https://www.youtube.com/v/OgnYxRkxEUw',
-  tocVideo: 'OgnYxRkxEUw',
-}
+---
+title: 'Generate image captions using Hugging Face'
+description: 'Use the Hugging Face Inference API to make calls to 100,000+ Machine Learning models from Supabase Edge Functions.'
+subtitle: 'Use the Hugging Face Inference API to make calls to 100,000+ Machine Learning models from Supabase Edge Functions.'
+video: 'https://www.youtube.com/v/OgnYxRkxEUw'
+tocVideo: 'OgnYxRkxEUw'
+---
 
 We can combine Hugging Face with [Supabase Storage](https://supabase.com/storage) and [Database Webhooks](https://supabase.com/docs/guides/database/webhooks) to automatically caption for any image we upload to a storage bucket.
 
@@ -93,7 +89,3 @@ serve(async (req) => {
   return new Response('ok')
 })
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/examples/image-search-openai-clip.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-image-search-python',
-  title: 'Image Search with OpenAI CLIP',
-  description: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.',
-  subtitle: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.',
-}
+---
+id: 'examples-image-search-python'
+title: 'Image Search with OpenAI CLIP'
+description: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.'
+subtitle: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.'
+---
 
 The [OpenAI CLIP Model](https://github.com/openai/CLIP) was trained on a variety of (image, text)-pairs. You can use the CLIP model for:
 
@@ -171,7 +169,3 @@ That's it, go ahead and test it out by running `poetry run search` and you will
 ## Conclusion
 
 With just a couple of lines of Python you are able to implement image search as well as reverse image search using OpenAI's CLIP model and Supabase Vector.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/examples/nextjs-vector-search.mdx

@@ -1,14 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Vector search with Next.js and OpenAI',
-  subtitle:
-    'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.',
-  breadcrumb: 'AI Examples',
-  video: 'https://www.youtube.com/v/xmfNUCjszh4',
-  tocVideo: 'xmfNUCjszh4',
-}
+---
+title: 'Vector search with Next.js and OpenAI'
+subtitle: 'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.'
+breadcrumb: 'AI Examples'
+video: 'https://www.youtube.com/v/xmfNUCjszh4'
+tocVideo: 'xmfNUCjszh4'
+---
 
 While our [Headless Vector search](/docs/guides/ai/examples/headless-vector-search) provides a toolkit for generative Q&A, in this tutorial we'll go more in-depth, build a custom ChatGPT-like search experience from the ground-up using Next.js. You will:
 
@@ -543,6 +539,3 @@ Want to learn more about the awesome tech that is powering this?
     allowFullScreen
   ></iframe>
 </div>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-export default Page

apps/docs/content/guides/ai/examples/openai.mdx

@@ -1,13 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-openai',
-  title: 'Generating OpenAI GPT3 completions',
-  description: 'Generate GPT text completions using OpenAI and Supabase Edge Functions.',
-  subtitle: 'Generate GPT text completions using OpenAI and Supabase Edge Functions.',
-  video: 'https://www.youtube-nocookie.com/v/29p8kIqyU_Y',
-  tocVideo: '29p8kIqyU_Y',
-}
+---
+id: 'examples-openai'
+title: 'Generating OpenAI GPT3 completions'
+description: 'Generate GPT text completions using OpenAI and Supabase Edge Functions.'
+subtitle: 'Generate GPT text completions using OpenAI and Supabase Edge Functions.'
+video: 'https://www.youtube-nocookie.com/v/29p8kIqyU_Y'
+tocVideo: '29p8kIqyU_Y'
+---
 
 OpenAI provides a [completions API](https://platform.openai.com/docs/api-reference/completions) that allows you to use their generative GPT models in your own applications.
 
@@ -112,7 +110,3 @@ If you're interesting in learning how to use this to build your own ChatGPT, rea
     allowFullScreen
   ></iframe>
 </div>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/going-to-prod.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-going-to-prod',
-  title: 'Going to Production',
-  description: 'Checklist for going to production with your AI application.',
-  subtitle: 'Going to production checklist for AI applications.',
-  sidebar_label: 'Going to Production',
-}
+---
+id: 'ai-going-to-prod'
+title: 'Going to Production'
+description: 'Checklist for going to production with your AI application.'
+subtitle: 'Going to production checklist for AI applications.'
+sidebar_label: 'Going to Production'
+---
 
 This guide will help you to prepare your application for production. We'll provide actionable steps to help you scale your application, ensure that it is reliable, can handle the load, and provide optimal accuracy for your use case.
 
@@ -125,7 +123,3 @@ Or take a look at our [pgvector 0.5.0 performance](https://supabase.com/blog/inc
     }}
   />
 </div>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/google-colab.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-google-colab',
-  title: 'Google Colab',
-  description: 'Use Google Colab to manage your Supabase Vector store.',
-  subtitle: 'Use Google Colab to manage your Supabase Vector store.',
-  sidebar_label: 'Google Colab',
-}
+---
+id: 'ai-google-colab'
+title: 'Google Colab'
+description: 'Use Google Colab to manage your Supabase Vector store.'
+subtitle: 'Use Google Colab to manage your Supabase Vector store.'
+sidebar_label: 'Google Colab'
+---
 
 <a
   className="w-64"
@@ -113,7 +111,3 @@ You can lean more about creating indexes in the [Vecs documentation](https://sup
 ## Resources
 
 - Vecs API: [supabase.github.io/vecs/api](https://supabase.github.io/vecs/api)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/hugging-face.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-hugging-face',
-  title: 'Hugging Face Inference API',
-  description: 'Learn how to integrate hugging face models with Supabase',
-  sidebar_label: 'Hugging Face',
-}
+---
+id: 'ai-hugging-face'
+title: 'Hugging Face Inference API'
+description: 'Learn how to integrate hugging face models with Supabase'
+sidebar_label: 'Hugging Face'
+---
 
 [Hugging Face](https://huggingface.co) is an open source hub for AI/ML models and tools. With over 100,000 machine learning models available, Hugging Face provides a great way to integrate specialized AI & ML tasks into your application.
 
@@ -170,7 +168,3 @@ Try running some other [AI tasks](#ai-tasks).
 - Official [Hugging Face site](https://huggingface.co/).
 - Official [Hugging Face JS docs](https://huggingface.co/docs/huggingface.js).
 - [Generate image captions](/docs/guides/ai/examples/huggingface-image-captioning) using Hugging Face.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/integrations/llamaindex.mdx

@@ -1,14 +1,9 @@
-import { Admonition } from 'ui'
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-integration-llamaindex',
-  title:
-    'Learn how to integrate Supabase with LlamaIndex, a data framework for your LLM applications.',
-  subtitle:
-    'Learn how to integrate Supabase with LlamaIndex, a data framework for your LLM applications.',
-  breadcrumb: 'AI Integrations',
-}
+---
+id: 'ai-integration-llamaindex'
+title: 'Learn how to integrate Supabase with LlamaIndex, a data framework for your LLM applications.'
+subtitle: 'Learn how to integrate Supabase with LlamaIndex, a data framework for your LLM applications.'
+breadcrumb: 'AI Integrations'
+---
 
 This guide will walk you through a basic example using the LlamaIndex [SupabaseVectorStore](https://github.com/supabase/supabase/blob/master/examples/ai/llamaindex/llamaindex.ipynb).
 
@@ -73,7 +68,3 @@ You can view the inserted items in the [Table Editor](https://supabase.com/dashb
 
 - Visit the LlamaIndex + SupabaseVectorStore [docs](https://gpt-index.readthedocs.io/en/latest/examples/vector_stores/SupabaseVectorIndexDemo.html)
 - Visit the official LlamaIndex [repo](https://github.com/jerryjliu/llama_index/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/integrations/roboflow.mdx

@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-integration-roboflow',
-  title: 'Roboflow',
-  subtitle:
-    'Learn how to integrate Supabase with Roboflow, a tool for running fine-tuned and foundation vision models.',
-  breadcrumb: 'AI Integrations',
-}
+---
+id: 'ai-integration-roboflow'
+title: 'Roboflow'
+subtitle: 'Learn how to integrate Supabase with Roboflow, a tool for running fine-tuned and foundation vision models.'
+breadcrumb: 'AI Integrations'
+---
 
 In this guide, we will walk through two examples of using [Roboflow Inference](https://inference.roboflow.com) to run fine-tuned and foundation models. We will run inference and save predictions using an object detection model and [CLIP](https://github.com/openai/CLIP).
 
@@ -238,7 +235,3 @@ print(result[0])
 - [Roboflow Inference documentation](https://inference.roboflow.com)
 - [Roboflow Getting Started guide](https://blog.roboflow.com/getting-started-with-roboflow/)
 - [How to Build a Semantic Image Search Engine with Supabase and OpenAI CLIP](https://blog.roboflow.com/how-to-use-semantic-search-supabase-openai-clip/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/langchain.mdx

@@ -1,14 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { Tabs } from 'ui'
-export const TabPanel = Tabs.Panel
-
-export const meta = {
-  id: 'ai-lang-chain',
-  title: 'LangChain',
-  description:
-    'Learn how to integrate Supabase with LangChain, a popular framework for composing AI, Vectors, and embeddings',
-  sidebar_label: 'LangChain',
-}
+---
+id: 'ai-lang-chain'
+title: 'LangChain'
+description: 'Learn how to integrate Supabase with LangChain, a popular framework for composing AI, Vectors, and embeddings'
+sidebar_label: 'LangChain'
+---
 
 [LangChain](https://langchain.com/) is a popular framework for working with AI, Vectors, and embeddings. LangChain supports using Supabase as a [vector store](https://js.langchain.com/docs/modules/indexes/vector_stores/integrations/supabase), using the `pgvector` extension.
 
@@ -230,7 +225,3 @@ You can install the LangChain Hybrid Search function though our [database.dev pa
 - Official [LangChain site](https://langchain.com/).
 - Official [LangChain docs](https://js.langchain.com/docs/modules/indexes/vector_stores/integrations/supabase).
 - Supabase [Hybrid Search](https://js.langchain.com/docs/modules/indexes/retrievers/supabase-hybrid).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/python-clients.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-python-clients',
-  title: 'Choosing a Client',
-  description: 'Learn how to manage vectors using Python',
-  sidebar_label: 'Choosing a Client',
-}
+---
+id: 'ai-python-clients'
+title: 'Choosing a Client'
+description: 'Learn how to manage vectors using Python'
+sidebar_label: 'Choosing a Client'
+---
 
 As described in [Structured & Unstructured Embeddings](/docs/guides/ai/structured-unstructured), AI workloads come in many forms.
 
@@ -18,7 +16,3 @@ You can get your connection string from the [**Database Settings**](https://supa
 </Admonition>
 
 For production python applications with version controlled migrations, we recommend adding first class vector support to your toolchain by [registering the vector type with your ORM](https://github.com/pgvector/pgvector-python). pgvector provides bindings for the most commonly used SQL drivers/libraries including Django, SQLAlchemy, SQLModel, psycopg, asyncpg and Peewee.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/quickstarts/face-similarity.mdx

@@ -1,11 +1,8 @@
-import { Admonition } from 'ui'
-import Layout from '~/layouts/DefaultGuideLayout'
-export const meta = {
-  id: 'ai-vecs-python-client',
-  title: 'Face similarity search',
-  subtitle: 'Identify the celebrities who look most similar to you using Supabase Vecs.',
-  breadcrumb: 'AI Quickstarts',
-}
+---
+id: 'ai-vecs-python-client'
+title: 'Face similarity search'
+subtitle: 'Identify the celebrities who look most similar to you using Supabase Vecs.'
+---
 
 This guide will walk you through a ["Face Similarity Search"](https://github.com/supabase/supabase/blob/master/examples/ai/face_similarity.ipynb) example using Colab and Supabase Vecs. You will be able to identify the celebrities who look most similar to you (or any other person). You will:
 
@@ -68,7 +65,3 @@ You can view the inserted items in the [Table Editor](https://supabase.com/dashb
 ## Next steps
 
 You can now start building your own applications with Vecs. Check our [examples](/docs/guides/ai#examples) for ideas.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/quickstarts/generate-text-embeddings.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-generating-embeddings',
-  title: 'Generate Embeddings',
-  subtitle: 'Generate text embeddings using Edge Functions + Transformer.js.',
-  breadcrumb: 'AI Quickstarts',
-}
+---
+id: 'ai-generating-embeddings'
+title: 'Generate Embeddings'
+subtitle: 'Generate text embeddings using Edge Functions + Transformer.js.'
+breadcrumb: 'AI Quickstarts'
+---
 
 This guide will walk you through how to generate high quality text embeddings in [Edge Functions](/docs/guides/functions) using Transformers.js. Inference is performed directly in Edge Functions using open source Hugging Face models, so no external API is required.
 
@@ -205,7 +203,3 @@ Let's build an Edge Function that will accept an input string and generate an em
 
 - Learn more about [embedding concepts](/docs/guides/ai/concepts)
 - [Store your embeddings](/docs/guides/ai/vector-columns) in a database
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/quickstarts/hello-world.mdx

@@ -1,12 +1,9 @@
-import { Admonition } from 'ui'
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-vecs-python-client',
-  title: 'Creating and managing collections',
-  subtitle: 'Connecting to your database with Colab.',
-  breadcrumb: 'AI Quickstarts',
-}
+---
+id: 'ai-vecs-python-client'
+title: 'Creating and managing collections'
+subtitle: 'Connecting to your database with Colab.'
+breadcrumb: 'AI Quickstarts'
+---
 
 This guide will walk you through a basic ["Hello World"](https://github.com/supabase/supabase/blob/master/examples/ai/vector_hello_world.ipynb) example using Colab and Supabase Vecs. You'll learn how to:
 
@@ -69,7 +66,3 @@ You can view the inserted items in the [Table Editor](https://supabase.com/dashb
 ## Next steps
 
 You can now start building your own applications with Vecs. Check our [examples](/docs/guides/ai#examples) for ideas.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/quickstarts/text-deduplication.mdx

@@ -1,13 +1,9 @@
-import { Admonition } from 'ui'
-import HuggingFaceDeployment from '~/components/MDX/ai/quickstart_hf_deployment.mdx'
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-vecs-python-client',
-  title: 'Semantic Text Deduplication',
-  subtitle: 'Finding duplicate movie reviews with Supabase Vecs.',
-  breadcrumb: 'AI Quickstarts',
-}
+---
+id: 'ai-vecs-python-client'
+title: 'Semantic Text Deduplication'
+subtitle: 'Finding duplicate movie reviews with Supabase Vecs.'
+breadcrumb: 'AI Quickstarts'
+---
 
 This guide will walk you through a ["Semantic Text Deduplication"](https://github.com/supabase/supabase/blob/master/examples/ai/semantic_text_deduplication.ipynb) example using Colab and Supabase Vecs. You'll learn how to find similar movie reviews using embeddings, and remove any that seem like duplicates. You will:
 
@@ -72,7 +68,3 @@ You can view the inserted items in the [Table Editor](https://supabase.com/dashb
 ## Next steps
 
 You can now start building your own applications with Vecs. Check our [examples](/docs/guides/ai#examples) for ideas.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/rag-with-permissions.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-rag-with-permissions',
-  title: 'RAG with Permissions',
-  subtitle: 'Fine-grain access control with Retrieval Augmented Generation.',
-  description: 'Implement fine-grain access control with retrieval augmented generation',
-  sidebar_label: 'RAG with Permissions',
-}
+---
+id: 'ai-rag-with-permissions'
+title: 'RAG with Permissions'
+subtitle: 'Fine-grain access control with Retrieval Augmented Generation.'
+description: 'Implement fine-grain access control with retrieval augmented generation'
+sidebar_label: 'RAG with Permissions'
+---
 
 Since pgvector is built on top of Postgres, you can implement fine-grain access control on your vector database using [Row Level Security (RLS)](/docs/guides/database/postgres/row-level-security). This means you can restrict which documents are returned during a vector similarity search to users that have access to them. Supabase also supports [Foreign Data Wrappers (FDW)](/docs/guides/database/extensions/wrappers/overview) which means you can use an external database or data source to determine these permissions if your user data doesn't exist in Supabase.
 
@@ -272,7 +270,3 @@ order by document_sections.embedding <#> embedding;
 There are endless approaches to this problem based on the complexities of each system. Luckily Postgres comes with all the primitives needed to provide access control in the way that works best for your project.
 
 If the examples above didn't fit your use case or you need to adjust them slightly to better fit your existing system, feel free to reach out to [support](https://supabase.com/dashboard/support/new) and we'll be happy to assist you.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/structured-unstructured.mdx

@@ -1,14 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'structured-unstructured-embeddings',
-  title: 'Structured and Unstructured',
-  description:
-    'Supabase is flexible enough to associate structured and unstructured metadata with embeddings.',
-  subtitle:
-    'Supabase is flexible enough to associate structured and unstructured metadata with embeddings.',
-  sidebar_label: 'Structured and unstructured embeddings',
-}
+---
+id: 'structured-unstructured-embeddings'
+title: 'Structured and Unstructured'
+description: 'Supabase is flexible enough to associate structured and unstructured metadata with embeddings.'
+subtitle: 'Supabase is flexible enough to associate structured and unstructured metadata with embeddings.'
+sidebar_label: 'Structured and unstructured embeddings'
+---
 
 Most vector stores treat metadata associated with embeddings like NoSQL, unstructured data. Supabase is flexible enough to store unstructured and structured metadata.
 
@@ -108,7 +104,3 @@ Both approaches create a table where you can store your embeddings and some meta
 - Unstructured metadata is best when fields are unknown/user-defined or when working with data interactively e.g. exploratory research
 
 Both approaches are valid, and the one you should choose depends on your use-case.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/vecs-python-client.mdx

@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  id: 'ai-vecs-python-client',
-  title: 'Python client',
-  subtitle: 'Manage unstructured vector stores in PostgreSQL.',
-  breadcrumb: 'AI Quickstarts',
-}
+---
+id: 'ai-vecs-python-client'
+title: 'Python client'
+subtitle: 'Manage unstructured vector stores in PostgreSQL.'
+breadcrumb: 'AI Quickstarts'
+---
 
 Supabase provides a Python client called [`vecs`](https://github.com/supabase/vecs) for managing unstructured vector stores. This client provides a set of useful tools for creating and querying collections in PostgreSQL using the [pgvector](/docs/guides/database/extensions/pgvector) extension.
 
@@ -85,7 +82,3 @@ For a more in-depth guide on `vecs` collections, see [API](/docs/guides/ai/pytho
 
 - Official Vecs Documentation: https://supabase.github.io/vecs/api
 - Source Code: https://github.com/supabase/vecs
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/vector-columns.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-vector-columns',
-  title: 'Vector columns',
-  description: 'Learn how to use vectors within your own Postgres tables',
-  sidebar_label: 'Vector columns',
-}
+---
+id: 'ai-vector-columns'
+title: 'Vector columns'
+description: 'Learn how to use vectors within your own Postgres tables'
+sidebar_label: 'Vector columns'
+---
 
 Supabase offers a number of different ways to store and query vectors within Postgres. The SQL included in this guide is applicable for clients in all programming languages. If you are a Python user see your [Python client options](/docs/guides/ai/python-clients) after reading the `Learn` section.
 
@@ -166,7 +164,3 @@ Vectors and embeddings can be used for much more than search. Learn more about e
 ### Indexes
 
 Once your vector table starts to grow, you will likely want to add an index to speed up queries. See [Vector indexes](/docs/guides/ai/vector-indexes) to learn how vector indexes work and how to create them.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/vector-indexes.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-vector-indexes',
-  title: 'Vector indexes',
-  description: 'Understanding vector indexes',
-  sidebar_label: 'Vector indexes',
-}
+---
+id: 'ai-vector-indexes'
+title: 'Vector indexes'
+description: 'Understanding vector indexes'
+sidebar_label: 'Vector indexes'
+---
 
 Once your vector table starts to grow, you will likely want to add an index to speed up queries. Without indexes, you'll be performing a sequential scan which can be a resource-intensive operation when you have many records.
 
@@ -33,7 +31,3 @@ Currently vectors with up to 2,000 dimensions can be indexed.
 ## Resources
 
 Read more about indexing on `pgvector`'s [GitHub page](https://github.com/pgvector/pgvector#indexing).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-hnsw-indexes',
-  title: 'HNSW indexes',
-  description: 'Understanding HNSW indexes in pgvector',
-  sidebar_label: 'HNSW indexes',
-}
+---
+id: 'ai-hnsw-indexes'
+title: 'HNSW indexes'
+description: 'Understanding HNSW indexes in pgvector'
+sidebar_label: 'HNSW indexes'
+---
 
 HNSW is an algorithm for approximate nearest neighbor search. It is a frequently used index type that can improve performance when querying highly-dimensional vectors, like those representing embeddings.
 
@@ -92,7 +90,3 @@ Unlike IVFFlat indexes, you are safe to build an HNSW index immediately after th
 ## Resources
 
 Read more about indexing on `pgvector`'s [GitHub page](https://github.com/pgvector/pgvector#indexing).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/ai/vector-indexes/ivf-indexes.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'ai-ivf-indexes',
-  title: 'IVFFlat indexes',
-  description: 'Understanding IVFFlat indexes in pgvector',
-  sidebar_label: 'IVFFlat indexes',
-}
+---
+id: 'ai-ivf-indexes'
+title: 'IVFFlat indexes'
+description: 'Understanding IVFFlat indexes in pgvector'
+sidebar_label: 'IVFFlat indexes'
+---
 
 IVFFlat is a type of vector index for approximate nearest neighbor search. It is a frequently used index type that can improve performance when querying highly-dimensional vectors, like those representing embeddings.
 
@@ -96,7 +94,3 @@ One important note with IVF indexes is that nearest neighbor search is approxima
 ## Resources
 
 Read more about indexing on `pgvector`'s [GitHub page](https://github.com/pgvector/pgvector#indexing).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/auth/auth-deep-dive/auth-deep-dive-jwts.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auth-deep-dive-jwts',
-  title: 'Part One: JWTs',
-  description: 'Supabase Auth Deep Dive Part 1 - JWTs',
-  video: 'https://www.youtube.com/v/v3Exg5YpJvE',
-}
+---
+id: 'auth-deep-dive-jwts'
+title: 'Part One: JWTs'
+description: 'Supabase Auth Deep Dive Part 1 - JWTs'
+video: 'https://www.youtube.com/v/v3Exg5YpJvE'
+---
 
 ### About
 
@@ -192,7 +190,3 @@ Now that you understand what JWTs are and where they're used in Supabase, you ca
 - [Part Four: GoTrue](../../learn/auth-deep-dive/auth-gotrue)
 - [Part Five: Google Oauth](../../learn/auth-deep-dive/auth-google-oauth)
 - Sign up for Supabase: [supabase.com/dashboard](https://supabase.com/dashboard)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/auth/auth-deep-dive/auth-google-oauth.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auth-google-oauth',
-  title: 'Part Five: Google OAuth',
-  description: 'Supabase Deep Dive Part 5: Google OAuth Provider',
-  video: 'https://www.youtube.com/v/_XM9ziOzWk4',
-}
+---
+id: 'auth-google-oauth'
+title: 'Part Five: Google OAuth'
+description: 'Supabase Deep Dive Part 5: Google OAuth Provider'
+video: 'https://www.youtube.com/v/_XM9ziOzWk4'
+---
 
 ### About
 
@@ -105,7 +103,3 @@ For any support please get in touch at beta at [supabase.com](https://supabase.c
 - Watch [Part Four: GoTrue](../../learn/auth-deep-dive/auth-gotrue)
   {/* <!-- - Watch [Part Five: Google Oauth](../../learn/auth-deep-dive/auth-google-oauth) --> */}
 - Sign up for Supabase: [supabase.com/dashboard](https://supabase.com/dashboard)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/auth/auth-deep-dive/auth-gotrue.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auth-gotrue',
-  title: 'Part Four: GoTrue',
-  description: 'Supabase Deep Dive Part 4: GoTrue Overview',
-}
+---
+id: 'auth-gotrue'
+title: 'Part Four: GoTrue'
+description: 'Supabase Deep Dive Part 4: GoTrue Overview'
+---
 
 ### About
 
@@ -79,7 +77,3 @@ In the next guide we'll be looking at how to setup external OAuth providers: Wat
   {/* <!-- Watch [Part Four: GoTrue](../../learn/auth-deep-dive/auth-gotrue) --> */}
 - Watch [Part Five: Google OAuth](../../learn/auth-deep-dive/auth-google-oauth)
 - Sign up for Supabase: [supabase.com/dashboard](https://supabase.com/dashboard)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/auth/auth-deep-dive/auth-policies.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auth-policies',
-  title: 'Part Three: Policies',
-  description: 'Supabase Auth Deep Dive Part 3: User Based Access Policies',
-  video: 'https://www.youtube.com/v/0LvCOlELs5U',
-}
+---
+id: 'auth-policies'
+title: 'Part Three: Policies'
+description: 'Supabase Auth Deep Dive Part 3: User Based Access Policies'
+video: 'https://www.youtube.com/v/0LvCOlELs5U'
+---
 
 ### About
 
@@ -186,7 +184,3 @@ You can get as creative as you like with these policies.
 - Watch [Part Four: GoTrue](../../learn/auth-deep-dive/auth-gotrue)
 - Watch [Part Five: Google Oauth](../../learn/auth-deep-dive/auth-google-oauth)
 - Sign up for Supabase: [supabase.com/dashboard](https://supabase.com/dashboard)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/auth/auth-deep-dive/auth-row-level-security.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auth-row-level-security',
-  title: 'Part Two: Row Level Security',
-  description: 'Supabase Auth Deep Dive Part Two - Row Level Security',
-  video: 'https://www.youtube.com/v/qY_iQ10IUhs',
-}
+---
+id: 'auth-row-level-security'
+title: 'Part Two: Row Level Security'
+description: 'Supabase Auth Deep Dive Part Two - Row Level Security'
+video: 'https://www.youtube.com/v/qY_iQ10IUhs'
+---
 
 ### About
 
@@ -135,7 +133,3 @@ In the next guide we will look at using Policies in combination with User Accoun
 - Watch [Part Four: GoTrue](../../learn/auth-deep-dive/auth-gotrue)
 - Watch [Part Five: Google Oauth](../../learn/auth-deep-dive/auth-google-oauth)
 - Sign up for Supabase: [supabase.com/dashboard](https://supabase.com/dashboard)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions.mdx

@@ -0,0 +1,170 @@
+---
+id: 'functions'
+title: 'Edge Functions'
+description: 'Globally distributed TypeScript functions.'
+subtitle: 'Globally distributed TypeScript functions.'
+sidebar_label: 'Overview'
+hideToc: true
+---
+
+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). Edge Functions are developed using [Deno](https://deno.com), which offers a few benefits to you as a developer:
+
+- It is open source.
+- It is portable. Supabase Edge Functions run locally, and on any other Deno-compatible platform (including self-hosted infrastructure).
+- It is TypeScript first and supports WASM.
+- Edge Functions are globally distributed for low-latency.
+
+<div className="not-prose">
+  <Button size="medium" asChild>
+    <a href="/docs/guides/functions/quickstart">Get started</a>
+  </Button>
+</div>
+
+## Examples
+
+Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.
+
+<div className="grid md:grid-cols-12 gap-4 not-prose">
+  {[
+    {
+      name: 'With supabase-js',
+      description: 'Use the Supabase client inside your Edge Function.',
+      href: '/guides/functions/auth',
+    },
+    {
+      name: 'Type-Safe SQL with Kysely',
+      description:
+        'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.',
+      href: '/guides/functions/kysely-postgres',
+    },
+    {
+      name: 'With CORS headers',
+      description: 'Send CORS headers for invoking from the browser.',
+      href: '/guides/functions/cors',
+    },
+    {
+      name: 'React Native with Stripe',
+      description: 'Full example for using Supabase and Stripe, with Expo.',
+      href: 'https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions',
+    },
+    {
+      name: 'Flutter with Stripe',
+      description: 'Full example for using Supabase and Stripe, with Flutter.',
+      href: 'https://github.com/supabase-community/flutter-stripe-payments-with-supabase-functions',
+    },
+    {
+      name: 'Building a RESTful Service API',
+      description:
+        'Learn how to use HTTP methods and paths to build a RESTful service for managing tasks.',
+      href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/restful-tasks/index.ts',
+    },
+    {
+      name: 'Working with Supabase Storage',
+      description: 'An example on reading a file from Supabase Storage.',
+      href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/read-storage/index.ts',
+    },
+    {
+      name: 'Open Graph Image Generation',
+      description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
+      href: '/guides/functions/examples/og-image',
+    },
+    {
+      name: 'OG Image Generation & Storage CDN Caching',
+      description: 'Cache generated images with Supabase Storage CDN.',
+      href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/og-image-with-storage-cdn',
+    },
+    {
+      name: 'Get User Location',
+      description: `Get user location data from user's IP address.`,
+      href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/location',
+    },
+    {
+      name: 'Cloudflare Turnstile',
+      description: `Protecting Forms with Cloudflare Turnstile.`,
+      href: '/guides/functions/examples/cloudflare-turnstile',
+    },
+    {
+      name: 'Connect to Postgres',
+      description: `Connecting to Postgres from Edge Functions.`,
+      href: '/guides/functions/connect-to-postgres',
+    },
+    {
+      name: 'Github Actions',
+      description: `Deploying Edge Functions with GitHub Actions.`,
+      href: '/guides/functions/examples/github-actions',
+    },
+    {
+      name: 'Oak Server Middleware',
+      description: `Request Routing with Oak server middleware.`,
+      href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/oak-server',
+    },
+    {
+      name: 'Hugging Face',
+      description: `Access 100,000+ Machine Learning models.`,
+      href: '/guides/ai/examples/huggingface-image-captioning',
+    },
+    {
+      name: 'OpenAI',
+      description: `Using OpenAI in Edge Functions.`,
+      href: '/guides/ai/examples/openai',
+    },
+    {
+      name: 'Stripe Webhooks',
+      description: `Handling signed Stripe Webhooks with Edge Functions.`,
+      href: '/guides/functions/examples/stripe-webhooks',
+    },
+    {
+      name: 'Send emails',
+      description: `Send emails in Edge Functions with Resend.`,
+      href: '/guides/functions/examples/send-emails',
+    },
+    {
+      name: 'Web Stream',
+      description: `Server-Sent Events in Edge Functions.`,
+      href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/streams',
+    },
+    {
+      name: 'Puppeteer',
+      description: `Generate screenshots with Puppeteer.`,
+      href: '/guides/functions/examples/screenshots',
+    },
+    {
+      name: 'Discord Bot',
+      description: `Building a Slash Command Discord Bot with Edge Functions.`,
+      href: '/guides/functions/examples/discord-bot',
+    },
+    {
+      name: 'Telegram Bot',
+      description: `Building a Telegram Bot with Edge Functions.`,
+      href: '/guides/functions/examples/telegram-bot',
+    },
+    {
+      name: 'Upload File',
+      description: `Process multipart/form-data.`,
+      href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/file-upload-storage',
+    },
+    {
+      name: 'Upstash Redis',
+      description: `Build an Edge Functions Counter with Upstash Redis.`,
+      href: '/guides/functions/examples/upstash-redis',
+    },
+    {
+      name: 'Rate Limiting',
+      description: `Rate Limiting Edge Functions with Upstash Redis.`,
+      href: '/guides/functions/examples/rate-limiting',
+    },
+    {
+      name: 'Slack Bot Mention Edge Function',
+      description: `Slack Bot handling Slack mentions in Edge Function`,
+      href: '/guides/functions/examples/slack-bot-mention',
+    },
+  ].map((x) => (
+    <div className="col-span-4" key={x.href}>
+      <Link href={x.href} passHref>
+        <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
+          {x.description}
+        </GlassPanel>
+      </Link>
+    </div>
+  ))}
+</div>

apps/docs/content/guides/functions/auth.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auth',
-  title: 'Integrating With Supabase Auth',
-  description: 'Supabase Edge Functions and Auth.',
-  subtitle: 'Supabase Edge Functions and Auth.',
-}
+---
+id: 'auth'
+title: 'Integrating With Supabase Auth'
+description: 'Supabase Edge Functions and Auth.'
+subtitle: 'Supabase Edge Functions and Auth.'
+---
 
 Edge Functions work seamlessly with [Supabase Auth](/docs/guides/auth).
 
@@ -86,7 +84,3 @@ Deno.serve(async (req: Request) => {
 ## Example code
 
 See a full [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

apps/docs/content/guides/functions/cicd-workflow.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'cicd-workflow',
-  title: 'Deploying with CI / CD pipelines',
-  description: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.',
-  subtitle: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.',
-  tocVideo: '6OMVWiiycLs',
-}
+---
+id: 'cicd-workflow'
+title: 'Deploying with CI / CD pipelines'
+description: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.'
+subtitle: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.'
+tocVideo: '6OMVWiiycLs'
+---
 
 You can use popular CI / CD tools like GitHub Actions, Bitbucket, and GitLab CI to automate Edge Function deployments.
 
@@ -116,7 +114,3 @@ verify_jwt = false
 ## Resources
 
 - 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

apps/docs/content/guides/functions/connect-to-postgres.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-postgres-on-the-edge',
-  title: 'Connecting directly to Postgres',
-  description: 'Connecting to Postgres from Edge Functions.',
-  subtitle: 'Connecting to Postgres from Edge Functions.',
-  tocVideo: 'cl7EuF1-RsY',
-}
+---
+id: 'examples-postgres-on-the-edge'
+title: 'Connecting directly to Postgres'
+description: 'Connecting to Postgres from Edge Functions.'
+subtitle: 'Connecting to Postgres from Edge Functions.'
+tocVideo: 'cl7EuF1-RsY'
+---
 
 Connect to your Postgres database from an Edge Function by using the `supabase-js` client.
 You can also use other Postgres clients like [Deno Postgres](https://deno.land/x/postgres)
@@ -115,7 +113,3 @@ DENO_TLS_CA_STORE=mozilla,system
     allowFullScreen
   ></iframe>
 </div>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/cors.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-cors',
-  title: 'CORS (Cross-Origin Resource Sharing) support for Invoking from the browser',
-  description: 'Add CORS headers to invoke Edge Functions from the browser.',
-}
+---
+id: 'functions-cors'
+title: 'CORS (Cross-Origin Resource Sharing) support for Invoking from the browser'
+description: 'Add CORS headers to invoke Edge Functions from the browser.'
+---
 
 To invoke edge functions from the browser, you need to handle [CORS Preflight](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) requests.
 
@@ -52,7 +50,3 @@ Deno.serve(async (req) => {
   }
 })
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/dart-edge.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-dart-edge',
-  title: 'Dart Edge',
-  description: 'Write your functions using Dart.',
-}
+---
+id: 'functions-dart-edge'
+title: 'Dart Edge'
+description: 'Write your functions using Dart.'
+---
 
 [Dart Edge](https://docs.dartedge.dev/), a project built and maintained by [Invertase](https://invertase.io/), enables Dart code to be run on different edge environments. This guide will walk you through how you can start using Dart Edge to write your backend code using Dart and run it on Supabase.
 
@@ -156,7 +154,3 @@ supabase functions deploy dart_edge
 ```
 
 You will be asked to provide the project reference of your Supabase instance to which you want to deploy the function. You can [link your local project to your Supabase instance](https://supabase.com/docs/guides/getting-started/local-development#link-your-project) to avoid having to provide the Supabase reference every time you deploy.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/debugging.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-debugging',
-  title: 'Debugging Edge Functions',
-  description: 'Debugging tips and Edge Function limitations.',
-  subtitle: 'Debugging tips and Edge Function limitations.',
-}
+---
+id: 'functions-debugging'
+title: 'Debugging Edge Functions'
+description: 'Debugging tips and Edge Function limitations.'
+subtitle: 'Debugging tips and Edge Function limitations.'
+---
 
 ## Logs & debugging
 
@@ -166,7 +164,3 @@ deno info --import-map=/path/to/import_map.json /path/to/function/index.ts
 - Memory limit for the function: 150 MB (heap) + 150 MB (external - array buffers/ WASM)
 - Wall clock limit: 400 s
 - CPU Time: 2 s
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/deploy.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-deploy',
-  title: 'Deploy to Production',
-  description: 'Deploy your Edge Functions to your remote Supabase Project.',
-  subtitle: 'Deploy your Edge Functions to your remote Supabase Project.',
-  tocVideo: '5OWH9c4u68M',
-}
+---
+id: 'functions-deploy'
+title: 'Deploy to Production'
+description: 'Deploy your Edge Functions to your remote Supabase Project.'
+subtitle: 'Deploy your Edge Functions to your remote Supabase Project.'
+tocVideo: '5OWH9c4u68M'
+---
 
 Once you have developed your Edge Functions locally, you can deploy them to your Supabase project.
 
@@ -101,7 +99,3 @@ const { data, error } = await supabase.functions.invoke('hello-world', {
 </CH.Code>
 
 You should receive the response `{ "message":"Hello Functions!" }`.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/cloudflare-turnstile.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-cloudflare-turnstile',
-  title: 'CAPTCHA support with Cloudflare Turnstile',
-  description: 'Protecting Forms with Cloudflare Turnstile.',
-  video: 'https://www.youtube.com/v/OwW0znboh60',
-}
+---
+id: 'examples-cloudflare-turnstile'
+title: 'CAPTCHA support with Cloudflare Turnstile'
+description: 'Protecting Forms with Cloudflare Turnstile.'
+video: 'https://www.youtube.com/v/OwW0znboh60'
+---
 
 <div class="video-container">
   <iframe
@@ -90,7 +88,3 @@ const { data, error } = await supabase.functions.invoke('cloudflare-turnstile',
   body: { token },
 })
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/discord-bot.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-discord-bot',
-  title: 'Building a Discord Bot',
-  description: 'Building a Slash Command Discord Bot with Edge Functions.',
-  video: 'https://www.youtube.com/v/J24Bvo_m7DM',
-}
+---
+id: 'examples-discord-bot'
+title: 'Building a Discord Bot'
+description: 'Building a Slash Command Discord Bot with Edge Functions.'
+video: 'https://www.youtube.com/v/J24Bvo_m7DM'
+---
 
 <div class="video-container">
   <iframe
@@ -172,7 +170,3 @@ Open Discord, type `/Promise` and press **Enter**.
 supabase functions serve discord-bot --no-verify-jwt --env-file ./supabase/.env.local
 ngrok http 54321
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/github-actions.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-github-actions',
-  title: 'GitHub Actions',
-  description: 'Deploying Edge Functions with GitHub Actions.',
-  video: 'https://www.youtube.com/v/l2KlzGrhB6w',
-}
+---
+id: 'examples-github-actions'
+title: 'GitHub Actions'
+description: 'Deploying Edge Functions with GitHub Actions.'
+video: 'https://www.youtube.com/v/l2KlzGrhB6w'
+---
 
 <div class="video-container">
   <iframe
@@ -53,7 +51,3 @@ Individual function configuration like [JWT verification](/docs/guides/cli/confi
 [functions.hello-world]
 verify_jwt = false
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/og-image.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-og-image',
-  title: 'Generating OG Images',
-  description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
-  video: 'https://www.youtube.com/v/jZgyOJGWayQ',
-}
+---
+id: 'examples-og-image'
+title: 'Generating OG Images'
+description: 'Generate Open Graph images with Deno and Supabase Edge Functions.'
+video: 'https://www.youtube.com/v/jZgyOJGWayQ'
+---
 
 <div class="video-container">
   <iframe
@@ -56,7 +54,3 @@ console.log('Hello from og-image Function!')
 
 Deno.serve(handler)
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/push-notifications.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Sending Push Notifications',
-  description: 'Send Push Notifications to your React Native iOS and Android apps using Expo.',
-  tocVideo: 'xYRbYG77M_o',
-}
+---
+title: 'Sending Push Notifications'
+description: 'Send Push Notifications to your React Native iOS and Android apps using Expo.'
+tocVideo: 'xYRbYG77M_o'
+---
 
 Push notifications are an important part of any mobile app. They allow you to send notifications to your users even when they are not using your app. This guide will show you how to send push notifications to different mobile app frameworks from your Supabase edge functions.
 
@@ -289,7 +287,3 @@ Push notifications are an important part of any mobile app. They allow you to se
 
   </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/rate-limiting.mdx

@@ -1,9 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Rate Limiting Edge Functions',
-  description: 'Rate Limiting Edge Functions with Upstash Redis.',
-}
+---
+title: 'Rate Limiting Edge Functions'
+description: 'Rate Limiting Edge Functions with Upstash Redis.'
+---
 
 <div class="video-container">
   <iframe
@@ -19,7 +17,3 @@ export const meta = {
 [Upstash](https://upstash.com/) provides an HTTP/REST based Redis client which is ideal for serverless use-cases and therefore works well with Supabase Edge Functions.
 
 Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/upstash-redis-ratelimit).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/screenshots.mdx

@@ -1,9 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Taking Screenshots with Puppeteer',
-  description: 'Take screenshots in Edge Functions with Puppeteer and Browserless.io.',
-}
+---
+title: 'Taking Screenshots with Puppeteer'
+description: 'Take screenshots in Edge Functions with Puppeteer and Browserless.io.'
+---
 
 <div class="video-container">
   <iframe
@@ -17,7 +15,3 @@ export const meta = {
 [Puppeteer](https://pptr.dev/) is a handy tool to programmatically take screenshots and generate PDFs. However, trying to do so in Edge Functions can be challenging due to the size restrictions. Luckily there is a [serverless browser offering available](https://www.browserless.io/) that we can connect to via websockets.
 
 Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/puppeteer).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/send-emails.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Sending Emails',
-  description: 'Sending emails from Edge Functions using the Resend API.',
-  tocVideo: 'Qf7XvL1fjvo',
-}
+---
+title: 'Sending Emails'
+description: 'Sending emails from Edge Functions using the Resend API.'
+tocVideo: 'Qf7XvL1fjvo'
+---
 
 Sending emails from Edge Functions using the [Resend API](https://resend.com/).
 
@@ -84,7 +82,3 @@ Open the endpoint URL to send an email:
 ### 4. Try it yourself
 
 Find the complete example on [GitHub](https://github.com/resendlabs/resend-supabase-edge-functions-example).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/slack-bot-mention.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'slack-bot-mention',
-  title: 'Slack Bot Mention Edge Function',
-  description: 'Building a Slack Bot that Handles Mentions.',
-}
+---
+id: 'slack-bot-mention'
+title: 'Slack Bot Mention Edge Function'
+description: 'Building a Slack Bot that Handles Mentions.'
+---
 
 The Slack Bot Mention Edge Function allows you to process mentions in Slack and respond accordingly.
 
@@ -64,7 +62,3 @@ Deno.serve(async (req) => {
   }
 })
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/stripe-webhooks.mdx

@@ -1,9 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Handling Stripe Webhooks',
-  description: 'Handling signed Stripe Webhooks with Edge Functions.',
-}
+---
+title: 'Handling Stripe Webhooks'
+description: 'Handling signed Stripe Webhooks with Edge Functions.'
+---
 
 <div class="video-container">
   <iframe
@@ -15,7 +13,3 @@ export const meta = {
 </div>
 
 Handling signed Stripe Webhooks with Edge Functions. [View on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/stripe-webhooks/index.ts).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/telegram-bot.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'examples-telegram-bot',
-  title: 'Building a Telegram Bot',
-  description: 'Building a Telegram Bot with Edge Functions.',
-  video: 'https://www.youtube.com/v/AWfE3a9J_uo',
-}
+---
+id: 'examples-telegram-bot'
+title: 'Building a Telegram Bot'
+description: 'Building a Telegram Bot with Edge Functions.'
+video: 'https://www.youtube.com/v/AWfE3a9J_uo'
+---
 
 <div class="video-container">
   <iframe
@@ -17,7 +15,3 @@ export const meta = {
 </div>
 
 Handle Telegram Bot Webhooks with the [grammY framework](https://grammy.dev/). grammY is an open source Telegram Bot Framework which makes it easy to handle and respond to incoming messages. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/telegram-bot).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/examples/upstash-redis.mdx

@@ -1,9 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Upstash Redis',
-  description: 'Build an Edge Functions Counter with Upstash Redis.',
-}
+---
+title: 'Upstash Redis'
+description: 'Build an Edge Functions Counter with Upstash Redis.'
+---
 
 <div class="video-container">
   <iframe
@@ -92,7 +90,3 @@ Navigate to http://localhost:54321/functions/v1/upstash-redis-counter.
 supabase functions deploy upstash-redis-counter --no-verify-jwt
 supabase secrets set --env-file supabase/functions/upstash-redis-counter/.env
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/import-maps.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-import-maps',
-  title: 'Managing dependencies',
-  description: 'Managing packages and dependencies.',
-  subtitle: 'Managing packages and dependencies.',
-  tocVideo: 'ILr3cneZuFk',
-}
+---
+id: 'functions-import-maps'
+title: 'Managing dependencies'
+description: 'Managing packages and dependencies.'
+subtitle: 'Managing packages and dependencies.'
+tocVideo: 'ILr3cneZuFk'
+---
 
 Developing with Edge Functions is similar to developing with Node.js, but with a few key differences. This guide will help you understand how to manage your dependencies.
 
@@ -100,7 +98,3 @@ In order for vscode to understand the imports correctly, you need to specify the
 ```
 
 For a full guide on developing with Deno in Visual Studio Code, see [this guide](https://deno.land/manual@v1.25.4/vscode_deno).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/kysely-postgres.mdx

@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'kysely-postgres',
-  title: 'Type-Safe SQL with Kysely',
-  description:
-    'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.',
-}
+---
+id: 'kysely-postgres'
+title: 'Type-Safe SQL with Kysely'
+description: 'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.'
+---
 
 <div class="video-container">
   <iframe
@@ -276,7 +273,3 @@ serve(async (_req) => {
   }
 })
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/local-development.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-local-development',
-  title: 'Local development',
-  description: 'Setup local development environment for Edge Functions.',
-  subtitle: 'Setup local development environment for Edge Functions.',
-}
+---
+id: 'functions-local-development'
+title: 'Local development'
+description: 'Setup local development environment for Edge Functions.'
+subtitle: 'Setup local development environment for Edge Functions.'
+---
 
 We recommend installing the Deno CLI and related tools for local development.
 
@@ -86,7 +84,3 @@ For example, see this `edge-functions.code-workspace` configuration for a CRA (c
   }
 }
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/quickstart.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-quickstart',
-  title: 'Developing Edge Functions locally',
-  description: 'Get started with Edge Functions on your local machine.',
-  subtitle: 'Get started with Edge Functions on your local machine.',
-  tocVideo: '5OWH9c4u68M',
-}
+---
+id: 'functions-quickstart'
+title: 'Developing Edge Functions locally'
+description: 'Get started with Edge Functions on your local machine.'
+subtitle: 'Get started with Edge Functions on your local machine.'
+tocVideo: '5OWH9c4u68M'
+---
 
 Let's create a basic Edge Function on your local machine and then invoke it using the Supabase CLI.
 
@@ -209,7 +207,3 @@ if (error instanceof FunctionsHttpError) {
 For data-intensive operations we recommend using [Database Functions](/docs/guides/database/functions), which are executed within your database and can be called remotely using the [REST and GraphQL API](/docs/guides/api).
 
 For use-cases which require low-latency we recommend [Edge Functions](/docs/guides/functions), which are globally-distributed and can be written in TypeScript.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/regional-invocation.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'function-regional-invocation',
-  title: 'Regional Invocations',
-  description: 'How to execute an Edge Functions in a particular region.',
-  subtitle: 'How to execute an Edge Function in a particular region.',
-}
+---
+id: 'function-regional-invocation'
+title: 'Regional Invocations'
+description: 'How to execute an Edge Functions in a particular region.'
+subtitle: 'How to execute an Edge Function in a particular region.'
+---
 
 Edge Functions are executed in the region closest to the user making the request. This helps to reduce network latency and provide faster responses to the user.
 
@@ -71,7 +69,3 @@ These are the currently supported region values you can provide for `x-region` h
 ## Handling regional outages
 
 If you explicitly specify the region via `x-region` header, requests **will NOT** be automatically re-routed to another region and you should consider temporarily changing regions during the outage.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/routing.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'function-routing',
-  title: 'Handling Routing in Functions',
-  description: 'How to handle custom routing within Edge Functions.',
-  subtitle: 'How to handle custom routing within Edge Functions.',
-}
+---
+id: 'function-routing'
+title: 'Handling Routing in Functions'
+description: 'How to handle custom routing within Edge Functions.'
+subtitle: 'How to handle custom routing within Edge Functions.'
+---
 
 Usually, an Edge Function is written to perform a single action (eg: write a record to the database). However, if your app's logic is split into multiple Edge Functions requests to each action may seem slower.
 This is because each Edge Function needs to be booted before serving a request (known as cold starts). If an action is performed less frequently (eg: deleting a record), there is a high-chance of that function experiencing a cold-start.
@@ -127,7 +125,3 @@ If you prefer not to use a web framework, you can directly use [URLPattern API](
 This is ideal for small apps with only couple of routes and you want to have a custom matching algorithm.
 
 Here is an example Edge Function using URL Patterns API: https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/restful-tasks/index.ts
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/schedule-functions.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'schedule-functions',
-  title: 'Scheduling Edge Functions',
-  description: 'Schedule Edge Functions with pg_cron.',
-}
+---
+id: 'schedule-functions'
+title: 'Scheduling Edge Functions'
+description: 'Schedule Edge Functions with pg_cron.'
+---
 
 <div class="video-container">
   <iframe
@@ -45,7 +43,3 @@ select
 
 - [`pg_net` extension](/docs/guides/database/extensions/pgnet)
 - [`pg_cron` extension](/docs/guides/database/extensions/pgcron)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/secrets.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions-secrets',
-  title: 'Managing Environment Variables',
-  description: 'Managing secrets and environment variables.',
-  subtitle: 'Managing secrets and environment variables.',
-}
+---
+id: 'functions-secrets'
+title: 'Managing Environment Variables'
+description: 'Managing secrets and environment variables.'
+subtitle: 'Managing secrets and environment variables.'
+---
 
 It's common that you will need to use sensitive information or environment-specific variables inside your Edge Functions. You can access these using Deno's built-in handler
 
@@ -89,7 +87,3 @@ To see all the secrets which you have set remotely, use [`supabase secrets list`
 ```bash
 supabase secrets list
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/storage-caching.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'storage-caching',
-  title: 'Integrating with Supabase Storage',
-  description: 'Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN).',
-  video: 'https://www.youtube.com/v/wW6L52v9Ldo',
-}
+---
+id: 'storage-caching'
+title: 'Integrating with Supabase Storage'
+description: 'Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN).'
+video: 'https://www.youtube.com/v/wW6L52v9Ldo'
+---
 
 <div class="video-container">
   <iframe
@@ -17,7 +15,3 @@ export const meta = {
 </div>
 
 Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN). [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/og-image-with-storage-cdn).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/functions/unit-test.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'unit-test',
-  title: 'Testing your Edge Functions',
-  description: 'Writing Unit Tests for Edge Functions using Deno Test',
-  subtitle: 'Writing Unit Tests for Edge Functions using Deno Test',
-}
+---
+id: 'unit-test'
+title: 'Testing your Edge Functions'
+description: 'Writing Unit Tests for Edge Functions using Deno Test'
+subtitle: 'Writing Unit Tests for Edge Functions using Deno Test'
+---
 
 Testing is an essential step in the development process to ensure the correctness and performance of your Edge Functions.
 
@@ -155,7 +153,3 @@ To locally test and debug Edge Functions, you can utilize the Supabase CLI. Let'
 ## Resources
 
 - Full guide on Testing Supabase Edge Functions on [Mansueli's tips](https://blog.mansueli.com/testing-supabase-edge-functions-with-deno-test)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'realtime',
-  title: 'Realtime',
-  description: 'Send and receive messages to connected clients.',
-  subtitle: 'Send and receive messages to connected clients.',
-  sidebar_label: 'Overview',
-}
+---
+id: 'realtime'
+title: 'Realtime'
+description: 'Send and receive messages to connected clients.'
+subtitle: 'Send and receive messages to connected clients.'
+hideToc: true
+---
 
 Supabase provides a globally distributed cluster of [Realtime](https://github.com/supabase/realtime) servers that enable the following functionality:
 
@@ -31,8 +29,6 @@ By default Realtime is disabled on your database. Let's turn on Realtime for a `
 3.  Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
 4.  Control which tables broadcast changes by selecting **Source** and toggling each table.
 
-{' '}
-
 <video width="99%" muted playsInline controls={true}>
   <source
     src="https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/docs/api/api-realtime.mp4"
@@ -146,7 +142,18 @@ export const examples = [
 Find the source code and documentation in the Supabase GitHub repository.
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {resources.map((x) => (
+  {[
+    {
+      name: 'Supabase Realtime',
+      description: 'View the source code.',
+      href: 'https://github.com/supabase/realtime',
+    },
+    {
+      name: 'Realtime: Multiplayer Edition',
+      description: 'Read more about Supabase Realtime.',
+      href: 'https://supabase.com/blog/supabase-realtime-multiplayer-general-availability',
+    },
+  ].map((x) => (
     <div className="col-span-6" key={x.href}>
       <Link href={x.href} passHref>
         <GlassPanel title={x.name}>{x.description}</GlassPanel>
@@ -154,20 +161,3 @@ Find the source code and documentation in the Supabase GitHub repository.
     </div>
   ))}
 </div>
-
-export const resources = [
-  {
-    name: 'Supabase Realtime',
-    description: 'View the source code.',
-    href: 'https://github.com/supabase/realtime',
-  },
-  {
-    name: 'Realtime: Multiplayer Edition',
-    description: 'Read more about Supabase Realtime.',
-    href: 'https://supabase.com/blog/supabase-realtime-multiplayer-general-availability',
-  },
-]
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page

apps/docs/content/guides/realtime/architecture.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'architecture',
-  title: 'Realtime Architecture',
-  description: 'Architecture of the Supabase Realtime service',
-  sidebar_label: 'Architecture',
-}
+---
+id: 'architecture'
+title: 'Realtime Architecture'
+description: 'Architecture of the Supabase Realtime service'
+sidebar_label: 'Architecture'
+---
 
 Realtime is a globally distributed Elixir cluster. Clients can connect to any node in the cluster via WebSockets and send messages to any other client connected to the cluster.
 
@@ -58,7 +56,3 @@ Realtime delivers changes by polling the replication slot and appending channel
 Subscription IDs are Erlang processes representing underlying sockets on the cluster. These IDs are globally unique and messages to processes are routed automatically by the Erlang virtual machine.
 
 After receiving results from the polling query, with subscription IDs appended, Realtime delivers records to those clients.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/bring-your-own-database.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'bring-your-own-database',
-  title: 'Bring Your Own Database',
-  description: 'Bring your own Postgres database to subscribe to Realtime changes',
-  sidebar_label: 'Bring Your Own Database',
-}
+---
+id: 'bring-your-own-database'
+title: 'Bring Your Own Database'
+description: 'Bring your own Postgres database to subscribe to Realtime changes'
+sidebar_label: 'Bring Your Own Database'
+---
 
 Realtime Database Changes works with any Postgres database that has logical replication enabled and the [wal2json](https://github.com/eulerto/wal2json) extension installed.
 
@@ -103,7 +101,3 @@ create role authenticated nologin noinherit;
 This role is hardcoded into Realtime migrations so it's required for the time being.
 
 </Admonition>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/broadcast.mdx

@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Broadcast',
-  subtitle: 'Send and receive messages using Realtime Broadcast',
-  description: 'Send and receive messages using Realtime Broadcast',
-  // breadcrumb: 'Realtime Broadcast Quickstart',
-}
+---
+title: 'Broadcast'
+subtitle: 'Send and receive messages using Realtime Broadcast'
+description: 'Send and receive messages using Realtime Broadcast'
+---
 
 Let's explore how to implement Realtime Broadcast to send messages between clients.
 
@@ -456,7 +453,3 @@ You can also send a Broadcast message by making an HTTP request to Realtime serv
 
   </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/concepts.mdx

@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'channels',
-  title: 'Realtime Concepts',
-  description: 'Learn about channels and other features in Supabase Realtime',
-  subtitle: 'Learn about channels and other features in Supabase Realtime',
-  sidebar_label: 'Concepts',
-}
+---
+id: 'channels'
+title: 'Realtime Concepts'
+description: 'Learn about channels and other features in Supabase Realtime'
+subtitle: 'Learn about channels and other features in Supabase Realtime'
+sidebar_label: 'Concepts'
+---
 
 You can use Supabase Realtime to build real-time applications with collaborative/multiplayer functionality. It includes 3 core features:
 
@@ -88,7 +86,3 @@ const allChanges = client
 Anyone with access to a valid JWT signed with the project's JWT secret is able to listen to your database's changes, unless tables have [Row Level Security](/docs/guides/auth/row-level-security) enabled and policies in place.
 
 Clients can choose to receive `INSERT`, `UPDATE`, `DELETE`, or `*` (all) changes for all changes in a schema, a table in a schema, or a column's value in a table. Your clients should only listen to tables in the `public` schema and you must first enable the tables you want your clients to listen to.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/guides/client-side-throttling.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'realtime',
-  title: 'Throttling messages',
-  description: 'Use client-side throttling to manage message frequency.',
-  subtitle: 'Use client-side throttling to manage message frequency.',
-}
+---
+id: 'realtime'
+title: 'Throttling messages'
+description: 'Use client-side throttling to manage message frequency.'
+subtitle: 'Use client-side throttling to manage message frequency.'
+---
 
 The Supabase clients include functionality for throttling messages.
 
@@ -73,7 +71,3 @@ Each Broadcast and Presence message counts towards your [Project Quotas](/docs/g
 It's common to unintentionally flood the Realtime service with messages. For example, tracking mouse movements without throttling would send hundreds of events per second. It's rare that you need so many messages. Updating a mouse movement even a few times per second is usually enough for the human eye.
 
 The throttling parameter protects against these unintended floods.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/postgres-changes.mdx

@@ -1,13 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-import RealtimeLimitsEstimater from '~/components/RealtimeLimitsEstimater'
-
-export const meta = {
-  title: 'Postgres Changes',
-  subtitle: 'Listen to Postgres changes using Supabase Realtime.',
-  description: 'Listen to Postgres changes using Supabase Realtime.',
-  // breadcrumb: 'Realtime Postgres Changes Quickstart',
-}
+---
+title: 'Postgres Changes'
+subtitle: 'Listen to Postgres changes using Supabase Realtime.'
+description: 'Listen to Postgres changes using Supabase Realtime.'
+---
 
 Let's explore how to use Realtime's Postgres Changes feature to listen to database events.
 
@@ -1368,12 +1363,8 @@ If you are using Postgres Changes at scale, you should consider using separate "
 
 Enter your database settings to estimate the maximum throughput for your instance:
 
-<RealtimeLimitsEstimater />
+<RealtimeLimitsEstimator />
 
 Don't forget to run your own benchmarks to make sure that the performance is acceptable for your use case.
 
 We are making many improvements to Realtime's Postgres Changes. If you are uncertain about the performance of your use case, please reach out using [Support Form](https://supabase.com/dashboard/support/new) and we will be happy to help you. We have a team of engineers that can advise you on the best solution for your use-case.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/presence.mdx

@@ -1,12 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Presence',
-  description: 'Share state between users with Realtime Presence.',
-  subtitle: 'Share state between users with Realtime Presence.',
-  // breadcrumb: 'Realtime Presence Quickstart',
-}
+---
+title: 'Presence'
+description: 'Share state between users with Realtime Presence.'
+subtitle: 'Share state between users with Realtime Presence.'
+---
 
 Let's explore how to implement Realtime Presence to track state between multiple users.
 
@@ -307,7 +303,3 @@ val channelC = supabase.channel("test") {
 
 </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/protocol.mdx

@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'protocol',
-  title: 'Realtime Protocol',
-  description: 'Understanding Realtime Protocol',
-}
+---
+id: 'protocol'
+title: 'Realtime Protocol'
+description: 'Understanding Realtime Protocol'
+---
 
 The Realtime Protocol is a set of message formats used for communication over a WebSocket connection between a Realtime client and server. These messages are used to initiate a connection, update access tokens, receive system status updates, and receive real-time updates from the Postgres database.
 
@@ -191,6 +189,3 @@ After a change to the presence state, such as a client joining or leaving, the s
    "ref": null
 }
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-export default Page

apps/docs/content/guides/realtime/quotas.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'quotas',
-  title: 'Realtime Quotas',
-  description: 'Understanding Realtime quotas',
-  sidebar_label: 'Quotas',
-}
+---
+id: 'quotas'
+title: 'Realtime Quotas'
+description: 'Understanding Realtime quotas'
+sidebar_label: 'Quotas'
+---
 
 Our cluster supports millions of concurrent connections and message throughput for production workloads.
 
@@ -67,7 +65,3 @@ Clients will be disconnected if your project is generating too many messages per
 ## Postgres changes payload quota
 
 When this quota is reached, the `new` and `old` record payloads only include the fields with a value size of less than or equal to 64 bytes.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/realtime-with-nextjs.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'realtime-with-nextjs',
-  title: 'Using Realtime with Next.js',
-  description: 'Client & Server Components in Next.js with Realtime Updates',
-  sidebar_label: 'Videos',
-}
+---
+id: 'realtime-with-nextjs'
+title: 'Using Realtime with Next.js'
+description: 'Client & Server Components in Next.js with Realtime Updates'
+sidebar_label: 'Videos'
+---
 
 In this guide, we explore the best ways to receive real-time Postgres changes with your Next.js application.
 We'll show both client and server side updates, and explore which option is best.
@@ -18,7 +16,3 @@ We'll show both client and server side updates, and explore which option is best
     allowFullScreen
   ></iframe>
 </div>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx

@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'subscribing-to-database-changes',
-  title: 'Subscribing to Database Changes',
-  description: 'Listen to database changes in real-time from your website or application.',
-  sidebar_label: 'Videos',
-}
+---
+id: 'subscribing-to-database-changes'
+title: 'Subscribing to Database Changes'
+description: 'Listen to database changes in real-time from your website or application.'
+sidebar_label: 'Videos'
+---
 
 Supabase allows you to subscribe to real-time changes on your database from your client application.
 
@@ -97,7 +95,3 @@ const channel = supabase
   - [Flutter](/docs/reference/dart/stream)
   - [Python](/docs/reference/python/subscribe)
   - [C#](/docs/reference/csharp/subscribe)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/pages/guides/ai/[[...slug]].tsx

@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+  return getGuidesStaticPaths('ai')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+  return getGuidesStaticProps('ai', args)
+}) satisfies GetStaticProps
+
+export default function AiGuide({
+  frontmatter,
+  mdxSource,
+  editLink,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const { hideToc, ...meta } = frontmatter
+
+  return (
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+      <MDXRemote {...mdxSource} components={components} />
+    </Layout>
+  )
+}

apps/docs/pages/guides/functions.mdx

@@ -1,178 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions',
-  title: 'Edge Functions',
-  description: 'Globally distributed TypeScript functions.',
-  subtitle: 'Globally distributed TypeScript functions.',
-  sidebar_label: 'Overview',
-  hide_table_of_contents: true,
-}
-
-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). Edge Functions are developed using [Deno](https://deno.com), which offers a few benefits to you as a developer:
-
-- It is open source.
-- It is portable. Supabase Edge Functions run locally, and on any other Deno-compatible platform (including self-hosted infrastructure).
-- It is TypeScript first and supports WASM.
-- Edge Functions are globally distributed for low-latency.
-
-<div className="not-prose">
-  <Button size="medium" asChild>
-    <a href="/docs/guides/functions/quickstart">Get started</a>
-  </Button>
-</div>
-
-## Examples
-
-Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.
-
-<div className="grid md:grid-cols-12 gap-4 not-prose">
-  {examples.map((x) => (
-    <div className="col-span-4" key={x.href}>
-      <Link href={x.href} passHref>
-        <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
-          {x.description}
-        </GlassPanel>
-      </Link>
-    </div>
-  ))}
-</div>
-
-export const examples = [
-  {
-    name: 'With supabase-js',
-    description: 'Use the Supabase client inside your Edge Function.',
-    href: '/guides/functions/auth',
-  },
-  {
-    name: 'Type-Safe SQL with Kysely',
-    description:
-      'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.',
-    href: '/guides/functions/kysely-postgres',
-  },
-  {
-    name: 'With CORS headers',
-    description: 'Send CORS headers for invoking from the browser.',
-    href: '/guides/functions/cors',
-  },
-  {
-    name: 'React Native with Stripe',
-    description: 'Full example for using Supabase and Stripe, with Expo.',
-    href: 'https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions',
-  },
-  {
-    name: 'Flutter with Stripe',
-    description: 'Full example for using Supabase and Stripe, with Flutter.',
-    href: 'https://github.com/supabase-community/flutter-stripe-payments-with-supabase-functions',
-  },
-  {
-    name: 'Building a RESTful Service API',
-    description:
-      'Learn how to use HTTP methods and paths to build a RESTful service for managing tasks.',
-    href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/restful-tasks/index.ts',
-  },
-  {
-    name: 'Working with Supabase Storage',
-    description: 'An example on reading a file from Supabase Storage.',
-    href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/read-storage/index.ts',
-  },
-  {
-    name: 'Open Graph Image Generation',
-    description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
-    href: '/guides/functions/examples/og-image',
-  },
-  {
-    name: 'OG Image Generation & Storage CDN Caching',
-    description: 'Cache generated images with Supabase Storage CDN.',
-    href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/og-image-with-storage-cdn',
-  },
-  {
-    name: 'Get User Location',
-    description: `Get user location data from user's IP address.`,
-    href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/location',
-  },
-  {
-    name: 'Cloudflare Turnstile',
-    description: `Protecting Forms with Cloudflare Turnstile.`,
-    href: '/guides/functions/examples/cloudflare-turnstile',
-  },
-  {
-    name: 'Connect to Postgres',
-    description: `Connecting to Postgres from Edge Functions.`,
-    href: '/guides/functions/connect-to-postgres',
-  },
-  {
-    name: 'Github Actions',
-    description: `Deploying Edge Functions with GitHub Actions.`,
-    href: '/guides/functions/examples/github-actions',
-  },
-  {
-    name: 'Oak Server Middleware',
-    description: `Request Routing with Oak server middleware.`,
-    href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/oak-server',
-  },
-  {
-    name: 'Hugging Face',
-    description: `Access 100,000+ Machine Learning models.`,
-    href: '/guides/ai/examples/huggingface-image-captioning',
-  },
-  {
-    name: 'OpenAI',
-    description: `Using OpenAI in Edge Functions.`,
-    href: '/guides/ai/examples/openai',
-  },
-  {
-    name: 'Stripe Webhooks',
-    description: `Handling signed Stripe Webhooks with Edge Functions.`,
-    href: '/guides/functions/examples/stripe-webhooks',
-  },
-  {
-    name: 'Send emails',
-    description: `Send emails in Edge Functions with Resend.`,
-    href: '/guides/functions/examples/send-emails',
-  },
-  {
-    name: 'Web Stream',
-    description: `Server-Sent Events in Edge Functions.`,
-    href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/streams',
-  },
-  {
-    name: 'Puppeteer',
-    description: `Generate screenshots with Puppeteer.`,
-    href: '/guides/functions/examples/screenshots',
-  },
-  {
-    name: 'Discord Bot',
-    description: `Building a Slash Command Discord Bot with Edge Functions.`,
-    href: '/guides/functions/examples/discord-bot',
-  },
-  {
-    name: 'Telegram Bot',
-    description: `Building a Telegram Bot with Edge Functions.`,
-    href: '/guides/functions/examples/telegram-bot',
-  },
-  {
-    name: 'Upload File',
-    description: `Process multipart/form-data.`,
-    href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/file-upload-storage',
-  },
-  {
-    name: 'Upstash Redis',
-    description: `Build an Edge Functions Counter with Upstash Redis.`,
-    href: '/guides/functions/examples/upstash-redis',
-  },
-  {
-    name: 'Rate Limiting',
-    description: `Rate Limiting Edge Functions with Upstash Redis.`,
-    href: '/guides/functions/examples/rate-limiting',
-  },
-  {
-    name: 'Slack Bot Mention Edge Function',
-    description: `Slack Bot handling Slack mentions in Edge Function`,
-    href: '/guides/functions/examples/slack-bot-mention',
-  },
-]
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page

apps/docs/pages/guides/functions/[[...slug]].tsx

@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+  return getGuidesStaticPaths('functions')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+  return getGuidesStaticProps('functions', args)
+}) satisfies GetStaticProps
+
+export default function FunctionsGuide({
+  frontmatter,
+  mdxSource,
+  editLink,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const { hideToc, ...meta } = frontmatter
+
+  return (
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+      <MDXRemote {...mdxSource} components={components} />
+    </Layout>
+  )
+}

apps/docs/pages/guides/realtime/[[...slug]].tsx

@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+  return getGuidesStaticPaths('realtime')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+  return getGuidesStaticProps('realtime', args)
+}) satisfies GetStaticProps
+
+export default function RealtimeGuide({
+  frontmatter,
+  mdxSource,
+  editLink,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const { hideToc, ...meta } = frontmatter
+
+  return (
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+      <MDXRemote {...mdxSource} components={components} />
+    </Layout>
+  )
+}

apps/docs/scripts/codemod/mdx-meta.mjs

@@ -7,7 +7,7 @@
  * Also deletes import and export statements.
  */
 
-let SUB_DIR = 'storage'
+let SUB_DIR = 'ai'
 
 import { parse } from 'acorn'
 import { fromMarkdown } from 'mdast-util-from-markdown'

apps/www/lib/redirects.js

@@ -2355,17 +2355,42 @@ module.exports = [
   },
   {
     permanent: true,
-    source: '/guides/database/large-datasets',
-    destination: '/guides/database/import-data',
+    source: '/docs/guides/database/large-datasets',
+    destination: '/docs/guides/database/import-data',
   },
   {
     permanent: true,
-    source: '/guides/api/rest/debugging-performance',
-    destination: '/guides/database/debugging-performance',
+    source: '/docs/guides/api/rest/debugging-performance',
+    destination: '/docs/guides/database/debugging-performance',
   },
   {
     permanent: true,
-    source: '/guides/api/rest/joins-and-nesting',
-    destination: '/guides/database/joins-and-nesting',
+    source: '/docs/guides/api/rest/joins-and-nesting',
+    destination: '/docs/guides/database/joins-and-nesting',
+  },
+  {
+    permanent: true,
+    source: '/docs/learn/auth-deep-dive/auth-deep-dive-jwts',
+    destination: '/docs/guides/auth/auth-deep-dive/auth-deep-dive-jwts',
+  },
+  {
+    permanent: true,
+    source: '/docs/learn/auth-deep-dive/auth-row-level-security',
+    destination: '/docs/guides/auth/auth-deep-dive/auth-row-level-security',
+  },
+  {
+    permanent: true,
+    source: '/docs/learn/auth-deep-dive/auth-policies',
+    destination: '/docs/guides/auth/auth-deep-dive/auth-policies',
+  },
+  {
+    permanent: true,
+    source: '/docs/learn/auth-deep-dive/auth-gotrue',
+    destination: '/docs/guides/auth/auth-deep-dive/auth-gotrue',
+  },
+  {
+    permanent: true,
+    source: '/docs/learn/auth-deep-dive/auth-google-oauth',
+    destination: '/docs/guides/auth/auth-deep-dive/auth-google-oauth',
   },
 ]