diff --git a/DEVELOPERS.md b/DEVELOPERS.md index 0d23fbd42f6..e427b76ed6f 100644 --- a/DEVELOPERS.md +++ b/DEVELOPERS.md @@ -1,45 +1,47 @@ # Developing Supabase -1. [Development setup](#development-setup) - - [Install dependencies](#install-dependencies) - - [Fork the repository](#fork-the-repository) -1. [Build Supabase](#build-supabase) - - [Choose a directory](#choose-a-directory) -1. [Start a development server](#start-a-development-server) - - [Supabase Website](#supabase-website) - - [Supabase Docs](#supabase-docs) - - [Supabase Studio](#supabase-studio) -1. [Create a pull request](#create-a-pull-request) +1. [Getting started](#getting-started) + - [Install dependencies](#install-dependencies) +2. [Local development](#local-development) + - [Fork the repository](#fork-the-repository) + - [Clone the repo](#clone-the-repo) + - [Running turborepo](#running-turborepo) + - [Shared components](#shared-components) + - [Installing packages](#installing-packages) +3. [Create a pull request](#create-a-pull-request) - [Common tasks](#common-tasks) - [Add a redirect](#add-a-redirect) -- [Monorepo](#monorepo) - - [Getting started](#getting-started) - - [Shared components](#shared-components) - - [Installing packages](#installing-packages) - - [Development](#development) - [Community channels](#community-channels) -## Development setup +## Getting started -Thanks for your interest in Supabase and for wanting to contribute! Before you begin, read the +Thanks for your interest in [Supabase](https://supabase.com) and for wanting to contribute! Before you begin, read the [code of conduct](https://github.com/supabase/.github/blob/main/CODE_OF_CONDUCT.md) and check out the [existing issues](https://github.com/supabase/supabase/issues). -This document describes how to set up your development environment to build and test Supabase. +This document describes how to set up your development environment to build and test [Supabase](https://supabase.com). ### Install dependencies -You need to install and configure the following dependencies on your machine to build Supabase: +You need to install and configure the following dependencies on your machine to build [Supabase](https://supabase.com): - [Git](http://git-scm.com/) - [Node.js v16.x (LTS)](http://nodejs.org) - [npm](https://www.npmjs.com/) version 7+ or [Yarn](https://yarnpkg.com/) +## Local development + +We are in the process of migrating this repository to monorepo, using [Turborepo](https://turborepo.org/docs). + +Eventually, all the apps will be run using [Turborepo](https://turborepo.org/docs), which will significantly improve the developer workflow. + +If you are working on the ([docs site](https://supabase.com/docs)), please refer to this [developers guide](https://github.com/supabase/supabase/tree/master/apps/reference/DEVELOPERS.md). + ### Fork the repository -To contribute code to Supabase, you must fork the [Supabase Repository](https://github.com/supabase/supabase). +To contribute code to [Supabase](https://supabase.com), you must fork the [Supabase Repository](https://github.com/supabase/supabase). -## Build Supabase +### Clone the repo 1. Clone your GitHub forked repository: @@ -52,104 +54,61 @@ To contribute code to Supabase, you must fork the [Supabase Repository](https:// cd supabase ``` -### Choose a directory +### Running turborepo -Choose if you want to work on the [Supabase Website](https://supabase.com), [Supabase Docs](https://supabase.com/docs), or [Supabase Studio](https://app.supabase.com). +[Supabase](https://supabase.com) uses [Turborepo](https://turborepo.org/docs) to manage and run this monorepo. -1. Go to the [Supabase Website](https://supabase.com) directory +1. Install the dependences in the root of the repo. ```sh - cd apps/www + npm install # install dependencies ``` - Go to the [Supabase Docs](https://supabase.com/docs) directory - +2. You can then run the apps simultaneously with the following. ```sh - cd apps/docs + npm run dev # start all the applications ``` - Go to the [Supabase Studio](https://app.supabase.com) directory +Then visit, and edit, any of the following sites: - ```sh - cd studio - ``` +| Site | Directory | Scope name | Description | Local development server | +| -------------------------------------------- | -------------- | ---------- | ------------------------------------ | ------------------------ | +| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 | +| [app.supabase.com](https://app.supabase.com) | `/studio` | studio | Studio dashboard | http://localhost:8082 | +| [supabase.com/docs] Next.js based Docs site | `/apps/docs` . | docs | Guides and Reference (Next.js based) | http://localhost:3001 | -1. Install npm/yarn dependencies: +#### Running sites individually - npm +You can run any of the sites indiviudally by using the scope name. For example: - ```sh - npm install - ``` +```sh +npm run dev:www +``` - or with yarn +#### Shared components - ```sh - yarn install - ``` +The monorepo has a set of shared components under `/packages`: -## Start a development server +- `/packages/common`: Common React code, shared between all sites. +- `/packages/config`: All shared config +- `/packages/spec`: Generates documentation using spec files. +- `/packages/tsconfig`: Shared Typescript settings -To debug code and to see your changes in real time, it is often useful to have a local HTTP server. Click one of the three links below to choose which development server you want to start. +#### Installing packages -- [Supabase Website](#supabase-website) -- [Supabase Docs](#supabase-docs) -- [Supabase Studio](#supabase-studio) +Installing a package with NPM workspaces requires you to add the `-w` flag to tell NPM which workspace you want to install into. Do not install dependencies in their local folder, install them from the route using the `-w` flag. -### Supabase Website +The format is: `npm install -w=`. -The website is moving to a new monorepo setup. See the [Monorepo](#monorepo) section below. +For example: -### Supabase Docs +- `npm install react -w common`: installs into `./packages/common` +- `npm install react -w www`: installs into `./apps/www` +- `npm install react -w studio`: installs into `./studio` -1. Build development server +You do not need to install `devDependencies` in each workspace. These can all be installed in the root package. - npm - - ```sh - npm run build - ``` - - or with yarn - - ```sh - yarn build - ``` - -1. Start development server - - npm - - ```sh - npm run dev - ``` - - or with yarn - - ```sh - yarn dev - ``` - -1. Access the local server in your web browser at http://localhost:3001/docs. - -### Supabase Studio - -1. Start development server - - npm - - ```sh - npm run dev - ``` - - or with yarn - - ```sh - yarn dev - ``` - -1. Access the local server in your web browser at http://localhost:8082/. -See the [Supabase Studio readme](./studio/README.md) for more information. +--- ## Create a pull request @@ -165,63 +124,6 @@ Did you have an issue, like a merge conflict, or don't know how to open a pull r Create a new entry in the [`redirects.js`](https://github.com/supabase/supabase/blob/master/apps/www/lib/redirects.js) file in our main site. -## Monorepo - -We are in the process of migrating this repository to monorepo, using Turborepo. -Eventually, the docs and the Studio will be run using Turborepo, which will significantly improve the developer workflow. -You must be using NPM 7 or higher. - -### Getting started - -```sh -npm install # install dependencies -npm run dev # start all the applications -``` - -Then edit and visit any of the following sites: - -Site | Directory | Description | Local development server ----- | --------- | ----------- | ------------------------ -[supabase.com](https://supabase.com) | `/apps/www` | The main website | http://localhost:3000 -[supabase.com/docs](https://supabase.com/docs) | `apps/docs` | Guides and Reference documentation | http://localhost:3001/docs -[POC] Community forum | `/apps/temp-community-forum` | GitHub Discussions in a Next.js site | http://localhost:3002 -[POC] DEV articles site | `/apps/temp-community-tutorials` | A Next.js site for our DEV articles (which community members can write) | http://localhost:3003 - -### Shared components - -The monorepo has a set of shared components under `/packages`: - -- `/packages/common`: Common React code, shared between all sites. -- `/packages/config`: All shared config -- `/packages/spec`: Generates documentation using spec files. -- `/packages/tsconfig`: Shared Typescript settings -- `/packages/ui`: Shared UI components (formerly @supabase/ui) - -To use these 'packages', or any of their components from a Next.JS app, you must use `next-transpile-modules` in the `next.config.js` file. This looks like: - -```tsx -// next.config.js -const withTM = require('next-transpile-modules')(['ui', 'common']) -module.exports = withTM({}) -``` - -### Installing packages - -Installing a package with NPM workspaces requires you to add the `-w` flag to tell NPM which workspace you want to install into. - -The format is: `npm install -w=`. - -For example: - -- `npm install @supabase/ui -w common`: installs into `./packages/common` -- `npm install @supabase/ui -w www`: installs into `./apps/www` - -You do not need to install `devDependencies` in each workspace. These can all be installed in the root package. - -### Development - -`npm run dev` - --- ## Community channels diff --git a/apps/docs/components/AuthProviders.tsx b/apps/docs/components/AuthProviders.tsx index 22bd59a19e2..a1903636904 100644 --- a/apps/docs/components/AuthProviders.tsx +++ b/apps/docs/components/AuthProviders.tsx @@ -8,15 +8,7 @@ export default function AuthProviders() {
-
- {/* {x.logo && {x.name}} */} +

