From d68245faef59008d24cb591fe14fc963853257dc Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 1 Nov 2022 17:17:37 +0700
Subject: [PATCH] Update remaining files in guides

---
 apps/temp-docs/docs/guides/api.mdx | 47 +++++++++++++++++++++---------
 apps/temp-docs/docs/guides/cli.mdx | 18 ++++++++++++
 2 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/apps/temp-docs/docs/guides/api.mdx b/apps/temp-docs/docs/guides/api.mdx
index 0f0c67e93c6..9aeafc23aa0 100644
--- a/apps/temp-docs/docs/guides/api.mdx
+++ b/apps/temp-docs/docs/guides/api.mdx
@@ -1,17 +1,15 @@
 ---
 id: api
-title: APIs
+title: Serverless APIs
 description: Auto-generating and Realtime APIs.
 sidebar_label: Overview
 ---
 
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
-// import useBaseUrl from '@docusaurus/useBaseUrl'
+import useBaseUrl from '@docusaurus/useBaseUrl'
 
-## Overview
-
-Supabase generates three types of API directly from your database schema.
+Supabase auto-generates three types of API directly from your database schema.
 
 - REST - interact with your database through a restful interface.
 - Realtime - listen to database changes.
@@ -25,7 +23,7 @@ The APIs are:
 - **Fast.** <br />Our benchmarks for basic reads are more than 300% faster than Firebase. The API is a very thin layer on top of Postgres, which does most of the heavy lifting.
 - **Scalable.** <br />The API can serve thousands of simultaneous requests, and works well for Serverless workloads.
 
-### REST API {#rest-api-overview}
+## REST API {#rest-api-overview}
 
 Supabase provides a RESTful API using [PostgREST](https://postgrest.org/). This is a very thin API layer on top of Postgres.
 It provides everything you need from a CRUD API:
@@ -45,7 +43,7 @@ It provides everything you need from a CRUD API:
   ></iframe>
 </div>
 
-### GraphQL API {#graphql-api-overview}
+## GraphQL API {#graphql-api-overview}
 
 :::note
 
@@ -55,7 +53,7 @@ GraphQL is in Beta, and may have breaking changes. It is only available on self-
 
 GraphQL in Supabase works through [pg_graphql](https://supabase.com/blog/pg-graphql), an open source PostgreSQL extension for GraphQL.
 
-### Realtime API {#realtime-api-overview}
+## Realtime API {#realtime-api-overview}
 
 Supabase provides a Realtime API using [Realtime](https://github.com/supabase/realtime). You can use this to listen to database changes over websockets.
 Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
@@ -89,7 +87,12 @@ This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATC
 1. Click **Save**.
 
 <video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-create-table-sm.mp4" type="video/mp4" muted playsInline />
+  <source
+    src={useBaseUrl('/videos/api/api-create-table-sm.mp4')}
+    type="video/mp4"
+    muted
+    playsInline
+  />
 </video>
 
 </TabItem>
@@ -116,7 +119,12 @@ Every Supabase project has a unique API URL. Your API is secured behind an API g
 3. Find your API `URL`, `anon`, and `service_role` keys on this page.
 
 <video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
+  <source
+    src={useBaseUrl('/videos/api/api-url-and-key.mp4')}
+    type="video/mp4"
+    muted
+    playsInline
+  />
 </video>
 
 The REST API and the GraphQL API are both accessible through this URL:
@@ -145,7 +153,12 @@ Let's view the documentation for a `countries` table which we created in our dat
 3. Switch between the JavaScript and the cURL docs using the tabs.
 
 <video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-docs.mp4" type="video/mp4" muted playsInline />
+  <source
+    src={useBaseUrl('/videos/api/api-docs.mp4')}
+    type="video/mp4"
+    muted
+    playsInline
+  />
 </video>
 
 #### GraphQL
@@ -302,7 +315,12 @@ By default Realtime is disabled on your database. Let's turn on Realtime for the
 4. Control which tables broadcast changes by selecting **Source** and toggling each table.
 
 <video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-realtime.mp4" type="video/mp4" muted playsInline />
+  <source
+    src={useBaseUrl('/videos/api/api-realtime.mp4')}
+    type="video/mp4"
+    muted
+    playsInline
+  />
 </video>
 
 </TabItem>
@@ -328,7 +346,10 @@ const handleInserts = (payload) => {
 }
 
 // Listen to inserts
-const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()
+const { data: todos, error } = await supabase
+  .from('todos')
+  .on('INSERT', handleInserts)
+  .subscribe()
 ```
 
 Use [subscribe()](/docs/reference/javascript/subscribe) to listen to database changes.
diff --git a/apps/temp-docs/docs/guides/cli.mdx b/apps/temp-docs/docs/guides/cli.mdx
index ef486ee6854..82364b45e62 100644
--- a/apps/temp-docs/docs/guides/cli.mdx
+++ b/apps/temp-docs/docs/guides/cli.mdx
@@ -22,6 +22,16 @@ You can also use the CLI to manage your Supabase projects, handle database migra
     {label: 'Windows', value: 'windows'},
     {label: 'Linux', value: 'linux'},
   ]}>
+<TabItem value="npm">
+
+Install the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase):
+
+```sh
+npm install supabase --save-dev
+```
+
+</TabItem>
+
 <TabItem value="macos">
 
 Install the CLI with [Homebrew](https://brew.sh):
@@ -78,6 +88,14 @@ When a new [version](https://github.com/supabase/cli/releases) is released, you
     {label: 'Windows', value: 'windows'},
     {label: 'Linux', value: 'linux'},
   ]}>
+<TabItem value="npm">
+
+```sh
+npm update supabase --save-dev
+```
+
+</TabItem>
+
 <TabItem value="macos">
 
 ```sh