diff --git a/apps/docs/content/guides/ai/examples/nextjs-vector-search.mdx b/apps/docs/content/guides/ai/examples/nextjs-vector-search.mdx
index f755cb6c3ef..8e186a378d8 100644
--- a/apps/docs/content/guides/ai/examples/nextjs-vector-search.mdx
+++ b/apps/docs/content/guides/ai/examples/nextjs-vector-search.mdx
@@ -551,11 +551,4 @@ Want to learn more about the awesome tech that is powering this?
- Read the pgvector Docs for [Embeddings and vector similarity](/docs/guides/database/extensions/pgvector)
- Watch Greg's video for a full breakdown:
-
-
-
+
diff --git a/apps/docs/content/guides/ai/examples/openai.mdx b/apps/docs/content/guides/ai/examples/openai.mdx
index 88c13277cef..a7f05edede7 100644
--- a/apps/docs/content/guides/ai/examples/openai.mdx
+++ b/apps/docs/content/guides/ai/examples/openai.mdx
@@ -102,11 +102,4 @@ supabase secrets set --env-file ./supabase/.env.local
If you're interesting in learning how to use this to build your own ChatGPT, read [the blog post](/blog/chatgpt-supabase-docs) and check out the video:
-
-
-
+
diff --git a/apps/docs/content/guides/auth/social-login/auth-google.mdx b/apps/docs/content/guides/auth/social-login/auth-google.mdx
index a8d40070e14..b011bdc1028 100644
--- a/apps/docs/content/guides/auth/social-login/auth-google.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-google.mdx
@@ -565,14 +565,7 @@ Future _nativeGoogleSignIn() async {
...
```
-
-
-
+
@@ -593,14 +586,7 @@ await supabase.auth.signInWithOAuth(
This call takes the user to Google's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your Flutter application with an access and refresh token representing the user's session.
-
-
-
+
@@ -755,14 +741,7 @@ Button(onClick = { authState.startFlow() }) {
}
```
-
-
-
+
diff --git a/apps/docs/content/guides/database/extensions/http.mdx b/apps/docs/content/guides/database/extensions/http.mdx
index 5cd72c01538..6ba13bc935a 100644
--- a/apps/docs/content/guides/database/extensions/http.mdx
+++ b/apps/docs/content/guides/database/extensions/http.mdx
@@ -9,14 +9,7 @@ The `http` extension allows you to call RESTful endpoints within Postgres.
## Quick demo
-
-
-
+
## Overview
diff --git a/apps/docs/content/guides/database/functions.mdx b/apps/docs/content/guides/database/functions.mdx
index f7a35203620..1ae88d1d1dc 100644
--- a/apps/docs/content/guides/database/functions.mdx
+++ b/apps/docs/content/guides/database/functions.mdx
@@ -10,14 +10,7 @@ These functions live inside your database, and they can be [used with the API](.
## Quick demo
-
-
-
+
## Getting started
@@ -657,33 +650,12 @@ select advanced_example();
### Create Database Functions
-
-
-
+
### Call Database Functions using JavaScript
-
-
-
+
### Using Database Functions to call an external API
-
-
-
+
diff --git a/apps/docs/content/guides/database/tables.mdx b/apps/docs/content/guides/database/tables.mdx
index 22b348dbfc7..6efd8782674 100644
--- a/apps/docs/content/guides/database/tables.mdx
+++ b/apps/docs/content/guides/database/tables.mdx
@@ -423,14 +423,7 @@ For example if you had the following situations:
>
-
-
-
+
diff --git a/apps/docs/content/guides/database/vault.mdx b/apps/docs/content/guides/database/vault.mdx
index 3d129d73579..3cfba9f5740 100644
--- a/apps/docs/content/guides/database/vault.mdx
+++ b/apps/docs/content/guides/database/vault.mdx
@@ -163,15 +163,7 @@ updated_at | 2022-12-14 02:51:13.938396+00
## Deep dive
-
-
-
+
As we mentioned, Vault stores secrets in an authenticated encrypted form. There are some details around that you may be curious about. What does authenticated mean? Where is the encryption key stored? This section explains those details.
diff --git a/apps/docs/content/guides/database/webhooks.mdx b/apps/docs/content/guides/database/webhooks.mdx
index 4c3087b3c4d..37063fd01f6 100644
--- a/apps/docs/content/guides/database/webhooks.mdx
+++ b/apps/docs/content/guides/database/webhooks.mdx
@@ -16,14 +16,7 @@ Database Webhooks are very similar to triggers, and that's because Database Webh
This video demonstrates how you can create a new customer in Stripe each time a row is inserted into a `profiles` table:
-
-
-
+
## Creating a webhook
diff --git a/apps/docs/content/guides/functions/examples/discord-bot.mdx b/apps/docs/content/guides/functions/examples/discord-bot.mdx
index 75b1eaeca92..de609341dd5 100644
--- a/apps/docs/content/guides/functions/examples/discord-bot.mdx
+++ b/apps/docs/content/guides/functions/examples/discord-bot.mdx
@@ -5,14 +5,7 @@ description: 'Building a Slash Command Discord Bot with Edge Functions.'
video: 'https://www.youtube.com/v/J24Bvo_m7DM'
---
-
-
-
+
## Create an application on Discord Developer portal
diff --git a/apps/docs/content/guides/functions/examples/github-actions.mdx b/apps/docs/content/guides/functions/examples/github-actions.mdx
index 54952b728b5..7bd2bdd5c46 100644
--- a/apps/docs/content/guides/functions/examples/github-actions.mdx
+++ b/apps/docs/content/guides/functions/examples/github-actions.mdx
@@ -5,14 +5,7 @@ description: 'Deploying Edge Functions with GitHub Actions.'
video: 'https://www.youtube.com/v/l2KlzGrhB6w'
---
-
-
-
+
Use the Supabase CLI together with GitHub Actions to automatically deploy our Supabase Edge Functions. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/github-action-deploy).
diff --git a/apps/docs/content/guides/functions/examples/og-image.mdx b/apps/docs/content/guides/functions/examples/og-image.mdx
index 4a19c24f374..e827cb22dc7 100644
--- a/apps/docs/content/guides/functions/examples/og-image.mdx
+++ b/apps/docs/content/guides/functions/examples/og-image.mdx
@@ -5,14 +5,7 @@ description: 'Generate Open Graph images with Deno and Supabase Edge Functions.'
video: 'https://www.youtube.com/v/jZgyOJGWayQ'
---
-
-
-
+
Generate Open Graph images with Deno and Supabase Edge Functions. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/opengraph).
diff --git a/apps/docs/content/guides/functions/examples/push-notifications.mdx b/apps/docs/content/guides/functions/examples/push-notifications.mdx
index f6a80ac2aea..9787522b862 100644
--- a/apps/docs/content/guides/functions/examples/push-notifications.mdx
+++ b/apps/docs/content/guides/functions/examples/push-notifications.mdx
@@ -286,14 +286,7 @@ Push notifications are an important part of any mobile app. They allow you to se
1. In your `notifications` table, insert a new row.
1. Watch the magic happen 🪄
-
-
-
+
diff --git a/apps/docs/content/guides/functions/examples/rate-limiting.mdx b/apps/docs/content/guides/functions/examples/rate-limiting.mdx
index 094328f5936..d24133e2f8e 100644
--- a/apps/docs/content/guides/functions/examples/rate-limiting.mdx
+++ b/apps/docs/content/guides/functions/examples/rate-limiting.mdx
@@ -3,14 +3,7 @@ title: 'Rate Limiting Edge Functions'
description: 'Rate Limiting Edge Functions with Upstash Redis.'
---
-
-
-
+
[Redis](https://redis.io/about/) is an open source (BSD licensed), in-memory data structure store used as a database, cache, message broker, and streaming engine. It is optimized for atomic operations like incrementing a value, for example for a view counter or rate limiting. We can even rate limit based on the user ID from Supabase Auth!
diff --git a/apps/docs/content/guides/functions/examples/screenshots.mdx b/apps/docs/content/guides/functions/examples/screenshots.mdx
index 2e346f9ec9e..bcb93fd4d3e 100644
--- a/apps/docs/content/guides/functions/examples/screenshots.mdx
+++ b/apps/docs/content/guides/functions/examples/screenshots.mdx
@@ -3,14 +3,7 @@ title: 'Taking Screenshots with Puppeteer'
description: 'Take screenshots in Edge Functions with Puppeteer and Browserless.io.'
---
-
-
-
+
[Puppeteer](https://pptr.dev/) is a handy tool to programmatically take screenshots and generate PDFs. However, trying to do so in Edge Functions can be challenging due to the size restrictions. Luckily there is a [serverless browser offering available](https://www.browserless.io/) that we can connect to via WebSockets.
diff --git a/apps/docs/content/guides/functions/examples/stripe-webhooks.mdx b/apps/docs/content/guides/functions/examples/stripe-webhooks.mdx
index 60bcf64cf3d..9bb1a115ada 100644
--- a/apps/docs/content/guides/functions/examples/stripe-webhooks.mdx
+++ b/apps/docs/content/guides/functions/examples/stripe-webhooks.mdx
@@ -3,14 +3,7 @@ title: 'Handling Stripe Webhooks'
description: 'Handling signed Stripe Webhooks with Edge Functions.'
---
-
-
-
+
Handling signed Stripe Webhooks with Edge Functions. [View on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/stripe-webhooks/index.ts).
diff --git a/apps/docs/content/guides/functions/examples/telegram-bot.mdx b/apps/docs/content/guides/functions/examples/telegram-bot.mdx
index 331ce642981..e6176450f97 100644
--- a/apps/docs/content/guides/functions/examples/telegram-bot.mdx
+++ b/apps/docs/content/guides/functions/examples/telegram-bot.mdx
@@ -5,13 +5,6 @@ description: 'Building a Telegram Bot with Edge Functions.'
video: 'https://www.youtube.com/v/AWfE3a9J_uo'
---
-
-
-
+
Handle Telegram Bot Webhooks with the [grammY framework](https://grammy.dev/). grammY is an open source Telegram Bot Framework which makes it easy to handle and respond to incoming messages. [View on GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/telegram-bot).
diff --git a/apps/docs/content/guides/functions/examples/upstash-redis.mdx b/apps/docs/content/guides/functions/examples/upstash-redis.mdx
index 69324662c1b..1db36766aa1 100644
--- a/apps/docs/content/guides/functions/examples/upstash-redis.mdx
+++ b/apps/docs/content/guides/functions/examples/upstash-redis.mdx
@@ -3,14 +3,7 @@ title: 'Upstash Redis'
description: 'Build an Edge Functions Counter with Upstash Redis.'
---
-
-
-
+
A Redis counter example that stores a [hash](https://redis.io/commands/hincrby/) of function invocation count per region. Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/upstash-redis-counter).
diff --git a/apps/docs/content/guides/functions/kysely-postgres.mdx b/apps/docs/content/guides/functions/kysely-postgres.mdx
index 5bca2ba1c46..e9afabc7131 100644
--- a/apps/docs/content/guides/functions/kysely-postgres.mdx
+++ b/apps/docs/content/guides/functions/kysely-postgres.mdx
@@ -4,14 +4,7 @@ title: 'Type-Safe SQL with Kysely'
description: 'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.'
---
-
-
-
+
Supabase Edge Functions can [connect directly to your Postgres database](/docs/guides/functions/connect-to-postgres) to execute SQL queries. [Kysely](https://github.com/kysely-org/kysely#kysely) is a type-safe and autocompletion-friendly typescript SQL query builder.
diff --git a/apps/docs/content/guides/functions/schedule-functions.mdx b/apps/docs/content/guides/functions/schedule-functions.mdx
index c5d33138795..6da4d090149 100644
--- a/apps/docs/content/guides/functions/schedule-functions.mdx
+++ b/apps/docs/content/guides/functions/schedule-functions.mdx
@@ -4,14 +4,7 @@ title: 'Scheduling Edge Functions'
description: 'Schedule Edge Functions with pg_cron.'
---
-
-
-
+
The hosted Supabase Platform supports the [`pg_cron` extension](/docs/guides/database/extensions/pg_cron), a recurring job scheduler in Postgres.
diff --git a/apps/docs/content/guides/local-development/database-migrations.mdx b/apps/docs/content/guides/local-development/database-migrations.mdx
index d1acbc83519..6312ed41c2a 100644
--- a/apps/docs/content/guides/local-development/database-migrations.mdx
+++ b/apps/docs/content/guides/local-development/database-migrations.mdx
@@ -23,14 +23,7 @@ This page is a focused tutorial on migrations. If you want to move an existing p
Database changes are managed through "migrations." Database migrations are a common way of tracking changes to your database over time.
-
-
-
+
For this guide, we'll create a table called `employees` and see how we can make changes to it.
diff --git a/apps/docs/content/guides/platform/migrating-to-supabase/heroku.mdx b/apps/docs/content/guides/platform/migrating-to-supabase/heroku.mdx
index 99209b9e86d..03666853f82 100644
--- a/apps/docs/content/guides/platform/migrating-to-supabase/heroku.mdx
+++ b/apps/docs/content/guides/platform/migrating-to-supabase/heroku.mdx
@@ -12,14 +12,7 @@ Alternatively, use the [Heroku to Supabase migration tool](https://migrate.supab
## Quick demo
-
-
-
+
## Retrieve your Heroku database credentials [#retrieve-heroku-credentials]
diff --git a/apps/docs/content/guides/realtime/realtime-listening-flutter.mdx b/apps/docs/content/guides/realtime/realtime-listening-flutter.mdx
index cc7eb48b947..0123d5f47a4 100644
--- a/apps/docs/content/guides/realtime/realtime-listening-flutter.mdx
+++ b/apps/docs/content/guides/realtime/realtime-listening-flutter.mdx
@@ -7,11 +7,4 @@ sidebar_label: 'Videos'
The Postgres Changes extension listens for database changes and sends them to clients which enables you to receive database changes in real-time.
-
-
-
+
diff --git a/apps/docs/content/guides/realtime/realtime-user-presence.mdx b/apps/docs/content/guides/realtime/realtime-user-presence.mdx
index 8821ddfa9c1..324270cf9d3 100644
--- a/apps/docs/content/guides/realtime/realtime-user-presence.mdx
+++ b/apps/docs/content/guides/realtime/realtime-user-presence.mdx
@@ -9,11 +9,4 @@ Use Supabase Presence to display the currently online users on your Flutter appl
Displaying the list of currently online users is a common feature for real-time collaborative applications. Supabase Presence makes it easy to track users joining and leaving the session so that you can make a collaborative app.
-
-
-
+
diff --git a/apps/docs/content/guides/realtime/realtime-with-nextjs.mdx b/apps/docs/content/guides/realtime/realtime-with-nextjs.mdx
index 9aacabb0916..954cfc70093 100644
--- a/apps/docs/content/guides/realtime/realtime-with-nextjs.mdx
+++ b/apps/docs/content/guides/realtime/realtime-with-nextjs.mdx
@@ -8,11 +8,4 @@ sidebar_label: 'Videos'
In this guide, we explore the best ways to receive real-time Postgres changes with your Next.js application.
We'll show both client and server side updates, and explore which option is best.
-
-
-
+
diff --git a/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx b/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
index 6afbb77b6ac..a30fdce0212 100644
--- a/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
+++ b/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
@@ -93,13 +93,7 @@ const changes = supabase
Postgres Changes require minimal setup, but have some [limitations](/docs/guides/realtime/postgres-changes#limitations) as your application scales. We recommend using Broadcast for most use cases.
-
-
-
+
### Enable Postgres Changes
diff --git a/apps/docs/content/guides/self-hosting/docker.mdx b/apps/docs/content/guides/self-hosting/docker.mdx
index 94ceab3be31..5c1b8dc142f 100644
--- a/apps/docs/content/guides/self-hosting/docker.mdx
+++ b/apps/docs/content/guides/self-hosting/docker.mdx
@@ -609,14 +609,7 @@ Some suggested systems include:
## Demo
-
-
-
+
1. The VPS instance is a DigitalOcean droplet. (For server requirements refer to [System requirements](#system-requirements))
2. To access Studio, use the IPv4 IP address of your Droplet.
diff --git a/apps/docs/content/guides/storage/quickstart.mdx b/apps/docs/content/guides/storage/quickstart.mdx
index 7e3664283d1..e3a39dc60f0 100644
--- a/apps/docs/content/guides/storage/quickstart.mdx
+++ b/apps/docs/content/guides/storage/quickstart.mdx
@@ -314,11 +314,4 @@ create policy "Public Access"
{/* Finish with a video. This also appears in the Sidebar via the "tocVideo" metadata */}
-
-
-
+
diff --git a/apps/docs/content/guides/storage/security/access-control.mdx b/apps/docs/content/guides/storage/security/access-control.mdx
index f56c3c5ae7b..c3ec9d7c99b 100644
--- a/apps/docs/content/guides/storage/security/access-control.mdx
+++ b/apps/docs/content/guides/storage/security/access-control.mdx
@@ -102,14 +102,7 @@ create policy "Avatar images are publicly accessible." on storage.objects
{/* Finish with a video. This also appears in the Sidebar via the "tocVideo" metadata */}
-
-
-
+
## Bypassing access controls
diff --git a/apps/docs/content/guides/storage/serving/image-transformations.mdx b/apps/docs/content/guides/storage/serving/image-transformations.mdx
index 59362f6d45f..d7372e02d7a 100644
--- a/apps/docs/content/guides/storage/serving/image-transformations.mdx
+++ b/apps/docs/content/guides/storage/serving/image-transformations.mdx
@@ -801,11 +801,4 @@ IMGPROXY_URL=yourinternalimgproxyurl.internal.com
{/* Finish with a video. This also appears in the Sidebar via the "tocVideo" metadata */}
-
-
-
+
diff --git a/apps/docs/features/docs/MdxBase.shared.tsx b/apps/docs/features/docs/MdxBase.shared.tsx
index 592f8826926..ee38ff457ab 100644
--- a/apps/docs/features/docs/MdxBase.shared.tsx
+++ b/apps/docs/features/docs/MdxBase.shared.tsx
@@ -30,6 +30,7 @@ import { Accordion, AccordionItem } from '~/features/ui/Accordion'
import { CodeBlock } from '~/features/ui/CodeBlock/CodeBlock'
import { ShowUntil } from '~/features/ui/ShowUntil'
import { TabPanel, Tabs } from '~/features/ui/Tabs'
+import { YouTube } from '~/features/ui/YouTube'
import { ArrowDown, Check, X } from 'lucide-react'
import Link from 'next/link'
import { type ComponentPropsWithoutRef } from 'react'
@@ -115,6 +116,7 @@ const components = {
TabPanel,
TerraformProviderSchema,
WrapperDashboardIntegration,
+ YouTube,
a: MdxAnchor,
h2: (props: ComponentPropsWithoutRef<'h2'>) => (
diff --git a/apps/docs/features/ui/YouTube.tsx b/apps/docs/features/ui/YouTube.tsx
new file mode 100644
index 00000000000..773538b2801
--- /dev/null
+++ b/apps/docs/features/ui/YouTube.tsx
@@ -0,0 +1,20 @@
+import { cn } from 'ui'
+
+export const YouTube = ({
+ id,
+ title,
+ className,
+}: {
+ id: string
+ title: string
+ className?: string
+}) => (
+
+
+
+)