Merge pull request #839 from nhost/changeset-release/main

chore: update versions

.config/.eslintrc

@@ -1,50 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "ignorePatterns": ["**/dist", "**/build", "**/.next"],
-  "extends": ["react-app", "plugin:react/recommended", "plugin:react-hooks/recommended"],
-  "parserOptions": {
-    // "project": "./tsconfig.json"
-    "project": ["packages/*/tsconfig.json", "examples/*/tsconfig.json"]
-  },
-  "plugins": ["react", "@typescript-eslint", "react-hooks", "simple-import-sort"],
-  "rules": {
-    "no-use-before-define": "off",
-    "simple-import-sort/exports": "error",
-
-    "simple-import-sort/imports": [
-      "error",
-      {
-        "groups": [
-          // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
-          [
-            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
-          ],
-          // Packages
-          ["^\\w"],
-          // Internal packages.
-          ["^(@|config/)(/*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Style imports.
-          ["^.+\\.s?css$"]
-        ]
-      }
-    ],
-    "import/no-anonymous-default-export": [
-      "error",
-      {
-        "allowArrowFunction": true,
-        "allowAnonymousFunction": true
-      }
-    ]
-  }
-}

.config/esbuild.lib.js

@@ -1,30 +0,0 @@
-const esbuild = require('esbuild')
-
-// Automatically exclude all node_modules from the bundled version
-const { nodeExternalsPlugin } = require('esbuild-node-externals')
-esbuild
-  .build({
-    entryPoints: ['./src/index.ts'],
-    outfile: 'dist/index.cjs.js',
-    bundle: true,
-    minify: true,
-    platform: 'node',
-    format: 'cjs',
-    sourcemap: true,
-    target: 'node14',
-    plugins: [nodeExternalsPlugin()]
-  })
-  .catch(() => process.exit(1))
-
-esbuild
-  .build({
-    entryPoints: ['./src/index.ts'],
-    outfile: 'dist/index.es.js',
-    bundle: true,
-    minify: true,
-    platform: 'browser',
-    format: 'esm',
-    sourcemap: true,
-    target: 'esnext'
-  })
-  .catch(() => process.exit(1))

.config/jest.config.js

@@ -1,7 +0,0 @@
-const base = require('./jest.config.base.js')
-
-module.exports = {
-  ...base,
-  projects: ['<rootDir>/packages/*/jest.config.js'],
-  coverageDirectory: '<rootDir>/coverage/'
-}

.config/vite.lib.react.js

@@ -1,50 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-import tsconfigPaths from 'vite-tsconfig-paths'
-
-import react from '@vitejs/plugin-react'
-
-const PWD = process.env.PWD
-const pkg = require(path.join(PWD, 'package.json'))
-
-const tsEntry = path.resolve(PWD, 'src/index.ts')
-const entry = fs.existsSync(tsEntry) ? tsEntry : tsEntry.replace('.ts', '.tsx')
-
-/**
- * @type {import('vite').UserConfig}
- */
-export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths(),
-    dts({
-      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
-      afterBuild: () => {
-        const types = fs.readdirSync(path.join(PWD, 'dist/src'))
-        types.forEach((file) => {
-          fs.renameSync(path.join(PWD, 'dist/src', file), path.join(PWD, 'dist', file))
-        })
-        fs.rmdirSync(path.join(PWD, 'dist/src'))
-      }
-    })
-  ],
-  build: {
-    lib: {
-      entry,
-      name: pkg.name,
-      fileName: 'index'
-    },
-    rollupOptions: {
-      external: ['react', '@nhost/react'],
-      output: {
-        globals: {
-          react: 'react',
-          '@nhost/react': '@nhost/react'
-        }
-      }
-    }
-  }
-})

.github/CODEOWNERS

@@ -2,6 +2,7 @@
 # https://help.github.com/en/articles/about-code-owners
 
 /packages                                @plmercereau
+/packages/docgen                         @szilarddoro
 /.github/workflows                       @plmercereau
 /docs/                                   @guicurcio
 /examples/                               @plmercereau @guicurcio @FuzzyReason

.github/actions/install-dependencies/action.yaml

@@ -0,0 +1,17 @@
+name: Install Node and package dependencies
+description: 'Install Node dependencies with pnpm'
+runs:
+  using: 'composite'
+  steps:
+    - uses: pnpm/action-setup@v2.2.1
+      with:
+        version: 6.32.14
+    - name: Use Node.js 16
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+        cache: 'pnpm'
+    # * Install package dependencies. As cache is enabled, it will cache/restore downloaded files
+    - shell: bash
+      name: Install packages
+      run: pnpm install --frozen-lockfile

.github/workflows/changesets.yaml

@@ -9,6 +9,7 @@ on:
       - 'examples/**'
       - 'assets/**'
       - '**.md'
+      - '!.changeset/**'
       - 'LICENSE'
 
 jobs:
@@ -16,29 +17,33 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Cache pnpm modules
-        uses: actions/cache@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
         with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-
+          fetch-depth: 0
 
       - uses: pnpm/action-setup@v2.1.0
         with:
-          version: 6.30.1
-          run_install: true
-
+          version: 6.32.3
+          # run_install: true
+      - name: Use Node.js 17
+        uses: actions/setup-node@v2
+        with:
+          node-version: '17.8.0'
+          cache: 'pnpm'
+      - name: Pick the right npm version
+        # * See: https://github.com/pnpm/pnpm/issues/4348
+        run: npm install --global npm@8.4
+      - name: Install dependencies
+        run: pnpm install
       - name: Create PR or Publish release
         id: changesets
         uses: changesets/action@v1
         with:
-          version: pnpm ci:version
+          version: pnpm run ci:version
           commit: 'chore: update versions'
           title: 'chore: update versions'
-          publish: pnpm release
+          publish: pnpm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/contributors.yaml

@@ -0,0 +1,15 @@
+name: Add contributors
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  contrib-readme-job:
+    runs-on: ubuntu-latest
+    name: A job to automate contrib in readme
+    steps:
+      - name: Contribute List
+        uses: akhilmhdh/contributors-readme-action@v2.3.4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yaml

@@ -1,8 +1,4 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-# Poached from https://github.com/hayes/pothos/tree/main/.github/workflows, thanks to the original author
-
-name: Node.js CI
+name: Tests
 
 on:
   push:
@@ -10,62 +6,112 @@ on:
     paths-ignore:
       - 'docs/**'
       - 'templates/**'
-      - 'examples/**'
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
   pull_request:
     branches: [main]
+    types: [opened, synchronize]
     paths-ignore:
       - 'docs/**'
       - 'templates/**'
-      - 'examples/**'
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: nhost
 jobs:
   build:
+    name: Build @nhost packages
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12.x, 14.x, 16.x]
-
     steps:
       - uses: actions/checkout@v2
