diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index 4351050cbf0..c5a5aa3752a 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -27,6 +27,9 @@ import RefHeaderSection from './reference/RefHeaderSection'
// Ref version specific
import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlobalFlagsHandler'
+import Options from '~/components/Options'
+import Param from '~/components/Params'
+
const components = {
Admonition,
Button,
@@ -68,6 +71,8 @@ const components = {
code: (props: any) =>
,
RefHeaderSection: (props: any) =>
,
CliGlobalFlagsHandler: () =>
,
+ Options,
+ Param,
}
export default components
diff --git a/apps/docs/components/reference/RefSEO.tsx b/apps/docs/components/reference/RefSEO.tsx
new file mode 100644
index 00000000000..237ecec3f15
--- /dev/null
+++ b/apps/docs/components/reference/RefSEO.tsx
@@ -0,0 +1,25 @@
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+
+function RefSEO({ title }) {
+ const router = useRouter()
+
+ const path = router.asPath.replace('crawlers/', '')
+
+ return (
+
+ )
+}
+
+export default RefSEO
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index cca2e834ac9..75476287461 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react'
import components from '~/components'
import RefEducationSection from '~/components/reference/RefEducationSection'
import RefFunctionSection from '~/components/reference/RefFunctionSection'
-import OldLayout from '~/layouts/Default'
+
import RefSubLayout from '~/layouts/ref/RefSubLayout'
import ApiOperationSection from './ApiOperationSection'
import CliCommandSection from './CLICommandSection'
@@ -34,18 +34,6 @@ const RefSectionHandler = (props) => {
}
})
- /*
- * handle old ref pages
- */
- if (!isNewDocs) {
- return (
- // @ts-ignore
-
-
-
- )
- }
-
return (
{props.sections.map((x) => {
diff --git a/apps/docs/data/footer.json b/apps/docs/data/footer.json
index 3d3286890c4..1a703f19a96 100644
--- a/apps/docs/data/footer.json
+++ b/apps/docs/data/footer.json
@@ -1,150 +1,10 @@
[
+ { "title": "Contributing", "url": "/handbook/contributing" },
+ { "title": "Changelog", "url": "https://supabase.com/changelog" },
{
- "title": "Product",
- "links": [
- {
- "text": "Database",
- "url": "/database"
- },
- {
- "text": "Auth",
- "url": "/auth"
- },
- {
- "text": "Functions",
- "url": "/edge-functions"
- },
- {
- "text": "Realtime",
- "url": "/realtime"
- },
- {
- "text": "Storage",
- "url": "/storage"
- },
- {
- "text": "Pricing",
- "url": "/pricing"
- },
- {
- "text": "Beta",
- "url": "/beta"
- }
- ]
+ "title": "Author Styleguide",
+ "url": "https://github.com/supabase/supabase/blob/master/DEVELOPERS.md"
},
- {
- "title": "Resources",
- "links": [
- {
- "text": "Support",
- "url": "/support"
- },
- {
- "text": "System Status",
- "url": "https://status.supabase.com/"
- },
- {
- "text": "Integrations",
- "url": "/partners/integrations"
- },
- {
- "text": "Experts",
- "url": "/partners/experts"
- },
- {
- "text": "Brand Assets / Logos",
- "url": "/brand-assets"
- },
- {
- "text": "DPA",
- "url": "/legal/dpa"
- },
- {
- "text": "SOC2",
- "url": "/legal/soc2"
- }
- ]
- },
- {
- "title": "Developers",
- "links": [
- {
- "text": "Documentation",
- "url": "/docs"
- },
- {
- "text": "API Reference",
- "url": "/docs/reference"
- },
- {
- "text": "Changelog",
- "url": "/changelog"
- },
- {
- "text": "Contributing",
- "url": "/docs/handbook/contributing"
- },
- {
- "text": "Open Source",
- "url": "/docs/oss"
- },
- {
- "text": "SupaSquad",
- "url": "/supasquad"
- },
- {
- "text": "DevTo",
- "url": "https://dev.to/supabase"
- },
- {
- "text": "RSS",
- "url": "/rss.xml"
- }
- ]
- },
- {
- "title": "Company",
- "links": [
- {
- "text": "Blog",
- "url": "/blog"
- },
- {
- "text": "Careers",
- "url": "https://about.supabase.com/careers"
- },
- {
- "text": "Company",
- "url": "/company"
- },
- {
- "text": "Terms of Service",
- "url": "/docs/company/terms"
- },
- {
- "text": "Privacy Policy",
- "url": "/docs/company/privacy"
- },
- {
- "text": "Acceptable Use Policy",
- "url": "/docs/company/aup"
- },
- {
- "text": "Service Level Agreement",
- "url": "/docs/company/sla"
- },
- {
- "text": "Humans.txt",
- "url": "/humans.txt"
- },
- {
- "text": "Lawyers.txt",
- "url": "/lawyers.txt"
- },
- {
- "text": "Security.txt",
- "url": "/.well-known/security.txt"
- }
- ]
- }
+ { "title": "Open Source", "url": "https://supabase.com/docs/oss" },
+ { "title": "SupaSquad", "url": "https://supabase.com/supasquad" }
]
diff --git a/apps/docs/layouts/Default.tsx b/apps/docs/layouts/Default.tsx
deleted file mode 100644
index 515f73b89ac..00000000000
--- a/apps/docs/layouts/Default.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useEffect, FC } from 'react'
-import { NextSeo } from 'next-seo'
-import NavBar from '../components/Navigation/NavBar'
-import SideBar from '../components/Navigation/SideBar'
-import Footer from '../components/Footer'
-import TableOfContents from '~/components/TableOfContents'
-import { menuItems } from '~/components/Navigation/Navigation.constants'
-import { useRouter } from 'next/router'
-import { getPageType } from '~/lib/helpers'
-
-interface Props {
- meta: { title: string; description?: string; hide_table_of_contents?: boolean }
- children: any
- toc?: any
- menuItems?: any
- currentPage?: string
-}
-
-const Layout: FC = ({ meta, children, toc }) => {
- const { asPath } = useRouter()
-
- useEffect(() => {
- const key = localStorage.getItem('supabaseDarkMode')
- if (!key) {
- // Default to dark mode if no preference config
- document.documentElement.className = 'dark'
- } else {
- document.documentElement.className = key === 'true' ? 'dark' : ''
- }
- }, [])
-
- const hasTableOfContents =
- toc !== undefined && toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
-
- const pageType = getPageType(asPath)
-
- console.log('Default, pageType', pageType)
-
- return (
- <>
-
-
-
-
-
-
-
-
- {hasTableOfContents && !meta?.hide_table_of_contents && (
-
- )}
-
-
-
-
- >
- )
-}
-
-export default Layout
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 701a6f6e445..9c73280091d 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -9,8 +9,9 @@ import FooterHelpCallout from '~/components/FooterHelpCallout'
import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
import { useEffect } from 'react'
+import Footer from '~/components/Navigation/Footer'
-const SiteRefLayout = ({ children }) => {
+const SiteLayout = ({ children }) => {
const { isDarkMode } = useTheme()
useEffect(() => {
@@ -274,31 +275,8 @@ const SiteRefLayout = ({ children }) => {
{
)
}
-export default SiteRefLayout
+export default SiteLayout
diff --git a/apps/docs/layouts/SiteRefLayout.tsx b/apps/docs/layouts/SiteRefLayout.tsx
deleted file mode 100644
index 930daa4d684..00000000000
--- a/apps/docs/layouts/SiteRefLayout.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import { useTheme } from 'common/Providers'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
-import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
-
-import FooterHelpCallout from '~/components/FooterHelpCallout'
-
-import { menuState } from '~/hooks/useMenuState'
-import { useEffect } from 'react'
-
-const SiteRefLayout = ({ children }) => {
- const { isDarkMode } = useTheme()
-
- useEffect(() => {
- const key = localStorage.getItem('supabaseDarkMode')
- if (!key) {
- // Default to dark mode if no preference config
- document.documentElement.className = 'dark'
- } else {
- document.documentElement.className = key === 'true' ? 'dark' : ''
- }
- }, [])
-
- const menuLevel = 'home'
- // useMenuLevelId()
- const mobileMenuOpen = false
-
- const levelsData = {
- home: {
- icon: '/docs/img/icons/menu/home',
- name: 'Home',
- },
- gettingstarted: {
- icon: '/docs/img/icons/menu/getting-started',
- name: 'Getting Started',
- },
- database: {
- icon: '/docs/img/icons/menu/database',
- name: 'Database',
- },
- auth: {
- icon: '/docs/img/icons/menu/auth',
- name: 'Auth',
- },
- functions: {
- icon: '/docs/img/icons/menu/functions',
- name: 'Functions',
- },
- realtime: {
- icon: '/docs/img/icons/menu/realtime',
- name: 'Realtime',
- },
- storage: {
- icon: '/docs/img/icons/menu/storage',
- name: 'Storage',
- },
- platform: {
- icon: '/docs/img/icons/menu/platform',
- name: 'Platform',
- },
- resources: {
- icon: '/docs/img/icons/menu/resources',
- name: 'Resources',
- },
- integrations: {
- icon: '/docs/img/icons/menu/integrations',
- name: 'Integrations',
- },
- reference_javascript_v1: {
- icon: '/docs/img/icons/menu/reference-javascript',
- name: 'Javascript Reference v1.0',
- },
- reference_javascript_v2: {
- icon: '/docs/img/icons/menu/reference-javascript',
- name: 'Javascript Reference v2.0',
- },
- reference_dart_v0: {
- icon: '/docs/img/icons/menu/reference-dart',
- name: 'Dart Reference v0.0',
- },
- reference_dart_v1: {
- icon: '/docs/img/icons/menu/reference-dart',
- name: 'Dart Reference v0.0',
- },
- reference_cli: {
- icon: '/docs/img/icons/menu/reference-cli',
- name: 'CLI Reference',
- },
- reference_api: {
- icon: '/docs/img/icons/menu/reference-api',
- name: 'Management API Reference',
- },
- reference_self_hosting_auth: {
- icon: '/docs/img/icons/menu/reference-auth',
- name: 'Auth Server Reference',
- },
- reference_self_hosting_storage: {
- icon: '/docs/img/icons/menu/reference-storage',
- name: 'Storage Server Reference',
- },
- reference_self_hosting_realtime: {
- icon: '/docs/img/icons/menu/reference-realtime',
- name: 'Realtime Server Reference',
- },
- }
-
- return (
-
- {/* */}
-
-
-
-
-
-
-
-
-
-
-
- DOCS
-
-
- {/* {router.asPath.includes('/reference/') &&
} */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/*
*/}
-
-
-
-
-
-
-
menuState.setMenuMobileOpen(!mobileMenuOpen)}
- >
-
-
-
-
-
-
-
-
-
- {mobileMenuOpen
- ? 'Close'
- : menuLevel
- ? levelsData[menuLevel].name
- : levelsData['home'].name}
-
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
-
menuState.setMenuMobileOpen(!mobileMenuOpen)}
- >
-
-
-
-
- )
-}
-
-export default SiteRefLayout
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 10ccfed870d..25b26b3fec7 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -76,7 +76,7 @@ const Layout: FC
= (props) => {
}}
/>
-
+
= (props) => {
const StickyHeader: FC
= ({ icon, ...props }) => {
const router = useRouter()
+
const { setActiveRefItem } = useNavigationMenuContext()
+ // we're serving search bots a different file (/crawlers/[...slug])
+ // and need to modify content to suit that
+ const isCrawlerPage = router.route.includes('/crawlers/[...slug]')
+
const { ref } = useInView({
threshold: 1,
rootMargin: '30% 0% -35% 0px',
@@ -99,21 +105,25 @@ const StickyHeader: FC = ({ icon, ...props }) => {
{icon && (
-
+
)}
-
- {props.title && {props.title} }
-
+ {isCrawlerPage ? (
+
{props.title}
+ ) : (
+
+ {props.title && {props.title} }
+
+ )}
)
}
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index b49391425b2..fc1a2fa8ea9 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -2,7 +2,6 @@ import { MDXProvider } from '@mdx-js/react'
import Head from 'next/head'
import { FC, useEffect, useState } from 'react'
import components from '~/components'
-import Footer from '~/components/Footer'
import SideBar from '~/components/Navigation/SideBar'
import TableOfContents from '~/components/TableOfContents'
diff --git a/apps/docs/lib/refGenerator/helpers.ts b/apps/docs/lib/refGenerator/helpers.ts
index 77a7aa16755..6af5b8eb539 100644
--- a/apps/docs/lib/refGenerator/helpers.ts
+++ b/apps/docs/lib/refGenerator/helpers.ts
@@ -60,6 +60,8 @@ function recurseThroughParams(paramDefinition: any) {
children = dereferenced.children
} else if (dereferenced.type?.declaration?.children) {
children = dereferenced.type.declaration.children
+ } else if (dereferenced.type?.type === 'query') {
+ // skip: ignore types created from `typeof` for now, like `type Fetch = typeof fetch`
} else if (dereferenced.type?.type === 'union') {
// skip: we don't want to show unions as nested parameters
} else if (Object.keys(dereferenced).length === 0) {
diff --git a/apps/docs/pages/[...slug].tsx b/apps/docs/pages/[...slug].tsx
deleted file mode 100644
index 6b34513a155..00000000000
--- a/apps/docs/pages/[...slug].tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import toc from 'markdown-toc'
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-import components from '../components/index'
-import NewLayout from '~/layouts/DefaultGuideLayout'
-
-import Layout from '~/layouts/Default'
-import { getAllDocs, getDocsBySlug } from '../lib/docs'
-
-interface Meta {
- id: string
- title: string
- sidebar_label: string
- hide_table_of_contents: boolean
-}
-
-interface Props {
- meta: Meta
- content: any
- toc: any
-}
-const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true'
-
-export default function Doc({ meta, content, toc }: Props) {
- return (
- // @ts-ignore
- <>
- {Object.entries(meta).length > 0 || !isNewDocs ? (
-
-
-
- ) : (
-
-
-
- )}
- >
- )
-}
-
-export async function getStaticProps({ params }: { params: { slug: string[] } }) {
- let slug
- if (params.slug.length > 1) {
- slug = `docs/${params.slug.join('/')}`
- } else {
- slug = `docs/${params.slug[0]}`
- }
-
- let doc = getDocsBySlug(slug)
- const content = await serialize(doc.content || '')
-
- return {
- props: {
- ...doc,
- content,
- toc: toc(doc.content, { maxdepth: 1, firsth1: false }),
- },
- }
-}
-
-export function getStaticPaths() {
- let docs = getAllDocs()
-
- return {
- paths: docs.map(() => {
- return {
- params: {
- slug: docs.map((d) => d.slug),
- },
- }
- }),
- fallback: 'blocking',
- }
-}
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
index 346c8d7f3bc..10fa7f73f31 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
@@ -95,7 +95,7 @@ Create a new file at `/utils/supabase-browser.ts` and populate with the followin
```ts
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { Database } from '../db_types'
+import { Database } from '../lib/database.types'
export default createBrowserSupabaseClient()
```
@@ -109,7 +109,7 @@ Create a new file at `/utils/supabase-server.ts` and populate with the following
```ts title="/utils/supabase-server.ts"
import { headers, cookies } from 'next/headers'
import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { Database } from '../db_types'
+import { Database } from '../lib/database.types'
export default () =>
createServerComponentSupabaseClient({
@@ -139,6 +139,8 @@ Middleware runs before every route declared in the `matcher` array. Since we don
>
+Create a new file at `/pages/middleware.js` and populate with the following:
+
```jsx title="middleware.js"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
@@ -164,6 +166,8 @@ export const config = {
+Create a new file at `/middleware.ts` (a sibling of /pages) and populate with the following:
+
```tsx title="middleware.ts"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
@@ -254,7 +258,7 @@ export default async function RootLayout({ children }) {
}
```
-We don't want Next.js to cache this `session` value, so we need to export a `revalidate` value of `0`.
+We don't want Next.js to cache this `session` value, so we need to export a `revalidate` value of `0` in the layout file.
```jsx
export const revalidate = 0
@@ -641,7 +645,7 @@ Create a new file at `/app/realtime/posts.tsx` and populate with the following:
'use client'
import { useEffect, useState } from 'react'
-import { Database } from '../../db_types'
+import { Database } from '../lib/database.types'
import supabase from '../../utils/supabase-browser'
type Post = Database['public']['Tables']['posts']['Row']
diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx
index 0e41dfba1b6..5cb4efb70e2 100644
--- a/apps/docs/pages/guides/getting-started.mdx
+++ b/apps/docs/pages/guides/getting-started.mdx
@@ -38,7 +38,7 @@ export const meta = {
### Tutorials
-
+
{webapps.map((item) => {
return (
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
index b0d5fc21c93..8f2754453f9 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
@@ -205,7 +205,7 @@ export class AuthComponent implements OnInit {
-
```
### Account page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
index db3e028ad30..6a73c7aa8ab 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
@@ -50,7 +50,9 @@ Add `io.supabase.flutterquickstart://login-callback/` as a new [redirect URL](ht
That is it on Supabase's end and the rest are platform specific settings:
-For Android, add an intent-filter to enable deep linking:
+For Android, edit the `android/app/src/main/AndroidManifest.xml` file.
+
+Add an intent-filter to enable deep linking:
```xml title=android/app/src/main/AndroidManifest.xml
@@ -75,7 +77,9 @@ For Android, add an intent-filter to enable deep linking:
```
-For iOS add CFBundleURLTypes to enable deep linking:
+For iOS, edit the ios/Runner/Info.plist file.
+
+Add CFBundleURLTypes to enable deep linking:
```xml title=ios/Runner/Info.plist"
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
index 1f7804f15ab..7d1418b7146 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
@@ -37,7 +37,7 @@ Then let's install the only additional dependency: [supabase-js](https://github.
npm install @supabase/supabase-js
```
-And finally we want to save the environment variables in a `.env`.
+And finally we want to save the environment variables in a `.env.local` file.
All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
```bash title=.env
@@ -48,6 +48,8 @@ REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+Create and edit `src/supabaseClient.js`:
+
```js title=src/supabaseClient.js
import { createClient } from '@supabase/supabase-js'
@@ -64,6 +66,8 @@ You can find the full contents of this file [here](https://raw.githubusercontent
Let's set up a React component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+Create and edit `src/Auth.js`:
+
```jsx title=src/Auth.js
import { useState } from 'react'
import { supabase } from './supabaseClient'
@@ -120,7 +124,7 @@ export default function Auth() {
After a user is signed in we can allow them to edit their profile details and manage their account.
-Let's create a new component for that called `Account.js`.
+Let's create a new component for that called `src/Account.js`.
```jsx title=src/Account.js
import { useState, useEffect } from 'react'
@@ -234,7 +238,7 @@ export default Account
### Launch!
-Now that we have all the components in place, let's update `App.js`:
+Now that we have all the components in place, let's update `src/App.js`:
```jsx title=src/App.js
import './index.css'
@@ -282,6 +286,8 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
+Create and edit `src/Avatar.js`:
+
```jsx title=src/Avatar.js
import { useEffect, useState } from 'react'
import { supabase } from './supabaseClient'
@@ -367,7 +373,7 @@ export default function Avatar({ url, size, onUpload }) {
### Add the new widget
-And then we can add the widget to the Account page:
+And then we can add the widget to the Account page at `src/Account.js`:
```jsx title=src/Account.js
// Import the new component
@@ -376,7 +382,7 @@ import Avatar from './Avatar'
// ...
return (
-