Merge branch 'master' into chore/change-dashboard-links

README.md

@@ -12,9 +12,9 @@
 - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
 - [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Auto-generated APIs.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Functions.
   - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)

apps/docs/components/Navigation/Footer.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { Button } from 'ui'
 import { primaryLinks, secondaryLinks } from '~/data/footer'
-import { LayoutMainContent } from '../../layouts/DefaultLayout'
+import { LayoutMainContent } from '~/layouts/DefaultLayout'
 
 const Footer = () => (
   <LayoutMainContent className="pt-0">
@@ -75,20 +75,18 @@ const Footer = () => (
         </Button>
         <Button type="text" asChild>
           <a href="https://youtube.com/c/supabase" target="_blank" rel="noreferrer noopener">
-            <a>
-              <svg
-                width="16"
-                height="17"
-                viewBox="0 0 16 17"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
-                  fill="var(--colors-scale9)"
-                />
-              </svg>
-            </a>
+            <svg
+              width="16"
+              height="17"
+              viewBox="0 0 16 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
+                fill="var(--colors-scale9)"
+              />
+            </svg>
           </a>
         </Button>
         <Button type="text" asChild>

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

@@ -349,6 +349,11 @@ export const SocialLoginItems = [
     icon: '/docs/img/icons/discord-icon',
     url: '/guides/auth/social-login/auth-discord',
   },
+  {
+    name: 'Kakao',
+    icon: '/docs/img/icons/kakao-icon',
+    url: '/guides/auth/social-login/auth-kakao',
+  },
   {
     name: 'Keycloak',
     icon: '/docs/img/icons/keycloak-icon',

apps/docs/components/reference/RefSectionHandler.tsx

@@ -60,6 +60,7 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
   const pageTitle = getPageTitle()
   const section = props.sections.find((section) => section.slug === slug)
   const fullTitle = `${pageTitle}${section ? ` - ${section.title}` : ''}`
+  const path = router.asPath.replace('/crawlers', '')
 
   return (
     <>
@@ -72,7 +73,7 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
           content={`https://supabase.com/docs/img/supabase-og-image.png`}
         />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="canonical" href={`https://supabase.com${router.basePath}${router.asPath}`} />
+        <link rel="canonical" href={`https://supabase.com${router.basePath}${path}`} />
       </Head>
       {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
       <RefSubLayout>

apps/docs/data/authProviders.ts

@@ -79,6 +79,16 @@ const authProviders = [
     selfHosted: true,
     authType: 'social',
   },
+  {
+    name: 'Kakao',
+    logo: '/docs/img/icons/kakao-icon',
+    href: '/guides/auth/social-login/auth-kakao',
+    official: true,
+    supporter: 'Supabase',
+    platform: true,
+    selfHosted: true,
+    authType: 'social',
+  },
   {
     name: 'Keycloak',
     logo: '/docs/img/icons/keycloak-icon',

apps/docs/pages/_app.tsx

@@ -1,5 +1,5 @@
-import '../../../packages/ui/build/css/themes/light.css'
 import '../../../packages/ui/build/css/themes/dark.css'
+import '../../../packages/ui/build/css/themes/light.css'
 
 import 'config/code-hike.scss'
 import '../styles/main.scss?v=1.0.0'
@@ -13,6 +13,7 @@ import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import { AppPropsWithLayout } from 'types'
 import { CommandMenuProvider } from 'ui'
+import { TabsProvider } from 'ui/src/components/Tabs'
 import Favicons from '~/components/Favicons'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL, IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'
@@ -150,9 +151,11 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <AuthContainer>
         <ThemeProvider>
           <CommandMenuProvider site="docs">
-            <SiteLayout>
-              <Component {...pageProps} />
-            </SiteLayout>
+            <TabsProvider>
+              <SiteLayout>
+                <Component {...pageProps} />
+              </SiteLayout>
+            </TabsProvider>
           </CommandMenuProvider>
         </ThemeProvider>
       </AuthContainer>

apps/docs/pages/guides/ai/engineering-for-scale.mdx

@@ -12,7 +12,7 @@ Content sources for vectors can be extremely large. As you grow you should run y
 
 ## Simple workloads
 
-For small workloads it's typical to store your data in a single database.
+For small workloads, it's typical to store your data in a single database.
 
 If you've used [Vecs](/docs/guides/ai/vecs-python-client) to create 3 different collections, you can expose collections to your web or mobile application using [views](/docs/guides/database/tables#views):
 
@@ -93,9 +93,9 @@ docs.query(
 
 ### Accessing external collections using Wrappers
 
-Supabase supports [Foreign Data Wrappers](/blog/postgres-foreign-data-wrappers-rust). Wrappers allow you connect two databases together so that you can query them over the network.
+Supabase supports [Foreign Data Wrappers](/blog/postgres-foreign-data-wrappers-rust). Wrappers allow you to connect two databases together so that you can query them over the network.
 
-This involves 2 steps: connecting to your remote database from the primary, and creating a Foreign Table.
+This involves 2 steps: connecting to your remote database from the primary and creating a Foreign Table.
 
 #### Connecting your remote database
 
@@ -140,7 +140,7 @@ const { data, error } = await supabase
 
 ### Enterprise architecture
 
-This diagram provides an example architecture, allowing you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need, in this example we show one only:
+This diagram provides an example architecture that allows you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need (in this example we only show one):
 
 <div>
   <img

apps/docs/pages/guides/ai/managing-collections.mdx

@@ -7,7 +7,7 @@ export const meta = {
   sidebar_label: 'Managing collections',
 }
 
-A collection is an group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
+A collection is a group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
 
 Supabase provides a [Python client](/docs/guides/ai/vecs-python-client) called `vecs` for managing unstructured vector stores in Postgres. If you come from a data science background, this unstructured data approach will feel familiar. If you are more interested in a structured data approach, see [Vector columns](/docs/guides/ai/vector-columns) or read our guide on [Structured & Unstructured Embeddings](/docs/guides/ai/structured-unstructured-embeddings).
 
@@ -32,7 +32,7 @@ vx = vecs.create_client(DB_CONNECTION)
 
 ### Create collection
 
-You can create a collection to store vectors specifying the collections name and the number of dimensions in the vectors you intend to store.
+You can create a collection to store vectors specifying the collection's name and the number of dimensions in the vectors you intend to store.
 
 ```python
 docs = vx.create_collection(name="docs", dimension=3)
@@ -75,7 +75,7 @@ docs.upsert(
 Collections can be queried immediately after being created.
 However, for good performance, the collection should be indexed after records have been upserted.
 
-Indexes should be created **after** the collection has been populated with records. Building an index on an empty collection will result in significantly reduced recall. Once the index has been created you can still upsert new documents into the collection but you should rebuild the index if the size of the collection more than doubles.
+Indexes should be created **after** the collection has been populated with records. Building an index on an empty collection will significantly reduce recall. Once the index has been created you can still upsert new documents into the collection but you should rebuild the index if the size of the collection more than doubles.
 
 Only one index may exist per-collection. By default, creating an index will replace any existing index.
 

apps/docs/pages/guides/auth.mdx

@@ -91,20 +91,20 @@ const getURL = () => {
   let url =
     process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
     process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
-    'http://localhost:3000/';
+    'http://localhost:3000/'
   // Make sure to include `https://` when not localhost.
-  url = url.includes('http') ? url : `https://${url}`;
-  // Make sure to including trailing `/`.
-  url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
-  return url;
-};
+  url = url.includes('http') ? url : `https://${url}`
+  // Make sure to include a trailing `/`.
+  url = url.charAt(url.length - 1) === '/' ? url : `${url}/`
+  return url
+}
 
 const { data, error } = await supabase.auth.signInWithOAuth({
-  provider: 'github'
+  provider: 'github',
   options: {
-    redirectTo: getURL()
-  }
-}
+    redirectTo: getURL(),
+  },
+})
 ```
 
 #### Mobile deep linking URIs

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

@@ -14,16 +14,8 @@ This submodule provides convenience helpers for implementing user authentication
 
 ## Install the Next.js helper library
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-<TabPanel id="npm" label="npm">
-
-```sh
-npm install @supabase/auth-helpers-nextjs
+```sh Terminal
+npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
 ```
 
 This library supports the following tooling versions:
@@ -33,31 +25,10 @@ This library supports the following tooling versions:
 
 Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
 
-```sh
+```sh Terminal
 npm install @supabase/auth-helpers-react
 ```
 
-</TabPanel>
-<TabPanel id="yarn" label="Yarn">
-
-```sh
-yarn add @supabase/auth-helpers-nextjs
-```
-
-This library supports the following tooling versions:
-
-- Node.js: `^10.13.0 || >=12.0.0`
-- Next.js: `>=10`
-
-Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
-
-```sh
-yarn add @supabase/auth-helpers-react
-```
-
-</TabPanel>
-</Tabs>
-
 ## Set up environment variables
 
 Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).

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

@@ -29,7 +29,7 @@ If you are using the `pages` directory, check out [Auth Helpers in Next.js Pages
 
 Use the `create-next-app` command and the `with-supabase` template to automate the configuration of cookie-based auth with the Next.js Auth Helpers.
 
-```sh
+```sh Terminal
 npx create-next-app -e with-supabase
 ```
 
@@ -54,37 +54,18 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
 
 Run the development server and navigate to http://localhost:3000.
 
-```bash
+```sh Terminal
 npm run dev
 ```
 
 ## Manual Configuration
 
 ### Install Next.js Auth Helpers library
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-
-<TabPanel id="npm" label="npm">
-
-```sh
-npm install @supabase/auth-helpers-nextjs
+```sh Terminal
+npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
 ```
 
-</TabPanel>
-<TabPanel id="yarn" label="Yarn">
-
-```sh
-yarn add @supabase/auth-helpers-nextjs
-```
-
-</TabPanel>
-</Tabs>
-
 ### Declare Environment Variables
 
 Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
@@ -645,7 +626,7 @@ const supabase = createClientComponentClient({ isSingleton: false })
 
 <div className="video-container">
   <iframe
-    src="https://www.youtube-nocookie.com/embed/SUS1t6Kq7-8"
+    src="https://www.youtube-nocookie.com/embed/ywvXGW6P4Gs"
     frameBorder="1"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowFullScreen

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

@@ -22,36 +22,14 @@ This submodule provides convenience helpers for implementing user authentication
 
 ## Install the Remix helper library
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-<TabPanel id="npm" label="npm">
-
-```sh
-npm install @supabase/auth-helpers-remix
+```sh Terminal
+npm install @supabase/auth-helpers-remix @supabase/supabase-js
 ```
 
 This library supports the following tooling versions:
 
 - Remix: `>=1.7.2`
 
-</TabPanel>
-<TabPanel id="yarn" label="Yarn">
-
-```sh
-yarn add @supabase/auth-helpers-remix
-```
-
-This library supports the following tooling versions:
-
-- Remix: `>=1.7.2`
-
-</TabPanel>
-</Tabs>
-
 ## Set up environment variables
 
 Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example).

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

@@ -16,7 +16,7 @@ This submodule provides convenience helpers for implementing user authentication
 This library supports Node.js `^16.15.0`.
 
 ```sh Terminal
-npm install @supabase/auth-helpers-sveltekit
+npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
 ```
 
 ### Declare Environment Variables