-
-      - name: Cache pnpm modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-
-
-      - uses: pnpm/action-setup@v2.0.1
-        with:
-          version: 6.30.1
-          run_install: true
-
-      - name: Cache turbo
-        uses: actions/cache@v2
-        with:
-          path: ./node_modules/.cache/turbo
-          key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.ref_name }}-
-
-      - name: Install nhost CLI
+      # * Install Node and dependencies. Package downloads will be cached for the next jobs.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Build all Nhost packages as they are all supposed to be tested.
+      # * They will be reused through the Turborepo cache
+      - name: Build packages
+        run: pnpm build
+      # * List packagesthat has an `e2e` script, except the root, and return an array of their name and path
+      - name: List examples with an e2e script
+        id: set-matrix
+        run: |
+          PACKAGES=$(pnpm recursive list --depth -1 --parseable --filter=!nhost-root \
+            | xargs -I@ jq "if (.scripts.e2e | length) != 0  then {name: .name, path: \"@\"} else null end" @/package.json \
+            | awk "!/null/" \
+            | jq -c --slurp)
+          echo "::set-output name=matrix::$PACKAGES"
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+  e2e:
+    name: 'e2e: ${{ matrix.package.name }}'
+    needs: build
+    strategy:
+      # * Don't cancel other matrices when one fails
+      fail-fast: false
+      matrix:
+        package: ${{ fromJson(needs.build.outputs.matrix) }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # * Install Nhost CLI if a `nhost/config.yaml` file is found
+      - name: Install Nhost CLI
+        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
         run: curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
-
-      - name: Start Nhost Backend
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
+      - name: Run e2e test
+        run: pnpm run e2e -- --filter="${{ matrix.package.name }}"
+      - id: file-name
+        if: ${{ failure() }}
+        name: Tranform package name into a valid file name
         run: |
-          cd examples/testing-project
-
-          nhost dev -d --no-browser &
-      - name: Wait for Nhost Backend to start
+          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
+          echo "::set-output name=fileName::$PACKAGE_FILE_NAME"
+      # * Run this step only if the previous step failed, and some Cypress screenshots/videos exist
+      - name: Upload Cypress videos and screenshots
+        if: ${{ failure() && hashFiles(format('{0}/cypress/screenshots/**', matrix.package.path), format('{0}/cypress/videos/**', matrix.package.path)) != ''}}
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-${{ steps.file-name.outputs.fileName }}
+          path: |
+            ${{format('{0}/cypress/screenshots/**', matrix.package.path)}}
+            ${{format('{0}/cypress/videos/**', matrix.package.path)}}
+  unit:
+    name: Unit tests
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Run every `test` script in the workspace . Dependencies build is cached by Turborepo
+      - name: Run unit tests
+        run: pnpm run test
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2
+        with:
+          files: '**/coverage/coverage-final.json'
+          name: codecov-umbrella
+      - name: Create summary
         run: |
-          pnpm dlx wait-on http://localhost:1337/v1/auth/healthz -i 500 -t 120000
-
-      - run: pnpm run ci
+          echo '### Code coverage' >> $GITHUB_STEP_SUMMARY
+          echo 'Visit [codecov](https://app.codecov.io/gh/nhost/nhost/) to see the code coverage reports' >> $GITHUB_STEP_SUMMARY
+  lint:
+    name: Lint
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
+      - name: Lint
+        run: pnpm run lint

.gitignore

@@ -15,11 +15,11 @@ logs/
 /.vscode/
 .eslintcache
 .yarnclean
-.husky
 
 # Directories
 coverage/
 dist/
+umd/
 lib/
 node_modules/
 tmp/
@@ -33,16 +33,15 @@ tmp/
 *.map
 todo.md
 
-# Generated configs 
+# Config files that are not part of the repository root anymore. Should be removed in the future.
 /.eslintignore
-/.eslintrc
-/.prettierignore
-/prettier.config.js
+/.eslintrc*
 /vite.*.js
 /jest.*.js
+/*tsconfig*.json
 /esbuild.*.js
 
-!.config/**
+!config/**
 
 *.tsbuildinfo
 
@@ -50,4 +49,11 @@ todo.md
 .netlify
 .monorepo-example
 
-.next
+.next
+
+# TypeDoc output
+
+.docgen
+
+# Nhost CLI data
+.nhost

.prettierrc.js

@@ -11,6 +11,11 @@ module.exports = {
   tabWidth: 2,
   trailingComma: 'none',
   useTabs: false,
+  // TODO: add import sort configuration to match ESLint rules
+  // plugins: ['./node_modules/@trivago/prettier-plugin-sort-imports'],
+  // importOrderSeparation: true,
+  // importOrderSortSpecifiers: true
+  plugins: [],
   overrides: [
     {
       files: ['*.json', '*.yaml'],

CONTRIBUTING.md

@@ -24,6 +24,8 @@ If you find an Issue that addresses the problem you're having, please add your r
 
 ### Pull Requests
 
+Please have a look at our [developers guide](https://github.com/nhost/nhost/blob/main/DEVELOPERS.md) to start coding!
+
 PRs to our libraries are always welcome and can be a quick way to get your fix or improvement slated for the next release. In general, PRs should:
 
 - Only fix/add the functionality in question **OR** address wide-spread whitespace/style issues, not both.

DEVELOPERS.md

@@ -0,0 +1,103 @@
+# Developer guide
+
+## Requirements
+
+- We use [pnpm](https://pnpm.io/) as a package manager to speed up development and builds, and as a basis for our monorepo. You need to make sure it's installed on your machine. There are [several ways to install it](https://pnpm.io/installation), but the easiest way is with `npm`:
+
+```sh
+$ npm install -g pnpm
+```
+
+- Our tests and examples use the Nhost CLI, to run the backend services locally. You can follow the installation instructions in [our documentation](https://docs.nhost.io/get-started/cli-workflow/install-cli).
+
+## Get started
+
+### Installation
+
+First, clone this repository:
+
+```sh
+git clone https://github.com/nhost/nhost
+```
+
+Then, install the dependencies with `pnpm`:
+
+```sh
+$ cd nhost
+$ pnpm install
+```
+
+### Development
+
+Although package references are correctly updated on the fly for TypeScript, example projects won't
+see the changes because they are depending on the build output. To fix this, you can run packages
+in development mode.
+
+Running packages in development mode is as simple as:
+
+```sh
+$ pnpm dev
+```
+
+Our packages are linked together using [PNPM's workspace](https://pnpm.io/workspaces) feature. Vite automatically detects changes in the dependencies and rebuilds everything, so that the changes are immediately reflected in the other packages.
+
+### Use examples
+
+Examples are a great way to test your changes in practice. Make sure you've `pnpm dev` running in your terminal and then run an example.
+
+Let's follow the instructions to run [react-apollo example](https://github.com/nhost/nhost/blob/main/examples/react-apollo/README.md).
+
+## Run the documentation website locally
+
+The easier way to contribute to our documentation is to go to the `docs` folder and follow the [instructions to start local development](https://github.com/nhost/nhost/blob/main/docs/README.md):
+
+```sh
+$ cd docs
+# not necessary if you've already done this step somewhere in the repository
+$ pnpm install
+$ pnpm start
+```
+
+## Run test suites
+
+### Unit tests
+
+You can run the unit tests with the following command from the repository root:
+
+```sh
+$ pnpm test
+```
+
+### End-to-end tests
+
+Each package that defines end-to-end tests embeds their own Nhost configuration, that will be automatically when running the tests. As a result, you must make sure you are not running the Nhost CLI before running the tests.
+
+You can run the e2e tests with the following command from the repository root:
+
+```sh
+$ pnpm e2e
+```
+
+## Changesets
+
+If you've made changes to the packages, you must describe those changes so that they can be reflected in the next release.
+We use [changesets](https://github.com/changesets/changesets) to support our versioning and release workflows. When you submit a pull request, a bot checks if some changesets are present, and if not, it directs you to add them.
+
+The most comprehensive way to add a changeset is to run the following command in the repository root:
+
+```sh
+$ pnpm changeset
+```
+
+This will create a file in the `.changeset` directory. You can edit it to give more details about the change you just made.
+
+You can take a look at the changeset documentation: [How to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
+
+## Committing changes
+
+You'll notice that `git commit` takes a few seconds to run. We set a commit hook that scans the changes in the code, automatically generates documentation from the inline [TSDoc](https://tsdoc.org/) annotations, and adds these generated documentation files to the commit. They automatically update the [reference documentation](https://docs.nhost.io/reference).
+
+<!-- ## Good practices
+- lint
+- prettier
+- documentation -->

README.md

@@ -1,18 +1,18 @@
+![Nhost](https://i.imgur.com/ZenoUlM.png)
+
 <div align="center">
-  <img width="237" src="https://raw.githubusercontent.com/nhost/nhost/main/assets/logo.png"/>
 
-  <br />
-  <br />
+# Nhost
 
-<a href="https://docs.nhost.io/get-started">Quickstart</a>
+<a href="https://docs.nhost.io/#quickstart">Quickstart</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="http://nhost.io/">Website</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-<a href="https://docs.nhost.io/get-started">Docs</a>
+<a href="https://docs.nhost.io">Docs</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="https://nhost.io/blog">Blog</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-<a href="https://twitter.com/nhostio">Twitter</a>
+<a href="https://twitter.com/nhost">Twitter</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="https://nhost.io/discord">Discord</a>
 <br />
@@ -20,37 +20,46 @@
   <hr />
 </div>
 
-**Nhost is a serverless backend for web and mobile apps** built with the following things in mind:
+**Nhost is an open source Firebase alternative with GraphQL,** built with the following things in mind:
 
 - Open Source
-- Developer Productivity
-- SQL
 - GraphQL
+- SQL
+- Great Developer Experience
 
 Nhost consists of open source software:
 
 - Database: [PostgreSQL](https://www.postgresql.org/)
 - Instant GraphQL API: [Hasura](https://hasura.io/)
 - Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth/)
-- Storage: [Hasura Storage](https://hub.docker.com/r/nhost/hasura-storage)
+- Storage: [Hasura Storage](https://github.com/nhost/hasura-storage)
 - Serverless Functions: Node.js (JavaScript and TypeScript)
 - [Nhost CLI](https://docs.nhost.io/reference/cli) for local development
 
+## Architecture of Nhost
+
+<div align="center">
+  <br />
+  <img src="assets/nhost-diagram.png"/>
+  <br />
+  <br />
+</div>
+
 Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentation.
 
-# How to get started
+# Get Started
 
-### Option 1: One-click deployment with Nhost (recommended)
+## Option 1: Nhost Hosted Platform
 
-1. Create [Nhost account](https://app.nhost.io) (you can use GitHub to sign up)
-2. Create Nhost app
-3. Done!
+1. Sign in to [Nhost](https://app.nhost.io).
+2. Create Nhost app.
+3. Done.
 
-### Option 2: Self-hosting
+## Option 2: Self-hosting
 
 Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example [docker-compose file](https://github.com/nhost/nhost/tree/main/examples/docker-compose) to self-host Nhost.
 
-## Sign in a user and make your first GraphQL query
+## Sign In and Make a Graphql Request
 
 Install the `@nhost/nhost-js` package and start build your app:
 
@@ -58,7 +67,8 @@ Install the `@nhost/nhost-js` package and start build your app:
 import { NhostClient } from '@nhost/nhost-js'
 
 const nhost = new NhostClient({
-  backendUrl: 'https://awesome-app.nhost.run'
+  subdomain: '<your-subdomain>',
+  region: '<your-region>'
 })
 
 await nhost.auth.signIn({ email: 'elon@musk.com', password: 'spaceX' })
@@ -89,11 +99,12 @@ Nhost is frontend agnostic, which means Nhost works with all frontend frameworks
 
 Nhost libraries and tools
 
-- [JavaScript/TypeScript SDK](https://docs.nhost.io/reference/sdk)
+- [JavaScript/TypeScript SDK](https://docs.nhost.io/reference/javascript)
 - [Dart and Flutter SDK](https://github.com/nhost/nhost-dart)
 - [Nhost CLI](https://docs.nhost.io/reference/cli)
-- [Nhost React Auth](https://docs.nhost.io/reference/supporting-libraries/react-auth)
-- [Nhost React Apollo](https://docs.nhost.io/reference/supporting-libraries/react-apollo)
+- [Nhost React](https://docs.nhost.io/reference/react)
+- [Nhost Next.js](https://docs.nhost.io/reference/nextjs)
+- [Nhost Vue](https://docs.nhost.io/reference/vue)
 
 ## Community ❤️
 
@@ -101,18 +112,326 @@ First and foremost: **Star and watch this repository** to stay up-to-date.
 
 Also, follow Nhost on [GitHub Discussions](https://github.com/nhost/nhost/discussions), our [Blog](https://nhost.io/blog), and on [Twitter](https://twitter.com/nhostio). You can chat with the team and other members on [Discord](https://discord.com/invite/9V7Qb2U) and follow our tutorials and other video material at [YouTube](https://www.youtube.com/channel/UCJ7irtvV9Y0EQMxpabb6ntg?view_as=subscriber).
 
-## Nhost is Open Source
+### Nhost is Open Source
 
 This repository, and most of our other open source projects, are licensed under the MIT license.
 
+<a href="https://runacap.com/ross-index/q1-2022/" target="_blank" rel="noopener">
+    <img style="width: 260px; height: 56px" src="https://runacap.com/wp-content/uploads/2022/06/ROSS_badge_black_Q1_2022.svg" alt="ROSS Index - Fastest Growing Open-Source Startups in Q1 2022 | Runa Capital" width="260" height="56" />
+</a>
+
 ### How to contribute
 
 Here are some ways of contributing to making Nhost better:
 
 - **[Try out Nhost](https://docs.nhost.io/get-started/quick-start)**, and think of ways to make the service better. Let us know here on GitHub.
 - Join our [Discord](https://discord.com/invite/9V7Qb2U) and connect with other members to share and learn from.
-- Send a pull request to any of our [open source repositories](https://github.com/nhost) on Github. Check our [contribution guide](https://github.com/nhost/nhost/blob/main/CONTRIBUTING.md) for more details about how to contribute. We're looking forward to your contribution!
+- Send a pull request to any of our [open source repositories](https://github.com/nhost) on Github. Check our [contribution guide](https://github.com/nhost/nhost/blob/main/CONTRIBUTING.md) and our [developers guide](https://github.com/nhost/nhost/blob/main/DEVELOPERS.md) for more details about how to contribute. We're looking forward to your contribution!
 
-## Security
+### Contributors
 
-If you discover a security vulnerability within Nhost, please e-mail [security@nhost.io](mailto:security@nhost.io). All security vulnerabilities will be promptly addressed.
+<!-- readme: contributors -start -->
+<table>
+<tr>
+    <td align="center">
+        <a href="https://github.com/plmercereau">
+            <img src="https://avatars.githubusercontent.com/u/24897252?v=4" width="100;" alt="plmercereau"/>
+            <br />
+            <sub><b>Pilou</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/elitan">
+            <img src="https://avatars.githubusercontent.com/u/331818?v=4" width="100;" alt="elitan"/>
+            <br />
+            <sub><b>Johan Eliasson</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/gdangelo">
+            <img src="https://avatars.githubusercontent.com/u/4352286?v=4" width="100;" alt="gdangelo"/>
+            <br />
+            <sub><b>Grégory D'Angelo</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/nunopato">
+            <img src="https://avatars.githubusercontent.com/u/1523504?v=4" width="100;" alt="nunopato"/>
+            <br />
+            <sub><b>Nuno Pato</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/guicurcio">
+            <img src="https://avatars.githubusercontent.com/u/20285232?v=4" width="100;" alt="guicurcio"/>
+            <br />
+            <sub><b>Guido Curcio</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/subatuba21">
+            <img src="https://avatars.githubusercontent.com/u/34824571?v=4" width="100;" alt="subatuba21"/>
+            <br />
+            <sub><b>Subha Das</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/sebagudelo">
+            <img src="https://avatars.githubusercontent.com/u/43288271?v=4" width="100;" alt="sebagudelo"/>
+            <br />
+            <sub><b>Sebagudelo</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/mrinalwahal">
+            <img src="https://avatars.githubusercontent.com/u/9859731?v=4" width="100;" alt="mrinalwahal"/>
+            <br />
+            <sub><b>Mrinal Wahal</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/timpratim">
+            <img src="https://avatars.githubusercontent.com/u/32492961?v=4" width="100;" alt="timpratim"/>
+            <br />
+            <sub><b>Pratim</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/szilarddoro">
+            <img src="https://avatars.githubusercontent.com/u/310881?v=4" width="100;" alt="szilarddoro"/>
+            <br />
+            <sub><b>Szilárd Dóró</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/GavanWilhite">
+            <img src="https://avatars.githubusercontent.com/u/2085119?v=4" width="100;" alt="GavanWilhite"/>
+            <br />
+            <sub><b>Gavan Wilhite</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/FuzzyReason">
+            <img src="https://avatars.githubusercontent.com/u/62517920?v=4" width="100;" alt="FuzzyReason"/>
+            <br />
+            <sub><b>Vadim Smirnov</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/macmac49">
+            <img src="https://avatars.githubusercontent.com/u/831190?v=4" width="100;" alt="macmac49"/>
+            <br />
+            <sub><b>Macmac49</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/subhendukundu">
+            <img src="https://avatars.githubusercontent.com/u/20059141?v=4" width="100;" alt="subhendukundu"/>
+            <br />
+            <sub><b>Subhendu Kundu</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/heygambo">
+            <img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
+            <br />
+            <sub><b>Christian Gambardella</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/chrtze">
+            <img src="https://avatars.githubusercontent.com/u/3797215?v=4" width="100;" alt="chrtze"/>
+            <br />
+            <sub><b>Christopher Möller</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/dbarrosop">
+            <img src="https://avatars.githubusercontent.com/u/6246622?v=4" width="100;" alt="dbarrosop"/>
+            <br />
+            <sub><b>David Barroso</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/hajek-raven">
+            <img src="https://avatars.githubusercontent.com/u/7288737?v=4" width="100;" alt="hajek-raven"/>
+            <br />
+            <sub><b>Filip Hájek</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/MelodicCrypter">
+            <img src="https://avatars.githubusercontent.com/u/18341500?v=4" width="100;" alt="MelodicCrypter"/>
+            <br />
+            <sub><b>Hugh Caluscusin</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/jerryjappinen">
+            <img src="https://avatars.githubusercontent.com/u/1101002?v=4" width="100;" alt="jerryjappinen"/>
+            <br />
+            <sub><b>Jerry Jäppinen</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/mustafa-hanif">
+            <img src="https://avatars.githubusercontent.com/u/30019262?v=4" width="100;" alt="mustafa-hanif"/>
+            <br />
+            <sub><b>Mustafa Hanif</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/nbourdin">
+            <img src="https://avatars.githubusercontent.com/u/5602476?v=4" width="100;" alt="nbourdin"/>
+            <br />
+            <sub><b>Nicolas Bourdin</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/Savinvadim1312">
+            <img src="https://avatars.githubusercontent.com/u/16936043?v=4" width="100;" alt="Savinvadim1312"/>
+            <br />
+            <sub><b>Savin Vadim</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/muttenzer">
+            <img src="https://avatars.githubusercontent.com/u/49474412?v=4" width="100;" alt="muttenzer"/>
+            <br />
+            <sub><b>Muttenzer</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/ahmic">
+            <img src="https://avatars.githubusercontent.com/u/13452362?v=4" width="100;" alt="ahmic"/>
+            <br />
+            <sub><b>Amir Ahmic</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/akd-io">
+            <img src="https://avatars.githubusercontent.com/u/30059155?v=4" width="100;" alt="akd-io"/>
+            <br />
+            <sub><b>Anders Kjær Damgaard</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/Sonichigo">
+            <img src="https://avatars.githubusercontent.com/u/53110238?v=4" width="100;" alt="Sonichigo"/>
+            <br />
+            <sub><b>Animesh Pathak</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/rustyb">
+            <img src="https://avatars.githubusercontent.com/u/53086?v=4" width="100;" alt="rustyb"/>
+            <br />
+            <sub><b>Colin Broderick</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/dohomi">
+            <img src="https://avatars.githubusercontent.com/u/489221?v=4" width="100;" alt="dohomi"/>
+            <br />
+            <sub><b>Dominic Garms</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/gaurav1999">
+            <img src="https://avatars.githubusercontent.com/u/20752142?v=4" width="100;" alt="gaurav1999"/>
+            <br />
+            <sub><b>Gaurav Agrawal</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/alveshelio">
+            <img src="https://avatars.githubusercontent.com/u/8176422?v=4" width="100;" alt="alveshelio"/>
+            <br />
+            <sub><b>Helio Alves</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/nkhdo">
+            <img src="https://avatars.githubusercontent.com/u/26102306?v=4" width="100;" alt="nkhdo"/>
+            <br />
+            <sub><b>Hoang Do</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/jladuval">
+            <img src="https://avatars.githubusercontent.com/u/1935359?v=4" width="100;" alt="jladuval"/>
+            <br />
+            <sub><b>Jacob Duval</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/kylehayes">
+            <img src="https://avatars.githubusercontent.com/u/509932?v=4" width="100;" alt="kylehayes"/>
+            <br />
+            <sub><b>Kyle Hayes</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/leothorp">
+            <img src="https://avatars.githubusercontent.com/u/12928449?v=4" width="100;" alt="leothorp"/>
+            <br />
+            <sub><b>Leo Thorp</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/MarcelloTheArcane">
+            <img src="https://avatars.githubusercontent.com/u/21159570?v=4" width="100;" alt="MarcelloTheArcane"/>
+            <br />
+            <sub><b>Max Reynolds</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/nachoaldamav">
+            <img src="https://avatars.githubusercontent.com/u/22749943?v=4" width="100;" alt="nachoaldamav"/>
+            <br />
+            <sub><b>Nacho Aldama</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/ghoshnirmalya">
+            <img src="https://avatars.githubusercontent.com/u/6391763?v=4" width="100;" alt="ghoshnirmalya"/>
+            <br />
+            <sub><b>Nirmalya Ghosh</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/quentin-decre">
+            <img src="https://avatars.githubusercontent.com/u/1137511?v=4" width="100;" alt="quentin-decre"/>
+            <br />
+            <sub><b>Quentin Decré</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/atapas">
+            <img src="https://avatars.githubusercontent.com/u/3633137?v=4" width="100;" alt="atapas"/>
+            <br />
+            <sub><b>Tapas Adhikary</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/uulwake">
+            <img src="https://avatars.githubusercontent.com/u/22399181?v=4" width="100;" alt="uulwake"/>
+            <br />
+            <sub><b>Ulrich Wake</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/komninoschat">
+            <img src="https://avatars.githubusercontent.com/u/29049104?v=4" width="100;" alt="komninoschat"/>
+            <br />
+            <sub><b>Komninos</b></sub>
+        </a>
+    </td></tr>
+</table>
+<!-- readme: contributors -end -->

config/.eslint.base.js

@@ -0,0 +1,65 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  ignorePatterns: [
+    'dist',
+    'umd',
+    'build',
+    '.next',
+    'node_modules',
+    'tsup.config.ts',
+    '__tests__',
+    '__mocks__',
+    '*.test.ts',
+    '*.test.tsx',
+    '*.spec.ts',
+    '*.spec.tsx',
+    'tests/**/*.ts',
+    'tests/**/*.d.ts'
+  ],
+  plugins: ['@typescript-eslint', 'simple-import-sort', 'cypress'],
+  extends: ['plugin:cypress/recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  rules: {
+    'react/prop-types': 'off',
+    'no-use-before-define': 'off',
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)'
+          ],
+          // Packages
+          ['^\\w'],
+          // Internal packages.
+          ['^(@|config/)(/*|$)'],
+          // Side effect imports.
+          ['^\\u0000'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // Style imports.
+          ['^.+\\.s?css$']
+        ]
+      }
+    ],
+    'import/no-anonymous-default-export': [
+      'error',
+      {
+        allowArrowFunction: true,
+        allowAnonymousFunction: true
+      }
+    ]
+  }
+}

config/.eslintrc.js

@@ -0,0 +1,12 @@
+const base = require('./.eslint.base')
+module.exports = {
+  ...base,
+  extends: [
+    ...base.extends,
+    'react-app',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react/jsx-runtime'
+  ],
+  plugins: [...base.plugins, 'react', 'react-hooks']
+}

config/.eslintrc.vue.js

@@ -0,0 +1,13 @@
+const base = require('./.eslint.base')
+module.exports = {
+  ...base,
+  extends: [...base.extends, 'plugin:import/recommended', 'plugin:import/typescript'],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ...base.parserOptions,
+    parser: '@typescript-eslint/parser'
+  },
+  rules: {
+    'vue/html-self-closing': 'off'
+  }
+}

config/.husky/.gitignore

@@ -0,0 +1 @@
+_

config/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --config config/.lintstagedrc.js

config/.lintstagedrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  'packages/(docgen|hasura-auth-js|hasura-storage-js|nextjs|nhost-js|react|core|vue)/src/**/*.{js,ts,jsx,tsx}':
+    ['pnpm docgen', 'git add docs'],
+  '(nhost-cloud.yaml|**/nhost/config.yaml)': () => [
+    'pnpm sync-versions',
+    "git add ':(glob)**/nhost/config.yaml'"
+  ]
+}

config/jest.config.base.js

@@ -7,7 +7,6 @@ module.exports = {
   testRegex: '(/tests/.*.(test|spec)).(jsx?|tsx?)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverage: true,
-  // coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$'],
   verbose: true,
   testTimeout: 30000,
   globals: {

config/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  rootDir: process.cwd(),
+  preset: 'ts-jest',
+  collectCoverage: true,
+  coverageProvider: 'v8',
+  coverageDirectory: '<rootDir>/coverage',
+  clearMocks: true,
+  verbose: true,
+  testTimeout: 30000,
+  globals: {
+    'ts-jest': {
+      isolatedModules: true
+    }
+  }
+}

config/react-library.tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}

config/tsconfig.base.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "target": "ES6",
+    "module": "CommonJS",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.promise",
+      "es2015.symbol",
+      "es2015.iterable",
+      "es2015.collection",
+      "es2015.symbol.wellknown",
+      "es2015.core",
+      "es2017.object",
+      "es2017.string"
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "types": ["node"],
+    "typeRoots": [
+      "./node_modules/@types", "**/*/dist", "**/*/build", "**/*/.next", "**/*/umd"
+    ],
+    "paths": {
+      "@nhost/apollo": ["../packages/apollo/src/index.ts"],
+      "@nhost/core": ["../packages/core/src/index.ts"],
+      "@nhost/docgen": ["../packages/docgen/src/index.ts"],
+      "@nhost/hasura-auth-js": ["../packages/hasura-auth-js/src/index.ts"],
+      "@nhost/hasura-storage-js": ["../packages/hasura-storage-js/src/index.ts"],
+      "@nhost/nextjs": ["../packages/nextjs/src/index.ts"],
+      "@nhost/nhost-js": ["../packages/nhost-js/src/index.ts"],
+      "@nhost/react": ["../packages/react/src/index.ts"],
+      "@nhost/react-apollo": ["../packages/react-apollo/src/index.ts"],
+      "@nhost/react-auth": ["../packages/react-auth/src/index.ts"],
+      "@nhost/vue": ["../packages/vue/src/index.ts"]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*/dist",
+    "**/*/build",
+    "**/*/.next",
+    "**/*/__tests__",
+    "**/*/__mocks__"
+  ]
+}

config/vite.lib.config.js

