From e40cc5373f88990f9f3b2262302a853a4af6f048 Mon Sep 17 00:00:00 2001
From: Nicholas Koben Kao <kobenkao@gmail.com>
Date: Mon, 29 Jan 2024 17:47:23 -0800
Subject: [PATCH] new docs section

---
 web/src/app/(docs)/docs/install/page.mdx |  6 +--
 web/src/app/(docs)/docs/videos/page.mdx  | 58 ++++++++++++++++++++++++
 web/src/components/docs/Navigation.tsx   |  4 ++
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 web/src/app/(docs)/docs/videos/page.mdx

diff --git a/web/src/app/(docs)/docs/install/page.mdx b/web/src/app/(docs)/docs/install/page.mdx
index c017715..9b8e410 100644
--- a/web/src/app/(docs)/docs/install/page.mdx
+++ b/web/src/app/(docs)/docs/install/page.mdx
@@ -1,12 +1,12 @@
 export const metadata = {
   title: 'Quickstart',
   description:
-    'This guide will get you all set up and ready to use the Protocol API. We’ll cover how to get started an API client and how to make your first API request.',
+    'This guide will get you all set up and ready to use Comfy Deploy. We’ll cover how to get started an API client and how to make your first API request.',
 }
 
-# Getting stated
+# Getting started
 
-Install Comfy Deploy's plugin on your local machine to get started with deploying workflow.
+Install Comfy Deploy's plugin on your local ComfyUI to get started with deploying workflow.
 
 <CodeGroup>
 
diff --git a/web/src/app/(docs)/docs/videos/page.mdx b/web/src/app/(docs)/docs/videos/page.mdx
new file mode 100644
index 0000000..030517a
--- /dev/null
+++ b/web/src/app/(docs)/docs/videos/page.mdx
@@ -0,0 +1,58 @@
+export const metadata = {
+  title: 'Comfy Deploy Video tutorials',
+  description:
+    'Get started with API integration to run any deploy ComfyUI workflow',
+}
+
+**This is a collection of video tutorials on questions that have come up in our [discord channel](https://discord.gg/Zrar7yP6MJ).**
+
+# Comfy Deploy workflow walkthrough (comprehensive)
+
+Local workflow, to production API
+- Set inputs with Comfy Deploy `External Text` nodes
+- Deploy the workflow 
+- Create a machine
+- Deploy an API endpoint for the workflow
+- Test the workflow in Comfy Deploy
+
+<video controls>
+  <source src="https://pub-1a2bca0642c24fcfb84ce8d8415958d3.r2.dev/comfydeploy_base-sd-setup.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+
+
+# Test with Docs
+Shows how you can use the <a href='/docs/endpoints'>endpoints docs</a> to test out the API!
+
+<video controls>
+  <source src="https://pub-1a2bca0642c24fcfb84ce8d8415958d3.r2.dev/comfydeploy_interactive_docs.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+## Intermediate IPAdaptor example run 
+Shows off a semi-complex workflow working on Comfy Deploy
+
+<video controls>
+  <source src="https://pub-1a2bca0642c24fcfb84ce8d8415958d3.r2.dev/ipadapters-test.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+## Animate diff on Comfy Deploy
+Shows off animate diff working on Comfy Deploy
+
+<video controls>
+  <source src="https://pub-1a2bca0642c24fcfb84ce8d8415958d3.r2.dev/comfydeploy-animediff.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+## Cloning workflows
+What does cloning a workflow look like
+
+<video controls>
+  <source src="https://pub-1a2bca0642c24fcfb84ce8d8415958d3.r2.dev/comfydeploy-clone-template.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+## [Install custom nodes from any github repo (Loom)](https://www.loom.com/share/c2025c5060e348839ade6a3a9d96441d?sid=6a57f779-0209-4341-a5fd-f99769cdb162)
+- This is only neccessary if the custom node is not in the ComfyUI Manager node list
\ No newline at end of file
diff --git a/web/src/components/docs/Navigation.tsx b/web/src/components/docs/Navigation.tsx
index ecef091..5aba0b4 100644
--- a/web/src/components/docs/Navigation.tsx
+++ b/web/src/components/docs/Navigation.tsx
@@ -242,6 +242,10 @@ export const navigation: Array<NavGroup> = [
     title: "API",
     links: [{ title: "Endpoints", href: "/docs/endpoints" }],
   },
+  {
+    title: "Video Tutorials",
+    links: [{ title: "Archive", href: "/docs/videos" }],
+  },
 ];
 
 export function Navigation(props: React.ComponentPropsWithoutRef<"nav">) {