Merge branch 'supabase:master' into master

.github/workflows/prettier.yml

@@ -19,6 +19,7 @@ jobs:
         with:
           sparse-checkout: |
             apps
+            studio
       - name: Setup node
         uses: actions/setup-node@v3
         with:
@@ -31,7 +32,7 @@ jobs:
           npm i prettier@2 prettier-plugin-sql-cst
       - name: Run prettier
         run: |-
-          npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
+          npx prettier -c '{apps,studio}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
 
 
   # i18n is not a node package, so we handle that one separately

.prettierignore

@@ -7,7 +7,16 @@ apps/**/out
 # prettier-plugin-sql-cst only supports sqlite syntax
 **/supabase/migrations/*.sql
 apps/www/schema.sql
+apps/docs/**/generated/*
 examples/slack-clone/nextjs-slack-clone/full-schema.sql
 # ignore files with custom js formatting
 apps/docs/pages/guides/auth/*.mdx
 apps/docs/pages/guides/integrations/*.mdx
+studio/public
+studio/__mocks__
+studio/.next
+studio/.storybook
+studio/.swc
+studio/.turbo
+studio/node
+studio/data

DEVELOPERS.md

@@ -116,11 +116,45 @@ Now when you run a local development docs server you will see the new docs site.
 
 ---
 
+## Running Docker
+
+To test your changes, you need to run Supabase using Docker. Docker lets you use features of your locally modified Supabase version.
+
+#### Prerequsites
+
+First, make sure you have the Docker application installed on your device. You can download and install it from [here](https://docs.docker.com/get-docker/).
+
+#### Getting Started
+
+1. Navigate to the `docker` directory in your forked repo
+
+   ```sh
+   cd docker
+   ```
+
+2. Copy the example `env` file
+
+   ```sh
+   cp .env.example .env
+   ```
+
+3. Run docker
+
+   ```sh
+   docker-compose up
+   ```
+
+This command initializes the containers specified in the docker-compose.yml file. It might take a few moments to complete, depending on your computer and internet connection.
+
+Once the `docker-compose up` process completes, you should have your local version of Supabase up and running within Docker containers. You can access and test the features you've modified or added.
+
+Remember to keep the Docker application open as long as you're working with your local Supabase instance.
+
 ## Create a pull request
 
-After making your changes, open a pull request (PR). Once you submit your pull request, others from the Supabase team/community will review it with you.
+After making your changes, open a pull request. Once you submit your pull request, the Supabase team will review it with you.
 
-If you have an issue, like a merge conflict, or don't know how to open a pull request then check out [GitHub's pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests) tutorial on how to resolve merge conflicts and other issues. Once your PR has been merged, you will be proudly listed as a contributor in the [contributor chart](https://github.com/supabase/supabase/graphs/contributors).
+Once your PR has been merged, you will be proudly listed as a contributor in the [contributor chart](https://github.com/supabase/supabase/graphs/contributors).
 
 ---
 

README.md

@@ -212,6 +212,42 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
 <!--- Remove this list if you're translating to another language, it's hard to keep updated across multiple files-->
 <!--- Keep only the link to the list of translation files-->
 
+## Badges
+
+![Made with Supabase](./apps/www/public/badge-made-with-supabase.svg)
+
+```md
+[![Made with Supabase](https://supabase.com/badge-made-with-supabase.svg)](https://supabase.com)
+```
+
+```html
+<a href="https://supabase.com">
+  <img
+    width="168"
+    height="30"
+    src="https://supabase.com/badge-made-with-supabase.svg"
+    alt="Made with Supabase"
+  />
+</a>
+```
+
+![Made with Supabase (dark)](./apps/www/public/badge-made-with-supabase-dark.svg)
+
+```md
+[![Made with Supabase](https://supabase.com/badge-made-with-supabase-dark.svg)](https://supabase.com)
+```
+
+```html
+<a href="https://supabase.com">
+  <img
+    width="168"
+    height="30"
+    src="https://supabase.com/badge-made-with-supabase-dark.svg"
+    alt="Made with Supabase"
+  />
+</a>
+```
+
 ## Translations
 
 - [Arabic | العربية](/i18n/README.ar.md)

apps/docs/components/Frameworks.tsx

@@ -1,8 +1,8 @@
 import ButtonCard from './ButtonCard'
-import { useTheme } from 'common/Providers'
+import { useTheme } from 'next-themes'
 
 const Frameworks = () => {
-  const { isDarkMode } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   const frameworks = [
     {
@@ -14,12 +14,12 @@ const Frameworks = () => {
       href: '/guides/with-angular',
     },
     {
-      name: 'Expo',
+      name: 'Expo React Native',
       logo: {
         light: '/docs/img/icons/expo-icon.svg',
         dark: '/docs/img/icons/expo-icon-dark.svg',
       },
-      href: '/guides/with-expo',
+      href: '/guides/with-expo-react-native',
     },
     {
       name: 'Flutter',
@@ -110,8 +110,7 @@ const Frameworks = () => {
             layout="horizontal"
             to={x.href}
             title={x.name}
-            // [Joshen] Nice to have: theming
-            icon={isDarkMode ? x.logo.dark : x.logo.light}
+            icon={resolvedTheme === 'dark' ? x.logo.dark : x.logo.light}
           />
         </div>
       ))}

apps/docs/components/HomePageCover.tsx

@@ -63,15 +63,15 @@ const HomePageCover = (props) => {
   const GettingStarted = () => (
     <div
       className="
-        border border-scale-400 bg-scale-200
+        border bg-scale-200
         relative overflow-hidden
         grid grid-cols-12
         rounded-lg
         p-5 md:p-8
         "
     >
       <div className="col-span-full flex flex-col md:flex-row xl:flex-col justify-between gap-1 md:gap-3">
-        <div className="md:max-w-xs xl:max-w-none">
+        <div className="md:max-w-xs shrink w-fit xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
               <IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
@@ -82,7 +82,7 @@ const HomePageCover = (props) => {
             Discover how to set up a database to an app making queries in just a few minutes.
           </p>
         </div>
-        <div className="flex flex-wrap md:grid md:grid-cols-4 2xl:grid-cols-8 gap-2 sm:gap-3">
+        <div className="flex shrink-0 flex-wrap md:grid md:grid-cols-5 gap-2 sm:gap-3">
           {frameworks.map((framework, i) => (
             <Link key={i} href={framework.href} passHref>
               <a className="no-underline">
@@ -113,7 +113,7 @@ const HomePageCover = (props) => {
             </p>
           </div>
         </div>
-        <div className="w-full xl:max-w-[375px] 2xl:max-w-[620px] -mb-40">
+        <div className="w-full xl:max-w-[440px] -mb-40">
           <GettingStarted />
         </div>
       </div>

apps/docs/components/MDX/kotlin_project_setup.mdx

@@ -21,6 +21,7 @@ Now we are going to set up the database schema. You can just copy/paste the SQL
   size="small"
   type="underlined"
   defaultActiveId="sql"
+  queryGroup="database-method"
 >
 {/* <TabPanel id="dashboard" label="Dashboard">
 

apps/docs/components/MDX/project_setup.mdx

@@ -21,16 +21,35 @@ Now we are going to set up the database schema. We can use the "User Management
   size="small"
   type="underlined"
   defaultActiveId="dashboard"
+  queryGroup="database-method"
 >
 <TabPanel id="dashboard" label="Dashboard">
 
 1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
 2. Click **User Management Starter**.
 3. Click **Run**.
 
+<Admonition type="note">
+  You can easily pull the database schema down to your local project by running the following
+  commands:
+</Admonition>
+
+```bash
+supabase link
+supabase db pull
+```
+
 </TabPanel>
 <TabPanel id="sql" label="SQL">
 
+<Admonition type="note">
+  When working locally you can run the followng command to create a new migration file:
+</Admonition>
+
+```bash
+supabase migration new user_management_starter
+```
+
 <UserManagementSQLTemplate />
 
 </TabPanel>

apps/docs/components/MDX/storage_management.mdx

@@ -66,7 +66,7 @@ begin
   if coalesce(old.avatar_url, '') <> ''
       and (tg_op = 'DELETE' or (old.avatar_url <> new.avatar_url)) then
     -- extract avatar name
-    avatar_name := substring(old.avatar_url from '/([^\/]+)\?.*$');
+    avatar_name := old.avatar_url;
     select
       into status, content
       result.status, result.content

apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx

@@ -1,16 +1,10 @@
-import { useTheme } from 'common/Providers'
-import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { Fragment } from 'react'
 import { Badge, cn } from 'ui'
 import { HOMEPAGE_MENU_ITEMS } from './NavigationMenu.constants'
 import HomeMenuIconPicker from './HomeMenuIconPicker'
 
 const NavigationMenuHome = () => {
-  const router = useRouter()
-  const { isDarkMode } = useTheme()
-
   return (
     <div className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150">
       <ul className="relative w-full flex flex-col gap-4 pb-5">

apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx

@@ -5,6 +5,7 @@ import {
   IconMenuCli,
   IconMenuCsharp,
   IconMenuDatabase,
+  IconMenuGraphQL,
   IconMenuEdgeFunctions,
   IconMenuFlutter,
   IconMenuGettingStarted,
@@ -16,7 +17,7 @@ import {
   IconMenuRealtime,
   IconMenuResources,
   IconMenuSelfHosting,
-  IconMenuServerlessApis,
+  IconMenuRestApis,
   IconMenuStorage,
   IconMenuSwift,
   IconMenuStatus,
@@ -32,8 +33,10 @@ function getMenuIcon(menuKey: string, width: number = 16, height: number = 16) {
       return <IconMenuGettingStarted width={width} height={height} />
     case 'database':
       return <IconMenuDatabase width={width} height={height} />
-    case 'serverless-apis':
-      return <IconMenuServerlessApis width={width} height={height} />
+    case 'rest':
+      return <IconMenuRestApis width={width} height={height} />
+    case 'graphql':
+      return <IconMenuGraphQL width={width} height={height} />
     case 'auth':
       return <IconMenuAuth width={width} height={height} />
     case 'edge-functions':

apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx

@@ -23,6 +23,25 @@ export function IconMenuHome({ width = 16, height = 16 }: HomeMenuIcon) {
   )
 }
 
+export function IconMenuGraphQL({ width = 16, height = 16 }: HomeMenuIcon) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12,5.37L11.56,5.31L6,14.9C6.24,15.11 6.4,15.38 6.47,15.68H17.53C17.6,15.38 17.76,15.11 18,14.9L12.44,5.31L12,5.37M6.6,16.53L10.88,19.06C11.17,18.79 11.57,18.63 12,18.63C12.43,18.63 12.83,18.79 13.12,19.06L17.4,16.53H6.6M12,22A1.68,1.68 0 0,1 10.32,20.32L10.41,19.76L6.11,17.21C5.8,17.57 5.35,17.79 4.84,17.79A1.68,1.68 0 0,1 3.16,16.11C3.16,15.32 3.69,14.66 4.42,14.47V9.36C3.59,9.25 2.95,8.54 2.95,7.68A1.68,1.68 0 0,1 4.63,6C5.18,6 5.66,6.26 5.97,6.66L10.38,4.13L10.32,3.68C10.32,2.75 11.07,2 12,2C12.93,2 13.68,2.75 13.68,3.68L13.62,4.13L18.03,6.66C18.34,6.26 18.82,6 19.37,6A1.68,1.68 0 0,1 21.05,7.68C21.05,8.54 20.41,9.25 19.58,9.36V14.47C20.31,14.66 20.84,15.32 20.84,16.11A1.68,1.68 0 0,1 19.16,17.79C18.65,17.79 18.2,17.57 17.89,17.21L13.59,19.76L13.68,20.32A1.68,1.68 0 0,1 12,22M10.8,4.86L6.3,7.44L6.32,7.68C6.32,8.39 5.88,9 5.26,9.25L5.29,14.5L10.8,4.86M13.2,4.86L18.71,14.5L18.74,9.25C18.12,9 17.68,8.39 17.68,7.68L17.7,7.44L13.2,4.86Z"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeLinejoin="bevel"
+      />
+    </svg>
+  )
+}
+
 export function IconMenuApi({ width = 16, height = 16 }: HomeMenuIcon) {
   return (
     <svg
@@ -118,7 +137,7 @@ export function IconMenuDatabase({ width = 16, height = 16 }: HomeMenuIcon) {
   )
 }
 
-export function IconMenuServerlessApis({ width = 16, height = 16 }: HomeMenuIcon) {
+export function IconMenuRestApis({ width = 16, height = 16 }: HomeMenuIcon) {
   return (
     <svg
       viewBox="0 0 16 16"