refactor: finish moving mdx to content directory (#21321)

2026-10-05 09:25:06 +03:00 · 2024-02-16 13:43:02 -05:00
1 parent 520e8970b6
commit b0b8b6b6e3
@@ -117,28 +117,6 @@ export default function Extensions() {
                    </p>
                  </GlassPanel>
                </Link>
-                // <div className="my-2 px-2 relative" key={extension.name}>
-                //   <div className="border rounded-sm p-4">
-                //     <h3 className="m-0">
-                //       <code className="text-sm">{extension.name}</code>
-                //     </h3>
-                //     <p className=" mt-4">
-                //       {extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
-                //     </p>
-                //     {extension.link && (
-                //       <Link href={extension.link}>
-                //         <a
-                //           target="_blank"
-                //           className="text-xs no-underline absolute top-2 right-4 bg-slate-200 hover:bg-slate-400 transition-colors p-2 rounded-md"
-                //         >
-                //           <span>
-                //             <IconLink size={14} className="" />
-                //           </span>
-                //         </a>
-                //       </Link>
-                //     )}
-                //   </div>
-                // </div>
              ))}
          </div>
        </div>
@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const ExtensionsInternal = lazy(() => import('./Extensions'))
+
+export function Extensions() {
+  return (
+    <Suspense>
+      <ExtensionsInternal />
+    </Suspense>
+  )
+}
@@ -1,5 +1,5 @@
-import KJUR from 'jsrsasign'
-import { useState } from 'react'
+import { KJUR } from 'jsrsasign'
+import { ChangeEvent, useState } from 'react'
 import { Button, CodeBlock, Input, Select } from 'ui'

 const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
@@ -10,8 +10,8 @@ const anonToken = `
 {
  "role": "anon",
  "iss": "supabase",
-  "iat": ${Math.floor(today / 1000)},
-  "exp": ${Math.floor(fiveYears / 1000)}
+  "iat": ${Math.floor(today.valueOf() / 1000)},
+  "exp": ${Math.floor(fiveYears.valueOf() / 1000)}
 }
 `.trim()

@@ -19,8 +19,8 @@ const serviceToken = `
 {
  "role": "service_role",
  "iss": "supabase",
-  "iat": ${Math.floor(today / 1000)},
-  "exp": ${Math.floor(fiveYears / 1000)}
+  "iat": ${Math.floor(today.valueOf() / 1000)},
+  "exp": ${Math.floor(fiveYears.valueOf() / 1000)}
 }
 `.trim()

