dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 01:15:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Switch tabs using query param (#17626)

Browse Source 
* feat: switch tabs using url hash

* feat: switch tabs using query param
This commit is contained in:
Greg Richardson authored and GitHub committed 2023-09-22 11:29:25 -06:00
1 parent 81b76e2089
commit 98c4103463
90 files changed
+385 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/MDX/kotlin_project_setup.mdx
+1
View File
@@ -21,6 +21,7 @@ Now we are going to set up the database schema. You can just copy/paste the SQL
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
{/* <TabPanel id="dashboard" label="Dashboard">
apps/docs/components/MDX/project_setup.mdx
+1
View File
@@ -21,6 +21,7 @@ Now we are going to set up the database schema. We can use the "User Management
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/components/reference/ApiOperationSection.tsx
+1
View File
@@ -92,6 +92,7 @@ const ApiOperationSection = (props) => {
size="small"
type="underlined"
defaultActiveId={operation.responseList[0].responseCode}
queryGroup="response-status"
>
{operation.responseList.map((response: any) => (
<Tabs.Panel id={response.responseCode} label={response.responseCode}>
apps/docs/components/reference/CLICommandSection.tsx
+1
View File
@@ -138,6 +138,7 @@ const CliCommandSection = (props) => {
size="tiny"
type="rounded-pills"
scrollable
queryGroup="example"
>
{command.examples ? (
command.examples.map((example) => {
apps/docs/components/reference/RefFunctionSection.tsx
+1
View File
@@ -111,6 +111,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
size="tiny"
type="rounded-pills"
scrollable
queryGroup="example"
>
{item.examples &&
item.examples.map((example, exampleIndex) => {
apps/docs/docs/ref/csharp/installing.mdx
+3 -1
View File
@@ -19,7 +19,9 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
<Tabs
size="small"
type="underlined"
defaultActiveId="csharp">
defaultActiveId="csharp"
queryGroup="language"
>
<TabPanel id="csharp" label="Terminal">
```sh Terminal
apps/docs/docs/ref/dart/installing.mdx
+1
View File
@@ -20,6 +20,7 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
size="small"
type="underlined"
defaultActiveId="flutter"
queryGroup="framework"
>
<TabPanel id="flutter" label="Flutter">
apps/docs/docs/ref/dart/v0/upgrade-guide.mdx
+17
View File
@@ -38,6 +38,7 @@ The way supabase-flutter throws error has changed in v1. In v0, errors were retu
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -84,6 +85,7 @@ In v0, `SupabaseAuthState` and `SupabaseAuthRequiredState` were required to hand
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -136,6 +138,7 @@ await Supabase.initialize(
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -183,6 +186,7 @@ authSubscription.cancel();
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -216,6 +220,7 @@ await supabase.auth.signInWithPassword(email: email, password: password);
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -249,6 +254,7 @@ await supabase.auth.signInWithOtp(email: email);
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -291,6 +297,7 @@ await supabase.auth.signInWithOAuth(
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -330,6 +337,7 @@ await supabase.auth.signInWithPassword(
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -372,6 +380,7 @@ await supabase.auth.verifyOTP(
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -412,6 +421,7 @@ await supabase.auth.resetPasswordForEmail(
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -445,6 +455,7 @@ final Session? session = supabase.auth.currentSession;
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -478,6 +489,7 @@ final User? user = supabase.auth.currentUser;
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -523,6 +535,7 @@ Also, calling `.execute()` at the end of the query was a requirement in v0, but
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -560,6 +573,7 @@ await supabase.from('my_table').insert(data);
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -600,6 +614,7 @@ final insertedData = await supabase.from('my_table').insert(data).select();
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -638,6 +653,7 @@ supabase.from('my_table')
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
@@ -683,6 +699,7 @@ channel.on(
size="small"
type="underlined"
defaultActiveId="0.x"
queryGroup="version"
>
<TabPanel id="0.x" label="Before">
apps/docs/docs/ref/javascript/installing.mdx
+1
View File
@@ -20,6 +20,7 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
size="small"
type="underlined"
defaultActiveId="npm"
queryGroup="platform"
>
<TabPanel id="npm" label="npm">
apps/docs/docs/ref/javascript/v1/upgrade-guide.mdx
+17
View File
@@ -38,6 +38,7 @@ _Optionally_ if you are using custom configuration with `createClient` then foll
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
@@ -87,6 +88,7 @@ The signIn() method has been deprecated in favor of more explicit method signatu
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -124,6 +126,7 @@ const {
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -159,6 +162,7 @@ const { error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -193,6 +197,7 @@ const { error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -228,6 +233,7 @@ const { error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -269,6 +275,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -305,6 +312,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
@@ -340,6 +348,7 @@ const {
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
@@ -376,6 +385,7 @@ const { user } = session
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -413,6 +423,7 @@ const {
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
@@ -470,6 +481,7 @@ Previously, these methods return inserted/updated/deleted rows by default (which
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -506,6 +518,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -544,6 +557,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -580,6 +594,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
```ts
@@ -620,6 +635,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
@@ -661,6 +677,7 @@ const userListener = supabase
size="small"
type="underlined"
defaultActiveId="1.0x"
queryGroup="version"
>
<TabPanel id="1.0x" label="Before">
apps/docs/docs/ref/kotlin/installing.mdx
+21 -7
View File
@@ -21,7 +21,9 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
@@ -56,7 +58,9 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
@@ -112,7 +116,9 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
@@ -145,7 +151,9 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
@@ -197,7 +205,9 @@ By default, [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serializat
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
@@ -272,7 +282,9 @@ By default, [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serializat
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
@@ -319,7 +331,9 @@ By default, [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serializat
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
defaultActiveId="kotlin"
queryGroup="build-file"
>
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
apps/docs/docs/reference/csharp/initializing.mdx
+3 -1
View File
@@ -20,7 +20,9 @@ admin panel and pass it into your client initialization function.
<Tabs
size="small"
type="underlined"
defaultActiveId="csharp-init-standard">
defaultActiveId="csharp-init-standard"
queryGroup="init-method"
>
<TabPanel id="csharp-init-standard" label="Standard">
```csharp
apps/docs/docs/reference/csharp/installing.mdx
+4 -2
View File
@@ -19,8 +19,10 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
<Tabs
size="small"
type="underlined"
defaultActiveId="csharp">
<TabPanel id="csharp" label="Terminal">
defaultActiveId="csharp"
queryGroup="install-method"
>
<TabPanel id="terminal" label="Terminal">
```sh Terminal
dotnet add package supabase-csharp
apps/docs/docs/reference/javascript/installing.mdx
+1
View File
@@ -12,6 +12,7 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
size="small"
type="underlined"
defaultActiveId="npm"
queryGroup="package-manager"
>
<TabPanel id="npm" label="npm">
apps/docs/docs/reference/postgres/changing-timezones.mdx
+12 -4
View File
@@ -10,7 +10,9 @@ Data types.
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -34,7 +36,9 @@ set timezone to 'America/New_York';
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -59,7 +63,9 @@ Get a full list of timezones supported by your database. This will return the fo
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -80,7 +86,9 @@ Use `ilike` (case insensitive search) to find specific timezones.
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/columns.mdx
+9 -3
View File
@@ -10,7 +10,9 @@ Creating columns.
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -33,7 +35,9 @@ create table table_name (
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -54,7 +58,9 @@ create table table_name (
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/connection-strings.mdx
+15 -5
View File
@@ -10,7 +10,9 @@ There are various ways to connect to your database, depending on the configurati
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -40,7 +42,9 @@ If you're using a default setup, your postgres connection string will likely be
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -61,7 +65,9 @@ See full [documentation](http://jdbc.postgresql.org/documentation/head/connect.h
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -80,7 +86,9 @@ See full [documentation](http://npgsql.projects.postgresql.org/docs/manual/UserM
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -99,7 +107,9 @@ See full [documentation](http://php.net/manual/en/book.pgsql.php).
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/database-passwords.mdx
+3 -1
View File
@@ -14,7 +14,9 @@ Manage the passwords of your database users using any super user.
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/database-users.mdx
+3 -1
View File
@@ -14,7 +14,9 @@ Users and Roles are almost interchangeable.
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/publications.mdx
+24 -8
View File
@@ -17,7 +17,9 @@ This publication will contain all changes to all tables.
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -35,7 +37,9 @@ for all tables;
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -53,7 +57,9 @@ for table table_one, table_two;
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -71,7 +77,9 @@ add table table_name;
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -90,7 +98,9 @@ with (publish = 'insert');
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -109,7 +119,9 @@ with (publish = 'update');
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -128,7 +140,9 @@ with (publish = 'delete');
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -147,7 +161,9 @@ If you are planning to re-create a publication, it's best to do it in a transact
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/schemas.mdx
+12 -4
View File
@@ -13,7 +13,9 @@ For example, you might want to use a `public` schema for user-facing data, and a
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -38,7 +40,9 @@ create schema schema_name;
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -55,7 +59,9 @@ create schema schema_name;
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -75,7 +81,9 @@ As a result, you will always need to use double-quotes when referencing your sch
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/docs/reference/postgres/tables.mdx
+15 -5
View File
@@ -13,7 +13,9 @@ Tables are similar to excel spreadsheets. They contain columns & rows of data. T
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -49,7 +51,9 @@ create table schema_name.table_name (
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -77,7 +81,9 @@ create table schema_name.table_name (
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -99,7 +105,9 @@ create table table_name (
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
@@ -118,7 +126,9 @@ alter table table_name
<Tabs
defaultActiveId="sql"
groupId="reference/postgres"
values={[{ label: 'SQL', value: 'sql' }]}>
values={[{ label: 'SQL', value: 'sql' }]}
queryGroup="database-method"
>
<TabsPanel id="sql" label="sql">
apps/docs/pages/guides/ai/choosing-compute-addon.mdx
+6
View File
@@ -30,6 +30,7 @@ This benchmark uses the dbpedia-entities-openai-1M dataset containing 1,000,000
size="small"
type="underlined"
defaultActiveId="gte384"
queryGroup="benchmark"
>
<TabPanel id="gte384" label="gte-small-384">
@@ -60,6 +61,7 @@ This benchmark uses the [dbpedia-entities-openai-1M](https://huggingface.co/data
size="small"
type="underlined"
defaultActiveId="openai1536"
queryGroup="benchmark"
>
<TabPanel id="openai1536" label="OpenAI-1536">
@@ -113,6 +115,7 @@ This benchmark uses the dbpedia-entities-openai-1M dataset containing 1,000,000
size="small"
type="underlined"
defaultActiveId="gte384_98"
queryGroup="benchmark"
>
<TabPanel id="gte384_98" label="gte-small-384, accuracy=.98">
@@ -157,6 +160,7 @@ This benchmark uses the [gist-960-angular](http://corpus-texmex.irisa.fr/) datas
size="small"
type="underlined"
defaultActiveId="gist960"
queryGroup="benchmark"
>
<TabPanel id="gist960" label="gist-960, probes = 10">
@@ -185,6 +189,7 @@ This benchmark uses the [dbpedia-entities-openai-1M](https://huggingface.co/data
size="small"
type="underlined"
defaultActiveId="dbpedia1536"
queryGroup="benchmark"
>
<TabPanel id="dbpedia1536" label="OpenAI-1536, probes = 10">
@@ -260,6 +265,7 @@ You can increase the Requests per Second by increasing `m` and `ef_construction`
size="small"
type="underlined"
defaultActiveId="hnsw"
queryGroup="index-type"
>
<TabPanel id="hnsw" label="HNSW">
apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx
+1
View File
@@ -35,6 +35,7 @@ Let's prepare the database schema. We can use the "OpenAI Vector Search" quickst
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/ai/langchain.mdx
+1
View File
@@ -21,6 +21,7 @@ Prepare you database with the relevant tables:
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/ai/vector-columns.mdx
+1
View File
@@ -20,6 +20,7 @@ Vectors in Supabase are enabled via [pgvector](https://github.com/pgvector/pgvec
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/api/creating-routes.mdx
+4
View File
@@ -19,6 +19,7 @@ This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATC
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -86,6 +87,7 @@ using the API URL (`SUPABASE_URL`) and Key (`SUPABASE_ANON_KEY`) we provided:
size="small"
type="underlined"
defaultActiveId="javascript"
queryGroup="language"
>
<TabPanel id="javascript" label="Javascript">
@@ -127,6 +129,7 @@ You can use any GraphQL client with the Supabase GraphQL API. For our GraphQL ex
size="small"
type="underlined"
defaultActiveId="javascript"
queryGroup="language"
>
<TabPanel id="javascript" label="Javascript">
@@ -195,6 +198,7 @@ By default Realtime is disabled on your database. Let's turn on Realtime for the
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/api/joins-and-nesting.mdx
+3
View File
@@ -17,6 +17,7 @@ Let's use an example database that stores `countries` and `cities`:
size="small"
type="underlined"
defaultActiveId="table"
queryGroup="output-format"
>
<TabPanel id="table" label="Tables">
@@ -76,6 +77,7 @@ The APIs will automatically detect relationships based on the foreign keys:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -155,6 +157,7 @@ In these cases you don't need to explicitly define the joining table (members).
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/api/quickstart.mdx
+3
View File
@@ -29,6 +29,7 @@ We'll create a database table called `todos` for storing tasks. This creates a c
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -148,6 +149,7 @@ We provide a number of [Client Libraries](https://github.com/supabase/supabase#c
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -181,6 +183,7 @@ Every table can be accessed through the GraphQL API by switching `/rest/v1` with
size="small"
type="underlined"
defaultActiveId="urql"
queryGroup="library"
>
<TabPanel id="urql" label="urql">
apps/docs/pages/guides/api/securing-your-api.mdx
+1
View File
@@ -19,6 +19,7 @@ To enable RLS on any table:
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/api/using-custom-schemas.mdx
+1
View File
@@ -28,6 +28,7 @@ Now you can access these schemas from Serverless APIs:
size="small"
type="underlined"
defaultActiveId="javascript"
queryGroup="language"
>
<TabPanel id="javascript" label="JavaScript">
apps/docs/pages/guides/auth/auth-captcha.mdx
+2
View File
@@ -25,6 +25,7 @@ Supabase provides you with the option of adding captcha to your sign-in, sign-up
size="small"
type="underlined"
defaultActiveId="hcaptcha-1"
queryGroup="captcha-method"
>
<TabPanel id="hcaptcha-1" label="HCaptcha">
Go to the [hCaptcha](https://www.hcaptcha.com/) website and sign up for an account. On the welcome page, copy the **Sitekey** and **Secret key**.
@@ -66,6 +67,7 @@ The frontend requires some changes to provide the captcha on-screen for the user
size="small"
type="underlined"
defaultActiveId="hcaptcha-2"
queryGroup="captcha-method"
>
<TabPanel id="hcaptcha-2" label="HCaptcha">
apps/docs/pages/guides/auth/auth-email.mdx
+2
View File
@@ -32,6 +32,7 @@ See the [self-hosting docs](/docs/guides/hosting/overview#configuration) for det
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -68,6 +69,7 @@ Future<void> signInWithEmail() async {
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
+8
View File
@@ -45,6 +45,7 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -114,6 +115,7 @@ The `Code Exchange` API route is required for the [server-side auth flow](https:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -303,6 +305,7 @@ You can use the server supabase client to run [row level security](/docs/learn/a
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -406,6 +409,7 @@ When using third-party auth providers, sessions are initiated with an additional
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -521,6 +525,7 @@ Create a server supabase client to retrieve the logged in user's session:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -666,6 +671,7 @@ Use `createPagesServerClient` within your `NextApiHandler`:
size="small"
type="underlined"
defaultActiveId="before"
queryGroup="migration-side"
>
<TabPanel id="before" label="Before">
@@ -720,6 +726,7 @@ Use `createPagesServerClient` within `getServerSideProps`:
size="small"
type="underlined"
defaultActiveId="before"
queryGroup="migration-side"
>
<TabPanel id="before" label="Before">
@@ -779,6 +786,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
size="small"
type="underlined"
defaultActiveId="before"
queryGroup="migration-side"
>
<TabPanel id="before" label="Before">
apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+15
View File
@@ -88,6 +88,7 @@ Next.js [Middleware](https://nextjs.org/docs/app/building-your-application/routi
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -152,6 +153,7 @@ To make this work with Next.js, we create a callback Route Handler that performs
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -245,6 +247,7 @@ Client Components can be used to trigger the authentication process from event h
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -382,6 +385,7 @@ The combination of [Server Components](https://nextjs.org/docs/getting-started/r
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -469,6 +473,7 @@ Returning a `301` status redirects from a POST to a GET route
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -550,6 +555,7 @@ Returning a `301` status redirects from a POST to a GET route
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -613,6 +619,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -684,6 +691,7 @@ This allows for the Supabase client to be easily instantiated in the correct con
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -788,6 +796,7 @@ In order to use Supabase in Server Components, you need to have implemented the
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -862,6 +871,7 @@ Next.js Server Actions are currently in `alpha` so may change without notice.
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -948,6 +958,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -1013,6 +1024,7 @@ A route can be configured to use the Edge Runtime by exporting a `runtime` varia
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -1076,6 +1088,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -1147,6 +1160,7 @@ Server Components and Route Handlers are static by default - data is fetched onc
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -1200,6 +1214,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/auth/auth-helpers/remix.mdx
+8
View File
@@ -48,6 +48,7 @@ The `Code Exchange` route is required for the [server-side auth flow](https://su
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -128,6 +129,7 @@ Loader functions run on the server immediately before the component is rendered.
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -203,6 +205,7 @@ Action functions run on the server and respond to HTTP requests to a route, othe
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -303,6 +306,7 @@ Since our environment variables are not available client-side, we need to plumb
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -391,6 +395,7 @@ Let's pipe that through from our loader.
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -470,6 +475,7 @@ And then use the revalidator, inside the `onAuthStateChange` hook.
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -543,6 +549,7 @@ Now we can use our outlet context to access our single instance of Supabase and
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -630,6 +637,7 @@ export default function Login() {
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+24
View File
@@ -36,6 +36,7 @@ PUBLIC_SUPABASE_ANON_KEY=your-anon-key
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -130,6 +131,7 @@ The `Code Exchange` route is required for the [server-side auth flow](https://su
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -218,6 +220,7 @@ To make the session available across the UI, including pages and layouts, it is
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -254,6 +257,7 @@ To utilize Supabase in shared load functions and within pages, it is essential t
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -411,6 +415,7 @@ We can access the supabase instance in our `+page.svelte` file through the data
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -581,6 +586,7 @@ protect multiple routes at once.
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -786,6 +792,7 @@ In version 0.9 we now setup our Supabase client for the server inside of a `hook
size="small"
type="underlined"
defaultActiveId="older-0.8"
queryGroup="migration-version"
>
<TabPanel id="older-0.8" label="0.8.x">
@@ -848,6 +855,7 @@ In order to use the Supabase library in your client code you will need to setup
size="small"
type="underlined"
defaultActiveId="older-0.8"
queryGroup="migration-version"
>
<TabPanel id="older-0.8" label="0.8.x">
@@ -944,6 +952,7 @@ Since version 0.9 relies on `hooks.server.ts` to setup our client, we no longer
size="small"
type="underlined"
defaultActiveId="older-0-8"
queryGroup="migration-version"
>
<TabPanel id="older-0-8" label="0.8.x">
@@ -1002,6 +1011,7 @@ declare global {
size="small"
type="underlined"
defaultActiveId="older-0-8"
queryGroup="migration-version"
>
<TabPanel id="older-0-8" label="0.8.x">
@@ -1084,6 +1094,7 @@ export const load: PageLoad = async ({ parent }) => {
size="small"
type="underlined"
defaultActiveId="older-0-8"
queryGroup="migration-version"
>
<TabPanel id="older-0-8" label="0.8.x">
@@ -1136,6 +1147,7 @@ export const GET: RequestHandler = async ({ locals: { supabase, getSession } })
size="small"
type="underlined"
defaultActiveId="older-0.7"
queryGroup="migration-version"
>
<TabPanel id="older-0.7" label="0.7.x">
@@ -1184,6 +1196,7 @@ export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_S
size="small"
type="underlined"
defaultActiveId="older-0.7"
queryGroup="migration-version"
>
<TabPanel id="older-0.7" label="0.7.x">
@@ -1240,6 +1253,7 @@ export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_S
size="small"
type="underlined"
defaultActiveId="older-0-7"
queryGroup="migration-version"
>
<TabPanel id="older-0-7" label="0.7.x">
@@ -1287,6 +1301,7 @@ import '$lib/db'
size="small"
type="underlined"
defaultActiveId="older-0-7"
queryGroup="migration-version"
>
<TabPanel id="older-0-7" label="0.7.x">
@@ -1344,6 +1359,7 @@ declare namespace App {
size="small"
type="underlined"
defaultActiveId="older-0-7"
queryGroup="migration-version"
>
<TabPanel id="older-0-7" label="0.7.x">
@@ -1422,6 +1438,7 @@ export const load: PageLoad = async (event) => {
size="small"
type="underlined"
defaultActiveId="older-0-7"
queryGroup="migration-version"
>
<TabPanel id="older-0-7" label="0.7.x">
@@ -1483,6 +1500,7 @@ The environment variable prefix is now `PUBLIC_` instead of `VITE_` (e.g., `VITE
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
@@ -1532,6 +1550,7 @@ setupSupabaseHelpers({
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
@@ -1580,6 +1599,7 @@ The `@supabase/auth-helpers-svelte` library is no longer required as the `@supab
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
@@ -1634,6 +1654,7 @@ export const handle = sequence(auth(), yourHandler)
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
@@ -1691,6 +1712,7 @@ declare namespace App {
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
@@ -1733,6 +1755,7 @@ declare namespace App {
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
@@ -1809,6 +1832,7 @@ export const load: PageLoad = withAuth(async ({ session, getSupabaseClient }) =>
size="small"
type="underlined"
defaultActiveId="older"
queryGroup="migration-version"
>
<TabPanel id="older" label="0.6.11 and below">
apps/docs/pages/guides/auth/auth-magic-link.mdx
+2
View File
@@ -33,6 +33,7 @@ When making use of Magic Links with [the PKCE Flow](https://supabase.com/blog/su
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
When your user signs in, call [signInWithOtp()](/docs/reference/javascript/auth-signinwithotp) with their email address:
@@ -67,6 +68,7 @@ Future<void> signInWithEmail() async {
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
apps/docs/pages/guides/auth/phone-login/messagebird.mdx
+5
View File
@@ -83,6 +83,7 @@ Using supabase-js on the client you'll want to use the same `signUp` method that
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -118,6 +119,7 @@ You should present a form to the user so they can input the 6 digit pin, then se
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -165,6 +167,7 @@ Also now that the mobile has been verified, the user can use the number and pass
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -202,6 +205,7 @@ In javascript we can use the `signIn` method with a single parameter: `phone`
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -233,6 +237,7 @@ The second step is the same as the previous section, you need to collect the 6-d
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/auth/phone-login/twilio.mdx
+5
View File
@@ -129,6 +129,7 @@ Using supabase-js on the client you'll want to use the same `signUp` method that
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -164,6 +165,7 @@ You should present a form to the user so they can input the 6 digit pin, then se
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -212,6 +214,7 @@ Also now that the mobile has been verified, the user can use the number and pass
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -249,6 +252,7 @@ In javascript we can use the `signIn` method with a single parameter: `phone`
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -280,6 +284,7 @@ The second step is the same as the previous section, you need to collect the 6-d
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/auth/phone-login/vonage.mdx
+5
View File
@@ -76,6 +76,7 @@ Using supabase-js on the client you'll want to use the same `signUp` method that
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -111,6 +112,7 @@ You should present a form to the user so they can input the 6 digit pin, then se
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -158,6 +160,7 @@ Also now that the mobile has been verified, the user can use the number and pass
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -195,6 +198,7 @@ In javascript we can use the `signIn` method with a single parameter: `phone`
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -226,6 +230,7 @@ The second step is the same as the previous section, you need to collect the 6-d
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx
+4 -2
View File
@@ -12,7 +12,7 @@ export const meta = {
The Auth Helpers will assist you in implementing user authentication within your server-side rendering (SSR) framework.
<Tabs scrollable size="small" type="underlined" defaultActiveId="nextjs">
<Tabs scrollable size="small" type="underlined" defaultActiveId="nextjs" queryGroup="framework">
<TabPanel id="nextjs" label="NextJS">
@@ -36,7 +36,7 @@ npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
Create an `.env.local` file in your project root directory. You can get your `SITE_URL` and `ANON_KEY` from inside of the [dashboard](https://supabase.com/dashboard/project/_/settings/api).
<Tabs scrollable size="small" type="underlined" defaultActiveId="nextjs">
<Tabs scrollable size="small" type="underlined" defaultActiveId="nextjs" queryGroup="framework">
<TabPanel id="nextjs" label="NextJS">
@@ -65,6 +65,7 @@ When using the Supabase client on the server, you must perform extra steps to en
size="small"
type="underlined"
defaultActiveId="nextjs"
queryGroup="framework"
>
<TabPanel id="nextjs" label="NextJS">
Next.js Server Components allow you to read a cookie but not write back to it. Middleware on the other hand allow you to both read and write to cookies.
@@ -128,6 +129,7 @@ In order to use the updated email links we will need to setup a endpoint for ver
size="small"
type="underlined"
defaultActiveId="nextjs"
queryGroup="framework"
>
<TabPanel id="nextjs" label="NextJS">
Create a new file at `app/auth/confirm/route.js` and populate with the following:
apps/docs/pages/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx
+4
View File
@@ -17,6 +17,7 @@ The Auth Helpers assist with user authentication within server-side rendering (S
size="small"
type="underlined"
defaultActiveId="nextjs"
queryGroup="framework"
>
<TabPanel id="nextjs" label="NextJS">
@@ -43,6 +44,7 @@ Create an `.env.local` file in your project root directory. You can get your `SI
size="small"
type="underlined"
defaultActiveId="nextjs"
queryGroup="framework"
>
<TabPanel id="nextjs" label="NextJS">
@@ -71,6 +73,7 @@ For SSR, the Supabase client requires extra steps to ensure the user's auth sess
size="small"
type="underlined"
defaultActiveId="nextjs"
queryGroup="framework"
>
<TabPanel id="nextjs" label="NextJS">
Next.js Server Components allow you to read a cookie but not write back to it. Middleware on the other hand allow you to both read and write to cookies.
@@ -134,6 +137,7 @@ In order to use OAuth we will need to setup a endpoint for the `code` exchange,
size="small"
type="underlined"
defaultActiveId="nextjs"
queryGroup="framework"
>
<TabPanel id="nextjs" label="NextJS">
Create a new file at `app/auth/callback/route.js` and populate with the following:
apps/docs/pages/guides/cli/getting-started.mdx
+2
View File
@@ -19,6 +19,7 @@ The Supabase CLI provides tools to develop your project locally, deploy to the S
size="small"
type="underlined"
defaultActiveId="npm"
queryGroup="platform"
>
<TabPanel id="npm" label="npm">
@@ -86,6 +87,7 @@ When a new [version](https://github.com/supabase/cli/releases) is released, you
size="small"
type="underlined"
defaultActiveId="npm"
queryGroup="platform"
>
<TabPanel id="npm" label="npm">
apps/docs/pages/guides/cli/local-development.mdx
+1
View File
@@ -95,6 +95,7 @@ You can now visit your local Dashboard at [http://localhost:54323](http://localh
size="small"
type="underlined"
defaultActiveId="postgres"
queryGroup="access-method"
>
<TabPanel id="postgres" label="Postgres">
apps/docs/pages/guides/cli/managing-environments.mdx
+1
View File
@@ -185,6 +185,7 @@ Create the following files inside the `.github/workflows` directory:
size="small"
type="underlined"
defaultActiveId="ci"
queryGroup="environment"
>
<TabPanel id="ci" label="ci.yaml">
apps/docs/pages/guides/database/arrays.mdx
+4
View File
@@ -17,6 +17,7 @@ Create a test table with a text array (an array of strings):
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -46,6 +47,7 @@ create table arraytest (
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -82,6 +84,7 @@ const { data, error } = await supabase
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -119,6 +122,7 @@ PostgreSQL uses 1-based indexing (e.g., `textarray[1]` is the first item in the
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/extensions.mdx
+1
View File
@@ -16,6 +16,7 @@ Supabase has pre-installed some of the most useful open source extensions.
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/http.mdx
+1
View File
@@ -42,6 +42,7 @@ You can use the `http` extension to make these network requests from Postgres.
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/hypopg.mdx
+1
View File
@@ -17,6 +17,7 @@ The motivation for HypoPG is to allow users to quickly search for an index to im
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_cron.mdx
+1
View File
@@ -18,6 +18,7 @@ The `pg_cron` extension is a simple cron-based job scheduler for PostgreSQL that
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_graphql.mdx
+1
View File
@@ -21,6 +21,7 @@ For more information about how the SQL schema is reflected into a GraphQL schema
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_hashids.mdx
+1
View File
@@ -15,6 +15,7 @@ export const meta = {
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_jsonschema.mdx
+1
View File
@@ -15,6 +15,7 @@ export const meta = {
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_net.mdx
+1
View File
@@ -23,6 +23,7 @@ It differs from the `http` extension in that it is asynchronous by default. This
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_repack.mdx
+1
View File
@@ -33,6 +33,7 @@ Get started with pg_repack by enabling the extension in the Supabase Dashboard.
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_stat_monitor.mdx
+1
View File
@@ -21,6 +21,7 @@ For more information on query optimization, check out the [query performance gui
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pg_stat_statements.mdx
+1
View File
@@ -31,6 +31,7 @@ For more information on query optimization, check out the [query performance gui
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgaudit.mdx
+1
View File
@@ -17,6 +17,7 @@ PGAudit grants fine grain control over which statements and objects are emitted
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgjwt.mdx
+1
View File
@@ -15,6 +15,7 @@ The [pgjwt](https://github.com/michelp/pgjwt) (PostgreSQL JSON Web Token) extens
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgroonga.mdx
+1
View File
@@ -15,6 +15,7 @@ export const meta = {
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgrouting.mdx
+1
View File
@@ -29,6 +29,7 @@ The core functionality of `pgRouting` is a set of path finding algorithms includ
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgsodium.mdx
+1
View File
@@ -60,6 +60,7 @@ It also enables some Postgres specific features including:
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgtap.mdx
+1
View File
@@ -22,6 +22,7 @@ Let's cover some basic concepts:
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/pgvector.mdx
+1
View File
@@ -30,6 +30,7 @@ This is particularly useful if you're building on top of OpenAI's [GPT-3](https:
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/plpgsql_check.mdx
+1
View File
@@ -15,6 +15,7 @@ export const meta = {
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/plv8.mdx
+2
View File
@@ -22,6 +22,7 @@ It can be used for database functions, triggers, queries and more.
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -69,6 +70,7 @@ You can call `plv8` functions like any other Postgres function:
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/extensions/postgis.mdx
+4
View File
@@ -23,6 +23,7 @@ You can get started with PostGIS by enabling the PostGIS extension in your Supab
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -75,6 +76,7 @@ You can insert geographical data through SQL or through our API.
size="small"
type="underlined"
defaultActiveId="data"
queryGroup="language"
>
<TabPanel id="data" label="Data">
@@ -173,6 +175,7 @@ You can call this function from your client using `rpc()` like this:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -251,6 +254,7 @@ You can call this function from your client using `rpc()` like this:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/database/extensions/rum.mdx
+1
View File
@@ -36,6 +36,7 @@ You can get started with rum by enabling the extension in your Supabase dashboar
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/timescaledb.mdx
+1
View File
@@ -17,6 +17,7 @@ export const meta = {
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/uuid-ossp.mdx
+1
View File
@@ -20,6 +20,7 @@ This makes them particularly well suited as Primary Keys. It is occasionally ref
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
+1
View File
@@ -33,6 +33,7 @@ from
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/database/full-text-search.mdx
+12
View File
@@ -28,6 +28,7 @@ For this guide we'll use the following example data:
size="small"
type="underlined"
defaultActiveId="data"
queryGroup="example-view"
>
<TabPanel id="data" label="Data">
@@ -108,6 +109,7 @@ Take the following example:
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -145,6 +147,7 @@ example above:
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -185,6 +188,7 @@ To find all `books` where the `description` contain the word `big`:
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -237,6 +241,7 @@ To find all `books` where `description` or `title` contain the word `little`:
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -302,6 +307,7 @@ To find all `books` where `description` contains BOTH of the words `little` and
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -354,6 +360,7 @@ To find all `books` where `description` contain ANY of the words `little` or `bi
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -418,6 +425,7 @@ to ensure that the index is updated any time the values in the `title` and `desc
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="example-view"
>
<TabPanel id="sql" label="SQL">
@@ -456,6 +464,7 @@ Now that we've created and populated our index, we can search it using the same
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -510,6 +519,7 @@ For example, to find the phrase `big dreams`, where the a match for "big" is fol
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -552,6 +562,7 @@ We can also use the `<->` to find words within a certain distance of eachother.
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -597,6 +608,7 @@ For example, to find records that have the word `big` but not `little`:
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/functions.mdx
+4
View File
@@ -69,6 +69,7 @@ After the Function is created, we have several ways of "executing" the function
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -109,6 +110,7 @@ For example, if we had a database with some Star Wars data inside:
size="small"
type="underlined"
defaultActiveId="data"
queryGroup="example-view"
>
<TabPanel id="data" label="Data">
@@ -181,6 +183,7 @@ Because this function returns a table set, we can also apply filters and selecto
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -237,6 +240,7 @@ Once again, you can execute this function either inside your database using a `s
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/json.mdx
+3
View File
@@ -31,6 +31,7 @@ Don't go overboard with `json/jsonb` columns. They are a useful tool, but most o
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -75,6 +76,7 @@ You can insert JSON data in the same way that you insert any other data. The dat
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -191,6 +193,7 @@ Postgres support a range of [JSON functions and operators](https://www.postgresq
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/managing-timezones.mdx
+3
View File
@@ -17,6 +17,7 @@ This is because it makes it much easier to calculate differences between timezon
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -42,6 +43,7 @@ Get a full list of timezones supported by your database. This will return the fo
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -63,6 +65,7 @@ Use `ilike` (case insensitive search) to find specific timezones.
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/postgres/configuration.mdx
+3
View File
@@ -47,6 +47,7 @@ This is because it makes it much easier to calculate differences between timezon
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -72,6 +73,7 @@ Get a full list of timezones supported by your database. This will return the fo
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
@@ -93,6 +95,7 @@ Use `ilike` (case insensitive search) to find specific timezones.
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/database/tables.mdx
+3
View File
@@ -38,6 +38,7 @@ and run the SQL queries yourself.
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -180,6 +181,7 @@ Use the "Bulk Loading" instructions if you are loading large data sets.
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="language"
>
<TabPanel id="sql" label="SQL">
@@ -291,6 +293,7 @@ For example if you had the following situations:
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
+1
View File
@@ -59,6 +59,7 @@ That is it on Supabase's end and the rest are platform specific settings:
size="small"
type="underlined"
defaultActiveId="ios"
queryGroup="platform"
>
<TabPanel id="ios" label="iOS">
Edit the `ios/Runner/Info.plist` file.
apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
+8
View File
@@ -29,6 +29,7 @@ We can use [`create-next-app`](https://nextjs.org/docs/getting-started) to initi
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -84,6 +85,7 @@ npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -186,6 +188,7 @@ Create an `AuthForm` client side component with the `Auth` component rendered wi
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -286,6 +289,7 @@ In the following code snippet, we perform the following steps:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -340,6 +344,7 @@ Let's create a route handler to handle the signout from the server side.
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -406,6 +411,7 @@ Let's create a new component for that called `AccountForm` within the `app/accou
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -676,6 +682,7 @@ Create a account page for the `AccountForm` component we just created
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
@@ -742,6 +749,7 @@ Let's create an avatar widget for the user so that they can upload a profile pho
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+1
View File
@@ -260,6 +260,7 @@ In the following code snippet, we perform the following steps:
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">
apps/docs/pages/guides/platform/logs.mdx
+2 -1
View File
@@ -20,6 +20,7 @@ Supabase provides a logging interface specific to each product. You can use simp
size="small"
type="underlined"
defaultActiveId="api"
queryGroup="product"
>
<TabPanel id="api" label="API">
@@ -301,7 +302,7 @@ where h.x_real_ip is not null and r.method = "GET";
Refer to the full field reference for each available source below. Do note that in order to access each nested key, you would need to perform the [necessary unnesting joins](#unnesting-arrays)
<Tabs scrollable size="small" type="underlined" defaultActiveId="edge_logs">
<Tabs scrollable size="small" type="underlined" defaultActiveId="edge_logs" queryGroup="source">
{logConstants.schemas.map((schema) => (
<TabPanel id={schema.reference} label={schema.name}>
<table>
apps/docs/pages/guides/realtime/postgres-changes.mdx
+1
View File
@@ -32,6 +32,7 @@ In this example we'll set up a database table, secure it with Row Level Security
size="small"
type="underlined"
defaultActiveId="sql"
queryGroup="database-method"
>
<TabPanel id="sql" label="SQL">
apps/docs/pages/guides/resources/migrating-to-supabase/amazon-rds.mdx
+1
View File
@@ -42,6 +42,7 @@ Alternatively, you can use [pgloader](https://github.com/dimitri/pgloader), a fl
size="small"
type="underlined"
defaultActiveId="colab"
queryGroup="migrate-method"
>
<TabPanel id="colab" label="Migrate using Colab">
apps/docs/pages/guides/resources/migrating-to-supabase/render.mdx
+1
View File
@@ -43,6 +43,7 @@ The fastest way to migrate your database is with the Supabase migration tool on
size="small"
type="underlined"
defaultActiveId="colab"
queryGroup="migrate-method"
>
<TabPanel id="colab" label="Migrate using Colab">
apps/docs/pages/guides/storage/quickstart.mdx
+4
View File
@@ -43,6 +43,7 @@ client libraries. Here we create a bucket called "avatars":
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="language"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -100,6 +101,7 @@ You can upload a file from the Dashboard, or within a browser using our JS libra
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="language"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -151,6 +153,7 @@ You can download a file from the Dashboard, or within a browser using our JS lib
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="language"
>
<TabPanel id="dashboard" label="Dashboard">
@@ -198,6 +201,7 @@ To restrict access to your files you can use either the Dashboard or SQL.
size="small"
type="underlined"
defaultActiveId="dashboard"
queryGroup="database-method"
>
<TabPanel id="dashboard" label="Dashboard">
apps/docs/pages/reference/analytics/[...slug].tsx
+1
View File
@@ -139,6 +139,7 @@ export default function Config() {
operation.responseList[0].responseCode ??
operation.responseList[0].responseCode
}
queryGroup="response-status"
>
{operation.responseList.map((response: any) => (
<Tabs.Panel id={response.responseCode} label={response.responseCode}>
apps/docs/pages/reference/auth/[...slug].tsx
+1
View File
@@ -139,6 +139,7 @@ export default function Config() {
operation.responseList[0].responseCode ??
operation.responseList[0].responseCode
}
queryGroup="response-status"
>
{operation.responseList.map((response: any) => (
<Tabs.Panel id={response.responseCode} label={response.responseCode}>
apps/docs/pages/reference/storage/[...slug].tsx
+1
View File
@@ -133,6 +133,7 @@ export default function Config() {
size="small"
type="underlined"
defaultActiveId={operation.responseList[0].responseCode}
queryGroup="response-status"
>
{operation.responseList.map((response: any) => (
<Tabs.Panel id={response.responseCode} label={response.responseCode}>
packages/ui/src/components/Tabs/Tabs.tsx
+27 -9
View File
@@ -1,6 +1,6 @@
import * as TabsPrimitive from '@radix-ui/react-tabs'
import { useRouter } from 'next/router'
import * as React from 'react'
import { Children, useEffect, useState } from 'react'
import styleHandler from '../../lib/theme/styleHandler'
import { useTabGroup } from './TabsProvider'
@@ -9,6 +9,7 @@ interface TabsProps {
defaultActiveId?: string
activeId?: string
size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
queryGroup?: string
block?: boolean
tabBarGutter?: number
tabBarStyle?: React.CSSProperties
@@ -30,6 +31,7 @@ const Tabs: React.FC<TabsProps> & TabsSubComponents = ({
activeId,
type = 'pills',
size = 'tiny',
queryGroup,
block,
onChange,
onClick,
@@ -41,29 +43,45 @@ const Tabs: React.FC<TabsProps> & TabsSubComponents = ({
}) => {
// toArray is used here to filter out invalid children
// another method would be to use React.Children.map
const children = React.Children.toArray(_children) as PanelPropsProps[]
const children = Children.toArray(_children) as PanelPropsProps[]
const tabIds = children.map((tab) => tab.props.id)
const [activeTab, setActiveTab] = React.useState(
defaultActiveId ??
const router = useRouter()
const queryTabs = queryGroup ? router.query[queryGroup] : undefined
const [queryTabRaw] = Array.isArray(queryTabs) ? queryTabs : [queryTabs]
const queryTab = queryTabRaw && tabIds.includes(queryTabRaw) ? queryTabRaw : undefined
const [activeTab, setActiveTab] = useState(
queryTab ??
defaultActiveId ??
// if no defaultActiveId is set use the first panel
children?.[0]?.props?.id
)
const router = useRouter()
const hash = router?.asPath?.split('#')[1]?.toUpperCase()
// If query param present for the query group, switch to that tab.
useEffect(() => {
if (queryTab) {
setActiveTab(queryTab)
setGroupActiveId?.(queryTab)
}
}, [queryTab])
let __styles = styleHandler('tabs')
const tabIds = children.map((tab) => tab.props.id)
const { groupActiveId, setGroupActiveId } = useTabGroup(tabIds)
const active = activeId ?? groupActiveId ?? activeTab ?? hash
const active = activeId ?? groupActiveId ?? activeTab
function onTabClick(id: string) {
setActiveTab(id)
setGroupActiveId?.(id)
if (queryGroup) {
const url = new URL(document.location.href)
url.searchParams.set(queryGroup, id)
window.history.replaceState(undefined, '', url)
}
onClick?.(id)
if (id !== active) {
onChange?.(id)