docs: adding documentation website with mkdocs (#10)

.github/workflows/docs-cd.yml

@@ -0,0 +1,58 @@
+name: Deploy Documentation
+
+on:
+  workflow_dispatch:
+
+  push:
+    branches:
+      - main
+    paths:
+      - "docs/**"
+      - "mkdocs.yml"
+
+permissions:
+  id-token: write
+  pages: write
+  contents: write
+
+jobs:
+  build-docs:
+    name: Build Documentation
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.x
+
+      - name: Install Dependencies
+        run: pip install -r requirements.txt
+
+      - name: Push Build Artifact
+        run: |
+          mkdocs gh-deploy --force --message "cd: deploy docs from {sha}"
+
+  publish-docs:
+    environment: Docs
+    name: Publish Documentation
+    runs-on: ubuntu-latest
+    needs: build-docs
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "."
+
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4

.gitignore

@@ -25,3 +25,4 @@ vite.config.ts.timestamp-*
 
 # Python
 __pycache__/
+.venv/

docs/CNAME

@@ -0,0 +1 @@
+docs.phantasmlabs.com

docs/index.md

@@ -0,0 +1,43 @@
+# Introducing Phantasm
+
+Thank you for considering using Phantasm. Phantasm is a simple human-in-the-loop
+(HITL) approval layer for AI agents. With Phantasm, you can build and deploy AI
+agents that can execute critical business tasks safely.
+
+Most of the information you need to get started can be found in the
+[Repository][repo]. This documentation, instead, will focus on explaining the
+details and concepts in the project. If you have any questions or need help,
+please feel free to reach out to us on [Discord][discord].
+
+[repo]: https://github.com/phantasmlabs/phantasm
+[discord]: https://discord.gg/dgevsYhh7P
+
+## Components
+
+Phantasm consists of 3 main components: Client, Server, and Dashboard.
+
+### Server
+
+The Server is the primary component that connects the Client and the Dashboard.
+The server responsible for receiving the approval requests from the client is
+called the _Receiver Server_ and the server responsible for coordinating the
+approval requests with the dashboard is called the _Coordinator Server_.
+
+The _Receiver Server_ uses gRPC while the _Coordinator Server_ uses WebSocket.
+Both servers are written in Rust and are controlled by Phantasm's CLI. If you're
+using Docker, this CLI is already the primary entry point for the image.
+
+### Client
+
+The Client is a language-specific library that you can use to connect your AI
+agent to the _Receiver Server_. The core concept of the client is to send an
+approval request to the server before your AI agent executes a certain function
+and waits for approval from the approvers.
+
+### Dashboard
+
+Phantasm comes with a web-based dashboard that you can use to connect to the
+_Coordinator Server_ and monitor the incoming approval requests from your AI
+agents. You or your team can then approve, modify, or reject these requests.
+
+![Demo Dashboard](https://phantasm-assets.s3.amazonaws.com/demos/0.1.0.gif)

docs/styles.css

@@ -0,0 +1,9 @@
+h1,
+h2,
+h3 {
+  font-weight: bold !important;
+}
+
+img {
+  border-radius: 16px;
+}

mkdocs.yml

@@ -0,0 +1,70 @@
+site_name: Phantasm
+repo_name: phantasmlabs/phantasm
+repo_url: https://github.com/phantasmlabs/phantasm
+
+theme:
+  name: material
+  logo: assets/favicon64.png
+  favicon: assets/favicon64.png
+
+  icon:
+    repo: fontawesome/brands/github
+
+  palette:
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: black
+      toggle:
+        name: Light Mode
+        icon: material/brightness-7
+
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: black
+      toggle:
+        name: Dark Mode
+        icon: material/brightness-4
+
+  font:
+    text: Cabin
+    code: Inconsolata
+
+  features:
+    - header.autohide
+    - navigation.tabs
+    - navigation.tabs.sticky
+    - navigation.expand
+    - navigation.footer
+    - content.code.copy
+
+copyright: Copyright © 2024 Phantasm Labs
+
+extra:
+  generator: false
+
+  # TODO: Add more social links
+  social:
+    - icon: fontawesome/brands/discord
+      link: https://discord.gg/dgevsYhh7P
+
+extra_css:
+  - styles.css
+
+nav:
+  - Documentation:
+      - Introduction: index.md
+
+markdown_extensions:
+  - admonition
+  - attr_list
+  - md_in_html
+  - pymdownx.details
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
+
+  - pymdownx.tabbed:
+      alternate_style: true
+
+  - toc:
+      permalink: "#"

requirements.txt

@@ -0,0 +1 @@
+mkdocs-material==9.5.43