@@ -0,0 +1,76 @@
+import fs from 'fs'
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const tsEntry = path.resolve(PWD, 'src/index.ts')
+const entry = fs.existsSync(tsEntry) ? tsEntry : tsEntry.replace('.ts', '.tsx')
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencies))]
+
+export default defineConfig({
+  plugins: [
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'dist/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'dist/src', file), path.join(PWD, 'dist', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'dist/src'))
+      }
+    })
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    reporters: 'verbose',
+    include: [`${PWD}/src/**/*.{spec,test}.{ts,tsx}`, `${PWD}/tests/**/*.{spec,test}.{ts,tsx}`],
+    // Note: temporarily disabled threads, because of a bug in vitest
+    // https://github.com/vitest-dev/vitest/issues/1171
+    threads: false,
+    coverage: {
+      enabled: process.env.CI === 'true',
+      reporter: ['json']
+    }
+  },
+  build: {
+    sourcemap: true,
+    lib: {
+      entry,
+      name: pkg.name,
+      fileName: (format) => (format === 'cjs' ? `index.cjs.js` : `index.esm.js`),
+      formats: ['cjs', 'es']
+    },
+    rollupOptions: {
+      external: (id) => deps.some((dep) => id.startsWith(dep)),
+      output: {
+        globals: {
+          graphql: 'graphql',
+          '@apollo/client': '@apollo/client',
+          '@apollo/client/core': '@apollo/client/core',
+          '@apollo/client/link/context': '@apollo/client/link/context',
+          '@apollo/client/react': '@apollo/client/react',
+          '@apollo/client/link/subscriptions': '@apollo/client/link/subscriptions',
+          '@apollo/client/utilities': '@apollo/client/utilities',
+          'graphql-ws': 'graphql-ws',
+          xstate: 'xstate',
+          axios: 'axios',
+          'js-cookie': 'Cookies',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': '_jsx',
+          '@nhost/react': '@nhost/react',
+          vue: 'Vue',
+          'vue-demi': 'vue-demi'
+        }
+      }
+    }
+  }
+})

config/vite.lib.dev.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import viteLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...viteLibConfig,
+  build: {
+    ...viteLibConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.lib.umd.config.js

@@ -0,0 +1,28 @@
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

config/vite.react.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import react from '@vitejs/plugin-react'
+
+import baseLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...baseLibConfig,
+  optimizeDeps: {
+    include: ['react/jsx-runtime']
+  },
+  plugins: [react({ jsxRuntime: 'classic' }), ...baseLibConfig.plugins]
+})

