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

Merge branch 'master' of github.com:supabase/supabase into feat/fdw

Browse Source
This commit is contained in:
Joshen Lim committed 2022-12-13 11:22:46 +07:00
2 parents 0b42e2bf71 b6fb8100e6
commit a73def86f0
37 files changed
+698 -337
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/Navigation/Navigation.constants.ts
+1 -1
View File
@@ -253,7 +253,7 @@ export const menuItems: NavMenu = {
{
label: 'Platform',
items: [
{ name: 'Overview', url: '/guides/hosting/platform', items: [] },
{ name: 'Overview', url: '/guides/platform', items: [] },
{ name: 'Compute Add-ons', url: '/guides/platform/compute-add-ons', items: [] },
{ name: 'Custom Domains', url: '/guides/platform/custom-domains', items: [] },
{ name: 'Database Usage', url: '/guides/platform/database-usage', items: [] },
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+12 -14
View File
@@ -462,7 +462,6 @@ export const platform = {
label: 'Platform',
url: '/guides/platform',
items: [
{ name: 'Overview', url: '/guides/hosting/platform', items: [] },
{
name: 'Add-ons',
url: undefined,
@@ -501,7 +500,6 @@ export const resources = {
url: '/guides/resources',
items: [
{ name: 'Examples', url: '/guides/resources/examples', items: [] },
{ name: 'Features', url: '/features', items: [] },
{ name: 'Glossary', url: '/guides/resources/glossary', items: [] },
{
name: 'Migrate to Supabase',
@@ -557,23 +555,23 @@ export const resources = {
],
},
{
name: 'Self-Hosting reference docs',
name: 'Self-Hosting Reference',
items: [
{
name: 'Auth server',
url: '/reference/self-hosting-auth',
name: 'Auth Server',
url: '/reference/self-hosting-auth/introduction',
icon: '/docs/img/icons/menu/reference-auth',
items: [],
},
{
name: 'Storage server',
url: '/reference/self-hosting-storage',
name: 'Storage Server',
url: '/reference/self-hosting-storage/introduction',
icon: '/docs/img/icons/menu/reference-storage',
items: [],
},
{
name: 'Realtime server',
url: '/reference/self-hosting-realtime',
name: 'Realtime Server',
url: '/reference/self-hosting-realtime/introduction',
icon: '/docs/img/icons/menu/reference-realtime',
items: [],
},
@@ -750,22 +748,22 @@ export const reference_api = {
export const reference_self_hosting_auth = {
icon: 'reference-auth',
title: 'Self Hosting Auth',
title: 'Self-Hosting Auth',
url: '/guides/reference/self-hosting/auth',
parent: '/reference',
}
export const reference_self_hosting_storage = {
icon: 'reference-storage',
title: 'Self Hosting Storage',
url: '/guides/reference/self-hosting/auth',
title: 'Self-Hosting Storage',
url: '/guides/reference/self-hosting/storage',
parent: '/reference',
}
export const reference_self_hosting_realtime = {
icon: 'reference-auth',
title: 'Self Hosting Realtime',
url: '/guides/reference/self-hosting/auth',
title: 'Self-Hosting Realtime',
url: '/guides/reference/self-hosting/realtime',
parent: '/reference',
}
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+2 -3
View File
@@ -106,8 +106,7 @@ const SideNav = () => {
case url.includes(`/docs/guides/storage`) && url:
menuState.setMenuLevelId('storage')
break
case url.includes(`/docs/guides/platform`) ||
(url.includes(`/docs/guides/hosting/platform`) && url):
case url.includes(`/docs/guides/platform`) && url:
menuState.setMenuLevelId('platform')
break
case url.includes(`/docs/guides/resources`) && url:
@@ -213,7 +212,7 @@ const SideNav = () => {
{
label: 'Platform',
icon: '/img/icons/menu/platform',
href: '/guides/hosting/platform',
href: '/guides/platform',
level: 'platform',
},
{
apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+17 -75
View File
@@ -86,10 +86,9 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
let sections = commonSections
// console.log('sections', sections)
if (!sections) console.error('no common sections imported')
const allowedKeys = allowedClientKeys
// console.log(id, 'sections in ref menu', sections)
if (!sections) console.error('no common sections imported')
const menu = NavItems[id]
@@ -101,8 +100,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
? find(sections, { title: 'Auth' }).items
: []
// console.log('databaseFunctions', databaseFunctions)
const filterIds =
databaseFunctions.length > 0
? find(databaseFunctions, {
@@ -110,9 +107,10 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
}) &&
find(databaseFunctions, {
id: 'using-filters',
}).items.map((x) => x.id)
})
.items.filter((x) => allowedKeys.includes(x.id))
.map((x) => x.id)
: []
const modifierIds =
databaseFunctions.length > 0
? find(databaseFunctions, {
@@ -120,7 +118,9 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
}) &&
find(databaseFunctions, {
id: 'using-modifiers',
}).items.map((x) => x.id)
})
.items.filter((x) => allowedKeys.includes(x.id))
.map((x) => x.id)
: []
const authServerIds =
@@ -133,9 +133,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
}).items.map((x) => x.id)
: []
// console.log(filterIds)
// console.log(modifierIds)
return (
<div
className={[
@@ -186,12 +183,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
//
// check if the link is allowed to be displayed
function isFuncNotInLibraryOrVersion(id, type) {
if (
id &&
allowedClientKeys &&
!allowedClientKeys.includes(id) &&
type !== 'markdown'
) {
if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
/*
* Remove this menu link from side bar, as it does not exist for either
* this language, or for this lib version
@@ -212,8 +204,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
const activeAccordianItem = useMenuActiveRefId()
let active = false
// console.log('activeAccordianItem', activeAccordianItem)
const isFilter =
filterIds && filterIds.length > 0 && filterIds.includes(activeAccordianItem)
const isModifier =
@@ -223,45 +213,25 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
authServerIds.length > 0 &&
authServerIds.includes(activeAccordianItem)
// console.log('isFilter', props.id, isFilter)
// console.log('isModifier', props.id, isModifier)
if (
(isFilter && !isModifier && !isAuthServer && props.id === 'using-filters') ||
(activeAccordianItem === 'using-filters' &&
!isModifier &&
!isFilter &&
props.id === 'using-filters')
(activeAccordianItem === 'using-filters' && props.id === 'using-filters')
) {
active = true
} else if (
(isModifier && !isFilter && !isAuthServer && props.id === 'using-modifiers') ||
(activeAccordianItem === 'using-modifiers' &&
!isFilter &&
!isModifier &&
props.id === 'using-modifiers')
(activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
) {
active = true
} else if (
(isAuthServer && !isFilter && !isModifier && props.id === 'admin-api') ||
(activeAccordianItem === 'admin-api' &&
!isFilter &&
!isModifier &&
!isAuthServer &&
props.id === 'admin-api')
(activeAccordianItem === 'admin-api' && props.id === 'admin-api')
) {
active = true
} else {
active = false
}
// if (props.id === 'using-filters') {
// console.log('using-filters', active)
// }
// if (props.id === 'using-modifiers') {
// console.log('using-modifiers', active)
// }
return (
<Accordion.Root
collapsible
@@ -276,9 +246,11 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
>
{props.items &&
props.items.map((item) => {
return <FunctionLink {...item} library={lib} />
})}
props.items
.filter((item) => allowedKeys.includes(item.id))
.map((item) => {
return <FunctionLink {...item} library={lib} />
})}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
@@ -303,7 +275,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
)
} else {
// handle normal links
return (
<>
<RenderLink {...fn} library={menu.title} />
@@ -316,35 +287,6 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
}
})}
</ul>
{/* {menu.extras && (
<>
<Divider />{' '}
<span className="font-mono text-xs uppercase text-scale-1200 font-medium tracking-wider mb-2">
Resources
</span>
</>
)}
{menu.extras?.map((x) => {
return (
<div key={x.name}>
<li>
<Link href={`${x.href}`} passHref>
<a className="cursor-pointer transition text-scale-1100 text-sm hover:text-brand-900 flex gap-3 my-1">
{x.icon && (
<Image
alt={x.icon}
width={20}
height={20}
src={`${router.basePath}${x.icon}`}
/>
)}
{x.name}
</a>
</Link>
</li>
</div>
)
})} */}
</div>
</div>
)
apps/docs/docs/ref/api/introduction.mdx
+3 -1
View File
@@ -14,6 +14,8 @@ hideTitle: true
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Manage your Supabase organizations and projects programmatically.
## Status
The Management API is in `beta`. It is usable in it's current state, but it's likely that there will be breaking changes.
@@ -44,7 +46,7 @@ hideTitle: true
- [OpenAPI Docs](https://api.supabase.com/api/v1)
- [OpenAPI Spec](https://api.supabase.com/api/v1-json)
- Reporting bugs and issues: [github.com/supabase/supabase](https://github.com/supabase/supabase)
- [Report bugs and issues](https://github.com/supabase/supabase)
</RefSubLayout.Examples>
apps/docs/docs/ref/cli/introduction.mdx
+30 -6
View File
@@ -11,9 +11,33 @@ hideTitle: true
</div>
</div>
<div className="max-w-xl">
This reference documents every object and method available in Supabase's isomorphic JavaScript
library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to
database changes, invoke Deno Edge Functions, build login and user management functionality, and
manage large files.
</div>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.
The CLI is still under development, but it contains all the functionality for working with your Supabase projects and the Supabase Platform.
- Run Supabase locally: [`supabase start`](/docs/reference/cli/usage#supabase-start)
- Manage database migrations: [`supabase migration`](/docs/reference/cli/usage#supabase-migration)
- CI/CD for releasing to production: [`supabase db push`](/docs/reference/cli/usage#supabase-db-push)
- Manage your Supabase projects: [`supabase projects`](/docs/reference/cli/usage#supabase-projects)
- Generate types directly from your database schema: [`supabase gen types`](/docs/reference/cli/usage#supabase-gen)
- A [community-supported GitHub Action](https://github.com/lyqht/generate-supabase-db-types-github-action) to generate TypeScript types
- Shell autocomplete: [`supabase completion`](/docs/reference/cli/usage#supabase-completion)
- A [community-supported Fig autocomplete spec](https://fig.io/manual/supabase) for macOS terminal
</RefSubLayout.Details>
<RefSubLayout.Examples>
### Additional links
- [Install the Supabase CLI](/docs/guides/cli)
- [Source code](https://github.com/supabase/cli)
- [Known bugs and issues](https://github.com/supabase/cli/issues)
- [Supabase CLI v1 and Management API Beta](https://supabase.com/blog/supabase-cli-v1-and-admin-api-beta)
- [Video: Announcing CLI V1 and Management API Beta](https://www.youtube.com/watch?v=OpPOaJI_Z28)
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
apps/docs/docs/ref/javascript/release-notes.mdx
+1 -1
View File
@@ -288,7 +288,7 @@ Deprecated and removed `setAuth()` . To set a custom `access_token` jwt instead,
- `getPublicURL` only returns the public URL inside the data object. This keeps it consistent with our other methods of returning only within the data object. No error is returned since this method cannot does not throw an error ([PR](https://github.com/supabase/storage-js/pull/93))
- signed urls are returned as `signedUrl` instead of `signedURL` in both `createSignedUrl` and `createSignedUrls` ([PR](https://github.com/supabase/storage-js/pull/94))
- Encodes URLs returned by `createSignedUrl`, `createSignedUrls` and `getPublicUrl` ([PR](https://github.com/supabase/storage-js/pull/86))
- `createsignedUrl` used to return a url directly and and within the data object. This was inconsistent. Now we always return values only inside the data object across all methods. ([PR](https://www.notion.so/LW5-supabase-js-v2-7b0bfcdf571d4f20b9b7a9308883f24b))
- `createsignedUrl` used to return a url directly and and within the data object. This was inconsistent. Now we always return values only inside the data object across all methods. ([PR](https://github.com/supabase/storage-js/pull/88))
- `createBucket` returns a data object instead of the name of the bucket directly. ([PR](https://github.com/supabase/storage-js/pull/89))
- Fixed types for metadata ([PR](https://github.com/supabase/storage-js/pull/90))
- Better error types make it easier to track down what went wrong quicker.
apps/docs/docs/ref/self-hosting-auth/introduction.mdx
+27 -9
View File
@@ -5,16 +5,34 @@ hideTitle: true
---
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/javascript-icon.svg" className="w-8 h-8 rounded" />
<img src="/docs/img/icons/menu/reference-auth.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Auth</h1>
</div>
</div>
<div className="max-w-xl">
This reference documents every object and method available in Supabase's isomorphic JavaScript
library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to
database changes, invoke Deno Edge Functions, build login and user management functionality, and
manage large files.
</div>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
The Supabase Auth Server (GoTrue) is a JSON Web Token (JWT)-based API for managing users and issuing access tokens.
GoTrue is an open-source API written in Golang, that acts as a self-standing API service for handling user registration and authentication for JAM projects. It's based on OAuth2 and JWT and handles user signup, authentication, and custom user data.
</RefSubLayout.Details>
<RefSubLayout.Examples>
### Client libraries
- [JavaScript](https://github.com/supabase/gotrue-js)
- [Dart](https://github.com/supabase/gotrue-dart)
### Additional links
- [Source code](https://github.com/supabase/gotrue)
- [Known bugs and issues](https://github.com/supabase/gotrue/issues)
- [Auth guides](/docs/guides/auth)
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
apps/docs/docs/ref/self-hosting-realtime/introduction.mdx
+62 -9
View File
@@ -5,16 +5,69 @@ hideTitle: true
---
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/javascript-icon.svg" className="w-8 h-8 rounded" />
<img src="/docs/img/icons/menu/reference-realtime.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Realtime</h1>
</div>
</div>
<div className="max-w-xl">
This reference documents every object and method available in Supabase's isomorphic JavaScript
library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to
database changes, invoke Deno Edge Functions, build login and user management functionality, and
manage large files.
</div>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Supabase Realtime is a server built with Elixir using the [Phoenix Framework](https://www.phoenixframework.org) that allows you to listen to changes in your PostgreSQL database via logical replication and then broadcast those changes via WebSockets.
There are two versions of this server: `Realtime` and `Realtime RLS`.
`Realtime` server works by:
1. Listening to PostgreSQL's replication functionality (using PostgreSQL's logical decoding)
2. Converting the byte stream into JSON
3. Broadcasting to all connected clients over WebSockets
`Realtime RLS` server works by:
1. Polling PostgreSQL's replication functionality (using PostgreSQL's logical decoding and [wal2json](https://github.com/eulerto/wal2json) output plugin)
2. Passing database changes to a [Write Ahead Log Realtime Unified Security (WALRUS)](https://github.com/supabase/walrus) PostgresSQL function and receiving a list of authorized subscribers depending on Row Level Security (RLS) policies
3. Converting the changes into JSON
4. Broadcasting to authorized subscribers over WebSockets
## Why not just use PostgreSQL's `NOTIFY`?
A few reasons:
1. You don't have to set up triggers on every table.
2. `NOTIFY` has a payload limit of 8000 bytes and will fail for anything larger. The usual solution is to send an ID and then fetch the record, but that's heavy on the database.
3. `Realtime` server consumes two connections to the database, then you can connect many clients to this server. Easier on your database, and to scale up you just add additional `Realtime` servers.
## Benefits
1. The beauty of listening to the replication functionality is that you can make changes to your database from anywhere - your API, directly in the DB, via a console, etc. - and you will still receive the changes via WebSockets.
2. Decoupling. For example, if you want to send a new slack message every time someone makes a new purchase you might build that functionality directly into your API. This allows you to decouple your async functionality from your API.
3. This is built with Phoenix, an [extremely scalable Elixir framework](https://www.phoenixframework.org/blog/the-road-to-2-million-websocket-connections).
## Does this server guarantee delivery of every data change?
Not yet! Due to the following limitations:
1. Postgres database runs out of disk space due to Write-Ahead Logging (WAL) buildup, which can crash the database and prevent Realtime server from receiving and broadcasting changes. This can be mitigated in the Realtime RLS version of this server by setting the Postgres config `max_slot_wal_keep_size` to a reasonable size.
2. Realtime server can crash due to a larger replication lag than available memory, forcing the creation of a new replication slot and resetting replication to read from the latest WAL data.
3. When Realtime server falls too far behind for any reason, for example disconnecting from database as WAL continues to build up, then database can delete WAL segments the server still needs to read from, for example after reconnecting.
</RefSubLayout.Details>
<RefSubLayout.Examples>
### Client libraries
- [JavaScript](https://github.com/supabase/realtime-js)
- [Dart](https://github.com/supabase/realtime-dart)
### Additional links
- [Source code](https://github.com/supabase/realtime)
- [Known bugs and issues](https://github.com/supabase/realtime/issues)
- [Realtime guides](/docs/guides/realtime)
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
apps/docs/docs/ref/self-hosting-storage/introduction.mdx
+32 -9
View File
@@ -5,16 +5,39 @@ hideTitle: true
---
<div className="flex items-start gap-6 not-prose" id="introduction">
<img src="/docs/img/icons/javascript-icon.svg" className="w-8 h-8 rounded" />
<img src="/docs/img/icons/menu/reference-storage.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
<h1 className="text-3xl text-scale-1200 m-0">Self-Hosting Storage</h1>
</div>
</div>
<div className="max-w-xl">
This reference documents every object and method available in Supabase's isomorphic JavaScript
library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to
database changes, invoke Deno Edge Functions, build login and user management functionality, and
manage large files.
</div>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
An S3 compatible object storage service that integrates with Postgres.
- Uses Postgres as it's datastore for storing metadata
- Authorization rules are written as Postgres Row Level Security policies
- Integrates with S3 as the storage backend (with more in the pipeline!)
- Extremely lightweight and performant
</RefSubLayout.Details>
<RefSubLayout.Examples>
### Client libraries
- [JavaScript](https://github.com/supabase/storage-js)
- [Dart](https://github.com/supabase/storage-dart)
### Additional links
- [Source code](https://github.com/supabase/storage-api)
- [Known bugs and issues](https://github.com/supabase/storage-js/issues)
- [Storage guides](/docs/guides/storage)
- [OpenAPI docs](https://supabase.github.io/storage-api/)
- [Why we built a new object storage service](https://supabase.com/blog/supabase-storage)
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
apps/docs/pages/guides/getting-started.mdx
+18 -18
View File
@@ -4,8 +4,8 @@ import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
export const meta = {
id: 'getting-started',
title: 'Getting started',
description: 'Resources for getting started building with Supabase.',
title: 'Getting Started',
description: 'Resources for getting started with Supabase.',
}
<div className="flex flex-col gap-12 my-12">
@@ -55,91 +55,91 @@ export const meta = {
export const webapps = [
{
title: 'NextJS',
href: '/guides/tutorials/with-nextjs',
href: '/guides/getting-started/tutorials/with-nextjs',
description:
'Learn how to build a user management app with NextJS and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/nextjs-icon',
},
{
title: 'React',
href: '/guides/tutorials/with-react',
href: '/guides/getting-started/tutorials/with-react',
description:
'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/react-icon',
},
{
title: 'Vue 3',
href: '/guides/tutorials/with-vue-3',
href: '/guides/getting-started/tutorials/with-vue-3',
description:
'Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/vuejs-icon',
},
{
title: 'Nuxt 3',
href: '/guides/tutorials/with-nuxt-3',
href: '/guides/getting-started/tutorials/with-nuxt-3',
description:
'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/nuxt-icon',
},
{
title: 'Anglular',
href: '/guides/tutorials/with-angular',
title: 'Angular',
href: '/guides/getting-started/tutorials/with-angular',
description:
'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/angular-icon',
},
{
title: 'RedwoodJS',
href: '/guides/tutorials/with-redwoodjs',
href: '/guides/getting-started/tutorials/with-redwoodjs',
description:
'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/redwood-icon',
},
{
title: 'Svelte',
href: '/guides/tutorials/with-svelte',
href: '/guides/getting-started/tutorials/with-svelte',
description:
'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/svelte-icon',
},
{
title: 'SvelteKit',
href: '/guides/tutorials/with-sveltekit',
href: '/guides/getting-started/tutorials/with-sveltekit',
description:
'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/svelte-icon',
},
{
title: 'Flutter',
href: '/guides/tutorials/with-flutter',
href: '/guides/getting-started/tutorials/with-flutter',
description:
'Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/flutter-icon',
},
{
title: 'Expo',
href: '/guides/tutorials/with-expo',
href: '/guides/getting-started/tutorials/with-expo',
description:
'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/expo-icon',
},
{
title: 'Ionic React',
href: '/guides/tutorials/with-ionic-react',
href: '/guides/getting-started/tutorials/with-ionic-react',
description:
'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/ionic-icon',
},
{
title: 'Ionic Vue',
href: '/guides/tutorials/with-ionic-vue',
href: '/guides/getting-started/tutorials/with-ionic-vue',
description:
'Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/ionic-icon',
},
{
title: 'Ionic Angular',
href: '/guides/tutorials/with-ionic-angular',
href: '/guides/getting-started/tutorials/with-ionic-angular',
description:
'Learn how to build a user management app with NextJS and Supabase Database, Auth, and Storage functionality.',
icon: '/docs/img/icons/ionic-icon',
@@ -156,9 +156,9 @@ export const resources = [
{
title: 'Architecture',
hasLightIcon: true,
href: '/guides/resources/examples',
href: '/architecture',
description:
'Supabase is open source. We choose open source tools which are scalable and make them simple to use.',
'An overview of Supabase\'s architecture and product principles.',
},
]
apps/docs/pages/guides/integrations.mdx
+2 -3
View File
@@ -13,13 +13,12 @@ Explore a variety of integrations from Supabase partners. Need a different integ
{integrations.items.map((item) => (
<div>
<h2>{item.name}</h2>
<div className="grid grid-cols-12 gap-6 not-prose">
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 not-prose">
{item.items.map((integration) => (
<Link href={`/${integration.url}`} key={integration.title} passHref>
<a className={integration.span ?? 'col-span-4'}>
<a>
<GlassPanel
title={integration.name}
span="col-span-6"
background={false}
icon={<img className="w-10 h-10 rounded" src={`/docs/img/integrations/logos/${integration.name.toLowerCase()}_logo.png`}/>}
>
apps/docs/pages/guides/hosting/platform.mdx → apps/docs/pages/guides/platform.mdx
View File
File renamed without changes.
apps/docs/pages/guides/platform/custom-domains.mdx
+56 -2
View File
@@ -18,7 +18,7 @@ To get started:
1. [Install](/docs/guides/cli) the Supabase CLI 1.11.3+.
1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
1. Ensure that you have [Owner or Admin permissions](/docs/guides/hosting/platform#manage-team-members) for the project you'd like to set up a custom domain for.
1. Ensure that you have [Owner or Admin permissions](/docs/guides/platform#manage-team-members) for the project you'd like to set up a custom domain for.
1. Enable the Custom Domains add-on in the Billing page of the Dashboard.
## Configure a Custom Domain
@@ -85,9 +85,63 @@ supabase domains delete --project-ref foobarbaz --experimental
As with the final activation stage of the process for setting up a custom domain, you'll need to update any references in your client code and OAuth providers from the custom domain to the Supabase-provisioned endpoints.
## Vanity Subdomains
<Admonition type="note">
Vanity Subdomains are currently in beta, and are being slowly made available to projects. [Contact Support](https://app.supabase.com/support/new) if you'd like to request early access.
</Admonition>
Vanity Subdomains allow you to present a basic branded experience, compared to custom domains. They allow you to host your services at a custom subdomain on Supabase (e.g., `my-example-brand.supabase.co`) instead of the default, randomly-assigned `foobarbaz.supabase.co`.
To get started:
1. [Install](/docs/guides/cli) the Supabase CLI 1.22.0+.
1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
1. Ensure that you have [Owner or Admin permissions](/docs/guides/hosting/platform#manage-team-members) for the project you'd like to set up a vanity subdomain for.
1. Ensure that your project has a paid subscription (Pro/Pay as you go/Enterprise tier) in the [Billing page of the Dashboard](https://app.supabase.com/project/_/settings/billing/subscription).
## Configure a Vanity Subdomain
This example assumes your Supabase project is `foobarbaz` with a corresponding API URL `foobarbaz.supabase.co` and configures a vanity subdomain at `my-example-brand.supabase.co`.
### Check subdomain availability
Use the `check-availability` subcommand of the CLI to check if your desired subdomain is available for use:
```bash
supabase vanity-subdomains --project-ref foobarbaz check-availability --desired-subdomain my-example-brand --experimental
```
### Activate a subdomain
Once you've chosen an available subdomain, you can reconfigure your Supabase project to start serving traffic on the vanity subdomain (`my-example-brand.supabase.co`).
The auth service, in particular, will no longer work with the original URL (`foobarbaz.supabase.co`).
As such, it is recommended that you schedule a downtime window of 20-30 minutes, depending on the complexity of your project, to update all the services that need to know about your vanity subdomain:
- any client code (e.g., frontends, mobile apps)
- any OAuth providers (e.g., Google, GitHub)
The `activate` subcommand can be used to initiate the activation:
```bash
supabase vanity-subdomains --project-ref fwmssjhjgszhnavvqxnt check-availability --desired-subdomain my-example-subdomain --experimental
```
## Remove a Vanity Subdomain
If you have a vanity subdomain (`my-example-brand.supabase.co`) set up for your Supabase project (ref `foobarbaz`, with assigned endpoints at `foobarbaz.supabase.co`), and would like to go back to using the Supabase-provisioned endpoints (`foobarbaz.supabase.co`), you can use the `delete` subcommand:
```bash
supabase vanity-subdomains delete --project-ref foobarbaz --experimental
```
As with the final activation stage of the process for setting up a vanity subdomain, you'll need to update any references in your client code and OAuth providers from the vanity subdomain to the Supabase-provisioned endpoints.
## Limitations
Edge functions do not honor the custom domain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/storage/quickstart.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ export const meta = {
sidebar_label: 'Quickstart',
}
This guide shows the basic functionality of Supabase Storage. Find a full [example application on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) you can deploy yourself.
This guide shows the basic functionality of Supabase Storage. Find a full [example application on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) or deploy it with Vercel for a preview:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fnextjs-ts-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-nextjs-ts-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management)
apps/docs/pages/new/index.mdx
+1 -1
View File
@@ -294,7 +294,7 @@ export const platform = [
title: 'Platform Guides',
icon: '/docs/img/icons/menu/platform',
hasLightIcon: true,
href: 'guides/hosting/platform',
href: 'guides/platform',
description:
'Learn more about the tools and services powering the Supabase Platform, available add-ons, and how to customize the platform for your needs.',
},
apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default function JSReference(props) {
}
export async function getStaticProps({ params }: { params: { slug: string[] } }) {
return handleRefStaticProps(sections, params, '/self-hosting-auth', '/self-hosting-auth')
return handleRefStaticProps(sections, params, '/self-hosting-realtime', '/self-hosting-realtime')
}
export function getStaticPaths() {
apps/docs/public/sitemap.xml
+1 -1
View File
@@ -649,7 +649,7 @@
</url>
<url>
<loc>https://supabase.com/docs/guides/hosting/platform</loc>
<loc>https://supabase.com/docs/guides/platform</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
apps/www/_blog/2022-08-19-launch-week-5-one-more-thing.mdx
+1 -1
View File
@@ -70,7 +70,7 @@ We've released granular permissions for the Supabase Dashboard. Dashboard permis
We're starting with 3 roles—Owner, Administrator, and Developer—which you can edit in the Org settings of the Dashboard.
There's a tooltip in the header of the members table, which elaborates on the individual permissions available for each role.
[Read more](/docs/guides/hosting/platform#manage-team-members).
[Read more](/docs/guides/platform#manage-team-members).
---
apps/www/_blog/2022-12-12-new-supabase-docs-built-with-nextjs.mdx
+1 -1
View File
@@ -72,7 +72,7 @@ With this foundation, we hope to re-imagine what a documentation experience can
### Fully integrated experience
- **Unified Authentication:** If you’re logged into the Dashboard, then you’re logged into Supabase docs. That means personalization and project-specific documentation. No more placeholders like “`SUPABASE_URL`". We will add URLs and Keys for the project you’ve selected, making it easier to copy and run code snippets.
- **Auto docs:** We may also move AutoDocs (currenrly in the dashboard) into the main Docs website. Reference docs are then just, reference docs, but you can see it in context with the table/schema you're interested in.
- **Auto docs:** We may also move AutoDocs (currently in the dashboard) into the main Docs website. Reference docs are then just, reference docs, but you can see it in context with the table/schema you're interested in.
### Runnable code blocks
apps/www/components/Favicons.tsx
+2 -1
View File
@@ -24,7 +24,8 @@ const Favicons = () => {
/>
<link rel="manifest" href={`${basePath}/favicon/site.webmanifest`} />
{/* <link rel="mask-icon" href={`${basePath}/favicon/safari-pinned-tab.svg`} color="#333333" /> */}
<link rel="shortcut icon" href={`${basePath}/favicon/favicon.ico`} />
{/* <link rel="shortcut icon" href={`${basePath}/favicon/favicon.ico`} /> */}
<link rel="shortcut icon" href={`${basePath}/favicon/favicon-lw.svg`} />
<meta name="msapplication-TileColor" content="#1E1E1E" />
<meta name="msapplication-config" content={`${basePath}/favicon/browserconfig.xml`} />
<meta name="theme-color" content="#1E1E1E" />
apps/www/data/Community.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ type CommunityItem = {
const data: CommunityItem[] = [
{
title: 'Developers',
stat: '80,000+',
stat: '150,000+',
statLabel: 'Registered developers',
img: 'supabase.png',
detail: () => (
apps/www/data/Footer.json
-4
View File
@@ -72,10 +72,6 @@
"text": "Documentation",
"url": "/docs"
},
{
"text": "API Reference",
"url": "/docs/reference"
},
{
"text": "Changelog",
"url": "/changelog"
apps/www/lib/redirects.js
+10 -5
View File
@@ -537,9 +537,9 @@ module.exports = [
},
{
permanent: false,
source: '/docs/guides/platform',
destination: '/docs/guides/hosting/platform',
permanent: true,
source: '/docs/guides/hosting/platform',
destination: '/docs/guides/platform',
},
{
permanent: false,
@@ -599,7 +599,7 @@ module.exports = [
{
permanent: true,
source: '/docs/reference/javascript/supabase-client',
destination: '/docs/reference',
destination: '/docs#reference-documentation',
},
{
permanent: true,
@@ -1331,7 +1331,7 @@ module.exports = [
{
permanent: true,
source: '/docs/guides/client-libraries',
destination: '/docs/reference',
destination: '/docs#reference-documentation',
},
{
permanent: true,
@@ -1595,4 +1595,9 @@ module.exports = [
source: '/docs/company/sla',
destination: '/sla',
},
{
permanent: true,
source: '/docs/reference',
destination: '/docs#reference-documentation',
},
]
apps/www/pages/launch-week/index.tsx
+49 -23
View File
@@ -38,6 +38,7 @@ export default function launchweek() {
const { isDarkMode } = useTheme()
const title = 'Launch Week 6'
const description = 'Supabase Launch Week 6 | 12-18 Dec 2022'
const liveDay = 'Monday'
const [supabase] = useState(() =>
createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
@@ -93,15 +94,22 @@ export default function launchweek() {
return (
<div className="flex flex-1 flex-col sm:flex-row">
<div className="flex gap-4 min-w-[320px] items-center">
<Badge
className={`!bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#c8d8d9] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#1f3738] h-fit relative ${
shipped
? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:border-[#1f3738] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10'
: ''
}`}
>
{shipped ? 'Shipped' : 'Coming Soon'}
</Badge>
{liveDay === day ? (
<Badge className="bg-gradient-to-r from-[#0E3737C2] to-[#67947F] hover:to-[#39617D94] dark:hover:to-[#A6FFD899] text-whiteA-1200 dark:text-black font-normal !py-1 !px-4 dark:from-white dark:via-white dark:to-[#1a7a4c75] bg-slate-1200 border-[#DFFFF1]">
Currently Happening
</Badge>
) : (
<Badge
className={`!bg-transparent !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] !border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:!border-[#DFFFF1] h-fit relative ${
shipped
? 'after:absolute after:rounded-full text-black after:bg-white after:w-full after:h-full after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-gradient-to-br after:from-[#dceef0] after:to-[#b6b6b6] dark:text-transparent dark:border-[#1f3738] after:dark:from-[#14292c] after:dark:to-[#141516] after:border-[#c8d8d9] after:dark:border-[#1f3536] after:-z-10 border-[#DFFFF1]'
: ''
}`}
>
{shipped ? 'Shipped' : 'Coming Soon'}
</Badge>
)}
<span className="text-scale-900 text-sm">
{day} ・ {date}
</span>
@@ -111,7 +119,7 @@ export default function launchweek() {
)
}
const SectionButtons = ({ blog, docs }) => {
const SectionButtons = ({ blog, docs, video }) => {
return (
<div className="flex gap-2 z-10">
<a href={blog} target="_blank" rel="noopener">
@@ -130,6 +138,16 @@ export default function launchweek() {
</div>
</div>
</a>
{video && (
<a href={video} target="_blank" rel="noopener">
<div className="flex items-center border border-slate-400 bg-gradient-to-r from-[#fcfcfc] to-[#f2f2f2] hover:to-[#d5d5d5] text-black dark:text-white dark:from-[#191919] dark:to-[#464444] dark:hover:to-[#4e4e4e] rounded-full text-sm py-2 pl-3 pr-2">
Video
<div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
<img src="/images/launchweek/video-icon.svg" className="w-4 h-4"></img>
</div>
</div>
</a>
)}
</div>
)
}
@@ -171,16 +189,6 @@ export default function launchweek() {
</div>
<p className="text-scale-1100 text-sm text-center">Dec 12 – 16 at 6 AM PT | 9 AM ET</p>
</div>
{process.env.NEXT_PUBLIC_LW_STARTED && (
<div className={classNames(styleUtils.appear, styleUtils['appear-second'])}>
<TicketContainer
supabase={supabase}
session={session}
defaultUserData={defaultUserData}
defaultPageState={query.ticketNumber ? 'ticket' : 'registration'}
/>
</div>
)}
</SectionContainer>
<div
className={classNames(
@@ -275,16 +283,22 @@ export default function launchweek() {
{day1.steps.length > 0 && (
<div className="h-[400px] flex flex-col lg:flex-row">
<div
className={`flex flex-col flex-1 items-center gap-5 lg:items-start lg:justify-between border rounded-xl h-full relative overflow-hidden after:opacity- after:absolute after:bg-no-repeat after:bg-[center_bottom] lg:after:bg-[right_15%_top_100px] xl:after:bg-[right_15%_top_60px] after:bg-[length:300px_180px] after:lg:bg-[length:450px_300px] after:xl:bg-[length:528px_367px] after:bg-[url('/images/launchweek/docs-update-bg.png')] after:top-0 after:right-0 after:bottom-0 after:left-0 p-14 text-2xl before:absolute before:w-full before:h-full before:top-52 before:right-0 before:bottom-0 before:left-0 before:border-[#1f3536] before:-z-10`}
className={`flex flex-col flex-1 items-center gap-5 lg:items-start lg:justify-between border rounded-xl h-full relative overflow-hidden after:opacity- after:absolute after:bg-no-repeat after:bg-[center_bottom] lg:after:bg-[right_15%_top_100px] xl:after:bg-[right_15%_top_60px] after:bg-[length:300px_180px] after:lg:bg-[length:450px_300px] after:xl:bg-[length:528px_367px] after:bg-[url('/images/launchweek/docs-update-bg.png')] after:top-0 after:right-0 after:bottom-0 after:left-0 p-14 text-2xl before:absolute before:w-full before:h-full before:top-52 before:right-0 before:bottom-0 before:left-0 before:border-[#1f3536] before:-z-10 !px-3 sm:!px-14`}
>
<div className="flex items-center relative z-10 justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
<span>{day1.description}</span>
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#1f3738] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#1f3738]">
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#4d898c] dark:from-white dark:to-[#DFFFF1] dark:border-[#DFFFF1]">
Redesigned
</Badge>
</div>
<SectionButtons docs={day1.steps[0].docs} blog={day1.steps[0].blog} />
<SectionButtons
docs={day1.steps[0].docs}
blog={day1.steps[0].blog}
video={
'https://www.youtube.com/watch?v=Q1Amk6iDlF8&ab_channel=Supabase'
}
/>
</div>
</div>
)}
@@ -674,6 +688,18 @@ export default function launchweek() {
)}
</div>
</SectionContainer>
<SectionContainer className="flex flex-col !pb-1 items-center lg:pt-32 gap-24 mb-40">
{process.env.NEXT_PUBLIC_LW_STARTED && (
<div className={classNames(styleUtils.appear, styleUtils['appear-second'])}>
<TicketContainer
supabase={supabase}
session={session}
defaultUserData={defaultUserData}
defaultPageState={query.ticketNumber ? 'ticket' : 'registration'}
/>
</div>
)}
</SectionContainer>
</DefaultLayout>
</>
)
apps/www/public/favicon/favicon-lw.svg
+19
View File
@@ -0,0 +1,19 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.48403" y="1.48403" width="29.0319" height="29.0319" rx="4.33084" fill="url(#paint0_linear_920_70794)"/>
<rect x="1.48403" y="1.48403" width="29.0319" height="29.0319" rx="4.33084" stroke="url(#paint1_linear_920_70794)" stroke-width="0.577445"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9125 7.63694C15.9013 6.89111 14.9598 6.57102 14.4954 7.1552L7.48827 15.9706C6.6612 17.011 7.40299 18.5455 8.73305 18.5455H15.9793L16.0645 24.2263C16.0757 24.9721 17.0172 25.2922 17.4815 24.7081L24.4887 15.8927C25.3157 14.8522 24.5739 13.3177 23.2439 13.3177H15.9498L15.9125 7.63694Z" fill="url(#paint2_linear_920_70794)"/>
<defs>
<linearGradient id="paint0_linear_920_70794" x1="10.1877" y1="9.76698" x2="25.4827" y2="42.2286" gradientUnits="userSpaceOnUse">
<stop stop-color="#14292C"/>
<stop offset="1" stop-color="#121212"/>
</linearGradient>
<linearGradient id="paint1_linear_920_70794" x1="19.9762" y1="1.25667" x2="28.1178" y2="12.0371" gradientUnits="userSpaceOnUse">
<stop stop-color="#76A891" stop-opacity="0.11"/>
<stop offset="1" stop-color="#132525" stop-opacity="0.35"/>
</linearGradient>
<linearGradient id="paint2_linear_920_70794" x1="3.62028" y1="6.85546" x2="32.7486" y2="6.85546" gradientUnits="userSpaceOnUse">
<stop stop-color="#F4FFFA"/>
<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

apps/www/public/sitemap_www.xml
+18 -12
View File
@@ -42,6 +42,12 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/oss</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/support</loc>
<changefreq>weekly</changefreq>
@@ -60,6 +66,18 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/database</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/edge-functions</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/contact/enterprise</loc>
<changefreq>weekly</changefreq>
@@ -72,12 +90,6 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/database</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/launch-week/ticket-image</loc>
<changefreq>weekly</changefreq>
@@ -96,12 +108,6 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/edge-functions</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/nextjs</loc>
<changefreq>weekly</changefreq>
spec/cli_v1_commands.yaml
+222 -83
View File
@@ -1,7 +1,7 @@
clispec: '001'
clispec: "001"
info:
id: cli
version: 1.14.3
version: 1.23.0
title: Supabase CLI
language: sh
source: https://github.com/supabase/cli
@@ -20,20 +20,89 @@ flags:
- id: debug
name: --debug
description: output debug logs to stderr
default_value: 'false'
default_value: "false"
- id: experimental
name: --experimental
description: enable experimental features
default_value: 'false'
default_value: "false"
- id: help
name: -h, --help
description: help for supabase
default_value: 'false'
default_value: "false"
- id: workdir
name: --workdir <string>
description: path to a Supabase project directory
default_value: ''
default_value: ""
commands:
- id: supabase-vanity-subdomains
title: supabase vanity-subdomains
summary: Manage vanity subdomains for Supabase projects
description: |-
Manage vanity subdomains for Supabase projects.
Usage of vanity subdomains and custom domains is mutually exclusive.
tags:
- management-api
links: []
subcommands:
- supabase-vanity-subdomains-activate
- supabase-vanity-subdomains-check-availability
- supabase-vanity-subdomains-delete
- supabase-vanity-subdomains-get
flags:
- id: project-ref
name: --project-ref <string>
description: Project ref of the Supabase project.
default_value: ""
- id: supabase-vanity-subdomains-get
title: supabase vanity-subdomains get
summary: Get the current vanity subdomain
tags: []
links: []
usage: supabase vanity-subdomains get
subcommands: []
flags: []
- id: supabase-vanity-subdomains-delete
title: supabase vanity-subdomains delete
summary: Deletes a project's vanity subdomain
description: |
Deletes the vanity subdomain for a project, and reverts to using the project ref for routing.
tags: []
links: []
usage: supabase vanity-subdomains delete
subcommands: []
flags: []
- id: supabase-vanity-subdomains-check-availability
title: supabase vanity-subdomains check-availability
summary: Checks if a desired subdomain is available for use
tags: []
links: []
usage: supabase vanity-subdomains check-availability [flags]
subcommands: []
flags:
- id: desired-subdomain
name: --desired-subdomain <string>
description: |
The desired vanity subdomain to use for your Supabase project.
default_value: ""
- id: supabase-vanity-subdomains-activate
title: supabase vanity-subdomains activate
summary: Activate a vanity subdomain
description: |
Activate a vanity subdomain for your Supabase project.
This reconfigures your Supabase project to respond to requests on your vanity subdomain.
After the vanity subdomain is activated, your project's auth services will no longer function on the {project-ref}.{supabase-domain} hostname.
tags: []
links: []
usage: supabase vanity-subdomains activate [flags]
subcommands: []
flags:
- id: desired-subdomain
name: --desired-subdomain <string>
description: |
The desired vanity subdomain to use for your Supabase project.
default_value: ""
- id: supabase-test
title: supabase test
summary: Run tests on local Supabase containers
@@ -63,7 +132,7 @@ commands:
- id: backup
name: --backup
description: Backs up the current database before stopping.
default_value: 'false'
default_value: "false"
- id: supabase-status
title: supabase status
summary: Show status of local Supabase containers
@@ -74,25 +143,25 @@ commands:
subcommands: []
flags:
- id: output
name: -o, --output <string>
name: -o, --output <[ env | json | pretty | toml | yaml ]>
description: Output format of status variables.
default_value: pretty
accepted_values:
- id: env
name: env
type: string
type: '[ env | json | pretty | toml | yaml ]'
- id: json
name: json
type: string
type: '[ env | json | pretty | toml | yaml ]'
- id: pretty
name: pretty
type: string
type: '[ env | json | pretty | toml | yaml ]'
- id: toml
name: toml
type: string
type: '[ env | json | pretty | toml | yaml ]'
- id: yaml
name: yaml
type: string
type: '[ env | json | pretty | toml | yaml ]'
- id: override-name
name: --override-name <strings>
description: Override specific variable names.
@@ -103,9 +172,14 @@ commands:
tags:
- local-dev
links: []
usage: supabase start
usage: supabase start [flags]
subcommands: []
flags: []
flags:
- id: exclude
name: -x, --exclude <strings>
description: |
Names of containers to not start. [gotrue, realtime, storage-api, imgproxy, kong, inbucket, postgrest, pgadmin-schema-diff, migra, postgres-meta, studio, deno-relay]
default_value: '[]'
- id: supabase-secrets
title: supabase secrets
summary: Manage Supabase secrets
@@ -138,7 +212,7 @@ commands:
- id: env-file
name: --env-file <string>
description: Read secrets from a .env file.
default_value: ''
default_value: ""
- id: supabase-secrets-list
title: supabase secrets list
summary: List all secrets on Supabase
@@ -178,39 +252,36 @@ commands:
- id: db-password
name: --db-password <string>
description: Database password of the project.
default_value: ''
default_value: ""
- id: interactive
name: -i, --interactive
description: Enables interactive mode.
default_value: 'false'
default_value: "false"
- id: org-id
name: --org-id <string>
description: Organization ID to create the project in.
default_value: ''
default_value: ""
- id: plan
name: --plan <string>
name: --plan <[ free | pro ]>
description: Select a plan that suits your needs.
default_value: free
accepted_values:
- id: free
name: free
type: string
type: '[ free | pro ]'
- id: pro
name: pro
type: string
type: '[ free | pro ]'
- id: region
name: --region <string>
description: Select a region close to you for the best performance.
default_value: ''
default_value: ""
accepted_values:
- id: ca-central-1
name: ca-central-1
- id: ap-northeast-1
name: ap-northeast-1
type: string
- id: eu-west-2
name: eu-west-2
type: string
- id: us-east-1
name: us-east-1
- id: ap-northeast-2
name: ap-northeast-2
type: string
- id: ap-south-1
name: ap-south-1
@@ -221,24 +292,30 @@ commands:
- id: ap-southeast-2
name: ap-southeast-2
type: string
- id: ca-central-1
name: ca-central-1
type: string
- id: eu-central-1
name: eu-central-1
type: string
- id: eu-west-1
name: eu-west-1
type: string
- id: eu-west-2
name: eu-west-2
type: string
- id: eu-west-3
name: eu-west-3
type: string
- id: sa-east-1
name: sa-east-1
type: string
- id: us-east-1
name: us-east-1
type: string
- id: us-west-1
name: us-west-1
type: string
- id: ap-northeast-1
name: ap-northeast-1
type: string
- id: ap-northeast-2
name: ap-northeast-2
type: string
- id: eu-central-1
name: eu-central-1
type: string
- id: supabase-orgs
title: supabase orgs
summary: Manage Supabase organizations
@@ -257,6 +334,44 @@ commands:
usage: supabase orgs list
subcommands: []
flags: []
- id: supabase-network-restrictions
title: supabase network-restrictions
summary: Manage network restrictions
tags:
- management-api
links: []
subcommands:
- supabase-network-restrictions-get
- supabase-network-restrictions-update
flags:
- id: project-ref
name: --project-ref <string>
description: Project ref of the Supabase project.
default_value: ""
- id: supabase-network-restrictions-update
title: supabase network-restrictions update
summary: Update network restrictions
tags: []
links: []
usage: supabase network-restrictions update [flags]
subcommands: []
flags:
- id: bypass-cidr-checks
name: --bypass-cidr-checks
description: Bypass some of the CIDR validation checks.
default_value: "false"
- id: db-allow-cidr
name: --db-allow-cidr <strings>
description: CIDR to allow DB connections from.
default_value: '[]'
- id: supabase-network-restrictions-get
title: supabase network-restrictions get
summary: Get the current network restrictions
tags: []
links: []
usage: supabase network-restrictions get
subcommands: []
flags: []
- id: supabase-migration
title: supabase migration
summary: Manage database migration scripts
@@ -266,7 +381,28 @@ commands:
subcommands:
- supabase-migration-list
- supabase-migration-new
- supabase-migration-repair
flags: []
- id: supabase-migration-repair
title: supabase migration repair
summary: Repairs the migration history table
tags: []
links: []
usage: supabase migration repair <version> [flags]
subcommands: []
flags:
- id: status
name: --status <[ applied | reverted ]>
description: Version status to update.
required: true
default_value: ""
accepted_values:
- id: applied
name: applied
type: '[ applied | reverted ]'
- id: reverted
name: reverted
type: '[ applied | reverted ]'
- id: supabase-migration-new
title: supabase migration new
summary: Create an empty migration script
@@ -286,7 +422,7 @@ commands:
- id: password
name: -p, --password <string>
description: Password to your remote Postgres database.
default_value: ''
default_value: ""
- id: supabase-login
title: supabase login
summary: Authenticate using an access token
@@ -308,12 +444,12 @@ commands:
- id: password
name: -p, --password <string>
description: Password to your remote Postgres database.
default_value: ''
default_value: ""
- id: project-ref
name: --project-ref <string>
description: Project ref of the Supabase project.
required: true
default_value: ''
default_value: ""
- id: supabase-init
title: supabase init
summary: Initialize a local project
@@ -353,19 +489,19 @@ commands:
- id: db-url
name: --db-url <string>
description: Generate types from a database url.
default_value: ''
default_value: ""
- id: linked
name: --linked
description: Generate types from the linked project.
default_value: 'false'
default_value: "false"
- id: local
name: --local
description: Generate types from the local dev database.
default_value: 'false'
default_value: "false"
- id: project-id
name: --project-id <string>
description: Generate types from a project ID.
default_value: ''
default_value: ""
- id: schema
name: --schema <stringArray>
description: Schemas to generate types for.
@@ -394,11 +530,11 @@ commands:
name: --env-file <string>
description: |
Path to an env file to be populated to the Function environment.
default_value: ''
default_value: ""
- id: no-verify-jwt
name: --no-verify-jwt
description: Disable JWT verification for the Function.
default_value: 'false'
default_value: "false"
- id: supabase-functions-new
title: supabase functions new
summary: Create a new Function locally
@@ -419,15 +555,15 @@ commands:
- id: legacy-bundle
name: --legacy-bundle
description: Use legacy bundling mechanism.
default_value: 'false'
default_value: "false"
- id: no-verify-jwt
name: --no-verify-jwt
description: Disable JWT verification for the Function.
default_value: 'false'
default_value: "false"
- id: project-ref
name: --project-ref <string>
description: Project ref of the Supabase project.
default_value: ''
default_value: ""
- id: supabase-functions-delete
title: supabase functions delete
summary: Delete a Function from Supabase
@@ -441,10 +577,14 @@ commands:
- id: project-ref
name: --project-ref <string>
description: Project ref of the Supabase project.
default_value: ''
default_value: ""
- id: supabase-domains
title: supabase domains
summary: Manage custom domain names for Supabase projects
description: |
Manage custom domain names for Supabase projects.
Use of custom domains and vanity subdomains is mutually exclusive.
tags:
- management-api
links: []
@@ -458,14 +598,14 @@ commands:
- id: include-raw-output
name: --include-raw-output
description: Include raw output (useful for debugging).
default_value: 'false'
default_value: "false"
- id: project-ref
name: --project-ref <string>
description: Project ref of the Supabase project.
default_value: ''
default_value: ""
- id: supabase-domains-reverify
title: supabase domains reverify
summary: Re-verify the custom hostname config for your project.
summary: Re-verify the custom hostname config for your project
tags: []
links: []
usage: supabase domains reverify
@@ -473,7 +613,7 @@ commands:
flags: []
- id: supabase-domains-get
title: supabase domains get
summary: Get the current custom hostname config.
summary: Get the current custom hostname config
description: |
Retrieve the custom hostname config for your project, as stored in the Supabase platform.
tags: []
@@ -483,7 +623,7 @@ commands:
flags: []
- id: supabase-domains-delete
title: supabase domains delete
summary: Deletes the custom hostname config for your project.
summary: Deletes the custom hostname config for your project
tags: []
links: []
usage: supabase domains delete
@@ -491,7 +631,7 @@ commands:
flags: []
- id: supabase-domains-create
title: supabase domains create
summary: Create a custom hostname.
summary: Create a custom hostname
description: |-
Create a custom hostname for your Supabase project.
@@ -504,10 +644,10 @@ commands:
- id: custom-hostname
name: --custom-hostname <string>
description: The custom hostname to use for your Supabase project.
default_value: ''
default_value: ""
- id: supabase-domains-activate
title: supabase domains activate
summary: Activate the custom hostname for a project.
summary: Activate the custom hostname for a project
description: |-
Activates the custom hostname configuration for a project.
@@ -530,6 +670,15 @@ commands:
- supabase-db-push
- supabase-db-remote
- supabase-db-reset
- supabase-db-start
flags: []
- id: supabase-db-start
title: supabase db start
summary: Starts local Postgres database
tags: []
links: []
usage: supabase db start
subcommands: []
flags: []
- id: supabase-db-reset
title: supabase db reset
@@ -545,13 +694,12 @@ commands:
tags: []
links: []
subcommands:
- supabase-db-remote-changes
- supabase-db-remote-commit
flags:
- id: password
name: -p, --password <string>
description: Password to your remote Postgres database.
default_value: ''
default_value: ""
- id: supabase-db-remote-commit
title: supabase db remote commit
summary: Commit remote changes as a new migration
@@ -560,15 +708,6 @@ commands:
usage: supabase db remote commit
subcommands: []
flags: []
- id: supabase-db-remote-changes
title: supabase db remote changes
summary: Show changes on the remote database
description: Show changes on the remote database since last migration.
tags: []
links: []
usage: supabase db remote changes
subcommands: []
flags: []
- id: supabase-db-push
title: supabase db push
summary: Push new migrations to the remote database
@@ -581,11 +720,11 @@ commands:
name: --dry-run
description: |
Print the migrations that would be applied, but don't actually apply them.
default_value: 'false'
default_value: "false"
- id: password
name: -p, --password <string>
description: Password to your remote Postgres database.
default_value: ''
default_value: ""
- id: supabase-db-lint
title: supabase db lint
summary: Checks local database for typing error
@@ -595,16 +734,16 @@ commands:
subcommands: []
flags:
- id: level
name: --level <string>
name: --level <[ warning | error ]>
description: Error level to emit.
default_value: warning
accepted_values:
- id: warning
name: warning
type: string
type: '[ warning | error ]'
- id: error
name: error
type: string
type: '[ warning | error ]'
- id: schema
name: -s, --schema <strings>
description: List of schema to include.
@@ -620,11 +759,11 @@ commands:
- id: file
name: -f, --file <string>
description: Saves schema diff to a file.
default_value: ''
default_value: ""
- id: linked
name: --linked
description: Diffs local schema against linked project.
default_value: 'false'
default_value: "false"
- id: schema
name: -s, --schema <strings>
description: List of schema to include.
@@ -632,7 +771,7 @@ commands:
- id: use-migra
name: --use-migra
description: Use migra to generate schema diff.
default_value: 'false'
default_value: "false"
- id: supabase-completion
title: supabase completion
summary: Generate the autocompletion script for the specified shell
@@ -682,7 +821,7 @@ commands:
- id: no-descriptions
name: --no-descriptions
description: disable completion descriptions
default_value: 'false'
default_value: "false"
- id: supabase-completion-powershell
title: supabase completion powershell
summary: Generate the autocompletion script for powershell
@@ -703,7 +842,7 @@ commands:
- id: no-descriptions
name: --no-descriptions
description: disable completion descriptions
default_value: 'false'
default_value: "false"
- id: supabase-completion-fish
title: supabase completion fish
summary: Generate the autocompletion script for fish
@@ -727,7 +866,7 @@ commands:
- id: no-descriptions
name: --no-descriptions
description: disable completion descriptions
default_value: 'false'
default_value: "false"
- id: supabase-completion-bash
title: supabase completion bash
summary: Generate the autocompletion script for bash
@@ -760,4 +899,4 @@ commands:
- id: no-descriptions
name: --no-descriptions
description: disable completion descriptions
default_value: 'false'
default_value: "false"
spec/common-client-libs-sections.json
-8
View File
@@ -72,14 +72,6 @@
"type": "function",
"libs": ["js", "js_v1", "dart", "dart_v0"]
},
{
"id": "tester",
"title": "literally a test",
"slug": "tester",
"product": "database",
"type": "function",
"libs": ["dart", "dart_v0"]
},
{
"id": "using-filters",
"isFunc": false,
spec/examples/examples.yml
+1 -1
View File
@@ -749,7 +749,7 @@ functions:
- By default, Supabase projects return a maximum of 1,000 rows. This setting can be changed in your project's [API settings](https://app.supabase.com/project/_/settings/api). It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
- `select()` can be combined with [Filters](/docs/reference/javascript/using-filters)
- `select()` can be combined with [Modifiers](/docs/reference/javascript/using-modifiers)
- `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/hosting/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
- `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
examples:
- id: getting-your-data
name: Getting your data
spec/supabase_js_v2--old.yml
+1 -1
View File
@@ -688,7 +688,7 @@ pages:
- By default, Supabase projects return a maximum of 1,000 rows. This setting can be changed in your project's [API settings](https://app.supabase.com/project/_/settings/api). It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
- `select()` can be combined with [Filters](/docs/reference/javascript/using-filters)
- `select()` can be combined with [Modifiers](/docs/reference/javascript/using-modifiers)
- `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/hosting/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
- `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
examples:
- name: Getting your data
description: |
spec/supabase_js_v2.yml
+1 -1
View File
@@ -740,7 +740,7 @@ functions:
- By default, Supabase projects return a maximum of 1,000 rows. This setting can be changed in your project's [API settings](https://app.supabase.com/project/_/settings/api). It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use `range()` queries to paginate through your data.
- `select()` can be combined with [Filters](/docs/reference/javascript/using-filters)
- `select()` can be combined with [Modifiers](/docs/reference/javascript/using-modifiers)
- `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/hosting/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
- `apikey` is a reserved keyword if you're using the [Supabase Platform](/docs/guides/platform) and should be avoided as a column name](https://github.com/supabase/supabase/issues/5465).
examples:
- id: getting-your-data
name: Getting your data
studio/components/interfaces/Billing/Billing.constants.tsx
+7
View File
@@ -69,6 +69,13 @@ export const USAGE_BASED_PRODUCTS = [
units: 'bytes',
costPerUnit: 0.09,
},
{
key: 'storage_image_render_count',
attribute: 'total_storage_image_render_count',
title: 'Storage Images Transformed',
units: 'absolute',
costPerUnit: 0.005,
},
],
},
{
studio/components/interfaces/Reports/Reports.tsx
+6 -2
View File
@@ -17,7 +17,7 @@ import {
} from 'ui'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { checkPermissions, useStore } from 'hooks'
import { checkPermissions, useFlag, useStore } from 'hooks'
import { uuidv4 } from 'lib/helpers'
import { METRIC_CATEGORIES, METRICS, TIME_PERIODS_REPORTS } from 'lib/constants'
import { useProjectContentStore } from 'stores/projectContentStore'
@@ -263,6 +263,10 @@ const Reports = () => {
})
}
// Filter out total_storage_image_render_count if feature flag is not enabled
const storageImageResizeEnabled = useFlag('storageImageResize')
let metrics = METRICS.filter(it => it.key !== 'total_storage_image_render_count' || storageImageResizeEnabled);
const MetricOptions = () => {
return (
<>
@@ -273,7 +277,7 @@ const Reports = () => {
isNested
overlay={
<>
{METRICS.filter((metric) => metric?.category?.key === cat.key).map((metric) => {
{metrics.filter((metric) => metric?.category?.key === cat.key).map((metric) => {
return (
<Dropdown.Checkbox
key={metric.key}
studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
+85 -38
View File
@@ -1,13 +1,14 @@
import { FC, useEffect } from 'react'
import { Badge, IconAlertCircle, Loading } from 'ui'
import { Badge, Button, IconAlertCircle, Loading } from 'ui'
import { useStore, useProjectUsage } from 'hooks'
import { useStore, useProjectUsage, useFlag } from 'hooks'
import { formatBytes } from 'lib/helpers'
import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
import SparkBar from 'components/ui/SparkBar'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import InformationBox from 'components/ui/InformationBox'
import { USAGE_BASED_PRODUCTS } from 'components/interfaces/Billing/Billing.constants'
import { useRouter } from 'next/router'
interface Props {
projectRef?: string
@@ -16,13 +17,24 @@ interface Props {
const ProjectUsage: FC<Props> = ({ projectRef }) => {
const { ui } = useStore()
const { usage, error, isLoading } = useProjectUsage(projectRef)
const router = useRouter()
const subscriptionTier = ui.selectedProject?.subscription_tier
const projectHasNoLimits =
ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.PAYG ||
ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
subscriptionTier === PRICING_TIER_PRODUCT_IDS.PAYG ||
subscriptionTier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
const showUsageExceedMessage =
ui.selectedProject?.subscription_tier !== undefined && !projectHasNoLimits
const showUsageExceedMessage = subscriptionTier !== undefined && !projectHasNoLimits
const planNames = {
[PRICING_TIER_PRODUCT_IDS.FREE]: 'Free',
[PRICING_TIER_PRODUCT_IDS.PRO]: 'Pro',
[PRICING_TIER_PRODUCT_IDS.PAYG]: 'Pro',
[PRICING_TIER_PRODUCT_IDS.ENTERPRISE]: 'Enterprise',
}
const planName = subscriptionTier ? planNames[subscriptionTier] || 'current' : 'current'
useEffect(() => {
if (error) {
@@ -44,11 +56,21 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
)
}
const storageImageResizeEnabled = useFlag('storageImageResize')
// Filter out storage_image_render_count if feature flag is not enabled
const usageBasedProducts = USAGE_BASED_PRODUCTS.map((usageBasedProduct) => ({
...usageBasedProduct,
features: usageBasedProduct.features.filter(
(it) => it.key !== 'storage_image_render_count' || storageImageResizeEnabled
),
}))
return (
<Loading active={isLoading}>
{usage && (
<div>
{USAGE_BASED_PRODUCTS.map((product) => {
{usageBasedProducts.map((product) => {
const isExceededUsage =
showUsageExceedMessage &&
product.features
@@ -57,6 +79,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
return featureUsage.usage / featureUsage.limit > 1
})
.some((x) => x === true)
return (
<div
key={product.title}
@@ -104,6 +127,55 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
const usageRatio = usageValue / featureUsage.limit
const isApproaching = usageRatio >= USAGE_APPROACHING_THRESHOLD
const isExceeded = showUsageExceedMessage && usageRatio >= 1
const isAvailableInPlan = featureUsage.available_in_plan
let usageElement
if (!isAvailableInPlan) {
usageElement = (
<div className="flex justify-between items-center">
<span>Not included in {planName} tier</span>
<Button
size="tiny"
onClick={() =>
router.push(`/project/${projectRef}/settings/billing/update`)
}
>
Upgrade to Pro
</Button>
</div>
)
} else if (showUsageExceedMessage) {
usageElement = (
<SparkBar
type="horizontal"
barClass={`${
isExceeded
? 'bg-red-900'
: isApproaching
? 'bg-yellow-900'
: 'bg-brand-900'
}`}
value={usageValue}
max={featureUsage.limit}
labelBottom={
feature.units === 'bytes'
? formatBytes(usageValue)
: usageValue.toLocaleString()
}
labelTop={
feature.units === 'bytes'
? formatBytes(featureUsage.limit)
: featureUsage.limit.toLocaleString()
}
/>
)
} else {
usageElement = (
<span>
{feature.units === 'bytes' ? formatBytes(usageValue) : usageValue}
</span>
)
}
return (
<tr
@@ -117,40 +189,15 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
<>
{showUsageExceedMessage && (
<td className="hidden w-1/5 whitespace-nowrap p-3 text-sm text-scale-1200 lg:table-cell">
{(usageRatio * 100).toFixed(2)} %
{isAvailableInPlan ? (
<>{(usageRatio * 100).toFixed(2)} %</>
) : (
<>-</>
)}
</td>
)}
<td className="px-6 py-3 text-sm text-scale-1200">
{showUsageExceedMessage ? (
<SparkBar
type="horizontal"
barClass={`${
isExceeded
? 'bg-red-900'
: isApproaching
? 'bg-yellow-900'
: 'bg-brand-900'
}`}
value={usageValue}
max={featureUsage.limit}
labelBottom={
feature.units === 'bytes'
? formatBytes(usageValue)
: usageValue.toLocaleString()
}
labelTop={
feature.units === 'bytes'
? formatBytes(featureUsage.limit)
: featureUsage.limit.toLocaleString()
}
/>
) : (
<span>
{feature.units === 'bytes'
? formatBytes(usageValue)
: usageValue}
</span>
)}
{usageElement}
</td>
</>
)}
studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.types.ts
+1
View File
@@ -2,6 +2,7 @@ export interface ResourceUsage {
usage: number
limit: number
cost: number
available_in_plan: boolean
}
export interface UsageStats {
studio/lib/constants/metrics.tsx
+6
View File
@@ -209,6 +209,12 @@ export const METRICS = [
provider: 'daily-stats',
category: METRIC_CATEGORIES.API_STORAGE,
},
{
key: 'total_storage_image_render_count',
label: 'Storage Images Transformed',
provider: 'daily-stats',
category: METRIC_CATEGORIES.API_STORAGE,
},
{
key: 'total_storage_requests',
label: 'Storage Requests',