Self hosted docs

components/layout/MarkdownContent.tsx

@@ -221,6 +221,12 @@ export function MarkdownContent({
       remarkPlugins={[remarkDirective, remarkDirectiveRehype]}
       skipHtml={skipHtml ? skipHtml : false}
       components={{
+        ul: ({ node, ...props }) => {
+          return <ul className="list-disc ml-6" {...props} />
+        },
+        ol: ({ node, ...props }) => {
+          return <ul className="list-decimal ml-6" {...props} />
+        },
         pre({ node, ...props }) {
           return <>{props.children}</>
         },

content/docs/reference/search/overview.md

@@ -3,7 +3,9 @@ title: Search Overview
 last_edited: '2023-06-08T04:00:00.000Z'
 ---
 
-TinaCMS provides built-in search functionality for content. This is useful for allowing editors to quickly finding content in a site. Tina Cloud's content search is powered by [Fergus McDowall](https://github.com/fergiemcdowall "Fergus McDowall")'s [search-index](https://www.npmjs.com/package/search-index "search-index") library.
+TinaCMS provides built-in search functionality for content. This is useful for allowing editors to quickly finding content in a site. Tina Cloud's content search is powered by [Fergus McDowall](https://github.com/fergiemcdowall 'Fergus McDowall')'s [search-index](https://www.npmjs.com/package/search-index 'search-index') library.
+
+> Note: Search is not currently supported in self-hosted Tina.
 
 ## Configuration
 
@@ -15,28 +17,28 @@ export default defineConfig({
   schema: {
     collections: [
       // Array of collections
-    ]
+    ],
   },
   search: {
     tina: {
       indexerToken: '<Your Search Token>',
-      stopwordLanguages: ['eng']
+      stopwordLanguages: ['eng'],
     },
     indexBatchSize: 100,
-    maxSearchIndexFieldLength: 100
+    maxSearchIndexFieldLength: 100,
   },
   //.. Other config
 })
 ```
 
 ### Definition
 
-| Property          | Description                                                                                  |
-| ----------------- |----------------------------------------------------------------------------------------------|
-| `search.tina.indexerToken` | Tina Cloud search token (*required*) |
-| `search.tina.stopwordLanguages` | Optional array of string stopword languages. Defaults to `['eng']`. See the [stopword](https://github.com/fergiemcdowall/stopword#language-code) GitHub repository for a full list of supported languages. |
-| `search.indexBatchSize`   | Used by the indexing process to determine the number of documents to index per request. Defaults to `100`. |
-| `search.maxSearchIndexFieldLength` | For variable length text fields, this controls how much of the text is considered when indexing. A higher value will increase the indexing time and size of the search index. Defaults to `100` characters.|
+| Property                           | Description                                                                                                                                                                                                 |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `search.tina.indexerToken`         | Tina Cloud search token (_required_)                                                                                                                                                                        |
+| `search.tina.stopwordLanguages`    | Optional array of string stopword languages. Defaults to `['eng']`. See the [stopword](https://github.com/fergiemcdowall/stopword#language-code) GitHub repository for a full list of supported languages.  |
+| `search.indexBatchSize`            | Used by the indexing process to determine the number of documents to index per request. Defaults to `100`.                                                                                                  |
+| `search.maxSearchIndexFieldLength` | For variable length text fields, this controls how much of the text is considered when indexing. A higher value will increase the indexing time and size of the search index. Defaults to `100` characters. |
 
 ## Building the search index
 

content/docs/reference/self-hosted/authentication-provider/bring-your-own.md

@@ -0,0 +1,125 @@
+---
+title: Custom Auth Provider
+id: '/docs/reference/self-hosted/authentication-provider/bring-your-own'
+prev: '/docs/reference/self-hosted/authentication-provider/tina-cloud'
+next: null
+---
+
+To self-host with a custom auth provider, you will need to do do two things.
+
+## 1. Create a custom Authentication Provider Class
+
+You can do so by extending the `AbstractAuthProvider` class and implementing the following functions:
+
+### Required Functions
+
+`authenticate`: This function is called when the user goes into `/admin` and they are not logged in (determined by `getUser`). This function should redirect the user to the login page or do whatever is necessary to authenticate the user.
+
+`getUser`: This function is called when the user goes into `/admin` and is used to determine if the user is logged in. If it returns a truthy value, the user is logged in. If it returns a falsy value the user is not logged in.
+
+`getToken`: This function is called when a request is made to the GraphQL endpoint. It should return an object with an `id_token` property. This will be passed as an `Authorization` header in the format `Bearer <id_token>`
+
+`logOut`: This function is called when the user clicks the logout button.
+
+### Optional Functions
+
+`getSessionProvider`: Return a React context provider that wraps the TinaCMS UI.
+
+```ts
+import { AbstractAuthProvider } from 'tinacms'
+
+export class CustomAuthProvider extends AbstractAuthProvider {
+  constructor() {
+    super()
+    // Do any setup here
+  }
+  async authenticate(props?: {}): Promise<any> {
+    // Do any authentication here
+  }
+  getToken() {
+    // Return the token here. The token will be passed as an Authorization header in the format `Bearer <token>`
+  }
+  async getUser() {
+    // Returns a truthy value, the user is logged in and if it returns a falsy value the user is not logged in.
+  }
+  logout() {
+    // Do any logout logic here
+  }
+  async authorize(context?: any): Promise<any> {
+    // Do any authorization logic here
+  }
+  getSessionProvider() {
+    // GetSessionProvider can be deleted if not needed
+    // OPTIONALLY Return a React context provider to that will wrap the admin
+  }
+}
+```
+
+Now you can add your custom auth provider to your config file:
+
+```javascript
+export default defineConfig({
+  authProvider: isLocal ? new LocalAuthProvider() : new CustomAuthProvider(),
+  //...
+})
+```
+
+## 2. Add Authentication to the Tina Backend
+
+`TinaNodeBackend` takes an `authentication` Prop.
+
+```ts
+export interface BackendAuthentication {
+  initialize?: () => Promise<void>
+  isAuthorized: (
+    req: IncomingMessage,
+    res: ServerResponse
+  ) => Promise<
+    | {
+        isAuthorized: true
+      }
+    | {
+        isAuthorized: false
+        errorMessage: string
+        errorCode: number
+      }
+  >
+  // You can use this if you need to attach any extra routes to the backend. Ex, a callback route for OAuth
+  extraRoutes?: {
+    [key: string]: {
+      // If secure is true the `isAuthorized` function will be called before the handler is called
+      secure?: boolean
+      handler: (req: IncomingMessage, res: ServerResponse) => Promise<void>
+    }
+  }
+}
+```
+
+This Interface must be passed to the `authentication` prop of `TinaNodeBackend`. You can get the token from the request by calling `req.headers.authorization`.This token should be validated in the `isAuthorized` function.
+
+```ts
+const CustomBackendAuth = () => {
+  return {
+    isAuthorized: async (req, res) => {
+      const token = req.headers.authorization
+      // Validate the token here
+      return {
+        isAuthorized: true,
+      }
+    },
+  }
+}
+```
+
+For an example of how to do this, see the [AuthJS Backend]()
+
+Once you have created an object that implements the `BackendAuthentication` interface, you can pass it to the `authentication` prop of `TinaNodeBackend`
+
+`/pages/api/tina/[...routes].{ts,js}`
+
+```ts
+const handler = TinaNodeBackend({
+  authentication: isLocal ? LocalBackendAuthentication() : CustomBackendAuth(),
+  databaseClient,
+})
+```

content/docs/reference/self-hosted/authentication-provider/clerk-auth.md

@@ -0,0 +1,97 @@
+---
+id: '/docs/reference/self-hosted/authentication-provider/next-auth'
+title: NextAuth Authentication Provider
+prev: '/docs/reference/self-hosted/authentication-provider/overview'
+next: '/docs/reference/self-hosted/authentication-provider/tina-cloud'
+---
+
+[Clerk](https://clerk.com) is a user management service which you can use with a self-hosted Tina setup.
+
+## Getting Started
+
+To get started you will need to install the following dependencies:
+
+```bash
+yarn add @clerk/clerk-js @clerk/backend tinacms-clerk
+```
+
+## Setup
+
+Visit [clerk.com](https://clerk.com/) to create an account and an "application". Once you've done that, navigate to the API Keys tab to find your credentials and store them in the .env file in your project.
+
+![Clerk API Keys screenshot](/img/clerk-api-keys-screenshot.png)
+
+Be sure to update `TINA_PUBLIC_ALLOWED_EMAIL` with the email address you'll use to sign in to Clerk.
+
+```bash
+CLERK_SECRET=sk_test_my-clerk-secret
+TINA_PUBLIC_CLERK_PUBLIC_KEY=pk_test_my-clerk-public-key
+TINA_PUBLIC_ALLOWED_EMAIL="[email protected]"
+```
+
+## Update the dev command
+
+When self-hosting, you may want to disable auth for local development.
+
+```json
+"scripts": {
+  "dev": "TINA_PUBLIC_IS_LOCAL=true tinacms dev -c \"next dev\"",
+  "dev:prod": "tinacms dev -c \"next dev\"",
+}
+```
+
+## Update your Tina Config
+
+Add the following to your `tina/config.{ts.js}` file. Be sure to replace "[email protected]" with the email you're signing in with:
+
+```ts
+import { ClerkAuthProvider } from 'tinacms-clerk/dist/frontend'
+
+//...
+
+const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'
+
+export default defineConfig({
+  //...
+  contentApiUrlOverride: '/api/tina/gql',
+  authProvider: isLocal ? new LocalAuthProvider() : new ClerkAuthProvider(),
+  //...
+})
+```
+
+Note that we're checking if the signed-in user's email exists in a hardcoded array. There are a few ways to do this in a more maintainable way:
+
+- Create an organization in Clerk, and check to see if the signed-in user is part of the org for this project
+- Create an ["allow-list"](https://clerk.com/docs/authentication/allowlist). Note that this is a paid feature.
+
+## Update the Tina Backend
+
+Add the following to your `pages/api/tina/[...routes].{ts,js}` file
+
+```ts
+import { TinaNodeBackend, LocalBackendAuthentication } from '@tinacms/datalayer'
+import { ClerkBackendAuthentication } from 'tinacms-clerk'
+
+import databaseClient from '../../../tina/__generated__/databaseClient'
+
+const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'
+
+const handler = TinaNodeBackend({
+  authentication: isLocal
+    ? LocalBackendAuthentication()
+    : ClerkBackendAuthentication({
+        /**
+         * For premium Clerk users, you can use restrictions
+         * https://clerk.com/docs/authentication/allowlist
+         */
+        allowList: [process.env.TINA_PUBLIC_ALLOWED_EMAIL],
+        secretKey: process.env.CLERK_SECRET,
+      }),
+  databaseClient,
+})
+
+export default (req, res) => {
+  // Modify the request here if you need to
+  return handler(req, res)
+}
+```