Merge branch 'master' into qiao/docs

.github/workflows/avoid-typos.yml

@@ -14,11 +14,12 @@ jobs:
         uses: reviewdog/action-misspell@v1
         with:
           github_token: ${{ secrets.github_token }}
-          locale: "US"
+          locale: 'US'
           reporter: github-pr-review
           level: error
           exclude: |
-            "*.css"
-            "**/package.json"
-            "**/package-lock.json"
-            ".git/*"
+            *.css
+            **/package.json
+            **/package-lock.json
+            .git/*
+            *.ipynb

.github/workflows/docs-tests.yml

@@ -0,0 +1,30 @@
+name: Docs Tests
+
+on:
+  pull_request:
+    branches: ['master']
+    paths:
+      - 'apps/docs/**/*.ts*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:docs

.github/workflows/og_images.yml

@@ -14,7 +14,7 @@ jobs:
 
     env:
       SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
-      PROJECT_ID: ${{ secrets.PROJECT_ID }}
+      PROJECT_ID: ${{ secrets.OG_IMAGE_SUPABASE_PROJECT_ID }}
 
     steps:
       - name: Check out repo

.github/workflows/prettier.yml

@@ -11,9 +11,16 @@ jobs:
     steps:
       - name: Check out repo
         uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Download dependencies
+        run: npm ci
       - name: Run prettier
         run: |-
-          npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}'
+          npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
         # [Joshen] Temp disable the following due to an issue
         # https://github.com/EPMatt/reviewdog-action-prettier/issues/34
         # uses: EPMatt/reviewdog-action-prettier@v1
@@ -42,9 +49,16 @@ jobs:
     steps:
       - name: Check out repo
         uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Download dependencies
+        run: npm ci
       - name: Run prettier
         run: |-
-          npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}'
+          npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
         # uses: EPMatt/reviewdog-action-prettier@v1
         # with:
         #   github_token: ${{ secrets.github_token }}

.github/workflows/search.yml

@@ -0,0 +1,62 @@
+name: Generate Embeddings for Search
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - '.github/workflows/search.yml'
+      - 'supabase/migrations/**'
+      - 'apps/docs/**'
+      - 'spec/**'
+  workflow_dispatch:
+    inputs:
+      refresh:
+        description: 'Refresh all pages'
+        required: false
+        type: boolean
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    env:
+      OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+      SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
+      PROJECT_ID: ${{ secrets.SEARCH_SUPABASE_PROJECT_ID }}
+      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SEARCH_SUPABASE_URL }}
+      SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SEARCH_SUPABASE_SERVICE_ROLE_KEY }}
+      SUPABASE_DB_PASSWORD: ${{ secrets.SEARCH_SUPABASE_DB_PASSWORD }}
+      SEARCH_GITHUB_APP_ID: ${{ secrets.SEARCH_GITHUB_APP_ID }}
+      SEARCH_GITHUB_APP_INSTALLATION_ID: ${{ secrets.SEARCH_GITHUB_APP_INSTALLATION_ID }}
+      SEARCH_GITHUB_APP_PRIVATE_KEY: ${{ secrets.SEARCH_GITHUB_APP_PRIVATE_KEY }}
+
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Download dependencies
+        run: npm ci
+
+      - name: Link Supabase project
+        run: npx supabase link --project-ref $PROJECT_ID
+
+      - name: Run migrations
+        run: npx supabase db push
+
+      - name: Update embeddings
+        working-directory: ./apps/docs
+        if: ${{ !inputs.refresh }}
+        run: npm run embeddings
+
+      - name: Refresh embeddings
+        working-directory: ./apps/docs
+        if: ${{ inputs.refresh }}
+        run: npm run embeddings:refresh

.github/workflows/studio-tests.yml

@@ -34,5 +34,8 @@ jobs:
         run: npm ci
         working-directory: ./
       - name: Run tests
+        env:
+          # Default is 2 GB, increase to have less frequent OOM errors
+          NODE_OPTIONS: "--max_old_space_size=3072"
         run: npm run test:studio
         working-directory: ./

.github/workflows/ui-tests.yml

@@ -0,0 +1,30 @@
+name: UI Tests
+
+on:
+  pull_request:
+    branches: [master]
+    paths:
+      - 'packages/ui/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:ui

.gitignore

@@ -122,5 +122,8 @@ typings/
 
 apps/new-docs/*
 
+# UI tokens
+packages/ui/tokens/**/*.json
+
 # For self-hosted logs: https://github.com/supabase/supabase/blob/86e3ab20abfdb9c3e666334d3d2f8efeef9ccf2c/docker/docker-compose-logging.yml#L101
 gcloud.json

.misspell-fixer.ignore

@@ -1 +1 @@
-^./i18n
+^./i18n

.prettierrc

@@ -5,5 +5,7 @@
   "singleQuote": true,
   "printWidth": 100,
   "endOfLine": "lf",
-  "sqlKeywordCase": "lower"
+  "sqlKeywordCase": "lower",
+  "pluginSearchDirs": false,
+  "plugins": ["prettier-plugin-sql-cst"]
 }

README.md

