Add TypeScript SDK to Docs site (#888)

docs/proto-sidebars.ts

@@ -11,6 +11,7 @@ const protodocs = protosidebar.protodocs.map((item) => {
 const all = [
   { type: 'doc', label: 'Introduction', id: 'home' },
   { type: 'doc', label: 'Go', id: 'go' },
+  { type: 'doc', label: 'TypeScript', id: 'typescript' },
   ...protodocs,
 ];
 

docs/protos/typescript.mdx

@@ -0,0 +1,87 @@
+---
+title: Neosync for TypeScript
+id: typescript
+hide_title: true
+slug: /typescript
+---
+
+import { DocPageHeader } from '@site/src/CustomComponents/DocPageHeader.tsx';
+
+<DocPageHeader title="TypeScript SDK" />
+
+## Introduction
+
+The Neosync TS SDK is publicly available and can be added to any TS/JS-based project.
+
+Neosync's Dashboard App is the primary user of the TS SDK today, and can be used as a reference for examples of how to use the SDK.
+
+## Installation
+
+```sh
+npm install @neosync/sdk
+```
+
+## Usage
+
+For a prime example of how to us this SDK, view the [withNeosyncContext](https://github.com/nucleuscloud/neosync/blob/main/frontend/apps/web/api-only/neosync-context.ts#L23) method in the Neosync app's BFF layer.
+
+### Note on Transports
+
+Based on your usage, you'll have to install a different version of `connect` to provide the correct Transport based on your environment.
+
+- Node: [@connectrpc/connect-node](https://connectrpc.com/docs/node/using-clients)
+- Web: [@connectrpc/connect-web](https://connectrpc.com/docs/web/using-clients)
+
+Install whichever one makes sense for you
+
+```sh
+npm install @connectrpc/connect-node
+npm install @connectrpc/connect-web
+```
+
+Neosync API serves up `Connect`, which can listen using Connect, gRPC, or Web protocols.
+Each of the libraries above provides all three of those protocols, but it's recommended to use `createConnectTransport` for the most efficient setup.
+
+```ts
+import { getNeosyncClient } from '@neosync/sdk';
+import { createConnectTransport } from '@connectrpc/connect-node';
+
+const neosyncClient = getNeosyncClient({
+  getTransport(interceptors) {
+    return createConnectTransport({
+      baseUrl: '<url>',
+      httpVersion: '2',
+      interceptors: interceptors,
+    });
+  },
+});
+```
+
+## Authenticating
+
+To authenticate the TS Neosync Client, a function may be provided to the configuration that will be invoked prior to every request.
+This gives flexability in how the access token may be retrieved and supports either a Neosync API Key or a standard user JWT token.
+
+When the `getAccessToken` function is provided, the Neosync Client is configured with an auth interceptor that attaches the `Authorization` header to every outgoingn request with the access token returned from the function.
+This is why the `getTransport` method receives a list of interceptors, and why it's important to hook them up to pass them through to the relevant transport being used.
+
+```ts
+import { getNeosyncClient } from '@neosync/sdk';
+import { createConnectTransport } from '@connectrpc/connect-node';
+
+const neosyncClient = getNeosyncClient({
+  getAccessToken: () => process.env.NEOSYNC_API_KEY,
+  getTransport(interceptors) {
+    return createConnectTransport({
+      baseUrl: process.env.NEOSYNC_API_URL,
+      httpVersion: '2',
+      interceptors: interceptors,
+    });
+  },
+});
+```
+
+### Neosync App
+
+In the Neosync dashboard app, we pull the user access token off of the incoming request (auth is configured using `next-auth`.).
+This way we can ensure that all requests are using the user's access token and are passed through to Neosync API.

docs/src/CustomComponents/IconHandler.tsx

@@ -21,7 +21,7 @@ import { GrMysql } from 'react-icons/gr';
 import { IoBuildOutline } from 'react-icons/io5';
 import { MdPassword, MdStart } from 'react-icons/md';
 import { PiArrowsSplitLight, PiFlaskLight } from 'react-icons/pi';
-import { SiGo, SiKubernetes } from 'react-icons/si';
+import { SiGo, SiKubernetes, SiTypescript } from 'react-icons/si';
 import { TbSdk, TbVariable } from 'react-icons/tb';
 
 export function IconHandler(name: string): ReactElement {
@@ -93,6 +93,11 @@ export function IconHandler(name: string): ReactElement {
     case 'Go':
     case 'Golang':
       return <SiGo />;
+    case 'TypeScript':
+    case 'Typescript':
+    case 'ts':
+    case 'TS':
+      return <SiTypescript />;
     case 'Protos':
     case '/mgmt/v1alpha1':
       return <FaFolder />;

frontend/packages/sdk/README.md

@@ -13,14 +13,15 @@ npm install @neosync/sdk
 
 For a prime example of how to us this SDK, view the [withNeosyncContext](https://github.com/nucleuscloud/neosync/blob/main/frontend/apps/web/api-only/neosync-context.ts#L23) method in the Neosync app's BFF layer.
 
-
 ### Note on Transports
+
 Based on your usage, you'll have to install a different version of `connect` to provide the correct Transport based on your environment.
 
-* Node: [@connectrpc/connect-node](https://connectrpc.com/docs/node/using-clients)
-* Web: [@connectrpc/connect-web](https://connectrpc.com/docs/web/using-clients)
+- Node: [@connectrpc/connect-node](https://connectrpc.com/docs/node/using-clients)
+- Web: [@connectrpc/connect-web](https://connectrpc.com/docs/web/using-clients)
 
 Install whichever one makes sense for you
+
 ```sh
 npm install @connectrpc/connect-node
 npm install @connectrpc/connect-web
@@ -39,7 +40,36 @@ const neosyncClient = getNeosyncClient({
       baseUrl: '<url>',
       httpVersion: '2',
       interceptors: interceptors,
-    })
-  }
+    });
+  },
+});
+```
+
+## Authenticating
+
+To authenticate the TS Neosync Client, a function may be provided to the configuration that will be invoked prior to every request.
+This gives flexability in how the access token may be retrieved and supports either a Neosync API Key or a standard user JWT token.
+
+When the `getAccessToken` function is provided, the Neosync Client is configured with an auth interceptor that attaches the `Authorization` header to every outgoingn request with the access token returned from the function.
+This is why the `getTransport` method receives a list of interceptors, and why it's important to hook them up to pass them through to the relevant transport being used.
+
+```ts
+import { getNeosyncClient } from '@neosync/sdk';
+import { createConnectTransport } from '@connectrpc/connect-node';
+
+const neosyncClient = getNeosyncClient({
+  getAccessToken: () => process.env.NEOSYNC_API_KEY,
+  getTransport(interceptors) {
+    return createConnectTransport({
+      baseUrl: process.env.NEOSYNC_API_URL,
+      httpVersion: '2',
+      interceptors: interceptors,
+    });
+  },
 });
 ```
+
+### Neosync App
+
+In the Neosync dashboard app, we pull the user access token off of the incoming request (auth is configured using `next-auth`.).
+This way we can ensure that all requests are using the user's access token and are passed through to Neosync API.