[DOC] move docs into main repo (chroma-core#2096)

This PR does 3 things
1. launches our doc refactor to markdoc
2. starts the process of co-hosting our docs from this monorepo
3. cleanup of the existing `docs` folder

.github/workflows/chroma-cluster-test.yml

@@ -4,10 +4,14 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

.github/workflows/chroma-coordinator-test.yaml

@@ -4,10 +4,14 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

.github/workflows/chroma-integration-test.yml

@@ -5,10 +5,14 @@ on:
     branches:
       - main
       - team/hypothesis-tests
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

.github/workflows/chroma-python-client-integration-test.yml

@@ -4,10 +4,14 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

.github/workflows/chroma-test.yml

@@ -5,10 +5,14 @@ on:
     branches:
       - main
       - team/hypothesis-tests
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

.github/workflows/chroma-ts-client-integration-test.yml

@@ -4,10 +4,14 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

.github/workflows/chroma-worker-test.yml

@@ -4,10 +4,14 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - 'docs/**'
   pull_request:
     branches:
       - main
       - '**'
+    paths-ignore:
+      - 'docs/**'
   workflow_dispatch:
 
 jobs:

docs/docs.trychroma.com/.env.local

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_ALGOLIA_APP_ID='HM2SKIN8JF'
+NEXT_PUBLIC_ALGOLIA_API_KEY='2fd29cf0b4949375eb88d38be2a53b6b'
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME='trychroma'

docs/docs.trychroma.com/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.DS_Store
+.next/
+.vercel
+package-lock.json
+yarn.lock

docs/docs.trychroma.com/README.md

@@ -0,0 +1,61 @@
+# Chroma Docs
+
+### Design
+
+Chroma's docs are designed to be as extensible as possible with little-to-no magic.
+
+This repo is a [NextJS](https://nextjs.org/) + [Markdoc](https://markdoc.dev/) project.
+
+It also incldues [Shadcn](https://ui.shadcn.com/) with [Tailwind](https://tailwindcss.com/) for components and styling.
+
+# Features todo
+- [ ] add accordion for troubleshooting
+- [ ] keep tab state in query params
+- [ ] bring in codgen and make it easy
+- [ ] swag element in light/dark mode. eg the graphic on the index route
+- [ ] turn on algolia once indexed
+- [ ] turn back on "edit on github" button when public
+
+# Content todo
+- [ ] add more examples
+
+
+### Features
+- Breadcrumbs
+- Table of Contents
+- Sidenav with a "folder" structure
+- Search
+- Dark/Light Mode
+- Responsive
+- Global and Local state management with localstorage persistence
+- Tabs
+- Code styling with Prism
+- Toasts
+
+### Content structure
+
+Chroma's documentation must be:
+- well structured
+- easy to understand
+- easy to navigate
+- easy to search
+
+Too much of documentation, in AI in particular, is written in a way that is confusing and just downright poor techincal communication.
+
+Chroma's docs are designed to "ladder complexity" and guide users through a beginner-intermediate-advanced journey.
+
+Chroma's docs should heavily use examples and graphics to help developers understand learn quickly. No one reads walls of text.
+
+### Install and Running the docs
+
+```bash
+yarn # install
+yarn dev # run nextjs
+```
+
+### Continuous Deployment
+
+The docs are deployed to Vercel.
+
+
+<!-- TODO: codegen -->

docs/docs.trychroma.com/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "public/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib/utils"
+  }
+}

docs/docs.trychroma.com/components/CodeBlock.tsx

@@ -0,0 +1,179 @@
+
+import * as React from 'react';
+import CopyToClipboardButton from './CopyToClipboardButton';
+import { useTheme } from 'next-themes';
+import { useRouter } from 'next/router';
+
+import Prism from 'prismjs';
+require(`prismjs/components/prism-python.min.js`);
+require(`prismjs/components/prism-bash.min.js`);
+require(`prismjs/components/prism-javascript.min.js`);
+require(`prismjs/components/prism-json.min.js`);
+
+Prism.languages.python = {
+  ...Prism.languages.python,
+  'class-name': /\b[A-Z]\w+/,
+
+  'function': {
+    pattern: /(\b\w+\.)?\w+(?=\s*\()/,
+    // lookbehind: true,
+    inside: {
+      'class': /^[^.]*\./,
+      'punctuation': /\./,
+      'method': {
+        pattern: /\w+$/,
+        alias: 'function'
+      },
+
+    },
+  }
+
+};
+
+import { Icons } from './ui/icons';
+
+interface CodeBlockProps {
+  children: string;
+  'data-language': string;
+  filename?: string;
+  obfuscated?: boolean;
+  codetab?: boolean;
+}
+
+export function CodeBlock({children, 'data-language': language, filename, codetab}: CodeBlockProps) {
+  const ref = React.useRef(null);
+
+  if (!language) {
+    language = 'plaintext';
+  }
+
+  if (language === 'py') {
+    language = 'python';
+  }
+
+  const [highlightedCode, setHighlightedCode] = React.useState('');
+
+  React.useEffect(() => {
+    async function highlight() {
+
+      if (language === 'sh') {
+        language = 'bash'
+      }
+
+      Prism.hooks.add(`after-highlight`, function (env) {
+        // Split the highlighted HTML by line breaks into an array of lines
+        var lines = env.highlightedCode.split('\n').slice(0, -1); // slice to remove the last empty line
+
+        var wrappedLines = lines.map(function(line) {
+          // Regex to match the marker with flexible whitespace
+          var regex = /^(.*?)#\s*\[\!code\s*\$\]\s*(.*)$/;
+          var match = line.match(regex);
+          if (match) {
+            // If it does, remove the marker and wrap the line with div.line and add the class
+            // `match[1]` contains the line without the marker
+            return '<div class="line command-line-input">' + match[1].trim() + '</div>';
+          } else {
+            // Otherwise, just wrap the line with div.line
+            return '<div class="line">' + line + '</div>';
+          }
+        }).join('');
+
+        // Replace the highlightedCode with the wrapped lines
+        env.element.innerHTML = wrappedLines;
+      })
+
+      const env = {
+        element: {},
+        language,
+        grammar: Prism.languages[language],
+        highlightedCode: undefined,
+        code: children
+      };
+
+      Prism.hooks.run('before-highlight', env);
+      env.highlightedCode = Prism.highlight(env.code, env.grammar, env.language);
+      Prism.hooks.run('before-insert', env);
+      // @ts-ignore
+      env.element.innerHTML = env.highlightedCode;
+      Prism.hooks.run('after-highlight', env);
+      Prism.hooks.run('complete', env);
+
+      // const highlightedCode = Prism.highlight(children, Prism.languages[language], language);
+      // Prism.hooks.run('before-tokenize', highlightedCode);
+
+       // @ts-ignore
+      setHighlightedCode(env.element.innerHTML);
+    }
+
+    highlight();
+  }, [children]);
+
+  let copyIconColor = 'text-gray-500 hover:text-white'
+  let copyButtonTop = '4px'
+
+  let marginBottom = '1rem'
+  if (codetab == true) {
+    marginBottom = '0'
+    copyButtonTop = '-71px'
+  }
+
+  return (
+    <div className="rounded-md code reset text-sm" aria-live="polite"
+      style={{borderRadius: '0.5rem', position: 'relative', marginBottom: marginBottom}}
+    >
+      <CopyToClipboardButton className={`absolute ${copyIconColor} border-0 right-3 p-0.5`} textToCopy={children} customStyle={{top: copyButtonTop}}/>
+      <CustomHeader language={language} filename={filename} codetab={codetab}/>
+      <pre className='py-4 px-6 overflow-x-scroll'>
+        <code className={`language-${language}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}>
+        </code>
+      </pre>
+
+    </div>
+  );
+}
+
+// react component for CustomHeader
+
+export function CustomHeader({language, filename, codetab}) {
+  let customHeader = (<></>)
+
+  if ((language === 'bash') || (language === 'sh')) {
+    customHeader = (
+      <div className="code-context-banner flex items-center pl-4" style={{padding: '5px 5px 5px 15px'}}>
+        <Icons.commandLine className="h-4 w-4" />
+        <p className="text-sm mb-0 pl-2">Command Line</p>
+      </div>
+    )
+  }
+
+  if ((filename)) {
+    customHeader = (
+      <div className="code-context-banner flex items-center pl-4" style={{padding: '5px 5px 5px 15px'}}>
+        <Icons.codeFile className="h-4 w-4" />
+        <p className="text-sm mb-0 pl-2">{filename}</p>
+      </div>
+    )
+  }
+
+  // if filename is not provided, then fall back to the language
+  if ((!filename) && (language !== 'bash') && (language !== 'sh')) {
+
+    // if js, then change to javascript
+    if (language === 'js') {
+      language = 'javascript'
+    }
+
+    customHeader = (
+      <div className="code-context-banner flex items-center pl-4" style={{padding: '5px 5px 5px 15px'}}>
+        <Icons.codeFile className="h-4 w-4" />
+        <p className="text-sm mb-0 pl-2">{language}</p>
+      </div>
+    )
+  }
+
+  if (codetab == true) {
+    customHeader = (<></>)
+  }
+
+  return customHeader
+}