{x.name}

{x.official ? ( diff --git a/apps/docs/components/CodeBlock/CodeBlock.tsx b/apps/docs/components/CodeBlock/CodeBlock.tsx index 463a6062c36..1ca6b128c12 100644 --- a/apps/docs/components/CodeBlock/CodeBlock.tsx +++ b/apps/docs/components/CodeBlock/CodeBlock.tsx @@ -62,7 +62,7 @@ const CodeBlock: FC = ({ const showLineNumbers = hideLineNumbers || lang !== 'bash' return ( -

+
{title && (
{title.replace(/%20/g, ' ')} @@ -125,7 +125,7 @@ const CodeBlock: FC = ({ icon={copied ? : } onClick={() => handleCopy()} > - {copied ? 'Copied' : 'Copy'} + {copied ? 'Copied' : ''}
diff --git a/apps/docs/components/GithubCard.tsx b/apps/docs/components/GithubCard.tsx new file mode 100644 index 00000000000..8780bbd0af6 --- /dev/null +++ b/apps/docs/components/GithubCard.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +export default function GithubCard({ title, description, href, stars, handle }) { + return ( + +
+

{title}

+ {description} +
+
+
+
@{handle}
+
{stars} ★
+
+ + ) +} diff --git a/apps/docs/components/Navigation/NavBar.tsx b/apps/docs/components/Navigation/NavBar.tsx index ec2a5a45e3a..6a3a4f525b5 100644 --- a/apps/docs/components/Navigation/NavBar.tsx +++ b/apps/docs/components/Navigation/NavBar.tsx @@ -197,7 +197,7 @@ const NavBar: FC = ({ currentPage }) => {
-

Search docs

+

Search

diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts index db255e9b121..57a10d0e4c2 100644 --- a/apps/docs/components/Navigation/Navigation.constants.ts +++ b/apps/docs/components/Navigation/Navigation.constants.ts @@ -134,17 +134,21 @@ export const menuItems: NavMenu = { name: 'Deep Dive', url: undefined, items: [ - { name: 'Part One: JWTs', url: '/learn/auth-deep-dive/jwts', items: [] }, { - name: 'Part Two: Row Level Security', - url: '/learn/auth-deep-dive/row-level-security', + name: 'Part One: JWTs', + url: '/learn/auth-deep-dive/auth-deep-dive-jwts', items: [], }, - { name: 'Part Three: Policies', url: '/learn/auth-deep-dive/policies', items: [] }, - { name: 'Part Four: GoTrue', url: '/learn/auth-deep-dive/gotrue', items: [] }, + { + name: 'Part Two: Row Level Security', + url: '/learn/auth-deep-dive/auth-row-level-security', + items: [], + }, + { name: 'Part Three: Policies', url: '/learn/auth-deep-dive/auth-policies', items: [] }, + { name: 'Part Four: GoTrue', url: '/learn/auth-deep-dive/auth-gotrue', items: [] }, { name: 'Part Five: Google OAuth', - url: '/learn/auth-deep-dive/google-oauth', + url: '/learn/auth-deep-dive/auth-google-oauth', items: [], }, ], diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx index 0d90254a9ba..d6ffa3473b9 100644 --- a/apps/docs/components/Navigation/SideBar.tsx +++ b/apps/docs/components/Navigation/SideBar.tsx @@ -43,7 +43,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => { return (