@@ -19,6 +19,7 @@
   - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
 - [x] File Storage. [Docs](https://supabase.com/docs/guides/storage)
+- [x] AI + Vector/Embeddings Toolkit. [Docs](https://supabase.com/docs/guides/ai)
 - [x] Dashboard
 
 ![Supabase Dashboard](https://raw.githubusercontent.com/supabase/supabase/master/apps/www/public/images/github/supabase-dashboard.png)
@@ -149,8 +150,8 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
   <tr>
     <td>Kotlin</td>
     <td><a href="https://github.com/supabase-community/supabase-kt" target="_blank" rel="noopener noreferrer">supabase-kt</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-kt" target="_blank" rel="noopener noreferrer">postgrest-kt</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-kt" target="_blank" rel="noopener noreferrer">gotrue-kt</a></td>
+    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Postgrest" target="_blank" rel="noopener noreferrer">postgrest-kt</a></td>
+    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/GoTrue" target="_blank" rel="noopener noreferrer">gotrue-kt</a></td>
     <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Realtime" target="_blank" rel="noopener noreferrer">realtime-kt</a></td>
     <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Storage" target="_blank" rel="noopener noreferrer">storage-kt</a></td>
     <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Functions" target="_blank" rel="noopener noreferrer">functions-kt</a></td>
@@ -231,7 +232,7 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
 - [Norwegian (Bokmål) / Norsk (Bokmål)](/i18n/README.nb-no.md)
 - [Persian / فارسی](/i18n/README.fa.md)
 - [Polish / Polski](/i18n/README.pl.md)
-- [Portuguese / Portuguese](/i18n/README.pt.md)
+- [Portuguese / Português](/i18n/README.pt.md)
 - [Portuguese (Brazilian) / Português Brasileiro](/i18n/README.pt-br.md)
 - [Romanian / Română](/i18n/README.ro.md)
 - [Russian / Pусский](/i18n/README.ru.md)
@@ -247,8 +248,3 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
 - [Vietnamese / Tiếng Việt](/i18n/README.vi-vn.md)
 - [List of translations](/i18n/languages.md) <!--- Keep only this -->
 
----
-
-## Sponsors
-
-[![New Sponsor](https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png)](https://github.com/sponsors/supabase)

apps/docs/.env.example

@@ -5,6 +5,9 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=
 # PRIVATE
 OPENAI_KEY=
 SUPABASE_SERVICE_ROLE_KEY=
+SEARCH_GITHUB_APP_ID=
+SEARCH_GITHUB_APP_INSTALLATION_ID=
+SEARCH_GITHUB_APP_PRIVATE_KEY=
 
 # Set IS_PLATFORM to true if you have the api keys and urls
 NEXT_PUBLIC_IS_PLATFORM=false

apps/docs/.gitignore

@@ -12,6 +12,7 @@
 .env.local
 .env.development.local
 .env.test.local
+.env.staging.local
 .env.production.local
 
 npm-debug.log*
@@ -20,4 +21,4 @@ yarn-error.log*
 
 **/*/generated/**/*
 !**/*/generated/.gitkeep
-!**/*/generated/**/.gitkeep
+!**/*/generated/**/.gitkeep

apps/docs/DEVELOPERS.md

@@ -96,4 +96,6 @@ On the Next.JS side of things, these work almost exactly the same as the client
 
 #### Search
 
-Search is handled through Algolia. When the site is built, a [search script](https://github.com/supabase/supabase/blob/master/apps/docs/scripts/build-search.ts) runs through all of the types of content, generating search objects that are sent to Algolia to index.
+Search is handled using a Supabase instance. During CI, [a script](https://github.com/supabase/supabase/blob/master/apps/docs/scripts/search/generate-embeddings.ts) aggregates all content sources (eg. guides, reference docs, etc), indexes them using OpenAI embeddings, and stores them in a Supabase database.
+
+At runtime, an [Edge Function](https://github.com/supabase/supabase/blob/master/supabase/functions) is executed that performs a similarity search between the user's query and the above content sources using [`pgvector`](https://github.com/pgvector/pgvector) embeddings.

apps/docs/components/Admonition.tsx

@@ -1,13 +1,12 @@
-import { FC } from 'react'
-import { IconInfo, IconHelpCircle, IconAlertTriangle } from 'ui'
+import { PropsWithChildren } from 'react'
+import { IconAlertTriangle, IconHelpCircle, IconInfo } from 'ui'
 
-interface Props {
+export interface AdmonitionProps {
   type: 'note' | 'tip' | 'info' | 'caution' | 'danger'
   label?: string
-  children: any
 }
 
-const Admonition: FC<Props> = ({ type = 'note', label, children }) => {
+const Admonition = ({ type = 'note', label, children }: PropsWithChildren<AdmonitionProps>) => {
   return (
     <div
       className={[

apps/docs/components/AppleSecretGenerator.tsx

@@ -0,0 +1,193 @@
+import { useState } from 'react'
+import { Input, Button } from 'ui'
+import Admonition from '~/components/Admonition'
+
+function base64URL(value: string) {
+  return globalThis.btoa(value).replace(/[=]/g, '').replace(/[+]/g, '-').replace(/[\/]/g, '_')
+}
+
+/*
+Convert a string into an ArrayBuffer
+from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
+*/
+function stringToArrayBuffer(value: string) {
+  const buf = new ArrayBuffer(value.length)
+  const bufView = new Uint8Array(buf)
+  for (let i = 0; i < value.length; i++) {
+    bufView[i] = value.charCodeAt(i)
+  }
+  return buf
+}
+
+function arrayBufferToString(buf) {
+  return String.fromCharCode.apply(null, new Uint8Array(buf))
+}
+
+const generateAppleSecretKey = async (
+  kid: string,
+  iss: string,
+  sub: string,
+  file: File
+): Promise<{ kid: string; jwt: string; exp: number }> => {
+  if (!kid) {
+    const match = file.name.match(/AuthKey_([^.]+)[.].*$/i)
+    if (match && match[1]) {
+      kid = match[1]
+    }
+  }
+
+  if (!kid) {
+    throw new Error(
+      `No Key ID provided. The file "${file.name}" does not follow the AuthKey_XXXXXXXXXX.p8 pattern. Please provide a Key ID manually.`
+    )
+  }
+
+  const contents = await file.text()
+
+  if (!contents.match(/^\s*-+BEGIN PRIVATE KEY-+[^-]+-+END PRIVATE KEY-+\s*$/i)) {
+    throw new Error(`Chosen file does not appear to be a PEM encoded PKCS8 private key file.`)
+  }
+
+  // remove PEM headers and spaces
+  const pkcs8 = stringToArrayBuffer(
+    globalThis.atob(contents.replace(/-+[^-]+-+/g, '').replace(/\s+/g, ''))
+  )
+
+  const privateKey = await globalThis.crypto.subtle.importKey(
+    'pkcs8',
+    pkcs8,
+    {
+      name: 'ECDSA',
+      namedCurve: 'P-256',
+    },
+    true,
+    ['sign']
+  )
+
+  const iat = Math.floor(Date.now() / 1000)
+  const exp = iat + 180 * 24 * 60 * 60
+
+  const jwt = [
+    base64URL(JSON.stringify({ typ: 'JWT', kid, alg: 'ES256' })),
+    base64URL(
+      JSON.stringify({
+        iss,
+        sub,
+        iat,
+        exp,
+        aud: 'https://appleid.apple.com',
+      })
+    ),
+  ]
+
+  const signature = await globalThis.crypto.subtle.sign(
+    {
+      name: 'ECDSA',
+      hash: 'SHA-256',
+    },
+    privateKey,
+    stringToArrayBuffer(jwt.join('.'))
+  )
+
+  jwt.push(base64URL(arrayBufferToString(signature)))
+
+  return { kid, jwt: jwt.join('.'), exp }
+}
+
+const AppleSecretGenerator = () => {
+  const [file, setFile] = useState({ file: null as File | null })
+  const [teamID, setTeamID] = useState('')
+  const [serviceID, setServiceID] = useState('')
+  const [keyID, setKeyID] = useState('')
+  const [secretKey, setSecretKey] = useState('')
+  const [expiresAt, setExpiresAt] = useState('')
+  const [error, setError] = useState('')
+
+  return (
+    <>
+      <Input
+        label="Account ID"
+        labelOptional="required"
+        placeholder="Apple Developer account ID, 10 alphanumeric digits"
+        descriptionText="Found in the upper-right corner of Apple Developer Center."
+        value={teamID}
+        onChange={(e) => setTeamID(e.target.value.trim())}
+      />
+      <Input
+        label="Service ID"
+        labelOptional="required"
+        placeholder="ID of the service, example: com.example.app.service"
+        descriptionText="Found under Certificates, Identifiers & Profiles in Apple Developer Center."
+        value={serviceID}
+        onChange={(e) => setServiceID(e.target.value.trim())}
+      />
+      <Input
+        label="Key ID"
+        labelOptional="(optional)"
+        placeholder="Extracted from filename, AuthKey_XXXXXXXXXX.p8"
+        descriptionText="If the file you select does not preserve the original name from Apple Developer Center, please enter the key ID."
+        value={keyID}
+        onChange={(e) => setKeyID(e.target.value.trim())}
+      />
+      <div>
+        <input
+          type="file"
+          onChange={(e) => {
+            setFile({ file: e.target.files[0] })
+          }}
+        />
+      </div>
+      <div style={{ height: '1rem' }} />
+
+      <Button
+        size="medium"
+        disabled={
+          !(
+            teamID.length === 10 &&
+            serviceID &&
+            ((globalThis && globalThis.showOpenFilePicker) || file.file)
+          )
+        }
+        onClick={async () => {
+          setError('')
+
+          try {
+            const { kid, jwt, exp } = await generateAppleSecretKey(
+              keyID,
+              teamID,
+              serviceID,
+              file.file
+            )
+            setKeyID(kid)
+            setSecretKey(jwt)
+            setExpiresAt(new Date(exp * 1000).toString())
+            setError('')
+          } catch (e: any) {
+            setError(e.message)
+            console.error(e)
+          }
+        }}
+      >
+        Generate Secret Key
+      </Button>
+
+      {error && <Admonition type="danger">{error}</Admonition>}
+
+      {secretKey && (
+        <>
+          <div style={{ height: '1rem' }} />
+          <Input
+            label="Secret Key"
+            value={secretKey}
+            descriptionText={`Valid until: ${expiresAt}. Make sure you generate a new one before then!`}
+            reveal
+            copy
+            size="medium"
+          />
+        </>
+      )}
+    </>
+  )
+}
+
+export default AppleSecretGenerator

apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.test.ts

@@ -0,0 +1,96 @@
+import { getAnchor, removeAnchor } from './CustomHTMLElements.utils'
+
+describe('CustomHTMLElementsUtils', () => {
+  describe('getAnchor', () => {
+    describe('when value is an object', () => {
+      it('returns slugified version of props.children', () => {
+        const value = {
+          props: {
+            children: 'Full Text Search',
+          },
+        }
+
+        const result = getAnchor(value)
+
+        expect(result).toStrictEqual('full-text-search')
+      })
+    })
+
+    describe('when value is an array', () => {
+      describe('when custom anchor exists', () => {
+        it('returns inner slug', () => {
+          const value = ['Proximity: <->', '[#proximity]']
+
+          const result = getAnchor(value)
+
+          expect(result).toStrictEqual('proximity')
+        })
+
+        it('trims whitespace', () => {
+          const value = ['Proximity: <->', ' [#proximity] ']
+
+          const result = getAnchor(value)
+
+          expect(result).toStrictEqual('proximity')
+        })
+      })
+
+      it('returns concatenated slug of elements', () => {
+        const value = ['Full', 'Text', 'Search']
+
+        const result = getAnchor(value)
+
+        expect(result).toStrictEqual('full-text-search')
+      })
+
+      it('trims whitespace', () => {
+        const value = [' Full ', ' Text ', ' Search ']
+
+        const result = getAnchor(value)
+
+        expect(result).toStrictEqual('full-text-search')
+      })
+
+      it('removes special characters', () => {
+        const value = ['function()']
+
+        const result = getAnchor(value)
+
+        expect(result).toStrictEqual('function')
+      })
+    })
+
+    describe('when value is a string', () => {
+      it('returns slugified version of string', () => {
+        const value = 'My (Very) Awesome Heading'
+
+        const result = getAnchor(value)
+
+        expect(result).toStrictEqual('my-very-awesome-heading')
+      })
+    })
+  })
+
+  describe('removeAnchor', () => {
+    describe('when value is an array', () => {
+      it('filters out custom anchor elements', () => {
+        const value = ['My (Very) Awesome Heading', '[#my-custom-heading]']
+
+        const result = removeAnchor(value)
+
+        expect(result).toStrictEqual(['My (Very) Awesome Heading'])
+      })
+    })
+
+    describe('when value is a string', () => {
+      it('strips out custom anchor string', () => {
+        const value = 'My (Very) Awesome Heading [#my-custom-heading]'
+
+        const result = removeAnchor(value)
+
+        // Original implementation didn't trim the resulting string - not sure if it really matters
+        expect(result).toStrictEqual('My (Very) Awesome Heading ')
+      })
+    })
+  })
+})

apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts

@@ -2,53 +2,60 @@
 export const getAnchor = (text: any): string | undefined => {
   if (typeof text === 'object') {
     if (Array.isArray(text)) {
-      const customAnchor = text.find(
-        (x) => typeof x === 'string' && x.includes('[#') && x.endsWith(']')
-      )
-      if (customAnchor !== undefined) return customAnchor.slice(2, customAnchor.indexOf(']'))
+      const customAnchor = text.find((x) => typeof x === 'string' && hasCustomAnchor(x))
+      if (customAnchor !== undefined) {
+        return parseCustomAnchor(customAnchor)
+      }
 
       const formattedText = text
         .map((x) => {
-          if (typeof x !== 'string') return x.props.children
-          else return x.trim()
+          if (typeof x !== 'string') {
+            return x.props.children
+          }
+
+          return x.trim()
         })
         .map((x) => {
-          if (typeof x !== 'string') return x
-          else
+          if (typeof x !== 'string') {
             return x
-              .toLowerCase()
-              .replace(/[^a-z0-9- ]/g, '')
-              .replace(/[ ]/g, '-')
+          }
+
+          return slugify(x)
         })
 
       return formattedText.join('-').toLowerCase()
     } else {
       const anchor = text.props.children
       if (typeof anchor === 'string') {
-        return anchor
-          .toLowerCase()
-          .replace(/[^a-z0-9- ]/g, '')
-          .replace(/[ ]/g, '-')
+        return slugify(anchor)
       }
       return anchor
     }
   } else if (typeof text === 'string') {
-    if (text.includes('[#') && text.endsWith(']')) {
-      return text.slice(text.indexOf('[#') + 2, text.indexOf(']'))
-    } else {
-      return text
-        .toLowerCase()
-        .replace(/[^a-z0-9- ]/g, '')
-        .replace(/[ ]/g, '-')
+    if (hasCustomAnchor(text)) {
+      return parseCustomAnchor(text)
     }
+    return slugify(text)
   } else {
     return undefined
   }
 }
 
+const hasCustomAnchor = (value: string): boolean => value.includes('[#') && value.includes(']')
+
+const parseCustomAnchor = (value: string): string =>
+  value.slice(value.indexOf('[#') + 2, value.indexOf(']'))
+
+const slugify = (value: string): string =>
+  value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9- ]/g, '')
+    .replace(/[ ]/g, '-')
+
 export const removeAnchor = (text: any) => {
   if (typeof text === 'object' && Array.isArray(text)) {
-    return text.filter((x) => !(typeof x === 'string' && x.includes('[#') && x.endsWith(']')))
+    return text.filter((x) => !(typeof x === 'string' && hasCustomAnchor(x)))
   } else if (typeof text === 'string') {
     if (text.indexOf('[#') > 0) return text.slice(0, text.indexOf('[#'))
     else return text
@@ -79,7 +86,7 @@ export const unHighlightSelectedTocItems = () => {
 }
 
 export const highlightSelectedNavItem = (id: string) => {
-  const navMenuItems = document.querySelectorAll('.function-link-item a')
+  const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
   // find any currently active items and remove them
   const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
@@ -87,7 +94,6 @@ export const highlightSelectedNavItem = (id: string) => {
 
   // Add active class to the current item
   navMenuItems.forEach((item) => {
-    // @ts-ignore
     if (item.href.split('/').at(-1) === id) {
       item.classList.add('text-brand-900')
     }

apps/docs/components/DocsCoverLogo.tsx

@@ -0,0 +1,497 @@
+import React from 'react'
+import { LazyMotion, domAnimation, m } from 'framer-motion'
+
+const DocsCoverLogo = () => {
+  const pathMotionConfig = {
+    initial: { pathLength: 0 },
+    animate: { pathLength: 1 },
+    transition: {
+      duration: 1,
+      delay: 0.2,
+      ease: [0.5, 0.11, 0.13, 1],
+    },
+  }
+  const logoMotionConfig = {
+    initial: { fillOpacity: 0 },
+    animate: { fillOpacity: 1 },
+    transition: {
+      duration: 1,
+      delay: 0.5,
+      ease: [0.25, 0.25, 0, 1],
+    },
+  }
+
+  return (
+    <div className="w-[60px] md:w-[150px] [&_svg]">
+      <LazyMotion features={domAnimation}>
+        <m.svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 250 228"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M124.951 5.03906V224.602"
+            stroke="url(#paint0_radial_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M125.25 191.383C167.828 191.383 202.344 156.867 202.344 114.289C202.344 71.7115 167.828 37.1953 125.25 37.1953C82.6724 37.1953 48.1562 71.7115 48.1562 114.289C48.1562 156.867 82.6724 191.383 125.25 191.383Z"
+            stroke="var(--colors-scale11)"
+            strokeOpacity="0.1"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M33.7782 58.8377C48.6666 58.8377 60.7361 46.7682 60.7361 31.8798C60.7361 16.9913 48.6666 4.92188 33.7782 4.92188C18.8898 4.92188 6.82031 16.9913 6.82031 31.8798C6.82031 46.7682 18.8898 58.8377 33.7782 58.8377Z"
+            stroke="url(#paint1_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M33.7782 223.664C48.6666 223.664 60.7361 211.594 60.7361 196.706C60.7361 181.817 48.6666 169.748 33.7782 169.748C18.8898 169.748 6.82031 181.817 6.82031 196.706C6.82031 211.594 18.8898 223.664 33.7782 223.664Z"
+            stroke="url(#paint2_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M216.724 58.8377C231.612 58.8377 243.681 46.7682 243.681 31.8798C243.681 16.9913 231.612 4.92188 216.724 4.92188C201.835 4.92188 189.766 16.9913 189.766 31.8798C189.766 46.7682 201.835 58.8377 216.724 58.8377Z"
+            stroke="url(#paint3_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M216.724 223.664C231.612 223.664 243.681 211.594 243.681 196.706C243.681 181.817 231.612 169.748 216.724 169.748C201.835 169.748 189.766 181.817 189.766 196.706C189.766 211.594 201.835 223.664 216.724 223.664Z"
+            stroke="url(#paint4_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M209.29 226.982H40.6907C18.7665 226.982 1 209.51 1 187.949V40.0333C1 18.4722 18.7665 1 40.6907 1H209.29C231.214 1 248.981 18.4722 248.981 40.0333V187.969C248.981 209.51 231.214 226.982 209.29 226.982Z"
+            stroke="url(#paint5_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M216.724 223.903H33.7779C18.719 223.903 6.5 211.684 6.5 196.625V31.9576C6.5 16.8987 18.719 4.67969 33.7779 4.67969H216.724C231.782 4.67969 244.001 16.8987 244.001 31.9576V196.625C244.001 211.704 231.802 223.903 216.724 223.903Z"
+            stroke="url(#paint6_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M60.7578 30.9199V197.027"
+            stroke="url(#paint7_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M125.252 5.01953V223.562"
+            stroke="url(#paint8_radial_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M149.809 4.83984L13.5996 178.866"
+            stroke="url(#paint9_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M239.679 46.457L99.5703 223.643"
+            stroke="url(#paint10_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M189.766 30.9199V197.027"
+            stroke="url(#paint11_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M218.024 58.7344H32.498"
+            stroke="url(#paint12_radial_0_1)"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M6.76172 95.4141H243.743"
+            stroke="url(#paint13_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M6.76172 131.869H243.743"
+            stroke="url(#paint14_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M218.024 169.846H32.498"
+            stroke="var(--colors-scale11)"
+            strokeOpacity="0.1"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <m.path
+            initial={pathMotionConfig.initial}
+            animate={pathMotionConfig.animate}
+            transition={pathMotionConfig.transition as any}
+            d="M126.559 4.6867L126.559 224.254"
+            stroke="url(#paint15_linear_0_1)"
+            strokeOpacity="0.5"
+            strokeWidth="0.7"
+            strokeMiterlimit="10"
+            strokeLinejoin="bevel"
+          />
+          <g filter="url(#filter0_d_0_1)">
+            <m.path
+              initial={logoMotionConfig.initial}
+              animate={logoMotionConfig.animate}
+              transition={logoMotionConfig.transition as any}
+              d="M125.751 174.003C125.833 179.464 134.091 181.807 137.49 177.53L188.786 112.985C194.84 105.367 189.41 94.1317 179.674 94.1317H126.964L127.046 52.5389C126.964 47.078 119.027 44.7344 115.628 49.0116L65.5801 113.556C59.5255 121.175 64.9558 132.41 74.6925 132.41H125.161L125.751 174.003Z"
+              fill="url(#paint16_linear_0_1)"
+              fillOpacity="0.79"
+              shapeRendering="crispEdges"
+            />
+            <m.path
+              initial={pathMotionConfig.initial}
+              animate={pathMotionConfig.animate}
+              transition={pathMotionConfig.transition as any}
+              d="M126.964 94.6797L126.416 94.1306L126.498 52.5425C126.459 50.117 124.68 48.3327 122.422 47.6478C120.162 46.9621 117.586 47.432 116.059 49.3499C116.059 49.3508 116.058 49.3516 116.057 49.3525L66.0131 113.892L66.0091 113.897C60.2405 121.156 65.4135 131.862 74.6925 131.862H125.161L125.709 132.402L126.299 173.995L126.299 173.995M126.964 94.6797L125.751 174.003L126.299 173.995M126.964 94.6797H179.674C188.953 94.6797 194.126 105.386 188.357 112.644L137.061 177.189C135.539 179.104 132.883 179.583 130.531 178.892C128.18 178.202 126.336 176.41 126.299 173.995M126.964 94.6797L126.299 173.995"
+              stroke="url(#paint17_linear_0_1)"
+              strokeWidth="1.09591"
+              strokeMiterlimit="10"
+              strokeLinejoin="bevel"
+              shapeRendering="crispEdges"
+            />
+          </g>
+          <defs>
+            <filter
+              id="filter0_d_0_1"
+              x="58.6515"
+              y="46.8027"
+              width="137.062"
+              height="141.703"
+              filterUnits="userSpaceOnUse"
+              colorInterpolationFilters="sRGB"
+            >
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha"
+              />
+              <feOffset dy="4.38364" />
+              <feGaussianBlur stdDeviation="2.19182" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect1_dropShadow_0_1"
+                result="shape"
+              />
+            </filter>
+            <radialGradient
+              id="paint0_radial_0_1"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(125.451 114.82) rotate(90) scale(109.781 0.5)"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </radialGradient>
+            <linearGradient
+              id="paint1_linear_0_1"
+              x1="38.9975"
+              y1="58.9958"
+              x2="18.999"
+              y2="11.9994"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint2_linear_0_1"
+              x1="43.9971"
+              y1="168.986"
+              x2="32.998"
+              y2="204.984"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint3_linear_0_1"
+              x1="221.943"
+              y1="58.9958"
+              x2="231.981"
+              y2="13.9993"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint4_linear_0_1"
+              x1="203.983"
+              y1="168.986"
+              x2="215.943"
+              y2="204.984"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint5_linear_0_1"
+              x1="121.402"
+              y1="227.645"
+              x2="121.402"
+              y2="-7.94661"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0" />
+              <stop offset="0.489583" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint6_linear_0_1"
+              x1="121.814"
+              y1="224.545"
+              x2="121.814"
+              y2="-3.99932"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0" />
+              <stop offset="0.489583" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint7_linear_0_1"
+              x1="60.7578"
+              y1="30.3703"
+              x2="60.7578"
+              y2="199.061"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0.1" />
+              <stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.1" />
+            </linearGradient>
+            <radialGradient
+              id="paint8_radial_0_1"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(125.752 114.291) rotate(90) scale(109.271 0.5)"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </radialGradient>
+            <linearGradient
+              id="paint9_linear_0_1"
+              x1="6.99856"
+              y1="0"
+              x2="200"
+              y2="6.31757"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.3" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint10_linear_0_1"
+              x1="200"
+              y1="100"
+              x2="0"
+              y2="200"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.3" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </linearGradient>
+            <linearGradient
+              id="paint11_linear_0_1"
+              x1="189.766"
+              y1="30.3703"
+              x2="189.766"
+              y2="199.061"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0.1" />
+              <stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.1" />
+            </linearGradient>
+            <radialGradient
+              id="paint12_radial_0_1"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(125.261 59.2344) rotate(90) scale(0.5 263.749)"
+            >
+              <stop stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0" />
+            </radialGradient>
+            <linearGradient
+              id="paint13_linear_0_1"
+              x1="6.99998"
+              y1="94.9749"
+              x2="242.982"
+              y2="94.9749"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0.5" />
+              <stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.5" />
+            </linearGradient>
+            <linearGradient
+              id="paint14_linear_0_1"
+              x1="6.99998"
+              y1="131.43"
+              x2="242.982"
+              y2="131.43"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0.5" />
+              <stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.5" />
+            </linearGradient>
+            <linearGradient
+              id="paint15_linear_0_1"
+              x1="126.559"
+              y1="224.98"
+              x2="126.559"
+              y2="1.99785"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="var(--colors-scale10)" stopOpacity="0.1" />
+              <stop offset="0.505208" stopColor="var(--colors-scale11)" stopOpacity="0.5" />
+              <stop offset="1" stopColor="var(--colors-scale10)" stopOpacity="0.1" />
+            </linearGradient>
+            <linearGradient
+              id="paint16_linear_0_1"
+              x1="155.11"
+              y1="46.8027"
+              x2="126.979"
+              y2="206.049"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#212121" />
+              <stop offset="1" stopColor="white" stopOpacity="0.12" />
+            </linearGradient>
+            <linearGradient
+              id="paint17_linear_0_1"
+              x1="191.328"
+              y1="82.7684"
+              x2="103.041"
+              y2="175.889"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#868585" />
+              <stop offset="0.208333" stopColor="#838383" />
+              <stop offset="1" stopColor="#5A5A5A" />
+            </linearGradient>
+          </defs>
+        </m.svg>
+      </LazyMotion>
+    </div>
+  )
+}
+
+export default DocsCoverLogo

apps/docs/components/FooterHelpCallout.tsx

@@ -5,7 +5,7 @@ export type FooterHelpCalloutType = 'default' | 'postgres'
 const content = {
   default: {
     title: 'Need some help?',
-    description: `Not to worry, our specialist engineers are here to help. Submit a support ticket through the [Dashboard](https://app.supabase.com/support/new).`,
+    description: `Not to worry, our specialist engineers are here to help. Submit a support ticket through the [Dashboard](https://supabase.com/dashboard/support/new).`,
   },
   postgres: {
     title: 'Looking for Serverless Postgres?',

apps/docs/components/FunctionsExamples.tsx

@@ -6,6 +6,12 @@ const examples = [
     description: 'Use the Supabase client inside your Edge Function.',
     href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts',
   },
+  {
+    name: 'Type-Safe SQL with Kysely',
+    description:
+      'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.',
+    href: '/guides/functions/kysely-postgres',
+  },
   {
     name: 'With CORS headers',
     description: 'Send CORS headers for invoking from the browser.',

apps/docs/components/HomePageCover.tsx

@@ -0,0 +1,129 @@
+import Link from 'next/link'
+import { IconBackground, IconPanel, IconPlay } from 'ui'
+import { useBreakpoint } from 'common'
+import DocsCoverLogo from './DocsCoverLogo'
+
+const HomePageCover = (props) => {
+  const isXs = useBreakpoint(639)
+  const iconSize = isXs ? 'sm' : 'lg'
+
+  const GettingStarted = () => (
+    <div
+      className="
+        border border-scale-400 bg-scale-200
+        relative overflow-hidden
+        grid grid-cols-12
+        rounded-lg
+        p-5 md:p-8
+        "
+    >
+      <div className="col-span-full flex flex-col md:flex-row xl:flex-col justify-between gap-1 md:gap-3">
+        <div className="md:max-w-xs xl:max-w-none">
+          <div className="flex items-center gap-3 mb-3">
+            <IconBackground>
+              <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
+            </IconBackground>
+            <h3 className="text-2xl m-0">Getting Started</h3>
+          </div>
+          <p className="text-scale-1100 text-sm">
+            Discover how to set up a database to an app making queries in just a few minutes.
+          </p>
+        </div>
+        <div className="flex flex-wrap md:grid md:grid-cols-4 2xl:grid-cols-7 gap-2 sm:gap-3">
+          <Link href={`/guides/getting-started/quickstarts/reactjs`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="ReactJS"
+                icon="/docs/img/icons/react-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/nextjs`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="NextJS"
+                icon="/docs/img/icons/nextjs-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/redwoodjs`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="RedwoodJS"
+                icon="/docs/img/icons/redwoodjs-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/flutter`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="Flutter"
+                icon="/docs/img/icons/flutter-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/sveltekit`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="SvelteKit"
+                icon="/docs/img/icons/svelte-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/solidjs`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="SolidJS"
+                icon="/docs/img/icons/solidjs-icon"
+              />
+            </a>
+          </Link>
+          <Link href={`/guides/getting-started/quickstarts/vue`} passHref>
+            <a className="no-underline">
+              <IconPanel
+                iconSize={iconSize}
+                hideArrow
+                tooltip="Vue"
+                icon="/docs/img/icons/vuejs-icon"
+              />
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="w-full bg-scale-100 border-b prose dark:prose-dar max-w-none mb-16 md:mb-12 xl:mb-0">
+      <div className="max-w-7xl px-5 mx-auto py-8 sm:pb-16 sm:pt-12 xl:pt-16 flex flex-col xl:flex-row justify-between gap-12 xl:gap-12">
+        <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl">
+          <DocsCoverLogo />
+          <div className="flex flex-col">
+            <h1 className="m-0 mb-3 text-2xl sm:text-3xl">{props.meta?.title}</h1>
+            <p className="m-0 text-scale-1100">
+              Learn how to get up and running with Supabase through tutorials, APIs and platform
+              resources.
+            </p>
+          </div>
+        </div>
+        <div className="w-full xl:max-w-[365px] 2xl:max-w-[608px] -mb-40">
+          <GettingStarted />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HomePageCover

apps/docs/components/MDX/ai/quickstart_hf_deployment.mdx

@@ -0,0 +1,5 @@
+## Deployment
+
+If you have your own infrastructure for deploying Python apps, you can continue to use `vecs` as described in this guide.
+
+Alternatively if you would like to quickly deploy using Supabase, check out our guide on using the [Hugging Face Inference API](/docs/guides/ai/hugging-face) in Edge Functions using TypeScript.

apps/docs/components/MDX/database_setup.mdx

@@ -0,0 +1,18 @@
+import { Tabs } from 'ui'
+export const TabPanel = Tabs.Panel
+
+## Project setup
+
+Let's create a new Postgres database. This is as simple as starting a new Project in Supabase:
+
+1. [Create a new project](https://database.new/) in the Supabase dashboard.
+1. Enter your project details. Remember to store your password somewhere safe.
+
+Your database will be available in less than a minute.
+
+**Finding your credentials:**
+
+You can find your project credentials inside the project [settings](https://app.supabase.com/project/_/settings/), including:
+
+- [Database credentials](https://app.supabase.com/project/_/settings/database): connection strings and connection pooler details.
+- [API credentials](https://app.supabase.com/project/_/settings/database): your serverless API URL and `anon` / `service_role` keys.

apps/docs/components/MDX/social_provider_settings_supabase.mdx

@@ -3,4 +3,4 @@
 - Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
 - Click on **{props.provider}** from the accordion list to expand and turn **{props.provider} Enabled** to ON
 - Enter your **{props.provider} Client ID** and **{props.provider} Client Secret** saved in the previous step
-- Click `Save`
+- Click `Save`

apps/docs/components/Navigation/Footer.tsx

@@ -1,66 +1,163 @@
-import Image from 'next/image'
 import Link from 'next/link'
-import { Button, IconGitHub, IconTwitter, IconYoutube } from '~/../../packages/ui'
-import footerData from '~/data/footer.json'
-import { useTheme } from 'common/Providers'
+import { Button } from 'ui'
+import { primaryLinks, secondaryLinks } from '~/data/footer'
+import { LayoutMainContent } from '../../layouts/DefaultLayout'
 
-const Footer = () => {
-  const { isDarkMode } = useTheme()
-  return (
-    <div>
-      <hr className="border-scale-400  mt-8"></hr>
-      <div className="flex gap-4 items-center mt-6 justify-between">
-        <div className="flex flex-col lg:flex-row gap-3 ">
-          <span className="text-xs text-scale-900">Supabase 2022</span>
-          <span className="text-xs text-scale-900">—</span>
-          {footerData.map((item) => (
-            <Link href={item.url} key={item.url}>
-              <a className="text-xs text-scale-800 hover:underline">{item.title}</a>
-            </Link>
-          ))}
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            type="text"
-            as="a"
-            // @ts-ignore
-            href="https://youtube.com/c/supabase"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <IconYoutube size={16} />
-          </Button>
-          <Button
-            type="text"
-            as="a"
-            // @ts-ignore
-            href="https://twitter.com/supabase"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <IconTwitter size={16} />
-          </Button>
-          <Button
-            type="text"
-            as="a"
-            // @ts-ignore
-            href="https://discord.supabase.com/"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16">
-              <path
+const Footer = () => (
+  <LayoutMainContent className="pt-0">
+    <div className="mt-16">
+      <ul className="flex flex-col gap-2">
+        {primaryLinks.map(({ url, featherIcon: Icon, icon, text, ctaLabel }) => (
+          <li key={url} className="flex items-center gap-1 text-xs text-scale-900">
+            {icon && (
+              <svg
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
                 fill="none"
-                fillRule="nonzero"
-                stroke={`${isDarkMode ? '#fff' : '#333'}`}
-                d="M16.238 2.16a14.628 14.628 0 0 0-3.664-1.159.055.055 0 0 0-.059.028c-.158.288-.333.662-.456.957a13.432 13.432 0 0 0-4.115 0 9.76 9.76 0 0 0-.464-.957.057.057 0 0 0-.058-.028 14.587 14.587 0 0 0-3.664 1.16.053.053 0 0 0-.024.02C1.4 5.74.76 9.21 1.074 12.637c.002.017.011.033.024.043a14.813 14.813 0 0 0 4.494 2.318.058.058 0 0 0 .064-.02c.346-.483.654-.992.92-1.527a.059.059 0 0 0-.032-.08c-.49-.19-.956-.421-1.404-.684a.06.06 0 0 1-.006-.097c.094-.072.189-.148.279-.223a.055.055 0 0 1 .058-.008c2.946 1.372 6.135 1.372 9.046 0a.055.055 0 0 1 .06.007 7.2 7.2 0 0 0 .279.224.06.06 0 0 1-.005.097 9.143 9.143 0 0 1-1.405.683.06.06 0 0 0-.03.081c.27.534.578 1.043.918 1.526.014.02.04.029.063.021A14.763 14.763 0 0 0 18.9 12.68a.06.06 0 0 0 .023-.042c.376-3.962-.628-7.404-2.66-10.455a.046.046 0 0 0-.024-.021Zm-9.223 8.39c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.717 1.851-1.618 1.851Zm5.981 0c-.887 0-1.618-.831-1.618-1.852 0-1.02.717-1.851 1.618-1.851.908 0 1.632.838 1.618 1.851 0 1.02-.71 1.851-1.618 1.851Z"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d={icon}
+                  stroke="var(--colors-scale9)"
+                  strokeWidth={0.7}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+            {Icon && <Icon width={16} height={16} />}
+            <p>{text}</p>
+            <Link href={url} passHref>
+              <a
+                className="text-brand-900 hover:underline"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                {ctaLabel}
+              </a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <hr className="border-scale-400 my-6"></hr>
+    <div className="flex gap-4 items-center justify-between">
+      <div className="flex flex-col lg:flex-row gap-3 ">
+        <Link href="https://supabase.com/">
+          <a className="text-xs text-scale-900">&copy; Supabase Inc</a>
+        </Link>
+        <span className="text-xs text-scale-900">—</span>
+        {secondaryLinks.map((item) => (
+          <Link href={item.url} key={item.url}>
+            <a className="text-xs text-scale-800 hover:underline">{item.title}</a>
+          </Link>
+        ))}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          type="text"
+          as="a"
+          // @ts-ignore
+          href="https://github.com/supabase/supabase"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 17 17"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M8.66832 1.55469C4.98649 1.55469 2.00195 4.54402 2.00195 8.23269C2.00195 11.1827 3.91187 13.686 6.56108 14.5687C6.8944 14.63 7.01573 14.424 7.01573 14.2467C7.01573 14.0887 7.0104 13.668 7.00706 13.1114C5.15248 13.5147 4.76116 12.216 4.76116 12.216C4.45851 11.444 4.0212 11.2387 4.0212 11.2387C3.41589 10.8254 4.06719 10.8334 4.06719 10.8334C4.73583 10.88 5.08782 11.5214 5.08782 11.5214C5.68246 12.5414 6.64841 12.2467 7.02773 12.076C7.08906 11.6447 7.26105 11.3507 7.45171 11.184C5.97178 11.0154 4.41518 10.442 4.41518 7.88335C4.41518 7.15469 4.67517 6.55802 5.10115 6.09135C5.03248 5.92269 4.80383 5.24335 5.16648 4.32469C5.16648 4.32469 5.72645 4.14469 6.99973 5.00869C7.54355 4.86036 8.10464 4.78482 8.66832 4.78402C9.23496 4.78669 9.80494 4.86069 10.3376 5.00869C11.6102 4.14469 12.1688 4.32402 12.1688 4.32402C12.5328 5.24335 12.3035 5.92269 12.2355 6.09135C12.6621 6.55802 12.9208 7.15469 12.9208 7.88335C12.9208 10.4487 11.3615 11.0134 9.87694 11.1787C10.1163 11.3847 10.3289 11.792 10.3289 12.4154C10.3289 13.3074 10.3209 14.028 10.3209 14.2467C10.3209 14.4254 10.4409 14.6334 10.7796 14.568C12.107 14.1228 13.261 13.2716 14.0784 12.1347C14.8958 10.9979 15.3353 9.6329 15.3347 8.23269C15.3347 4.54402 12.3495 1.55469 8.66832 1.55469Z"
+              fill="var(--colors-scale9)"
+            />
+          </svg>
+        </Button>
+        <Button
+          type="text"
+          as="a"
+          // @ts-ignore
+          href="https://youtube.com/c/supabase"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <svg
+            width="16"
+            height="17"
+            viewBox="0 0 16 17"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
+              fill="var(--colors-scale9)"
+            />
+          </svg>
+        </Button>
+        <Button
+          type="text"
+          as="a"
+          // @ts-ignore
+          href="https://twitter.com/supabase"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 17 17"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.52713 13.7223C10.5582 13.7223 13.3101 9.55365 13.3101 5.93898C13.3101 5.82032 13.3101 5.70232 13.3021 5.58565C13.8375 5.198 14.2996 4.71806 14.6667 4.16832C14.1675 4.38965 13.6378 4.53483 13.0955 4.59898C13.6665 4.25702 14.0939 3.71922 14.2981 3.08565C13.7612 3.40424 13.1739 3.6288 12.5615 3.74965C12.1491 3.31083 11.6035 3.02021 11.0093 2.92279C10.4151 2.82537 9.80528 2.92658 9.27438 3.21076C8.74347 3.49494 8.32106 3.94623 8.07255 4.49476C7.82403 5.04328 7.76328 5.65844 7.89969 6.24498C6.81213 6.19048 5.74819 5.90787 4.77693 5.4155C3.80567 4.92313 2.9488 4.232 2.26194 3.38698C1.91217 3.98912 1.80502 4.70193 1.96231 5.38029C2.1196 6.05866 2.52951 6.65157 3.10857 7.03832C2.67343 7.02572 2.2477 6.90865 1.86729 6.69698V6.73165C1.86755 7.36318 2.08621 7.97519 2.4862 8.46389C2.88618 8.95259 3.44287 9.28791 4.06186 9.41298C3.65909 9.52279 3.2365 9.53876 2.82658 9.45965C3.00135 10.0033 3.34168 10.4787 3.79996 10.8194C4.25824 11.1601 4.81154 11.349 5.38247 11.3597C4.81524 11.8054 4.16572 12.1349 3.47104 12.3293C2.77636 12.5238 2.05017 12.5794 1.33398 12.493C2.585 13.2959 4.04066 13.7217 5.52713 13.7197"
+              fill="var(--colors-scale9)"
+            />
+          </svg>
+        </Button>
+        <Button
+          type="text"
+          as="a"
+          // @ts-ignore
+          href="https://discord.supabase.com/"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 17 17"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clipPath="url(#clip0_1182_99731)">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.8781 3.13594C12.8583 2.66802 11.7648 2.32328 10.6215 2.12583C10.6006 2.12202 10.5798 2.13154 10.5691 2.15059C10.4285 2.40073 10.2727 2.72706 10.1636 2.98356C8.93387 2.79945 7.71044 2.79945 6.50592 2.98356C6.39681 2.72136 6.23538 2.40073 6.09411 2.15059C6.08339 2.13218 6.06259 2.12265 6.04176 2.12583C4.89905 2.32265 3.80554 2.66739 2.78517 3.13594C2.77633 3.13975 2.76876 3.14611 2.76374 3.15435C0.689563 6.25326 0.12136 9.276 0.400102 12.2613C0.401363 12.2759 0.409561 12.2898 0.420913 12.2987C1.78939 13.3037 3.115 13.9139 4.41599 14.3183C4.43681 14.3247 4.45887 14.317 4.47212 14.2999C4.77987 13.8796 5.0542 13.4364 5.28941 12.9704C5.3033 12.9431 5.29005 12.9107 5.26167 12.9C4.82654 12.7349 4.4122 12.5336 4.01364 12.3051C3.98212 12.2867 3.97959 12.2416 4.00859 12.22C4.09247 12.1571 4.17636 12.0917 4.25645 12.0257C4.27094 12.0136 4.29113 12.0111 4.30816 12.0187C6.92655 13.2142 9.76126 13.2142 12.3488 12.0187C12.3658 12.0105 12.386 12.013 12.4011 12.0251C12.4812 12.0911 12.5651 12.1571 12.6496 12.22C12.6786 12.2416 12.6767 12.2867 12.6452 12.3051C12.2466 12.5381 11.8323 12.7349 11.3965 12.8993C11.3681 12.9101 11.3555 12.9431 11.3694 12.9704C11.6097 13.4358 11.884 13.879 12.1861 14.2993C12.1987 14.317 12.2214 14.3247 12.2422 14.3183C13.5495 13.9139 14.8751 13.3037 16.2436 12.2987C16.2556 12.2898 16.2631 12.2765 16.2644 12.2619C16.598 8.8106 15.7056 5.81265 13.8989 3.15498C13.8944 3.14611 13.8869 3.13975 13.8781 3.13594ZM5.68043 10.4435C4.89211 10.4435 4.24257 9.71978 4.24257 8.83093C4.24257 7.94207 4.87952 7.21831 5.68043 7.21831C6.48763 7.21831 7.13089 7.94843 7.11827 8.83093C7.11827 9.71978 6.48132 10.4435 5.68043 10.4435ZM10.9967 10.4435C10.2084 10.4435 9.55884 9.71978 9.55884 8.83093C9.55884 7.94207 10.1958 7.21831 10.9967 7.21831C11.8039 7.21831 12.4471 7.94843 12.4345 8.83093C12.4345 9.71978 11.8039 10.4435 10.9967 10.4435Z"
+                fill="var(--colors-scale9)"
               />
-            </svg>
-          </Button>
-        </div>
+            </g>
+            <defs>
+              <clipPath id="clip0_1182_99731">
+                <rect
+                  width="15.9993"
+                  height="16"
+                  fill="white"
+                  transform="translate(0.333984 0.222656)"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </Button>
       </div>
     </div>
-  )
-}
+  </LayoutMainContent>
+)
 
 export default Footer

apps/docs/components/Navigation/Navigation.types.ts

@@ -9,8 +9,8 @@ export interface NavMenuGroup {
 
 export interface NavMenuSection {
   name: string
-  url?: string
-  items: NavMenuSection[]
+  url?: `/${string}`
+  items: Partial<NavMenuSection>[]
 }
 
 export interface References {
@@ -22,3 +22,21 @@ export interface References {
     currentVersion?: string
   }
 }
+
+type MenuItem = {
+  label: string
+  icon?: string
+  href?: `/${string}` | `https://${string}`
+  level?: string
+  hasLightIcon?: boolean
+  community?: boolean
+}
+
+export type HomepageMenuItems = MenuItem[][]
+
+export type NavMenuConstant = Readonly<{
+  title: string
+  icon: string
+  url?: `/${string}`
+  items: ReadonlyArray<Partial<NavMenuSection>>
+}>

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

@@ -4,155 +4,18 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Fragment } from 'react'
 import { Badge } from '~/../../packages/ui'
+import { cn } from 'ui/src/utils/cn'
+import { HOMEPAGE_MENU_ITEMS } from './NavigationMenu.constants'
+import HomeMenuIconPicker from './HomeMenuIconPicker'
 
-const home = [
-  [
-    {
-      label: 'Home',
-      icon: '/img/icons/menu/home',
-      href: '/',
-      level: 'home',
-    },
-    {
-      label: 'Getting Started',
-      icon: '/img/icons/menu/getting-started',
-      href: '/guides/getting-started',
-      level: 'gettingstarted',
-    },
-  ],
-  [
-    {
-      label: 'Database',
-      icon: '/img/icons/menu/database',
-      href: '/guides/database',
-      level: 'database',
-    },
-    {
-      label: 'Serverless APIs',
-      icon: '/img/icons/menu/reference',
-      href: '/guides/api',
-      level: 'api',
-    },
-    {
-      label: 'Auth',
-      icon: '/img/icons/menu/auth',
-      href: '/guides/auth',
-      level: 'auth',
-    },
-    {
-      label: 'Edge Functions',
-      icon: '/img/icons/menu/functions',
-      href: '/guides/functions',
-      level: 'functions',
-    },
-    {
-      label: 'Realtime',
-      icon: '/img/icons/menu/realtime',
-      href: '/guides/realtime',
-      level: 'realtime',
-    },
-    {
-      label: 'Storage',
-      icon: '/img/icons/menu/storage',
-      href: '/guides/storage',
-      level: 'storage',
-    },
-  ],
-  [
-    {
-      label: 'Platform',
-      icon: '/img/icons/menu/platform',
-      href: '/guides/platform',
-      level: 'platform',
-    },
-    {
-      label: 'Resources',
-      icon: '/img/icons/menu/platform',
-      href: '/guides/resources',
-      level: 'resources',
-    },
-    {
-      label: 'Self-Hosting',
-      icon: '/img/icons/menu/platform',
-      href: '/guides/self-hosting',
-      level: 'self_hosting',
-    },
-    {
-      label: 'Integrations',
-      icon: '/img/icons/menu/integrations',
-      hasLightIcon: true,
-      href: '/guides/integrations',
-      level: 'integrations',
-    },
-  ],
-  [
-    {
-      label: 'Client Library Reference',
-    },
-    {
-      label: 'JavaScript',
-      icon: '/img/icons/menu/reference-javascript',
-      href: '/reference/javascript/introduction',
-      level: 'reference_javascript',
-    },
-    {
-      label: 'Flutter',
-      icon: '/img/icons/menu/reference-dart',
-      href: '/reference/dart/introduction',
-      level: 'reference_dart',
-    },
-    {
-      label: 'Python',
-      icon: '/img/icons/menu/reference-python',
-      href: '/reference/python/introduction',
-      level: 'reference_python',
-      community: true,
-    },
-    {
-      label: 'C#',
-      icon: '/img/icons/menu/reference-csharp',
-      href: '/reference/csharp/introduction',
-      level: 'reference_csharp',
-      community: true,
-    },
-    {
-      label: 'Swift',
-      icon: '/img/icons/menu/reference-swift',
-      href: '/reference/swift/introduction',
-      level: 'reference_swift',
-      community: true,
-    },
-    {
-      label: 'Tools',
-    },
-    {
-      label: 'Management API',
-      icon: '/img/icons/menu/reference-api',
-      href: '/reference/api/introduction',
-      level: 'reference_javascript',
-    },
-    {
-      label: 'Supabase CLI',
-      icon: '/img/icons/menu/reference-cli',
-      href: '/guides/cli',
-      level: 'reference_javascript',
-    },
-  ],
-]
-
-const NavigationMenuHome = ({ active }) => {
+const NavigationMenuHome = () => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
   return (
-    <div
-      className={[
-        'transition-all duration-150 ease-out',
-        active ? 'opacity-100 ml-0 delay-150' : 'opacity-0 -ml-8 invisible absolute',
-      ].join(' ')}
-    >
-      <ul className="relative w-full flex flex-col gap-4">
-        {home.map((section, sectionIndex) => {
+    <div className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150">
+      <ul className="relative w-full flex flex-col gap-4 pb-5">
+        {HOMEPAGE_MENU_ITEMS.map((section, sectionIndex) => {
           return (
             <Fragment key={`section-container-${sectionIndex}-border`}>
               {sectionIndex !== 0 && (
@@ -162,16 +25,19 @@ const NavigationMenuHome = ({ active }) => {
                 ></div>
               )}
               <div key={`section-${sectionIndex}`}>
-                <div className="flex flex-col gap-3">
-                  {section.map((link) => {
+                <div className="flex flex-col gap-4">
+                  {section.map((link, i) => {
                     if (!link.href) {
                       return (
-                        <span
+                        <div
                           key={link.label}
-                          className="font-mono uppercase text-xs text-scale-900"
+                          className={cn(
+                            'font-mono uppercase text-xs text-scale-900 ',
+                            i !== 0 && 'mt-4'
+                          )}
                         >
                           {link.label}
-                        </span>
+                        </div>
                       )
                     } else {
                       return (
@@ -179,19 +45,11 @@ const NavigationMenuHome = ({ active }) => {
                           <a>
                             <li
                               className={[
-                                'group flex items-center gap-3',
-                                'text-base transition-all duration-150 text-scale-1200 hover:text-brand-900 hover:cursor-pointer ',
+                                'group flex items-center gap-2',
+                                'text-sm transition-all duration-150 text-scale-1100 hover:text-scale-1200  hover:cursor-pointer ',
                               ].join(' ')}
                             >
-                              <Image
-                                alt={link.label}
-                                src={`${router.basePath}${
-                                  isDarkMode ? link.icon : `${link.icon}-light`
-                                }${!link.icon.includes('png') ? '.svg' : ''}`}
-                                width={17}
-                                height={17}
-                                className="w-4 h-4 group-hover:scale-110 ease-out transition-all"
-                              />
+                              {link?.icon && <HomeMenuIconPicker icon={link.icon} />}
                               {link.label}
                               {link.community && <Badge size="small">Community</Badge>}
                             </li>

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import {
+  IconMenuApi,
+  IconMenuAuth,
+  IconMenuCli,
+  IconMenuCsharp,
+  IconMenuDatabase,
+  IconMenuEdgeFunctions,
+  IconMenuFlutter,
+  IconMenuGettingStarted,
+  IconMenuHome,
+  IconMenuIntegrations,
+  IconMenuJavascript,
+  IconMenuPlatform,
+  IconMenuPython,
+  IconMenuRealtime,
+  IconMenuResources,
+  IconMenuSelfHosting,
+  IconMenuServerlessApis,
+  IconMenuStorage,
+  IconMenuSwift,
+  IconMenuStatus,
+  IconMenuKotlin,
+  IconMenuAI,
+} from './HomeMenuIcons'
+
+function getMenuIcon(menuKey: string, width: number = 16, height: number = 16) {
+  switch (menuKey) {
+    case 'home':
+      return <IconMenuHome width={width} height={height} />
+    case 'getting-started':
+      return <IconMenuGettingStarted width={width} height={height} />
+    case 'database':
+      return <IconMenuDatabase width={width} height={height} />
+    case 'serverless-apis':
+      return <IconMenuServerlessApis width={width} height={height} />
+    case 'auth':
+      return <IconMenuAuth width={width} height={height} />
+    case 'edge-functions':
+      return <IconMenuEdgeFunctions width={width} height={height} />
+    case 'realtime':
+      return <IconMenuRealtime width={width} height={height} />
+    case 'storage':
+      return <IconMenuStorage width={width} height={height} />
+    case 'ai':
+      return <IconMenuAI width={width} height={height} />
+    case 'platform':
+      return <IconMenuPlatform width={width} height={height} />
+    case 'resources':
+      return <IconMenuResources width={width} height={height} />
+    case 'self-hosting':
+      return <IconMenuSelfHosting width={width} height={height} />
+    case 'integrations':
+      return <IconMenuIntegrations width={width} height={height} />
+    case 'reference-javascript':
+      return <IconMenuJavascript width={width} height={height} />
+    case 'reference-dart':
+      return <IconMenuFlutter width={width} height={height} />
+    case 'reference-python':
+      return <IconMenuPython width={width} height={height} />
+    case 'reference-csharp':
+      return <IconMenuCsharp width={width} height={height} />
+    case 'reference-swift':
+      return <IconMenuSwift width={width} height={height} />
+    case 'reference-kotlin':
+      return <IconMenuKotlin width={width} height={height} />
+    case 'reference-api':
+      return <IconMenuApi width={width} height={height} />
+    case 'reference-cli':
+      return <IconMenuCli width={width} height={height} />
+    case 'status':
+      return <IconMenuStatus width={width} height={height} />
+    default:
+      return <IconMenuPlatform width={width} height={height} />
+  }
+}
+
+type HomeMenuIconPickerProps = {
+  icon: string
+  width?: number
+  height?: number
+}
+
+export default function HomeMenuIconPicker({
+  icon,
+  width = 16,
+  height = 16,
+}: HomeMenuIconPickerProps) {
+  return getMenuIcon(icon, width, height)
+}

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

@@ -0,0 +1,441 @@
+type HomeMenuIcon = {
+  width?: number
+  height?: number
+}
+export function IconMenuHome({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.889 13.83V8h4.222v5.83M3 5.494v8.338h10V5.54L7.994 2.02 3 5.493Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuApi({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.7118 15.4651C10.8778 15.8159 9.96154 16.0098 9 16.0098C8.03846 16.0098 7.1222 15.8159 6.28818 15.4651M2.42438 11.4156C2.14983 10.6654 2 9.85506 2 9.00977C2 8.16447 2.14983 7.35417 2.42438 6.60397M6.28818 2.55442C7.1222 2.20364 8.03846 2.00977 9 2.00977C9.96154 2.00977 10.8778 2.20364 11.7118 2.55442M15.4553 6.29795C15.8061 7.13197 16 8.04823 16 9.00977C16 9.97131 15.8061 10.8876 15.4553 11.7216M10.7427 10.861L13.0078 13.1261M4.99476 5.11305L7.25997 7.37826M7.14874 10.7525L4.88369 13.0176M12.8967 5.00452L10.6315 7.26974M6.08663 9.00977C6.08663 7.40076 7.39099 6.0964 9 6.0964C10.609 6.0964 11.9134 7.40076 11.9134 9.00977C11.9134 10.6188 10.609 11.9231 9 11.9231C7.39099 11.9231 6.08663 10.6188 6.08663 9.00977ZM3.10575 3.11551C3.58524 2.63602 4.36265 2.63602 4.84214 3.11551C5.32164 3.59501 5.32164 4.37242 4.84214 4.85191C4.36265 5.3314 3.58524 5.3314 3.10575 4.85191C2.62625 4.37242 2.62625 3.59501 3.10575 3.11551ZM13.1579 13.1676C13.6373 12.6881 14.4148 12.6881 14.8943 13.1676C15.3737 13.6471 15.3737 14.4245 14.8943 14.904C14.4148 15.3835 13.6373 15.3835 13.1579 14.904C12.6784 14.4245 12.6784 13.6471 13.1579 13.1676ZM14.8948 3.11549C15.3743 3.59498 15.3743 4.37239 14.8948 4.85189C14.4153 5.33138 13.6379 5.33138 13.1584 4.85189C12.6789 4.37239 12.6789 3.59498 13.1584 3.11549C13.6379 2.636 14.4153 2.636 14.8948 3.11549ZM4.84214 13.1676C5.32164 13.6471 5.32164 14.4245 4.84214 14.904C4.36265 15.3835 3.58524 15.3835 3.10575 14.904C2.62625 14.4245 2.62625 13.6471 3.10575 13.1676C3.58524 12.6881 4.36265 12.6881 4.84214 13.1676Z"
+        stroke="#A0A0A0"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuAuth({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.494 9.975h5m-5 0v2h5v-2m-5 0v-2h5v2M10 5V3a2 2 0 1 0-4 0v2m6.473 0v9h-9V5h9Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuCli({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m5.266 5.552 2.4 2.401-2.4 2.402M8 10.149h3M2 2h12v12H2V2Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuCsharp({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m2.242 11.3.004-.003a1.191 1.191 0 0 1-.134-.57V5.27c0-.442.185-.784.57-1.005.444-.259 1.393-.804 2.33-1.343 1.019-.587 2.024-1.165 2.35-1.356.42-.247.826-.254 1.25-.01l2.37 1.364 2.336 1.345c.189.109.33.247.425.414.098.167.145.366.145.587V10.73c-.001.216-.048.407-.138.573a1.089 1.089 0 0 1-.432.428l-1.786 1.028c-.973.56-1.947 1.12-2.92 1.682-.388.228-.767.236-1.155.042a1.65 1.65 0 0 1-.103-.056c-.382-.227-1.702-.986-2.881-1.664-.747-.429-1.437-.826-1.799-1.036a1.137 1.137 0 0 1-.432-.428Zm7.452-2.351a1.95 1.95 0 0 1-1.698.994 1.94 1.94 0 0 1-1.69-.983A1.946 1.946 0 0 1 9.68 7.02l1.7-.98a3.91 3.91 0 1 0-3.385 5.866 3.913 3.913 0 0 0 3.4-1.974l-1.701-.983Zm2.151-1.88h-.388v.316h-.312v.388h.312v.468h-.312v.388h.312v.316h.388v-.316h.472v.316h.388v-.316h.316v-.388h-.316v-.468h.316v-.388h-.316V7.07h-.388v.316h-.472V7.07Zm0 1.172v-.468h.472v.468h-.472Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuDatabase({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.502 6h8.996v4H3.502V6ZM3 10.002h10v4H3v-4ZM3 2h10v4H3V2Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuServerlessApis({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.923 9.927A5.833 5.833 0 0 1 1.14 7m2.877-5.046A5.833 5.833 0 0 1 7 1.14m5.13 3.025c.465.84.73 1.807.73 2.835m-2.883 5.049A5.832 5.832 0 0 1 7 12.859m6.172-10.027a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM4.81 11.148a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm8.362 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM4.81 2.832a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuEdgeFunctions({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.857 11.36a7 7 0 0 1 9.41-9.551M4.774 14.212a7 7 0 0 0 9.41-9.497m-8.812 7.845a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9.296-9.13a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM12.5 8a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuExtensions({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.418 2.098v5m-2.5-2.5h5m-11.836-2.5h5v5h-5v-5Zm5.185 9.145a2.685 2.685 0 1 1-5.37 0 2.685 2.685 0 0 1 5.37 0Zm1.651-2.396h5v5h-5v-5Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuFlutter({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m11.857 2-3.718.004L2.143 8l1.85 1.852 1.626-1.617L11.857 2ZM8.245 7.531c-.052-.002-.107-.005-.14.04l-3.198 3.197 1.836 1.825-.002.002 1.315 1.316a.549.549 0 0 1 .026.025c.035.036.074.074.13.062.607-.002 1.214-.002 1.821-.001l1.822-.001-3.232-3.235 3.23-3.23H8.31a.39.39 0 0 1-.064 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuGettingStarted({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m13.429 8-4.681 2.702-4.681 2.703V2.594l4.68 2.703 4.682 2.702Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuIntegrations({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.83 1.453v5.619m-2.809-2.81h5.62M1.338 1.454h5.62v5.619h-5.62V1.453Zm5.827 10.278a3.017 3.017 0 1 1-6.035 0 3.017 3.017 0 0 1 6.035 0ZM9.02 9.038h5.62v5.619H9.02V9.038Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuJavascript({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 2h12v12H2V2Zm9.173 10.06c-.556 0-.87-.29-1.112-.685l-.916.533c.33.654 1.007 1.153 2.054 1.153 1.071 0 1.869-.556 1.869-1.572 0-.941-.541-1.36-1.5-1.771l-.281-.12c-.484-.21-.693-.347-.693-.686 0-.273.209-.483.54-.483.323 0 .532.137.725.483l.878-.563c-.371-.654-.887-.903-1.604-.903-1.007 0-1.651.644-1.651 1.49 0 .917.54 1.352 1.354 1.698l.282.121c.514.225.821.362.821.749 0 .322-.299.556-.766.556Zm-4.37-.007c-.387 0-.548-.266-.726-.58l-.917.556c.265.562.788 1.03 1.691 1.03 1 0 1.684-.532 1.684-1.7V7.51H7.407v3.834c0 .564-.233.709-.604.709Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuPlatform({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.556 5.554 13.77 7.14l-5.772 4.04-5.737-4.04 2.199-1.587M3.313 7.888.813 9.72l6.996 4.926 7.039-4.926-2.33-1.682M3.285 4.74 8 8.061l4.742-3.32L8 1.338 3.286 4.74Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuPython({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.424 1.627A9.05 9.05 0 0 1 7.923 1.5a9.885 9.885 0 0 1 1.633.127c.851.14 1.568.771 1.568 1.612v2.953a1.57 1.57 0 0 1-1.568 1.576H6.424c-1.063 0-1.959.903-1.959 1.927v1.416H3.387c-.911 0-1.443-.654-1.666-1.572-.3-1.233-.288-1.97 0-3.152.25-1.03 1.047-1.572 1.959-1.572h4.312V4.42H4.856V3.239c0-.895.241-1.38 1.568-1.612Zm.391 1.417a.592.592 0 0 0-.588-.593.59.59 0 0 0 0 1.182.59.59 0 0 0 .588-.59Zm4.7 3.148V4.815h1.177c.912 0 1.342.675 1.568 1.572.313 1.246.327 2.18 0 3.152-.317.944-.657 1.572-1.568 1.572h-4.7v.394h3.132v1.182c0 .896-.778 1.35-1.568 1.577-1.187.34-2.14.288-3.132 0-.829-.242-1.568-.736-1.568-1.576V9.733c0-.85.71-1.576 1.568-1.576h3.132c1.044 0 1.96-.898 1.96-1.966Zm-1.173 6.69a.589.589 0 1 0-1.177 0c0 .328.265.594.589.594a.59.59 0 0 0 .588-.593Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuRealtime({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.362.984v2.35m-1.866.144L1.365 1.282m2.052 3.92H1.052m8.023 9.653L4.557 4.523 15 9.115l-4.748 1.182-1.177 4.558Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuResources({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 12V5l-.009-3H3v10.5m0 0A1.5 1.5 0 0 0 4.5 14H13v-1.65L12.991 11H4.5A1.5 1.5 0 0 0 3 12.5ZM5.005 2v4l1.5-1.695L8.005 6V2h-3Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuSelfHosting({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.041 14.37v-2.285a3.245 3.245 0 0 0-3.244-3.244M7.317 10H3v4h3.552v-1.916a3.257 3.257 0 0 1 3.245-3.244m0 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM8 6H3V2h10v4h-1.43M3.502 6v4"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuStorage({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 7.616V5.6l-3.618-3.6H3v4.03m9.964-.447L9.38 2v3.584h3.584ZM1.974 6v8h12V7.509h-7.59l-1.533-1.51H1.974Z"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linejoin="bevel"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuAI({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.99886 7.63216V14.4892M7.99886 7.63216L14.0488 4.11804M7.99886 7.63216L1.94922 4.11819M1.94922 4.11819V8.32332M1.94922 4.11819V4.08217L5.57319 1.97717M14.049 8.36007V4.08217L10.4251 1.97717M11.8165 12.4072L7.99913 14.6245L4.18177 12.4072"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuSwift({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.364 4.774c.004.128.005.256.006.384l.001.439v5.245c-.002.128-.003.256-.007.384-.007.28-.024.561-.073.837-.05.28-.133.541-.263.796a2.673 2.673 0 0 1-1.17 1.17c-.254.13-.514.211-.795.262-.276.05-.558.066-.837.073-.128.004-.256.005-.384.006l-.408.001H5.565l-.407-.001c-.128 0-.256-.002-.384-.006a5.571 5.571 0 0 1-.837-.073c-.28-.05-.541-.133-.796-.262a2.674 2.674 0 0 1-1.17-1.17 2.824 2.824 0 0 1-.262-.796 5.582 5.582 0 0 1-.073-.837 18.375 18.375 0 0 1-.006-.384l-.001-.404V5.158c.002-.128.003-.256.007-.384.007-.28.024-.561.073-.837.05-.28.133-.541.262-.796a2.673 2.673 0 0 1 1.362-1.258c.194-.08.393-.136.604-.174.207-.037.417-.056.627-.066.07-.003.14-.006.21-.007.128-.004.256-.005.384-.006l.457-.001H10.842l.384.006c.28.008.561.024.837.074.28.05.541.133.796.262a2.671 2.671 0 0 1 1.17 1.17c.13.255.212.515.262.796.05.276.066.558.073.837Zm-2.64 4.72h.002c1.094 1.347.797 2.791.656 2.519-.572-1.114-1.638-.83-2.178-.55-.044.028-.09.053-.136.078l-.008.004a.306.306 0 0 0-.01.006l.002-.002c-1.124.597-2.632.642-4.149-.01A6.673 6.673 0 0 1 2.908 8.97c.345.255.718.48 1.114.665 1.603.75 3.213.697 4.352 0C6.753 8.386 5.4 6.762 4.361 5.446a5.644 5.644 0 0 1-.534-.736C5.07 5.85 7.033 7.277 7.737 7.672c-1.494-1.58-2.812-3.525-2.75-3.462 2.355 2.372 4.527 3.714 4.527 3.714.082.045.143.081.192.113.044-.114.084-.232.118-.355.376-1.374-.047-2.946-1.004-4.243 2.184 1.311 3.474 3.802 2.946 5.91a75.282 75.282 0 0 0-.041.145Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuKotlin({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 14H2V2H14L8 8L14 14Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function IconMenuStatus({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.9895 1.13281C4.64498 1.13281 1.12305 4.65474 1.12305 8.99927C1.12305 13.3438 4.64498 16.8657 8.9895 16.8657C13.334 16.8657 16.856 13.3438 16.856 8.99927C16.856 7.13428 16.207 5.42087 15.1225 4.07258L8.35267 10.8424L6.39571 8.88546M9.06632 4.19659C6.42145 4.19659 4.27737 6.34068 4.27737 8.98555C4.27737 11.6304 6.42145 13.7745 9.06632 13.7745C11.7112 13.7745 13.8553 11.6304 13.8553 8.98555C13.8553 7.99916 13.5571 7.08243 13.0459 6.32059"
+        stroke="#A0A0A0"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}

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

@@ -1,4 +1,159 @@
-import { References } from '../Navigation.types'
+import type { HomepageMenuItems, NavMenuConstant, References } from '../Navigation.types'
+
+export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
+  [
+    {
+      label: 'Home',
+      icon: 'home',
+      href: '/',
+      level: 'home',
+    },
+    {
+      label: 'Getting Started',
+      icon: 'getting-started',
+      href: '/guides/getting-started',
+      level: 'gettingstarted',
+    },
+  ],
+  [
+    {
+      label: 'Database',
+      icon: 'database',
+      href: '/guides/database',
+      level: 'database',
+    },
+    {
+      label: 'Serverless APIs',
+      icon: 'serverless-apis',
+      href: '/guides/api',
+      level: 'api',
+    },
+    {
+      label: 'Auth',
+      icon: 'auth',
+      href: '/guides/auth',
+      level: 'auth',
+    },
+    {
+      label: 'Edge Functions',
+      icon: 'edge-functions',
+      href: '/guides/functions',
+      level: 'functions',
+    },
+    {
+      label: 'Realtime',
+      icon: 'realtime',
+      href: '/guides/realtime',
+      level: 'realtime',
+    },
+    {
+      label: 'Storage',
+      icon: 'storage',
+      href: '/guides/storage',
+      level: 'storage',
+    },
+    {
+      label: 'AI & Vectors',
+      icon: 'ai',
+      href: '/guides/ai',
+      level: 'ai',
+    },
+  ],
+  [
+    {
+      label: 'Platform',
+      icon: 'platform',
+      href: '/guides/platform',
+      level: 'platform',
+    },
+    {
+      label: 'Resources',
+      icon: 'resources',
+      href: '/guides/resources',
+      level: 'resources',
+    },
+    {
+      label: 'Self-Hosting',
+      icon: 'self-hosting',
+      href: '/guides/self-hosting',
+      level: 'self_hosting',
+    },
+    {
+      label: 'Integrations',
+      icon: 'integrations',
+      hasLightIcon: true,
+      href: '/guides/integrations',
+      level: 'integrations',
+    },
+  ],
+  [
+    {
+      label: 'Client Library Reference',
+    },
+    {
+      label: 'JavaScript',
+      icon: 'reference-javascript',
+      href: '/reference/javascript/introduction',
+      level: 'reference_javascript',
+    },
+    {
+      label: 'Flutter',
+      icon: 'reference-dart',
+      href: '/reference/dart/introduction',
+      level: 'reference_dart',
+    },
+    {
+      label: 'Python',
+      icon: 'reference-python',
+      href: '/reference/python/introduction',
+      level: 'reference_python',
+      community: true,
+    },
+    {
+      label: 'C#',
+      icon: 'reference-csharp',
+      href: '/reference/csharp/introduction',
+      level: 'reference_csharp',
+      community: true,
+    },
+    {
+      label: 'Swift',
+      icon: 'reference-swift',
+      href: '/reference/swift/introduction',
+      level: 'reference_swift',
+      community: true,
+    },
+    {
+      label: 'Kotlin',
+      icon: 'reference-kotlin',
+      href: '/reference/kotlin/introduction',
+      level: 'reference_kotlin',
+      community: true,
+    },
+    {
+      label: 'Tools reference',
+    },
+    {
+      label: 'Management API',
+      icon: 'reference-api',
+      href: '/reference/api/introduction',
+      level: 'reference_javascript',
+    },
+    {
+      label: 'Supabase CLI',
+      icon: 'reference-cli',
+      href: '/guides/cli',
+      level: 'reference_javascript',
+    },
+  ],
+  [
+    {
+      label: 'Status',
+      icon: 'status',
+      href: 'https://status.supabase.com/',
+    },
+  ],
+]
 
 export const REFERENCES: References = {
   javascript: {
@@ -22,9 +177,15 @@ export const REFERENCES: References = {
   swift: {
     name: 'Swift',
     library: 'supabase-swift',
-    versions: ['v1'],
+    versions: ['v0'],
     icon: '/docs/img/libraries/swift-icon.svg',
   },
+  kotlin: {
+    name: 'Kotlin',
+    library: 'supabase-kt',
+    versions: ['v0'],
+    icon: '/docs/img/libraries/kotlin-icon.svg',
+  },
   cli: {
     name: 'CLI',
     library: undefined,
@@ -39,13 +200,13 @@ export const REFERENCES: References = {
   },
 }
 
-export const gettingstarted = {
+export const gettingstarted: NavMenuConstant = {
   icon: 'getting-started',
   title: 'Getting Started',
   items: [
     { name: 'Features', url: '/guides/getting-started/features' },
     { name: 'Architecture', url: '/guides/getting-started/architecture' },
-    // { name: 'Local Development', url: '/guides/cli/local-development' }, // Disabling this until we actually move the doc into this section
+    { name: 'Local Development', url: '/guides/getting-started/local-development' },
     {
       name: 'Framework Quickstarts',
       items: [
@@ -125,15 +286,6 @@ export const gettingstarted = {
         },
       ],
     },
-    {
-      name: 'AI & ML',
-      items: [
-        {
-          name: 'Vector Search with OpenAI',
-          url: '/guides/getting-started/openai/vector-search',
-        },
-      ],
-    },
   ],
 }
 
@@ -141,8 +293,11 @@ export const cli = {
   title: 'CLI',
   items: [
     { name: 'Overview', url: '/guides/cli' },
-    { name: 'Local Development', url: '/guides/cli/local-development' },
     { name: 'Managing Environments', url: '/guides/cli/managing-environments' },
+    {
+      name: 'Using environment variables in config.toml',
+      url: '/guides/cli/using-environment-variables-in-config',
+    },
   ],
 }
 
@@ -163,7 +318,7 @@ export const SocialLoginItems = [
     url: '/guides/auth/social-login/auth-apple',
   },
   {
-    name: 'Azure',
+    name: 'Azure (Microsoft)',
     icon: '/docs/img/icons/microsoft-icon',
     url: '/guides/auth/social-login/auth-azure',
   },
@@ -296,6 +451,7 @@ export const auth = {
             },
           ],
         },
+        { name: 'Password Reset', url: '/guides/auth/auth-password-reset' },
         { name: 'Email Templates', url: '/guides/auth/auth-email-templates' },
       ],
     },
@@ -316,10 +472,9 @@ export const auth = {
       items: [
         { name: 'Overview', url: '/guides/auth/auth-helpers' },
         { name: 'Auth UI', url: '/guides/auth/auth-helpers/auth-ui' },
-        { name: 'Next.js (pages)', url: '/guides/auth/auth-helpers/nextjs' },
         {
-          name: 'Next.js (app)',
-          url: '/guides/auth/auth-helpers/nextjs-server-components',
+          name: 'Next.js',
+          url: '/guides/auth/auth-helpers/nextjs',
         },
         { name: 'Remix', url: '/guides/auth/auth-helpers/remix' },
         { name: 'SvelteKit', url: '/guides/auth/auth-helpers/sveltekit' },
@@ -348,17 +503,38 @@ export const auth = {
   ],
 }
 
-export const database = {
+export const database: NavMenuConstant = {
   icon: 'database',
   title: 'Database',
   url: '/guides/database',
   items: [
-    { name: 'Database Connections', url: '/guides/database/connecting-to-postgres' },
-    { name: 'Tables and Data', url: '/guides/database/tables' },
-    { name: 'Database Functions', url: '/guides/database/functions' },
-    { name: 'Database Webhooks', url: '/guides/database/webhooks' },
-    { name: 'Full Text Search', url: '/guides/database/full-text-search' },
-    { name: 'Database Testing', url: '/guides/database/testing' },
+    { name: 'Overview', url: '/guides/database' },
+    {
+      name: 'Fundamentals',
+      url: undefined,
+      items: [
+        { name: 'Connecting to your database', url: '/guides/database/connecting-to-postgres' },
+        { name: 'Managing tables, views, and data', url: '/guides/database/tables' },
+        { name: 'Managing database functions', url: '/guides/database/functions' },
+        { name: 'Managing indexes', url: '/guides/database/postgres/indexes' },
+        { name: 'Managing database webhooks', url: '/guides/database/webhooks' },
+        { name: 'Managing database replication', url: '/guides/database/replication' },
+        { name: 'Managing secrets with Vault', url: '/guides/database/vault' },
+      ],
+    },
+    {
+      name: 'Postgres Guides',
+      url: undefined,
+      items: [
+        { name: 'Implementing Full Text Search', url: '/guides/database/full-text-search' },
+        { name: 'Implementing Cascade Deletes', url: '/guides/database/postgres/cascade-deletes' },
+        { name: 'Implementing column encryption', url: '/guides/database/column-encryption' },
+        { name: 'Testing your database', url: '/guides/database/testing' },
+        { name: 'Managing Timeouts', url: '/guides/database/timeouts' },
+        { name: 'Managing Passwords', url: '/guides/database/managing-passwords' },
+        { name: 'Configuring Timezones', url: '/guides/database/managing-timezones' },
+      ],
+    },
     {
       name: 'Extensions',
       url: undefined,
@@ -465,13 +641,9 @@ export const database = {
       ],
     },
     {
-      name: 'Postgres resources',
+      name: 'Examples',
       url: undefined,
       items: [
-        {
-          name: 'Managing Indexes',
-          url: '/guides/database/postgres/indexes',
-        },
         {
           name: 'Drop All Tables in Schema',
           url: '/guides/database/postgres/dropping-all-tables-in-schema',
@@ -486,21 +658,11 @@ export const database = {
         },
       ],
     },
-    {
-      name: 'Configuration',
-      url: undefined,
-      items: [
-        { name: 'Timeouts', url: '/guides/database/timeouts' },
-        { name: 'Replication', url: '/guides/database/replication' },
-        { name: 'Passwords', url: '/guides/database/managing-passwords' },
-        { name: 'Timezones', url: '/guides/database/managing-timezones' },
-      ],
-    },
   ],
 }
 
-export const api = {
-  icon: 'reference',
+export const api: NavMenuConstant = {
+  icon: 'serverless-apis',
   title: 'Serverless APIs',
   url: '/guides/api',
   items: [
@@ -537,8 +699,8 @@ export const api = {
   ],
 }
 
-export const functions = {
-  icon: 'functions',
+export const functions: NavMenuConstant = {
+  icon: 'edge-functions',
   title: 'Edge Functions',
   url: '/guides/functions',
   items: [
@@ -565,7 +727,7 @@ export const functions = {
       url: undefined,
       items: [
         { name: 'Developing Functions locally', url: '/guides/functions/local-development' },
-        { name: 'Deploying with Git', url: '/guides/functions/cicd-workflow' },
+        { name: 'Deploying with GitHub', url: '/guides/functions/cicd-workflow' },
         { name: 'Managing Secrets and Environment Variables', url: '/guides/functions/secrets' },
         { name: 'Integrating With Supabase Auth', url: '/guides/functions/auth' },
         {
@@ -578,14 +740,25 @@ export const functions = {
           name: 'Connecting directly to Postgres',
           url: '/guides/functions/connect-to-postgres',
         },
+      ],
+    },
+    {
+      name: 'Third-Party Tools',
+      url: undefined,
+      items: [
         { name: 'Dart Edge on Supabase', url: '/guides/functions/dart-edge' },
+        { name: 'Browserless.io', url: '/guides/functions/examples/screenshots' },
+        { name: 'Hugging Face', url: '/guides/ai/examples/huggingface-image-captioning' },
+        { name: 'OpenAI API', url: '/guides/ai/examples/openai' },
+        { name: 'Upstash Redis', url: '/guides/functions/examples/upstash-redis' },
+        { name: 'Type-Safe SQL with Kysely', url: '/guides/functions/kysely-postgres' },
       ],
     },
     {
       name: 'Examples',
       url: '/guides/functions/examples',
       items: [
-        { name: 'Generating OpenAI GPT3 completions', url: '/guides/functions/examples/openai' },
+        { name: 'Generating OpenAI GPT3 completions', url: '/guides/ai/examples/openai' },
         { name: 'Generating OG images ', url: '/guides/functions/examples/og-image' },
         {
           name: 'CAPTCHA support with Cloudflare Turnstile',
@@ -605,7 +778,7 @@ export const functions = {
   ],
 }
 
-export const realtime = {
+export const realtime: NavMenuConstant = {
   icon: 'realtime',
   title: 'Realtime',
   url: '/guides/realtime',
@@ -668,7 +841,7 @@ export const realtime = {
   ],
 }
 
-export const storage = {
+export const storage: NavMenuConstant = {
   icon: 'storage',
   title: 'Storage',
   url: '/guides/storage',
@@ -682,14 +855,109 @@ export const storage = {
   ],
 }
 
-export const supabase_cli = {
+export const ai: NavMenuConstant = {
+  icon: 'ai',
+  title: 'AI & Vectors',
+  url: '/guides/ai',
+  items: [
+    { name: 'Overview', url: '/guides/ai' },
+    { name: 'Concepts', url: '/guides/ai/concepts' },
+    {
+      name: 'Structured & unstructured',
+      url: '/guides/ai/structured-unstructured',
+    },
+    {
+      name: 'Quickstarts',
+      url: undefined,
+      items: [
+        { name: 'Developing locally with Vecs', url: '/guides/ai/vecs-python-client' },
+        { name: 'Creating and managing collections', url: '/guides/ai/quickstarts/hello-world' },
+        { name: 'Text Deduplication', url: '/guides/ai/quickstarts/text-deduplication' },
+        { name: 'Face similarity search', url: '/guides/ai/quickstarts/face-similarity' },
+      ],
+    },
+    {
+      name: 'Python Client',
+      url: undefined,
+      items: [
+        { name: 'API', url: '/guides/ai/python/api' },
+        { name: 'Collections', url: '/guides/ai/python/collections' },
+        { name: 'Indexes', url: '/guides/ai/python/indexes' },
+        { name: 'Metadata', url: '/guides/ai/python/metadata' },
+      ],
+    },
+    {
+      name: 'Guides',
+      url: undefined,
+      items: [
+        { name: 'Managing collections', url: '/guides/ai/managing-collections' },
+        { name: 'Managing indexes', url: '/guides/ai/managing-indexes' },
+        { name: 'Vector columns', url: '/guides/ai/vector-columns' },
+        { name: 'Engineering for scale', url: '/guides/ai/engineering-for-scale' },
+      ],
+    },
+    {
+      name: 'Examples',
+      url: undefined,
+      items: [
+        {
+          name: 'OpenAI completions using Edge Functions',
+          url: '/guides/ai/examples/openai',
+        },
+        {
+          name: 'Image search with OpenAI CLIP',
+          url: '/guides/ai/examples/image-search-openai-clip',
+        },
+        {
+          name: 'Generate image captions using Hugging Face',
+          url: '/guides/ai/examples/huggingface-image-captioning',
+        },
+        {
+          name: 'Building ChatGPT Plugins',
+          url: '/guides/ai/examples/building-chatgpt-plugins',
+        },
+        {
+          name: 'Adding generative Q&A to your documentation',
+          url: '/guides/ai/examples/headless-vector-search',
+        },
+        {
+          name: 'Adding generative Q&A to your Next.js site',
+          url: '/guides/ai/examples/nextjs-vector-search',
+        },
+      ],
+    },
+    {
+      name: 'Third-Party Tools',
+      url: undefined,
+      items: [
+        {
+          name: 'LangChain',
+          url: '/guides/ai/langchain',
+        },
+        {
+          name: 'Hugging Face',
+          url: '/guides/ai/hugging-face',
+        },
+        {
+          name: 'Google Colab',
+          url: '/guides/ai/google-colab',
+        },
+      ],
+    },
+  ],
+}
+
+export const supabase_cli: NavMenuConstant = {
   icon: 'reference-cli',
   title: 'Supabase CLI',
   url: '/guides/cli',
   items: [
     { name: 'Overview', url: '/guides/cli' },
-    { name: 'Local Development', url: '/guides/cli/local-development' },
     { name: 'Managing Environments', url: '/guides/cli/managing-environments' },
+    {
+      name: 'Using environment variables in config.toml',
+      url: '/guides/cli/using-environment-variables-in-config',
+    },
     {
       name: 'Reference',
       url: undefined,
@@ -701,7 +969,7 @@ export const supabase_cli = {
   ],
 }
 
-export const platform = {
+export const platform: NavMenuConstant = {
   icon: 'platform',
   title: 'Platform',
   url: '/guides/platform',
@@ -756,9 +1024,19 @@ export const platform = {
       ],
     },
     {
-      name: 'Go-live Checklist',
+      name: 'Production Readiness',
       url: undefined,
-      items: [{ name: 'Production Readiness', url: '/guides/platform/going-into-prod' }],
+      items: [
+        {
+          name: 'Shared Responsibility Model',
+          url: '/guides/platform/shared-responsibility-model',
+        },
+        {
+          name: 'Maturity Model',
+          url: '/guides/platform/maturity-model',
+        },
+        { name: 'Production Checklist', url: '/guides/platform/going-into-prod' },
+      ],
     },
     {
       name: 'Troubleshooting',
@@ -768,12 +1046,16 @@ export const platform = {
           name: 'HTTP and Project Issues',
           url: '/guides/platform/troubleshooting',
         },
+        {
+          name: 'High CPU Usage',
+          url: '/guides/platform/exhaust-cpu',
+        },
       ],
     },
   ],
 }
 
-export const resources = {
+export const resources: NavMenuConstant = {
   icon: 'resources',
   title: 'Resources',
   url: '/guides/resources',
@@ -814,9 +1096,9 @@ export const resources = {
   ],
 }
 
-export const self_hosting = {
+export const self_hosting: NavMenuConstant = {
   title: 'Self-Hosting',
-  icon: 'resources',
+  icon: 'self-hosting',
   url: '/guides/self-hosting',
   items: [
     { name: 'Overview', url: '/guides/self-hosting' },
@@ -871,7 +1153,7 @@ export const migrate = {
   ],
 }
 
-export const integrations = {
+export const integrations: NavMenuConstant = {
   icon: 'integrations',
   title: 'Integrations',
   url: '/guides/integrations',
@@ -902,8 +1184,9 @@ export const integrations = {
       name: 'Developer Tools',
       url: undefined,
       items: [
+        { name: 'Cloudflare Workers', url: '/guides/integrations/cloudflare-workers' },
         { name: 'Estuary', url: '/guides/integrations/estuary' },
-        { name: 'OpenAI', url: '/guides/functions/examples/openai' },
+        { name: 'OpenAI', url: '/guides/ai/examples/openai' },
         { name: 'pgMustard', url: '/guides/integrations/pgmustard' },
         { name: 'Prisma', url: '/guides/integrations/prisma' },
         { name: 'Sequin', url: '/guides/integrations/sequin' },
@@ -923,6 +1206,7 @@ export const integrations = {
         { name: 'Directus', url: '/guides/integrations/directus' },
         { name: 'Draftbit', url: '/guides/integrations/draftbit' },
         { name: 'FlutterFlow', url: '/guides/integrations/flutterflow' },
+        { name: 'Forest Admin', url: '/guides/integrations/forestadmin' },
         { name: 'Plasmic', url: '/guides/integrations/plasmic' },
         { name: 'ILLA', url: '/guides/integrations/illa' },
       ],
@@ -973,6 +1257,13 @@ export const reference = {
           items: [],
           icon: '/img/icons/menu/reference-swift',
         },
+        {
+          name: 'supabase-kt',
+          url: '/reference/kotlin/start',
+          level: 'reference_kotlin',
+          items: [],
+          icon: '/img/icons/menu/reference-kotlin',
+        },
         // {
         //   name: 'supabase-python',
         //   url: '/reference/python/start',
@@ -1042,13 +1333,20 @@ export const reference_python_v2 = {
   parent: '/reference',
 }
 
-export const reference_swift_v1 = {
+export const reference_swift_v0 = {
   icon: 'reference-swift',
   title: 'swift',
   url: 'guides/reference/swift',
   parent: '/reference',
 }
 
+export const reference_kotlin_v0 = {
+  icon: 'reference-kotlin',
+  title: 'kotlin',
+  url: 'guides/reference/kotlin',
+  parent: '/reference',
+}
+
 export const reference_cli = {
   icon: 'reference-cli',
   title: 'Supabase CLI',
@@ -1165,11 +1463,18 @@ export const references = [
       },
       {
         label: 'supabase-swift',
-        versions: ['v1'],
+        versions: ['v0'],
         description: 'something about the reference',
         icon: '/docs/img/icons/swift-icon.svg',
         url: '/reference/swift/start',
       },
+      {
+        label: 'supabase-kt',
+        versions: ['v0'],
+        description: 'something about the reference',
+        icon: '/docs/img/icons/kotlin-icon.svg',
+        url: '/reference/kotlin/start',
+      },
     ],
   },
   {

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

@@ -1,185 +1,245 @@
 import { useRouter } from 'next/router'
 import { memo, useEffect } from 'react'
 import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
+import NavigationMenuHome from './HomeMenu'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
-// @ts-expect-error
-import spec_js_v2 from '~/../../spec/supabase_js_v2.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_js_v1 from '~/../../spec/supabase_js_v1.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_dart_v1 from '~/../../spec/supabase_dart_v1.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_dart_v0 from '~/../../spec/supabase_dart_v0.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_csharp_v0 from '~/../../spec/supabase_csharp_v0.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_python_v2 from '~/../../spec/supabase_py_v2.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_swift_v1 from '~/../../spec/supabase_swift_v1.yml' assert { type: 'yml' }
 
-// import { gen_v3 } from '~/lib/refGenerator/helpers'
-import apiCommonSections from '~/../../spec/common-api-sections.json'
-import cliCommonSections from '~/../../spec/common-cli-sections.json'
-import libCommonSections from '~/../../spec/common-client-libs-sections.json'
-import authServerCommonSections from '~/../../spec/common-self-hosting-auth-sections.json'
-import realtimeServerCommonSections from '~/../../spec/common-self-hosting-realtime-sections.json'
-import analyticsServerCommonSections from '~/../../spec/common-self-hosting-analytics-sections.json'
-import functionsServerCommonSections from '~/../../spec/common-self-hosting-functions-sections.json'
-import storageServerCommonSections from '~/../../spec/common-self-hosting-storage-sections.json'
-import { flattenSections } from '~/lib/helpers'
-import NavigationMenuHome from './HomeMenu'
-
-// Filter libCommonSections for just the relevant sections in the current library
-export function generateAllowedClientLibKeys(sections, spec) {
-  // Filter parent sections first
-
-  const specIds = spec.functions.map((func) => {
-    return func.id
-  })
-
-  const newShape = flattenSections(sections).filter((section) => {
-    if (specIds.includes(section.id)) {
-      return section
-    }
-  })
-
-  const final = newShape.map((func) => {
-    return func.id
-  })
-
-  return final
+interface BaseMenu {
+  id: string
+  path: string
+  type: string
 }
 
-export type RefIdOptions =
-  | 'reference_javascript_v1'
-  | 'reference_javascript_v2'
-  | 'reference_dart_v0'
-  | 'reference_dart_v1'
-  | 'reference_csharp_v0'
-  | 'reference_python_v2'
-  | 'reference_swift_v1'
-  | 'reference_cli'
-  | 'reference_api'
-  | 'reference_self_hosting_auth'
-  | 'reference_self_hosting_storage'
-  | 'reference_self_hosting_realtime'
-  | 'reference_self_hosting_analytics'
-  | 'reference_self_hosting_functions'
+interface HomeMenu extends BaseMenu {
+  type: 'home'
+}
 
-export type RefKeyOptions =
-  | 'javascript'
-  | 'dart'
-  | 'csharp'
-  | 'python'
-  | 'swift'
-  | 'cli'
-  | 'api'
-  | 'self-hosting-auth'
-  | 'self-hosting-storage'
-  | 'self-hosting-realtime'
-  | 'self-hosting-analytics'
-  | 'self-hosting-functions'
+interface GuideMenu extends BaseMenu {
+  type: 'guide'
+}
+
+interface ReferenceMenu extends BaseMenu {
+  type: 'reference'
+  commonSectionsFile: string
+  specFile?: string
+}
+
+type Menu = HomeMenu | GuideMenu | ReferenceMenu
+
+const menus: Menu[] = [
+  {
+    id: 'home',
+    path: '/',
+    type: 'home',
+  },
+  {
+    id: 'gettingstarted',
+    path: '/guides/getting-started',
+    type: 'guide',
+  },
+  {
+    id: 'database',
+    path: '/guides/database',
+    type: 'guide',
+  },
+  {
+    id: 'api',
+    path: '/guides/api',
+    type: 'guide',
+  },
+  {
+    id: 'auth',
+    path: '/guides/auth',
+    type: 'guide',
+  },
+  {
+    id: 'functions',
+    path: '/guides/functions',
+    type: 'guide',
+  },
+  {
+    id: 'realtime',
+    path: '/guides/realtime',
+    type: 'guide',
+  },
+  {
+    id: 'storage',
+    path: '/guides/storage',
+    type: 'guide',
+  },
+  {
+    id: 'ai',
+    path: '/guides/ai',
+    type: 'guide',
+  },
+  {
+    id: 'platform',
+    path: '/guides/platform',
+    type: 'guide',
+  },
+  {
+    id: 'resources',
+    path: '/guides/resources',
+    type: 'guide',
+  },
+  {
+    id: 'self_hosting',
+    path: '/guides/self-hosting',
+    type: 'guide',
+  },
+  {
+    id: 'integrations',
+    path: '/guides/integrations',
+    type: 'guide',
+  },
+  {
+    id: 'supabase_cli',
+    // TODO: Add path '/reference/cli/config'
+    path: '/guides/cli',
+    type: 'guide',
+  },
+  {
+    id: 'reference_javascript_v1',
+    path: '/reference/javascript/v1',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_js_v1.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_javascript_v2',
+    path: '/reference/javascript',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_js_v2.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_dart_v0',
+    path: '/reference/dart/v0',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_dart_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_dart_v1',
+    path: '/reference/dart',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_dart_v1.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_csharp_v0',
+    path: '/reference/csharp',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_csharp_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_python_v2',
+    path: '/reference/python',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_py_v2.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_swift_v0',
+    path: '/reference/swift',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_swift_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_kotlin_v0',
+    path: '/reference/kotlin',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_kt_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_cli',
+    path: '/reference/cli',
+    commonSectionsFile: 'common-cli-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_api',
+    path: '/reference/api',
+    commonSectionsFile: 'common-api-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_auth',
+    path: '/reference/self-hosting-auth',
+    commonSectionsFile: 'common-self-hosting-auth-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_storage',
+    path: '/reference/self-hosting-storage',
+    commonSectionsFile: 'common-self-hosting-storage-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_realtime',
+    path: '/reference/self-hosting-realtime',
+    commonSectionsFile: 'common-self-hosting-realtime-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_analytics',
+    path: '/reference/self-hosting-analytics',
+    commonSectionsFile: 'common-self-hosting-analytics-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_functions',
+    path: '/reference/self-hosting-functions',
+    commonSectionsFile: 'common-self-hosting-functions-sections.json',
+    type: 'reference',
+  },
+]
+
+function getMenuById(id: string) {
+  return menus.find((menu) => menu.id === id)
+}
+
+function getMenuByUrl(basePath: string, url: string) {
+  // If multiple matches, choose the menu with the longest path
+  const [menu] = menus
+    .filter(({ path }) => url.startsWith(`${basePath}${path}`))
+    .sort((a, b) => b.path.length - a.path.length)
+
+  return menu
+}
+
+function getMenuElement(menu: Menu) {
+  const menuType = menu.type
+  switch (menuType) {
+    case 'home':
+      return <NavigationMenuHome />
+    case 'guide':
+      return <NavigationMenuGuideList id={menu.id} />
+    case 'reference':
+      return (
+        <NavigationMenuRefList
+          id={menu.id}
+          basePath={menu.path}
+          commonSectionsFile={menu.commonSectionsFile}
+          specFile={menu.specFile}
+        />
+      )
+    default:
+      throw new Error(`Unknown menu type '${menuType}'`)
+  }
+}
 
 const NavigationMenu = () => {
   const router = useRouter()
 
   function handleRouteChange(url: string) {
-    switch (url) {
-      case `/docs`:
-        menuState.setMenuLevelId('home')
-        break
-      case url.includes(`/docs/guides/getting-started`) && url:
-        menuState.setMenuLevelId('gettingstarted')
-        break
-      case url.includes(`/docs/guides/database`) && url:
-        menuState.setMenuLevelId('database')
-        break
-      case url.includes(`/docs/guides/api`) && url:
-        menuState.setMenuLevelId('api')
-        break
-      case url.includes(`/docs/guides/auth`) && url:
-        menuState.setMenuLevelId('auth')
-        break
-      case url.includes(`/docs/guides/functions`) && url:
-        menuState.setMenuLevelId('functions')
-        break
-      case url.includes(`/docs/guides/realtime`) && url:
-        menuState.setMenuLevelId('realtime')
-        break
-      case url.includes(`/docs/guides/storage`) && url:
-        menuState.setMenuLevelId('storage')
-        break
-      case url.includes(`/docs/guides/platform`) && url:
-        menuState.setMenuLevelId('platform')
-        break
-      case url.includes(`/docs/guides/resources`) && url:
-        menuState.setMenuLevelId('resources')
-        break
-      case url.includes(`/docs/guides/self-hosting`) && url:
-        menuState.setMenuLevelId('self_hosting')
-        break
-      case url.includes(`/docs/guides/integrations`) && url:
-        menuState.setMenuLevelId('integrations')
-        break
-      case url.includes(`/docs/guides/cli`) && url:
-        menuState.setMenuLevelId('supabase_cli')
-        break
-      // JS v1
-      case url.includes(`/docs/reference/javascript/v1`) && url:
-        menuState.setMenuLevelId('reference_javascript_v1')
-        break
-      // JS v2 (latest)
-      case url.includes(`/docs/reference/javascript`) && url:
-        menuState.setMenuLevelId('reference_javascript_v2')
-        break
-      // dart v0
-      case url.includes(`/docs/reference/dart/v0`) && url:
-        menuState.setMenuLevelId('reference_dart_v0')
-        break
-      // dart v1 (latest)
-      case url.includes(`/docs/reference/dart`) && url:
-        menuState.setMenuLevelId('reference_dart_v1')
-        break
-      // C# v0 (latest)
-      case url.includes(`/docs/reference/csharp`) && url:
-        menuState.setMenuLevelId('reference_csharp_v0')
-        break
-      // python v2 (latest)
-      case url.includes(`/docs/reference/python`) && url:
-        menuState.setMenuLevelId('reference_python_v2')
-        break
-      // swift v1 (latest)
-      case url.includes(`/docs/reference/swift`) && url:
-        menuState.setMenuLevelId('reference_swift_v1')
-        break
-      case url.includes(`/docs/reference/cli/config`) && url:
-        menuState.setMenuLevelId('supabase_cli')
-        break
-      case url.includes(`/docs/reference/cli`) && url:
-        menuState.setMenuLevelId('reference_cli')
-        break
-      case url.includes(`/docs/reference/api`) && url:
-        menuState.setMenuLevelId('reference_api')
-        break
-      case url.includes(`/docs/reference/self-hosting-auth`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_auth')
-        break
-      case url.includes(`/docs/reference/self-hosting-storage`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_storage')
-        break
-      case url.includes(`/docs/reference/self-hosting-realtime`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_realtime')
-        break
-      case url.includes(`/docs/reference/self-hosting-analytics`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_analytics')
-        break
-      case url.includes(`/docs/reference/self-hosting-functions`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_functions')
-        break
-
-      default:
-        break
+    const menu = getMenuByUrl(router.basePath, url)
+    if (menu) {
+      menuState.setMenuLevelId(menu.id)
     }
   }
 
@@ -193,168 +253,9 @@ const NavigationMenu = () => {
   }, [router.events])
 
   const level = useMenuLevelId()
+  const menu = getMenuById(level)
 
-  const isHomeActive = 'home' === level
-  const isGettingStartedActive = 'gettingstarted' === level
-  const isDatabaseActive = 'database' === level
-  const isApiActive = 'api' === level
-  const isAuthActive = 'auth' === level
-  const isFunctionsActive = 'functions' === level
-  const isRealtimeActive = 'realtime' === level
-  const isStorageActive = 'storage' === level
-  const issupabase_cliActive = 'supabase_cli' === level
-  const isPlatformActive = 'platform' === level
-  const isResourcesActive = 'resources' === level
-  const isSelfHosting = 'self_hosting' === level
-  const isIntegrationsActive = 'integrations' === level
-  const isReferenceActive = 'reference' === level
-
-  const isReference_Javascript_V1 = 'reference_javascript_v1' === level
-  const isReference_Javascript_V2 = 'reference_javascript_v2' === level
-  const isReference_Dart_V0 = 'reference_dart_v0' === level
-  const isReference_Dart_V1 = 'reference_dart_v1' === level
-  const isReference_Csharp_V0 = 'reference_csharp_v0' === level
-  const isReference_Python_V2 = 'reference_python_v2' === level
-  const isReference_Swift_V1 = 'reference_swift_v1' === level
-  const isReference_Cli = 'reference_cli' === level
-  const isReference_Api = 'reference_api' === level
-  const isReference_Self_Hosting_Auth = 'reference_self_hosting_auth' === level
-  const isReference_Self_Hosting_Storage = 'reference_self_hosting_storage' === level
-  const isReference_Self_Hosting_Realtime = 'reference_self_hosting_realtime' === level
-  const isReference_Self_Hosting_Analytics = 'reference_self_hosting_analytics' === level
-  const isReference_Self_Hosting_Functions = 'reference_self_hosting_functions' === level
-
-  return (
-    <div className={['flex relative', 'justify-center lg:justify-start'].join(' ')}>
-      {/* // main menu */}
-      <NavigationMenuHome active={isHomeActive} />
-      <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
-      <NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
-      <NavigationMenuGuideList id={'api'} active={isApiActive} />
-      <NavigationMenuGuideList id={'auth'} active={isAuthActive} />
-      <NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
-      <NavigationMenuGuideList
-        id={'realtime'}
-        active={isRealtimeActive}
-        value={['/guides/realtime/extensions']}
-      />
-      <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
-      <NavigationMenuGuideList id={'supabase_cli'} active={issupabase_cliActive} />
-      <NavigationMenuGuideList id={'platform'} active={isPlatformActive} />
-      <NavigationMenuGuideList id={'resources'} active={isResourcesActive} />
-      <NavigationMenuGuideList id={'self_hosting'} active={isSelfHosting} />
-      <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
-      <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
-      {/* // Client Libs */}
-      <NavigationMenuRefList
-        key={'reference-js-menu-v1'}
-        id={'reference_javascript_v1'}
-        active={isReference_Javascript_V1}
-        commonSections={libCommonSections}
-        lib="javascript"
-        spec={spec_js_v1}
-      />
-      <NavigationMenuRefList
-        key={'reference-js-menu'}
-        id={'reference_javascript_v2'}
-        active={isReference_Javascript_V2}
-        commonSections={libCommonSections}
-        lib="javascript"
-        spec={spec_js_v2}
-      />
-      <NavigationMenuRefList
-        key={'reference-dart-menu'}
-        id={'reference_dart_v0'}
-        active={isReference_Dart_V0}
-        commonSections={libCommonSections}
-        lib="dart"
-        spec={spec_dart_v0}
-      />
-      <NavigationMenuRefList
-        key={'reference-dart-menu-v1'}
-        id={'reference_dart_v1'}
-        active={isReference_Dart_V1}
-        commonSections={libCommonSections}
-        lib="dart"
-        spec={spec_dart_v1}
-      />
-      <NavigationMenuRefList
-        key={'reference-csharp-menu-v0'}
-        id={'reference_csharp_v0'}
-        active={isReference_Csharp_V0}
-        commonSections={libCommonSections}
-        lib="csharp"
-        spec={spec_csharp_v0}
-      />
-      <NavigationMenuRefList
-        key={'reference-swift-menu-v1'}
-        id={'reference_swift_v1'}
-        active={isReference_Swift_V1}
-        commonSections={libCommonSections}
-        lib="swift"
-        spec={spec_swift_v1}
-      />
-      <NavigationMenuRefList
-        key={'reference-python-menu-v2'}
-        id={'reference_python_v2'}
-        active={isReference_Python_V2}
-        commonSections={libCommonSections}
-        lib="python"
-        spec={spec_python_v2}
-      />
-      {/* // Tools */}
-      <NavigationMenuRefList
-        key={'reference-cli-menu'}
-        id={'reference_cli'}
-        active={isReference_Cli}
-        commonSections={cliCommonSections}
-        lib="cli"
-      />
-      <NavigationMenuRefList
-        key={'reference-api-menu'}
-        id={'reference_api'}
-        active={isReference_Api}
-        commonSections={apiCommonSections}
-        lib="api"
-      />
-      {/* // Self Hosting Server */}
-      <NavigationMenuRefList
-        key={'reference-self-hosting-auth-menu'}
-        id={'reference_self_hosting_auth'}
-        active={isReference_Self_Hosting_Auth}
-        commonSections={authServerCommonSections}
-        lib="self-hosting-auth"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-storage-menu'}
-        id={'reference_self_hosting_storage'}
-        active={isReference_Self_Hosting_Storage}
-        commonSections={storageServerCommonSections}
-        lib="self-hosting-storage"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-realtime-menu'}
-        id={'reference_self_hosting_realtime'}
-        active={isReference_Self_Hosting_Realtime}
-        commonSections={realtimeServerCommonSections}
-        lib="self-hosting-realtime"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-analytics-menu'}
-        id={'reference_self_hosting_analytics'}
-        active={isReference_Self_Hosting_Analytics}
-        commonSections={analyticsServerCommonSections}
-        lib="self-hosting-analytics"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-functions-menu'}
-        id={'reference_self_hosting_functions'}
-        active={isReference_Self_Hosting_Functions}
-        commonSections={functionsServerCommonSections}
-        lib="self-hosting-functions"
-      />
-    </div>
-  )
+  return getMenuElement(menu)
 }
 
 export default memo(NavigationMenu)

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

@@ -1,6 +1,84 @@
-// check if the link is allowed to be displayed
-export function isFuncNotInLibraryOrVersion(id, type, allowedKeys) {
-  if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
-    return true
-  }
+import { useEffect, useState } from 'react'
+import { ICommonItem } from '~/components/reference/Reference.types'
+import { Json } from '~/types'
+
+/**
+ * Recursively filter common sections and their sub items based on
+ * what is available in their spec
+ */
+export function deepFilterSections<T extends ICommonItem>(
+  sections: T[],
+  specFunctionIds: string[]
+): T[] {
+  return sections
+    .filter(
+      (section) =>
+        section.type === 'category' ||
+        section.type === 'markdown' ||
+        specFunctionIds.includes(section.id)
+    )
+    .map((section) => {
+      if ('items' in section) {
+        return {
+          ...section,
+          items: deepFilterSections(section.items, specFunctionIds),
+        }
+      }
+      return section
+    })
+}
+
+/**
+ * Imports common sections file dynamically.
+ *
+ * Dynamic imports allow for code splitting which
+ * dramatically reduces app bundle size.
+ *
+ * See https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
+ */
+export function useCommonSections(commonSectionsFile: string) {
+  const [commonSections, setCommonSections] = useState<ICommonItem[]>()
+
+  useEffect(() => {
+    async function fetchCommonSections() {
+      const commonSections = await import(
+        /* webpackInclude: /common-.*\.json$/ */
+        /* webpackMode: "lazy" */
+        `~/../../spec/${commonSectionsFile}`
+      )
+      setCommonSections(commonSections.default)
+    }
+    fetchCommonSections()
+  }, [commonSectionsFile])
+
+  return commonSections
+}
+
+/**
+ * Imports spec file dynamically.
+ *
+ * Dynamic imports allow for code splitting which
+ * dramatically reduces app bundle size.
+ *
+ * See https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
+ */
+export function useSpec(specFile?: string) {
+  const [spec, setSpec] = useState<Json>()
+
+  useEffect(() => {
+    if (!specFile) {
+      return
+    }
+    async function fetchSpec() {
+      const spec = await import(
+        /* webpackInclude: /supabase_.*\.ya?ml$/ */
+        /* webpackMode: "lazy" */
+        `~/../../spec/${specFile}`
+      )
+      setSpec(spec.default)
+    }
+    fetchSpec()
+  }, [specFile])
+
+  return spec
 }

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

@@ -3,7 +3,6 @@ import { useRouter } from 'next/router'
 import { IconChevronLeft } from 'ui'
 import * as NavItems from './NavigationMenu.constants'
 
-// @ts-expect-error
 import clientLibsCommon from '~/../../spec/common-cli.yml' assert { type: 'yml' }
 
 const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
@@ -22,7 +21,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
     icon?: string
   }) => {
     return (
-      <li key={id} className="function-link-item text-scale-1000">
+      <li key={id} className="function-link-item text-scale-1000 leading-3">
         <Link href={`#${id}`} passHref>
           <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
             {icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
@@ -49,7 +48,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
   }
 
   const Divider = () => {
-    return <div className="h-px w-full bg-green-500 my-3"></div>
+    return <div className="h-px w-full bg-scale-500 my-3"></div>
   }
 
   const MenuSections = [

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

@@ -6,11 +6,10 @@ import * as NavItems from './NavigationMenu.constants'
 
 interface Props {
   id: string
-  active: boolean
   collapsible?: boolean
   value?: string[]
 }
-const NavigationMenuGuideList: React.FC<Props> = ({ id, active, value }) => {
+const NavigationMenuGuideList: React.FC<Props> = ({ id, value }) => {
   const router = useRouter()
 
   const menu = NavItems[id]
@@ -35,16 +34,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, active, value }) => {
       key={id}
       type={value ? 'multiple' : 'single'}
       value={value ?? firstLevelRoute}
-      className={[
-        'transition-all duration-150 ease-out',
-        // enabled
-        active && 'opacity-100 ml-0 delay-150',
-        // level === 'home' && 'ml-12',
-
-        // disabled
-        // level !== 'home' && level !== id ? '-ml-8' : '',
-        !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
-      ].join(' ')}
+      className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150"
     >
       <NavigationMenuGuideListItems menu={menu} id={id} />
     </Accordion.Root>

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

@@ -2,23 +2,10 @@ import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { IconChevronLeft } from '~/../../packages/ui'
 import * as Accordion from '@radix-ui/react-accordion'
-
-const HeaderImage = React.memo(function HeaderImage(props: any) {
-  const router = useRouter()
-  const { isDarkMode } = useTheme()
-
-  return (
-    <Image
-      alt={props.icon}
-      width={15}
-      height={15}
-      src={`${router.basePath}` + `/img/icons/menu/${props.icon}${isDarkMode ? '' : '-light'}.svg`}
-    />
-  )
-})
+import HomeMenuIconPicker from './HomeMenuIconPicker'
 
 const HeaderLink = React.memo(function HeaderLink(props: {
   title: string
@@ -43,6 +30,8 @@ const HeaderLink = React.memo(function HeaderLink(props: {
 const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
   const router = useRouter()
   const { isDarkMode } = useTheme()
+  const activeItem = props.subItem.url === router.pathname
+  const activeItemRef = useRef(null)
 
   const LinkContainer = (props) => {
     return (
@@ -52,26 +41,35 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
     )
   }
 
+  useEffect(() => {
+    // scroll to active item
+    if (activeItem && activeItemRef.current) {
+      // this is a hack, but seems a common one on Stackoverflow
+      setTimeout(() => {
+        activeItemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      }, 0)
+    }
+  })
   return (
     <>
       {props.subItemIndex === 0 && (
         <>
-          <div className="h-px w-full bg-green-500 my-3"></div>
+          <div className="h-px w-full bg-scale-500 my-3"></div>
           <span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider">
             {props.parent.name}
           </span>
         </>
       )}
       <Accordion.Item key={props.subItem.label} value={props.subItem.url}>
-        <li key={props.subItem.name}>
+        <li key={props.subItem.name} ref={activeItem ? activeItemRef : null}>
           <LinkContainer
             url={props.subItem.url}
             className={[
               'flex items-center gap-2',
               'cursor-pointer transition text-sm',
-              props.subItem.url === router.pathname
-                ? 'text-brand-900'
-                : 'hover:text-brand-900 text-scale-1000',
+              activeItem
+                ? 'text-brand-900 font-medium'
+                : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
             ].join(' ')}
             parent={props.subItem.parent}
           >
@@ -120,14 +118,14 @@ const ContentLink = React.memo(function ContentLink(props: any) {
   const router = useRouter()
 
   return (
-    <li>
-      <Link href={`${props.url}`} passHref>
+    <li className="mb-1.5">
+      <Link href={props.url} passHref>
         <a
           className={[
             'cursor-pointer transition text-sm',
             props.url === router.pathname
               ? 'text-brand-900'
-              : 'hover:text-brand-900 text-scale-1000',
+              : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
           ].join(' ')}
         >
           {props.icon && (
@@ -149,7 +147,7 @@ const Content = (props) => {
   const { menu, id } = props
 
   return (
-    <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
+    <ul className={['relative w-full flex flex-col gap-0 pb-5'].join(' ')}>
       <Link href={`${menu.parent ?? '/'}`} passHref>
         <a
           className={[
@@ -168,8 +166,8 @@ const Content = (props) => {
 
       <Link href={menu.url ?? ''} passHref>
         <a>
-          <div className="flex items-center gap-3 my-3">
-            <HeaderImage icon={menu.icon} />
+          <div className="flex items-center gap-3 my-3 text-brand-900">
+            <HomeMenuIconPicker icon={menu.icon} />
             <HeaderLink title={menu.title} url={menu.url} id={id} />
           </div>
         </a>
@@ -179,7 +177,7 @@ const Content = (props) => {
         return (
           <div key={x.name}>
             {x.items && x.items.length > 0 ? (
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col gap-2.5">
                 {x.items.map((subItem, subItemIndex) => {
                   return (
                     <ContentAccordionLink

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

@@ -1,48 +1,44 @@
-// import apiCommonSections from '~/../../spec/common-client-libs-sections.json'
-
-import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
+import { useCommonSections, useSpec } from './NavigationMenu.utils'
 import NavigationMenuRefListItems from './NavigationMenuRefListItems'
 
 import React from 'react'
 
-interface INavigationMenuRefList {
-  id: RefIdOptions
-  lib: RefKeyOptions
-  commonSections: any[] // to do type up
-
-  // the keys of menu items that are allowed to be shown on the side menu
-  // if undefined, we show all the menu items
-  allowedClientKeys?: string[]
-  active: boolean
-  spec?: any
+interface NavigationMenuRefListProps {
+  id: string
+  basePath: string
+  commonSectionsFile: string
+  specFile?: string
 }
 
-const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
+const NavigationMenuRefList = ({
   id,
-  lib,
-  commonSections,
+  basePath,
+  commonSectionsFile,
+  specFile,
+}: NavigationMenuRefListProps) => {
+  const commonSections = useCommonSections(commonSectionsFile)
+  const spec = useSpec(specFile)
+
+  if (!commonSections) {
+    return null
+  }
+
+  if (specFile && !spec) {
+    return null
+  }
 
-  active,
-  spec,
-}) => {
   const filteredSections = commonSections.filter((section) => {
     return !section.excludes?.includes(id)
   })
 
   return (
-    <div
-      className={[
-        'transition-all duration-150 ease-out',
-        // enabled
-        active && 'opacity-100 ml-0 delay-150 h-auto',
-        // move menu back to margin-left
-        // level === 'home' && 'ml-12',
-        // disabled
-        // level !== 'home' && level !== id ? '-ml-8' : '',
-        !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
-      ].join(' ')}
-    >
-      <NavigationMenuRefListItems id={id} lib={lib} commonSections={filteredSections} spec={spec} />
+    <div className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150 h-auto">
+      <NavigationMenuRefListItems
+        id={id}
+        commonSections={filteredSections}
+        spec={spec}
+        basePath={basePath}
+      />
     </div>
   )
 }

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

@@ -1,38 +1,21 @@
 import * as Accordion from '@radix-ui/react-accordion'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { IconChevronLeft } from 'ui'
+import { IconChevronLeft, IconChevronUp } from 'ui'
 import * as NavItems from './NavigationMenu.constants'
 
-import { find } from 'lodash'
 import Image from 'next/image'
-import { useTheme } from 'common/Providers'
 
 import RevVersionDropdown from '~/components/RefVersionDropdown'
 import { useMenuActiveRefId } from '~/hooks/useMenuState'
-import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 
 import React, { Fragment } from 'react'
-import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers'
-import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils'
-
-const HeaderImage = React.memo(function HeaderImage(props: any) {
-  const router = useRouter()
-  const { isDarkMode } = useTheme()
-
-  return (
-    <Image
-      alt={props.icon}
-      width={15}
-      height={15}
-      src={`${router.basePath}` + `/img/icons/menu/${props.icon}${isDarkMode ? '' : '-light'}.svg`}
-    />
-  )
-})
+import { cn } from 'ui/src/utils/cn'
+import { ICommonItem, ICommonSection } from '~/components/reference/Reference.types'
+import HomeMenuIconPicker from './HomeMenuIconPicker'
+import { deepFilterSections } from './NavigationMenu.utils'
 
 const HeaderLink = React.memo(function HeaderLink(props: any) {
-  const router = useRouter()
-
   return (
     <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
       {props.title ?? props.id}
@@ -40,106 +23,120 @@ const HeaderLink = React.memo(function HeaderLink(props: any) {
   )
 })
 
-const FunctionLink = React.memo(function FunctionLink({
-  title,
-  id,
-  icon,
-  library,
-  slug,
-}: {
+interface FunctionLinkProps {
   title: string
   name?: string
   id: string
   icon?: string
-  product?: string
-  library: string
+  basePath: string
   slug: string
-}) {
+  isParent?: boolean
+  isSubItem?: boolean
+}
+
+const FunctionLink = React.memo(function FunctionLink({
+  title,
+  id,
+  icon,
+  basePath,
+  slug,
+  isParent = false,
+  isSubItem = false,
+}: FunctionLinkProps) {
   const router = useRouter()
-  const activeAccordianItem = useMenuActiveRefId()
+  const activeAccordionItem = useMenuActiveRefId()
 
-  // check if we're on a versioned page
-  let version = ''
-  if (router.asPath.includes('v1')) {
-    version = 'v1'
-  }
+  const url = `${router.basePath}${basePath}/${slug}`
+  const active = activeAccordionItem === id
 
-  if (router.asPath.includes('v0')) {
-    version = 'v0'
-  }
-
-  const active = activeAccordianItem === id
   return (
-    <li key={id} className="function-link-item">
-      <Link href={`/reference/${library}/${version ? version + '/' : ''}${slug}`} passHref>
-        <a
-          className={[
-            'cursor-pointer transition text-sm hover:text-brand-900 flex gap-3',
-            active ? 'text-brand-900' : 'text-scale-1000',
-          ].join(' ')}
-        >
-          {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
-          {title}
-        </a>
-      </Link>
+    <li className="function-link-item leading-5">
+      <a
+        href={url}
+        /**
+         * We don't actually want to navigate or re-render anything
+         * since ref links are all sub-sections on the same page
+         */
+        onClick={(e) => {
+          e.preventDefault()
+          history.pushState({}, '', url)
+          document.getElementById(slug)?.scrollIntoView()
+        }}
+        className={cn(
+          'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
+          isParent ? 'flex justify-between' : 'leading-3',
+          active ? 'text-brand-900' : 'text-scale-1000'
+        )}
+      >
+        {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
+        {title}
+        {active && !isSubItem && (
+          <div
+            aria-hidden="true"
+            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+          ></div>
+        )}
+        {isParent && (
+          <IconChevronUp
+            width={16}
+            className="data-open-parent:rotate-0 data-closed-parent:rotate-90 transition"
+          />
+        )}
+      </a>
     </li>
   )
 })
 
-const RenderLink = React.memo(function RenderLink(props: any) {
-  const activeAccordianItem = useMenuActiveRefId()
-  let active = false
+export interface RenderLinkProps {
+  section: ICommonSection
+  basePath: string
+}
 
-  const isFilter = props.filterIds?.includes(activeAccordianItem)
-  const isModifier = props.modifierIds?.includes(activeAccordianItem)
-  const isAuthServer = props.authServerIds?.includes(activeAccordianItem)
+const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderLinkProps) {
+  const activeAccordionItem = useMenuActiveRefId()
 
-  if (
-    (isFilter && props.id === 'using-filters') ||
-    (activeAccordianItem === 'using-filters' && props.id === 'using-filters')
-  ) {
-    active = true
-  } else if (
-    (isModifier && props.id === 'using-modifiers') ||
-    (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
-  ) {
-    active = true
-  } else if (
-    (isAuthServer && props.id === 'admin-api') ||
-    (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
-  ) {
-    active = true
-  } else {
-    active = false
+  if (!('items' in section)) {
+    return (
+      <FunctionLink
+        title={section.title}
+        id={section.id}
+        slug={section.slug}
+        basePath={basePath}
+        isParent={false}
+        isSubItem
+      />
+    )
   }
 
+  let active =
+    section.id === activeAccordionItem ||
+    section.items.some((item) => item.id === activeAccordionItem)
+
   return (
-    <Accordion.Root
-      collapsible
-      key={props.id + '-accordian-root-for-func-' + props.index}
-      type="single"
-      value={active ? props.id : ''}
-    >
-      <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
-        <FunctionLink library={props.lib} title={props.title} id={props.id} slug={props.slug} />
-        <Accordion.Content
-          key={props.id + '-sub-items-accordion-container'}
-          className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
-        >
-          {props.items &&
-            props.items
-              .filter((item) => props.allowedKeys.includes(item.id))
-              .map((item) => {
-                return (
-                  <FunctionLink
-                    key={item.title}
-                    library={props.lib}
-                    title={item.title}
-                    id={item.id}
-                    slug={item.slug}
-                  />
-                )
-              })}
+    <Accordion.Root collapsible type="single" value={active ? section.id : ''}>
+      <Accordion.Item value={section.id}>
+        <FunctionLink
+          title={section.title}
+          id={section.id}
+          slug={section.slug}
+          basePath={basePath}
+          isParent
+          isSubItem
+        />
+        <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up border-l border-scale-600 pl-3 ml-1 data-open:mt-2 grid gap-2.5">
+          {section.items.map((item) => {
+            return (
+              <FunctionLink
+                key={item.id}
+                title={item.title}
+                id={item.id}
+                slug={item.slug}
+                basePath={basePath}
+                isParent={false}
+                isSubItem={false}
+              />
+            )
+          })}
         </Accordion.Content>
       </Accordion.Item>
     </Accordion.Root>
@@ -158,67 +155,25 @@ const Divider = () => {
   return <div className="h-px w-full bg-blackA-300 dark:bg-whiteA-300 my-3"></div>
 }
 
-interface INavigationMenuRefList {
-  id: RefIdOptions
-  lib: RefKeyOptions
-  commonSections: any[] // to do type up
-
-  // the keys of menu items that are allowed to be shown on the side menu
-  // if undefined, we show all the menu items
-  allowedClientKeys?: string[]
+interface NavigationMenuRefListItemsProps {
+  id: string
+  basePath: string
+  commonSections: ICommonItem[]
   spec?: any
 }
 
-const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, spec }) => {
-  const allowedClientKeys = spec ? generateAllowedClientLibKeys(commonSections, spec) : undefined
-
-  let sections = commonSections
-
-  const allowedKeys = allowedClientKeys
-
-  if (!sections) console.error('no common sections imported')
-
+const NavigationMenuRefListItems = ({
+  id,
+  basePath,
+  commonSections,
+  spec,
+}: NavigationMenuRefListItemsProps) => {
   const menu = NavItems[id]
-  const databaseFunctions = find(sections, { title: 'Database' })
-    ? find(sections, { title: 'Database' }).items
-    : []
 
-  const authFunctions = find(sections, { title: 'Auth' })
-    ? find(sections, { title: 'Auth' }).items
-    : []
-
-  const filterIds =
-    databaseFunctions.length > 0
-      ? find(databaseFunctions, {
-          id: 'using-filters',
-        }) &&
-        find(databaseFunctions, {
-          id: 'using-filters',
-        })
-          .items.filter((x) => allowedKeys.includes(x.id))
-          .map((x) => x.id)
-      : []
-  const modifierIds =
-    databaseFunctions.length > 0
-      ? find(databaseFunctions, {
-          id: 'using-modifiers',
-        }) &&
-        find(databaseFunctions, {
-          id: 'using-modifiers',
-        })
-          .items.filter((x) => allowedKeys.includes(x.id))
-          .map((x) => x.id)
-      : []
-
-  const authServerIds =
-    databaseFunctions.length > 0
-      ? find(authFunctions, {
-          id: 'admin-api',
-        }) &&
-        find(authFunctions, {
-          id: 'admin-api',
-        }).items.map((x) => x.id)
-      : []
+  const specFunctionIds = spec?.functions.map(({ id }) => id)
+  const filteredSections = spec
+    ? deepFilterSections(commonSections, specFunctionIds)
+    : commonSections
 
   return (
     <div className={'w-full flex flex-col gap-0 sticky top-8'}>
@@ -237,61 +192,26 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
           <span>Back to Main Menu</span>
         </a>
       </Link>
-
       <div className="flex items-center gap-3 my-3">
-        <HeaderImage icon={menu.icon} />
+        <HomeMenuIconPicker icon={menu.icon} width={21} height={21} />
         <HeaderLink title={menu.title} url={menu.url} id={id} />
         <RevVersionDropdown />
       </div>
-
-      <ul className="function-link-list flex flex-col gap-1">
-        {sections.map((fn: any, fnIndex) => {
-          // run allow check
-          if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
-            return <Fragment key={fn.id}></Fragment>
-          }
-
-          // handle subtitles with subitems
-          return fn.id ? (
-            <Fragment key={fn.id}>
-              <RenderLink {...fn} lib={lib} />
-              {fn.items &&
-                fn.items.map((item) => (
-                  <RenderLink
-                    {...item}
-                    library={menu.title}
-                    index={fnIndex}
-                    modifierIds={modifierIds}
-                    filterIds={filterIds}
-                    authServerIds={authServerIds}
-                    lib={lib}
-                    allowedKeys={allowedKeys}
-                  />
-                ))}
-            </Fragment>
-          ) : (
-            <Fragment key={fn.title}>
-              <Divider />
-              <SideMenuTitle title={fn.title} />
-              {fn.items &&
-                fn.items.map((item, i) => {
-                  // run allow check
-                  if (isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys))
-                    return <Fragment key={item.id + i}></Fragment>
-                  return (
-                    <RenderLink
-                      {...item}
-                      key={item.id + i}
-                      library={menu.title}
-                      index={fnIndex}
-                      modifierIds={modifierIds}
-                      filterIds={filterIds}
-                      authServerIds={authServerIds}
-                      lib={lib}
-                      allowedKeys={allowedKeys}
-                    />
-                  )
-                })}
+      <ul className="function-link-list flex flex-col gap-2 pb-5">
+        {filteredSections.map((section) => {
+          return (
+            <Fragment key={section.title}>
+              {section.type === 'category' ? (
+                <>
+                  <Divider />
+                  <SideMenuTitle title={section.title} />
+                  {section.items.map((item) => (
+                    <RenderLink key={item.id} section={item} basePath={basePath} />
+                  ))}
+                </>
+              ) : (
+                <RenderLink section={section} basePath={basePath} />
+              )}
             </Fragment>
           )
         })}
@@ -300,4 +220,4 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
   )
 }
 
-export default React.memo(Content)
+export default React.memo(NavigationMenuRefListItems)

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

@@ -56,7 +56,7 @@ const TopNavBar: FC = () => {
   }
 
   return (
-    <nav className="h-[60px] border-b px-4 backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300">
+    <nav className="h-[60px] border-b px-4 backdrop-blur backdrop-filter bg-white-1200 bg-scale-200/90">
       <div className="max-w-[1400px] grid grid-cols-12 mx-auto gap-4 px-5 h-full">
         <div className="col-span-3 flex items-center">
           <button className="mr-4 block stroke-2 lg:hidden" onClick={toggleMobileMenu}>
@@ -129,7 +129,7 @@ const TopNavBar: FC = () => {
             type="outline"
             as="a"
             // @ts-ignore
-            href="https://app.supabase.com"
+            href="https://supabase.com/dashboard"
             className="text-scale-1100 text-sm"
             target="_blank"
             rel="noreferrer noopener"

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

@@ -56,7 +56,7 @@ const TopNavBarRef: FC = () => {
   }
 
   return (
-    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300">
+    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200/90">
       <div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
         <div className={['lg:hidden'].join(' ')}>
           <Link href="/">
@@ -119,7 +119,7 @@ const TopNavBarRef: FC = () => {
             type="text"
             as="a"
             // @ts-ignore
-            href="https://app.supabase.com"
+            href="https://supabase.com/dashboard"
             target="_blank"
             rel="noreferrer noopener"
           >

apps/docs/components/index.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link'
 import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui'
 import StepHikeCompact from '~/components/StepHikeCompact'
-
 // Common components
 import Admonition from './Admonition'
 import ButtonCard from './ButtonCard'
@@ -17,6 +16,7 @@ import FunctionsExamples from './FunctionsExamples'
 import { Mermaid } from 'mdx-mermaid/lib/Mermaid'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import { Heading } from './CustomHTMLElements'
+import DatabaseSetup from './MDX/database_setup.mdx'
 import ProjectSetup from './MDX/project_setup.mdx'
 import QuickstartIntro from './MDX/quickstart_intro.mdx'
 import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx'
@@ -31,6 +31,29 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo
 import Options from '~/components/Options'
 import Param from '~/components/Params'
 
+import {
+  IconMenuJavascript,
+  IconMenuHome,
+  IconMenuGettingStarted,
+  IconMenuDatabase,
+  IconMenuServerlessApis,
+  IconMenuAuth,
+  IconMenuEdgeFunctions,
+  IconMenuRealtime,
+  IconMenuStorage,
+  IconMenuPlatform,
+  IconMenuResources,
+  IconMenuSelfHosting,
+  IconMenuIntegrations,
+  IconMenuFlutter,
+  IconMenuPython,
+  IconMenuCsharp,
+  IconMenuSwift,
+  IconMenuKotlin,
+  IconMenuApi,
+  IconMenuCli,
+} from './Navigation/NavigationMenu/HomeMenuIcons'
+
 const components = {
   ...markdownComponents,
   Admonition,
@@ -44,6 +67,7 @@ const components = {
   FunctionsExamples,
   JwtGenerator,
   QuickstartIntro,
+  DatabaseSetup,
   ProjectSetup,
   SocialProviderSetup,
   SocialProviderSettingsSupabase,
@@ -73,6 +97,26 @@ const components = {
   CliGlobalFlagsHandler: () => <CliGlobalFlagsHandler />,
   Options,
   Param,
+  IconMenuJavascript,
+  IconMenuHome,
+  IconMenuGettingStarted,
+  IconMenuDatabase,
+  IconMenuServerlessApis,
+  IconMenuAuth,
+  IconMenuEdgeFunctions,
+  IconMenuRealtime,
+  IconMenuStorage,
+  IconMenuPlatform,
+  IconMenuResources,
+  IconMenuSelfHosting,
+  IconMenuIntegrations,
+  IconMenuFlutter,
+  IconMenuPython,
+  IconMenuCsharp,
+  IconMenuKotlin,
+  IconMenuSwift,
+  IconMenuApi,
+  IconMenuCli,
 }
 
 export default components

apps/docs/components/reference/CLICommandSection.tsx

@@ -1,6 +1,5 @@
 import ReactMarkdown from 'react-markdown'
 import { CodeBlock, IconChevronRight, Tabs } from 'ui'
-// @ts-expect-error
 import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yml' }
 import Options from '~/components/Options'
 import Param from '~/components/Params'

apps/docs/components/reference/OldVersionAlert.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMenuActiveRefId } from '~/hooks/useMenuState'
+import Admonition from '../Admonition'
+import { ICommonSection } from './Reference.types'
+
+export interface OldVersionAlertProps {
+  sections: ICommonSection[]
+}
+
+const OldVersionAlert = ({ sections }: OldVersionAlertProps) => {
+  const router = useRouter()
+  const activeRefId = useMenuActiveRefId()
+
+  const activeSection = sections.find(({ id }) => id === activeRefId)
+
+  // Remove the version number from URL to get the latest
+  const latestVersionUrl = router.asPath
+    .split('/')
+    .slice(0, -2)
+    .concat(activeSection ? [activeSection.slug] : [])
+    .join('/')
+
+  return (
+    <div className="sticky top-10 z-10 lg:top-14 lg:w-1/2">
+      <Admonition type="caution">
+        You&apos;re viewing an older version of this library.
+        <br />
+        <Link href={latestVersionUrl}>
+          <a className="underline decoration-brand-700 underline-offset-4 decoration-1">
+            Switch to the latest
+          </a>
+        </Link>
+        .
+      </Admonition>
+    </div>
+  )
+}
+
+export default OldVersionAlert

apps/docs/components/reference/RefFunctionSection.tsx

@@ -10,6 +10,7 @@ import { extractTsDocNode, generateParameters } from '~/lib/refGenerator/helpers
 import RefDetailCollapse from '~/components/reference/RefDetailCollapse'
 import { Fragment } from 'react'
 import { IRefFunctionSection } from './Reference.types'
+import components from '~/components'
 
 const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
   const item = props.spec.functions.find((x: any) => x.id === props.funcData.id)
@@ -38,16 +39,16 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
             <header className={['prose'].join(' ')}>
               {shortText && <ReactMarkdown className="text-sm">{shortText}</ReactMarkdown>}
             </header>
-
             {item.description && (
               <div className="prose">
                 <ReactMarkdown className="text-sm">{item.description}</ReactMarkdown>
               </div>
             )}
-
             {item.notes && (
               <div className="prose">
-                <ReactMarkdown className="text-sm">{item.notes}</ReactMarkdown>
+                <ReactMarkdown className="text-sm" components={components}>
+                  {item.notes}
+                </ReactMarkdown>
               </div>
             )}
             {/* // parameters */}
@@ -123,6 +124,8 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                         ? 'dart'
                         : example?.code?.startsWith('```c#')
                         ? 'csharp'
+                        : example?.code?.startsWith('```kotlin')
+                        ? 'kotlin'
                         : 'js'
                       //                     `
                       // import { createClient } from '@supabase/supabase-js'
@@ -156,7 +159,8 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                                   .replace('js', '')
                                   .replace('ts', '')
                                   .replace('dart', '')
-                                  .replace('c#', ''))}
+                                  .replace('c#', '')
+                                  .replace('kotlin', ''))}
                           </CodeBlock>
 
                           {((tables && tables.length > 0) || sql) && (

apps/docs/components/reference/RefSectionHandler.tsx

@@ -8,28 +8,41 @@ import RefFunctionSection from '~/components/reference/RefFunctionSection'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import ApiOperationSection from './ApiOperationSection'
 import CliCommandSection from './CLICommandSection'
-import { IAPISpec, ICommonFunc, IRefStaticDoc, ISpec, TypeSpec } from './Reference.types'
+import OldVersionAlert from './OldVersionAlert'
+import { IAPISpec, ICommonSection, IRefStaticDoc, ISpec, TypeSpec } from './Reference.types'
 
 interface RefSectionHandlerProps {
-  sections: ICommonFunc[]
+  sections: ICommonSection[]
   spec?: ISpec | IAPISpec
   typeSpec?: TypeSpec
   pageProps: { docs: IRefStaticDoc[] }
   type: 'client-lib' | 'cli' | 'api'
+  isOldVersion?: boolean
 }
 
 const RefSectionHandler = (props: RefSectionHandlerProps) => {
   const router = useRouter()
 
-  const slug = router.query.slug[0]
+  const [slug] = router.query.slug
 
   // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up
   // find the #sign-up element and scroll to that
   useEffect(() => {
-    if (document && slug !== 'start') {
-      document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView()
+    document.getElementById(slug)?.scrollIntoView()
+  }, [slug])
+
+  useEffect(() => {
+    function handler() {
+      const [slug] = window.location.pathname.split('/').slice(-1)
+      document.getElementById(slug)?.scrollIntoView()
     }
-  })
+
+    window.addEventListener('popstate', handler)
+
+    return () => {
+      window.removeEventListener('popstate', handler)
+    }
+  }, [])
 
   function getPageTitle() {
     switch (props.type) {
@@ -58,47 +71,50 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
         />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
+      {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
       <RefSubLayout>
-        {props.sections.map((x, i) => {
-          switch (x.type) {
+        {props.sections.map((section, i) => {
+          const sectionType = section.type
+          switch (sectionType) {
             case 'markdown':
-              const markdownData = props.pageProps.docs.find((doc) => doc.id === x.id)
+              const markdownData = props.pageProps.docs.find((doc) => doc.id === section.id)
 
-              return <RefEducationSection key={x.id + i} item={x} markdownContent={markdownData} />
-              break
+              return (
+                <RefEducationSection
+                  key={section.id + i}
+                  item={section}
+                  markdownContent={markdownData}
+                />
+              )
             case 'function':
               return (
                 <RefFunctionSection
-                  key={x.id + i}
-                  funcData={x}
-                  commonFuncData={x}
+                  key={section.id + i}
+                  funcData={section}
+                  commonFuncData={section}
                   spec={props.spec}
                   typeSpec={props.typeSpec}
                 />
               )
             case 'cli-command':
-              return <CliCommandSection key={x.id + i} funcData={x} commonFuncData={x} />
-              break
+              return (
+                <CliCommandSection
+                  key={section.id + i}
+                  funcData={section}
+                  commonFuncData={section}
+                />
+              )
             case 'operation':
               return (
                 <ApiOperationSection
-                  key={x.id + i}
-                  funcData={x}
-                  commonFuncData={x}
+                  key={section.id + i}
+                  funcData={section}
+                  commonFuncData={section}
                   spec={props.spec}
                 />
               )
             default:
-              return (
-                <RefFunctionSection
-                  key={x.id + i}
-                  funcData={x}
-                  commonFuncData={x}
-                  spec={props.spec}
-                  typeSpec={props.typeSpec}
-                />
-              )
-              break
+              throw new Error(`Unknown common section type '${sectionType}'`)
           }
         })}
       </RefSubLayout>

apps/docs/components/reference/Reference.types.ts

@@ -33,19 +33,61 @@ export interface IFunctionDefinition {
   examples?: []
 }
 
-export interface ICommonFunc {
-  id?: string
+export interface ICommonBase {
+  type: string
   title: string
-  slug?: string
-  product?: string
-  type?: string
-  parent?: string
-  items?: ICommonFunc[]
+  summary?: string
 }
 
+export interface ICommonBaseSection extends ICommonBase {
+  id: string
+  slug: string
+  excludes?: string[]
+}
+
+export interface ICommonCategory extends ICommonBase {
+  type: 'category'
+  items: ICommonSection[]
+  excludes?: string[]
+}
+
+export interface ICommonMarkdown extends ICommonBaseSection {
+  type: 'markdown'
+}
+
+export interface ICommonFunctionGroup extends ICommonBaseSection {
+  type: 'function'
+  isFunc: false
+  product: string
+  items: ICommonFunction[]
+}
+
+export interface ICommonFunction extends ICommonBaseSection {
+  type: 'function'
+  product: string
+  parent?: string
+}
+
+export interface ICommonCliCommand extends ICommonBaseSection {
+  type: 'cli-command'
+}
+
+export interface ICommonApiOperation extends ICommonBaseSection {
+  type: 'operation'
+}
+
+export type ICommonSection =
+  | ICommonMarkdown
+  | ICommonFunctionGroup
+  | ICommonFunction
+  | ICommonCliCommand
+  | ICommonApiOperation
+
+export type ICommonItem = ICommonCategory | ICommonSection
+
 export interface IRefFunctionSection {
   funcData: any
-  commonFuncData: ICommonFunc
+  commonFuncData: ICommonFunction
   spec: any
   typeSpec?: TypeSpec
 }

apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx

@@ -1,6 +1,5 @@
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 
-// @ts-expect-error
 import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yaml' }
 import Param from '~/components/Params'
 import Options from '~/components/Options'

apps/docs/data/authProviders.ts

@@ -10,7 +10,7 @@ const authProviders = [
     authType: 'social',
   },
   {
-    name: 'Azure',
+    name: 'Azure (Microsoft)',
     logo: '/docs/img/icons/microsoft-icon',
     href: '/guides/auth/social-login/auth-azure',
     official: false,

apps/docs/data/footer.json

@@ -1,10 +0,0 @@
-[
-  { "title": "Contributing", "url": "/handbook/contributing" },
-  { "title": "Changelog", "url": "https://supabase.com/changelog" },
-  {
-    "title": "Author Styleguide",
-    "url": "https://github.com/supabase/supabase/blob/master/DEVELOPERS.md"
-  },
-  { "title": "Open Source", "url": "https://supabase.com/docs/oss" },
-  { "title": "SupaSquad", "url": "https://supabase.com/supasquad" }
-]

apps/docs/data/footer.ts

@@ -0,0 +1,32 @@
+import { IconCheckCircle, IconLifeBuoy } from '~/../../packages/ui'
+
+export const primaryLinks = [
+  {
+    featherIcon: IconLifeBuoy,
+    text: 'Need some help?',
+    ctaLabel: 'Contact support',
+    url: 'https://app.supabase.com/support/new',
+  },
+  {
+    icon: 'M12.9521 10.5073C12.766 10.3212 12.5289 10.1943 12.2708 10.1427L10.6794 9.82467C9.80719 9.65024 8.90169 9.77152 8.10609 10.1693L7.89409 10.2747C7.0985 10.6725 6.193 10.7938 5.32076 10.6193L4.03343 10.362C3.81823 10.319 3.59574 10.3298 3.38571 10.3934C3.17569 10.457 2.9846 10.5715 2.82943 10.7267M5.33343 2.88867H10.6668L10.0001 3.55534V7.00334C10.0002 7.35693 10.1407 7.69602 10.3908 7.94601L13.7241 11.2793C14.5641 12.1193 13.9688 13.5553 12.7808 13.5553H3.21876C2.03076 13.5553 1.43609 12.1193 2.27609 11.2793L5.60943 7.94601C5.85949 7.69602 6.00002 7.35693 6.00009 7.00334V3.55534L5.33343 2.88867Z',
+    text: 'Lastest product updates?',
+    ctaLabel: 'See Changelog',
+    url: 'https://supabase.com/changelog',
+  },
+  {
+    featherIcon: IconCheckCircle,
+    text: "Something's not right?",
+    ctaLabel: 'Check system status',
+    url: 'https://status.supabase.com/',
+  },
+]
+
+export const secondaryLinks = [
+  { title: 'Contributing', url: '/handbook/contributing' },
+  {
+    title: 'Author Styleguide',
+    url: 'https://github.com/supabase/supabase/blob/master/DEVELOPERS.md',
+  },
+  { title: 'Open Source', url: 'https://supabase.com/open-source' },
+  { title: 'SupaSquad', url: 'https://supabase.com/supasquad' },
+]

apps/docs/data/nonGeneratedReferencePages.ts

@@ -16,6 +16,8 @@ const nonGeneratedReferencePages = [
   'docs/reference/csharp',
   'docs/reference/csharp/installing',
   'docs/reference/csharp/initializing',
+  'docs/reference/kotlin/installing',
+  'docs/reference/kotlin/initializing',
   'docs/reference/api',
   'docs/reference/api/release-notes',
   'docs/reference/cli',

apps/docs/data/repos/realtime.json

@@ -25,7 +25,7 @@
     "site_admin": false
   },
   "html_url": "https://github.com/supabase/realtime",
-  "description": "Listen to your to PostgreSQL database in realtime via websockets. Built with Elixir.",
+  "description": "Listen to your PostgreSQL database in realtime via websockets. Built with Elixir.",
   "fork": false,
   "url": "https://api.github.com/repos/supabase/realtime",
   "forks_url": "https://api.github.com/repos/supabase/realtime/forks",

apps/docs/docs/ref/cli/global-flags.mdx

@@ -1,5 +1,6 @@
 ---
 title: Global Flags
+subtitle: 'Supabase CLI supports global flags for every command.'
 description: 'Supabase CLI supports global flags for every command.'
 ---
 

apps/docs/docs/ref/csharp/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-csharp.svg" className="w-8 h-8 rounded" />
+  <IconMenuCsharp width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">C# Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-csharp</h2>

apps/docs/docs/ref/csharp/release-notes.mdx

@@ -3,6 +3,174 @@ id: release-notes
 title: Release Notes
 ---
 
+## 0.11.0 - 2023-05-24
+
+- Update dependency: postgrest-csharp@3.2.0
+  - General codebase and QOL improvements. Exceptions are generally thrown through `PostgrestException` now instead
+    of `Exception`. A `FailureHint.Reason` is provided with failures if possible to parse.
+  - `AddDebugListener` is now available on the client to help with debugging
+  - Merges [#65](https://github.com/supabase-community/postgrest-csharp/pull/65) Cleanup + Add better exception handling
+  - Merges [#66](https://github.com/supabase-community/postgrest-csharp/pull/66) Local test Fixes
+  - Fixes [#67](https://github.com/supabase-community/postgrest-csharp/issues/67) Postgrest Reference attribute is
+    producing StackOverflow for circular references
+- Update dependency: gotrue-csharp@4.0.2
+  - [#58](https://github.com/supabase-community/gotrue-csharp/issues/58) - Add support for the `reauthentication` endpoint which allows for secure password changes.
+- Update dependency: realtime-csharp@6.0.1
+  - Updates publishing action for future packages, includes README and icon.
+  - Merges [#28](https://github.com/supabase-community/realtime-csharp/pull/28) and [#30](https://github.com/supabase-community/realtime-csharp/pull/30)
+  - The realtime client now takes a "fail-fast" approach. On establishing an initial connection, client will throw
+    a `RealtimeException` in `ConnectAsync()` if the socket server is unreachable. After an initial connection has been
+    established, the **client will continue attempting reconnections indefinitely until disconnected.**
+  - [Major, New] C# `EventHandlers` have been changed to `delegates`. This should allow for cleaner event data access over
+    the previous subclassed `EventArgs` setup. Events are scoped accordingly. For example, the `RealtimeSocket` error
+    handlers will receive events regarding socket connectivity; whereas the `RealtimeChannel` error handlers will receive
+    events according to `Channel` joining/leaving/etc. This is implemented with the following methods prefixed by (
+    Add/Remove/Clear):
+    - `RealtimeBroadcast.AddBroadcastEventHandler`
+    - `RealtimePresence.AddPresenceEventHandler`
+    - `RealtimeSocket.AddStateChangedHandler`
+    - `RealtimeSocket.AddMessageReceivedHandler`
+    - `RealtimeSocket.AddHeartbeatHandler`
+    - `RealtimeSocket.AddErrorHandler`
+    - `RealtimeClient.AddDebugHandler`
+    - `RealtimeClient.AddStateChangedHandler`
+    - `RealtimeChannel.AddPostgresChangeHandler`
+    - `RealtimeChannel.AddMessageReceivedHandler`
+    - `RealtimeChannel.AddErrorHandler`
+    - `Push.AddMessageReceivedHandler`
+  - [Major, new] `ClientOptions.Logger` has been removed in favor of `Client.AddDebugHandler()` which allows for
+    implementing custom logging solutions if desired.
+    - A simple logger can be set up with the following:
+    ```c#
+    client.AddDebugHandler((sender, message, exception) => Debug.WriteLine(message));
+    ```
+  - [Major] `Connect()` has been marked `Obsolete` in favor of `ConnectAsync()`
+  - Custom reconnection logic has been removed in favor of using the built-in logic from `Websocket.Client@4.6.1`.
+  - Exceptions that are handled within this library have been marked as `RealtimeException`s.
+  - The local, docker-composed test suite has been brought back (as opposed to remotely testing on live supabase servers)
+    to test against.
+  - Comments have been added throughout the entire codebase and an `XML` file is now generated on build.
+
+## 0.10.0 - 2023-05-14
+
+- Changes options to require `Supabase.SupabaseOptions.SessionPersistor` from using `ISupabaseSessionHandler`
+  to `IGotrueSessionPersistance<Session>` (these are now synchronous operations).
+- Update dependency: gotrue-csharp@4.0.1
+  - [#60](https://github.com/supabase-community/gotrue-csharp/pull/60) - Add interfaces, bug fixes, additional error
+    reason detection. Thanks [@wiverson](https://github.com/wiverson)!
+  - [#57](https://github.com/supabase-community/gotrue-csharp/pull/57) Refactor exceptions, code cleanup, and move to
+    delegate auth state changes
+    - Huge thank you to [@wiverson](https://github.com/wiverson) for his help on this refactor and release!
+    - Changes
+      - Exceptions have been simplified to a single `GotrueException`. A `Reason` field has been added
+        to `GotrueException` to clarify what happened. This should also be easier to manage as the Gotrue
+        server API & messages evolve.
+      - The session delegates for `Save`/`Load`/`Destroy` have been simplified to no longer require `async`.
+      - Console logging in a few places (most notable the background refresh thread) has been removed
+        in favor of a notification method. See `Client.AddDebugListener()` and the test cases for examples.
+        This will allow you to implement your own logging strategy (write to temp file, console, user visible
+        err console, etc).
+      - The client now more reliably emits AuthState changes.
+      - There is now a single source of truth for headers in the stateful Client - the `Options` headers.
+    - New feature:
+      - Added a `Settings` request to the stateless API only - you can now query the server instance to
+        determine if it's got the settings you need. This might allow for things like a visual
+        component in a tool to verify the GoTrue settings are working correctly, or tests that run differently
+        depending on the server configuration.
+    - Implementation notes:
+      - Test cases have been added to help ensure reliability of auth state change notifications
+        and persistence.
+      - Persistence is now managed via the same notifications as auth state change
+
+## 0.9.1 - 2023-04-28
+
+- Update dependency: gotrue-csharp@3.1.1
+  - Implements `SignInWithIdToken` for Apple/Google signing from LW7. A HUGE thank you
+    to [@wiverson](https://github.com/wiverson)!
+- Update dependency: realtime-csharp@5.0.5
+  - Re: [#27](https://github.com/supabase-community/realtime-csharp/issues/27) `PostgresChangesOptions` was not
+    setting `listenType` in constructor. Thanks [@Kuffs2205](https://github.com/Kuffs2205)
+- Update dependency: supabase-storage-csharp@1.2.10
+  - Re: [#7](https://github.com/supabase-community/storage-csharp/issues/7) Implements a `DownloadPublicFile` method.
+
+## 0.9.0 - 2023-04-12
+
+- Update dependency: gotrue-csharp@3.1.0
+
+  - [Minor] Implements PKCE auth flow. SignIn using a provider now returns an instance of `ProviderAuthState` rather
+    than a `string`.
+
+- Update dependency: supabase-storage-csharp@1.2.9
+  - Implements storage features from LW7:
+    - feat: custom file size limit and mime types at bucket
+      level [supabase/storage-js#151](https://github.com/supabase/storage-js/pull/151) file size and mime type
+      limits per bucket
+    - feat: quality option, image
+      transformation [supabase/storage-js#145](https://github.com/supabase/storage-js/pull/152) quality option for
+      image transformations
+    - feat: format option for webp
+      support [supabase/storage-js#142](https://github.com/supabase/storage-js/pull/142) format option for image
+      transformation
+
+## 0.8.8 - 2023-03-29
+
+- Update dependency: gotrue-csharp@3.0.6
+  - Supports adding `SignInOptions` (i.e. `RedirectTo`) on `OAuth Provider` SignIn requests.
+
+## 0.8.7 - 2023-03-23
+
+- Update dependency: realtime-csharp@5.0.4
+  - Re: [#26](https://github.com/supabase-community/realtime-csharp/pull/26) - Fixes Connect() not returning callback
+    result when the socket isn't null. Thanks [@BlueWaterCrystal](https://github.com/BlueWaterCrystal)!
+
+## 0.8.6 - 2023-03-23
+
+- Update dependency: supabase-storage-csharp@1.2.8
+  - [Merge #5](https://github.com/supabase-community/storage-csharp/pull/5) Added search string as an optional search
+    parameter. Thanks [@ElectroKnight22](https://github.com/ElectroKnight22)!
+
+## 0.8.5 - 2023-03-10
+
+- Update dependency: realtime-csharp@5.0.3
+  - Re: [#25](https://github.com/supabase-community/realtime-csharp/issues/25) - Support Channel being resubscribed
+    after having been unsubscribed, fixes rejoin timer being erroneously called on channel `Unsubscribe`.
+    Thanks [@Kuffs2205](https://github.com/Kuffs2205)!
+
+## 0.8.4 - 2023-03-03
+
+- Update dependency: supabase-storage-csharp@1.2.7
+  - Re: [#4](https://github.com/supabase-community/storage-csharp/issues/4) Implementation for `ClientOptions` which
+    supports specifying Upload, Download, and Request timeouts.
+- Update dependency: realtime-csharp@5.0.2
+  - Re: [#24](https://github.com/supabase-community/realtime-csharp/issues/24) - Fixes join failing until reconnect
+    happened + adds access token push on channel join. Big thank you to [@Honeyhead](https://github.com/honeyhead) for
+    the help debugging and identifying!
+
+## 0.8.3 - 2023-02-26
+
+- Update dependency: supabase-storage-csharp@1.2.5
+  - Provides fix
+    for [supabase-community/supabase-csharp#54](https://github.com/supabase-community/supabase-csharp/issues/54) -
+    Dynamic headers were always being overwritten by initialized token headers, so the storage client would not
+    receive user's access token as expected.
+  - Provides fix for upload progress not reporting
+    in [supabase-community/storage-csharp#3](https://github.com/supabase-community/storage-csharp/issues/3)
+- Update dependency: gotrue-csharp@3.0.5
+  - Fixes [#44](https://github.com/supabase-community/gotrue-csharp/issues/44) - refresh timer should automatically
+    reattempt (interval of 5s) for HTTP exceptions - gracefully exits on invalid refresh and triggers
+    an `AuthState.Changed` event
+
+## 0.8.2 - 2023-02-26
+
+- Update dependency: supabase-storage-csharp@1.2.4
+  - `UploadOrUpdate` now appropriately throws request exceptions
+
+## 0.8.1 - 2023-02-06
+
+- Update dependency: realtime-csharp@5.0.1
+  - Re: [#22](https://github.com/supabase-community/realtime-csharp/issues/22) - `SerializerSettings` were not being
+    passed to `PostgresChangesResponse` - Thanks [@Shenrak](https://github.com/Shenrak) for the help debugging!
+
 ## 0.8.0 - 2023-01-31
 
 - Update dependency: realtime-csharp@5.0.0

apps/docs/docs/ref/dart/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-dart.svg" className="w-8 h-8 rounded" />
+  <IconMenuFlutter width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">Flutter Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">supabase-flutter</h2>

apps/docs/docs/ref/dart/v0/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-dart.svg" className="w-8 h-8 rounded" />
+  <IconMenuFlutter width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">Flutter Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">supabase-flutter</h2>

apps/docs/docs/ref/javascript/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-javascript.svg" className="w-8 h-8 rounded" />
+  <IconMenuJavascript width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>

apps/docs/docs/ref/javascript/v1/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/javascript-icon.svg" className="w-8 h-8 rounded" />
+  <IconMenuJavascript width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>

apps/docs/docs/ref/javascript/v1/upgrade-guide.mdx

@@ -89,7 +89,6 @@ The signIn() method has been deprecated in favor of more explicit method signatu
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { user, error } = await supabase
   .auth
@@ -98,7 +97,6 @@ const { user, error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const {
   data: { user },
@@ -128,7 +126,6 @@ const {
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -137,7 +134,6 @@ const { error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -165,7 +161,6 @@ const { error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -174,7 +169,6 @@ const { error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -201,7 +195,6 @@ const { error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -210,7 +203,6 @@ const { error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -238,7 +230,6 @@ const { error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { error } = await supabase
   .auth
@@ -248,16 +239,15 @@ const { error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .auth
   .signInWithOtp({ phone })
-
+  
 // After receiving a SMS with a OTP.
 const { data, error } = await supabase
-.auth
-.verifyOtp({ phone, token })
+  .auth
+  .verifyOtp({ phone, token })
 ```
 
 </TabPanel>
@@ -281,7 +271,6 @@ const { data, error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .auth
@@ -291,7 +280,6 @@ const { data, error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .auth
@@ -390,7 +378,6 @@ const { user } = session
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { user, error } = await supabase
   .auth
@@ -435,7 +422,6 @@ const { user, error } = supabase.auth.setAuth(access_token)
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const supabase = createClient(
   SUPABASE_URL,
@@ -486,7 +472,6 @@ Previously, these methods return inserted/updated/deleted rows by default (which
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -495,7 +480,6 @@ const { data, error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -524,7 +508,6 @@ const { data, error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -534,7 +517,6 @@ const { data, error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -564,7 +546,6 @@ const { data, error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -573,7 +554,6 @@ const { data, error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -602,7 +582,6 @@ const { data, error } = await supabase
   defaultActiveId="1.0x"
 >
 <TabPanel id="1.0x" label="Before">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')
@@ -612,7 +591,6 @@ const { data, error } = await supabase
 
 </TabPanel>
 <TabPanel id="2.0x" label="After">
-{/* prettier-ignore */}
 ```ts
 const { data, error } = await supabase
   .from('my_table')

apps/docs/docs/ref/kotlin/installing.mdx

@@ -0,0 +1,268 @@
+---
+id: installing
+title: 'Installing & Initialization'
+slug: installing
+custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supabase.yml
+---
+
+### Add one or more modules to your project
+
+<RefSubLayout.EducationRow>
+    <RefSubLayout.Examples>
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+            <a href="https://github.com/supabase-community/supabase-kt/releases" style={{ marginRight: '8px' }}>
+                <img src="https://img.shields.io/github/release/supabase-community/supabase-kt?label=stable" alt="latest stable supabase-kt version"/>
+            </a>
+            <a href="https://github.com/supabase-community/supabase-kt/releases">
+                <img src="https://img.shields.io/maven-central/v/io.github.jan-tennert.supabase/supabase-kt?label=experimental" alt="latest supabase-kt version"/>
+            </a>
+        </div>
+        Add dependency to your build file:
+        <Tabs
+            size="small"
+            type="underlined"
+            defaultActiveId="kotlin">
+            <TabPanel id="kotlin" label="build.gradle.kts">
+
+                ```kotlin
+                implementation("io.github.jan-tennert.supabase:[module]:VERSION")
+                ```
+
+            </TabPanel>
+            <TabPanel id="groovy" label="build.gradle">
+
+                ```groovy
+                implementation 'io.github.jan-tennert.supabase:[module]:VERSION'
+                ```
+
+            </TabPanel>
+            <TabPanel id="xml" label="pom.xml">
+
+                ```xml
+                <dependency>
+                    <groupId>io.github.jan-tennert.supabase</groupId>
+                    <artifactId>[module]</artifactId>
+                    <version>VERSION</version>
+                </dependency>
+                ```
+
+            </TabPanel>
+        </Tabs>
+
+        The available modules are: **gotrue-kt**, **realtime-kt**, **storage-kt**, **functions-kt**, **postgrest-kt** and **apollo-graphql**
+
+        When using multiple modules, you can also use the BOM dependency to ensure that all modules use the same version:
+
+        <Tabs
+            size="small"
+            type="underlined"
+            defaultActiveId="kotlin">
+            <TabPanel id="kotlin" label="build.gradle.kts">
+
+                ```kotlin
+                implementation(platform("io.github.jan-tennert.supabase:bom:VERSION"))
+                implementation("io.github.jan-tennert.supabase:postgrest-kt")
+                implementation("io.github.jan-tennert.supabase:realtime-kt")
+                ```
+
+            </TabPanel>
+            <TabPanel id="groovy" label="build.gradle">
+
+                ```groovy
+                implementation platform("io.github.jan-tennert.supabase:bom:VERSION")
+                implementation 'io.github.jan-tennert.supabase:postgrest-kt'
+                implementation 'io.github.jan-tennert.supabase:realtime-kt'
+                ```
+
+            </TabPanel>
+            <TabPanel id="xml" label="pom.xml">
+
+                ```xml
+                <dependency>
+                    <groupId>io.github.jan-tennert.supabase</groupId>
+                    <artifactId>bom</artifactId>
+                    <version>VERSION</version>
+                    <type>pom</type>
+                    <scope>import</scope>
+                </dependency>
+                <dependency>
+                    <groupId>io.github.jan-tennert.supabase</groupId>
+                    <artifactId>postgrest-kt</artifactId>
+                </dependency>
+                <dependency>
+                    <groupId>io.github.jan-tennert.supabase</groupId>
+                    <artifactId>realtime-kt</artifactId>
+                </dependency>
+                ```
+
+            </TabPanel>
+        </Tabs>
+
+    </RefSubLayout.Examples>
+
+</RefSubLayout.EducationRow>
+
+### Add Ktor Client Engine to each of your Kotlin targets (required)
+
+<RefSubLayout.EducationRow>
+    <RefSubLayout.Examples>
+
+        You can find a list of engines [here](https://ktor.io/docs/http-client-engines.html)
+
+        <Tabs
+            size="small"
+            type="underlined"
+            defaultActiveId="kotlin">
+            <TabPanel id="kotlin" label="build.gradle.kts">
+
+                ```kotlin
+                implementation("io.ktor:ktor-client-[engine]:KTOR_VERSION")
+                ```
+
+            </TabPanel>
+            <TabPanel id="groovy" label="build.gradle">
+
+                ```groovy
+                implementation 'io.ktor:ktor-client-[engine]:KTOR_VERSION'
+                ```
+
+            </TabPanel>
+            <TabPanel id="xml" label="pom.xml">
+
+                ```xml
+                <dependency>
+                    <groupId>io.ktor</groupId>
+                    <artifactId>ktor-client-[engine]</artifactId>
+                    <version>KTOR_VERSION</version>
+                </dependency>
+                ```
+
+            </TabPanel>
+        </Tabs>
+
+        Multiplatform example:
+
+        <Tabs
+            size="small"
+            type="underlined"
+            defaultActiveId="kotlin">
+            <TabPanel id="kotlin" label="build.gradle.kts">
+
+                ```kotlin
+                val commonMain by getting {
+                    dependencies {
+                        //supabase modules
+                    }
+                }
+                val jvmMain by getting {
+                    dependencies {
+                        implementation("io.ktor:ktor-client-cio:KTOR_VERSION")
+                    }
+                }
+                val androidMain by getting {
+                    dependsOn(jvmMain)
+                }
+                val jsMain by getting {
+                    dependencies {
+                        implementation("io.ktor:ktor-client-js:KTOR_VERSION")
+                    }
+                }
+                val iosMain by getting {
+                    dependencies {
+                        implementation("io.ktor:ktor-client-darwin:KTOR_VERSION")
+                    }
+                }
+                ```
+
+            </TabPanel>
+        </Tabs>
+
+    </RefSubLayout.Examples>
+
+</RefSubLayout.EducationRow>
+
+### Add KotlinX Serialization (required for PostgREST and Realtime serialization)
+
+<RefSubLayout.EducationRow>
+    <RefSubLayout.Examples>
+
+        Add the serialization plugin
+
+        <Tabs
+            size="small"
+            type="underlined"
+            defaultActiveId="kotlin">
+            <TabPanel id="kotlin" label="build.gradle.kts">
+
+                ```kotlin
+                plugins {
+                    kotlin("plugin.serialization") version "KOTLIN_VERSION"
+                }
+                ```
+
+            </TabPanel>
+            <TabPanel id="groovy" label="build.gradle">
+
+                ```groovy
+                plugins {
+                    id 'org.jetbrains.kotlin.plugin.serialization' version 'KOTLIN_VERSION'
+                }
+                ```
+
+            </TabPanel>
+            <TabPanel id="xml" label="pom.xml">
+
+                ```xml
+                <build>
+                    <plugins>
+                        <plugin>
+                            <groupId>org.jetbrains.kotlin</groupId>
+                            <artifactId>kotlin-maven-plugin</artifactId>
+                            <version>${kotlin.version}</version>
+                            <executions>
+                                <execution>
+                                    <id>compile</id>
+                                    <phase>compile</phase>
+                                    <goals>
+                                        <goal>compile</goal>
+                                    </goals>
+                                </execution>
+                            </executions>
+                            <configuration>
+                                <compilerPlugins>
+                                    <plugin>kotlinx-serialization</plugin>
+                                </compilerPlugins>
+                            </configuration>
+                            <dependencies>
+                                <dependency>
+                                    <groupId>org.jetbrains.kotlin</groupId>
+                                    <artifactId>kotlin-maven-serialization</artifactId>
+                                    <version>${kotlin.version}</version>
+                                </dependency>
+                            </dependencies>
+                        </plugin>
+                    </plugins>
+                </build>
+                ```
+
+            </TabPanel>
+        </Tabs>
+
+        Now you can create serializable classes in your project:
+        ```kotlin
+        @Serializable
+        data class Message(
+            val id: Int,
+            val content: String,
+            @SerialName("author_id")
+            val authorId: String
+        )
+        ```
+        And use them in your Supabase queries:
+        ```kotlin
+        val messages = client.postgrest["messages"].select().decodeList<Message>()
+        ```
+
+    </RefSubLayout.Examples>
+
+</RefSubLayout.EducationRow>

apps/docs/docs/ref/kotlin/introduction.mdx

@@ -0,0 +1,33 @@
+---
+id: introduction
+title: Introduction
+hideTitle: true
+---
+
+<div className="flex items-start gap-6 not-prose" id="introduction">
+  <IconMenuKotlin width={35} height={35} />
+  <div className="flex flex-col gap-2">
+    <h1 className="text-3xl text-scale-1200 m-0">Kotlin Client Library</h1>
+    <h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-kt</h2>
+  </div>
+</div>
+
+<div className="max-w-xl">
+
+This reference documents every object and method available in Supabase's Kotlin Multiplatform library, [supabase-kt](https://github.com/supabase-community/supabase-kt). You can use supabase-kt to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+
+Supported Kotlin targets:
+
+- JVM
+- Android
+- iOS (Experimental)
+- JS (Browser)
+
+</div>
+
+<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
+  <p>The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
+
+<p>Huge thanks to official maintainer, [jan-tennert](https://github.com/jan-tennert).</p>
+
+</div>

apps/docs/docs/ref/python/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-python.svg" className="w-8 h-8 rounded" />
+  <IconMenuPython width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">Python Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-py</h2>

apps/docs/docs/ref/self-hosting-auth/introduction.mdx

@@ -14,9 +14,9 @@ hideTitle: true
 <RefSubLayout.EducationRow>
   <RefSubLayout.Details>
 
-  The Supabase Auth Server (GoTrue) is a JSON Web Token (JWT)-based API for managing users and issuing access tokens.
+    The Supabase Auth Server (GoTrue) is a JSON Web Token (JWT)-based API for managing users and issuing access tokens.
 
-  GoTrue is an open-source API written in Golang, that acts as a self-standing API service for handling user registration and authentication for JAM projects. It's based on OAuth2 and JWT and handles user signup, authentication, and custom user data.
+    GoTrue is an open-source API written in Golang, that acts as a self-standing API service for handling user registration and authentication for JAM projects. It's based on OAuth2 and JWT and handles user signup, authentication, and custom user data.
 
   </RefSubLayout.Details>
 

apps/docs/docs/ref/self-hosting-storage/introduction.mdx

@@ -14,12 +14,12 @@ hideTitle: true
 <RefSubLayout.EducationRow>
   <RefSubLayout.Details>
 
-  An S3 compatible object storage service that integrates with Postgres.
+    An S3 compatible object storage service that integrates with Postgres.
 
-  - Uses Postgres as it's datastore for storing metadata
-  - Authorization rules are written as Postgres Row Level Security policies
-  - Integrates with S3 as the storage backend (with more in the pipeline!)
-  - Extremely lightweight and performant
+    - Uses Postgres as it's datastore for storing metadata
+    - Authorization rules are written as Postgres Row Level Security policies
+    - Integrates with S3 as the storage backend (with more in the pipeline!)
+    - Extremely lightweight and performant
 
   </RefSubLayout.Details>
 

apps/docs/docs/ref/swift/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-swift.svg" className="w-8 h-8 rounded" />
+  <IconMenuSwift width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">Swift Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-swift</h2>
@@ -13,17 +13,15 @@ hideTitle: true
 </div>
 
 <div className="max-w-xl">
-This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+
+We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects.
 
-We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects.
 </div>
 
 <div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
   <p>The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
 
-<p>
-  Huge thanks to official maintainer, [Maail](https://github.com/maail).
-</p>
+<p>Huge thanks to official maintainer, [Maail](https://github.com/maail).</p>
 
 </div>
-

apps/docs/docs/reference/csharp/introduction.mdx

@@ -5,7 +5,7 @@ hideTitle: true
 ---
 
 <div className="flex items-start gap-6 not-prose" id="introduction">
-  <img src="/docs/img/icons/menu/reference-csharp.svg" className="w-8 h-8 rounded" />
+  <IconMenuCsharp width={35} height={35} />
   <div className="flex flex-col gap-2">
     <h1 className="text-3xl text-scale-1200 m-0">C# Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">supabase-csharp</h2>

apps/docs/docs/reference/dart/initializing.mdx

@@ -4,9 +4,6 @@ title: 'Initializing'
 slug: initializing
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 ## Flutter
 
 For `supabase-flutter`, you will be using the static `initialize()` method on `Supabase` class.
@@ -30,8 +27,9 @@ final supabase = Supabase.instance.client;
 
 ### Call `initialize()` with custom headers
 
-You can pass `headers` to initialize your Supabase client with customer headers. 
+You can pass `headers` to initialize your Supabase client with customer headers.
 Here is an example of passing a custom auth header to Supabase client.
+
 ```dart title=main.dart
 Future<void> main() async {
   await Supabase.initialize(

apps/docs/docs/reference/dart/installing.mdx

@@ -4,9 +4,6 @@ title: 'Installing'
 slug: installing
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 ## Flutter
 
 For Flutter project, you can use [supabase_flutter](https://pub.dev/packages/supabase_flutter) package.

apps/docs/docs/reference/javascript/v1/generating-types.mdx

@@ -5,9 +5,6 @@ slug: generating-types
 custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v1.yml
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 Supabase will soon release native type generators that dump your database types for various languages. For now, we support TypeScript [through third-party tools](/docs/guides/database/api/generating-types).
 
 ## Usage with TypeScript

apps/docs/docs/reference/javascript/v1/initializing.mdx

@@ -5,9 +5,6 @@ slug: initializing
 custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v1.yml
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 You can initialize a new Supabase client using the `createClient()` method.
 
 The Supabase client is your entrypoint to the rest of the Supabase functionality
@@ -117,7 +114,7 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
 ```
 
 By default the API server points to the `public` schema. You can enable other database schemas within the Dashboard.
-Go to `Settings > API > Schema` and add the schema which you want to expose to the API. You also need to grant `USAGE` on your new schema with the grants you desire, such as `SELECT, INSERT, UPDATE, DELETE`. 
+Go to `Settings > API > Schema` and add the schema which you want to expose to the API. You also need to grant `USAGE` on your new schema with the grants you desire, such as `SELECT, INSERT, UPDATE, DELETE`.
 
 Note: each client connection can only access a single schema, so the code above can access the `other_schema` schema but cannot access the `public` schema.
 

apps/docs/docs/reference/javascript/v1/installing.mdx

@@ -5,9 +5,6 @@ slug: installing
 custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v1.yml
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 All JavaScript libraries are built directly by the Supabase team.
 
 Other languages are built by the community and supported by Supabase.

apps/docs/docs/reference/postgres/changing-timezones.mdx

@@ -1,16 +1,12 @@
 ---
 id: changing-timezones
-title: "Changing Timezones"
+title: 'Changing Timezones'
 slug: changing-timezones
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
 Data types.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -19,38 +15,22 @@ Data types.
 <TabsPanel id="sql" label="sql">
 
 ```sql
-alter database postgres 
+alter database postgres
 set timezone to 'America/New_York';
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
-
-
-
-
 ## Notes
 
 - View a full list of timezones on [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
 
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Change timezone
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -59,11 +39,10 @@ set timezone to 'America/New_York';
 <TabsPanel id="sql" label="sql">
 
 ```sql
-alter database postgres 
+alter database postgres
 set timezone to 'America/New_York';
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -77,7 +56,6 @@ Get a full list of timezones supported by your database. This will return the fo
 - `utc_offset`: Offset from UTC (positive means east of Greenwich)
 - `is_dst`: True if currently observing daylight savings
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -87,11 +65,10 @@ Get a full list of timezones supported by your database. This will return the fo
 
 ```sql
 select name, abbrev, utc_offset, is_dst
-from pg_timezone_names() 
+from pg_timezone_names()
 order by name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -108,12 +85,11 @@ Use `ilike` (case insensitive search) to find specific timezones.
 <TabsPanel id="sql" label="sql">
 
 ```sql
-select * 
-from pg_timezone_names() 
+select *
+from pg_timezone_names()
 where name ilike '%york%';
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/columns.mdx

@@ -1,16 +1,12 @@
 ---
 id: columns
-title: "Columns"
+title: 'Columns'
 slug: columns
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
 Creating columns.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -26,33 +22,14 @@ create table table_name (
 );
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### During table creation
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -68,15 +45,12 @@ create table table_name (
 );
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Create column
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -89,7 +63,6 @@ alter table new_table
 add new_column text;
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/connection-strings.mdx

@@ -1,16 +1,12 @@
 ---
 id: connection-strings
-title: "Connection Strings"
+title: 'Connection Strings'
 slug: connection-strings
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
 There are various ways to connect to your database, depending on the configuration of your Postgres instance and the tool which you are connecting with.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -20,42 +16,27 @@ There are various ways to connect to your database, depending on the configurati
 
 ```bash
 postgres://postgres:postgres@localhost:5432/postgres
-# or 
+# or
 postgresql://postgres:postgres@localhost:5432/postgres
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
-
-
-
-
 ## Notes
 
 - [Official Documentation](https://www.postgresql.org/docs/current/libpq-connect.html).
 - Avoid using special characters usernames and passwords. If you use special characters in a connection URL, you'll need to URL encode any special characters.
 
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Basic connection string
 
-If you're using a default setup, your postgres connection string will likely be in the format: 
+If you're using a default setup, your postgres connection string will likely be in the format:
 
 `postgres://{user}:{password}@{host}:{port}/{database_name}`
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -65,11 +46,10 @@ If you're using a default setup, your postgres connection string will likely be
 
 ```bash
 postgres://postgres:postgres@localhost:5432/postgres
-# or 
+# or
 postgresql://postgres:postgres@localhost:5432/postgres
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -89,7 +69,6 @@ See full [documentation](http://jdbc.postgresql.org/documentation/head/connect.h
 jdbc:postgresql://{host}:{port}/{database_name}
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -109,7 +88,6 @@ See full [documentation](http://npgsql.projects.postgresql.org/docs/manual/UserM
 Server=host;Port=5432;User Id=username;Password=secret;Database=database_name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -129,7 +107,6 @@ See full [documentation](http://php.net/manual/en/book.pgsql.php).
 host=hostname port=5432 dbname=databasename user=username password=secret
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/database-passwords.mdx

@@ -1,40 +1,16 @@
 ---
 id: database-passwords
-title: "Database Passwords"
+title: 'Database Passwords'
 slug: database-passwords
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
 Manage the passwords of your database users using any super user.
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Password reset
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -43,11 +19,10 @@ Manage the passwords of your database users using any super user.
 <TabsPanel id="sql" label="sql">
 
 ```sql
-alter user postgres 
+alter user postgres
 with password 'new_password';
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/database-users.mdx

@@ -1,40 +1,16 @@
 ---
 id: database-users
-title: "Database Users"
+title: 'Database Users'
 slug: database-users
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
 Users and Roles are almost interchangeable.
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Create New User
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -47,7 +23,6 @@ create user new_user
 with password 'hello';
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/index.mdx

@@ -1,15 +1,11 @@
 ---
 id: index
-title: "Getting started"
+title: 'Getting started'
 slug: getting-started
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
-
-PostgreSQL, also known as Postgres, is a free and open-source relational 
-database management system emphasizing extensibility and SQL compliance. 
-It was originally named POSTGRES, referring to its origins as a successor 
-to the Ingres database developed at the University of California, Berkeley.
+PostgreSQL, also known as Postgres, is a free and open-source relational
+database management system emphasizing extensibility and SQL compliance.
+It was originally named POSTGRES, referring to its origins as a successor
+to the Ingres database developed at the University of California, Berkeley.

apps/docs/docs/reference/postgres/publications.mdx

@@ -1,42 +1,19 @@
 ---
 id: publications
-title: "Publications"
+title: 'Publications'
 slug: publications
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
-Publications are a way of grouping changes generated from a table or a group of tables. 
+Publications are a way of grouping changes generated from a table or a group of tables.
 These changes can then be sent to other systems (usually another Postgres database).
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Create a Publication
 
 This publication will contain all changes to all tables.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -45,19 +22,16 @@ This publication will contain all changes to all tables.
 <TabsPanel id="sql" label="sql">
 
 ```sql
-create publication publication_name 
+create publication publication_name
 for all tables;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Create a Publication which listens to individual tables
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -66,19 +40,16 @@ for all tables;
 <TabsPanel id="sql" label="sql">
 
 ```sql
-create publication publication_name 
+create publication publication_name
 for table table_one, table_two;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Add tables to an existing publication
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -87,19 +58,16 @@ for table table_one, table_two;
 <TabsPanel id="sql" label="sql">
 
 ```sql
-alter publication publication_name 
+alter publication publication_name
 add table table_name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Listens to inserts only
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -108,20 +76,17 @@ add table table_name;
 <TabsPanel id="sql" label="sql">
 
 ```sql
-create publication publication_name 
+create publication publication_name
 for all tables
 with (publish = 'insert');
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Listens to updates only
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -130,20 +95,17 @@ with (publish = 'insert');
 <TabsPanel id="sql" label="sql">
 
 ```sql
-create publication publication_name 
+create publication publication_name
 for all tables
 with (publish = 'update');
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Listens to deletions only
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -152,20 +114,17 @@ with (publish = 'update');
 <TabsPanel id="sql" label="sql">
 
 ```sql
-create publication publication_name 
+create publication publication_name
 for all tables
 with (publish = 'delete');
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Remove a Publication
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -177,7 +136,6 @@ with (publish = 'delete');
 drop publication if exists publication_name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -186,7 +144,6 @@ drop publication if exists publication_name;
 
 If you are planning to re-create a publication, it's best to do it in a transaction to ensure the operation succeeds.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -195,16 +152,15 @@ If you are planning to re-create a publication, it's best to do it in a transact
 <TabsPanel id="sql" label="sql">
 
 ```sql
-begin; 
+begin;
   -- remove the realtime publication
-  drop publication if exists publication_name; 
+  drop publication if exists publication_name;
 
   -- re-create the publication but don't enable it for any tables
-  create publication publication_name;  
+  create publication publication_name;
 commit;
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/schemas.mdx

@@ -1,19 +1,15 @@
 ---
 id: schemas
-title: "Schemas"
+title: 'Schemas'
 slug: schemas
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
+Schemas are like "folders". They help to keep your database organized.
 
-Schemas are like "folders". They help to keep your database organized. 
-
-Schemas are particularly useful for security. You can set different permissions on each schema. 
+Schemas are particularly useful for security. You can set different permissions on each schema.
 For example, you might want to use a `public` schema for user-facing data, and an `auth` schema for all logins and secured data.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -25,36 +21,20 @@ For example, you might want to use a `public` schema for user-facing data, and a
 create schema schema_name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
-
-
-
-
 ## Notes
 
 - Schemas contain [tables](/docs/reference/postgres/tables), columns, triggers, functions, etc.
 - Postgres comes with a `public` schema set up by default.
 - It is best practice to use lowercase and underscores when naming schemas. For example: `schema_name`, not `Schema Name`.
 
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Creating a schema
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -66,15 +46,12 @@ create schema schema_name;
 create schema schema_name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Removing a schema
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -86,7 +63,6 @@ create schema schema_name;
 drop schema if exists schema_name;
 ```
 
-
 </TabsPanel>
 
 </Tabs>
@@ -96,7 +72,6 @@ drop schema if exists schema_name;
 Although it's not recommended, you can use uppercase and spaces when naming your schema by wrapping the name with double-quotes.
 As a result, you will always need to use double-quotes when referencing your schema.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -108,7 +83,6 @@ As a result, you will always need to use double-quotes when referencing your sch
 create schema "Schema Name";
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/docs/reference/postgres/tables.mdx

@@ -1,19 +1,15 @@
 ---
 id: tables
-title: "Tables"
+title: 'Tables'
 slug: tables
 custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/postgres.yml
 ---
 
-import Tabs from '@theme/Tabs';
-import TabsPanel from '@theme/TabsPanel';
-
 Tables are similar to excel spreadsheets. They contain columns & rows of data. There are a few key differences from a spreadsheet however:
 
 - Every column is a strict type of data. When you set up a column, you must define what "data type" it is.
 - Tables can be joined together through relationships. For example you can have a "users" table, which is joined to a "teams" table.
 
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -28,7 +24,7 @@ create table table_name (
   name text
 );
 
-# with schema 
+# with schema
 create table schema_name.table_name (
   id integer primary key,
   data jsonb,
@@ -36,36 +32,20 @@ create table schema_name.table_name (
 );
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
-
-
-
-
 ## Notes
 
-- Tables contain columns, rows, triggers, comments, 
+- Tables contain columns, rows, triggers, comments,
 - It is best practice to use lowercase and underscores when naming tables. For example: `table_name`, not `Table Name`.
 - Tables belong to [schemas](/docs/reference/postgres/schemas). If you don't explicitly pass the schema, Postgres will assume that you want to create the table in the `public` schema.
 
-
-
-
-
-
-
-
-
-
 ## Examples
 
 ### Create table
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -80,7 +60,7 @@ create table table_name (
   name text
 );
 
-# with schema 
+# with schema
 create table schema_name.table_name (
   id integer primary key,
   data jsonb,
@@ -88,15 +68,12 @@ create table schema_name.table_name (
 );
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Primary keys using multiple columns
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -113,15 +90,12 @@ create table table_name (
 );
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Multiple foreign keys to the same table
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -135,15 +109,12 @@ alter table table_name
   add constraint constraint_name_2 foreign key (column_2) references foreign_table(id);
 ```
 
-
 </TabsPanel>
 
 </Tabs>
 
 ### Delete a table
 
-
-
 <Tabs
   defaultActiveId="sql"
   groupId="reference/postgres"
@@ -155,7 +126,6 @@ alter table table_name
 delete table if exists table_name;
 ```
 
-
 </TabsPanel>
 
-</Tabs>
+</Tabs>

apps/docs/generator/helpers.ts

@@ -1,5 +1,5 @@
-import * as _ from 'lodash'
 import * as fs from 'fs'
+import { mapValues, values } from 'lodash'
 
 export const slugify = (text: string) => {
   if (!text) return ''
@@ -34,8 +34,8 @@ export const writeToDisk = (fileName: string, content: any) => {
  * Convert Object to Array of values
  */
 export const toArrayWithKey = (obj: object, keyAs: string) =>
-  _.values(
-    _.mapValues(obj, (value: any, key: string) => {
+  values(
+    mapValues(obj, (value: any, key: string) => {
       value[keyAs] = key
       return value
     })

apps/docs/internals/files/reference-lib.mjs

@@ -8,10 +8,11 @@ const flatCommonLibSections = flattenSections(commonLibSections)
 
 const clientLibFiles = [
   { fileName: 'supabase_js_v2', label: 'javascript', version: 'v2', versionSlug: false },
-  { fileName: 'supabase_js_v1', label: 'javascript', version: 'v1', versionSlug: true },
   { fileName: 'supabase_dart_v1', label: 'dart', version: 'v1', versionSlug: false },
-  { fileName: 'supabase_dart_v0', label: 'dart', version: 'v0', versionSlug: true },
-  { fileName: 'supabase_dart_v0', label: 'dart', version: 'v0', versionSlug: true },
+  { fileName: 'supabase_py_v2', label: 'python', version: 'v2', versionSlug: false },
+  { fileName: 'supabase_csharp_v0', label: 'csharp', version: 'v0', versionSlug: false },
+  { fileName: 'supabase_swift_v0', label: 'swift', version: 'v0', versionSlug: false },
+  { fileName: 'supabase_kt_v0', label: 'kotlin', version: 'v0', versionSlug: false },
 ]
 
 export function generateReferencePages() {

apps/docs/jest.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@jest/types'
+
+const config: Config.InitialOptions = {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  testEnvironment: 'jsdom',
+}
+
+export default config

apps/docs/layouts/DefaultLayout.tsx

@@ -12,6 +12,7 @@ interface Props {
     description?: string
     hide_table_of_contents?: boolean
     video?: string
+    tocVideo?: string
     canonical?: string
   }
   children: any
@@ -20,7 +21,7 @@ interface Props {
 }
 
 const Layout: FC<Props> = (props: Props) => {
-  const { asPath, basePath } = useRouter()
+  const { asPath } = useRouter()
 
   const hasTableOfContents =
     props.toc !== undefined &&
@@ -59,26 +60,30 @@ const Layout: FC<Props> = (props: Props) => {
           },
         }}
       />
-      <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
-        {/* <p className="text-brand-900 tracking-wider">Tutorials</p> */}
-        <article className="prose dark:prose-dar max-w-none">
-          <h1>{props.meta.title}</h1>
-          {/* <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div> */}
-          <MDXProvider components={components} children={props.children} />
-        </article>
-      </div>
-      {hasTableOfContents && !props.meta?.hide_table_of_contents && (
-        <div
-          className={[
-            'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
-            'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
-          ].join(' ')}
-        >
-          <TableOfContents toc={props.toc} video={props.meta.video} />
+      <LayoutMainContent>
+        <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
+          <article className="prose dark:prose-dar max-w-none">
+            <h1>{props.meta.title}</h1>
+            <MDXProvider components={components} children={props.children} />
+          </article>
         </div>
-      )}
+        {hasTableOfContents && !props.meta?.hide_table_of_contents && (
+          <div
+            className={[
+              'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
+              'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+            ].join(' ')}
+          >
+            <TableOfContents toc={props.toc} video={props.meta.video} />
+          </div>
+        )}
+      </LayoutMainContent>
     </>
   )
 }
 
+export const LayoutMainContent: FC<{ className?: string }> = ({ className, children }) => (
+  <div className={['max-w-7xl px-5 mx-auto py-16', className].join(' ')}>{children}</div>
+)
+
 export default Layout

apps/docs/layouts/HomeLayout.tsx

@@ -0,0 +1,86 @@
+import { MDXProvider } from '@mdx-js/react'
+import { NextSeo } from 'next-seo'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { FC } from 'react'
+import components from '~/components'
+import TableOfContents from '~/components/TableOfContents'
+import HomePageCover from '../components/HomePageCover'
+import { LayoutMainContent } from './DefaultLayout'
+
+interface Props {
+  meta: {
+    title: string
+    description?: string
+    hide_table_of_contents?: boolean
+    video?: string
+    canonical?: string
+  }
+  children: any
+  toc?: any
+  menuItems: any
+}
+
+const HomeLayout: FC<Props> = (props: Props) => {
+  const { asPath } = useRouter()
+
+  const hasTableOfContents =
+    props.toc !== undefined &&
+    props.toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
+
+  return (
+    <>
+      <Head>
+        <title>{asPath === '/' ? 'Supabase Docs' : `${props.meta?.title} | Supabase Docs`}</title>
+        <meta name="description" content={props.meta?.description} />
+        <meta property="og:image" content={`https://supabase.com/docs/img/supabase-og-image.png`} />
+        <meta
+          name="twitter:image"
+          content={`https://supabase.com/docs/img/supabase-og-image.png`}
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      <NextSeo
+        canonical={props.meta?.canonical ?? `https://supabase.com/docs${asPath}`}
+        openGraph={{
+          url: `https://supabase.com/docs${asPath}`,
+          type: 'article',
+          videos: props.meta?.video && [
+            {
+              // youtube based video meta
+              url: props.meta?.video,
+              width: 640,
+              height: 385,
+              type: 'application/x-shockwave-flash',
+            },
+          ],
+          article: {
+            publishedTime: new Date().toISOString(),
+            modifiedTime: new Date().toISOString(),
+            authors: ['Supabase'],
+          },
+        }}
+      />
+      <HomePageCover meta={props.meta} />
+      <LayoutMainContent>
+        <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
+          <article className="prose dark:prose-dar max-w-none">
+            <MDXProvider components={components} children={props.children} />
+          </article>
+        </div>
+        {hasTableOfContents && !props.meta?.hide_table_of_contents && (
+          <div
+            className={[
+              'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
+              'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+            ].join(' ')}
+          >
+            <TableOfContents toc={props.toc} video={props.meta.video} />
+          </div>
+        )}
+      </LayoutMainContent>
+    </>
+  )
+}
+
+export default HomeLayout

apps/docs/layouts/SiteLayout.tsx

@@ -4,10 +4,10 @@ import Link from 'next/link'
 import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
 
-import { memo, useEffect } from 'react'
+import Head from 'next/head'
+import { PropsWithChildren, memo } from 'react'
 import Footer from '~/components/Navigation/Footer'
 import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
-import Head from 'next/head'
 
 const levelsData = {
   home: {
@@ -46,6 +46,10 @@ const levelsData = {
     icon: '/docs/img/icons/menu/storage',
     name: 'Storage',
   },
+  ai: {
+    icon: '/docs/img/icons/menu/ai',
+    name: 'AI & Vectors',
+  },
   supabase_cli: {
     icon: '/docs/img/icons/menu/reference-cli',
     name: 'Supabase CLI',
@@ -90,10 +94,14 @@ const levelsData = {
     icon: '/docs/img/icons/menu/reference-python',
     name: 'Python Reference v2.0',
   },
-  reference_swift_v1: {
+  reference_swift_v0: {
     icon: '/docs/img/icons/menu/reference-swift',
     name: 'Swift Reference v1.0',
   },
+  reference_kotlin_v0: {
+    icon: '/docs/img/icons/menu/reference-kotlin',
+    name: 'Kotlin Reference v0.0',
+  },
   reference_cli: {
     icon: '/docs/img/icons/menu/reference-cli',
     name: 'CLI Reference',
@@ -197,7 +205,7 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
         'left-0',
         'right-0',
         'z-10',
-        'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-blackA-600',
+        'backdrop-blur-sm backdrop-filter bg-white-1200 dark:bg-scale-200/90',
         mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
         // always hide on desktop
         'lg:hidden',
@@ -207,25 +215,6 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
   )
 })
 
-const SideMenu = memo(function SideMenu() {
-  return (
-    <div
-      className={[
-        'transition-all ease-out duration-200',
-        'absolute left-0 right-0 h-screen',
-        'px-5 pl-5 py-16',
-        'top-[0px]',
-        'bg-scale-200',
-        // desktop styles
-        'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
-        'lg:opacity-100 lg:visible',
-      ].join(' ')}
-    >
-      <NavigationMenu />
-    </div>
-  )
-})
-
 const HeaderLogo = memo(function HeaderLogo() {
   const { isDarkMode } = useTheme()
   return (
@@ -291,7 +280,7 @@ const NavContainer = memo(function NavContainer() {
           'relative',
           'w-auto',
           'border-r overflow-auto h-screen',
-          'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
+          'backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200',
           'flex flex-col',
         ].join(' ')}
       >
@@ -311,13 +300,26 @@ const NavContainer = memo(function NavContainer() {
             </div>
           </div>
         </div>
-        <SideMenu />
+        <div
+          className={[
+            'transition-all ease-out duration-200',
+            'absolute left-0 right-0 h-screen',
+            'px-5 pl-5 py-16',
+            'top-[0px]',
+            'bg-scale-200',
+            // desktop styles
+            'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
+            'lg:opacity-100 lg:visible',
+          ].join(' ')}
+        >
+          <NavigationMenu />
+        </div>
       </div>
     </div>
   )
 })
 
-const SiteLayout = ({ children }) => {
+const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
   return (
     <>
       <Head>
@@ -334,14 +336,14 @@ const SiteLayout = ({ children }) => {
               className={[
                 'sticky transition-all top-0',
                 'z-10',
-                'backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300',
+                'backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200',
               ].join(' ')}
             >
               <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
                 <MobileHeader />
               </div>
             </div>
-            <div className="grow px-5 max-w-7xl mx-auto py-16">
+            <div className="grow">
               {children}
               <Footer />
             </div>

apps/docs/layouts/guides/index.tsx

@@ -7,19 +7,22 @@ import { FC, useEffect, useRef, useState } from 'react'
 import { IconExternalLink } from 'ui'
 import components from '~/components'
 import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
-import FooterHelpCallout, { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
+import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
 import GuidesTableOfContents from '~/components/GuidesTableOfContents'
 import useHash from '~/hooks/useHash'
+import { LayoutMainContent } from '../DefaultLayout'
+import ExpandableVideo from 'ui/src/components/ExpandableVideo/ExpandableVideo'
 
 interface Props {
   meta: {
     title: string
-    description?: string
+    description?: string // used in meta tags
     hide_table_of_contents?: boolean
     breadcrumb?: string
-    subtitle?: string
+    subtitle?: string // used on the page under the H1
     footerHelpType?: FooterHelpCalloutType
     video?: string
+    tocVideo?: string
     canonical?: string
   }
   children: any
@@ -35,7 +38,6 @@ const Layout: FC<Props> = (props) => {
   const [tocList, setTocList] = useState([])
 
   const { asPath } = useRouter()
-
   const router = useRouter()
 
   const EDIT_BUTTON_EXCLUDE_LIST = ['/404']
@@ -63,6 +65,7 @@ const Layout: FC<Props> = (props) => {
   }, [])
 
   const hasTableOfContents = tocList.length > 0
+  const tocVideoPreview = `http://img.youtube.com/vi/${props.meta.tocVideo}/0.jpg`
 
   // page type, ie, Auth, Database, Storage etc
   const ogPageType = asPath.split('/')[2]
@@ -103,69 +106,73 @@ const Layout: FC<Props> = (props) => {
           },
         }}
       />
-      <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
-        <div
-          className={[
-            'relative',
-            !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
-            'transition-all ease-out',
-            'duration-100',
-          ].join(' ')}
-        >
-          {props.meta.breadcrumb && (
-            <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
-          )}
-          <article
-            ref={articleRef}
-            className={`${
-              props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
-            } prose dark:prose-dark max-w-none`}
-          >
-            <h1 className="mb-0">{props.meta.title}</h1>
-            {props.meta.subtitle && (
-              <h2 className="mt-3 text-xl text-scale-1100">{props.meta.subtitle}</h2>
-            )}
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
-            <MDXProvider components={components}>{props.children}</MDXProvider>
-
-            {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
-              <></>
-            ) : (
-              <div className="mt-16 not-prose">
-                <div>
-                  <Link
-                    href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
-                    passHref
-                  >
-                    <a className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200">
-                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
-                    </a>
-                  </Link>
-                </div>
-              </div>
-            )}
-          </article>
-        </div>
-        {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+      <LayoutMainContent className="pb-0">
+        <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
           <div
             className={[
-              'col-span-3',
-              'border-scale-400 dark:bg-scale-200 table-of-contents-height',
-              'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+              'relative',
+              !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
               'transition-all ease-out',
               'duration-100',
             ].join(' ')}
           >
-            <div className="border-l">
-              <span className="block font-mono text-xs uppercase text-scale-1200 px-5 mb-6">
-                On this page
-              </span>
-              <GuidesTableOfContents list={tocList} />
-            </div>
+            {props.meta.breadcrumb && (
+              <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
+            )}
+            <article
+              ref={articleRef}
+              className={`${
+                props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
+              } prose dark:prose-dark max-w-none`}
+            >
+              <h1 className="mb-0">{props.meta.title}</h1>
+              {props.meta.subtitle && (
+                <h2 className="mt-3 text-xl text-scale-1100">{props.meta.subtitle}</h2>
+              )}
+              <div className="w-full h-[1px] bg-scale-500 my-8"></div>
+              <MDXProvider components={components}>{props.children}</MDXProvider>
+
+              {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
+                <></>
+              ) : (
+                <div className="mt-16 not-prose">
+                  <div>
+                    <a
+                      href={`https://github.com/supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`}
+                      className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200"
+                    >
+                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
+                    </a>
+                  </div>
+                </div>
+              )}
+            </article>
           </div>
-        )}
-      </div>
-      <FooterHelpCallout footerHelpType={props.meta?.footerHelpType} title={props.meta?.title} />
+          {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+            <div
+              className={[
+                'col-span-3',
+                'border-scale-400 dark:bg-scale-200 table-of-contents-height',
+                'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                'transition-all ease-out',
+                'duration-100',
+              ].join(' ')}
+            >
+              <div className="border-l">
+                {props.meta?.tocVideo && !!tocVideoPreview && (
+                  <div className="relative mb-6 pl-5">
+                    <ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
+                  </div>
+                )}
+                <span className="block font-mono text-xs uppercase text-scale-1200 px-5 mb-6">
+                  On this page
+                </span>
+                <GuidesTableOfContents list={tocList} />
+              </div>
+            </div>
+          )}
+        </div>
+      </LayoutMainContent>
     </>
   )
 }

apps/docs/layouts/ref/RefSubLayout.tsx

@@ -51,7 +51,11 @@ interface ISectionDetails {}
 interface ISectionExamples {}
 
 const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) => {
-  return <div className="flex flex-col w-full divide-y">{props.children}</div>
+  return (
+    <div className="flex flex-col w-full divide-y px-5 max-w-7xl mx-auto py-16">
+      {props.children}
+    </div>
+  )
 }
 
 const Section: FC<ISectionContainer> = (props) => {
@@ -128,7 +132,7 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
 }
 
 const Details: FC<ISectionDetails> = (props) => {
-  return <div className="relative overflow-hidden w-full">{props.children}</div>
+  return <div className="relative w-full">{props.children}</div>
 }
 
 const Examples: FC<ISectionExamples> = (props) => {

apps/docs/layouts/tutorials/TutorialLayout.tsx

@@ -6,7 +6,13 @@ import SideBar from '~/components/Navigation/SideBar'
 import TableOfContents from '~/components/TableOfContents'
 
 interface Props {
-  meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string }
+  meta: {
+    title: string
+    description?: string
+    hide_table_of_contents?: boolean
+    video?: string
+    tocVideo?: string
+  }
   children: any
   toc?: any
   menuItems: any

apps/docs/lib/constants.ts

@@ -1,2 +1,3 @@
 export const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
 export const LOCAL_SUPABASE = process.env.NEXT_PUBLIC_LOCAL_SUPABASE === 'true'
+export const API_URL = process.env.NEXT_PUBLIC_API_URL

apps/docs/lib/fetchWrappers.tsx

@@ -1,7 +1,5 @@
 interface DataProps {
-  referrer?: string
-  title: string
-  route?: string
+  [prop: string]: any
 }
 
 export const post = (url: string, data: DataProps, options = {}) => {

apps/docs/lib/helpers.ts

@@ -1,6 +1,4 @@
-// [Joshen] I think this can be done better, as its mostly used to choose what
-
-import { ICommonFunc } from '../components/reference/Reference.types'
+import { ICommonBase, ICommonItem, ICommonSection } from '../components/reference/Reference.types'
 
 // menus to render in the SideBar.js (Ref Nav.constants.ts)
 export function getPageType(asPath: string) {
@@ -36,18 +34,25 @@ export function getPageType(asPath: string) {
   return page
 }
 
-export function flattenSections(sections: ICommonFunc[]) {
-  let a: ICommonFunc[] = []
-  for (let i = 0; i < sections.length; i++) {
-    if (sections[i].id) {
-      // only push a section that has an id
-      // these are reserved for sidebar subtitles
-      a.push(sections[i])
+/**
+ * Flattens common sections recursively by their `items`.
+ *
+ * _Note:_ `sections` type set to `ICommonBase[]` instead of
+ * `ICommonItem[]` until TypeScript supports JSON imports as const:
+ * https://github.com/microsoft/TypeScript/issues/32063
+ */
+export function flattenSections(sections: ICommonBase[]): ICommonSection[] {
+  return sections.reduce<ICommonSection[]>((acc, section: ICommonItem) => {
+    // Flatten sub-items
+    if ('items' in section) {
+      let newSections = acc
+
+      if (section.type !== 'category') {
+        newSections.push(section)
+      }
+
+      return newSections.concat(flattenSections(section.items))
     }
-    if (sections[i].items) {
-      // if there are subitems, loop through
-      a = a.concat(flattenSections(sections[i].items))
-    }
-  }
-  return a
+    return acc.concat(section)
+  }, [])
 }

apps/docs/lib/mdx/generateRefMarkdown.tsx

@@ -2,12 +2,9 @@ import fs from 'fs'
 
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
+import { ICommonMarkdown } from '~/components/reference/Reference.types'
 
-// import { remarkCodeHike } from '@code-hike/mdx'
-// import codeHikeTheme from '~/codeHikeTheme.js'
-// import theme from 'shiki/themes/solarized-dark.json'
-
-async function generateRefMarkdown(sections, slug) {
+async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
   let markdownContent = []
   /**
    * Read all the markdown files that might have
@@ -16,10 +13,8 @@ async function generateRefMarkdown(sections, slug) {
    *  - important notes regarding implementation
    */
   await Promise.all(
-    sections.map(async (x, i) => {
-      if (!x.id) return null
-
-      const pathName = `docs/ref${slug}/${x.id}.mdx`
+    sections.map(async (section) => {
+      const pathName = `docs/ref${slug}/${section.id}.mdx`
 
       function checkFileExists(x) {
         if (fs.existsSync(x)) {
@@ -37,8 +32,8 @@ async function generateRefMarkdown(sections, slug) {
       const { data, content } = matter(fileContents)
 
       markdownContent.push({
-        id: x.id,
-        title: x.title,
+        id: section.id,
+        title: section.title,
         meta: data,
         // introPage: introPages.includes(x),
         content: content

apps/docs/lib/mdx/getConfig.tsx

@@ -1,12 +1,7 @@
-// @ts-expect-error
 import specStorageV0 from '~/../../spec/storage_v0_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specRealtimeV0 from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specAuthV1 from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specAnalyticsV0 from '~/../../spec/analytics_v0_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specFunctionsV0 from '~/../../spec/functions_v0_config.yaml' assert { type: 'yml' }
 
 function getStorageConfigV0() {

apps/docs/lib/mdx/handleRefStaticPaths.tsx

@@ -1,13 +1,11 @@
-import { getAllDocs } from '../docs'
-
-async function handleRefGetStaticPaths() {
-  let docs = getAllDocs()
+import { ICommonSection } from '~/components/reference/Reference.types'
 
+async function handleRefGetStaticPaths(sections: ICommonSection[]) {
   return {
-    paths: docs.map(() => {
+    paths: sections.map((section) => {
       return {
         params: {
-          slug: docs.map((d) => d.slug),
+          slug: [section.slug],
         },
       }
     }),

apps/docs/lib/mdx/handleRefStaticProps.tsx

@@ -1,7 +1,11 @@
+import { ICommonMarkdown, ICommonSection } from '~/components/reference/Reference.types'
 import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown'
 
-async function handleRefStaticProps(sections, librarypath) {
-  let markdownContent = await generateRefMarkdown(sections, librarypath)
+async function handleRefStaticProps(sections: ICommonSection[], libraryPath: string) {
+  const markdownSections = sections.filter(
+    (section): section is ICommonMarkdown => section.type === 'markdown'
+  )
+  const markdownContent = await generateRefMarkdown(markdownSections, libraryPath)
 
   return {
     props: {

apps/docs/lib/mdx/plugins/rehypeLinkTransform.ts

@@ -0,0 +1,31 @@
+import { Element } from 'hast'
+import { hasProperty } from 'hast-util-has-property'
+import { Node } from 'unist'
+import { visit } from 'unist-util-visit'
+
+export type UrlTransformFunction = (url: string, node: Element) => string
+
+function modify(node: Element, prop: string, fn?: UrlTransformFunction) {
+  if (hasProperty(node, prop)) {
+    const property = node.properties[prop]
+    if (typeof property !== 'string') {
+      return
+    }
+
+    node.properties[prop] = fn?.(property, node) ?? property
+  }
+}
+
+/**
+ * Transforms every HAST element that contains a `href` or `src`.
+ * A `UrlTransformFunction` is called with the current URL. The
+ * return value from this function will be used as the replacement.
+ */
+export function linkTransform(fn?: UrlTransformFunction) {
+  return function transformer(tree: Node) {
+    visit(tree, 'element', (node: Element) => {
+      modify(node, 'href', fn)
+      modify(node, 'src', fn)
+    })
+  }
+}

apps/docs/lib/mdx/plugins/remarkAdmonition.ts

@@ -0,0 +1,105 @@
+import { Content, Paragraph, Parent } from 'mdast'
+import { MdxJsxFlowElement } from 'mdast-util-mdx'
+import { Node } from 'unist'
+import { visit } from 'unist-util-visit'
+import { AdmonitionProps } from '~/components/Admonition'
+
+/**
+ * Transforms an `mkdocs-material` Admonition to a Supabase Admonition.
+ *
+ * https://squidfunk.github.io/mkdocs-material/reference/admonitions/
+ */
+const remarkMkDocsAdmonition = function () {
+  return function transformer(root: Parent) {
+    visit(root, 'paragraph', (paragraph: Paragraph, index: number, parent: Parent) => {
+      const [firstChild] = paragraph.children
+
+      if (firstChild?.type === 'text') {
+        const match = firstChild.value.match(/^!!! ?(.*?)\n(.*)/s)
+
+        if (!match) {
+          return
+        }
+
+        // Extract the admonition type along with the remaining text
+        const [, type, value] = match
+
+        // Rewrite the node's value to remove the admonition syntax
+        firstChild.value = value
+
+        // Extract sibling nodes that should be linked to this admonition
+        const siblingsToNest = extractLinkedSiblings(parent, paragraph, index)
+
+        const children: any[] = [...paragraph.children, ...siblingsToNest]
+
+        // Generate a Supabase Admonition JSX element
+        const admonitionElement: MdxJsxFlowElement = {
+          type: 'mdxJsxFlowElement',
+          name: 'Admonition',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'type',
+              value: mapAdmonitionType(type),
+            },
+          ],
+          children,
+        }
+
+        // Overwrite original node with new element
+        parent.children.splice(index, 1, admonitionElement)
+      }
+    })
+  }
+}
+
+/**
+ * Identifies sibling nodes that should be linked to this admonition
+ * based on their indent level (ie. 4 spaces).
+ *
+ * Iterates through proceeding siblings until one is found that is
+ * not indented relative to the original node.
+ *
+ * Splices the discovered siblings out of the original parent and returns them.
+ */
+function extractLinkedSiblings(parent: Parent, node: Node, index: number, indentAmount = 4) {
+  const { column } = node.position.start
+
+  let nextSibling: Content
+  let i = index
+
+  do {
+    nextSibling = parent.children[++i]
+  } while (nextSibling?.position && nextSibling.position.start.column === column + indentAmount)
+
+  return parent.children.splice(index + 1, i - index - 1)
+}
+
+/**
+ * Maps `mkdocs-material` Admonition types to Supabase Admonition types.
+ *
+ * https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types
+ */
+function mapAdmonitionType(type: string): AdmonitionProps['type'] {
+  switch (type) {
+    case 'quote':
+    case 'example':
+    case 'note':
+      return 'note'
+    case 'tip':
+      return 'tip'
+    case 'warning':
+      return 'caution'
+    case 'failure':
+    case 'bug':
+    case 'danger':
+      return 'danger'
+    case 'abstract':
+    case 'question':
+    case 'info':
+    default:
+      return 'info'
+  }
+}
+
+export default remarkMkDocsAdmonition

apps/docs/lib/mdx/plugins/remarkRemoveTitle.ts

@@ -0,0 +1,23 @@
+import { Parent } from 'mdast'
+
+/**
+ * Removes the top heading from a MD file if
+ * it is the first node and it matches `title`.
+ *
+ * Useful when rendering title separately from MD
+ * and you need to remove the duplicate.
+ */
+export function removeTitle(title: string) {
+  return function transformer(root: Parent) {
+    const [firstNode] = root.children
+
+    if (firstNode?.type === 'heading') {
+      const [text] = firstNode.children
+
+      if (text?.type === 'text' && text.value === title) {
+        // Remove this node
+        root.children.splice(0, 1)
+      }
+    }
+  }
+}