diff --git a/apps/docs/components/FooterHelpCallout.tsx b/apps/docs/components/FooterHelpCallout.tsx index 2eb6421dc4c..89f3265ec16 100644 --- a/apps/docs/components/FooterHelpCallout.tsx +++ b/apps/docs/components/FooterHelpCallout.tsx @@ -1,12 +1,38 @@ -const FooterHelpCallout = () => { +import { ReactMarkdown } from 'react-markdown/lib/react-markdown' + +export type FooterHelpCalloutType = 'default' | 'postgres' + +const content = { + default: { + title: 'Need some help?', + description: `Not to worry, our specialist engineers are here to help. Submit a support ticket through the [Dashboard](https://app.supabase.com/support/new).`, + }, + postgres: { + title: 'Looking for Serverless Postgres?', + description: `Supabase is the fastest way to get started with Postgres in a serverless environment. [Learn more](https://supabase.com/database?utm=postgres-helpers).`, + }, +} + +const FooterHelpCallout = ({ + footerHelpType = 'default', + title, +}: { + footerHelpType: FooterHelpCalloutType + title: any +}) => { return ( -
-
-
Need some help?
-

- Not to worry, our specialist engineers are here to help. Submit a support ticket through - the Dashboard. -

+
+
+
{content[footerHelpType].title}
+ {content[footerHelpType].description}
) diff --git a/apps/docs/components/MDX/project_setup.mdx b/apps/docs/components/MDX/project_setup.mdx index 9efe03df58e..f1f72f08e64 100644 --- a/apps/docs/components/MDX/project_setup.mdx +++ b/apps/docs/components/MDX/project_setup.mdx @@ -32,7 +32,12 @@ or you can just copy/paste the SQL from below and run it yourself. 3. Click **Run**. @@ -53,5 +58,10 @@ We just need to get the URL and `anon` key from the API settings. 3. Find your API `URL`, `anon`, and `service_role` keys on this page. diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts index 16acfdafa4b..1d0f16fd393 100644 --- a/apps/docs/components/Navigation/Navigation.constants.ts +++ b/apps/docs/components/Navigation/Navigation.constants.ts @@ -243,6 +243,8 @@ export const menuItems: NavMenu = { items: [ { name: 'Overview', url: '/guides/realtime', items: [] }, { name: 'Quickstart', url: '/guides/realtime/quickstart', items: [] }, + { name: 'Broadcast', url: '/guides/realtime/broadcast', items: [] }, + { name: 'Presence', url: '/guides/realtime/presence', items: [] }, { name: 'Postgres Changes', url: '/guides/realtime/postgres-changes', items: [] }, { name: 'Rate Limits', url: '/guides/realtime/rate-limits', items: [] }, ], diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 4c3ca6b0c70..ba16f51d218 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -509,6 +509,8 @@ export const realtime = { name: 'Channels', url: undefined, items: [ + { name: 'Broadcast', url: '/guides/realtime/broadcast', items: [] }, + { name: 'Presence', url: '/guides/realtime/presence', items: [] }, { name: 'Postgres Changes', url: '/guides/realtime/postgres-changes', items: [] }, { name: 'Rate Limits', url: '/guides/realtime/rate-limits', items: [] }, ], @@ -623,8 +625,7 @@ export const resources = { label: 'Resources', url: '/guides/resources', items: [ - // removing until the examples page is reworked - // { name: 'Examples', url: '/guides/resources/examples', items: [] }, + { name: 'Examples', url: '/guides/resources/examples', items: [] }, { name: 'Glossary', url: '/guides/resources/glossary', items: [] }, { name: 'Migrate to Supabase', @@ -652,6 +653,24 @@ export const resources = { }, ], }, + { + name: 'Postgres resources', + url: undefined, + items: [ + { + name: 'Drop all tables in schema', + url: '/guides/resources/postgres/dropping-all-tables-in-schema', + }, + { + name: 'Select first row per group', + url: '/guides/resources/postgres/first-row-in-group', + }, + { + name: 'Print PostgreSQL version', + url: '/guides/resources/postgres/which-version-of-postgres', + }, + ], + }, ], } @@ -793,7 +812,7 @@ export const reference = { url: '/reference/python/start', level: 'reference_python', items: [], - icon: 'docs/img/icons/javascript.svg', + icon: '/img/icons/menu/reference-python', }, // { // name: 'supabase-python', diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx index b0a5a9c78e1..7e52d424832 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx @@ -12,8 +12,17 @@ const NavigationMenuGuideList: React.FC = ({ id, active }) => { // get url const url = router.asPath - // remove the end of the url if a deep link - const firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/') + + // We need to decide how deep we want the menu to be for matching urls + // if the links are really deep, we don't want to match all the way out + // But we need to reach out further to make the structure of /resources/postgres/ work + // look at /resources/postgres/ vs /auth/phone-login for how these are different + let firstLevelRoute + if (url.includes('resources/postgres/')) { + firstLevelRoute = url?.split('/')?.slice(0, 5)?.join('/') + } else { + firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/') + } return ( - - -Initializing a new client is pretty straightforward. Find your project url and public key from the -admin panel and pass it into your client initialization function. - -`supabase-csharp` is heavily dependent on Models deriving from `BaseModel`. To interact with the API, one must have the associated model (see example) specified. - -Leverage `Table`, `PrimaryKey`, and `Column` attributes to specify names of classes/properties that are different from their C# Versions. - - - - - - - - - ```csharp - var url = Environment.GetEnvironmentVariable("SUPABASE_URL"); - var key = Environment.GetEnvironmentVariable("SUPABASE_KEY"); - - var options = new Supabase.SupabaseOptions - { - AutoConnectRealtime = true - }; - - var supabase = new Supabase.Client(url, key, options); - await supabase.InitializeAsync(); - ``` - - - - - - ```csharp - public static MauiApp CreateMauiApp() - { - // ... - var builder = MauiApp.CreateBuilder(); - - var url = Environment.GetEnvironmentVariable("SUPABASE_URL"); - var key = Environment.GetEnvironmentVariable("SUPABASE_KEY"); - var options = new SupabaseOptions - { - AutoRefreshToken = true, - AutoConnectRealtime = true, - SessionHandler = new SupabaseSessionHandler() - }; - - // Note the creation as a singleton. - builder.Services.AddSingleton(provider => new Supabase.Client(url, key, options)); - } - ``` - - - - - ```csharp - // Given the following Model representing the Supabase Database (Message.cs) - [Table("messages")] - public class Message : BaseModel - { - [PrimaryKey("id")] - public int Id { get; set; } - - [Column("username")] - public string UserName { get; set; } - - [Column("channel_id")] - public int ChannelId { get; set; } - - public override bool Equals(object obj) - { - return obj is Message message && - Id == message.Id; - } - - public override int GetHashCode() - { - return HashCode.Combine(Id); - } - } - - void Initialize() - { - // Get All Messages - var response = await client.Table().Get(); - List models = response.Models; - - // Insert - var newMessage = new Message { UserName = "acupofjose", ChannelId = 1 }; - await client.Table().Insert(); - - // Update - var model = response.Models.First(); - model.UserName = "elrhomariyounes"; - await model.Update(); - - // Delete - await response.Models.Last().Delete(); - - // etc. - } - ``` - - - - - - diff --git a/apps/docs/layouts/DefaultGuideLayout.tsx b/apps/docs/layouts/DefaultGuideLayout.tsx index ea39047c4dd..d2c01704763 100644 --- a/apps/docs/layouts/DefaultGuideLayout.tsx +++ b/apps/docs/layouts/DefaultGuideLayout.tsx @@ -1,8 +1,15 @@ import { FC } from 'react' +import { FooterHelpCalloutType } from '~/components/FooterHelpCallout' import GuideLayout from './guides' interface Props { - meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string } + meta: { + title: string + description?: string + hide_table_of_contents?: boolean + video?: string + footerHelpType?: FooterHelpCalloutType + } children: any toc?: any currentPage?: string diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx index 18a1d960b4d..6c7a05943ab 100644 --- a/apps/docs/layouts/SiteLayout.tsx +++ b/apps/docs/layouts/SiteLayout.tsx @@ -334,7 +334,6 @@ const SiteLayout = ({ children }) => {
{children} -
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx index 5f3b1d90f30..5899d282fc7 100644 --- a/apps/docs/layouts/guides/index.tsx +++ b/apps/docs/layouts/guides/index.tsx @@ -6,6 +6,7 @@ import { FC, useEffect, useRef, useState } from 'react' import { IconExternalLink } from 'ui' import components from '~/components' import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils' +import FooterHelpCallout, { FooterHelpCalloutType } from '~/components/FooterHelpCallout' import GuidesTableOfContents from '~/components/GuidesTableOfContents' import useHash from '~/hooks/useHash' @@ -16,6 +17,7 @@ interface Props { hide_table_of_contents?: boolean breadcrumb?: string subtitle?: string + footerHelpType?: FooterHelpCalloutType video?: string canonical?: string } @@ -161,6 +163,7 @@ const Layout: FC = (props) => {
)} + ) } diff --git a/apps/docs/pages/guides/api.mdx b/apps/docs/pages/guides/api.mdx index 43d3610aef2..e31cafee9aa 100644 --- a/apps/docs/pages/guides/api.mdx +++ b/apps/docs/pages/guides/api.mdx @@ -85,7 +85,12 @@ This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATC 1. Click **Save**. @@ -113,7 +118,12 @@ Every Supabase project has a unique API URL. Your API is secured behind an API g 3. Find your API `URL`, `anon`, and `service_role` keys on this page. The REST API and the GraphQL API are both accessible through this URL: @@ -142,7 +152,12 @@ Let's view the documentation for a `countries` table which we created in our dat 3. Switch between the JavaScript and the cURL docs using the tabs. #### GraphQL @@ -287,7 +302,12 @@ By default Realtime is disabled on your database. Let's turn on Realtime for the 4. Control which tables broadcast changes by selecting **Source** and toggling each table. 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 81ec0800566..2f0c721da89 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 @@ -295,11 +295,12 @@ export default function SupabaseProvider({ children }: { children: React.ReactNo } export const useSupabase = () => { + let context = useContext(Context); if (context === undefined) { throw new Error("useSupabase must be used inside SupabaseProvider"); + } else { + return context; } - - return useContext(Context) } ``` diff --git a/apps/docs/pages/guides/auth/overview.mdx b/apps/docs/pages/guides/auth/overview.mdx index 1ed7efbdb42..07cbc79859f 100644 --- a/apps/docs/pages/guides/auth/overview.mdx +++ b/apps/docs/pages/guides/auth/overview.mdx @@ -116,7 +116,12 @@ Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-sec Authentication only gets you so far. When you need granular authorization rules, nothing beats PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html). Supabase makes it simple to turn RLS on and off. ### Policies @@ -124,7 +129,12 @@ Authentication only gets you so far. When you need granular authorization rules, [Policies](https://www.postgresql.org/docs/current/sql-createpolicy.html) are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs. With policies, your database becomes the rules engine. Instead of repetitively filtering your queries, like this ... @@ -172,7 +182,12 @@ Supabase provides multiple endpoints to authenticate and manage your users: When users sign up, Supabase assigns them a unique ID. You can reference this ID anywhere in your database. For example, you might create a `profiles` table referencing `id` in the `auth.users` table using a `user_id` field. export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/database.mdx b/apps/docs/pages/guides/database.mdx index 7efa2ad7513..d4667ed82a3 100644 --- a/apps/docs/pages/guides/database.mdx +++ b/apps/docs/pages/guides/database.mdx @@ -34,7 +34,10 @@ You don't have to be a database expert to start using Supabase. Our table view m Dig into the relationships within your data. ### Clone tables @@ -42,7 +45,12 @@ Dig into the relationships within your data. You can duplicate your tables, just like you would inside a spreadsheet. ### The SQL Editor @@ -50,7 +58,12 @@ You can duplicate your tables, just like you would inside a spreadsheet. Supabase comes with a SQL Editor. You can also save your favorite queries to run later! ### Additional features @@ -74,7 +87,12 @@ To expand the functionality of your Postgres database, you can use extensions. You can enable Postgres extensions with the click of a button within the Supabase dashboard. [Learn more](/docs/guides/database/extensions) about all the extensions provided on Supabase. diff --git a/apps/docs/pages/guides/database/connecting-to-postgres.mdx b/apps/docs/pages/guides/database/connecting-to-postgres.mdx index 13bade73e20..7d1162c6f8d 100644 --- a/apps/docs/pages/guides/database/connecting-to-postgres.mdx +++ b/apps/docs/pages/guides/database/connecting-to-postgres.mdx @@ -45,7 +45,12 @@ You cannot manage the database schema via the API (for security reasons). To do You can find the API URL and Keys in the [Dashboard](https://app.supabase.com/project/_/settings/api). ## Direct connections @@ -59,7 +64,12 @@ Every Supabase project provides a full Postgres database. You can connect to the 3. Find your Connection Info and Connection String. Direct connections are on port `5432`. ## Connection Pool @@ -104,7 +114,12 @@ This is the most granular option. Connections are returned to the pool after eve 3. Find your Connection Info and Connection String. Connection pooling is on port `6543`. ## Connecting with SSL diff --git a/apps/docs/pages/guides/database/extensions.mdx b/apps/docs/pages/guides/database/extensions.mdx index 6ae1fd74546..1c10af0d6bd 100644 --- a/apps/docs/pages/guides/database/extensions.mdx +++ b/apps/docs/pages/guides/database/extensions.mdx @@ -24,7 +24,12 @@ Supabase has pre-installed some of the most useful open source extensions. 3. Enable or disable an extension. diff --git a/apps/docs/pages/guides/database/overview.mdx b/apps/docs/pages/guides/database/overview.mdx index 7efa2ad7513..d4667ed82a3 100644 --- a/apps/docs/pages/guides/database/overview.mdx +++ b/apps/docs/pages/guides/database/overview.mdx @@ -34,7 +34,10 @@ You don't have to be a database expert to start using Supabase. Our table view m Dig into the relationships within your data. ### Clone tables @@ -42,7 +45,12 @@ Dig into the relationships within your data. You can duplicate your tables, just like you would inside a spreadsheet. ### The SQL Editor @@ -50,7 +58,12 @@ You can duplicate your tables, just like you would inside a spreadsheet. Supabase comes with a SQL Editor. You can also save your favorite queries to run later! ### Additional features @@ -74,7 +87,12 @@ To expand the functionality of your Postgres database, you can use extensions. You can enable Postgres extensions with the click of a button within the Supabase dashboard. [Learn more](/docs/guides/database/extensions) about all the extensions provided on Supabase. diff --git a/apps/docs/pages/guides/database/replication.mdx b/apps/docs/pages/guides/database/replication.mdx index e7c349ca91f..15b20d3331a 100644 --- a/apps/docs/pages/guides/database/replication.mdx +++ b/apps/docs/pages/guides/database/replication.mdx @@ -21,7 +21,12 @@ Replication is done through _publications_, a method of choosing which changes t 4. Control which tables broadcast changes by selecting **Source** and toggling each table. ## Create a publication diff --git a/apps/docs/pages/guides/database/tables.mdx b/apps/docs/pages/guides/database/tables.mdx index f8ba1cd2e89..239e08147cd 100644 --- a/apps/docs/pages/guides/database/tables.mdx +++ b/apps/docs/pages/guides/database/tables.mdx @@ -42,7 +42,12 @@ and run the SQL queries yourself. 1. Go to the [Table Editor](https://app.supabase.com/project/_/editor) page in the Dashboard. diff --git a/apps/docs/pages/guides/getting-started/features.mdx b/apps/docs/pages/guides/getting-started/features.mdx index c1e1a0dcfc9..71fc2953aa1 100755 --- a/apps/docs/pages/guides/getting-started/features.mdx +++ b/apps/docs/pages/guides/getting-started/features.mdx @@ -96,11 +96,11 @@ Receive your database changes through websockets. [Docs](/docs/guides/realtime/p ### User Broadcasting -Send messages between connected users through websockets. [Docs](/docs/guides/realtime#broadcast). +Send messages between connected users through websockets. [Docs](/docs/guides/realtime/broadcast). ### User Presence -Synchronize shared state across your users, including online status and typing indicators. [Docs](/docs/guides/realtime#presence). +Synchronize shared state across your users, including online status and typing indicators. [Docs](/docs/guides/realtime/presence). ### Client libraries 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 b76748ad8aa..ae2870332c2 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx @@ -62,7 +62,6 @@ import { User, } from '@supabase/supabase-js' import { environment } from 'src/environments/environment' -import { Database } from 'src/schema' export interface Profile { id?: string @@ -136,7 +135,7 @@ Let's set up an Angular component to manage logins and sign ups. We'll use Magic Create an **AuthComponent** with `ng g c auth` Angular CLI command. ```ts title=src/app/auth/auth.component.ts -import { Component, OnInit } from '@angular/core' +import { Component } from '@angular/core' import { FormBuilder } from '@angular/forms' import { SupabaseService } from '../supabase.service' @@ -145,7 +144,7 @@ import { SupabaseService } from '../supabase.service' templateUrl: './auth.component.html', styleUrls: ['./auth.component.css'], }) -export class AuthComponent implements OnInit { +export class AuthComponent { loading = false signInForm = this.formBuilder.group({ @@ -157,8 +156,6 @@ export class AuthComponent implements OnInit { private readonly formBuilder: FormBuilder ) {} - ngOnInit(): void {} - async onSubmit(): Promise { try { this.loading = true @@ -406,7 +403,7 @@ Let's create an avatar for the user so that they can upload a profile photo. Create an **AvatarComponent** with `ng g c avatar` Angular CLI command. ```ts title=src/app/avatar/avatar.component.ts -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { Component, EventEmitter, Input, Output } from '@angular/core' import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser' import { SupabaseService } from '../supabase.service' @@ -415,7 +412,7 @@ import { SupabaseService } from '../supabase.service' templateUrl: './avatar.component.html', styleUrls: ['./avatar.component.css'], }) -export class AvatarComponent implements OnInit { +export class AvatarComponent { _avatarUrl: SafeResourceUrl | undefined uploading = false @@ -430,8 +427,6 @@ export class AvatarComponent implements OnInit { constructor(private readonly supabase: SupabaseService, private readonly dom: DomSanitizer) {} - ngOnInit(): void {} - async downloadImage(path: string) { try { const { data } = await this.supabase.downLoadImage(path) diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx index 6fd481ea9cc..2f3e0e9f4a4 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx @@ -129,7 +129,12 @@ or you can just copy/paste the SQL from below and run it yourself. 3. Click **Run**. @@ -204,7 +209,12 @@ We just need to get the URL as well as the `anon`, `service_role` and `JWT_SECRE 2. Find your API `URL`, `anon`, and `service_role` keys on this page. ## Building the App diff --git a/apps/docs/pages/guides/integrations/plasmic.mdx b/apps/docs/pages/guides/integrations/plasmic.mdx index 2ca62ccabcb..f90eb871bcc 100644 --- a/apps/docs/pages/guides/integrations/plasmic.mdx +++ b/apps/docs/pages/guides/integrations/plasmic.mdx @@ -106,7 +106,7 @@ To tell Plasmic to look for your code components on your dev server, you’ll ne