feat(docs): add docs and restructure

2023-12-28 00:06:32 +08:00
parent afc67bc0b9
commit 498374195d
56 changed files with 3751 additions and 54 deletions
@@ -0,0 +1,49 @@
+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.',
+}
+
+# Getting stated
+
+Install Comfy Deploy's plugin on your local machine to get started with deploying workflow.
+
+<CodeGroup>
+
+```bash {{ title: 'git' }}
+cd custom_nodes
+git clone https://github.com/BennyKok/comfyui-deploy.git
+```
+
+```js {{ language: 'js', title: 'ComfyUI Manager' }}
+// Install with ComfyUI Manager
+Search `ComfyUI Deploy`
+```
+</CodeGroup>
+
+## ComfyUI Manager
+
+Install from ComfyUI Manager
+<Image src="https://media.discordapp.net/attachments/1187301526646030386/1189400730101104660/CleanShot_2023-12-27_at_10.53.272x.png"/>
+
+## Setup your workflow
+
+Add ComfyDeploy node
+
+<Image className="max-w-xl" src="https://cdn.discordapp.com/attachments/1187301526646030386/1189400819741761546/CleanShot_2023-12-27_at_10.54.052x.png"/>
+
+Set a name for your workflow
+
+<Image className="max-w-xl" src="https://cdn.discordapp.com/attachments/1187301526646030386/1189400882773766184/CleanShot_2023-12-27_at_10.54.212x.png"/>
+
+Set up your API key
+
+<Image className="w-fit max-h-48" src="https://cdn.discordapp.com/attachments/1189594955279245403/1189594974149431326/CleanShot_2023-12-27_at_23.45.13.png"/>
+Open the settings panel and then set your API key here, if you dont have one, create here <a href="/api-keys">Create API Key</a>
+<Image className="max-w-lg" src="https://cdn.discordapp.com/attachments/1187301526646030386/1189401104472080514/CleanShot_2023-12-27_at_10.54.372x.png"/>
+
+
+## What's next?
+
+Now, hit the Deploy button and your workflow will be deployed to ComfyUI's server. Check out <a href="/workflows">your workflows here</a>.
+
@@ -0,0 +1,40 @@
+import { Providers } from "./providers";
+import "@/app/(app)/globals.css";
+import { Layout } from "@/components/docs/Layout";
+import { type Section } from "@/components/docs/SectionProvider";
+import glob from "fast-glob";
+import { type Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: {
+    template: "%s - Protocol API Reference",
+    default: "Protocol API Reference",
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pages = await glob("**/*.mdx", { cwd: "src/app/(docs)/docs" });
+  const allSectionsEntries = (await Promise.all(
+    pages.map(async (filename) => [
+      `/${filename.replace(/(^|\/)page\.mdx$/, "")}`,
+      (await import(`./${filename}`)).sections,
+    ])
+  )) as Array<[string, Array<Section>]>;
+  const allSections = Object.fromEntries(allSectionsEntries);
+
+  return (
+    <html lang="en" className="h-full" suppressHydrationWarning>
+      <body className="flex min-h-full bg-white antialiased dark:bg-zinc-900">
+        <Providers>
+          <div className="w-full">
+            <Layout allSections={allSections}>{children}</Layout>
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,24 @@
+import { Button } from "@/components/docs/Button";
+import { HeroPattern } from "@/components/docs/HeroPattern";
+
+export default function NotFound() {
+  return (
+    <>
+      <HeroPattern />
+      <div className="mx-auto flex h-full max-w-xl flex-col items-center justify-center py-16 text-center">
+        <p className="text-sm font-semibold text-zinc-900 dark:text-white">
+          404
+        </p>
+        <h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-white">
+          Page not found
+        </h1>
+        <p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
+          Sorry, we couldn’t find the page you’re looking for.
+        </p>
+        <Button href="/" arrow="right" className="mt-8">
+          Back to docs
+        </Button>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,34 @@
+import { Guides } from '@/components/docs/Guides'
+import { Resources } from '@/components/docs/Resources'
+import { HeroPattern } from '@/components/docs/HeroPattern'
+
+export const metadata = {
+  title: 'Comfy Deploy Documentation',
+  description:
+    'Get your comfy deploy setup running in minutes. Learn how to deploy your generative workflow to comfy deploy.',
+}
+
+<HeroPattern />
+
+# Introduction
+
+Open source comfyui deployment platform, a vercel for generative workflow infra.
+
+<div className="not-prose mb-16 mt-6 flex gap-3">
+  <Button href="/docs/install" arrow="right">
+    <>Install</>
+  </Button>
+  <Button href="/api-keys" variant="outline">
+    <>Create API Key</>
+  </Button> 
+</div>
+
+{/* ## Getting started {{ anchor: false }}
+
+Get started by first installing Comfy Deploy plugin 
+
+<div className="not-prose">
+  <Button href="/api-keys" variant="text" arrow="right">
+    <>Get your API key</>
+  </Button>
+</div> */}
@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider, useTheme } from "next-themes";
+import { useEffect } from "react";
+
+function ThemeWatcher() {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+    function onMediaChange() {
+      const systemTheme = media.matches ? "dark" : "light";
+      if (resolvedTheme === systemTheme) {
+        setTheme("system");
+      }
+    }
+
+    onMediaChange();
+    media.addEventListener("change", onMediaChange);
+
+    return () => {
+      media.removeEventListener("change", onMediaChange);
+    };
+  }, [resolvedTheme, setTheme]);
+
+  return null;
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange>
+      <ThemeWatcher />
+      {children}
+    </ThemeProvider>
+  );
+}