@@ -31,7 +31,7 @@ export default function JwtGenerator({}) {
  const [token, setToken] = useState(anonToken)
  const [signedToken, setSignedToken] = useState('')

-  const handleKeySelection = (e) => {
+  const handleKeySelection = (e: ChangeEvent<HTMLSelectElement>) => {
    const val = e.target.value
    if (val == 'service') setToken(serviceToken)
    else setToken(anonToken)
@@ -55,7 +55,7 @@ export default function JwtGenerator({}) {
        />
      </div>
      <div className="grid mb-8">
-        <label for="service">Preconfigured Payload:</label>
+        <label htmlFor="service">Preconfigured Payload:</label>
        <Select id="service" style={{ fontFamily: 'monospace' }} onChange={handleKeySelection}>
          <Select.Option value="anon">ANON_KEY</Select.Option>
          <Select.Option value="service">SERVICE_KEY</Select.Option>
@@ -67,7 +67,7 @@ export default function JwtGenerator({}) {
        <Input.TextArea
          id="token"
          type="text"
-          rows="6"
+          rows={6}
          placeholder="A valid JWT Token"
          value={token}
          style={{ fontFamily: 'monospace' }}
@@ -82,7 +82,7 @@ export default function JwtGenerator({}) {
      {signedToken && (
        <div className="mt-8">
          <h4>Generated Token:</h4>
-          <CodeBlock language="bash" className="relative" style={{ fontFamily: 'monospace' }}>
+          <CodeBlock language="bash" className="relative font-mono">
            {signedToken}
          </CodeBlock>
        </div>
@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const Generator = lazy(() => import('./JwtGenerator'))
+
+export function JwtGenerator() {
+  return (
+    <Suspense>
+      <Generator />
+    </Suspense>
+  )
+}
@@ -22,7 +22,7 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
    {
      label: 'Database',
      icon: 'database',
-      href: '/guides/database',
+      href: '/guides/database/overview',
      level: 'database',
    },
    {
@@ -680,9 +680,9 @@ export const auth = {
 export const database: NavMenuConstant = {
  icon: 'database',
  title: 'Database',
-  url: '/guides/database',
+  url: '/guides/database/overview',
  items: [
-    { name: 'Overview', url: '/guides/database' },
+    { name: 'Overview', url: '/guides/database/overview' },
    {
      name: 'Fundamentals',
      url: undefined,
@@ -840,7 +840,7 @@ export const database: NavMenuConstant = {
        },
        {
          name: 'pg_net: Async Networking',
-          url: '/guides/database/extensions/pgnet',
+          url: '/guides/database/extensions/pg_net',
        },
        {
          name: 'pg_plan_filter: Restrict Total Cost',
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+import { logConstants } from 'shared-data'
+
+const sharedData = {
+  logConstants,
+}
+
+function SharedData({
+  data,
+  children,
+}: {
+  data: keyof typeof sharedData
+  children: (selectedData: (typeof sharedData)[keyof typeof sharedData]) => ReactNode
+}) {
+  const selectedData = sharedData[data]
+  return children(selectedData)
+}
+
+export { SharedData }
@@ -29,11 +29,13 @@ import { ProjectConfigVariables } from './ProjectConfigVariables'

 // Data wrappers
 import { NavData } from './NavData'
+import { SharedData } from './SharedData'

 // 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 KotlinProjectSetup from './MDX/kotlin_project_setup.mdx'
 import MigrationWarnings from './MDX/migration_warnings.mdx'
 import ProjectSetup from './MDX/project_setup.mdx'
 import QuickstartIntro from './MDX/quickstart_intro.mdx'
@@ -64,9 +66,12 @@ import {
  IconMenuStorage,
  IconMenuSwift,
 } from './Navigation/NavigationMenu/HomeMenuIcons'
+import { IconArrowDown, IconCheck } from 'ui'

 // Heavy/rare (lazy-loaded)
 import { AppleSecretGenerator } from './AppleSecretGenerator'
+import { Extensions } from './Extensions'
+import { JwtGenerator } from './JwtGenerator'
 import { Mermaid } from './Mermaid'
 import { RealtimeLimitsEstimator } from './RealtimeLimitsEstimator'

@@ -87,6 +92,7 @@ const components = {
  CliGlobalFlagsHandler: () => <CliGlobalFlagsHandler />,
  CodeBlock,
  DatabaseSetup,
+  Extensions,
  GetSessionWarning,
  GlassPanel,
  h2: (props: any) => (
@@ -105,7 +111,9 @@ const components = {
    </Heading>
  ),
  HuggingFaceDeployment,
+  IconCheck,
  IconMenuApi,
+  IconArrowDown,
  IconMenuAuth,
  IconMenuCli,
  IconMenuCsharp,
@@ -127,6 +135,8 @@ const components = {
  IconMenuSwift,
  IconPanel,
  Image: (props: any) => <ThemeImage fill className="object-contain" {...props} />,
+  JwtGenerator,
+  KotlinProjectSetup,
  Link,
  Mermaid,
  MigrationWarnings,
@@ -139,6 +149,7 @@ const components = {
  RealtimeLimitsEstimator,
  RefHeaderSection: (props: any) => <RefHeaderSection {...props} />,
  RefSubLayout,
+  SharedData,
  SocialProviderSettingsSupabase,
  SocialProviderSetup,
  StepHikeCompact,
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'api',
-  title: 'REST API',
-  description: 'Auto-generating REST API.',
-  sidebar_label: 'Overview',
-  video: 'https://www.youtube.com/v/rPAJJFdtPw0',
-}
+---
+id: 'api'
+title: 'REST API'
+description: 'Auto-generating REST API.'
+sidebar_label: 'Overview'
+video: 'https://www.youtube.com/v/rPAJJFdtPw0'
+---

 Supabase auto-generates an API directly from your database schema allowing you to connect to your database through a restful interface, directly from the browser.

@@ -53,7 +51,3 @@ You can find the API URL and Keys in the [Dashboard](https://supabase.com/dashbo
    type="video/mp4"
  />
 </video>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'api-keys',
-  title: 'Understanding API Keys',
-  description: 'Securing your Data API with Postgres Row Level Security.',
-}
+---
+id: 'api-keys'
+title: 'Understanding API Keys'
+description: 'Securing your Data API with Postgres Row Level Security.'
+---

 Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://supabase.com/dashboard/project/_/settings/api).

@@ -66,7 +64,3 @@ select

 We have [partnered with GitHub](https://github.blog/changelog/2022-03-28-supabase-is-now-a-github-secret-scanning-partner/) to scan for Supabase `service_role` keys pushed to public repositories.
 If they detect any keys with service_role privileges being pushed to GitHub, they will forward the API key to us, so that we can automatically revoke the detected secrets and notify you, protecting your data against malicious actors.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'creating-routes',
-  title: 'Creating API Routes',
-  description:
-    'API routes are automatically created when you create Postgres Tables, Views, or Functions.',
-}
+---
+id: 'creating-routes'
+title: 'Creating API Routes'
+description: 'API routes are automatically created when you create Postgres Tables, Views, or Functions.'
+---

 API routes are automatically created when you create Postgres Tables, Views, or Functions.

@@ -114,7 +111,3 @@ JS Reference: [select()](/docs/reference/javascript/select),
 [upsert()](/docs/reference/javascript/upsert),
 [delete()](/docs/reference/javascript/delete),
 [rpc()](/docs/reference/javascript/rpc) (call Postgres functions).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'data-apis',
-  title: 'Working with the Data APIs',
-  subtitle: 'Perform database operations using REST API calls',
-}
+---
+id: 'data-apis'
+title: 'Working with the Data APIs'
+subtitle: 'Perform database operations using REST API calls'
+---

 Supabase's auto-generated Data APIs let you perform operations on your database using REST API calls. You can read, write, and delete data, and even call functions, without writing an intermediate layer to translate between your app and Postgres.

@@ -32,7 +30,3 @@ For examples of how to perform common database operations, see the Database sect
 - <Link href="/guides/database/debugging-performance" id="debugging-performance-issues">
    Debugging performance issues
  </Link>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Build an API route in less than 2 minutes.',
-  subtitle: 'Create your first API route by creating a table called `todos` to store tasks.',
-  breadcrumb: 'API Quickstart',
-}
+---
+title: 'Build an API route in less than 2 minutes.'
+subtitle: 'Create your first API route by creating a table called `todos` to store tasks.'
+breadcrumb: 'API Quickstart'
+hideToc: true
+---

 Let's create our first REST route which we can query using `cURL` or the browser.

@@ -173,7 +171,3 @@ response = supabase.table('todos').select("*").execute()

 </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'auto-docs',
-  title: 'Auto-generated documentation',
-  description: 'Supabase provides documentation that updates automatically.',
-}
+---
+id: 'auto-docs'
+title: 'Auto-generated documentation'
+description: 'Supabase provides documentation that updates automatically.'
+---

 Supabase generates documentation in the [Dashboard](https://supabase.com/dashboard) which updates as you make database changes.

@@ -18,7 +16,3 @@ Supabase generates documentation in the [Dashboard](https://supabase.com/dashboa
    type="video/mp4"
  />
 </video>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'client-libs',
-  title: 'Client Libraries',
-  description: 'Supabase provides several client libraries for the REST and Realtime APIs.',
-  video: 'https://www.youtube.com/v/7CqlTU9aOR4',
-}
+---
+id: 'client-libs'
+title: 'Client Libraries'
+description: 'Supabase provides several client libraries for the REST and Realtime APIs.'
+video: 'https://www.youtube.com/v/7CqlTU9aOR4'
+---

 Supabase provides client libraries for the REST and Realtime APIs. Some libraries are officially supported, and some are contributed by the community.

@@ -27,7 +25,3 @@ Supabase provides client libraries for the REST and Realtime APIs. Some librarie
 | Ruby                    | [supabase-rb](https://github.com/supabase-community/supabase-rb)                 |                                                                 |
 | Swift                   | [supabase-swift](https://github.com/supabase-community/supabase-swift)           | [Docs](https://supabase.com/docs/reference/swift/introduction)  |
 | Godot Engine (GDScript) | [supabase-gdscript](https://github.com/supabase-community/godot-engine.supabase) |                                                                 |
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'generating-types',
-  title: 'Generating TypeScript Types',
-  description: 'How to generate types for your API and Supabase libraries.',
-  subtitle: 'How to generate types for your API and Supabase libraries.',
-  tocVideo: '/7CqlTU9aOR4',
-}
+---
+id: 'generating-types'
+title: 'Generating TypeScript Types'
+description: 'How to generate types for your API and Supabase libraries.'
+subtitle: 'How to generate types for your API and Supabase libraries.'
+tocVideo: '/7CqlTU9aOR4'
+---

 Supabase APIs are generated from your database, which means that we can use database introspection to generate type-safe API definitions.

@@ -243,7 +241,3 @@ Alternatively, you can use a community-supported GitHub action: [generate-supaba
 ## Resources

 - [Generating Supabase types with GitHub Actions](https://blog.esteetey.dev/how-to-create-and-test-a-github-action-that-generates-types-from-supabase-database)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'securing-your-api',
-  title: 'Securing your API',
-  description: 'Securing your Data API with Postgres Row Level Security.',
-}
+---
+id: 'securing-your-api'
+title: 'Securing your API'
+description: 'Securing your Data API with Postgres Row Level Security.'
+---

 The data APIs are designed to work with Postgres Row Level Security (RLS). If you use [Supabase Auth](/docs/guides/auth), you can restrict data based on the logged-in user.

@@ -349,7 +347,3 @@ notify pgrst, 'reload config';
 </TabPanel>

 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'using-custom-schemas',
-  title: 'Using Custom Schemas',
-  description: 'You need additional steps to use custom database schemas with data APIs.',
-}
+---
+id: 'using-custom-schemas'
+title: 'Using Custom Schemas'
+description: 'You need additional steps to use custom database schemas with data APIs.'
+---

 By default, your database has a `public` schema which is automatically exposed on data APIs. You can also expose custom database schemas - to do so you need to follow these steps:

@@ -56,7 +54,3 @@ curl '<SUPABASE_URL>/rest/v1/todos' \

 </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -0,0 +1,37 @@
+---
+id: 'cli'
+title: 'Local Dev with CLI'
+description: 'Developing locally using the Supabase CLI.'
+subtitle: 'Developing locally using the Supabase CLI.'
+sidebar_label: 'Overview'
+---
+
+You can use the Supabase CLI to run the entire Supabase stack locally on your machine, simply by running `supabase init` and then `supabase start`.
+
+The Supabase CLI provides tools to develop your project locally, deploy to the Supabase Platform, handle database migrations, and generate types directly from your database schema.
+
+## Resources
+
+<div className="grid md:grid-cols-12 gap-4 not-prose">
+  {[
+    {
+      name: 'Supabase CLI',
+      description:
+        'The Supabase CLI provides tools to develop manage your Supabase projects from your local machine.',
+      href: 'https://github.com/supabase/cli',
+    },
+    {
+      name: 'GitHub Action',
+      description: ' A GitHub action for interacting with your Supabase projects using the CLI.',
+      href: 'https://github.com/supabase/setup-cli',
+    },
+  ].map((x) => (
+    <div className="col-span-6" 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>
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'customizing-email-templates',
-  title: 'Customizing email templates',
-  description: 'Customizing local email templates using config.toml.',
-  subtitle: 'Customizing local email templates using config.toml.',
-}
+---
+id: 'customizing-email-templates'
+title: 'Customizing email templates'
+description: 'Customizing local email templates using config.toml.'
+subtitle: 'Customizing local email templates using config.toml.'
+---

 You can customize the email templates for local development [using the `config.toml` settings](/docs/guides/cli/config#auth-config).

@@ -118,7 +116,3 @@ Contains the new user's email address. This is only available in the `email_chan
 ## Deploying email templates

 These settings are only for local development. To update your hosted project, please copy the templates into the [Email Templates](/dashboard/project/_/auth/templates) section of the Dashboard.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Supabase CLI',
-  description:
-    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
-  subtitle:
-    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
-}
+---
+title: 'Supabase CLI'
+description: 'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.'
+subtitle: 'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.'
+---

 You can use the Supabase CLI to run the entire Supabase stack locally on your machine, simply by running `supabase init` (to create a new local project) and then `supabase start`.

@@ -186,7 +182,3 @@ The CLI provides a number of commands to help you develop your project locally a
 - [Auth management](/docs/reference/cli/supabase-sso)
 - [Types Generators](/docs/reference/cli/supabase-gen)
 - [Testing](/docs/reference/cli/supabase-test)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,13 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'local-development',
-  title: 'Local Development',
-  description: 'How to use Supabase on your local development machine.',
-  subtitle: 'How to use Supabase on your local development machine.',
-  video: 'https://www.youtube-nocookie.com/v/vyHyYpvjaks',
-  tocVideo: 'vyHyYpvjaks',
-}
+---
+id: 'local-development'
+title: 'Local Development'
+description: 'How to use Supabase on your local development machine.'
+subtitle: 'How to use Supabase on your local development machine.'
+video: 'https://www.youtube-nocookie.com/v/vyHyYpvjaks'
+tocVideo: 'vyHyYpvjaks'
+---

 Supabase is a flexible platform that lets you decide how you want to build your projects. You can use the Dashboard directly to get up and running quickly, or use a proper local setup. We suggest you work locally and deploy your changes to a linked project on the [Supabase Platform](https://app.supabase.io/).

@@ -479,7 +477,3 @@ The local development environment is not as feature-complete as the Supabase Pla

 - You cannot update your project settings in the Dashboard. This must be done using the local config file.
 - The CLI version determines the local version of Studio used, so make sure you keep your local [Supabase CLI up to date](https://github.com/supabase/cli#getting-started). We're constantly adding new features and bug fixes.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'managing-config',
-  title: 'Managing config and secrets',
-  description: 'Managing local configuration using config.toml.',
-}
+---
+id: 'managing-config'
+title: 'Managing config and secrets'
+description: 'Managing local configuration using config.toml.'
+---

 The Supabase CLI uses a `config.toml` file to manage local configuration. This file is located in the `supabase` directory of your project.

@@ -44,7 +42,3 @@ client_id = "env(GITHUB_CLIENT_ID)"
 secret = "env(GITHUB_SECRET)"
 redirect_uri = "" # Overrides the default auth redirectUrl.
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,13 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'managing-environments',
-  title: 'Managing Environments',
-  description: 'Manage multiple environments using Database Migrations and GitHub Actions.',
-  subtitle: 'Manage multiple environments using Database Migrations and GitHub Actions.',
-  video: 'https://www.youtube-nocookie.com/v/rOLyOsBR1Uc',
-  tocVideo: 'rOLyOsBR1Uc',
-}
+---
+id: 'managing-environments'
+title: 'Managing Environments'
+description: 'Manage multiple environments using Database Migrations and GitHub Actions.'
+subtitle: 'Manage multiple environments using Database Migrations and GitHub Actions.'
+video: 'https://www.youtube-nocookie.com/v/rOLyOsBR1Uc'
+tocVideo: 'rOLyOsBR1Uc'
+---

 This guide shows you how to set up your local Supabase development environment that integrates with GitHub Actions to automatically test and release schema changes to staging and production Supabase projects.

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

 Once validated locally, commit your changes to Git and push to GitHub.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,13 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'seeding-your-database',
-  title: 'Seeding your database',
-  description:
-    'Populate your database with initial data for reproducible environments across local and testing.',
-  subtitle:
-    'Populate your database with initial data for reproducible environments across local and testing.',
-}
+---
+id: 'seeding-your-database'
+title: 'Seeding your database'
+description: 'Populate your database with initial data for reproducible environments across local and testing.'
+subtitle: 'Populate your database with initial data for reproducible environments across local and testing.'
+---

 When you run `supabase init` we create an empty `seed.sql` file in the root of the `supabase` folder. You can use this to populate your database with seed data.

@@ -116,7 +112,3 @@ Whenever your database structure changes, `@snaplet/seed` will need to be regene
 in sync with your new database structure. You can do this by running `npx snaplet generate`.

 For more information, check out Snaplet's [seed documentation](https://docs.snaplet.dev/core-concepts/seed)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'testing-emails-locally',
-  title: 'Testing and linting',
-  description: 'Using the CLI to test your Supabase project.',
-  subtitle: 'Using the CLI to test your Supabase project.',
-}
+---
+id: 'testing-emails-locally'
+title: 'Testing and linting'
+description: 'Using the CLI to test your Supabase project.'
+subtitle: 'Using the CLI to test your Supabase project.'
+---

 The Supabase CLI provides a set of tools to help you test and lint your Postgres database and Edge` Functions.

@@ -76,7 +74,3 @@ This is powered by [plpgsql_check](https://github.com/okbob/plpgsql_check), whic
 - checks `EXECUTE` statements against SQL injection vulnerability

 Check the Reference Docs for [more information](/docs/reference/cli/supabase-db-lint).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'arrays',
-  title: 'Working With Arrays',
-  description: 'How to use arrays in PostgreSQL and the Supabase API.',
-}
+---
+id: 'arrays'
+title: 'Working With Arrays'
+description: 'How to use arrays in PostgreSQL and the Supabase API.'
+---

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

@@ -166,7 +164,3 @@ returns:
 - [Supabase JS Client](https://github.com/supabase/supabase-js)
 - [Supabase Account - Free Plan OK](https://supabase.com)
 - [PostgreSQL Arrays](https://www.postgresql.org/docs/15/arrays.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,13 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { DateFormat } from '~/components/DateFormat'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  id: 'connecting-to-postgres',
-  title: 'Connecting to your database',
-  description: 'Explore the options for connecting to your Postgres database.',
-  subtitle: 'Explore the options for connecting to your Postgres database.',
-}
+---
+id: 'connecting-to-postgres'
+title: 'Connecting to your database'
+description: 'Explore the options for connecting to your Postgres database.'
+subtitle: 'Explore the options for connecting to your Postgres database.'
+---

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

@@ -378,7 +374,3 @@ Connection pooler logs are found [here](https://supabase.com/dashboard/project/_

 - Terminating with reason :client_termination when state was :busy
  This error happens when the client terminates the connection before the connection with the database is completed.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'debugging-performance',
-  title: 'Debugging performance issues',
-  description: 'Debug slow-running queries using the Postgres execution planner.',
-  subtitle: 'Debug slow-running queries using the Postgres execution planner.',
-}
+---
+id: 'debugging-performance'
+title: 'Debugging performance issues'
+description: 'Debug slow-running queries using the Postgres execution planner.'
+subtitle: 'Debug slow-running queries using the Postgres execution planner.'
+---

 `explain()` is a method that provides the Postgres `EXPLAIN` execution plan of a query. It is a powerful tool for debugging slow queries and understanding how Postgres will execute a given query. This feature is applicable to any query, including those made through `rpc()` or write operations.

@@ -109,7 +107,3 @@ set pgrst.db_pre_request to '';
 -- reload the config
 notify pgrst, 'reload config';
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import Extensions from '~/components/Extensions'
-
-export const meta = {
-  id: 'extensions',
-  title: 'Postgres Extensions Overview',
-  description: 'Using Postgres extensions.',
-}
+---
+id: 'extensions'
+title: 'Postgres Extensions Overview'
+description: 'Using Postgres extensions.'
+---

 Extensions are exactly as they sound - they "extend" the database with functionality which isn't part of the Postgres core.
 Supabase has pre-installed some of the most useful open source extensions.
@@ -66,7 +63,3 @@ If a new version of an extension becomes available on Supabase, you need to init
 Supabase is pre-configured with over 50 extensions. You can also install your own SQL extensions directly in the database through our SQL editor.

 <Extensions />
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'http',
-  title: 'http: RESTful Client',
-  description: 'An HTTP Client for PostgreSQL Functions.',
-  video: 'https://www.youtube.com/v/rARgrELRCwY',
-}
+---
+id: 'http'
+title: 'http: RESTful Client'
+description: 'An HTTP Client for PostgreSQL Functions.'
+video: 'https://www.youtube.com/v/rARgrELRCwY'
+---

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

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

 - Official [`http` GitHub Repository](https://github.com/pramsey/pgsql-http)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'hypopg',
-  title: 'HypoPG: Hypothetical indexes',
-  description: 'Quickly check if an index can be used without creating it.',
-}
+---
+id: 'hypopg'
+title: 'HypoPG: Hypothetical indexes'
+description: 'Quickly check if an index can be used without creating it.'
+---

 `HypoPG` is PostgreSQL extension for creating hypothetical/virtual indexes. HypoPG allows users to rapidly create hypothetical/virtual indexes that have no resource cost (CPU, disk, memory) that are visible to the PostgreSQL query planner.

@@ -115,7 +113,3 @@ create index on account(id);
 ## Resources

 - Official [HypoPG documentation](https://hypopg.readthedocs.io/en/rel1_stable/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'index-advisor',
-  title: 'index_advisor: query optimization',
-  description: 'Automatically optimize SQL queries',
-}
+---
+id: 'index-advisor'
+title: 'index_advisor: query optimization'
+description: 'Automatically optimize SQL queries'
+---

 [Index advisor](https://database.dev/olirice/index_advisor) is a Postgres extension for recommending indexes to improve query performance.

@@ -156,7 +154,3 @@ from

 - dbdev [`index_advisor`](https://database.dev/olirice/index_advisor) docs
 - dbdev [Github Repository](https://github.com/supabase/dbdev)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg-safeupdate',
-  title: 'pg-safeupdate: Required Where Clauses',
-  description: 'Requires a where clause for update and delete',
-}
+---
+id: 'pg-safeupdate'
+title: 'pg-safeupdate: Required Where Clauses'
+description: 'Requires a where clause for update and delete'
+---

 [pg-safeupdate](https://github.com/eradman/pg-safeupdate) is a PostgreSQL extension designed to prevent users from accidentally updating or deleting too many records in a single statement by requiring a "where" clause in all update and delete statements.

@@ -54,7 +52,3 @@ update employees set date_of_birth = '1987-01-28' where id = 12345;
 ## Resources

 - Official [pg-safeupdate documentation](https://github.com/eradman/pg-safeupdate)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_cron',
-  title: 'pg_cron: Job Scheduling',
-  description:
-    'pgnet: a simple cron-based job scheduler for PostgreSQL that runs inside the database.',
-}
+---
+id: 'pg_cron'
+title: 'pg_cron: Job Scheduling'
+description: 'pgnet: a simple cron-based job scheduler for PostgreSQL that runs inside the database.'
+---

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

@@ -168,7 +165,3 @@ The records in cron.job_run_details are not cleaned automatically which will tak
 ## Resources

 - [pg_cron GitHub Repository](https://github.com/citusdata/pg_cron)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_graphql',
-  title: 'pg_graphql: GraphQL for PostgreSQL',
-  description: 'A GraphQL Interface for PostgreSQL',
-}
+---
+id: 'pg_graphql'
+title: 'pg_graphql: GraphQL for PostgreSQL'
+description: 'A GraphQL Interface for PostgreSQL'
+---

 [pg_graphql](https://supabase.github.io/pg_graphql/) is PostgreSQL extension for interacting with the database using [GraphQL](https://graphql.org) instead of SQL.

@@ -111,7 +109,3 @@ Note that `pg_graphql` fully supports schema introspection so you can connect an
 ## Resources

 - Official [`pg_graphql` documentation](https://github.com/supabase/pg_graphql)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_hashids',
-  title: 'pg_hashids: Short UIDs',
-  description: 'Generate Short UIDs from Numbers',
-}
+---
+id: 'pg_hashids'
+title: 'pg_hashids: Short UIDs'
+description: 'Generate Short UIDs from Numbers'
+---

 [pg_hashids](https://github.com/iCyberon/pg_hashids) provides a secure way to generate short, unique, non-sequential ids from numbers. The hashes are intended to be small, easy-to-remember identifiers that can be used to obfuscate data (optionally) with a password, alphabet, and salt. For example, you may wish to hide data like user IDs, order numbers, or tracking codes in favor of `pg_hashid`'s unique identifers.

@@ -76,7 +74,3 @@ To reverse the `short_id` back into an `id`, there is an equivalent function nam
 ## Resources

 - Official [pg_hashids documentation](https://github.com/iCyberon/pg_hashids)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_jsonschema',
-  title: 'pg_jsonschema: JSON Schema Validation',
-  description: 'Validate json/jsonb with JSON Schema in PostgreSQL.',
-}
+---
+id: 'pg_jsonschema'
+title: 'pg_jsonschema: JSON Schema Validation'
+description: 'Validate json/jsonb with JSON Schema in PostgreSQL.'
+---

 [JSON Schema](https://json-schema.org) is a language for annotating and validating JSON documents. [`pg_jsonschema`](https://github.com/supabase/pg_jsonschema) is a PostgreSQL extension that adds the ability to validate PostgreSQL's built-in `json` and `jsonb` data types against JSON Schema documents.

@@ -106,7 +104,3 @@ values ('{"tags": [1, 3]}');
 ## Resources

 - Official [`pg_jsonschema` documentation](https://github.com/supabase/pg_jsonschema)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_net',
-  title: 'pg_net: Async Networking',
-  description: 'pg_net: an async networking extension for PostgreSQL.',
-}
+---
+id: 'pg_net'
+title: 'pg_net: Async Networking'
+description: 'pg_net: an async networking extension for PostgreSQL.'
+---

 <Admonition type="caution">

@@ -450,7 +448,3 @@ More examples can be seen in the [Extension's GitHub page](https://github.com/su

 - Source code: [github.com/supabase/pg_net](https://github.com/supabase/pg_net/)
 - Official Docs: [github.com/supabase/pg_net](https://github.com/supabase/pg_net/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_plan_filter',
-  title: 'pg_plan_filter: Restrict Total Cost',
-  description: 'Block queries over a total cost limit',
-}
+---
+id: 'pg_plan_filter'
+title: 'pg_plan_filter: Restrict Total Cost'
+description: 'Block queries over a total cost limit'
+---

 [pg_plan_filter](https://github.com/pgexperts/pg_plan_filter) is PostgreSQL extension to block execution of statements where query planner's estimate of the total cost exceeds a threshold. This is intended to give database administrators a way to restrict the contribution an individual query has on database load.

@@ -91,7 +89,3 @@ HINT:  The plan for your query shows that it would probably have an excessive ru
 ## Resources

 - Official [pg_plan_filter documentation](https://github.com/pgexperts/pg_plan_filter)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_stat_monitor',
-  title: 'pg_stat_monitor: Query Performance Monitoring',
-  description: 'Query performance monitoring for PostgreSQL',
-}
+---
+id: 'pg_stat_monitor'
+title: 'pg_stat_monitor: Query Performance Monitoring'
+description: 'Query performance monitoring for PostgreSQL'
+---

 [pg_stat_monitor](https://github.com/percona/pg_stat_monitor) is query performance monitoring tool that provides query execution statistics in a SQL view named `pg_stat_monitor`. It tracks a superset of statistics available in [`pg_stat_statements`](https://www.postgresql.org/docs/current/pgstatstatements.html). Some of the most useful features are:

@@ -84,7 +82,3 @@ A full list of statistics is available in the [pg_stat_monitor docs](https://doc
 ## Resources

 - Official [`pg_stat_monitor` documentation](https://github.com/percona/pg_stat_monitor)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pg_stat_statements',
-  title: 'pg_stat_statements: Query Performance Monitoring',
-  description:
-    'Track planning and execution statistics of all SQL statements executed on the database.',
-}
+---
+id: 'pg_stat_statements'
+title: 'pg_stat_statements: Query Performance Monitoring'
+description: 'Track planning and execution statistics of all SQL statements executed on the database.'
+---

 `pg_stat_statements` is a database extension that exposes a view, of the same name, to track statistics about SQL statements executed on the database. The following table shows some of the available statistics and metadata:

@@ -88,7 +85,3 @@ From the results, we can make an informed decision about which queries to optimi
 ## Resources

 - Official [pg_stat_statements documentation](https://www.postgresql.org/docs/current/pgstatstatements.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgaudit',
-  title: 'PGAudit: Postgres Auditing',
-  description: 'Session and object auditing via PostgreSQL standard logging',
-}
+---
+id: 'pgaudit'
+title: 'PGAudit: Postgres Auditing'
+description: 'Session and object auditing via PostgreSQL standard logging'
+---

 [PGAudit](https://www.pgaudit.org) is a PostgreSQL extension for logging session and object auditing over the standard PostgreSQL logging utility.

@@ -108,7 +106,3 @@ Note that the insert statement is not logged because we did not include the `wri
 ## Resources

 - Official [`PGAudit` documentation](https://www.pgaudit.org)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgjwt',
-  title: 'pgjwt: JSON Web Tokens',
-  description: 'Encode and decode JWTs in PostgreSQL',
-}
+---
+id: 'pgjwt'
+title: 'pgjwt: JSON Web Tokens'
+description: 'Encode and decode JWTs in PostgreSQL'
+---

 The [pgjwt](https://github.com/michelp/pgjwt) (PostgreSQL JSON Web Token) extension allows you to create and parse [JSON Web Tokens (JWTs)](https://en.wikipedia.org/wiki/JSON_Web_Token) within a PostgreSQL database. JWTs are commonly used for authentication and authorization in web applications and services.

@@ -108,7 +106,3 @@ Which returns the decoded contents and some associated metadata.
 ## Resources

 - Official [`pgjwt` documentation](https://github.com/michelp/pgjwt)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgroonga',
-  title: 'PGroonga: Multilingual Full Text Search',
-  description: 'Full Text Search for multiple languages in PostgreSQL',
-  tocVideo: 'Mmmv9g_MiBA',
-}
+---
+id: 'pgroonga'
+title: 'PGroonga: Multilingual Full Text Search'
+description: 'Full Text Search for multiple languages in PostgreSQL'
+tocVideo: 'Mmmv9g_MiBA'
+---

 `PGroonga` is a PostgreSQL extension adding a full text search indexing method based on [Groonga](https://groonga.org). While native PostgreSQL supports full text indexing, it is limited to alphabet and digit based languages. `PGroonga` offers a wider range of character support making it viable for a superset of languages supported by PostgreSQL including Japanese, Chinese, etc.

@@ -182,7 +180,3 @@ id | content
 ## Resources

 - Official [PGroonga documentation](https://pgroonga.github.io/tutorial/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgrouting',
-  title: 'pgrouting: Geospatial Routing',
-  description: 'Extends PostGIS with Geospatial Routing',
-}
+---
+id: 'pgrouting'
+title: 'pgrouting: Geospatial Routing'
+description: 'Extends PostGIS with Geospatial Routing'
+---

 [pgRouting](http://pgrouting.org) is PostgreSQL and [PostGIS](http://postgis.net) extension adding geospatial routing functionality.

@@ -154,7 +152,3 @@ from
 ## Resources

 - Official [`pgRouting` documentation](https://docs.pgrouting.org/latest/en/index.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgsodium',
-  title: 'pgsodium: Encryption Features',
-  description: 'Encryption library for PostgreSQL',
-}
+---
+id: 'pgsodium'
+title: 'pgsodium: Encryption Features'
+description: 'Encryption library for PostgreSQL'
+---

 [pgsodium](https://github.com/michelp/pgsodium) is a PostgreSQL extension which provides SQL access to [libsodium's](https://doc.libsodium.org/) high-level cryptographic algorithms.

@@ -96,7 +94,3 @@ drop extension if exists pgsodium;
 ## Resources

 - Official [`pgsodium` documentation](https://github.com/michelp/pgsodium)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgtap',
-  title: 'pgTAP: Unit Testing',
-  description: 'Unit testing in PostgreSQL.',
-}
+---
+id: 'pgtap'
+title: 'pgTAP: Unit Testing'
+description: 'Unit testing in PostgreSQL.'
+---

 `pgTAP` is a unit testing extension for PostgreSQL.

@@ -156,7 +154,3 @@ API:
 ## Resources

 - Official [`pgTAP` documentation](https://pgtap.org/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'pgvector',
-  title: 'pgvector: Embeddings and vector similarity',
-  description:
-    'pgvector: a PostgreSQL extension for storing embeddings and performing vector similarity search.',
-}
+---
+id: 'pgvector'
+title: 'pgvector: Embeddings and vector similarity'
+description: 'pgvector: a PostgreSQL extension for storing embeddings and performing vector similarity search.'
+---

 [pgvector](https://github.com/pgvector/pgvector/) is a PostgreSQL extension for vector similarity search. It can also be used for storing [embeddings](https://supabase.com/blog/openai-embeddings-postgres-vector).

@@ -105,7 +102,3 @@ const { data, error } = await supabase.from('posts').insert({
 - [Storing OpenAI embeddings in Postgres with pgvector](https://supabase.com/blog/openai-embeddings-postgres-vector)
 - [A ChatGPT Plugins Template built with Supabase Edge Runtime](https://supabase.com/blog/building-chatgpt-plugins-template)
 - [Template for building your own custom ChatGPT style doc search](https://github.com/supabase-community/nextjs-openai-doc-search)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'plpgsql_check',
-  title: 'plpgsql_check: PL/pgSQL Linter',
-  description: 'Lint PL/pgSQL code',
-}
+---
+id: 'plpgsql_check'
+title: 'plpgsql_check: PL/pgSQL Linter'
+description: 'Lint PL/pgSQL code'
+---

 [plpgsql_check](https://github.com/okbob/plpgsql_check) is a PostgreSQL extension that lints plpgsql for syntax, semantic and other related issues. The tool helps developers to identify and correct errors before executing the code. plpgsql_check is most useful for developers who are working with large or complex SQL codebases, as it can help identify and resolve issues early in the development cycle.

@@ -100,7 +98,3 @@ select plpgsql_check_function('public.some_func()');
 ## Resources

 - Official [`plpgsql_check` documentation](https://github.com/okbob/plpgsql_check)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'plv8',
-  title: 'plv8: JavaScript Language',
-  description: 'JavaScript language for PostgreSQL.',
-}
+---
+id: 'plv8'
+title: 'plv8: JavaScript Language'
+description: 'JavaScript language for PostgreSQL.'
+---

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

@@ -150,7 +148,3 @@ select * from get_messages();

 - Official [`plv8` documentation](https://plv8.github.io/)
 - [plv8 GitHub Repository](https://github.com/plv8/plv8)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'postgis',
-  title: 'PostGIS: Geo queries',
-  description: 'Working with geo-spatial data in Postgres',
-  tocVideo: 'agFsGDJxjwA',
-}
+---
+id: 'postgis'
+title: 'PostGIS: Geo queries'
+description: 'Working with geo-spatial data in Postgres'
+tocVideo: 'agFsGDJxjwA'
+---

 [PostGIS](https://postgis.net/) is a Postgres extension that allows you to interact with Geo data within Postgres. You can sort your data by geographic location, get data within certain geographic boundaries, and do much more with it.

@@ -351,7 +349,3 @@ val data = supabase.postgrest.rpc(
 ## Resources

 - [Official PostGIS documentation](https://postgis.net/documentation/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'rum',
-  title: 'RUM: improved inverted index for full-text search based on GIN index',
-  description: 'A GIN-like index with additional tree-organized data for each index entry',
-}
+---
+id: 'rum'
+title: 'RUM: improved inverted index for full-text search based on GIN index'
+description: 'A GIN-like index with additional tree-organized data for each index entry'
+---

 [RUM](https://github.com/postgrespro/rum) is an extension which adds a RUM index to Postgresql.

@@ -158,7 +156,3 @@ operator by attached column.
 ## Resources

 - [Official RUM documentation](https://github.com/postgrespro/rum)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'timescaledb',
-  title: 'timescaledb: Time-Series data',
-  description: 'Scalable time-series data storage and analysis',
-}
+---
+id: 'timescaledb'
+title: 'timescaledb: Time-Series data'
+description: 'Scalable time-series data storage and analysis'
+---

 [timescaledb](https://docs.timescale.com/timescaledb/latest/) is a PostgreSQL extension designed for improved handling of time-series data. It provides a scalable, high-performance solution for storing and querying time-series data on top of a standard PostgreSQL database.

@@ -94,7 +92,3 @@ group by
 ## Resources

 - Official [`timescaledb` documentation](https://docs.timescale.com/timescaledb/latest/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'uuid-ossp',
-  title: 'uuid-ossp: Unique Identifiers',
-  description: 'A UUID generator for PostgreSQL.',
-}
+---
+id: 'uuid-ossp'
+title: 'uuid-ossp: Unique Identifiers'
+description: 'A UUID generator for PostgreSQL.'
+---

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

@@ -96,7 +94,3 @@ create table contacts (

 - [Choosing a Postgres Primary Key](https://supabase.com/blog/choosing-a-postgres-primary-key)
 - [The Basics Of PostgreSQL `UUID` Data Type](https://www.postgresqltutorial.com/postgresql-uuid/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'foreign-data-wrappers',
-  title: 'Foreign Data Wrappers',
-  description: 'Connecting to external systems using Postgres Foreign Data Wrappers.',
-  subtitle: 'Connecting to external systems using Postgres Foreign Data Wrappers.',
-}
+---
+id: 'foreign-data-wrappers'
+title: 'Foreign Data Wrappers'
+description: 'Connecting to external systems using Postgres Foreign Data Wrappers.'
+subtitle: 'Connecting to external systems using Postgres Foreign Data Wrappers.'
+---

 Foreign Data Wrappers (FDW) are a core feature of Postgres that allow you to access and query data stored in external data sources as if they were native Postgres tables.

@@ -120,7 +118,3 @@ If you want to expose any of the columns to your public API, create a [View](htt
 ## Resources

 - Official [`supabase/wrappers` documentation](https://supabase.github.io/wrappers/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'full-text-search',
-  title: 'Full Text Search',
-  description: 'How to use full text search in PostgreSQL.',
-  subtitle: 'How to use full text search in PostgreSQL.',
-  tocVideo: 'b-mgca_2Oe4',
-}
+---
+id: 'full-text-search'
+title: 'Full Text Search'
+description: 'How to use full text search in PostgreSQL.'
+subtitle: 'How to use full text search in PostgreSQL.'
+tocVideo: 'b-mgca_2Oe4'
+---

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

@@ -763,7 +761,3 @@ val data = supabase.from("books").select {
 ## Resources

 - [PostgreSQL: Text Search Functions and Operators](https://www.postgresql.org/docs/12/functions-textsearch.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'functions',
-  title: 'Database Functions',
-  description: 'Creating and using Postgres functions.',
-  video: 'https://www.youtube.com/v/MJZCCpCYEqk',
-}
+---
+id: 'functions'
+title: 'Database Functions'
+description: 'Creating and using Postgres functions.'
+video: 'https://www.youtube.com/v/MJZCCpCYEqk'
+---

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

 You can import data into Supabase in multiple ways. The best method depends on your data size and app requirements.

@@ -129,7 +127,3 @@ create index index_name on table_name (column_name);
 ```

 Read more about [Managing Indexes in PostgreSQL](/docs/guides/database/postgres/indexes).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'json',
-  title: 'Debugging and monitoring',
-  description:
-    'Inspecting your Postgres database for common issues around disk, query performance, index, locks, and more using the terminal.',
-}
+---
+id: 'json'
+title: 'Debugging and monitoring'
+description: 'Inspecting your Postgres database for common issues around disk, query performance, index, locks, and more using the terminal.'
+---

 The Supabase CLI comes with a range of tools to help inspect your Postgres instances for potential issues. The CLI gets the information from <a href="https://www.postgresql.org/docs/current/internals.html" target="_blank">Postgres internals</a>. Therefore, most tools provided are compatible with any Postgres databases regardless if they are a Supabase project or not.

@@ -103,7 +100,3 @@ Learn more about pg_stats [here](https://supabase.com/docs/guides/database/exten
 ## Acknowledgements

 Supabase CLI's inspect commands are heavily inspired by the <a href="https://github.com/heroku/heroku-pg-extras" target="_blank">pg-extras</a> tools.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'joins-and-nested-tables',
-  title: 'Querying Joins and Nested tables',
-  description: 'The Data APIs automatically detect relationships between Postgres tables.',
-}
+---
+id: 'joins-and-nested-tables'
+title: 'Querying Joins and Nested tables'
+description: 'The Data APIs automatically detect relationships between Postgres tables.'
+---

 The data APIs automatically detect relationships between Postgres tables. Since Postgres is a relational database, this is a very common scenario.

@@ -262,7 +260,3 @@ GET https://[REF].supabase.co/rest/v1/teams?select=id,team_name,users(id,name)

 </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'json',
-  title: 'Managing JSON and unstructured data',
-  description: 'Using the JSON data type in Postgres.',
-  subtitle: 'Using the JSON data type in Postgres.',
-}
+---
+id: 'json'
+title: 'Managing JSON and unstructured data'
+description: 'Using the JSON data type in Postgres.'
+subtitle: 'Using the JSON data type in Postgres.'
+---

 Postgres supports storing and querying unstructured data.

@@ -312,7 +310,3 @@ add constraint check_metadata check (

 - [Postgres: JSON Functions and Operators](https://www.postgresql.org/docs/current/functions-json.html)
 - [Postgres JSON types](https://www.postgresql.org/docs/current/datatype-json.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'managing-passwords',
-  title: 'Passwords',
-  description: 'How to change your PostgreSQL database password.',
-}
+---
+id: 'managing-passwords'
+title: 'Passwords'
+description: 'How to change your PostgreSQL database password.'
+---

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

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

 - [PostgreSQL `ALTER USER` Documentation](https://www.postgresql.org/docs/12/sql-alteruser.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'managing-timezones',
-  title: 'Timezones',
-  slug: 'managing-timezones',
-  description: 'How to change your database timezone.',
-}
+---
+id: 'managing-timezones'
+title: 'Timezones'
+slug: 'managing-timezones'
+description: 'How to change your database timezone.'
+---

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

 </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'database',
-  title: 'Database',
-  description: 'Use Supabase to manage your data.',
-  sidebar_label: 'Overview',
-}
+---
+id: 'database'
+title: 'Database'
+description: 'Use Supabase to manage your data.'
+sidebar_label: 'Overview'
+---

 Every Supabase project comes with a full [Postgres](https://www.postgresql.org/) database, a free and open source database which is considered one of the world's most stable and advanced databases.

@@ -97,7 +95,3 @@ Read about resetting your database password [here](/docs/guides/database/managin

 - Read more about [Postgres](https://www.postgresql.org/about/)
 - Sign in: [supabase.com/dashboard](https://supabase.com/dashboard)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'partitions',
-  title: 'Partitioning tables',
-  description: 'Organizing tables into partitions in Postgres.',
-}
+---
+id: 'partitions'
+title: 'Partitioning tables'
+description: 'Organizing tables into partitions in Postgres.'
+---

 Table partitioning is a technique that allows you to divide a large table into smaller, more manageable parts called “partitions”.

@@ -191,7 +189,3 @@ create table products_two
 ## Other tools

 There are several other tools available for Postgres partitioning, most notably [pg_partman](https://github.com/pgpartman/pg_partman). Native partitioning was introduced in Postgres 10 and is generally thought to have better performance.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Cascade Deletes',
-  description: 'Understand the types of foreign key constraint deletes',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Cascade Deletes'
+description: 'Understand the types of foreign key constraint deletes'
+footerHelpType: 'postgres'
+---

 There are 5 options for foreign key constraint deletes:

@@ -189,7 +187,3 @@ postgres=# select * from child;
 ```

 The `mother` deletion took precedence over the `father`, and so William was deleted. After William was deleted, there was no reference to “Charles” and so he was free to be deleted, even though previously he wasn't (without `INITIALLY DEFERRED`).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'postgres-configuration',
-  title: 'Database configuration',
-  slug: 'postgres-configuration',
-  description: 'Updating the default configuration for your Postgres database.',
-  subtitle: 'Updating the default configuration for your Postgres database.',
-}
+---
+id: 'postgres-configuration'
+title: 'Database configuration'
+slug: 'postgres-configuration'
+description: 'Updating the default configuration for your Postgres database.'
+subtitle: 'Updating the default configuration for your Postgres database.'
+---

 Postgres provides a set of sensible defaults for you database size. In some cases, these defaults can be updated. We do not recommend changing these defaults unless you know what you're doing.

@@ -107,7 +105,3 @@ where name ilike '%york%';

 </TabPanel>
 </Tabs>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Drop all tables in a PostgreSQL schema',
-  description: 'Useful snippet for deleting all tables in a given schema',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Drop all tables in a PostgreSQL schema'
+description: 'Useful snippet for deleting all tables in a given schema'
+footerHelpType: 'postgres'
+---

 Execute the following query to drop all tables in a given schema.
 Replace `my-schema-name` with the name of your schema. In Supabase, the default schema is `public`.
@@ -28,7 +26,3 @@ end $$;
 This query works by listing out all the tables in the given schema and then executing a `drop table` for each (hence the `for... loop`).

 You can run this query using the [SQL Editor](https://supabase.com/dashboard/project/_/sql) in the Supabase Dashboard, or via `psql` if you're [connecting directly to the database](/docs/guides/database/connecting-to-postgres#direct-connections).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'enums',
-  title: 'Managing Enums in Postgres',
-  description: 'Define a strict set of values that can be used in table and function definitions.',
-}
+---
+id: 'enums'
+title: 'Managing Enums in Postgres'
+description: 'Define a strict set of values that can be used in table and function definitions.'
+---

 Enums in Postgres are a custom data type. They allow you to define a set of values (or labels) that a column can hold. They are useful when you have a fixed set of possible values for a column.

@@ -126,7 +124,3 @@ select enum_range(null::mood);
 ## Resources

 - Official Postgres Docs: [Enumerated Types](https://www.postgresql.org/docs/current/datatype-enum.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Select first row for each group in PostgreSQL',
-  description: 'PostgreSQL snippet for grabbing the first row in each distinct group by group',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Select first row for each group in PostgreSQL'
+description: 'PostgreSQL snippet for grabbing the first row in each distinct group by group'
+footerHelpType: 'postgres'
+---

 Given a table `seasons`:

@@ -46,7 +44,3 @@ The important bits here are:
 - The `distinct` keyword that tells Postgres to only return a single row per team.

 This query can also be executed via `psql` or any other query editor if you prefer to [connect directly to the database](/docs/guides/database/connecting-to-postgres#direct-connections).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Managing Indexes in PostgreSQL',
-  description: 'Improve query performance using various index types in Postgres',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Managing Indexes in PostgreSQL'
+description: 'Improve query performance using various index types in Postgres'
+footerHelpType: 'postgres'
+---

 An index makes your Postgres queries faster. The index is like a "table of contents" for your data - a reference list which allows queries to quickly locate a row in a given table without needing to scan the entire table (which in large tables can take a long time).

@@ -106,7 +104,3 @@ reindex table concurrently persons;
 ```

 Take note that `reindex` can be used inside a transaction, but `reindex [index/table] concurrently` cannot.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'roles',
-  title: 'Roles, superuser access and unsupported operations',
-  slug: 'roles',
-}
+---
+id: 'roles'
+title: 'Roles, superuser access and unsupported operations'
+slug: 'roles'
+---

 Supabase provides the default `postgres` role to all instances deployed. Superuser access is not given as it allows destructive operations to be performed on the database.

@@ -19,7 +17,3 @@ However, this does mean that some operations, that typically require `superuser`
 - `CREATE EVENT TRIGGER`
 - `COPY ... FROM PROGRAM`
 - `ALTER USER ... WITH SUPERUSER`
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'postgres-roles',
-  title: 'Postgres Roles',
-  description: 'Managing access to your Postgres database and configuring permissions.',
-  subtitle: 'Managing access to your Postgres database and configuring permissions.',
-}
+---
+id: 'postgres-roles'
+title: 'Postgres Roles'
+description: 'Managing access to your Postgres database and configuring permissions.'
+subtitle: 'Managing access to your Postgres database and configuring permissions.'
+---

 Postgres manages database access permissions using the concept of roles. Generally you wouldn't use these roles for your own application - they are mostly for configuring _system access_ to your database. If you want to configure _application access_, then you should use [Row Level Security](/docs/guides/database/postgres/row-level-security).

@@ -124,7 +122,3 @@ Supabase Administrative role for maintaining your database.
 - Official Postgres docs: [Database Roles](https://www.postgresql.org/docs/current/database-roles.html)
 - Official Postgres docs: [Role Membership](https://www.postgresql.org/docs/current/role-membership.html)
 - Official Postgres docs: [Function Permissions](https://www.postgresql.org/docs/current/perm-functions.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'row-level-security',
-  title: 'Row Level Security',
-  description: 'Secure your data using Postgres Row Level Security.',
-  subtitle: 'Secure your data using Postgres Row Level Security.',
-}
+---
+id: 'row-level-security'
+title: 'Row Level Security'
+description: 'Secure your data using Postgres Row Level Security.'
+subtitle: 'Secure your data using Postgres Row Level Security.'
+---

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

@@ -382,7 +380,3 @@ This prevents the policy `( auth.uid() = user_id )` from running for any `anon`
 | Test                                                                                          | Before (ms) | After (ms) | % Improvement | Change                                                                                                                           |
 | --------------------------------------------------------------------------------------------- | ----------- | ---------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | [test6-To-role](https://github.com/GaryAustin1/RLS-Performance/tree/main/tests/test6-To-role) | 170         | < 0.1      | 99.78%        | <details className="cursor-pointer">Before:<br/>No `TO` policy<br/><br/>After:<br/>`TO authenticated` (anon accessing)</details> |
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,8 @@
-import { createDecipheriv } from 'crypto'
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Replicate to another Postgres database using Logical Replication',
-  description:
-    'Example to setup logical replication using publish-subscribe to a Postgres database outside of Supabase',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Replicate to another Postgres database using Logical Replication'
+description: 'Example to setup logical replication using publish-subscribe to a Postgres database outside of Supabase'
+footerHelpType: 'postgres'
+---

 For this example, you will need:

@@ -62,7 +58,3 @@ ALTER PUBLICATION example_pub ADD TABLE example_table;
 ```sql
 select * from pg_stat_replication;
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'postgres-triggers',
-  title: 'Postgres Triggers',
-  description: 'Automatically execute SQL on table events.',
-  subtitle: 'Automatically execute SQL on table events.',
-}
+---
+id: 'postgres-triggers'
+title: 'Postgres Triggers'
+description: 'Automatically execute SQL on table events.'
+subtitle: 'Automatically execute SQL on table events.'
+---

 In Postgres, a trigger executes a set of actions automatically on table events such as INSERTs, UPDATEs, DELETEs, or TRUNCATE operations.

@@ -116,7 +114,3 @@ drop trigger "trigger_name" on "table_name";
 - Official Postgres Docs: [Triggers](https://www.postgresql.org/docs/current/triggers.html)
 - Official Postgres Docs: [Overview of Trigger Behavior](https://www.postgresql.org/docs/current/trigger-definition.html)
 - Official Postgres Docs: [CREATE TRIGGER](https://www.postgresql.org/docs/current/sql-createtrigger.html)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Print PostgreSQL version',
-  description: 'Useful snippet for finding out which version of postgres you are running',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Print PostgreSQL version'
+description: 'Useful snippet for finding out which version of postgres you are running'
+footerHelpType: 'postgres'
+---

 It's important to know which version of PostgreSQL you are running as each major version has different features and may cause breaking changes. You may also need to update your schema when [upgrading](https://www.postgresql.org/docs/current/pgupgrade.html) or downgrading to a major Postgres version.

@@ -22,7 +20,3 @@ PostgreSQL 15.1 on aarch64-unknown-linux-gnu, compiled by gcc (Ubuntu 10.3.0-1ub
 ```

 This query can also be executed via `psql` or any other query editor if you prefer to [connect directly to the database](/docs/guides/database/connecting-to-postgres#direct-connections).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  title: 'Query Optimization',
-  description: 'Choosing indexes to improve your query performance.',
-  subtitle: 'Choosing indexes to improve your query performance.',
-  footerHelpType: 'postgres',
-}
+---
+title: 'Query Optimization'
+description: 'Choosing indexes to improve your query performance.'
+subtitle: 'Choosing indexes to improve your query performance.'
+footerHelpType: 'postgres'
+---

 When working with Postgres, or any relational database, indexing is key to improving query performance. Aligning indexes with common query patterns can speed up data retrieval by an order of magnitude.

@@ -128,7 +126,3 @@ analyze customers;
 ---

 By following this guide, you'll be able to discern where indexes can optimize queries and enhance your Postgres performance. Remember that each database is unique, so always consider the specific context and use case of your queries.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'replication',
-  title: 'Replication',
-  slug: 'replication',
-}
+---
+id: 'replication'
+title: 'Replication'
+slug: 'replication'
+---

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

@@ -93,7 +91,3 @@ begin;
  create publication publication_name;
 commit;
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,9 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'securing-your-data',
-  title: 'Securing your data',
-}
+---
+id: 'securing-your-data'
+title: 'Securing your data'
+---

 Supabase helps you control access to your data. With access policies, you can protect sensitive data and make sure users only access what they're allowed to see.

@@ -31,7 +29,3 @@ Supabase and Postgres provide you with multiple ways to manage security, includi
 - [Row Level Security](/docs/guides/database/postgres/row-level-security)
 - [Managing Postgres roles](/docs/guides/database/postgres/roles)
 - [Managing secrets with Vault](/docs/guides/database/vault)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'sql-to-api',
-  title: 'Converting SQL to JavaScript API',
-  description: 'Implementing common SQL patterns in the JavaScript API',
-}
+---
+id: 'sql-to-api'
+title: 'Converting SQL to JavaScript API'
+description: 'Implementing common SQL patterns in the JavaScript API'
+---

 {/* @TODO: this one is a very daunting read on first attempt. Need to check what is the purpose of it */}

@@ -84,7 +82,3 @@ const { count, error } = await supabase
 - [Supabase API: JavaScript select](/docs/reference/javascript/select)
 - [Supabase API: JavaScript modifiers](/docs/reference/javascript/using-modifiers)
 - [Supabase API: JavaScript filters](/docs/reference/javascript/using-filters)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'tables',
-  title: 'Tables and Data',
-  description: 'Creating and using Postgres tables.',
-  video: 'https://www.youtube.com/v/TKwF3IGij5c',
-}
+---
+id: 'tables'
+title: 'Tables and Data'
+description: 'Creating and using Postgres tables.'
+video: 'https://www.youtube.com/v/TKwF3IGij5c'
+---

 Tables are where you store your data.

@@ -551,7 +549,3 @@ Creating a materialized view is not a solution to inefficient queries. You shoul
 - [PostgreSQL Tutorial: Create tables](https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-create-table/)
 - [PostgreSQL Tutorial: Add column](https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-add-column/)
 - [PostgreSQL Tutorial: Views](https://www.postgresqltutorial.com/postgresql-views/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'testing',
-  title: 'Testing Your Database',
-  description: 'Test your database schema, tables, functions, and policies.',
-}
+---
+id: 'testing'
+title: 'Testing Your Database'
+description: 'Test your database schema, tables, functions, and policies.'
+---

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

@@ -68,7 +66,3 @@ Result: PASS
 - [Testing RLS policies](/docs/guides/auth/row-level-security#testing-policies)
 - [pgTAP extension](/docs/guides/database/extensions/pgtap)
 - Official [pgTAP documentation](https://pgtap.org/)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,14 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'vault',
-  title: 'Vault',
-  description:
-    'Vault is a Postgres extension and accompanying Supabase UI that makes it safe and easy to store encrypted secrets.',
-  subtitle: 'Managing secrets in Postgres.',
-  sidebar_label: 'Overview',
-  video: 'https://www.youtube.com/v/J9mTPY8rIXE',
-}
+---
+id: 'vault'
+title: 'Vault'
+description: 'Vault is a Postgres extension and accompanying Supabase UI that makes it safe and easy to store encrypted secrets.'
+subtitle: 'Managing secrets in Postgres.'
+sidebar_label: 'Overview'
+video: 'https://www.youtube.com/v/J9mTPY8rIXE'
+---

 Vault is a Postgres extension and accompanying Supabase UI that makes it safe and easy to store encrypted secrets and other data in your database. This opens up a lot of possibilities to use Postgres in ways that go beyond what is available in a stock distribution.

@@ -257,7 +254,3 @@ Which roles should have access to the `vault.secrets` table should be carefully
 - Read more about Supabase Vault in the [blog post](https://supabase.com/blog/vault-now-in-beta)
 - [Supabase Vault on GitHub](https://github.com/supabase/vault)
 - [Column Encryption](/docs/guides/database/column-encryption)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'webhooks',
-  title: 'Database Webhooks',
-  description: 'Trigger external payloads on database events.',
-  subtitle: 'Trigger external payloads on database events.',
-  tocVideo: 'codAs9-NeHM',
-}
+---
+id: 'webhooks'
+title: 'Database Webhooks'
+description: 'Trigger external payloads on database events.'
+subtitle: 'Trigger external payloads on database events.'
+tocVideo: 'codAs9-NeHM'
+---

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

@@ -85,7 +83,3 @@ Logging history of webhook calls is available under the `net` schema of your dat
 ## Resources

 - [pg_net](/docs/guides/database/extensions/pgnet): an async networking extension for PostgreSQL
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -0,0 +1,346 @@
+---
+id: 'getting-started'
+title: 'Getting Started'
+description: 'Resources for getting started with Supabase.'
+hideToc: true
+---
+
+<div className="flex flex-col gap-12 my-12">
+
+<div>
+
+  <div className="grid grid-cols-12 gap-6 not-prose">
+    {[
+      {
+        title: 'Features',
+        hasLightIcon: true,
+        href: '/guides/getting-started/features',
+        description: 'A non-exhaustive list of features that Supabase provides for every project.'
+      },
+      {
+        title: 'Architecture',
+        hasLightIcon: true,
+        href: '/guides/getting-started/architecture',
+        description: "An overview of Supabase's architecture and product principles.",
+      },
+      {
+        title: 'Local Development',
+        hasLightIcon: true,
+        href: '/guides/cli/getting-started',
+        description: 'Use the Supabase CLI to develop locally and collaborate between teams.',
+      }
+    ].map((resource) => {
+      return (
+        <Link
+          href={`${resource.href}`}
+          key={resource.title}
+          className={'col-span-12 md:col-span-4'}
+          passHref
+        >
+          <GlassPanel {...resource} background={false} showIconBg={true}>
+            {resource.description}
+          </GlassPanel>
+        </Link>
+      )
+
+})}
+
+  </div>
+
+</div>
+
+</div>
+
+### Use cases
+
+<div className="grid lg:grid-cols-12 gap-6 not-prose">
+  {[
+    {
+      title: 'AI, Vectors, and embeddings',
+      href: '/guides/ai#examples',
+      description: `Build AI-enabled applications using our Vector toolkit.`,
+      icon: '/docs/img/icons/openai_logo',
+      hasLightIcon: true,
+    },
+    {
+      title: 'Subscription Payments (SaaS)',
+      href: 'https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter',
+      description: `Clone, deploy, and fully customize a SaaS subscription application with Next.js.`,
+      icon: '/docs/img/icons/nextjs-icon',
+    },
+    {
+      title: 'Partner Gallery',
+      href: 'https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example',
+      description: `Postgres full-text search, image storage, and more.`,
+      icon: '/docs/img/icons/nextjs-icon',
+    },
+  ].map((item) => {
+    return (
+      <Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
+        <GlassPanel
+          title={item.title}
+          span="col-span-6"
+          background={false}
+          icon={item.icon}
+          hasLightIcon={item.hasLightIcon}
+        >
+          {item.description}
+        </GlassPanel>
+      </Link>
+    )
+  })}
+</div>
+
+### Framework quickstarts
+
+<div className="grid lg:grid-cols-12 gap-6 not-prose">
+  {[
+    {
+      title: 'React',
+      href: '/guides/getting-started/quickstarts/reactjs',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.',
+      icon: '/docs/img/icons/react-icon',
+    },
+    {
+      title: 'Next.js',
+      href: '/guides/getting-started/quickstarts/nextjs',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Next.js app.',
+      icon: '/docs/img/icons/nextjs-icon',
+      hasLightIcon: true,
+    },
+    {
+      title: 'NuxtJS',
+      href: '/guides/getting-started/quickstarts/nuxtjs',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NuxtJS app.',
+      icon: '/docs/img/icons/nuxt-icon',
+    },
+    {
+      title: 'RedwoodJS',
+      href: '/guides/getting-started/quickstarts/redwoodjs',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.',
+      icon: '/docs/img/icons/redwood-icon',
+    },
+    {
+      title: 'Flutter',
+      href: '/guides/getting-started/quickstarts/flutter',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
+      icon: '/docs/img/icons/flutter-icon',
+    },
+    {
+      title: 'Android Kotlin',
+      href: '/guides/getting-started/quickstarts/kotlin',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Android Kotlin app.',
+      icon: '/docs/img/icons/kotlin-icon',
+    },
+    {
+      title: 'SvelteKit',
+      href: '/guides/getting-started/quickstarts/sveltekit',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.',
+      icon: '/docs/img/icons/svelte-icon',
+    },
+    {
+      title: 'SolidJS',
+      href: '/guides/getting-started/quickstarts/solidjs',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.',
+      icon: '/docs/img/icons/solidjs-icon',
+    },
+    {
+      title: 'Vue',
+      href: '/guides/getting-started/quickstarts/vue',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.',
+      icon: '/docs/img/icons/vuejs-icon',
+    },
+    {
+      title: 'refine',
+      href: '/guides/getting-started/quickstarts/refine',
+      description:
+        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.',
+      icon: '/docs/img/icons/refine-icon',
+    },
+  ].map((item) => {
+    return (
+      <Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
+        <GlassPanel
+          title={item.title}
+          span="col-span-6"
+          background={false}
+          icon={item.icon}
+          hasLightIcon={item.hasLightIcon}
+        >
+          {item.description}
+        </GlassPanel>
+      </Link>
+    )
+  })}
+</div>
+
+### Web app tutorials
+
+<div className="grid lg:grid-cols-12 gap-6 not-prose">
+  {
+  [
+    {
+      title: 'Next.js',
+      href: '/guides/getting-started/tutorials/with-nextjs',
+      description:
+        'Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/nextjs-icon',
+      hasLightIcon: true
+    },
+    {
+      title: 'React',
+      href: '/guides/getting-started/tutorials/with-react',
+      description:
+        'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/react-icon'
+    },
+    {
+      title: 'Vue 3',
+      href: '/guides/getting-started/tutorials/with-vue-3',
+      description:
+        'Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/vuejs-icon'
+    },
+    {
+      title: 'Nuxt 3',
+      href: '/guides/getting-started/tutorials/with-nuxt-3',
+      description:
+        'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/nuxt-icon'
+    },
+    {
+      title: 'Angular',
+      href: '/guides/getting-started/tutorials/with-angular',
+      description:
+        'Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/angular-icon'
+    },
+    {
+      title: 'RedwoodJS',
+      href: '/guides/getting-started/tutorials/with-redwoodjs',
+      description:
+        'Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/redwood-icon'
+    },
+    {
+      title: 'Svelte',
+      href: '/guides/getting-started/tutorials/with-svelte',
+      description:
+        'Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/svelte-icon'
+    },
+    {
+      title: 'SvelteKit',
+      href: '/guides/getting-started/tutorials/with-sveltekit',
+      description:
+        'Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/svelte-icon'
+    },
+    {
+      title: 'refine',
+      href: '/guides/getting-started/tutorials/with-refine',
+      description:
+        'Learn how to build a user management app with refine and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/refine-icon'
+    }
+  ]
+.map((item) => {
+    return (
+      <Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
+        <GlassPanel
+          title={item.title}
+          span="col-span-6"
+          background={false}
+          icon={item.icon}
+          hasLightIcon={item.hasLightIcon}
+        >
+          {item.description}
+        </GlassPanel>
+      </Link>
+    )
+
+})}
+
+</div>
+
+### Mobile tutorials
+
+<div className="grid lg:grid-cols-12 gap-6 not-prose">
+  {[
+    {
+      title: 'Flutter',
+      href: '/guides/getting-started/tutorials/with-flutter',
+      description:
+        'Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/flutter-icon'
+    },
+    {
+      title: 'Expo React Native',
+      href: '/guides/getting-started/tutorials/with-expo-react-native',
+      description:
+        'Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/expo-icon',
+      hasLightIcon: true
+    },
+    {
+      title: 'Android Kotlin',
+      href: '/guides/getting-started/tutorials/with-kotlin',
+      description:
+        'Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/kotlin-icon'
+    },
+    {
+      title: 'iOS Swift',
+      href: '/guides/getting-started/tutorials/with-swift',
+      description:
+        'Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/swift-icon'
+    },
+    {
+      title: 'Ionic React',
+      href: '/guides/getting-started/tutorials/with-ionic-react',
+      description:
+        'Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/ionic-icon'
+    },
+    {
+      title: 'Ionic Vue',
+      href: '/guides/getting-started/tutorials/with-ionic-vue',
+      description:
+        'Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/ionic-icon'
+    },
+    {
+      title: 'Ionic Angular',
+      href: '/guides/getting-started/tutorials/with-ionic-angular',
+      description:
+        'Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.',
+      icon: '/docs/img/icons/ionic-icon'
+    }
+  ].map((item) => {
+    return (
+      <Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
+        <GlassPanel
+          title={item.title}
+          span="col-span-6"
+          background={false}
+          icon={item.icon}
+          hasLightIcon={item.hasLightIcon}
+        >
+          {item.description}
+        </GlassPanel>
+      </Link>
+    )
+
+})}
+
+</div>
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'architecture',
-  title: 'Architecture',
-  description: 'Supabase design and architecture',
-}
+---
+id: 'architecture'
+title: 'Architecture'
+description: 'Supabase design and architecture'
+---

 Supabase is open source. We choose open source tools which are scalable and make them simple to use.

@@ -164,7 +162,3 @@ As the profile of a developer changes over time, Supabase will continue to evolv

 Supabase supports existing tools and communities wherever possible. Supabase is more like a "community of communities" - each tool typically has its own community which we work with.
 Open source is something we approach [collaboratively](https://supabase.com/blog/supabase-series-b#giving-back): we employ maintainers, sponsor projects, invest in businesses, and develop our own open source tools.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'features',
-  title: 'Features',
-  description: 'Supabase features',
-}
+---
+id: 'features'
+title: 'Features'
+description: 'Supabase features'
+---

 This is a non-exhaustive list of features that Supabase provides for every project.

@@ -186,7 +184,3 @@ Both Postgres and the Supabase Platform are production-ready. Some tools we offe

 - ✅ = Fully Available
 - 🚧 = Available, but requires external tools or configuration
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with Flutter',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with Flutter'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -209,7 +206,3 @@ To do this, add the following line to the `android/app/src/main/AndroidManifest.
  <!-- ... -->
 </manifest>
 ```
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with Android Kotlin',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Android Kotlin app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with Android Kotlin'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Android Kotlin app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -209,7 +206,3 @@ export const meta = {
  </StepHikeCompact.Step>

 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with Laravel',
-  subtitle:
-    'Learn how to create a PHP Laravel project, connect it to your Supabase Postgres database, and configure user authentication.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with Laravel'
+subtitle: 'Learn how to create a PHP Laravel project, connect it to your Supabase Postgres database, and configure user authentication.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -142,6 +139,3 @@ export const meta = {
  </StepHikeCompact.Step>

 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with Next.js',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data, and query from a Next.js app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with Next.js'
+subtitle: 'Learn how to create a Supabase project, add some sample data, and query from a Next.js app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -128,6 +125,3 @@ export const meta = {
  </StepHikeCompact.Step>

 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with NuxtJS',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NuxtJS app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with NuxtJS'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NuxtJS app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -133,6 +130,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with React',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with React'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -139,7 +136,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with RedwoodJS',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with RedwoodJS'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -238,7 +235,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with refine',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with refine'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a refine app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -127,7 +124,7 @@ export const meta = {
    </StepHikeCompact.Code>

  </StepHikeCompact.Step>
-  
+
  <StepHikeCompact.Step step={6}>
    <StepHikeCompact.Details title="Add countries resource and pages">

@@ -249,7 +246,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with Ruby on Rails',
-  subtitle:
-    'Learn how to create a Rails project and connect it to your Supabase Postgres database.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with Ruby on Rails'
+subtitle: 'Learn how to create a Rails project and connect it to your Supabase Postgres database.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -116,6 +113,3 @@ export const meta = {
  </StepHikeCompact.Step>

 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with SolidJS',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with SolidJS'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -133,7 +130,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with SvelteKit',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with SvelteKit'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -161,7 +158,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
-  title: 'Use Supabase with Vue',
-  subtitle:
-    'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.',
-  breadcrumb: 'Framework Quickstarts',
-}
+---
+title: 'Use Supabase with Vue'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---

 <StepHikeCompact>

@@ -150,7 +147,3 @@ export const meta = {

  </StepHikeCompact.Step>
 </StepHikeCompact>
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
-
-export default Page