Merge pull request #956 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,57 +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'],
-      output: {
-        globals: {
-          react: 'react'
-        }
-      }
-
-      //   external: ['react', 'vue'],
-      //   output: {
-      //     globals: {
-      //       react: 'react',
-      //       vue: 'vue' // ? check
-      //     }
-      //   }
-    }
-  }
-})

.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

@@ -5,10 +5,10 @@ on:
     branches: [main]
     paths-ignore:
       - 'docs/**'
-      - 'templates/**'
       - 'examples/**'
       - 'assets/**'
       - '**.md'
+      - '!.changeset/**'
       - 'LICENSE'
 
 jobs:
@@ -16,29 +16,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,71 +1,115 @@
-# 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:
     branches: [main]
     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
-          key: ${{ runner.os }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ matrix.node-version }}
-
-      - 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 
-.eslintignore
-.eslintrc
-.prettierignore
-prettier.config.js
-vite.*.js
-jest.*.js
-esbuild.*.js
+# Config files that are not part of the repository root anymore. Should be removed in the future.
+/.eslintignore
+/.eslintrc*
+/vite.*.js
+/jest.*.js
+/*tsconfig*.json
+/esbuild.*.js
 
-!.config/**
+!config/**
 
 *.tsbuildinfo
 
@@ -50,4 +49,11 @@ esbuild.*.js
 .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,137 +1,473 @@
+![Nhost](https://i.imgur.com/ZenoUlM.png)
+
 <div align="center">
 
-<p align="center">
-  <img width="237" src="https://raw.githubusercontent.com/nhost/nhost/main/assets/logo.png"/>
-</p>
+# Nhost
 
-  <p>
-    <!-- <div style="padding: 5px"><img src="https://img.shields.io/github/stars/nhost/nhost?colorB=7289da" /></div> -->
-    <img src="https://img.shields.io/discord/552499021260914688?label=Discord&logo=Discord&colorB=7289da" />
-    <img src="https://img.shields.io/github/license/Naereen/StrapDown.js.svg" />
-    <img src="https://img.shields.io/docker/pulls/nhost/hasura-backend-plus" />
-    <img src="https://img.shields.io/twitter/follow/nhostio?style=social" />
-    <img src="https://badgen.net/badge/Open%20Source%3F/Yes%21/blue?icon=github" />
-    <img src="https://img.shields.io/github/contributors/nhost/nhost" />
-  </p>
+<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">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/nhost">Twitter</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://nhost.io/discord">Discord</a>
+<br />
+
+  <hr />
 </div>
 
-<p align="center">
-  <img width="550" src="https://reporoster.com/stars/nhost/nhost" />
-</p>
-<p align="center">
-  <img width="550" src="https://raw.githubusercontent.com/nhost/nhost/master/assets/follow-us-banner.png"/>
-</p>
+**Nhost is an open source Firebase alternative with GraphQL,** built with the following things in mind:
 
-**Nhost is a serverless backend for web and mobile apps.** Nhost consists of open
-source software pre-configured to make it fast to get started and easy to scale.
+- Open Source
+- GraphQL
+- SQL
+- Great Developer Experience
 
-This is what you get with Nhost:
+Nhost consists of open source software:
 
-- Database: [Postgres](https://www.postgresql.org/)
-- GraphQL API: [Hasura](https://hasura.io/)
+- 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://github.com/nhost/hasura-backend-plus/)
-- Functions: [JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript)/[TS](https://www.typescriptlang.org/) and [Go](https://golang.org/) runtimes
+- 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
 
-We also provide a UI to manage your database, users, and files. And we have
-JS/TS and Flutter SDKs to make it easy to work with.
+## Architecture of Nhost
 
-![Nhost](assets/hero-image.png)
+<div align="center">
+  <br />
+  <img src="assets/nhost-diagram.png"/>
+  <br />
+  <br />
+</div>
 
-<hr />
+Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentation.
 
 # Get Started
 
-![Nhost CLI](assets/cli-started.png)
+## Option 1: Nhost Hosted Platform
 
-## Managed at Nhost.io
+1. Sign in to [Nhost](https://app.nhost.io).
+2. Create Nhost app.
+3. Done.
 
-[Sign up](https://app.nhost.io) and create your first app [here](https://app.nhost.io/new).
+## Option 2: Self-hosting
 
-![Nhost](assets/get-started.png)
+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.
 
-Then connect to your new Nhost app using the [JavaScript/TypeScript SDK](https://docs.nhost.io/get-started/quick-start/javascript-client) or [Flutter SDK](https://github.com/nhost/nhost-dart).
+## Sign In and Make a Graphql Request
 
-```bash
-$ npm install nhost-js-sdk
-# or
-$ flutter i nhost-dart-sdk
-```
+Install the `@nhost/nhost-js` package and start build your app:
 
-In your project, initialize the SDK with the endpoint of your new Nhost App:
-
-```js
+```jsx
 import { NhostClient } from '@nhost/nhost-js'
 
 const nhost = new NhostClient({
-  baseURL: 'https://project-id.nhost.app'
+  subdomain: '<your-subdomain>',
+  region: '<your-region>'
 })
 
-export { nhost }
+await nhost.auth.signIn({ email: 'elon@musk.com', password: 'spaceX' })
+
+await nhost.graphql.request(`{
+  users {
+    id
+    displayName
+    email
+  }
+}`)
 ```
 
-Now you're ready to develop your app.
+## Frontend Agnostic
 
-# Develop Your App
+Nhost is frontend agnostic, which means Nhost works with all frontend frameworks.
 
-Now you're ready to use these fundamental building blocks to build a unique experience:
-
-- [Quick Start](https://docs.nhost.io/get-started/quick-start): Create an app with React
-- [Authentication](https://docs.nhost.io/platform/authentication) with email/password, magic link or social logins (Google, GitHub, Facebook, etc).
-- [Real-time database](https://docs.nhost.io/platform/database) with GraphQL and Postgres to keep your data in sync.
-- [File Storage](https://docs.nhost.io/platform/storage) with image transformation.
-- [Payment](https://github.com/nhost/nhost) powered by Stripe _(coming soon)_.
-
-[Full Documentation](https://docs.nhost.io)
-
-### Examples and tutorials
-
-- [Todo App](https://github.com/nhost/nhost/tree/main/templates/web/react-apollo) with React
-- [Full App Template](https://github.com/nhost/nhost/tree/main/templates/web/nextjs-apollo) with Next.js
-- [Native Mobile App](https://github.com/nhost/nhost-dart/tree/main/packages/nhost_flutter_graphql/example) with Dart and Flutter
-- [Nuxt](https://github.com/nhost/nhost/tree/main/examples/nuxt-apollo) with Apollo.
-- [CRM Example App](https://github.com/nhost/nhost/tree/main/examples/react-apollo-crm)
-- [Multi-tenant App](https://github.com/nhost/nhost/tree/main/examples/multi-tenant-one-to-many)
-
-# Backend development
-
-To further develop your backend, deep dive into these topics:
-
-- [Serverless Functions](https://docs.nhost.io/platform/serverless-functions)
-- [User Permissions](https://docs.nhost.io/platform/database/permissions)
-- [Database events and webhooks](https://docs.nhost.io/platform/serverless-functions/event-triggers)
-- [Local development with the Nhost CLI](https://docs.nhost.io/platform/nhost/local-development)
-
-[Full Documentation](https://docs.nhost.io)
+<div align="center">
+  <a href="https://docs.nhost.io/platform/quickstarts/nextjs"><img src="assets/nextjs.svg"/></a>
+  <a href="https://docs.nhost.io/reference/javascript"><img src="assets/nuxtjs.svg"/></a>
+  <a href="https://docs.nhost.io/platform/quickstarts/react"><img src="assets/react.svg"/></a>
+  <a href="https://docs.nhost.io/reference/javascript"><img src="assets/react-native.svg"/></a>
+  <a href="https://docs.nhost.io/reference/javascript"><img src="assets/svelte.svg"/></a>
+  <a href="https://docs.nhost.io/platform/quickstarts/vue"><img src="assets/vuejs.svg"/></a>
+</div>
 
 # Resources
 
 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 ❤️
 
 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).
+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 of how you can make the service 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 send an e-mail to [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/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/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/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/guicurcio">
+            <img src="https://avatars.githubusercontent.com/u/20285232?v=4" width="100;" alt="guicurcio"/>
+            <br />
+            <sub><b>Guido Curcio</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <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>
+    <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/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/mdp18">
+            <img src="https://avatars.githubusercontent.com/u/11698527?v=4" width="100;" alt="mdp18"/>
+            <br />
+            <sub><b>Max</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></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/Svarto">
+            <img src="https://avatars.githubusercontent.com/u/24279217?v=4" width="100;" alt="Svarto"/>
+            <br />
+            <sub><b>Svarto</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>
+    <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></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/dminkovsky">
+            <img src="https://avatars.githubusercontent.com/u/218725?v=4" width="100;" alt="dminkovsky"/>
+            <br />
+            <sub><b>Dmitry Minkovsky</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>
+    <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/eltociear">
+            <img src="https://avatars.githubusercontent.com/u/22633385?v=4" width="100;" alt="eltociear"/>
+            <br />
+            <sub><b>Ikko Ashimine</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <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/LucasBois1">
+            <img src="https://avatars.githubusercontent.com/u/44686060?v=4" width="100;" alt="LucasBois1"/>
+            <br />
+            <sub><b>Lucas Bois</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>
+    <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></tr>
+<tr>
+    <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 -->

assets/nextjs.svg

@@ -0,0 +1,15 @@
+<svg width="100" height="48" viewBox="0 0 100 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1670)">
+<g clip-path="url(#clip1_517_1670)">
+<path d="M28.7326 12.5189H43.7066V13.7118H30.1056V22.6886H42.8954V23.8815H30.1056V33.7372H43.8625V34.9301H28.7326V12.5189V12.5189ZM45.0478 12.5189H46.639L53.6892 22.3747L60.8953 12.5189L70.6968 0L54.594 23.4106L62.8919 34.9301H61.2383L53.6892 24.4464L46.109 34.9301H44.4866L52.8469 23.4106L45.0484 12.5189H45.0478ZM63.4848 13.7118V12.5189H80.5483V13.7118H72.6874V34.9296H71.3145V13.7118H63.4853H63.4848ZM10 12.5189H11.7159L35.3748 48L25.5975 34.9301L11.4348 14.2138L11.3724 34.9301H10V12.5189V12.5189ZM80.4107 33.3771C80.1295 33.3771 79.9193 33.1594 79.9193 32.8782C79.9193 32.5965 80.1295 32.3788 80.4101 32.3788C80.694 32.3788 80.9009 32.5965 80.9009 32.8782C80.9009 33.1594 80.694 33.3771 80.4101 33.3771H80.4107ZM81.7589 32.0638H82.4937C82.504 32.4627 82.7948 32.7304 83.2216 32.7304C83.699 32.7304 83.9694 32.4428 83.9694 31.9031V28.4863H84.7171V31.9063C84.7171 32.8782 84.1564 33.4378 83.2281 33.4378C82.3572 33.4378 81.7594 32.8949 81.7594 32.0638H81.7589ZM85.695 32.0208H86.4363C86.4997 32.4793 86.947 32.7707 87.5915 32.7707C88.192 32.7707 88.6328 32.4589 88.6328 32.0305C88.6328 31.6622 88.3527 31.4407 87.7146 31.2902L87.0937 31.1397C86.2229 30.9354 85.8251 30.5129 85.8251 29.8028C85.8251 28.9416 86.526 28.3685 87.5775 28.3685C88.5559 28.3685 89.2709 28.9416 89.3139 29.7555H88.586C88.5161 29.3104 88.1291 29.0319 87.5678 29.0319C86.9765 29.0319 86.583 29.3168 86.583 29.7522C86.583 30.0974 86.8368 30.2952 87.4646 30.4425L87.9952 30.5731C88.9833 30.8043 89.3907 31.2064 89.3907 31.9332C89.3907 32.8578 88.6758 33.4378 87.5345 33.4378C86.4664 33.4378 85.7482 32.8847 85.695 32.0202V32.0208Z" fill="#758399"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_517_1670">
+<rect width="79.395" height="48" fill="white" transform="translate(10)"/>
+</clipPath>
+<clipPath id="clip1_517_1670">
+<rect width="79.3907" height="48" fill="white" transform="translate(10)"/>
+</clipPath>
+</defs>
+</svg>

assets/nuxtjs.svg

@@ -0,0 +1,19 @@
+<svg width="184" height="48" viewBox="0 0 184 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1667)">
+<g clip-path="url(#clip1_517_1667)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M75.1894 17.2054C75.4114 17.4369 75.5306 17.7482 75.5199 18.0688V34.6665C75.5292 35.0219 75.3962 35.3663 75.1505 35.6232C74.9048 35.8809 74.5614 36.0223 74.2055 36.0121C74.006 36.0124 73.8078 35.9809 73.6183 35.9188C73.4447 35.8653 73.2888 35.7658 73.1672 35.631L62.4144 21.631V34.8104C62.4242 35.132 62.3007 35.4434 62.0732 35.6709C61.8457 35.8985 61.5343 36.0219 61.2127 36.0121C60.8942 36.0243 60.5857 35.8998 60.3649 35.6699C60.1453 35.4387 60.0276 35.1291 60.0383 34.8104V18.1777C60.0302 17.8233 60.1713 17.4818 60.4272 17.2365C60.6666 16.9909 60.9981 16.8568 61.341 16.8671C61.5569 16.8661 61.7708 16.907 61.971 16.9877C62.1532 17.0582 62.313 17.1764 62.4338 17.3299L73.1399 31.361V18.0688C73.1301 17.7472 73.2536 17.4358 73.4811 17.2083C73.7086 16.9808 74.02 16.8573 74.3416 16.8671C74.6592 16.8554 74.9671 16.9782 75.1894 17.2054ZM97.2783 17.2054C97.5108 17.464 97.6336 17.8029 97.6205 18.1504V28.6504C97.6428 30.0076 97.3132 31.3474 96.6638 32.5393C96.0488 33.6639 95.135 34.5965 94.0233 35.2343C92.8713 35.8953 91.5635 36.2363 90.2355 36.2221C88.8955 36.2433 87.5739 35.9092 86.4049 35.2538C85.2881 34.6187 84.3699 33.6856 83.7527 32.5588C83.1034 31.3668 82.7738 30.027 82.796 28.6699V18.1699C82.7859 17.814 82.9272 17.4705 83.1849 17.2249C83.4473 16.9683 83.8019 16.8281 84.1688 16.836C84.5147 16.8362 84.8458 16.9765 85.0866 17.2249C85.3415 17.466 85.4827 17.8035 85.4755 18.1543V28.6543C85.4614 29.5508 85.6884 30.4345 86.1327 31.2132C86.9706 32.6903 88.5373 33.6036 90.2355 33.6049C91.088 33.6109 91.9273 33.3937 92.6699 32.9749C93.4191 32.5609 94.0425 31.9522 94.4744 31.2132C94.9258 30.4369 95.1571 29.5522 95.1433 28.6543V18.1543C95.1306 17.8096 95.2471 17.4726 95.4699 17.2093C95.6997 16.9522 96.0314 16.8098 96.376 16.8204C96.7182 16.8126 97.0472 16.9529 97.2783 17.2054V17.2054ZM118.329 34.0443C118.493 34.2701 118.579 34.5431 118.574 34.8221C118.588 35.1742 118.446 35.5146 118.185 35.7515C117.944 35.979 117.626 36.1057 117.294 36.1054C116.869 36.1216 116.465 35.9154 116.229 35.561L110.913 28.4638L105.717 35.5493C105.483 35.9096 105.081 36.1252 104.652 36.121C104.337 36.1279 104.035 36.004 103.815 35.7788C103.598 35.5785 103.474 35.2966 103.473 35.001C103.479 34.6717 103.596 34.354 103.804 34.0988L109.412 26.4649L103.777 18.8893C103.601 18.668 103.503 18.3943 103.5 18.1115C103.493 17.7608 103.635 17.4232 103.889 17.1821C104.13 16.9337 104.461 16.7934 104.807 16.7932C105.011 16.7943 105.212 16.8422 105.394 16.9332C105.587 17.0246 105.752 17.1655 105.873 17.3415L111.127 24.3999L116.33 17.4115C116.56 17.056 116.946 16.8319 117.368 16.8088C117.698 16.8105 118.012 16.9518 118.232 17.1977C118.471 17.4111 118.611 17.7135 118.62 18.0338C118.611 18.3147 118.516 18.5862 118.348 18.8115L112.639 26.4104L118.329 34.0443ZM138.065 17.2054C138.322 17.44 138.464 17.7752 138.454 18.1232C138.463 18.4665 138.321 18.7966 138.065 19.0254C137.802 19.2482 137.465 19.3647 137.12 19.3521H132.251V34.7015C132.258 35.0522 132.117 35.3896 131.862 35.631C131.293 36.1391 130.433 36.1391 129.863 35.631C129.61 35.3887 129.469 35.052 129.474 34.7015V19.3521H124.617C124.272 19.3652 123.934 19.244 123.676 19.0138C123.426 18.7757 123.291 18.4409 123.307 18.096C123.296 17.7598 123.43 17.4351 123.676 17.2054C123.934 16.9752 124.272 16.854 124.617 16.8671H137.12C137.467 16.8546 137.805 16.9757 138.065 17.2054V17.2054Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.054 35.5223C143.168 35.0208 142.432 34.2935 141.919 33.4145C141.767 33.1971 141.68 32.9407 141.67 32.6756C141.67 32.3326 141.82 32.0069 142.082 31.785C142.305 31.5521 142.608 31.413 142.93 31.3962C143.418 31.4418 143.866 31.69 144.163 32.0806C144.771 33.0808 145.862 33.6845 147.033 33.6673C147.983 33.6894 148.901 33.3244 149.576 32.6562C150.258 32.01 150.636 31.1065 150.618 30.1673V18.1778C150.614 17.8236 150.763 17.4849 151.027 17.2484C151.282 16.9974 151.626 16.8576 151.983 16.8595C152.345 16.8418 152.697 16.9757 152.955 17.2289C153.203 17.4786 153.336 17.8189 153.325 18.17V30.1867C153.335 31.2638 153.051 32.3233 152.504 33.2512C151.962 34.1758 151.184 34.9396 150.249 35.4639C149.269 36.0189 148.159 36.3034 147.033 36.2884C145.99 36.2994 144.962 36.0352 144.054 35.5223ZM162.86 35.7245C161.777 35.313 160.782 34.6964 159.932 33.9084C159.582 33.6394 159.371 33.2263 159.36 32.7845C159.365 32.4485 159.505 32.1285 159.749 31.8978C159.982 31.6472 160.31 31.506 160.652 31.5089C160.94 31.505 161.218 31.6122 161.429 31.8084C162.086 32.4355 162.85 32.94 163.685 33.2978C164.525 33.6317 165.422 33.7956 166.325 33.78C167.354 33.8126 168.369 33.5348 169.238 32.9828C169.961 32.5766 170.414 31.817 170.428 30.9878C170.442 30.097 169.991 29.2632 169.238 28.7867C168.146 28.1453 166.947 27.7053 165.699 27.4878C163.817 27.0989 162.374 26.4728 161.359 25.5978C160.344 24.7228 159.843 23.5095 159.843 21.9617C159.821 20.9452 160.121 19.9478 160.698 19.1112C161.286 18.2806 162.094 17.6313 163.032 17.2367C164.104 16.7843 165.259 16.5605 166.423 16.5795C167.513 16.5726 168.597 16.7582 169.623 17.1278C170.528 17.4331 171.358 17.9276 172.058 18.5784C172.431 18.8538 172.662 19.2816 172.688 19.745C172.688 20.0746 172.554 20.3902 172.318 20.62C172.092 20.873 171.767 21.015 171.428 21.0089C171.198 21.0177 170.974 20.9384 170.802 20.7873C170.234 20.2551 169.563 19.846 168.83 19.5856C168.071 19.2795 167.261 19.1186 166.442 19.1112C165.417 19.0584 164.4 19.3218 163.529 19.8656C162.853 20.3137 162.447 21.0708 162.447 21.882C162.447 22.6932 162.853 23.4503 163.529 23.8984C164.525 24.4793 165.613 24.8869 166.745 25.1039C167.948 25.3406 169.122 25.707 170.245 26.1967C171.094 26.5717 171.819 27.1783 172.338 27.9467C172.863 28.8301 173.119 29.8481 173.073 30.875C173.088 31.8845 172.777 32.872 172.186 33.6906C171.564 34.5347 170.728 35.1968 169.763 35.6078C168.703 36.0717 167.556 36.305 166.399 36.2923C165.195 36.3147 163.997 36.1224 162.86 35.7245V35.7245Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 35.7867C21.8099 35.7377 21.7853 35.687 21.7638 35.635C21.6146 35.2899 21.5687 34.909 21.6315 34.5383H12.8076L25.921 11.4617L30.226 19.0294L31.4743 16.8206L27.7215 10.2094C27.6165 10.0189 26.9827 9 25.8899 9C25.396 9 24.6882 9.21389 24.1127 10.225L10.8282 33.5817C10.7154 33.7839 10.1671 34.8456 10.7115 35.7867C10.9604 36.2144 11.4893 36.7239 12.656 36.7239H23.7821C22.6232 36.7239 22.0865 36.2222 21.8377 35.7867V35.7867Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.4188 33.5818L36.5027 14.3512C36.3899 14.149 35.7599 13.1262 34.6633 13.1262C34.1694 13.1262 33.4616 13.3362 32.886 14.3473L31.4744 16.8207L32.7305 19.0296L34.6749 15.5879L45.4744 34.5384H41.3677C41.4202 34.8517 41.3908 35.1733 41.2821 35.4718C41.2593 35.5377 41.2306 35.6014 41.1966 35.6623L41.1616 35.7323C40.6094 36.6734 39.4155 36.724 39.1821 36.724H45.6066C45.8438 36.724 47.0338 36.6734 47.586 35.7323C47.831 35.3045 48.006 34.5851 47.4188 33.5818Z" fill="#758399"/>
+<path d="M41.1616 35.7322L41.1966 35.6622C41.2307 35.6013 41.2593 35.5376 41.2822 35.4717C41.3908 35.1732 41.4203 34.8516 41.3677 34.5383C41.3072 34.2005 41.186 33.8763 41.0099 33.5817L32.7383 19.0294L31.4744 16.8206L30.2183 19.0294L21.9505 33.5817C21.79 33.8798 21.6821 34.2035 21.6316 34.5383C21.5651 34.9079 21.6069 35.2888 21.7522 35.635C21.7737 35.687 21.7983 35.7377 21.8261 35.7867C22.0749 36.2144 22.6038 36.7239 23.7705 36.7239H39.1705C39.4155 36.7239 40.6094 36.6733 41.1616 35.7322V35.7322ZM31.4744 21.2383L39.0344 34.5383H23.9183L31.4744 21.2383Z" fill="#758399"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_517_1667">
+<rect width="163" height="28" fill="white" transform="translate(10.4744 9)"/>
+</clipPath>
+<clipPath id="clip1_517_1667">
+<rect width="163" height="28" fill="white" transform="translate(10.4744 9)"/>
+</clipPath>
+</defs>
+</svg>

assets/react.svg

@@ -0,0 +1,16 @@
+<svg width="139" height="48" viewBox="0 0 139 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1669)">
+<g clip-path="url(#clip1_517_1669)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.396 23.0032C42.396 20.9203 39.7876 18.9464 35.7885 17.7224C36.7114 13.6464 36.3012 10.4035 34.494 9.3653C34.0791 9.12275 33.5942 9.00734 33.0648 9.00641V9C31.3024 9 28.9952 10.2561 26.6624 12.4351C24.3296 10.2689 22.0224 9.02564 20.26 9.02564V9.03204C19.7217 9.03204 19.2346 9.1474 18.8116 9.39094C17.0108 10.4292 16.607 13.6656 17.5363 17.7288C13.55 18.9593 10.9545 20.9268 10.9545 23.0032C10.9545 25.0861 13.5628 27.06 17.5619 28.284C16.6391 32.36 17.0492 35.6029 18.8565 36.6411C19.2731 36.8846 19.7601 37 20.2985 37C22.0609 37 24.3681 35.7439 26.7009 33.5649C29.0337 35.7311 31.3408 36.9744 33.1032 36.9744C33.6416 36.9744 34.1287 36.859 34.5516 36.6155C36.3525 35.5772 36.7563 32.3408 35.827 28.2776C39.8004 27.0536 42.396 25.0797 42.396 23.0032ZM27.6814 13.4349C29.7673 11.4961 31.7255 10.4326 33.0584 10.4292V10.4356C33.3532 10.4356 33.5903 10.4932 33.789 10.6022C34.6606 11.1021 35.0387 13.0055 34.7439 15.4537C34.6734 16.0561 34.558 16.6905 34.417 17.3378C33.1609 17.0302 31.7894 16.7931 30.3475 16.6393C29.4823 15.4537 28.5851 14.377 27.6814 13.4349ZM20.26 10.4548C21.5867 10.4548 23.5541 11.5122 25.6434 13.4413C24.7462 14.3834 23.849 15.4537 22.9966 16.6393C21.5482 16.7931 20.1767 17.0302 18.9206 17.3442C18.7732 16.7034 18.6642 16.0817 18.5873 15.4857C18.2861 13.0375 18.6578 11.1341 19.523 10.6278C19.7153 10.5125 19.9652 10.4612 20.26 10.4612V10.4548ZM34.0573 18.7286C33.8201 19.5553 33.5253 20.4077 33.1921 21.26C32.9293 20.7473 32.6537 20.2346 32.3525 19.7219C32.0577 19.2092 31.7437 18.7093 31.4297 18.2223C32.3397 18.3568 33.2177 18.5235 34.0573 18.7286ZM29.5702 28.0021C30.1021 27.2394 30.6148 26.4191 31.1147 25.5539C31.5954 24.7143 32.0376 23.8556 32.4413 22.9968C32.0376 22.138 31.5954 21.2856 31.1083 20.4461C30.6084 19.5873 30.0893 18.7734 29.5574 18.0107C28.6089 17.9338 27.6411 17.889 26.6734 17.889C25.6993 17.889 24.7315 17.9338 23.7766 18.0172C23.2447 18.7798 22.732 19.6001 22.2321 20.4653C21.7514 21.3049 21.3028 22.1636 20.9055 23.0224C21.3092 23.8812 21.7514 24.7336 22.2385 25.5731C22.7384 26.4319 23.2575 27.2458 23.7894 28.0085C24.7379 28.0854 25.7057 28.1302 26.6734 28.1302C27.6475 28.1302 28.6153 28.0854 29.5702 28.0021ZM33.1905 24.7208C33.5365 25.5795 33.8313 26.4383 34.0749 27.2715C33.2353 27.4765 32.3509 27.6496 31.4344 27.7842C31.7485 27.2907 32.0625 26.7844 32.3573 26.2653C32.6521 25.7526 32.9277 25.2335 33.1905 24.7208ZM24.9094 29.5081C25.499 30.258 26.095 30.9437 26.691 31.5589C27.2806 30.9437 27.8766 30.258 28.4534 29.5081C27.8702 29.5402 27.2742 29.553 26.6718 29.553C26.0758 29.553 25.4862 29.5338 24.9094 29.5081ZM21.9225 27.7842C21.0124 27.6496 20.1344 27.4829 19.2949 27.2779C19.532 26.4511 19.8268 25.5988 20.16 24.7464C20.4228 25.2591 20.6984 25.7718 20.9996 26.2845C21.3008 26.7972 21.6084 27.2971 21.9225 27.7842ZM28.4289 16.4983C27.8393 15.7485 27.2432 15.0627 26.6472 14.4475C26.0576 15.0627 25.4616 15.7485 24.8848 16.4983C25.468 16.4662 26.064 16.4534 26.6664 16.4534C27.2625 16.4534 27.8521 16.4726 28.4289 16.4983ZM21.9186 18.2223C21.6045 18.7157 21.2905 19.222 20.9957 19.7411C20.7009 20.2538 20.4253 20.7665 20.1626 21.2793C19.8165 20.4205 19.5217 19.5617 19.2781 18.7286C20.1177 18.5299 21.0021 18.3568 21.9186 18.2223ZM12.3819 23.0032C12.3819 24.0094 13.8495 25.2783 16.1182 26.2461C16.6758 26.4832 17.2782 26.7011 17.9127 26.8998C18.2716 25.65 18.7458 24.3491 19.3354 23.016C18.7394 21.6766 18.2587 20.3692 17.8934 19.1131C17.2718 19.3117 16.6694 19.5232 16.1182 19.7604C13.8495 20.7217 12.3819 21.997 12.3819 23.0032ZM19.552 35.4042C18.6804 34.9043 18.3023 33.0009 18.5971 30.5527C18.6676 29.9503 18.7829 29.3158 18.9239 28.6686C20.1801 28.9762 21.5515 29.2133 22.9935 29.3671C23.8587 30.5527 24.7559 31.6294 25.6596 32.5715C23.5703 34.5134 21.6092 35.5772 20.2762 35.5772C19.9878 35.5708 19.7443 35.5131 19.552 35.4042ZM33.8218 35.3786C34.687 34.8723 35.0587 32.9689 34.7575 30.5207C34.687 29.9247 34.5717 29.3031 34.4243 28.6558C33.1681 28.9698 31.7967 29.2069 30.3483 29.3607C29.4959 30.5464 28.5987 31.6166 27.7014 32.5587C29.7907 34.4878 31.7582 35.5452 33.0848 35.5452C33.3796 35.5452 33.6296 35.4939 33.8218 35.3786ZM37.2308 26.246C36.6797 26.4832 36.0773 26.6946 35.4556 26.8933C35.0903 25.6372 34.6096 24.3298 34.0136 22.9904C34.6032 21.6573 35.0775 20.3563 35.4364 19.1066C36.0709 19.3053 36.6733 19.5232 37.2372 19.7603C39.506 20.7281 40.9736 21.997 40.9736 23.0032C40.9672 24.0094 39.4996 25.2847 37.2308 26.246ZM29.5965 23.0032C29.5965 24.6207 28.2852 25.932 26.6677 25.932C25.0501 25.932 23.7388 24.6207 23.7388 23.0032C23.7388 21.3857 25.0501 20.0744 26.6677 20.0744C28.2852 20.0744 29.5965 21.3857 29.5965 23.0032Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.5752 23.1473V33.8012H54.8301H56.0852L56.1475 29.6199L56.21 25.4385L58.1811 25.3727L60.1522 25.307L60.7115 26.0601C61.0192 26.4743 62.2821 28.3856 63.5184 30.3072L65.7658 33.8012H67.2312C68.1335 33.8012 68.6969 33.7055 68.6969 33.5522C68.6969 33.4154 68.402 32.874 68.0416 32.3493C66.3892 29.9443 63.6201 25.7253 63.5163 25.4552C63.4398 25.2554 63.7422 25.0698 64.4252 24.898C68.7017 23.8211 70.1724 17.7903 66.9785 14.4281C65.3314 12.6941 64.4653 12.4934 58.6306 12.4934H53.5752V23.1473ZM122.911 14.2805C122.841 14.3942 122.81 15.2808 122.843 16.2511C122.878 17.2904 122.802 18.0978 122.659 18.217C122.525 18.3281 121.954 18.4518 121.389 18.4919L120.363 18.565V19.4815V20.3979L121.565 20.4671L122.768 20.5365L122.791 25.164C122.819 30.6813 122.9 31.8031 123.333 32.6405C123.989 33.9091 125.771 34.5174 127.482 34.0567C128.995 33.6493 129.226 33.3764 128.914 32.3692C128.658 31.5415 128.219 31.2617 127.923 31.7392C127.704 32.0945 126.279 32.0093 125.887 31.6173C125.344 31.0741 125.264 30.1452 125.336 25.2094L125.403 20.627L126.892 20.5125L128.382 20.3979L128.452 19.4349L128.521 18.472L126.962 18.4039L125.403 18.3359L125.289 16.2738L125.174 14.2118L124.107 14.1428C123.519 14.1048 122.981 14.1669 122.911 14.2805ZM63.734 15.3454C65.393 16.151 66.3125 18.3689 65.7252 20.148C64.9685 22.441 63.4964 23.077 59.1654 22.9826L56.21 22.9182L56.1468 19.1465C56.1122 17.0723 56.139 15.2307 56.2066 15.0542C56.405 14.5374 62.56 14.7754 63.734 15.3454ZM75.8813 18.4692C71.2605 20.2462 69.5176 26.5298 72.4374 30.8853C74.1592 33.4537 77.1536 34.6292 80.4929 34.0478C82.9674 33.6168 85.1717 32.314 84.743 31.5357C84.0552 30.2873 83.9698 30.2579 82.9635 30.924C81.8708 31.6468 80.1811 32.1974 79.0545 32.1974C76.3865 32.1974 74.472 30.5226 73.6201 27.4432L73.4774 26.9277H79.6656C83.6376 26.9277 85.9053 26.8439 85.9984 26.6933C86.2575 26.2743 85.6531 23.1773 85.0828 22.0017C84.3428 20.4758 82.8324 19.0464 81.3471 18.4658C79.7689 17.8488 77.4906 17.8504 75.8813 18.4692ZM93.0519 18.4188C91.9414 18.8026 90.139 19.8806 89.864 20.3257C89.752 20.5068 90.6141 22.1163 90.8233 22.1163C90.8749 22.1163 91.3739 21.7676 91.932 21.3416C94.2658 19.5603 97.7452 19.7511 98.9494 21.7266C99.2841 22.2753 99.3969 22.8779 99.3976 24.1211C99.3985 25.8094 99.2452 26.0837 98.6818 25.4011C98.1853 24.7997 96.5845 24.1884 95.0991 24.0333C90.5227 23.5549 87.4588 27.7892 89.6127 31.615C91.1278 34.3069 95.4375 35.0664 98.1892 33.1269C98.7356 32.7418 99.2243 32.4265 99.2754 32.4265C99.3263 32.4265 99.4008 32.7102 99.4406 33.0566C99.5089 33.6502 99.5792 33.6867 100.659 33.6867H101.804V27.6151C101.804 21.8159 101.782 21.5016 101.305 20.611C100.747 19.569 99.467 18.6181 98.1175 18.2433C96.7776 17.8715 94.3978 17.9537 93.0519 18.4188ZM110.478 18.4692C105.384 20.4282 103.965 28.0449 107.956 32.0047C109.751 33.7859 112.495 34.5825 114.998 34.0494C116.28 33.7763 118.565 32.4428 118.799 31.8306C118.924 31.5055 117.858 30.1354 117.48 30.1354C117.391 30.1354 116.994 30.4378 116.598 30.8076C115.626 31.7158 114.498 32.0508 112.901 31.906C110.084 31.6505 108.257 29.3891 108.259 26.16C108.261 22.4751 110.224 20.3001 113.558 20.2884C115.165 20.2829 116.059 20.6387 116.798 21.5786L117.283 22.1956L117.889 21.7435C119.025 20.8956 119.069 20.5975 118.184 19.7468C116.399 18.0309 113.058 17.4769 110.478 18.4692ZM80.5578 20.4089C81.0247 20.6039 81.6536 20.9904 81.9556 21.2681C82.607 21.8668 83.5839 23.8498 83.5871 24.5793L83.5894 25.0948H78.677C75.9095 25.0948 73.7072 25.0022 73.6334 24.8826C73.5612 24.7658 73.7095 24.116 73.9629 23.4388C74.4394 22.1649 75.4095 21.0603 76.6014 20.4339C77.4874 19.9683 79.4734 19.9557 80.5578 20.4089ZM97.5422 26.2493C99.0814 26.9479 99.3985 27.4398 99.3985 29.1305C99.3985 30.3324 99.3116 30.6577 98.883 31.0624C97.7374 32.1436 96.0802 32.5993 94.2768 32.3289C92.3687 32.0428 91.1164 30.1299 91.6179 28.2672C91.8672 27.3415 92.9055 26.214 93.7271 25.9769C94.7889 25.6703 96.5421 25.7957 97.5422 26.2493Z" fill="#758399"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_517_1669">
+<rect width="118.589" height="28" fill="white" transform="translate(10.395 9)"/>
+</clipPath>
+<clipPath id="clip1_517_1669">
+<rect width="118.588" height="28" fill="white" transform="translate(10.9545 9)"/>
+</clipPath>
+</defs>
+</svg>

assets/svelte.svg

@@ -0,0 +1,11 @@
+<svg width="151" height="48" viewBox="0 0 151 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1666)">
+<path d="M53.0621 32.7532C51.6861 32.7881 50.3317 32.406 49.1767 31.6573C48.099 30.9456 47.299 29.8847 46.9113 28.6527L49.2702 27.7833C49.5977 28.5396 50.1328 29.1877 50.8136 29.6523C51.5054 30.116 52.3228 30.3562 53.1555 30.3405C53.9551 30.3826 54.7444 30.1442 55.387 29.6665C55.6664 29.4315 55.8871 29.1346 56.0317 28.7993C56.1762 28.464 56.2405 28.0997 56.2196 27.7352C56.223 27.3958 56.1443 27.0606 55.9902 26.7582C55.8565 26.4875 55.6817 26.2391 55.472 26.0219C55.2059 25.7798 54.904 25.5802 54.5771 25.43C54.175 25.229 53.8436 25.0761 53.5775 24.9713C53.3113 24.8665 52.9205 24.7249 52.4079 24.5493C51.7622 24.3228 51.2752 24.1472 50.958 24.0169C50.5224 23.8327 50.0996 23.6199 49.6921 23.3798C49.2521 23.147 48.8524 22.8448 48.5084 22.4849C48.212 22.1329 47.9731 21.7363 47.8005 21.3097C47.4669 20.4985 47.3968 19.6029 47.6001 18.7497C47.8033 17.8964 48.2697 17.1287 48.9332 16.555C49.8998 15.7036 51.211 15.2778 52.8667 15.2778C54.2524 15.2778 55.3908 15.5827 56.2819 16.1925C57.1494 16.7684 57.7862 17.6318 58.0801 18.6308L55.7636 19.4038C55.5275 18.8798 55.1308 18.4444 54.6309 18.1607C54.0311 17.8303 53.3526 17.6698 52.6684 17.6962C51.9956 17.6572 51.3289 17.8435 50.7739 18.2258C50.5473 18.4017 50.3667 18.6298 50.2473 18.8907C50.128 19.1515 50.0735 19.4374 50.0886 19.7238C50.0906 19.9433 50.1388 20.1598 50.2301 20.3593C50.3213 20.5589 50.4535 20.737 50.6182 20.8821C50.9394 21.197 51.3156 21.4504 51.7282 21.6297C52.1134 21.7911 52.7024 22.0063 53.4897 22.281C53.9711 22.4594 54.3392 22.5897 54.5629 22.6803C54.7867 22.7709 55.1293 22.9154 55.5881 23.1249C55.9493 23.2853 56.2968 23.4747 56.6274 23.6913C56.9232 23.9046 57.2069 24.1343 57.4769 24.3794C57.7674 24.6322 58.0159 24.9295 58.2132 25.2601C58.4012 25.6037 58.5467 25.9689 58.6465 26.3476C58.7701 26.7909 58.8311 27.2494 58.8277 27.7097C58.8277 29.288 58.2887 30.5227 57.2107 31.4138C56.1327 32.3049 54.7498 32.7513 53.0621 32.7532ZM68.5297 32.47L62.7385 15.5723H65.4401L69.2773 27.3472C69.489 27.981 69.6668 28.6257 69.8097 29.2785C69.9501 28.6254 70.1269 27.9806 70.3392 27.3472L74.1283 15.5723H76.8072L71.0387 32.4644L68.5297 32.47ZM81.9215 32.47V15.5723H92.3994V17.9369H84.4334V22.5699H89.5732V24.9345H84.4334V30.0884H92.929V32.4531L81.9215 32.47ZM99.3205 32.47V15.5723H101.832V30.0516H110.084V32.4644L99.3205 32.47ZM119.543 17.9908V32.4644H117.034V17.9851H112.256V15.5723H124.314V17.9851L119.543 17.9908ZM129.511 32.47V15.5723H139.989V17.9369H132.02V22.5699H137.16V24.9345H132.02V30.0884H140.516V32.4531L129.511 32.47Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4926 9.5745C26.6979 6.89557 32.5146 8.14442 35.4597 12.3582V12.3809C36.1586 13.3594 36.6551 14.4676 36.9201 15.6405C37.1852 16.8134 37.2134 18.0274 37.0031 19.2113C36.7976 20.3413 36.366 21.4181 35.7344 22.3773C36.657 24.1358 36.967 26.1518 36.6151 28.1062C36.404 29.2639 35.9547 30.3652 35.2956 31.3402C34.6365 32.3151 33.7821 33.1425 32.7864 33.7699L25.4009 38.4566C21.1956 41.1356 15.379 39.8867 12.4339 35.6729C11.7344 34.6947 11.2375 33.5865 10.9725 32.4135C10.7074 31.2405 10.6796 30.0264 10.8905 28.8425C11.0937 27.7123 11.5243 26.6352 12.1563 25.6765C11.2342 23.9168 10.9253 21.8998 11.2785 19.9448C11.4879 18.7864 11.9366 17.6845 12.5958 16.7093C13.255 15.7341 14.1103 14.9071 15.1071 14.2811L22.4926 9.5745ZM18.2541 35.9024C19.3803 36.3201 20.6076 36.3824 21.7703 36.0806C22.3011 35.9379 22.8071 35.7154 23.2712 35.4208L30.6595 30.7143C31.2597 30.3365 31.7745 29.8376 32.1709 29.2496C32.5674 28.6615 32.8367 27.9972 32.9618 27.299C33.0883 26.5872 33.0714 25.8573 32.9118 25.1522C32.7523 24.447 32.4535 23.7809 32.0329 23.1929C31.3489 22.206 30.3784 21.453 29.2525 21.0356C28.1266 20.6183 26.8997 20.5568 25.7377 20.8594C25.2061 20.9997 24.6996 21.2223 24.2368 21.5192L21.405 23.3146C21.2644 23.4024 21.1118 23.4692 20.9519 23.5129C20.6038 23.6006 20.2373 23.5804 19.9009 23.4549C19.5646 23.3295 19.2743 23.1048 19.0687 22.8106C18.9419 22.6327 18.8517 22.4316 18.8031 22.2187C18.7544 22.0058 18.7485 21.7854 18.7855 21.5702C18.8238 21.3602 18.9052 21.1604 19.0246 20.9835C19.144 20.8065 19.2989 20.6563 19.4793 20.5422L26.8676 15.8442C27.0076 15.7553 27.1604 15.6884 27.3207 15.646C27.6672 15.5547 28.0332 15.5712 28.3702 15.6931C28.7071 15.815 28.9989 16.0366 29.2067 16.3284C29.4333 16.6478 29.5396 17.037 29.5069 17.4272L29.4814 17.7104L29.7646 17.7925C30.8023 18.1067 31.7791 18.5951 32.6531 19.2367L33.0298 19.5199L33.1713 19.0952C33.2441 18.8696 33.3027 18.6398 33.3469 18.407C33.4738 17.6952 33.457 16.9652 33.2975 16.2601C33.1379 15.5549 32.8389 14.8887 32.4181 14.3008C31.7342 13.3137 30.7637 12.5604 29.6379 12.1426C28.5121 11.7248 27.2851 11.6626 26.1229 11.9645C25.596 12.1069 25.0937 12.3284 24.6333 12.6215L17.2365 17.3281C16.6362 17.7059 16.1215 18.2047 15.725 18.7928C15.3286 19.3809 15.0592 20.0452 14.9342 20.7433C14.8064 21.4545 14.822 22.1841 14.9801 22.8893C15.1381 23.5944 15.4354 24.2608 15.8545 24.8495C16.5385 25.8341 17.5077 26.5856 18.6317 27.0028C19.7557 27.42 20.9805 27.4828 22.1413 27.1829C22.671 27.0412 23.1762 26.8196 23.6393 26.526L26.4712 24.7277C26.6112 24.6388 26.764 24.572 26.9243 24.5295C27.2744 24.4386 27.6439 24.4573 27.9832 24.5828C28.3224 24.7084 28.615 24.9349 28.8216 25.2318C28.949 25.4087 29.0397 25.6094 29.0883 25.8219C29.1369 26.0345 29.1425 26.2546 29.1048 26.4693C29.0674 26.68 28.9864 26.8805 28.8669 27.0581C28.7474 27.2356 28.5921 27.3862 28.411 27.5001L21.0368 32.2067C20.8966 32.295 20.7438 32.3619 20.5837 32.4049C20.2336 32.4957 19.8641 32.4771 19.5248 32.3516C19.1856 32.226 18.893 31.9995 18.6864 31.7026C18.4596 31.3862 18.3505 31.0006 18.3777 30.6123L18.4032 30.3291L18.12 30.247C17.086 29.9354 16.1123 29.4509 15.24 28.8141L14.8605 28.5309L14.7218 28.9557C14.6467 29.1786 14.588 29.4067 14.5462 29.6382C14.4189 30.3498 14.4353 31.0796 14.5943 31.7848C14.7534 32.49 15.0519 33.1563 15.4722 33.7444C16.1569 34.7314 17.1278 35.4846 18.2541 35.9024Z" fill="#758399"/>
+</g>
+<defs>
+<clipPath id="clip0_517_1666">
+<rect width="130.265" height="32" fill="white" transform="translate(10.4744 8)"/>
+</clipPath>
+</defs>
+</svg>

assets/vuejs.svg

@@ -0,0 +1,16 @@
+<svg width="120" height="48" viewBox="0 0 120 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1668)">
+<path d="M54.426 14.1752C54.426 13.9261 54.5589 13.7186 54.8245 13.5525C55.1068 13.3865 55.3973 13.3035 55.6962 13.3035C56.1113 13.3035 56.3687 13.4612 56.4683 13.7767L60.8517 28.5706L65.2102 13.7767C65.3264 13.4612 65.5755 13.3035 65.9573 13.3035C66.2728 13.3035 66.5634 13.3948 66.829 13.5774C67.1113 13.7601 67.2524 13.9676 67.2524 14.2001C67.2524 14.2167 67.2441 14.2416 67.2275 14.2748C67.2275 14.308 67.2275 14.3412 67.2275 14.3744L62.1717 30.9367C61.989 31.4182 61.549 31.6589 60.8517 31.6589C60.1543 31.6589 59.7309 31.4182 59.5815 30.9367L54.4758 14.3744C54.4426 14.2748 54.426 14.2084 54.426 14.1752Z" fill="#758399"/>
+<path d="M68.1415 26.9269V20.4514C68.1415 20.2521 68.2411 20.0778 68.4403 19.9284C68.6562 19.7789 68.9052 19.7042 69.1875 19.7042C69.4532 19.7042 69.6856 19.7872 69.8849 19.9533C70.1007 20.1027 70.2086 20.2688 70.2086 20.4514V26.9269C70.2086 27.674 70.4909 28.3465 71.0554 28.9442C71.6199 29.542 72.2924 29.8408 73.0728 29.8408C73.8366 29.8408 74.5007 29.5503 75.0652 28.9691C75.6298 28.3714 75.912 27.6906 75.912 26.9269V20.4265C75.912 20.2438 76.0116 20.0778 76.2109 19.9284C76.4267 19.7789 76.6758 19.7042 76.9581 19.7042C77.2569 19.7042 77.4977 19.7789 77.6803 19.9284C77.8796 20.0612 77.9792 20.2272 77.9792 20.4265V26.9269C77.9792 28.2054 77.4894 29.3261 76.5098 30.2891C75.5467 31.2355 74.4011 31.7088 73.0728 31.7088C71.7279 31.7088 70.5656 31.2355 69.586 30.2891C68.623 29.3261 68.1415 28.2054 68.1415 26.9269Z" fill="#758399"/>
+<path d="M80.3672 26.8771V24.262C80.3672 22.9835 80.8487 21.8793 81.8117 20.9495C82.7914 20.0197 83.9619 19.5548 85.3234 19.5548C86.6185 19.5548 87.7393 19.9948 88.6857 20.8748C89.6321 21.7382 90.1053 22.8257 90.1053 24.1374C90.1053 24.6189 90.0472 25.0091 89.931 25.308C89.8148 25.5903 89.6321 25.7978 89.3831 25.9306C89.1506 26.0469 88.9265 26.1216 88.7106 26.1548C88.5114 26.188 88.2374 26.2046 87.8887 26.2046H82.4344V26.9518C82.4344 27.865 82.7582 28.5955 83.4057 29.1435C84.0699 29.6914 84.925 29.9654 85.971 29.9654C86.5189 29.9654 86.9921 29.8823 87.3906 29.7163C87.8057 29.5503 88.1378 29.3925 88.3868 29.2431C88.6359 29.0771 88.8351 28.994 88.9846 28.994C89.217 28.994 89.4163 29.102 89.5823 29.3178C89.7484 29.5171 89.8314 29.7246 89.8314 29.9405C89.8314 30.3223 89.4495 30.7125 88.6857 31.111C87.9385 31.5095 87.0087 31.7088 85.8963 31.7088C84.2691 31.7088 82.9408 31.2688 81.9114 30.3888C80.8819 29.4921 80.3672 28.3216 80.3672 26.8771ZM82.4344 24.8099H87.0419C87.4736 24.8099 87.7642 24.7601 87.9136 24.6605C88.0631 24.5442 88.1378 24.3284 88.1378 24.0129C88.1378 23.2657 87.8638 22.6099 87.3159 22.0454C86.768 21.4808 86.0955 21.1986 85.2985 21.1986C84.5182 21.1986 83.8457 21.4642 83.2812 21.9955C82.7167 22.5103 82.4344 23.1495 82.4344 23.9133V24.8099Z" fill="#758399"/>
+<path d="M91.8448 30.3638C91.8448 29.9986 91.9694 29.6914 92.2184 29.4423C92.4675 29.1767 92.7746 29.0438 93.1399 29.0438C93.4886 29.0438 93.7875 29.1767 94.0365 29.4423C94.2856 29.6914 94.4101 29.9986 94.4101 30.3638C94.4101 30.7125 94.2856 31.0197 94.0365 31.2854C93.7875 31.5344 93.4886 31.6589 93.1399 31.6589C92.7746 31.6589 92.4675 31.5344 92.2184 31.2854C91.9694 31.0197 91.8448 30.7125 91.8448 30.3638Z" fill="#758399"/>
+<path d="M94.3798 36.3163C94.3798 36.0506 94.4628 35.8265 94.6288 35.6438C94.7949 35.4778 94.9941 35.3948 95.2266 35.3948C95.8741 35.3948 96.2975 35.154 96.4967 34.6725C96.696 34.191 96.7956 33.4688 96.7956 32.5057V20.4265C96.7956 20.2106 96.8869 20.0363 97.0696 19.9035C97.2688 19.7706 97.5179 19.7042 97.8167 19.7042C98.1156 19.7042 98.3647 19.7706 98.5639 19.9035C98.7632 20.0363 98.8628 20.2106 98.8628 20.4265V32.5057C98.8628 33.9503 98.5805 35.0959 98.016 35.9427C97.4515 36.7895 96.5964 37.2129 95.4507 37.2129C94.7367 37.2129 94.3798 36.914 94.3798 36.3163ZM96.8952 16.1178C96.6462 15.8687 96.5217 15.5865 96.5217 15.271C96.5217 14.9555 96.6462 14.6816 96.8952 14.4491C97.1443 14.2167 97.4515 14.1004 97.8167 14.1004C98.1654 14.1004 98.4643 14.2167 98.7134 14.4491C98.9624 14.6816 99.0869 14.9555 99.0869 15.271C99.0869 15.5865 98.9624 15.8687 98.7134 16.1178C98.4643 16.3503 98.1654 16.4665 97.8167 16.4665C97.4681 16.4665 97.1609 16.3503 96.8952 16.1178Z" fill="#758399"/>
+<path d="M101.107 29.8159C101.107 29.6001 101.174 29.3925 101.307 29.1933C101.456 28.9774 101.63 28.8695 101.83 28.8695C101.963 28.8695 102.153 28.9691 102.403 29.1684C102.652 29.3676 103.009 29.5669 103.473 29.7661C103.938 29.9488 104.486 30.0401 105.117 30.0401C105.947 30.0401 106.545 29.8906 106.91 29.5918C107.292 29.2929 107.483 28.9193 107.483 28.471C107.483 27.9231 107.276 27.4914 106.861 27.1759C106.446 26.8438 105.939 26.5948 105.341 26.4288C104.744 26.2627 104.146 26.0801 103.548 25.8808C102.95 25.6816 102.444 25.3495 102.029 24.8846C101.614 24.4197 101.406 23.8054 101.406 23.0416C101.406 22.0952 101.738 21.2816 102.403 20.6008C103.083 19.9035 104.113 19.5548 105.491 19.5548C106.371 19.5548 107.176 19.6959 107.907 19.9782C108.637 20.2438 109.003 20.551 109.003 20.8997C109.003 21.0989 108.919 21.3231 108.753 21.5721C108.604 21.8212 108.413 21.9457 108.181 21.9457C108.114 21.9457 107.79 21.8295 107.209 21.5971C106.645 21.348 106.08 21.2235 105.516 21.2235C104.752 21.2235 104.179 21.4061 103.797 21.7714C103.432 22.1201 103.249 22.5186 103.249 22.9669C103.249 23.4318 103.457 23.7971 103.872 24.0627C104.287 24.3284 104.793 24.5359 105.391 24.6854C106.006 24.8348 106.612 25.0174 107.209 25.2333C107.807 25.4491 108.313 25.8227 108.729 26.354C109.144 26.8688 109.351 27.5412 109.351 28.3714C109.351 29.4008 108.986 30.2144 108.255 30.8121C107.525 31.4099 106.504 31.7088 105.192 31.7088C104.063 31.7088 103.1 31.5095 102.303 31.111C101.506 30.6959 101.107 30.2642 101.107 29.8159Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9646 17.3631L31.8862 10.5647H38.1532L27.9646 28.2274L17.7761 10.5647H24.0431L27.9646 17.3631ZM27.9646 30.5174L39.5276 10.5648H44.9455L27.9646 40.0027L10.9838 10.5648H16.4017L27.9646 30.5174Z" fill="#758399"/>
+</g>
+<defs>
+<clipPath id="clip0_517_1668">
+<rect width="98.4906" height="30" fill="white" transform="translate(10.9838 10)"/>
+</clipPath>
+</defs>
+</svg>

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,21 @@
-# nhost-documentation
+# @nhost/docs
+
+## 0.0.3
 
-## 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
+- eb46f7d8: Use port 1337 if no port is specified when using "localhost" as `subdomain`.
+
+## 0.0.2
+
+### Patch Changes
+
+- 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,44 +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": ["introduction", "nhost-app", "todos-table", "javascript-app"],
-    upgrade: ["upgrade-from-v1-to-v2"],
-  },
-  platform: {
-    data: ["database", "graphql", "permissions", "event-triggers"],
-    auth: ["overview", "sign-in-methods", "users"],
-    storage: ["overview"],
-    cli: ["overview"],
-    nhost: ["environment-variables", "serverless-functions"],
-  },
-  tutorials: {
-    "frontend-templates": ["react"],
-    templates: ["nhost"],
-  },
-  reference: {
-    cli: ["nhost-cli"],
-    sdk: ["javascript-sdk", "react-auth", "react-apollo"],
-  },
-};
+```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="mt-2 h-full w-full flex flex-col">
-      <div className="flex flex-row place-content-between mb-4">
-        <Text color="greyscaleDark" className="font-medium cursor-pointer" size="heading">
-          {frontmatter.title}
-        </Text>
-        <div className="hidden md:block self-center">
-          <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,73 +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)
-
-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,147 +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 border" />
-        {props.alt && (
-          <div className="block pt-4 mb-8 text-sm text-center text-secondary">
-            <Text color="greyscaleDark" size="tiny">
-              {props.alt}
-            </Text>
-          </div>
-        )}
-      </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} />
-  }
-}
-
-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.