Merge pull request #10449 from supabase/fix/docs-custom-anchor-headings

Fix/docs custom anchor headings

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

@@ -3,9 +3,9 @@ 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('}')
+        (x) => typeof x === 'string' && x.includes('[#') && x.endsWith(']')
       )
-      if (customAnchor !== undefined) return customAnchor.slice(3, customAnchor.indexOf('}'))
+      if (customAnchor !== undefined) return customAnchor.slice(2, customAnchor.indexOf(']'))
 
       const formattedText = text
         .map((x) => {
@@ -33,8 +33,8 @@ export const getAnchor = (text: any): string | undefined => {
       return anchor
     }
   } else if (typeof text === 'string') {
-    if (text.includes('{#') && text.endsWith('}')) {
-      return text.slice(text.indexOf('{#') + 2, text.indexOf('}'))
+    if (text.includes('[#') && text.endsWith(']')) {
+      return text.slice(text.indexOf('[#') + 2, text.indexOf(']'))
     } else {
       return text
         .toLowerCase()
@@ -48,9 +48,9 @@ export const getAnchor = (text: any): string | undefined => {
 
 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' && x.includes('[#') && x.endsWith(']')))
   } else if (typeof text === 'string') {
-    if (text.indexOf('{#') > 0) return text.slice(0, text.indexOf('{#'))
+    if (text.indexOf('[#') > 0) return text.slice(0, text.indexOf('[#'))
     else return text
   }
   return text

apps/docs/components/CustomHTMLElements/Heading.tsx

@@ -8,7 +8,6 @@ import { useInView } from 'react-intersection-observer'
 
 const Heading = ({ tag, children }) => {
   const HeadingTag = `${tag}` as any
-
   const anchor = getAnchor(children)
   const link = `#${anchor}`
 

apps/docs/docs/reference/api/release-notes.mdx

@@ -3,7 +3,7 @@ id: release-notes
 title: Release Notes
 ---
 
-## v1.0.0 {#1.0.0}
+## v1.0.0 [#1.0.0]
 
 Adds the following routes:
 

apps/docs/generator/templates/ApiTemplate.ts

@@ -16,7 +16,7 @@ toc_max_heading_level: 3
 
 <% sections.forEach(function(section){ %>
 
-## <%- section.title %> {#<%= section.id %>}
+## <%- section.title %> [#<%= section.id %>]
 
 <%- section.description %>
 
@@ -24,7 +24,7 @@ toc_max_heading_level: 3
 
 <!-- AUTOGENERATED: DO NOT EDIT DIRECTLY IF THIS IS VERSION "next" -->
 
-### <%- operation.summary %> {#<%- operation.operationId %>}
+### <%- operation.summary %> [#<%- operation.operationId %>]
 
 \`\`\`
 <%- operation.operation.toUpperCase() %> <%- operation.fullPath %>

apps/docs/generator/templates/ConfigTemplate.ts

@@ -14,11 +14,11 @@ toc_max_heading_level: 3
 
 <!-- AUTOGENERATED: DO NOT EDIT DIRECTLY -->
 
-## <%= section.title %> {#<%= section.id %>}
+## <%= section.title %> [#<%= section.id %>]
 
 <% section.parameters.forEach(function(parameter){ %>
 
-### \`<%- parameter.title %>\` {#<%= parameter.id %>}
+### \`<%- parameter.title %>\` [#<%= parameter.id %>]
 
 <%- parameter.description %>
 

apps/docs/pages/guides/api.mdx

@@ -21,7 +21,7 @@ The APIs are:
 - **Fast.** <br />Our benchmarks for basic reads are more than 300% faster than Firebase. The API is a very thin layer on top of Postgres, which does most of the heavy lifting.
 - **Scalable.** <br />The API can serve thousands of simultaneous requests, and works well for Serverless workloads.
 
-## REST API {#rest-api-overview}
+## REST API [#rest-api-overview]
 
 Supabase provides a RESTful API using [PostgREST](https://postgrest.org/). This is a very thin API layer on top of Postgres.
 It provides everything you need from a CRUD API:
@@ -41,7 +41,7 @@ It provides everything you need from a CRUD API:
   ></iframe>
 </div>
 
-## GraphQL API {#graphql-api-overview}
+## GraphQL API [#graphql-api-overview]
 
 <Admonition type='note'>
 
@@ -51,7 +51,7 @@ GraphQL is in Beta, and may have breaking changes. It is only available on self-
 
 GraphQL in Supabase works through [pg_graphql](https://supabase.com/blog/pg-graphql), an open source PostgreSQL extension for GraphQL.
 
-## Realtime API {#realtime-api-overview}
+## Realtime API [#realtime-api-overview]
 
 Supabase provides a Realtime API using [Realtime](https://github.com/supabase/realtime). You can use this to listen to database changes over websockets.
 Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
@@ -130,7 +130,7 @@ You are provided with two keys:
 
 ### Accessing the docs in the Dashboard
 
-#### REST API {#rest-api-dashboard-docs}
+#### REST API [#rest-api-dashboard-docs]
 
 Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
 Let's view the documentation for a `countries` table which we created in our database.

apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx

@@ -147,7 +147,7 @@ const App = () => (
 
 If you created your own theme, you may not need to override any of the them.
 
-### Create your own theme {#create-theme}
+### Create your own theme [#create-theme]
 
 You can create your own theme by following the same structure within a `appearance.theme` property.
 See the list of [tokens within a theme](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx).
@@ -199,7 +199,7 @@ const App = () => (
 
 You can swich between different variations of your theme with the ["theme" prop](#switch-theme-variations).
 
-### Custom CSS classes {#custom-css-classes}
+### Custom CSS classes [#custom-css-classes]
 
 You can use custom CSS classes for the following elements:
 `"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`.
@@ -224,7 +224,7 @@ const App = () => (
 )
 ```
 
-### Custom inline CSS {#custom-inline-styles}
+### Custom inline CSS [#custom-inline-styles]
 
 You can use custom CSS inline styles for the following elements:
 `"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`.
@@ -249,7 +249,7 @@ const App = () => (
 )
 ```
 
-### Custom labels {#custom-labels}
+### Custom labels [#custom-labels]
 
 You can use custom labels with `localization.variables`. See the [list of labels](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/lib/Localization/en.json) that can be overwritten.
 

apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx

@@ -371,9 +371,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 }
 ```
 
-## Migrate from 0.7.x to 0.8 {#migration}
+## Migrate from 0.7.x to 0.8 [#migration]
 
-### Set up the Supabase client {#migration-set-up-supabase-client}
+### Set up the Supabase client [#migration-set-up-supabase-client]
 
 <Tabs
   scrollable
@@ -421,7 +421,7 @@ export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_S
 </TabPanel>
 </Tabs>
 
-### Initialize the client {#migration-initialize-client}
+### Initialize the client [#migration-initialize-client]
 
 <Tabs
   scrollable
@@ -477,7 +477,7 @@ export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_S
 </TabPanel>
 </Tabs>
 
-### Set up hooks {#migration-set-up-hooks}
+### Set up hooks [#migration-set-up-hooks]
 
 <Tabs
   scrollable
@@ -524,7 +524,7 @@ import '$lib/db'
 </TabPanel>
 </Tabs>
 
-### Typings {#migration-typings}
+### Typings [#migration-typings]
 
 <Tabs
   scrollable
@@ -581,7 +581,7 @@ declare namespace App {
 </TabPanel>
 </Tabs>
 
-### withPageAuth {#migration-with-page-auth}
+### withPageAuth [#migration-with-page-auth]
 
 <Tabs
   scrollable
@@ -659,7 +659,7 @@ export const load: PageLoad = async (event) => {
 </TabPanel>
 </Tabs>
 
-### withApiAuth {#migration-with-api-auth}
+### withApiAuth [#migration-with-api-auth]
 
 <Tabs
   scrollable
@@ -712,7 +712,7 @@ export const GET: RequestHandler = async (event) => {
 </TabPanel>
 </Tabs>
 
-## Migrate from 0.6.11 and below to 0.7.0 {#migration-0-7}
+## Migrate from 0.6.11 and below to 0.7.0 [#migration-0-7]
 
 There are numerous breaking changes in the latest 0.7.0 version of this library.
 
@@ -720,7 +720,7 @@ There are numerous breaking changes in the latest 0.7.0 version of this library.
 
 The environment variable prefix is now `PUBLIC_` instead of `VITE_` (e.g., `VITE_SUPABASE_URL` is now `PUBLIC_SUPABASE_URL`).
 
-### Set up the Supabase client {#migration-set-up-supabase-client-0-7}
+### Set up the Supabase client [#migration-set-up-supabase-client-0-7]
 
 <Tabs
   scrollable
@@ -769,7 +769,7 @@ setupSupabaseHelpers({
 </TabPanel>
 </Tabs>
 
-### Initialize the client {#migration-initialize-client-0-7}
+### Initialize the client [#migration-initialize-client-0-7]
 
 <Tabs
   scrollable
@@ -817,7 +817,7 @@ The `@supabase/auth-helpers-svelte` library is no longer required as the `@supab
 </TabPanel>
 </Tabs>
 
-### Set up hooks {#migration-set-up-hooks-0-7}
+### Set up hooks [#migration-set-up-hooks-0-7]
 
 <Tabs
   scrollable
@@ -871,7 +871,7 @@ export const handle = sequence(auth(), yourHandler)
 </TabPanel>
 </Tabs>
 
-### Typings {#migration-typings-0-7}
+### Typings [#migration-typings-0-7]
 
 <Tabs
   scrollable

apps/docs/pages/guides/database/extensions/pgnet.mdx

@@ -53,7 +53,7 @@ Procedural languages are automatically installed within `pg_catalog`, so you don
 </TabPanel>
 </Tabs>
 
-## `http_get` {#http_get}
+## `http_get` [#http_get]
 
 Creates an HTTP GET request returning the request's ID. HTTP requests are not started until the transaction is committed.
 
@@ -98,7 +98,7 @@ request_id
 
 After triggering `http_get`, use [`http_get_result`](#http_get_result) to get the result of the request.
 
-## `http_post` {#http_post}
+## `http_post` [#http_post]
 
 Creates an HTTP POST request with a JSON body, returning the request's ID. HTTP requests are not started until the transaction is committed.
 
@@ -150,7 +150,7 @@ request_id
 
 After triggering `http_post`, use [`http_get_result`](#http_get_result) to get the result of the request.
 
-## `http_collect_response` {#http_collect_response}
+## `http_collect_response` [#http_collect_response]
 
 Given a `request_id` reference, retrieves the response.
 

apps/docs/pages/guides/database/full-text-search.mdx

@@ -55,7 +55,7 @@ values
 
 The functions we'll cover in this guide are:
 
-### `to_tsvector()` {#to-tsvector}
+### `to_tsvector()` [#to-tsvector]
 
 Converts your data into searchable "tokens". `to_tsvector()` stands for "to text search vector". For example:
 
@@ -67,14 +67,14 @@ select to_tsvector('green eggs and ham')
 
 Collectively these tokens are called a "document" which Postgres can use for comparisons.
 
-### `to_tsquery()` {#to-tsquery}
+### `to_tsquery()` [#to-tsquery]
 
 Converts a query string into "tokens" to match. `to_tsquery()` stands for "to text search query".
 
 This conversion step is important because we will want to "fuzzy match" on keywords.
 For example if a user searches for "eggs", and a column has the value "egg", we probably still want to return a match.
 
-### Match: `@@` {#match}
+### Match: `@@` [#match]
 
 The `@@` symbol is the "match" symbol for Full Text Search. It returns any matches between a `to_tsvector` result and a `to_tsquery` result.
 
@@ -449,7 +449,7 @@ final result = await client
 Visit [PostgreSQL: Text Search Functions and Operators](https://www.postgresql.org/docs/current/functions-textsearch.html)
 to learn about additional query operators you can use to do more advanced `full text queries`, such as:
 
-### Proximity: `<->` {#proximity}
+### Proximity: `<->` [#proximity]
 
 The proximity symbol is useful for searching for terms that are a certain "distance" apart.
 For example, to find the phrase `big dreams`, where the a match for "big" is followed immediately by a match for "dreams":
@@ -538,7 +538,7 @@ final result = await client
 </TabPanel>
 </Tabs>
 
-### Negation: `!` {#negation}
+### Negation: `!` [#negation]
 
 The negation symbol can be used to find phrases which _don't_ contain a search term.
 For example, to find records that have the word `big` but not `little`:

apps/docs/pages/guides/migrations/firebase-auth.mdx

@@ -12,7 +12,7 @@ Supabase provides several [tools](https://github.com/supabase-community/firebase
 - `firestoreusers2json` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.js)) exports users from an existing Firebase project to a `.json` file on your local system.
 - `import_users` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/import_users.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/import_users.js)) imports users from a saved `.json` file into your Supabase project (inserting those users into the `auth.users` table of your `PostgreSQL` database instance).
 
-## Set up the migration tool {#set-up-migration-tool}
+## Set up the migration tool [#set-up-migration-tool]
 
 1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
 
@@ -36,7 +36,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
 1. Under **Connection Info**, copy the Host string and replace the entry in your `supabase-service.json` file.
 1. Enter the password you used when you created your Supabase project in the `password` entry in the `supabase-service.json` file.
 
-## Generate a Firebase private key {#generate-firebase-private-key}
+## Generate a Firebase private key [#generate-firebase-private-key]
 
 1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
 1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
@@ -44,7 +44,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
 1. Click **Generate new private key**.
 1. Rename the downloaded file to `firebase-service.json`.
 
-## Save your Firebase password hash parameters {#save-firebase-hash-parameters}
+## Save your Firebase password hash parameters [#save-firebase-hash-parameters]
 
 1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
 1. Select **Authentication** (Build section) in the sidebar.
@@ -64,14 +64,14 @@ hash_config {
 
 ## Command line options
 
-### Dump Firestore users to a JSON file {#dump-firestore-users}
+### Dump Firestore users to a JSON file [#dump-firestore-users]
 
 `node firestoreusers2json.js [<filename.json>] [<batch_size>]`
 
 - `filename.json`: (optional) output filename (defaults to `./users.json`)
 - `batchSize`: (optional) number of users to fetch in each batch (defaults to 100)
 
-### Import JSON users file to Supabase Auth (PostgreSQL: auth.users) {#import-json-users-file}
+### Import JSON users file to Supabase Auth (PostgreSQL: auth.users) [#import-json-users-file]
 
 `node import_users.js <path_to_json_file> [<batch_size>]`
 

apps/docs/pages/guides/migrations/firebase-storage.mdx

@@ -12,7 +12,7 @@ Supabase provides several [tools](https://github.com/supabase-community/firebase
 1. Files are downloaded from a Firebase storage bucket to a local filesystem.
 2. Files are uploaded from the local filesystem to a Supabase storage bucket.
 
-## Set up the migration tool {#set-up-migration-tool}
+## Set up the migration tool [#set-up-migration-tool]
 
 1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
 
@@ -25,7 +25,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
 1. Copy the **Project URL** and update the `SUPABASE_URL` value in `supabase-keys.js`.
 1. Under **Project API keys**, copy the **service_role** key and update the `SUPABASE_KEY` value in `supabase-keys.js`.
 
-## Generate a Firebase private key {#generate-firebase-private-key}
+## Generate a Firebase private key [#generate-firebase-private-key]
 
 1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
 1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
@@ -35,7 +35,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
 
 ## Command line options
 
-### Download Firestore Storage bucket to a local filesystem folder {#download-firestore-storage-bucket}
+### Download Firestore Storage bucket to a local filesystem folder [#download-firestore-storage-bucket]
 
 `node download.js <prefix> [<folder>] [<batchSize>] [<limit>] [<token>]`
 
@@ -47,7 +47,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
 
 To process in batches using multiple command-line executions, you must use the same parameters with a new `<token>` on subsequent calls. Use the token displayed on the last call to continue the process at a given point.
 
-### Upload files to Supabase Storage bucket {#upload-to-supabase-storage-bucket}
+### Upload files to Supabase Storage bucket [#upload-to-supabase-storage-bucket]
 
 `node upload.js <prefix> <folder> <bucket>`
 

apps/docs/pages/guides/migrations/firestore-data.mdx

@@ -11,7 +11,7 @@ Supabase provides several [tools](https://github.com/supabase-community/firebase
 
 The Firestore `collection` is "flattened" and converted to a table with basic columns of one of the following types: `text`, `numeric`, `boolean`, or `jsonb`. If your structure is more complex, you can write a program to split the newly-created `json` file into multiple, related tables before you import your `json` file(s) to Supabase.
 
-## Set up the migration tool {#set-up-migration-tool}
+## Set up the migration tool [#set-up-migration-tool]
 
 1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
 
@@ -35,7 +35,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
 1. Under **Connection Info**, copy the Host string and replace the entry in your `supabase-service.json` file.
 1. Enter the password you used when you created your Supabase project in the `password` entry in the `supabase-service.json` file.
 
-## Generate a Firebase private key {#generate-firebase-private-key}
+## Generate a Firebase private key [#generate-firebase-private-key]
 
 1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
 1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
@@ -79,7 +79,7 @@ And split it into two files (one table for users and one table for items):
 ]
 ```
 
-### Import JSON file to Supabase (PostgreSQL) {#import-to-supabase}
+### Import JSON file to Supabase (PostgreSQL) [#import-to-supabase]
 
 `node json2supabase.js <path_to_json_file> [<primary_key_strategy>] [<primary_key_name>]`
 

apps/docs/pages/guides/migrations/heroku.mdx

@@ -22,7 +22,7 @@ Alternatively, use the [Heroku to Supabase migration tool](https://migrate.supab
   ></iframe>
 </div>
 
-## Retrieve your Heroku database credentials {#retrieve-heroku-credentials}
+## Retrieve your Heroku database credentials [#retrieve-heroku-credentials]
 
 1. Log in to your [Heroku account](https://heroku.com) and select the project you want to migrate.
 1. Click **Resources** in the menu and select your **Heroku Postgres** database.
@@ -33,13 +33,13 @@ Alternatively, use the [Heroku to Supabase migration tool](https://migrate.supab
    - User (`$HEROKU_USER`)
    - Password (`$HEROKU_PASSWORD`)
 
-## Retrieve your Supabase Host {#retrieve-supabase-host}
+## Retrieve your Supabase Host [#retrieve-supabase-host]
 
 1. If you're new to Supabase, [create a project](https://app.supabase.com).
 1. Go to the [Database settings](https://app.supabase.com/project/_/settings/database) for your project in the Supabase Dashboard.
 1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
 
-## Export your Heroku database to a file {#export-heroku-database}
+## Export your Heroku database to a file [#export-heroku-database]
 
 Use `pg_dump` with your Heroku credentials to export your Heroku database to a file (e.g., `heroku_dump.sql`).
 
@@ -49,7 +49,7 @@ pg_dump --clean --if-exists --quote-all-identifiers \
  --no-owner --no-privileges > heroku_dump.sql
 ```
 
-## Import the database to your Supabase project {#import-database-to-supabase}
+## Import the database to your Supabase project [#import-database-to-supabase]
 
 Use `psql` to import the Heroku database file to your Supabase project.
 

apps/docs/pages/guides/platform/compute-add-ons.mdx

@@ -3,23 +3,23 @@ import Layout from '~/layouts/DefaultGuideLayout'
 export const meta = {
   id: 'compute-add-ons',
   title: 'Compute Add-ons',
-  description: 'Learn about your project\'s instance and additional add-ons.',
+  description: "Learn about your project's instance and additional add-ons.",
 }
 
 Every project on the Supabase Platform comes with its own dedicated Postgres instance running inside a virtual machine (VM). The following table describes the base instance with additional compute add-ons available if you need extra performance when scaling up Supabase.
 
-Plan | Pricing | CPU | Memory | Disk IO Bandwidth | Connections: Direct | Connections: Pooler
------|---------|-----|--------|-------------------|---------------------|--------------------
-Free (Included) | $0 | 2-core ARM (shared) | 1 GB | Up to 2,085 Mbps | 10 (recommended) | 50 (recommended)
-Small | $5 | 2-core ARM (shared) | 2 GB | Up to 2,085 Mbps | 30 (recommended) | 75 (recommended)
-Medium | $50 | 2-core ARM (shared) | 4 GB | Up to 2,085 Mbps | 50 (recommended) | 150 (recommended)
-Large | $100 | 2-core ARM (dedicated) | 8 GB | Up to 4,750 Mbps | 100 (recommended) | 300 (recommended)
-XL | $200 | 4-core ARM (dedicated) | 16 GB | Up to 4,750 Mbps | 200 (recommended) | 600 (recommended)
-2XL | $400 | 8-core ARM (dedicated) | 32 GB | Up to 4,750 Mbps | 350 (recommended) | 1200 (recommended)
-4XL | $950 | 16-core ARM (dedicated) | 64 GB | Up to 4,750 Mbps | 420 (recommended) | 2800 (recommended)
-8XL | $1,860 | 32-core ARM (dedicated) | 128 GB | Up to 9,000 Mbps | 450 (recommended) | 5600 (recommended)
-12XL | $2,790 | 48-core ARM (dedicated) | 192 GB | Up to 13,500 Mbps | 480 (recommended) | 8600 (recommended)
-16XL | $3,720 | 64-core ARM (dedicated) | 256 GB | Up to 19,000 Mbps | 500 (recommended) | 11,600 (recommended)
+| Plan            | Pricing | CPU                     | Memory | Disk IO Bandwidth | Connections: Direct | Connections: Pooler  |
+| --------------- | ------- | ----------------------- | ------ | ----------------- | ------------------- | -------------------- |
+| Free (Included) | $0      | 2-core ARM (shared)     | 1 GB   | Up to 2,085 Mbps  | 10 (recommended)    | 50 (recommended)     |
+| Small           | $5      | 2-core ARM (shared)     | 2 GB   | Up to 2,085 Mbps  | 30 (recommended)    | 75 (recommended)     |
+| Medium          | $50     | 2-core ARM (shared)     | 4 GB   | Up to 2,085 Mbps  | 50 (recommended)    | 150 (recommended)    |
+| Large           | $100    | 2-core ARM (dedicated)  | 8 GB   | Up to 4,750 Mbps  | 100 (recommended)   | 300 (recommended)    |
+| XL              | $200    | 4-core ARM (dedicated)  | 16 GB  | Up to 4,750 Mbps  | 200 (recommended)   | 600 (recommended)    |
+| 2XL             | $400    | 8-core ARM (dedicated)  | 32 GB  | Up to 4,750 Mbps  | 350 (recommended)   | 1200 (recommended)   |
+| 4XL             | $950    | 16-core ARM (dedicated) | 64 GB  | Up to 4,750 Mbps  | 420 (recommended)   | 2800 (recommended)   |
+| 8XL             | $1,860  | 32-core ARM (dedicated) | 128 GB | Up to 9,000 Mbps  | 450 (recommended)   | 5600 (recommended)   |
+| 12XL            | $2,790  | 48-core ARM (dedicated) | 192 GB | Up to 13,500 Mbps | 480 (recommended)   | 8600 (recommended)   |
+| 16XL            | $3,720  | 64-core ARM (dedicated) | 256 GB | Up to 19,000 Mbps | 500 (recommended)   | 11,600 (recommended) |
 
 [Contact us](https://supabase.com/contact/enterprise) if you require a custom plan.
 
@@ -27,7 +27,7 @@ XL | $200 | 4-core ARM (dedicated) | 16 GB | Up to 4,750 Mbps | 200 (recommended
 
 All Postgres instances on Supabase are dedicated applications running inside dedicated virtual machines. However, the underlying hardware resources, for example the physical CPU, may be shared between multiple VMs, but appear to the OS as if it is a dedicated hardware CPU. This is commonly referred to as a vCPU (virtual CPU). Cloud providers use these shared hardware resources to save cost—you can upgrade to a larger compute add-on to guarantee a dedicated physical CPU for your instance.
 
-## Compute upgrades {#upgrades}
+## Compute upgrades [#upgrades]
 
 When considering compute upgrades, assess whether your bottlenecks are hardware-constrained or software-constrained. For example, you may want to look into [optimizing the number of connections](/docs/guides/platform/performance#optimizing-the-number-of-connections) or [examining query performance](/docs/guides/platform/performance#examining-query-performance). When you're happy with your Postgres instance's performance, then you can focus on additional compute resources. For example, you can load test your application in staging to understand your compute requirements. You can also start out on a smaller tier, [create a report](https://app.supabase.com/project/_/reports) in the Dashboard to monitor your CPU utilization, and upgrade later as needed
 

apps/docs/pages/guides/with-nextjs.mdx

@@ -111,10 +111,7 @@ function MyApp({ Component, pageProps }) {
   const [supabase] = useState(() => createBrowserSupabaseClient())
 
   return (
-    <SessionContextProvider
-      supabaseClient={supabase}
-      initialSession={pageProps.initialSession}
-    >
+    <SessionContextProvider supabaseClient={supabase} initialSession={pageProps.initialSession}>
       <Component {...pageProps} />
     </SessionContextProvider>
   )
@@ -140,10 +137,7 @@ function MyApp({
   const [supabase] = useState(() => createBrowserSupabaseClient())
 
   return (
-    <SessionContextProvider
-      supabaseClient={supabase}
-      initialSession={pageProps.initialSession}
-    >
+    <SessionContextProvider supabaseClient={supabase} initialSession={pageProps.initialSession}>
       <Component {...pageProps} />
     </SessionContextProvider>
   )