config/vite.react.dev.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import viteReactConfig from './vite.react.config'
+
+export default defineConfig({
+  ...viteReactConfig,
+  build: {
+    ...viteReactConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.react.umd.config.js

@@ -0,0 +1,30 @@
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import react from '@vitejs/plugin-react'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

config/vite.vue.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+import vue from '@vitejs/plugin-vue'
+
+import baseLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...baseLibConfig,
+  plugins: [vue(), ...baseLibConfig.plugins]
+})

config/vite.vue.dev.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import viteVueConfig from './vite.vue.config'
+
+export default defineConfig({
+  ...viteVueConfig,
+  build: {
+    ...viteVueConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.vue.umd.config.js

@@ -0,0 +1,30 @@
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import vue from '@vitejs/plugin-vue'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [vue(), tsconfigPaths()],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

docs/.eslintrc.json

@@ -1,17 +0,0 @@
-{
-  "root": true,
-  "extends": ["next", "prettier"],
-  "rules": {
-    "@next/next/no-img-element": "off",
-    "import/no-default-export": "off",
-    "react/self-closing-comp": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/no-unescaped-entities": "off",
-    "react/prop-types": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    "no-console": "warn"
-  },
-  "parser": "@typescript-eslint/parser",
-  "settings": { "react": { "version": "detect" } }
-}

docs/.gitignore

@@ -1,2 +1,20 @@
-!lib
-!.prettierignore
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/.prettierignore

@@ -1,2 +0,0 @@
-node_modules/
-.next/

docs/CHANGELOG.md

@@ -1,6 +1,15 @@
-# nhost-documentation
+# @nhost/docs
+
+## 0.0.2
 
-## null
 ### Patch Changes
 
-- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS
+- 747aa969: fix: added twitch and discord as provider
+
+## 0.0.1
+
+### Patch Changes
+
+- 584976d: - publishable directory structure changes (ESM, CJS and UMD included in the output)
+  - build system improvements
+  - fixed some bundling concerns (https://github.com/nhost/nhost/issues/428)

docs/README.md

@@ -1,43 +1,37 @@
-# Nhost Documentation
+# Nhost Docs
 
-## Get started
+This documentation describes how to build, start and test the documentation locally.
 
-1. Install dependencies: `yarn`
-2. Start dev server: `yarn dev`
+### Installation
 
-## NOTES;
-
-The content is copied from the main `nhost/nhost` repo. This repo is only to modify styles/react components.
-
-## Structure
-
-The `order.ts` file contains the main order for the entire structure of `posts`. The keys are `categories` and the values are `subcategories` in which contains the order the posts.
-
-```
-export const orderTwo = {
-  'get-started': {
-    'quick-start': ['index', 'schema', 'javascript-client', 'permissions'],
-    authentication: ['index'],
-    'cli-workflow': ['index', 'workflow-setup', 'install-cli', 'local-changes', 'metadata-and-serverless-functions'],
-    upgrade: ['index']
-  },
-  platform: {
-    database: ['index', 'permissions', 'graphql'],
-    authentication: ['index', 'user-management', 'sign-in-methods', 'social-login', 'email-templates'],
-    storage: ['index'],
-    'serverless-functions': ['index', 'event-triggers'],
-    nhost: ['index', 'environment-variables', 'github-integration', 'local-development']
-  },
-  reference: {
-    sdk: ['index', 'graphql', 'authentication', 'storage', 'functions'],
-    cli: ['index'],
-    'supporting-libraries': ['react-apollo', 'react-auth']
-  }
-};
+```bash
+$ pnpm i
 ```
 
-Metadata such as the `title` of the file that appears on the nav is on the frontmatter of each markdown file. The file name becomes the final url. Each top-level folder appears on the header as main navigation, each subfolder becomes a main subcategory of the nav and posts are included under each subcategory.
+### Local Development
 
-In order to create a new file you place it its proper subcategory and modify the category on the `order.ts` file such as `sdk: ["javascript-sdk", "react-auth", "react-apollo"],` -> `sdk: ["javascript-sdk", "react-auth", "vue"]`
+```bash
+$ pnpm start
+```
 
-Each subCategory e.g. `reference` or `tutorials` has an `index.mdx` file. If a new subcategory is added, a file has to be created for it.
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```bash
+$ pnpm build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Serve
+
+```bash
+$ pnpm serve
+```
+
+This command serves the static content from the `build` directory.
+
+### Contributing
+
+All pull requests are greatly appreciated! See our [contributing guide](https://github.com/nhost/nhost/blob/main/CONTRIBUTING.md) to get started.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/components/AnchorLink.tsx

@@ -1,81 +0,0 @@
-import Text from '@/components/ui/Text'
-import { motion } from 'framer-motion'
-import { useRouter } from 'next/dist/client/router'
-import React, { useState } from 'react'
-import createKebabCase from '../utils/createKebabCase'
-import Permalink from './icons/Permalink'
-
-export interface AnchorLinkProps {
-  children?: any
-  id?: string
-  size?: 'tiny' | 'small' | 'normal' | 'large' | 'big' | 'heading'
-  className?: string
-}
-
-export default function AnchorLink({ children, id, size, className }: AnchorLinkProps) {
-  const {
-    query: { category, subcategory, post }
-  } = useRouter()
-  const [showPermaLink, setShowPermalink] = useState(false)
-
-  const isQuoted = typeof children !== 'string'
-
-  return (
-    <div
-      id={
-        id
-          ? children.split('/')[1]
-          : createKebabCase(
-              `#${isQuoted ? (children.props ? children.props.children : children) : children}`
-            )
-      }
-      className={className}
-      onMouseOver={() => setShowPermalink(true)}
-      onMouseLeave={() => setShowPermalink(false)}
-    >
-      <span id={createKebabCase(`${children}`)} className={'flex flex-row relative'}>
-        {showPermaLink ? (
-          <motion.span
-            className="absolute self-center w-4 h-4 align-middle -left-5"
-            onClick={() => {
-              navigator.clipboard
-                .writeText(
-                  `https://docs.nhost.io/${category}/${subcategory}/${post}/${
-                    id
-                      ? id
-                      : createKebabCase(
-                          `#${
-                            isQuoted
-                              ? children.props
-                                ? children.props.children
-                                : children
-                              : children
-                          }`
-                        )
-                  }`
-                )
-                .catch((e) => {
-                  // eslint-disable-next-line no-console
-                  console.log(e)
-                })
-            }}
-          >
-            <Permalink className="w-4 h-4" />
-          </motion.span>
-        ) : (
-          <></>
-        )}
-        <Text
-          variant="a"
-          href={createKebabCase(
-            `#${isQuoted ? (children.props ? children.props.children : children) : children}`
-          )}
-          color="greyscaleDark"
-          className="font-medium break-all"
-        >
-          {children}
-        </Text>
-      </span>
-    </div>
-  )
-}

docs/components/Command.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { useState } from 'react'
-
-import Check from './icons/Check'
-import Copy from './icons/Copy'
-
-export default function Command({ children }) {
-  const [copied, setCopied] = useState(false)
-  return (
-    <div className="my-1 flex-row inline-flex self-center text-xs bg-gray-50 pl-2 pr-1.5 text-gray-900 font-mono leading-6 py-0.25 border border-gray-200 rounded-md">
-      <span className="text-verydark mr-1.5 self-center">$</span>
-      {children}
-      <button
-        className="ml-1.5 self-center inline-block cursor-pointer"
-        onClick={() => {
-          navigator.clipboard.writeText(children).catch((e) => {
-            // eslint-disable-next-line no-console
-            console.log(e)
-          })
-          setCopied(true)
-          setTimeout(() => {
-            setCopied(false)
-          }, 1000)
-        }}
-      >
-        {/* <Tooltip text={"Copied!"}> */}
-        {copied ? (
-          <Check className="w-3.5 h-3.5 mr-0.5 text-greenDark transition-colors self-center" />
-        ) : (
-          <Copy className="w-4 h-4 text-gray-500 transition-colors hover:text-gray-900" />
-        )}
-        {/* </Tooltip> */}
-      </button>
-    </div>
-  )
-}

docs/components/Container.tsx

@@ -1,7 +0,0 @@
-export function Container({ children }) {
-  return (
-    <div className="mx-10 px-2 sm:px-10 md:px-20 lg:px-0 flex flex-row md:max-w-container pb-20 md:mx-auto mt-8 lg:space-x-20">
-      {children}
-    </div>
-  )
-}

docs/components/Content.tsx

@@ -1,47 +0,0 @@
-import markdownStyles from '@/styles/markdown-styles.module.css'
-import { DOCS_GITHUB_ENDPOINT } from '@/utils/constants'
-import { MDXRemote } from 'next-mdx-remote'
-import { useRouter } from 'next/dist/client/router'
-import React from 'react'
-
-import GithubIcon from './icons/GithubIcon'
-import Button from './ui/Button/Button'
-import Text from './ui/Text/Text'
-
-function getGithubLink(category, subcategory, post) {
-  if (post) return `${DOCS_GITHUB_ENDPOINT}${category}/${subcategory}/${post}.mdx`
-  else if (subcategory) return `${DOCS_GITHUB_ENDPOINT}${category}/${subcategory}/index.mdx`
-  else {
-    return `${DOCS_GITHUB_ENDPOINT}${category}/index.mdx`
-  }
-}
-
-export function Content({ mdxSource, components, frontmatter }) {
-  const router = useRouter()
-  return (
-    <div className="flex flex-col w-full h-full mt-2">
-      <div className="flex flex-row mb-4 place-content-between">
-        <Text color="greyscaleDark" className="font-medium cursor-pointer" size="heading">
-          {frontmatter.title}
-        </Text>
-        <div className="self-center hidden md:block">
-          <Button
-            Component="a"
-            variant="secondary"
-            className="invisible md:visible"
-            href={getGithubLink(router.query.category, router.query.subcategory, router.query.post)}
-            target="_blank"
-            rel="noreferrer"
-            type={null}
-          >
-            Edit This Page
-            <GithubIcon className="w-3.5 h-3.5 ml-1.5 text-greyscaleDark self-center" />
-          </Button>
-        </div>
-      </div>
-      <div className={markdownStyles['markdown']}>
-        <MDXRemote {...mdxSource} components={components} lazy />
-      </div>
-    </div>
-  )
-}

docs/components/CustomLink.tsx

@@ -1,21 +0,0 @@
-import { withRouter } from 'next/router'
-import Link from 'next/link'
-import React, { Children } from 'react'
-
-const CustomLink = ({ router, children, ...props }) => {
-  const child = Children.only(children)
-
-  let className = child.props.className || ''
-  const pathname = `/${router.query.category}/${router.query.post}`
-
-  if (pathname === props.href && props.activeClassName) {
-    className = `${className} ${props.activeClassName}`.trim()
-  }
-
-  delete props.activeClassName
-
-  //   @ts-ignore
-  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
-}
-
-export default withRouter(CustomLink)

docs/components/Divider.tsx

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export default function Divider() {
-  return <div className="divider mt-6 mb-4 order-2" />
-}

docs/components/Footer.tsx

@@ -1,162 +0,0 @@
-import Button from '@/components/ui/Button'
-import siteLinks from '@/data/siteLinks.json'
-import Link from 'next/link'
-import React from 'react'
-import { useState } from 'react'
-
-import { Newsletter } from './Newsletter'
-
-// import Input from './ui/Input/Input';
-export default function Footer() {
-  const [email, setEmail] = useState('')
-
-  return (
-    <div className="bg-verydark">
-      <div className="max-w-mxcontainer px-5 mx-auto">
-        <div className="flex flex-col pt-20">
-          {/* Logo and CTA */}
-          <div className="place-content-between flex flex-row">
-            <div className="">
-              <img
-                src="/logos/nhost-footer-logo.svg"
-                width={141.57}
-                height={48}
-                alt="Nhost white logo"
-              />
-            </div>
-            <div className="flex flex-row self-center">
-              <Button
-                Component="a"
-                variant="secondary"
-                className="md:visible invisible mr-2 text-white cursor-pointer"
-                href="mailto:hello@nhost.io"
-                type={null}
-              >
-                Contact Us
-              </Button>
-              <Button
-                Component="a"
-                variant="primary"
-                href="https://app.nhost.io"
-                target="_blank"
-                rel="noreferrer"
-                className="cursor-pointer"
-                type={null}
-              >
-                <span className="md:block hidden">Sign up or Log in</span>
-                <span className="md:hidden">Sign up</span>
-              </Button>
-            </div>
-          </div>
-          {/* All links */}
-          {/* @FIX: space-x on the firSubscribest one. */}
-          <div className="font-display md:flex-row flex flex-col mt-12">
-            <div className="gap-14 md:grid-flow-col md:grid-cols-5 grid grid-flow-row grid-cols-1">
-              {siteLinks.siteLinks.map((siteLink, i) => {
-                return (
-                  <FooterLinks
-                    key={siteLink.text + i}
-                    title={siteLink.text}
-                    links={siteLink.links}
-                  />
-                )
-              })}
-            </div>
-          </div>
-          <Newsletter />
-          {/* <Newsletter email={email} setEmail={setEmail} /> */}
-          {/* Socials */}
-          {/* @FIX: mt is 103px */}
-          <div className="md:mx-0 place-content-between font-display md:flex-row flex flex-col pb-2 mx-auto mt-24">
-            <div className="pb-2">
-              <ul className="flex flex-row space-x-6">
-                <li className="items-center self-center align-middle">
-                  <a href="https://github.com/nhost" target="_blank" rel="noreferrer">
-                    <img src="/logos/Github.svg" width={25} height={25} alt="Nhost on GitHub" />
-                  </a>
-                </li>
-                <li className="items-center self-center align-middle">
-                  <a href="https://twitter.com/nhostio" target="_blank" rel="noreferrer">
-                    <img src="/logos/Twitter.svg" width={25} height={25} alt="Nhost on Twitter" />
-                  </a>
-                </li>
-                <li className="items-center self-center align-middle">
-                  <a
-                    href="https://www.linkedin.com/company/nhost/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <img src="/logos/Linkedin.svg" width={25} height={25} alt="Nhost in LinkedIn" />
-                  </a>
-                </li>
-                <li className="items-center self-center align-middle">
-                  <a href="https://discord.com/invite/9V7Qb2U" target="_blank" rel="noreferrer">
-                    <img
-                      src="/logos/Discord.svg"
-                      width={25}
-                      height={25}
-                      alt="Nhost community on Discord"
-                    />
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div className="md:pt-0 md:space-y-0 md:flex-row flex flex-col pt-2 space-y-4 text-xs font-medium text-white">
-              <a
-                className="translucent self-center"
-                href="https://nhost.io/privacy-policy"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Privacy Policy
-              </a>
-              <a
-                className="md:pl-6 translucent self-center"
-                href="https://nhost.io/terms-of-service"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Terms of Service
-              </a>
-
-              <a
-                className="md:pl-6 translucent self-center"
-                href="https://nhost.io"
-                target="_blank"
-                rel="noreferrer"
-              >
-                nhost.io 2022
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-interface FooterLinkProps {
-  title: string
-  links: Links[]
-}
-interface Links {
-  name: string
-  href: string
-}
-function FooterLinks({ title, links }: FooterLinkProps) {
-  return (
-    <div>
-      {/* color */}
-      <h1 className="font-medium text-gray-700 uppercase">{title}</h1>
-      <ul className="mt-4 space-y-4">
-        {links.map((link) => {
-          return (
-            <li key={link.name} className="text-white font-normal text-sm+ cursor-pointer">
-              <Link href={link.href}>{link.name}</Link>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}

docs/components/Header.tsx

@@ -1,277 +0,0 @@
-import { useNavData } from '@/components/NavDataContext'
-import { ArrowLeftIcon, MenuIcon } from '@heroicons/react/outline'
-import clsx from 'clsx'
-import { useRouter } from 'next/dist/client/router'
-import Link from 'next/link'
-import React, { MouseEvent, useEffect, useState } from 'react'
-import Button from '../components/ui/Button'
-import { Nav } from './Nav'
-
-export default function Header() {
-  const [mobileMenu, setMobileMenu] = useState(false)
-  const router = useRouter()
-  const GithubStarsCounter = () => {
-    const repoUrl = `https://api.github.com/repos/nhost/nhost`
-    const [count, setCount] = useState(null)
-    const format = (n: number) => (n > 1000 ? `${(n / 1000).toFixed(1)}k` : n)
-
-    useEffect(() => {
-      ;(async () => {
-        const data = await fetch(repoUrl).then((res) => res.json())
-        setCount(data.stargazers_count)
-      })()
-    }, [repoUrl])
-
-    return (
-      <a
-        className="text-base font-medium leading-snug flex flex-row items-center justify-center px-2.5 py-1.5 rounded opacity-50 hover:opacity-100 mr-8"
-        href="https://github.com/nhost/nhost"
-        target="_blank"
-        rel="noreferrer"
-      >
-        <img
-          className="mr-2"
-          src="/logos/Github2.svg"
-          width={20}
-          height={20}
-          alt="Nhost on GitHub"
-        />
-        {count === null ? 0 : format(count)}
-      </a>
-    )
-  }
-
-  function handleMobileMenuOpen() {
-    setMobileMenu(true)
-  }
-
-  function handleMobileMenuClose() {
-    setMobileMenu(false)
-  }
-
-  if (mobileMenu) {
-    return <MobileNav onClose={handleMobileMenuClose} />
-  }
-
-  return (
-    <header className="bg-white md:max-w-full menu-card rounded-md px-4 py-0.5 mx-2">
-      <div className="md:max-w-header2 mx-auto font-display flex flex-row antialiased">
-        <div className="flex flex-row w-full mx-auto place-content-between py-2">
-          <div className="flex flex-row">
-            <button
-              className="md:hidden w-8 h-8 flex items-center justify-center cursor-pointer text-greyscaleDark"
-              aria-label="Open menu"
-              onClick={handleMobileMenuOpen}
-            >
-              <MenuIcon className="h-6 w-6" />
-            </button>
-
-            <Link href="/get-started" passHref>
-              <a className="hidden ml-3 sm:ml-0 self-center md:flex flex-row cursor-pointer">
-                <img src="/images/nhost-docs.svg" width={110} height={35} alt="Nhost white logo" />
-                <h1 className="self-center ml-6 font-medium text-greyscaleDark">DOCS</h1>
-              </a>
-            </Link>
-
-            <div className="ml-20 hidden md:flex flex-row self-center ">
-              <ul className="flex flex-row items-center self-center antialiased font-medium text-greyscaleGrey font-display">
-                <Link href="/get-started" passHref={true}>
-                  <a
-                    className={clsx(
-                      'cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
-                      router.query.category === 'get-started' && 'text-greyscaleDark'
-                    )}
-                  >
-                    Get Started
-                  </a>
-                </Link>
-                <Link href="/platform" passHref={true}>
-                  <a
-                    className={clsx(
-                      'ml-12 cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
-                      router.query.category === 'platform' && 'text-greyscaleDark'
-                    )}
-                  >
-                    Platform
-                  </a>
-                </Link>
-
-                <Link href="/reference" passHref={true}>
-                  <a
-                    className={clsx(
-                      'ml-12 cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
-                      router.query.category === 'reference' && 'text-greyscaleDark'
-                    )}
-                  >
-                    Reference
-                  </a>
-                </Link>
-              </ul>
-            </div>
-          </div>
-          <div className="hidden sm:flex self-center">
-            <GithubStarsCounter />
-            <Button
-              className="self-center"
-              variant="primary"
-              href={'https://app.nhost.io'}
-              Component="a"
-              target="_blank"
-              rel="noreferrer"
-              type={null}
-            >
-              Go to Nhost
-            </Button>
-          </div>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-export type MobileNavProps = {
-  onClose?: VoidFunction
-}
-
-export function MobileNav({ onClose }: MobileNavProps) {
-  const { getConvolutedNavByCategory } = useNavData()
-  const router = useRouter()
-  const [selectedMenuSlug, setSelectedMenuSlug] = useState<string | null>(null)
-  const [selectedMenuName, setSelectedMenuName] = useState<string | null>(null)
-
-  function handleMenuSelect(event: MouseEvent<HTMLAnchorElement>, slug: string, name: string) {
-    event.preventDefault()
-
-    setSelectedMenuSlug(slug)
-    setSelectedMenuName(name)
-  }
-
-  function clearMenuSelection() {
-    setSelectedMenuSlug(null)
-    setSelectedMenuName(null)
-  }
-
-  return (
-    <div className="bg-white menu-card rounded-lg px-4 pb-6 max-w-full mx-2">
-      <div className="flex flex-col w-full py-3 mx-auto">
-        <div className="grid grid-flow-col justify-between items-center">
-          {!selectedMenuSlug && (
-            <>
-              <button
-                className="w-8 h-8 flex items-center justify-center cursor-pointer text-greyscaleDark"
-                aria-label="Close menu"
-                onClick={onClose}
-              >
-                <MenuIcon className="h-6 w-6" aria-hidden="true" />
-              </button>
-
-              <Link href="/get-started" passHref>
-                <a
-                  className="ml-3 sm:ml-0 self-center flex flex-row cursor-pointer"
-                  onClick={onClose}
-                >
-                  <img
-                    src="/images/nhost-docs.svg"
-                    width={110}
-                    height={35}
-                    alt="Nhost white logo"
-                  />
-                  <h1 className="self-center ml-5 font-medium text-greyscaleDark">DOCS</h1>
-                </a>
-              </Link>
-            </>
-          )}
-
-          {selectedMenuSlug && (
-            <button
-              className="ml-2 h-8 grid grid-flow-col gap-2 items-center justify-center cursor-pointer text-greyscaleDark"
-              aria-label="Go back to main menu"
-              onClick={clearMenuSelection}
-            >
-              <ArrowLeftIcon className="h-4 w-4" aria-hidden="true" />{' '}
-              <span className="font-medium text-base-">{selectedMenuName}</span>
-            </button>
-          )}
-
-          {/* Placeholder for making logo appear correctly in the middle */}
-          <div className="w-8 h-8" />
-        </div>
-
-        <div className="flex flex-col py-6 mt-4 border-divide border-t border-b">
-          {!selectedMenuSlug && (
-            <ul className="flex flex-col font-medium text-greyscaleDark text-base- font-display space-y-4 text-left px-4">
-              <li
-                className={clsx(
-                  'cursor-pointer text-base-  hover:text-greyscaleDark transition-colors duration-200 text-left ',
-                  router.query.category === 'get-started' && 'text-greyscaleDark'
-                )}
-              >
-                <Link href="/get-started" passHref>
-                  <a
-                    className="block"
-                    onClick={(event) => handleMenuSelect(event, 'get-started', 'Get Started')}
-                  >
-                    Get Started
-                  </a>
-                </Link>
-              </li>
-              <li
-                className={clsx(
-                  'cursor-pointer text-base- hover:text-greyscaleDark transition-colors duration-200 text-left',
-                  router.query.category === 'platform' && 'text-greyscaleDark'
-                )}
-              >
-                <Link href="/platform">
-                  <a
-                    className="block"
-                    onClick={(event) => handleMenuSelect(event, 'platform', 'Platform')}
-                  >
-                    Platform
-                  </a>
-                </Link>
-              </li>
-              <li
-                className={clsx(
-                  'cursor-pointer text-base- hover:text-greyscaleDark transition-colors duration-200',
-                  router.query.category === 'reference' && 'text-greyscaleDark'
-                )}
-              >
-                <Link href="/reference">
-                  <a
-                    className="block"
-                    onClick={(event) => handleMenuSelect(event, 'reference', 'Reference')}
-                  >
-                    Reference
-                  </a>
-                </Link>
-              </li>
-            </ul>
-          )}
-
-          {selectedMenuSlug && (
-            <Nav
-              category={selectedMenuSlug}
-              categoryTitle={selectedMenuName}
-              convolutedNav={getConvolutedNavByCategory(selectedMenuSlug)}
-              onMenuSelected={onClose}
-            />
-          )}
-        </div>
-      </div>
-
-      <div className="sm:flex self-center py-2">
-        <Button
-          className="self-center"
-          variant="primary"
-          href="https://app.nhost.io"
-          Component="a"
-          target="_blank"
-          rel="noreferrer"
-          type={null}
-        >
-          Go to Nhost
-        </Button>
-      </div>
-    </div>
-  )
-}

docs/components/HeadingsNavigation.tsx

@@ -1,42 +0,0 @@
-import Text from '@/components/ui/Text/Text'
-import createKebabCase from '@/utils/createKebabCase'
-import clsx from 'clsx'
-import { useRouter } from 'next/dist/client/router'
-import Link from 'next/link'
-import React from 'react'
-
-export function HeadingsNavigation(props) {
-  const {
-    query: { category, subcategory, post }
-  } = useRouter()
-
-  return (
-    <div className="hidden xl:flex flex-col mt-10 sticky top-20 w-full h-full pb-12 pl-4">
-      <Text className="font-medium" color="greyscaleDark" size="normal">
-        On this page
-      </Text>
-      <ul className="space-y-2 mt-2 pl-1">
-        {props.headings.map((heading) => {
-          return (
-            <Link
-              passHref
-              key={heading.name}
-              href={`/${category}/${subcategory}/${post}#${createKebabCase(heading.name)}`}
-            >
-              <li
-                className={clsx(
-                  'text-blue hover:text-darkBlue transition-all duration-300  cursor-pointer hover:translate-x-0.5 transform',
-                  heading.depth === 1 && 'text-sm font-medium',
-                  heading.depth === 2 && 'pl-3 text-sm font-normal',
-                  heading.depth === 3 && 'pl-7 text-xs font-normal'
-                )}
-              >
-                {heading.name}
-              </li>
-            </Link>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}

docs/components/MDX/CodeComponent.tsx

@@ -1,75 +0,0 @@
-import { lightNhostTheme } from '@/data/lightTheme'
-import { useState } from 'react'
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
-import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'
-
-import Check from '../icons/Check'
-import Copy from '../icons/Copy'
-
-// @ts-ignore -> add to types
-// @ts-ignore -> add to types
-SyntaxHighlighter.registerLanguage('js', js)
-// TODO highlight JSX
-SyntaxHighlighter.registerLanguage('jsx', js)
-
-export interface CodeEditorProps {
-  code: string
-  fileName: string
-  className: string
-  fixed: boolean
-  gradient: boolean
-  deploy: boolean
-  url?: string
-  children: any
-}
-
-const CodeEditor = (props: CodeEditorProps) => {
-  const { children, url } = props
-  const [copied, setCopied] = useState(false)
-
-  return (
-    <div className="relative min-w-full pb-0 my-4 rounded-md">
-      <div className="absolute right-0">
-        <button
-          className="ml-1.5 self-center inline-block cursor-pointer rounded-md mt-2 mr-2"
-          onClick={() => {
-            navigator.clipboard.writeText(children).catch((e) => {
-              // eslint-disable-next-line no-console
-              console.log(e)
-            })
-            setCopied(true)
-            setTimeout(() => {
-              setCopied(false)
-            }, 1000)
-          }}
-        >
-          {/* <Tooltip text={"Copied!"}> */}
-          {copied ? (
-            <Check className="w-3.5 h-3.5 mr-0.5 text-greenDark transition-colors self-center" />
-          ) : (
-            <Copy className="w-4 h-4 text-gray-500 transition-colors hover:text-gray-900" />
-          )}
-          {/* </Tooltip> */}
-        </button>
-      </div>
-      <SyntaxHighlighter
-        style={lightNhostTheme}
-        wrapLongLines={true}
-        wrapLines={true}
-        lineProps={{
-          style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' }
-        }}
-        customStyle={{
-          paddingLeft: '12px',
-          fontSize: '13px'
-        }}
-        className="pt-2 rounded-md"
-        showLineNumbers={false}
-      >
-        {children}
-      </SyntaxHighlighter>
-    </div>
-  )
-}
-
-export default CodeEditor

docs/components/MDX/components.tsx

@@ -1,154 +0,0 @@
-import AnchorLink, { AnchorLinkProps } from '@/components/AnchorLink'
-import CodeComponent, { CodeEditorProps } from '@/components/MDX/CodeComponent'
-import Text, { TextProps } from '@/components/ui/Text'
-import clsx from 'clsx'
-import Image from 'next/image'
-import Link from 'next/link'
-import React, { DetailedHTMLProps, HTMLProps, PropsWithChildren } from 'react'
-
-import Command from '../Command'
-import Divider from '../Divider'
-
-function Note({ children }: PropsWithChildren<unknown>) {
-  return (
-    <div className="px-5 py-5 my-5 space-y-2 text-white rounded-md bg-verydark">
-      <Text className="text-white">Note</Text>
-      <Text className="text-white">{children}</Text>
-    </div>
-  )
-}
-
-function Video({
-  src,
-  ...props
-}: DetailedHTMLProps<HTMLProps<HTMLSourceElement>, HTMLSourceElement>) {
-  return (
-    <div className="flex justify-center mx-10 my-8">
-      <video width="800" controls>
-        <source src={src} type="video/mp4" {...props} />
-      </video>
-    </div>
-  )
-}
-
-const CustomLink = ({
-  className,
-  children,
-  href,
-  ...props
-}: DetailedHTMLProps<HTMLProps<HTMLAnchorElement>, HTMLAnchorElement>) => {
-  const isInternalLink = href && ['./', '../', '/', '#'].some((symbol) => href.startsWith(symbol))
-
-  if (isInternalLink) {
-    return (
-      <Link href={href} passHref>
-        <a className={clsx('font-medium text-blue', className)} {...props}>
-          {children}
-        </a>
-      </Link>
-    )
-  }
-
-  return (
-    <a
-      target="_blank"
-      className={clsx('font-medium text-blue', className)}
-      rel="noopener noreferrer"
-      href={href}
-      {...props}
-    >
-      {children}
-    </a>
-  )
-}
-
-const components = {
-  img: (props: DetailedHTMLProps<HTMLProps<HTMLImageElement>, HTMLImageElement>) => {
-    return (
-      <span className="block mx-10 mt-5 ">
-        <img src={props.src} alt={props.alt} className="mx-auto mt-2" />
-      </span>
-    )
-  },
-  Video,
-  Image,
-  Text,
-  Note,
-  code: (props: CodeEditorProps) => {
-    if (props.className && props.className.includes('language')) {
-      return <CodeComponent {...props} />
-    } else {
-      return <Command>{props.children}</Command>
-    }
-  },
-  Divider,
-  a: CustomLink,
-  h1: (props: AnchorLinkProps) => {
-    return (
-      <>
-        <Divider />
-        <AnchorLink {...props} className="text-3xl cursor-pointer md:text-4xl" />
-      </>
-    )
-  },
-  h2: (props: AnchorLinkProps) => {
-    return (
-      <div className="mt-10">
-        <AnchorLink {...props} className="cursor-pointer text-lg sm:text-xl md:text-2.5xl" />
-      </div>
-    )
-  },
-  h3: (props: AnchorLinkProps) => {
-    return (
-      <div className="mt-8">
-        <AnchorLink {...props} className="text-lg cursor-pointer" />
-      </div>
-    )
-  },
-  h4: (props: AnchorLinkProps) => {
-    return (
-      <div className="mt-4">
-        <AnchorLink {...props} className="font-bold cursor-pointer text-base-" />
-      </div>
-    )
-  },
-  p: (props: TextProps) => {
-    return (
-      <Text
-        variant="body"
-        size="small"
-        color="dark"
-        className="my-2 antialiased leading-6"
-        {...props}
-      />
-    )
-  },
-  th: ({
-    className,
-    ...props
-  }: DetailedHTMLProps<HTMLProps<HTMLTableCellElement>, HTMLTableCellElement>) => {
-    return <th className={clsx('font-display', className)} {...props} />
-  },
-  td: ({
-    className,
-    ...props
-  }: DetailedHTMLProps<HTMLProps<HTMLTableCellElement>, HTMLTableCellElement>) => {
-    return <td className={clsx('font-display', className)} {...props} />
-  },
-  Mermaid: ({ chart }) => {
-    const [html, setHtml] = React.useState('')
-    React.useEffect(() => {
-      const start = async () => {
-        const mermaid = (await import('mermaid')).default
-        mermaid.mermaidAPI.render(uuid(), chart, (svgCode) => setHtml(svgCode))
-      }
-      start()
-    }, [chart])
-    return chart ? <div dangerouslySetInnerHTML={{ __html: html }} /> : null
-  }
-}
-
-let currentId = 0
-const uuid = () => `mermaid-${(currentId++).toString()}`
-
-export default components

docs/components/Main.tsx

@@ -1,3 +0,0 @@
-export function Main({ children }) {
-  return <div className="flex flex-col w-full lg:min-w-body lg:w-body">{children}</div>
-}

docs/components/Nav.tsx

@@ -1,130 +0,0 @@
-import Text from '@/components/ui/Text'
-import clsx from 'clsx'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { ParsedUrlQuery } from 'querystring'
-import React, { MouseEvent } from 'react'
-import { fixTitle } from '../utils/fixTitle'
-import { NavItem } from './NavDataContext'
-
-export type NavProps = {
-  /**
-   * Class name to apply to the wrapper element.
-   */
-  className?: string
-  /**
-   * Category slug.
-   */
-  category: string
-  /**
-   * The category title.
-   */
-  categoryTitle: string
-  /**
-   * Convoluted navigation.
-   */
-  convolutedNav: NavItem[]
-  /**
-   * Function to be called when a menu item is selected.
-   */
-  onMenuSelected?: (event?: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
-}
-
-export function Nav({ className, onMenuSelected, ...props }: NavProps) {
-  const router = useRouter()
-
-  return (
-    <div className={clsx('lg:min-w-nav lg:w-nav flex-col space-y-5 antialiased mt-1', className)}>
-      <div>
-        <ul>
-          <li
-            className={clsx(
-              'transition duration-300 ease-in-out rounded-md hover:text-black hover:bg-veryLightGray',
-              router.query.category === props.category &&
-                !router.query.subcategory &&
-                !router.query.post &&
-                'bg-veryLightGray'
-            )}
-          >
-            <Link href={`/${props.category}`} passHref>
-              <Text
-                variant="a"
-                color="greyscaleDark"
-                size="normal"
-                className={clsx(
-                  'block py-1.5 px-3 transition-colors duration-300 ease-in-out text-greyscaleDark hover:text-dark subpixel-antialiased',
-                  'font-medium'
-                )}
-                onClick={onMenuSelected}
-              >
-                {props.categoryTitle}
-              </Text>
-            </Link>
-          </li>
-        </ul>
-      </div>
-      {props.convolutedNav.map((elem) => {
-        const parentCategory = props.category.replace(' ', '-')
-
-        return (
-          <div key={elem.category}>
-            <Link href={`/${parentCategory}/${elem.category}/`} passHref>
-              <Text
-                variant="a"
-                color="greyscaleGrey"
-                size="normal"
-                className="block px-3 py-px font-medium capitalize"
-                onClick={onMenuSelected}
-              >
-                {/* Split */}
-                {fixTitle(elem)}
-              </Text>
-            </Link>
-
-            <ul className="mt-1 space-y-1 ">
-              {elem.posts.map((post) => {
-                const pathToLink =
-                  post.fileName != 'index'
-                    ? `/${parentCategory}/${elem.category}/${post.fileName}`
-                    : `/${parentCategory}/${elem.category}`
-
-                const shouldHighlight =
-                  router.query.subcategory === elem.category && router.query.post === post.fileName
-
-                const shouldHighlightSubcategories =
-                  !router.query.post &&
-                  post.fileName === 'index' &&
-                  elem.category === router.query.subcategory
-
-                return (
-                  <li
-                    className={clsx(
-                      'transition duration-300 ease-in-out rounded-md hover:text-black hover:bg-veryLightGray',
-                      (shouldHighlight || shouldHighlightSubcategories) && 'bg-veryLightGray'
-                    )}
-                    key={pathToLink}
-                  >
-                    <Link href={pathToLink} passHref>
-                      <Text
-                        variant="a"
-                        color="greyscaleDark"
-                        size="normal"
-                        className={clsx(
-                          'py-1.5 px-3 block transition-colors duration-300 ease-in-out text-greyscaleDark hover:text-dark subpixel-antialiased block',
-                          (shouldHighlight || shouldHighlightSubcategories) && 'font-medium'
-                        )}
-                        onClick={onMenuSelected}
-                      >
-                        {post.title}
-                      </Text>
-                    </Link>
-                  </li>
-                )
-              })}
-            </ul>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

docs/components/NavDataContext.tsx

@@ -1,85 +0,0 @@
-import { ParsedUrlQuery } from 'querystring'
-import { createContext, PropsWithChildren, useContext } from 'react'
-
-export type Post = {
-  /**
-   * Title of the post.
-   */
-  title: string
-  /**
-   * File name where the post is located.
-   */
-  fileName: string
-  /**
-   * Order of posts.
-   */
-  order: string[]
-}
-
-export type NavItem = {
-  /**
-   * Slug of the category.
-   */
-  category: string
-  /**
-   * List of posts in the category.
-   */
-  posts: Post[]
-}
-
-export type NavDataContextProps = {
-  /**
-   * Category slug.
-   */
-  category: string
-  /**
-   * The category title.
-   */
-  categoryTitle: string
-  /**
-   * Convoluted navigation.
-   */
-  convolutedNav: NavItem[]
-  /**
-   * Available menu items for all categories.
-   */
-  availableCategoryMenus: {
-    /**
-     * Slug of the category.
-     */
-    slug: string
-    /**
-     * Menu items of the category.
-     */
-    items: NavItem[]
-  }[]
-}
-
-export const NavDataContext = createContext<NavDataContextProps>(null)
-
-export function NavDataProvider({ children, ...props }: PropsWithChildren<NavDataContextProps>) {
-  return <NavDataContext.Provider value={props}>{children}</NavDataContext.Provider>
-}
-
-export function useNavData() {
-  const context = useContext(NavDataContext)
-
-  if (!context) {
-    throw new Error(`"useNavData" must be used within a "NavDataProvider"`)
-  }
-
-  /**
-   * Returns all of the navigation items for the specified category.
-   *
-   * @param slug Slug of the category.
-   * @returns All of the navigation items for the specified category.
-   */
-  function getConvolutedNavByCategory(slug: string) {
-    return (
-      context.availableCategoryMenus.find(({ slug: category }) => category === slug)?.items ||
-      context.convolutedNav
-    )
-  }
-
-  return { getConvolutedNavByCategory, ...context }
-}

docs/components/NavSubHeadings.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import AnchorLink from './AnchorLink'
-import CustomLink from './CustomLink'
-import createKebabCase from '../utils/createKebabCase'
-import Text from '@/components/ui/Text'
-
-export default function Nav({ headings }: { headings: any }) {
-  return (
-    <div className="flex flex-col space-y-5 mt-9">
-      {headings.map((heading, index) => {
-        return (
-          <NavLink
-            category={heading.category}
-            post={heading.post}
-            headings={heading.content}
-            key={heading.category + index}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-function NavLink({ category, headings, post }) {
-  const href = `/${category}/${post.toLowerCase()}`
-  return (
-    <div className="mt-10 font-display" key={category}>
-      <CustomLink href={href} activeClassName="active" key={category}>
-        <Text variant="body" size="small" className="capitalize cursor-pointer text-grayscale">
-          {post.split('-').join(' ')}
-        </Text>
-      </CustomLink>
-      <ul className="space-y-1">
-        {headings.map((heading: { value: string }) => {
-          return (
-            <li className="py-1 capitalize rounded-sm" key={heading.value}>
-              <AnchorLink
-                id={`/${category}/${post.toLowerCase()}#${createKebabCase(heading.value)}`}
-              >{`/${heading.value}`}</AnchorLink>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}

docs/components/Newsletter.tsx

@@ -1,121 +0,0 @@
-import axios from 'axios'
-import React, { useEffect } from 'react'
-import { useState } from 'react'
-
-import Input from './ui/Input/Input'
-import Loading from './ui/Loading'
-
-function NewsletterForm(props) {
-  return (
-    <div className="flex flex-row w-64 mt-5">
-      <form
-        className="grid grid-flow-row sm:grid-flow-col gap-4"
-        onSubmit={(e) => props.subscribe(e)}
-      >
-        <Input
-          color="dark"
-          placeholder="Email address"
-          value={props.email}
-          onChange={props.setEmail}
-          type="email"
-        />
-        <button
-          className="btn-subscribe font-display text-greyscaleDark font-medium cursor-pointer"
-          disabled={!props.email}
-        >
-          {!props.loading ? 'Subscribe' : <Loading />}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-function NewsletterError({ errorMessage, retry }) {
-  const formattedError = errorMessage.includes('already a list member')
-    ? errorMessage.split('.').slice(0, 2).join('.')
-    : errorMessage
-  return (
-    <div className="grid grid-flow-row md:grid-flow-col gap-4 mt-5">
-      <p className="text-white font-normal text-sm mt-2.5">{formattedError}.</p>
-      <button
-        className="btn-subscribe font-display text-greyscaleDark font-medium cursor-pointer"
-        onClick={() => {
-          retry()
-        }}
-      >
-        Try again
-      </button>
-    </div>
-  )
-}
-
-export function Newsletter() {
-  const [email, setEmail] = useState('')
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  const handleSubmit = async function (e) {
-    e.preventDefault()
-    setLoading(true)
-
-    try {
-      const res = await axios.post('/api/add-email-to-newsletter', {
-        email
-      })
-      if (!res.data.success) {
-        setError(res.data.message)
-        return
-      }
-      setSuccess(res.data.message)
-    } catch (error) {
-      setError(
-        error.message ||
-          "We've encountered an error while subscribing you. Try again in a few seconds"
-      )
-    } finally {
-      setEmail('')
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    if (success) {
-      let id = setInterval(() => {
-        setSuccess('')
-      }, 5000)
-      return () => clearInterval(id)
-    }
-  }, [success])
-
-  return (
-    <div className="font-display flex flex-col mt-16">
-      <div className="md:px-0 w-full mx-auto">
-        <h1 className="font-medium text-gray-700 uppercase">newsletter</h1>
-        <p className="text-white font-normal text-sm+  mt-2.5">
-          Platform updates and news on web and mobile development.
-        </p>
-        {error ? (
-          <NewsletterError errorMessage={error} retry={() => setError('')} />
-        ) : !success ? (
-          <NewsletterForm
-            email={email}
-            setEmail={setEmail}
-            subscribe={handleSubmit}
-            loading={loading}
-          />
-        ) : (
-          <NewsletterSuccess success={success} />
-        )}
-      </div>
-    </div>
-  )
-}
-
-function NewsletterSuccess({ success }) {
-  return (
-    <div className="flex flex-row mt-5">
-      <p className="text-white font-normal text-sm mt-2.5">{success}</p>
-    </div>
-  )
-}

docs/components/PostMetadata.tsx

@@ -1,32 +0,0 @@
-import Text from '@/components/ui/Text'
-import React from 'react'
-
-import Github from '@/components/icons/Github'
-import { DOCS_GITHUB_ENDPOINT } from '@/utils/constants'
-
-export function PostMetadata(props) {
-  return (
-    <div className="mt-3 flex flex-row border-t pt-6 place-content-between px-3">
-      <div className="flex flex-row">
-        <Github className="text-blue" />
-        <a
-          className="text-blue text-xs ml-2 self-center"
-          href={`${DOCS_GITHUB_ENDPOINT}${props.category}/${props.subcategory}/${props.post}.mdx`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          Edit this page on GitHub
-        </a>
-      </div>
-      <div>
-        {props.frontmatter.updatedAt ? (
-          <div className="flex">
-            <Text size="tiny">Last updated on {props.frontmatter.updatedAt}</Text>
-          </div>
-        ) : (
-          ''
-        )}
-      </div>
-    </div>
-  )
-}

docs/components/SubNavigation.tsx

@@ -1,52 +0,0 @@
-import ArrowLeft from '@/components/icons/ArrowLeft'
-import ArrowRight from '@/components/icons/ArrowRight'
-import Text from '@/components/ui/Text/Text'
-import { orderTwo } from '@/lib/order'
-import { useRouter } from 'next/dist/client/router'
-import Link from 'next/link'
-import React from 'react'
-
-export function SubNavigation({ category, subcategory, post, convolutedNav }) {
-  const router = useRouter()
-  const indexOfSubcategory = Object.keys(orderTwo[category]).indexOf(subcategory)
-  const indexOfPreviousPost = orderTwo[category][subcategory].indexOf(post) - 1
-  let indexOfCurrentPost = orderTwo[category][subcategory].indexOf(post)
-  const previousPost = orderTwo[category][subcategory][indexOfCurrentPost - 1]
-  let indexOfNextPost = orderTwo[category][subcategory].indexOf(post) + 1
-
-  if (!router.query.post) indexOfCurrentPost++ && indexOfNextPost++
-
-  const nextPost = orderTwo[category][subcategory][indexOfCurrentPost + 1]
-
-  const pathLink = `/${category}/${subcategory}/${previousPost === 'index' ? '' : previousPost}`
-
-  return (
-    <div className="flex flex-row mt-10 place-content-between px-2 antialiased">
-      <Link href={pathLink} passHref>
-        <Text variant="a" color="blue" className="font-medium cursor-pointer" size="small">
-          {indexOfCurrentPost === 0 || !router.query.post ? (
-            <></>
-          ) : (
-            <div className="flex flex-row self-center hover:-translate-x-1 transform transition-transform duration-500">
-              <ArrowLeft className="self-center mr-1" />
-              {convolutedNav[indexOfSubcategory].posts[indexOfPreviousPost].title}
-            </div>
-          )}
-        </Text>
-      </Link>
-
-      <Link href={`/${category}/${subcategory}/${nextPost}`} passHref>
-        <Text variant="a" size="small" color="blue" className="font-medium cursor-pointer">
-          {nextPost ? (
-            <div className="flex flex-row self-center hover:translate-x-1 transform transition-transform duration-500">
-              {convolutedNav[indexOfSubcategory].posts[indexOfNextPost].title}
-              <ArrowRight className="self-center ml-1" />
-            </div>
-          ) : (
-            <></>
-          )}
-        </Text>
-      </Link>
-    </div>
-  )
-}

docs/components/Tooltip.tsx

@@ -1,25 +0,0 @@
-export function Tooltip({ text, children, position = '-mx-20', color = '' }) {
-  return (
-    <div className="relative has-tooltip">
-      {children}
-
-      <span
-        className={`z-50 px-1.5 py-0.5 text-sm bg-verydark -my-12 -mx-9 text-white rounded-sm shadow-2xl border tooltip font-medium`}
-      >
-        {text}
-      </span>
-      <svg
-        className="absolute z-50 w-3 h-2 text-verydark transform tooltip -top-2 right-0.5"
-        x="0px"
-        y="0px"
-        viewBox="0 0 255 255"
-        xmlSpace="preserve"
-      >
-        <polygon
-          className="border border-white fill-current text-lightbrand"
-          points="0,0 127.5,127.5 255,0"
-        />
-      </svg>
-    </div>
-  )
-}

docs/components/TopNavigation.tsx

@@ -1,46 +0,0 @@
-import CaretRight from '@/components/icons/CaretRight'
-import Text from '@/components/ui/Text/Text'
-import Link from 'next/link'
-import React from 'react'
-
-export function TopNavigation(props) {
-  const category = props.category.split('-').join(' ')
-
-  function uppercaseEdgeCases(subcategory) {
-    switch (subcategory) {
-      case 'sdk':
-        return 'SDK'
-      case 'cli':
-        return 'CLI'
-      default:
-        return subcategory
-    }
-  }
-
-  const subcategory = props.subcategory.split('-').join(' ')
-
-  return (
-    <div className="flex flex-row w-full">
-      <Link href={`/${props.category}`} passHref>
-        <Text
-          variant="a"
-          color="grey"
-          className="self-center font-medium capitalize transition-colors duration-200 cursor-pointer hover:text-greyscaleDark"
-          size="normal"
-        >
-          {category}
-        </Text>
-      </Link>
-      <CaretRight className="self-center text-greyscaleGrey mx-1" />
-      <Link href={`/${props.category}/${props.subcategory}`} passHref>
-        <Text
-          color="grey"
-          className="self-center font-medium capitalize transition-colors duration-200 cursor-pointer hover:text-greyscaleDark"
-          size="normal"
-        >
-          {uppercaseEdgeCases(subcategory)}
-        </Text>
-      </Link>
-    </div>
-  )
-}

docs/components/icons/ArrowLeft.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-function ArrowLeft(props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M13.5 8h-11M7 3.5L2.5 8 7 12.5"
-        stroke="#0052CD"
-        strokeWidth={1.5}
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default ArrowLeft

docs/components/icons/ArrowRight.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-function ArrowRight(props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M2.5 8h11M9 3.5L13.5 8 9 12.5"
-        stroke="#0052CD"
-        strokeWidth={1.5}
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default ArrowRight

docs/components/icons/CaretRight.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react'
-
-function CaretRight(props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth={1.5} strokeLinejoin="round" />
-    </svg>
-  )
-}
-
-export default CaretRight

docs/components/icons/Check.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react'
-
-function Check(props: any) {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M13.5 4.5l-7 7L3 8" stroke="currentColor" strokeWidth={2} strokeLinejoin="round" />
-    </svg>
-  )
-}
-
-export default Check

docs/components/icons/Check2.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react'
-
-function Check2(props: any) {
-  return (
-    <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M27 9L13 23l-7-7" stroke="#0D3777" strokeWidth={2} strokeLinejoin="round" />
-    </svg>
-  )
-}
-
-export default Check2

docs/components/icons/Copy.tsx

@@ -1,20 +0,0 @@
-const Copy = ({ ...props }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-      />
-    </svg>
-  )
-}
-
-export default Copy

docs/components/icons/Github.tsx

@@ -1,22 +0,0 @@
-const Github = ({ ...props }) => {
-  return (
-    <div className="cursor-pointer">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        {...props}
-      >
-        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
-      </svg>
-    </div>
-  )
-}
-
-export default Github

docs/components/icons/GithubIcon.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react'
-
-function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width={14}
-      height={14}
-      viewBox="0 0 14 14"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7 0a7 7 0 00-2.213 13.642c.35.065.478-.152.478-.337 0-.166-.006-.607-.01-1.19-1.947.422-2.357-.94-2.357-.94-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.426.048-.426.703.05 1.073.722 1.073.722.624 1.07 1.638.76 2.037.581.063-.452.244-.76.444-.935-1.554-.177-3.188-.778-3.188-3.46 0-.764.273-1.39.72-1.878-.072-.177-.312-.89.07-1.853 0 0 .586-.188 1.924.718A6.705 6.705 0 017 3.385c.595.003 1.194.08 1.753.236 1.336-.906 1.923-.718 1.923-.718.382.964.142 1.676.07 1.853a2.7 2.7 0 01.72 1.878c0 2.69-1.638 3.281-3.197 3.454.251.216.475.644.475 1.297 0 .935-.009 1.69-.009 1.92 0 .187.127.405.482.337A7 7 0 007 0z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-export default GithubIcon

docs/components/icons/Help.tsx

@@ -1,20 +0,0 @@
-const Help = ({ ...props }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-  )
-}
-
-export default Help

docs/components/icons/Logo.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react'
-
-function Logo(props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 95 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g clipPath="url(#prefix__clip0)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M50.657 15.218h4.792v-3.801h2.535v9.752h-2.535v-3.802h-4.792v3.802H48.21v-9.752h2.446v3.801zm16.996-3.801H63.74c-1.084 0-1.744.204-2.243.703-.497.496-.688 1.126-.688 2.238v3.874c0 1.112.19 1.74.688 2.238.497.498 1.157.703 2.243.703h3.913c1.084 0 1.744-.205 2.243-.703.5-.496.688-1.126.688-2.238v-3.874c0-1.112-.19-1.74-.688-2.239-.5-.498-1.159-.702-2.243-.702zm.483 6.872c0 .57-.19.73-.879.73h-3.121c-.688 0-.88-.16-.88-.73v-3.992c0-.571.192-.731.88-.731h3.121c.705 0 .88.145.88.73v3.993zm8.512-2.97h3.501c1.084 0 1.758.205 2.243.703.439.44.688 1.155.688 1.93v.586c0 .776-.25 1.476-.688 1.93-.485.498-1.145.703-2.243.703h-6.681v-2.15h6.271c.688 0 .88-.16.88-.73v-.292c0-.571-.192-.731-.88-.731h-3.5c-1.087 0-1.76-.207-2.243-.703-.439-.44-.689-1.154-.689-1.93v-.585c0-.776.248-1.477.689-1.93.485-.499 1.142-.703 2.242-.703h6.333v2.149h-5.923c-.688 0-.879.16-.879.73v.292c0 .572.191.732.88.732zm7.983-1.753v-2.15h9.963v2.15h-3.75v7.603h-2.448v-7.603H84.63z"
-          fill="#21324B"
-        />
-        <path
-          d="M42.355 11.34h-3.913c-1.084 0-1.744.204-2.243.703-.497.496-.688 1.126-.688 2.236v6.888h2.447V14.22c0-.57.191-.73.88-.73h3.121c.704 0 .879.146.879.73v6.948h2.448V14.28c0-1.112-.191-1.74-.689-2.236-.497-.5-1.156-.705-2.242-.705z"
-          fill="#0052CD"
-        />
-        <g clipPath="url(#prefix__clip1)">
-          <path
-            d="M27.208 6.858L16.055.43a3.268 3.268 0 00-3.246 0 3.245 3.245 0 00-1.621 2.803v.839l-.727-.42a3.268 3.268 0 00-3.246 0A3.246 3.246 0 005.594 6.46v.838l-.727-.419a3.268 3.268 0 00-3.245 0A3.246 3.246 0 000 9.683v20.136a1.526 1.526 0 002.47 1.195L8 26.66l8.53 4.914a1.548 1.548 0 001.526 0c.47-.272.763-.776.763-1.319V18.14a5.595 5.595 0 00-2.797-4.835l-2.797-1.612V3.236a1.21 1.21 0 011.815-1.045l11.153 6.425a3.562 3.562 0 011.78 3.076v15.089c0 .43-.232.83-.605 1.045l-2.955 1.703V14.914a5.595 5.595 0 00-2.797-4.834L14.75 6.125v2.343l5.849 3.37a3.559 3.559 0 011.78 3.076v15.492c0 .54.292 1.047.763 1.319a1.549 1.549 0 001.526 0l3.719-2.143c1-.577 1.622-1.65 1.622-2.805V11.688a5.609 5.609 0 00-2.801-4.83zM15 15.062a3.559 3.559 0 011.78 3.077v11.24L9.718 25.31l2.267-1.782a3.214 3.214 0 001.236-2.542V14.04l1.78 1.023zm-3.813-2.197v8.117c0 .373-.169.72-.461.948l-8.693 6.84V9.68a1.209 1.209 0 011.814-1.045L5.594 9.64v14.39l2.033-1.6V6.458a1.209 1.209 0 011.815-1.045l1.745 1.004v4.102L9.155 9.347v2.345l2.034 1.173z"
-            fill="#0052CD"
-          />
-        </g>
-      </g>
-      <defs>
-        <clipPath id="prefix__clip0">
-          <path fill="#fff" d="M0 0h94.582v32H0z" />
-        </clipPath>
-        <clipPath id="prefix__clip1">
-          <path fill="#fff" d="M0 0h30.009v31.927H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
-
-export default Logo

docs/components/icons/Permalink.tsx

@@ -1,15 +0,0 @@
-const Permalink = ({ ...props }) => {
-  return (
-    <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M5.878 10.12l4.243-4.242M9.06 11.182L7.293 12.95A3 3 0 013.05 8.707l1.768-1.768M11.182 9.06l1.768-1.768A3 3 0 008.707 3.05L6.939 4.818"
-        stroke="#21324B"
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Permalink

docs/components/icons/Vector.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react'
-
-function Vector(props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width={260}
-      height={117}
-      viewBox="0 0 260 117"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M35.5 1h1V0h-1v1zM254 87l-5.773 10h11.546L254 87zM.5 2h2.188V0H.5v2zm6.563 0h4.375V0H7.061v2zm8.75 0h4.374V0h-4.375v2zm8.75 0h4.375V0h-4.375v2zm8.75 0H35.5V0h-2.188v2zM34.5 1v1.982h2V1h-2zm0 5.946v3.965h2V6.946h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.928v3.964h2v-3.964h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.928v3.965h2v-3.965h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.928v3.965h2v-3.965h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.928v3.964h2v-3.964h-2zm0 7.929v3.964h2v-3.964h-2zm0 7.928v3.965h2v-3.965h-2zm0 7.929V112h2v-1.982h-2zm0 1.982c0 .676.135 1.323.38 1.914l1.847-.766A2.985 2.985 0 0136.5 112h-2zm3.086 4.62c.59.245 1.238.38 1.914.38v-2a2.99 2.99 0 01-1.148-.227l-.766 1.847zm1.914.38h2.024v-2H39.5v2zm6.072 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.097 0h4.048v-2H69.86v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0H90.1v-2h-4.048v2zm8.096 0h4.048v-2H94.15v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.097 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.049v-2h-4.049v2zm8.097 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.049v-2h-4.049v2zm8.097 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0h4.048v-2h-4.048v2zm8.096 0H250v-2h-2.024v2zm2.024 0c.676 0 1.323-.135 1.914-.38l-.766-1.847A2.987 2.987 0 01250 115v2zm4.62-3.086c.245-.591.38-1.238.38-1.914h-2c0 .409-.081.796-.227 1.148l1.847.766zM255 112v-2.083h-2V112h2zm0-6.25v-4.167h-2v4.167h2zm0-8.333V93.25h-2v4.167h2z"
-        fill="#C2CAD6"
-      />
-    </svg>
-  )
-}
-
-export default Vector

docs/components/ui/Button/Button.module.css

@@ -1,97 +0,0 @@
-.root {
-  @apply font-display flex px-2 py-1.6;
-  justify-content: center;
-  align-items: center;
-  line-height: 22px;
-  font-size: 15px;
-}
-
-.primary {
-  @apply bg-blue font-display flex font-medium text-white;
-  font-size: 15px;
-  border-radius: 4px;
-  line-height: 22px;
-}
-
-.danger {
-  @apply py-2.5 px-2.5 text-red font-display font-medium;
-  height: 36px;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  border: 1px solid #c2cad6;
-}
-
-.blue {
-  @apply text-blue;
-}
-
-.red {
-  @apply text-red;
-}
-
-.root:focus {
-  @apply outline-none;
-}
-
-.root[data-active] {
-  @apply bg-accent-6;
-}
-
-.loading {
-  @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
-}
-
-.secondary {
-  @apply font-display text-greyscaleDark bg-white;
-  font-weight: 500;
-  font-size: 15px;
-  border: 1px solid #c2cad6;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-.menu {
-  @apply font-display text-greyscaleDark cursor-pointer;
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 15px;
-}
-.dark {
-  @apply font-medium text-white;
-  background: #21324b;
-  border-radius: 4px;
-}
-.dark .disabled {
-  @apply font-medium text-white;
-  background: #21324b;
-  border-radius: 4px;
-}
-.secondary .disabled {
-  @apply font-medium;
-  color: rgba(9, 34, 72, 0.4);
-}
-.disabled,
-.disabled:hover {
-  @apply text-gray-400 cursor-not-allowed;
-  border-radius: 4px;
-}
-.small {
-  width: 51px;
-  height: 24px;
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
-}
-.transparent {
-  @apply px-0 py-1 bg-transparent border-0;
-}
-.border {
-  @apply px-2 py-1.5;
-  border: 1px solid #c2cad6;
-  border-radius: 4px;
-}

docs/components/ui/Button/Button.tsx

@@ -1,88 +0,0 @@
-import cn from 'classnames'
-import React, { ButtonHTMLAttributes, forwardRef, JSXElementConstructor, useRef } from 'react'
-import mergeRefs from 'react-merge-refs'
-
-import s from './Button.module.css'
-
-// import Loading from "../components/ui/Loading";
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  href?: string
-  className?: string
-  variant?: 'primary' | 'dark' | 'secondary' | 'menu' | 'danger'
-  color?: 'blue' | 'red'
-  active?: boolean
-  type?: 'submit' | 'reset' | 'button'
-  Component?: string | JSXElementConstructor<any>
-  width?: string | number
-  loading?: boolean
-  disabled?: boolean
-  small?: boolean
-  transparent?: boolean
-  target?: string
-  rel?: string
-  onClick?: any
-  border?: boolean
-}
-
-// eslint-disable-next-line react/display-name
-export const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
-  const {
-    className,
-    variant,
-    children,
-    active,
-    width,
-    small,
-    href,
-    color,
-    border,
-    loading = false,
-    disabled = false,
-    transparent = false,
-    style = {},
-    type = 'button',
-    Component = 'button',
-    ...rest
-  } = props
-  const ref = useRef<typeof Component>(null)
-
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.primary]: variant === 'primary',
-      [s.secondary]: variant === 'secondary',
-      [s.menu]: variant === 'menu',
-      [s.dark]: variant === 'dark',
-      [s.danger]: variant === 'danger',
-      [s.loading]: loading,
-      [s.disabled]: disabled,
-      [s.small]: small,
-      [s.transparent]: transparent,
-      [s.blue]: color === 'blue',
-      [s.red]: color === 'red',
-      [s.border]: border
-    },
-    className
-  )
-
-  return (
-    <Component
-      aria-pressed={active}
-      data-variant={variant}
-      ref={mergeRefs([ref, buttonRef])}
-      className={rootClassName}
-      disabled={disabled}
-      type={type}
-      href={href}
-      style={{
-        width,
-        ...style
-      }}
-      {...rest}
-    >
-      {children}
-    </Component>
-  )
-})
-
-export default Button

docs/components/ui/Button/index.ts

@@ -1 +0,0 @@
-export { default } from './Button'

docs/components/ui/Input/Input.module.css

@@ -1,31 +0,0 @@
-.root {
-  @apply border-input text-dark focus:ring-dark focus:border-dark flex px-2 py-2 text-xs rounded-md shadow-sm;
-  border: 1px solid #c2cad6;
-}
-
-.root:focus {
-  @apply outline-none;
-}
-
-.dark {
-  flex: none;
-  width: 247px;
-  height: 36px;
-  left: 0px;
-  top: 0px;
-  color: white;
-
-  /* Translucent white/White light (20) */
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  border: none;
-
-  /* Inside Auto Layout */
-  order: 0;
-  flex-grow: 1;
-}
-
-.disabled,
-.disabled:hover {
-  @apply text-accent-3 cursor-not-allowed;
-}

docs/components/ui/Input/Input.tsx

@@ -1,44 +0,0 @@
-import cn from 'classnames'
-import s from './Input.module.css'
-import React, { InputHTMLAttributes } from 'react'
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  className?: string
-  onChange?: (...args: any[]) => any
-  disabled?: boolean
-}
-
-type Color = 'dark' | 'light'
-
-const Input: React.FC<InputProps> = (props) => {
-  const { className, children, onChange, color, disabled, placeholder = '', ...rest } = props
-
-  const rootClassName = cn(
-    s.root,
-    { [s.disabled]: disabled, [s.dark]: color === 'dark' },
-    className
-  )
-
-  const handleOnChange = (e: any) => {
-    if (onChange) {
-      onChange(e.target.value)
-    }
-    return null
-  }
-
-  return (
-    <input
-      className={rootClassName}
-      onChange={handleOnChange}
-      disabled={disabled}
-      autoComplete="off"
-      autoCorrect="off"
-      autoCapitalize="off"
-      spellCheck="false"
-      placeholder={placeholder}
-      {...rest}
-    />
-  )
-}
-
-export default Input

docs/components/ui/Input/index.ts

@@ -1 +0,0 @@
-export { default } from './Input'

docs/components/ui/Loading.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-export default function Loading() {
-  return (
-    <svg
-      className="w-5 h-5 text-dark animate-spin"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  )
-}

docs/components/ui/Text/Text.module.css

@@ -1,90 +0,0 @@
-.body {
-  font-family: Inter;
-  font-style: normal;
-}
-
-.dark {
-  @apply text-dark;
-}
-
-.greyscaleDark {
-  @apply text-greyscaleDark;
-}
-
-.white {
-  @apply text-white;
-}
-
-.greyscaleGrey {
-  @apply text-greyscaleGrey;
-}
-
-.grey {
-  @apply text-grayscale;
-}
-
-.red {
-  @apply text-red;
-}
-
-.blue {
-  @apply text-blue;
-}
-
-.heading {
-  @apply font-display;
-}
-
-.pageHeading {
-  @apply pt-1 pb-4 text-2xl font-bold leading-7 tracking-wide;
-}
-
-.a {
-  font-family: Inter;
-  font-style: normal;
-}
-
-.tiny {
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.small {
-  font-size: 15px;
-}
-
-.normal {
-  font-size: 15px;
-  line-height: 22px;
-}
-
-.large {
-  font-size: 18px;
-  line-height: 26px;
-}
-
-.big {
-  font-size: 26px;
-  line-height: 36px;
-}
-
-.heading {
-  font-size: 36px;
-  line-height: 48px;
-}
-
-.subHeading {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-}
-
-.sectionHeading {
-  @apply text-lg font-medium font-display;
-  color: gray;
-}
-
-.item {
-  font-family: Inter;
-  font-style: normal;
-}

docs/components/ui/Text/Text.tsx

@@ -1,123 +0,0 @@
-import cn from 'classnames'
-import React, {
-  CSSProperties,
-  ForwardedRef,
-  forwardRef,
-  FunctionComponent,
-  JSXElementConstructor
-} from 'react'
-import mergeRefs from 'react-merge-refs'
-import s from './Text.module.css'
-
-export interface TextProps {
-  variant?: Variant
-  className?: string
-  style?: CSSProperties
-  children?: React.ReactNode | any
-  color?: Color
-  html?: string
-  size?: Size
-  target?: any
-  rel?: any
-  href?: string
-  onClick?: () => any
-  name?: any
-}
-
-type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' | 'item' | 'subHeading' | 'a'
-
-type Size = 'tiny' | 'small' | 'normal' | 'large' | 'big' | 'heading'
-
-type Color = 'dark' | 'grey' | 'blue' | 'greyscaleDark' | 'greyscaleGrey' | 'red' | 'white'
-
-export const Text: FunctionComponent<TextProps> = forwardRef(function DefaultText(
-  {
-    style,
-    className = '',
-    variant = 'body',
-    color,
-    children,
-    html,
-    onClick,
-    size,
-    rel,
-    href,
-    target,
-    name
-  },
-  ref: ForwardedRef<HTMLElement>
-) {
-  const componentsMap: {
-    [P in Variant]: React.ComponentType<any> | string
-  } = {
-    body: 'div',
-    heading: 'h1',
-    pageHeading: 'h1',
-    sectionHeading: 'h2',
-    subHeading: 'h3',
-    item: 'p',
-    a: 'a'
-  }
-
-  const Component:
-    | JSXElementConstructor<any>
-    | React.ReactElement<any>
-    | React.ComponentType<any>
-    | string = componentsMap![variant!]
-
-  const htmlContentProps = html
-    ? {
-        dangerouslySetInnerHTML: { __html: html }
-      }
-    : {}
-
-  const aProps =
-    variant === 'a'
-      ? {
-          rel,
-          href,
-          target
-        }
-      : {}
-
-  return (
-    <Component
-      ref={ref}
-      className={cn(
-        s.root,
-        {
-          [s.body]: variant === 'body',
-          [s.a]: variant === 'a',
-          [s.heading]: variant === 'heading',
-          [s.pageHeading]: variant === 'pageHeading',
-          [s.sectionHeading]: variant === 'sectionHeading',
-          [s.subHeading]: variant === 'subHeading',
-          [s.item]: variant === 'item',
-          [s.dark]: color === 'dark',
-          [s.greyscaleDark]: color === 'greyscaleDark',
-          [s.grey]: color === 'grey',
-          [s.blue]: color === 'blue',
-          [s.tiny]: size === 'tiny',
-          [s.small]: size === 'small',
-          [s.normal]: size === 'normal',
-          [s.large]: size === 'large',
-          [s.big]: size === 'big',
-          [s.heading]: size === 'heading',
-          [s.greyscaleGrey]: color === 'greyscaleGrey',
-          [s.red]: color === 'red',
-          [s.white]: color === 'white'
-        },
-        className
-      )}
-      onClick={onClick}
-      style={style}
-      {...htmlContentProps}
-      {...aProps}
-      name={name}
-    >
-      {children}
-    </Component>
-  )
-})
-
-export default Text

docs/components/ui/Text/index.ts

@@ -1,2 +0,0 @@
-export * from './Text'
-export { default } from './Text'

docs/components/ui/index.ts

@@ -1,2 +0,0 @@
-export * from './Button/Button'
-export * from './Text/Text'

docs/content/docs/get-started/authentication/index.mdx

@@ -1,90 +0,0 @@
----
-title: 'Authenticate users'
----
-
-You defined `select` permissions for the `public` role in the previous section. You will now add `insert` and `create` permissions for authenticated users to secure your app's GraphQL API with authentication.
-
-> Nhost's authentication service lets you deliver frictionless registration and login experiences to your users. We support most social providers and different methods such as email & password and passwordless (magic link).
-
----
-
-## Insert a test user
-
-Manually create a user by going to your app's **Users** tab (top menu) and clicking on **Add User**.
-
-![Add user](/images/quick-start/add-user.gif)
-
-You will now use that newly created user to make authenticated requests to the API.
-
----
-
-## Authenticate and query data
-
-Add the following code to sign in the new user and request the list of todos again:
-
-```js
-import { NhostClient } from '@nhost/nhost-js'
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run'
-})(async () => {
-  // Sign in user
-  const signInResponse = await nhost.auth.signIn({
-    email: 'joe@example.com',
-    password: 'securepassword'
-  })
-
-  // Handle sign-in error
-  if (signInResponse.error) {
-    throw signInResponse.error
-  }
-
-  // Get todos
-  const todos = await nhost.graphql.request(`
-    query {
-      todos {
-        id
-        created_at
-        name
-        is_completed
-      }
-    }
-  `)
-
-  console.log(JSON.stringify(todos.data, null, 2))
-})()
-```
-
-Why is the return value `null`? Because when making GraphQL requests as an authenticated user, the `user` role is assumed.
-
-> For authenticated requests, there is always the option to override the default `user` role with any other valid role.
-
----
-
-## Permissions for users
-
-### Remove permissions for the public role
-
-We won't use the `public` role anymore, so let's remove all permission for that role.
-
-![Remove public permissions from Hasura](/images/quick-start/remove-public-permissions.png)
-
-Now we'll add permissions for the `user` role.
-
-> All logged-in users have the `user` role.
-
-### Insert permission
-
-First, we'll set the **Insert permission**.
-
-A user can only insert `name` because all other columns will be set automatically. More specifically, `user_id` is set to the user's id making the request (`x-hasura-user-id`) and is configured in the `Column presets` section. See the image below.
-
-![User insert permission](/images/quick-start/user-insert-permission.png)
-
-### Select permission
-
-For **Select permission**, set a **custom check** so users can only select todos where `user_id` is the same as their user id. In other words: users are only allowed to select their own todos. See the image below.
-
-![User select permission](/images/quick-start/user-select-permission.png)
-
-Now rerun the app. New todos are inserted, and only todos for the user are fetched and displayed. Your backend is successfully secured!

docs/content/docs/get-started/cli-workflow/index.mdx

@@ -1,33 +0,0 @@
----
-title: 'CLI from Zero to Production'
----
-
-In the previous tutorials, we tested various parts of Nhost, such as:
-
-- Database
-- GraphQL API
-- Permission
-- JavaScript SDK
-- Authentication
-
-All changes we did to our database and API happened directly in production of our Nhost app.
-
-It’s not ideal for making changes in production because you might break things, which will affect all users of your app.
-
-Instead, it’s recommended to make changes and test your app locally before deploying those changes to production.
-
-To do changes locally, we need to have a complete Nhost app running locally, which the Nhost CLI does.
-
-The Nhost CLI matches your production application in a local environment, this way you can make changes and test your code before deploying your changes to production.
-
-## Recommended workflow with Nhost
-
-1. Develop locally using the Nhost CLI.
-2. Push changes to GitHub.
-3. Nhost automatically applies changes to production.
-
-## What you’ll learn in this guide:
-
-- Use the Nhost CLI to create a local environment
-- Connect a GitHub repository with a Nhost app
-- Deploy local changes to production

docs/content/docs/get-started/cli-workflow/install-cli.mdx

@@ -1,37 +0,0 @@
----
-title: 'Install the CLI'
----
-
-Install the Nhost CLI using the following command:
-
-```sql
-sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
-```
-
-Initialize a new Nhost App locally:
-
-```sql
-nhost init -n "nhost-example-app" && cd nhost-example-app
-```
-
-And initialize the GitHub repository in the same folder:
-
-```bash
-echo "# nhost-example-app" >> README.md
-git init
-git add README.md
-git commit -m "first commit"
-git branch -M main
-git remote add origin https://github.com/[github-username]/nhost-example-app.git
-git push -u origin main
-```
-
-Now go back to the **Nhost Console** and click **Deployments**. You just made a new deployment to your Nhost app!
-
-![Deployments tab](/images/cli-workflow/deployments-tab.png)
-
-If you click on the deployment you can see that nothing was really deployed. That’s because we just made a change to the README file.
-
-![Deployments details](/images/cli-workflow/deployments-details.png)
-
-Let's do some local backend changes!

docs/content/docs/get-started/cli-workflow/local-changes.mdx

@@ -1,76 +0,0 @@
----
-title: 'Local changes'
----
-
-Start Nhost locally:
-
-```sql
-nhost dev
-```
-
->💡 Make sure you have [Docker](https://www.docker.com/get-started) installed on your computer. It’s required for Nhost to work.
-
-The `nhost dev` command will automatically start a complete Nhost environment locally on your computer using:
-
-- Postgres
-- Hasura
-- Authentication
-- Storage
-- Serverless Functions
-- Mailhog
-
-You use this local environment to do changes and testing before you deploy your changes to production.
-
-Running `nhost dev` also starts the Hasura Console.
-
-
->💡 It’s important that you use the Hasura Console that is started automatically when you do changes. This way, changes are automatically tracked for you.
-
-![Hasura Console](/images/cli-workflow/hasura-console.png)
-
-In the Hasura Console, create a new table `customers` with two columns:
-
-- id
-- name
-
-<Video src="/videos/cli-workflow/hasura-create-customers-table.mp4">
-</Video>
-
-When we created the `customers` table there was also a migration created automatically. The migration was created at under `nhost/migrations/default`.
-
-```bash
-$ ls -la nhost/migrations/default
-total 0
-drwxr-xr-x  3 eli  staff   96 Feb  7 16:19 .
-drwxr-xr-x  3 eli  staff   96 Feb  7 16:19 ..
-drwxr-xr-x  4 eli  staff  128 Feb  7 16:19 1644247179684_create_table_public_customers
-```
-
-This database migration has only been applied locally, meaning, you created the `customers` table locally but it does not (yet) exists in production.
-
-To apply the local change to production we need to commit the changes and push it to GitHub. Nhost will then automatically pick up the change in the repository and apply the changes.
-
-<aside>
-💡 You can commit and push files in another terminal while still having `nhost dev` running.
-
-</aside>
-
-```sql
-git add -A
-git commit -m "Initialized Nhost and added a customers table"
-git push
-```
-
-Head over to the **Deployments** tab in the **Nhost console** to see the deployment.
-
-![Deployments tab after changes](/images/cli-workflow/deployments-tab-with-changes.png)
-
-Once the deployment finishes the `customers` table is created in production.
-
-![Customers table in Hasura Console](/images/cli-workflow/hasura-customers-table.png)
-
-We’ve now completed the recommended workflow with Nhost:
-
-1. Develop locally using the Nhost CLI.
-2. Push changes to GitHub.
-3. Nhost deploys changes to production.

docs/content/docs/get-started/cli-workflow/metadata-and-serverless-functions.mdx

@@ -1,159 +0,0 @@
----
-title: 'Metadata and Serverless Functions'
----
-
-In the previous section, we only created a new table; `customers`. Using the CLI you can also do changes to other parts of your backend.
-
-There are three things the CLI and the GitHub integration track and applies to production:
-
-1. Database migrations
-2. Hasura Metadata
-3. Serverless Functions
-
-For this section, let’s do one change to the Hasura metadata and create one serverless function
-
-### Hasura Metadata
-
-We’ll add permissions to the `users` table, making sure users can only see their own data. For this, go to the `auth` schema and click on the `users` table. then click on **Permissions** and enter a new role **user** and create a new **select** permission for that role**.**
-
-Create the permission **with custom check**:
-
-```json
-{
-  "id": {
-    "_eq" : "X-Hasura-User-Id"
-  }
-}
-```
-
-Select the following columns:
-
-- id
-- created_at
-- display_name
-- avatar_url
-- email
-
-Then click **Save permissions**.
-
-<Video src="/videos/cli-workflow/hasura-user-permissions.mp4">
-</Video>
-
-Now, let’s do a `git status` again to confirm the permission changes we did was tracked locally in your git repository.
-
-![Git status](/images/cli-workflow/git-status.png)
-
-We can now commit this change:
-
-```bash
-git add -A
-git commit -m "added permission for uses"
-```
-
-Now let’s create a serverless function before we push all changes to GitHub so Nhost can deploy our changes.
-
-### Serverless Function
-
-A serverless function is a pieces of code written in JavaScript or TypeScript that take an HTTP request and returns a response.
-
-Here’s an example:
-
-```bash
-import { Request, Response } from 'express'
-
-export default (req: Request, res: Response) => {
-  res.status(200).send(`Hello ${req.query.name}!`)
-}
-```
-
-Serverless functions are placed in the `functions/` folder of your repository. Every file will become its own endpoint.
-
-Before we create our serverless function we’ll install `express`, which is a requirement for serverless functions to work.
-
-```bash
-npm install express
-# or with yarn
-yarn add express
-```
-
-We’ll use TypeScript so we’ll install two type definitions too:
-
-```bash
-npm install -d @types/node @types/express
-# or with yarn
-yarn add -D @types/node @types/express
-```
-
-Then we’ll create a file `functions/time.ts`
-
-In the file `time.ts` we’ll add the following code to create our serverless function:
-
-```bash
-import { Request, Response } from 'express';
-
-export default (req: Request, res: Response) => {
-  return res
-    .status(200)
-    .send(`Hello ${req.query.name}! It's now: ${new Date().toUTCString()}`);
-};
-```
-
-We can now test the function locally. Locally, the backend URL is `http://localhost:1337`. Functions are under `/v1/functions`. And every function’s path and filename becomes an API endpoint.
-
-This means our function `functions/time.ts` is at `http://localhost:1337/v1/functions/time`.
-
-Let’s use curl to test our new function:
-
-```bash
-curl http://localhost:1337/v1/functions/time
-Hello undefined! It's now: Sun, 06 Feb 2022 17:44:45 GMT
-```
-
-And with a query parameter with our name:
-
-```bash
-curl http://localhost:1337/v1/functions/time\?name\=Johan
-Hello Johan! It's now: Sun, 06 Feb 2022 17:44:48 GMT
-```
-
-Again, let’s use `git status` to see the changes we did to create our serverless function.
-
-Now let’s commit the changes and push them to GitHub.
-
-```bash
-git add -A
-git commit -m "added serverless function"
-git push
-```
-
-In the Nhost Console, click on the new deployment to see details.
-
-![Deployments details for function](/images/cli-workflow/details-for-function.png)
-
-After Nhost has finished deploying your changes we can test them in production. First let’s confirm that the user permissions are applied.
-
-![Hasura Console permissions table](/images/cli-workflow/hasura-permissions-table.png)
-
-Then, let’s confirm that the serverless function was deployed. Again, we’ll use curl:
-
-```bash
-curl https://your-backend-url.nhost.run/v1/functions/time\?name\=Johan
-```
-
-![Serverless Function test](/images/cli-workflow/function-test.png)
-
-## Conclusion
-
-In this tutorial we have installed the Nhost CLI and created a local Nhost environment to do local development and testing.
-
-In the local environment we’ve made changes to our database, to Hasura’s metadata and created a serverless function.
-
-We’ve connected a GitHub repository and pushed our changes to GitHub.
-
-We’ve seen Nhost automatically deploying our changes and we’ve verified that the changes were applied.
-
-In summary, we’ve set up a productive environment using the recommended Nhost workflow:
-
-1. Develop locally using the Nhost CLI.
-2. Push changes to GitHub.
-3. Nhost deploys changes to production.

docs/content/docs/get-started/cli-workflow/workflow-setup.mdx

@@ -1,26 +0,0 @@
----
-title: 'Workflow setup'
----
-
-What follows is a detailed tutorial on how you setup Nhost for this workflow
-
-### Create Nhost App
-
-Create a **new Nhost app** for this tutorial.
-
-> It’s important that you create a **new** Nhost app for this guide instead of reusing an old Nhost app because we want to start with a clean Nhost app.
-
-![Create new app](/images/cli-workflow/create-app.png)
-
-### Create new GitHub Repository
-
-Create a new GitHub repository for your new Nhost app. The repo can be either private or public.
-
-![Create new repo](/images/cli-workflow/create-repo.png)
-
-## Connect GitHub Repository to Nhost App
-
-In the Nhost Console, go to the dashboard of your Nhost app and click **Connect to GitHub**.
-
-<Video src="/videos/cli-workflow/connect-github-repo.mp4">
-</Video>

docs/content/docs/get-started/index.mdx

@@ -1,35 +0,0 @@
----
-title: 'Welcome to Nhost'
----
-
-Nhost is an open-source, real-time, server-less backend platform for building reliable apps that scale with your business.
-
----
-
-## Components
-
-Nhost uses an opinionated set of open-source components.
-
-#### Database
-
-Your application gets its own PostgreSQL database, the world's most advanced relational database.
-
-#### GraphQL API
-
-Highly performant and real-time GraphQL API with Hasura.
-
-#### Authentication and storage
-
-User management & file storage seamlessly integrated with Hasura permissions.
-
-#### Serverless functions
-
-JavaScript and TypeScript functions run your custom code in the backend.
-
----
-
-## Get started
-
-Follow our [Quick start](/get-started/quick-start) guide to build your first app.
-
-Check out [Nhost on GitHub](https://github.com/nhost/nhost). Give us a star, and feel free to open a discussion for any feature requests as well.

docs/content/docs/get-started/quick-start/index.mdx

@@ -1,35 +0,0 @@
----
-title: 'Create your app'
----
-
-Let's create a simple todo-app using Nhost. In a todo-app, a user should be able to create list items for their account (CRUD) and not have anyone else see them (permissions).
-
-To implement this todo-app with Nhost, we'll briefly cover these topics:
-
-- Creating a new app on Nhost
-- Defining a database schema
-- Inserting data
-- Setting permissions
-- Querying data via the GraphQL API
-
-By the end of this quick-start, you will better understand what Nhost is and what it does for you.
-
----
-
-## Log in to Nhost
-
-Go to [app.nhost.io](https://app.nhost.io) and sign up for a new account if you don't have one already.
-
----
-
-## Create app
-
-Press the **"New App"** button on the console's home page. Choose a name and pick the region closest to your users.
-
-You'll be all set with the Default Workspace and the Free plan for now.
-
-![New App](/images/quick-start/new-app.png)
-
-Creating a new app takes around 20 seconds or so. During this time, Nhost sets up your app's entire backend and infrastructure.
-
-Once the setup completes, you'll automatically see the app dashboard, and you're ready to define your app's database schema.

docs/content/docs/get-started/quick-start/javascript-client.mdx

@@ -1,96 +0,0 @@
----
-title: 'JavaScript client'
----
-
-In the previous section, you used the Hasura Console to fetch a list of todos. Now, you will write a small JavaScript client to interact and retrieve todos from your Nhost app.
-
-### Frontend frameworks
-
-Nhost is framework-agnostic and works with any frontend you might build. You can also connect to Nhost from your server-side if you wish.
-
-In this guide, we'll keep the example simple. We're not using a frontend framework. In a real-life scenario, you'd probably build a frontend client with a framework such as React, Vue, Svelte or React Native.
-
----
-
-## Setup
-
-> Make sure you have [Node.js](https://nodejs.org) and [npm](https://docs.npmjs.com/getting-started) installed.
-
-Create a new folder called `nhost-todos`, and initialize a new JavaScript app there:
-
-```sh
-npm init -y
-# or
-yarn init -y
-```
-
-> You might have to edit the `package.json` file and add/change the `type` object to `module` (`"type": "module"`).
-
-Install Nhost JavaScript SDK:
-
-```sh
-npm install @nhost/nhost-js
-# or
-yarn add @nhost/nhost-js
-```
-
----
-
-## Initialize Nhost
-
-In the new directory, create a file called `index.js`.
-
-Enter the following code into this file. It will initialize a new `NhostClient` that will interact with your backend:
-
-```js
-import { NhostClient } from '@nhost/nhost-js'
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run' // replace this with the backend URL of your app
-})
-
-console.log(nhost.graphql.getUrl())
-```
-
-Run the code in your terminal. You should see your app's GraphQL endpoint URL:
-
-```sh
-➜ node index.js
-
-https://[app-subdomain].nhost.run/v1/graphql
-```
-
-### Query todos
-
-If you now add the following GraphQL query to the client, let's see what happens when you run the updated version:
-
-```js
-import { NhostClient } from '@nhost/nhost-js'
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run'
-})(async () => {
-  // nhost.graphql.request returns a promise, so we use await here
-  const todos = await nhost.graphql.request(`
-    query {
-      todos {
-        id
-        created_at
-        name
-        is_completed
-      }
-    }
-  `)
-
-  // Print todos to console
-  console.log(JSON.stringify(todos.data, null, 2))
-})()
-```
-
-```sh
-➜ node index.js
-
-null
-```
-
-`null` is printed. Why is that? Let's find out.

docs/content/docs/get-started/quick-start/permissions.mdx

@@ -1,53 +0,0 @@
----
-title: 'Set permissions'
----
-
-In the previous section, you could fetch the todos because the **admin** role is enabled by default when using Hasura Console. When building your applications, you want to define permissions using **roles** that your users can assume when making requests.
-
-Hasura supports role-based access control. You create rules for each role, table, and operation (select, insert, update and delete) that can check dynamic session variables, like user ID.
-
-## Unauthenticated users
-
-Use the `public` role in permissions when you want some data to be accessed by anyone without being signed in. The `public` role is the default role in all unauthenticated requests.
-
-Generally speaking, the `public` role should not have insert, update or delete permissions defined.
-
-### Setting `public` permissions
-
-In Hasura Console, go to the **Data** tab, click on the **todos** table, then click **Permissions**. Add a new role called `public` and click on **select**. The permission options for the select operation show up below.
-
-Add the following permissions:
-
-![Public role](/images/quick-start/permissions-public-select.png)
-
-Rerun the program. Now you see all todos.
-
-```sh
-➜ node index.js
-
-{
-  "todos": [
-    {
-      "id": "558b9754-bb18-4abd-83d9-e9056934e812",
-      "created_at": "2021-12-01T17:05:09.311362+00:00",
-      "name": "write docs",
-      "is_completed": false
-    },
-    {
-      "id": "480369c8-6f57-4061-bfdf-9ead647e10d3",
-      "created_at": "2021-12-01T17:05:20.5693+00:00",
-      "name": "cook dinner",
-      "is_completed": true
-    }
-  ]
-}
-```
-
----
-
-There are two reasons why the request succeeded:
-
-1. Nhost sets the `public` role for every unauthenticated GraphQL request.
-2. You explicitly defined permissions for the `public` role.
-
-It is essential to understand that Hasura has an **allow nothing by default** policy to ensure that only roles and permissions you define explicitly have access to the GraphQL API.

docs/content/docs/get-started/quick-start/schema.mdx

@@ -1,93 +0,0 @@
----
-title: 'Define schema'
----
-
-To implement an app for managing a todo list, let's ensure we have database tables for storing todos and users.
-
----
-
-## Open Hasura Console
-
-Hasura generates real-time GraphQL APIs, but it also provides a web console for manipulating the schema and data of your database.
-
-Go to the **Data** tab on your app's dashboard and select **Open Hasura**. Remember to copy the admin secret.
-
-The Hasura Console of your app's dedicated Hasura instance will open in a new tab. You can use Hasura Console to manage your app's schema, data, permissions, and event triggers.
-
-![Data -> Open Hasura](/images/quick-start/data-tab.png)
-
----
-
-## Users table
-
-You should see all your database tables on the left-hand side of the screen. You should see multiple different **schemas** displayed as folders:
-
-- `public` schema for your app's custom tables
-- `auth` and `storage` schemas for Nhost's user management and file storage
-
-If you open the `auth` schema, you'll see that your app already has a `users` table, so you don't have to create one.
-
-![To store the users, we already have a users table from the auth schema](/images/quick-start/list-of-schemas.png)
-
----
-
-## Create todos table
-
-In Hasura Console, go to the **data** tab, then click **Create Table**. Name this table `todos`.
-
-### Add frequently used columns
-
-`id` and `created_at` columns are standard and can be added with two clicks. Click **Frequently used columns** and create them:
-
-- `id` (UUID)
-- `created_at` (timestamp)
-
-Using frequently used columns ensures the columns get the right name, type, and default value.
-
-![Frequently used columns in the Hasura console](/images/quick-start/frequently-used-columns.png)
-
-### Add custom columns
-
-Add two more columns manually:
-
-- `name` (text)
-- `is_completed` (boolean)
-
-Make sure to set the default value of `is_completed` to `false`.
-
-![Create a table in the Hasura console](/images/quick-start/create-table.png)
-
-This is all we need! A new table will be created when you click **Add Table**.
-
----
-
-## Insert data
-
-Go to the **Insert Row** tab to add some data to your database.
-
-![Inserting todos](/images/quick-start/insert-todos.gif)
-
----
-
-## Query data
-
-Now that we have data in our database, we can retrieve it via a GraphQL API. Go to the **API** tab in the main menu. You can use this view to make GraphQL requests that query or mutate data in your database.
-
-Paste the following GraphQL query into the form and press the "play" button:
-
-```graphql
-query {
-  todos {
-    id
-    created_at
-    name
-    is_completed
-  }
-}
-```
-
-You should see the todos you just inserted show up as output on the right-hand side.
-
-### Admin role
-
-All requests in the Hasura Console use the `admin` role by default. This role has access to all tables and permissions.

docs/content/docs/get-started/upgrade/index.mdx

@@ -1,92 +0,0 @@
----
-title: 'Upgrade from v1 to v2'
----
-
-Upgrading from Nhost v1 to v2 requires database schema and Hasura metadata changes.
-
----
-
-## Upgrade Steps
-
-### Create a new Nhost v2 app locally
-
-> Make sure you have the [Nhost CLI](/reference/cli) installed
-
-```sh
-nhost init my-nhost-v2-app
-cd my-nhost-v2-app
-```
-
-### Update config
-
-Update `config: 3` to `config: 2` in `nhost/config.yaml`. This will update Hasura's configuration version, and we need to downgrade the version when we export migrations and metadata.
-
-### Export current migrations and metadata from Nhost v1
-
-Inside the `nhost/` folder of your app, run:
-
-```sh
-hasura migrate create init --from-server --endpoint=[v1-endpoint] --admin-secret=[v1-admin-secret]
-
-hasura metadata export --endpoint=[v1-endpoint] --admin-secret=[v1-admin-secret]
-```
-
-### Update Migrations
-
-Make the following changes manually to your migrations.
-
-> The migration file is located at `nhost/migrations/[timestamp]/up.sql`.
-
-- Add `OR REPLACE` after `CREATE` for the `public.set_current_timestamp_updated_at` function
-- Delete all `auth.*` tables and functions (if any).
-- Delete `public.users` table and everything related to the table such as constraints, triggers, etc.
-- Update FK references from `public.users` to `auth.users` (if any).
-
-### Update Metadata
-
-Make the following changes manually to your metadata.
-
-> The metadata is located at `nhost/metadata/tables.yaml`.
-
-- Delete tracking all tables in the `auth` schema.
-- Delete tracking the `public.users` table.
-- Update all references to `users` from the `public` to `auth` schema.
-
-### Start nhost
-
-Start Nhost locally using the [CLI](/reference/cli). From the root of your app, run:
-
-```sh
-nhost -d
-```
-
-> Running Nhost applies your local database migrations and Hasura metadata.
-
-### Restart Auth and Storage containers
-
-Open Docker UI and restart Hasura Auth and Hasura Storage. Restarting those containers applies new metadata, effectively tracking everything in the `auth` and the `storage` schema.
-
-### Delete migrations and metadata
-
-Delete the local migrations and metadata.
-
-```
-rm -rf nhost/migrations nhost/metadata
-```
-
-### Update config (again)
-
-Update `config: 2` to `config: 3` in `nhost/config.yaml`.
-
-### Pull migrations and metadata from our local instance
-
-> You can not use port `1337` in these requests. You have to use the specific port Huasra uses. Go to the Hasura Console under API and look what port Hasura is using under GraphQL Endpoint.
-
-```
-hasura migrate create init --from-server --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
-hasura metadata export --from-server --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
-```
-
-### Done
-
-You now have a Nhost v2 project locally with correct migrations and metadata. Happy hacking!

docs/content/docs/platform/authentication/email-templates.mdx

@@ -1,92 +0,0 @@
----
-title: 'Email templates'
----
-
-The following emails can be sent as part of the authentication flow:
-
-- Sign up confirmation email (when using email + password)
-- Reset password email (when using email + password)
-- Passwordless login email (when using Magic Link)
-- Confirm email change (any sign-up method)
-
----
-
-## Enabling custom email templates
-
-If you have developed custom email templates, you must make them available over HTTP and then point Nhost to them. You can host the templates on your server, or use a public repository on GitHub.
-
-Go to **Users -> Login settings** and scroll down to **Custom email templates**, and set the URL to where your templates are located:
-
-![ ](/images/platform/email-templates.svg)
-
-You only need to define the base URL to point to your hosted templates. The UI will give you a hint about where Nhost will look for your actual template files.
-
----
-
-## File structure
-
-The email templates should be provided as body.html and subject.txt files in this predefined folder structure:
-
-```txt
-// At base URL (e.g. https://yourapp.com/email-templates/)
-en/
-  email-confirm-change/
-    body.html
-    subject.txt
-  email-verify/
-    body.html
-    subject.txt
-  password-reset/
-    body.html
-    subject.txt
-  signin-passwordless/
-    body.html
-    subject.txt
-
-// Other language versions
-fr/
-  /* ... */
-se/
-  /* ... */
-```
-
-You don’t have to provide all templates - only the one you wish to use and customize. For the templates you do provide, you must provide both body.html and subject.txt.
-
-[View example on GitHub](https://github.com/nhost/nhost/tree/main/examples/custom-email-templates)
-
----
-
-## Localisation
-
-If Nhost finds a template that matches the recipent user’s locale, the email will be sent in that language. Use two-letter language codes to set the locale.
-English will always be used as the default if another language version is not found.
-
----
-
-## Template variables
-
-Use variables like `${displayName}` to make your templates more dynamic:
-
-```html
-<!-- https://yourapp.com/email-templates/en/email-verify/body.html -->
-<h2>Confirm Email Change</h2>
-
-<p>Hi, ${displayName}! Please click this link to verify your email:</p>
-
-<p>
-  <a href="${displayName}">Verify new email</a>
-</p>
-```
-
-These variables can be used either in the template subject or body. The following variables are supported:
-
-| Variable    | Description                                                                                                                        |
-| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| link        | The full URL to the target of the transaction. This should be used in the main call to action. This is available in all templates. |
-| displayName | The display name of the user.                                                                                                      |
-| email       | The email of the user.                                                                                                             |
-| locale      | Locale of the user as a two-letter language code. E.g. "en".                                                                       |
-
----
-
-<!-- ## Developing emails templates locally -->

docs/content/docs/platform/authentication/index.mdx

@@ -1,78 +0,0 @@
----
-title: 'Overview'
----
-
-Nhost provides a ready-to-use authentication service, integrated with Nhost JavaScript SDK. This makes it easy to build login flows with multiple login methods.
-
----
-
-## Getting started
-
-Using [Nhost JavaScript SDK](/reference/sdk), sign up a new user:
-
-```js
-import { NhostClient } from '@nhost/nhost-js'
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run'
-})
-
-await nhost.auth.signUp({
-  email: 'joe@nhost.io',
-  password: 'secret-password'
-})
-```
-
----
-
-## How it works
-
-1. A user signs up and the user information is added to the `auth.users` table
-2. Nhost returns an access token (JWT token) with the user's information. The access token is cryptographically signed.
-3. The user sends a request to the GraphQL API together with the access token.
-4. The GraphQL API reviews the access token to ensure the user is authorized to send the request.
-
-Nhost's authentication service is integrated with your database. All users are saved in the app's database under the `auth` schema and can be accessed using GraphQL:
-
-```graphql
-query {
-  users {
-    id
-    displayName
-    avatarUrl
-    email
-  }
-}
-```
-
----
-
-## Tokens
-
-Nhost authentication uses two tokens: Access tokens and refresh tokens.
-
-[Nhost JavaScript SDK](/sdk/) automatically handles access and refresh tokens.
-
-### Access tokens
-
-An access token is used to authenticate and authorize a user when doing a GraphQL request.
-
-Access tokens are cryptographically signed and cannot be revoked. They are only valid for 15 minutes. Users can request a new valid access token with a refresh token.
-
-An access token includes a user's ID and roles. Here's an example:
-
-```json
-{
-  "https://hasura.io/jwt/claims": {
-    "x-hasura-user-id": "c8ee8353-b886-4530-9089-631ea7fd4c8a",
-    "x-hasura-default-role": "user",
-    "x-hasura-allowed-roles": ["user", "me"]
-  },
-  "iat": 1595146465,
-  "exp": 1595147365
-}
-```
-
-### Refresh tokens
-
-A refresh token is used to request a new access token. Refresh tokens are long-lived tokens stored in the database.

docs/content/docs/platform/authentication/sign-in-methods.mdx

@@ -1,85 +0,0 @@
----
-title: 'Sign-in methods'
----
-
-Nhost supports a variety of sign-in methods:
-
----
-
-## Email + password
-
-To sign in a user with email and password, the user must first sign up:
-
-```js
-await nhost.auth.signUp({
-  email: 'joe@nhost.io',
-  password: 'secret-password'
-})
-```
-
-If you've turned on email verification in your app's **login settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can log in.
-
-Once a user has been signed up (and optionally verified), you can sign them in:
-
-```js
-await nhost.auth.signIn({
-  email: 'joe@nhost.io',
-  password: 'secret-password'
-})
-```
-
----
-
-## Passwordless email (magic link)
-
-Users can sign in with passwordless email, also called magic link.
-
-When a user signs in with passwordless email, Nhost will create the user if they don't already exist and send an email to the user.
-
-When a user clicks the link in the email, they will be redirected to your app and automatically signed in.
-
-Example in JavaScript:
-
-```js
-await nhost.auth.signIn({
-  email: 'joe@nhost.io'
-})
-```
-
----
-
-## Passwordless SMS
-
-Users can sign in with passwordless SMS. The passwordless SMS sign in method has a flow:
-
-First, "sign in" the user with a phone number.
-
-```js
-await nnhost.auth.signIn({
-  phoneNumber: '+467610337135'
-})
-```
-
-This will create the user if the user does not already exist, and send a One Time Password (OTP) to the user's
-phone number.
-
-Use the OTP to finalize the sign-in:
-
-```js
-await nhost.auth.signIn({
-  phoneNumber: '+467610337135',
-  otp: 'otp-from-sms'
-})
-```
-
----
-
-## Anonymous
-
-A user can be created anonymously. This is useful for offering a limited version of your application to your users without having them sign in first.
-
-An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](/platform/database/permissions).
-
-### Deanonymize users
-
-Anonymous users can be converted to "normal" users by deanonymize the user.