feat: docs outline

apps/docs/components.json

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

apps/docs/package.json

@@ -6,12 +6,24 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "shadcn": "shadcn-ui"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "next": "14.0.3",
+    "next-themes": "^0.2.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -22,6 +34,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.0.3",
     "postcss": "^8",
+    "shadcn-ui": "^0.4.1",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

apps/docs/src/app/docs/page.tsx

@@ -0,0 +1,93 @@
+const EXAMPLE_1 = `import { canvacord } from 'canvacord';
+import fs from 'node:fs';
+
+// triggered gif
+const triggered = await canvacord.triggered(image);
+triggered.pipe(fs.createWriteStream('triggered.gif'));
+
+// image generation
+const beautiful = await canvacord.beautiful(img);
+const facepalm = await canvacord.facepalm(img);
+
+// filters
+const filtered = await canvacord
+    .filters(512, 512)
+    .drawImage(image)
+    .hueRotate(90)
+    .invert(2)
+    .sepia(1)
+    .opacity(0.5)
+    .saturate(2)
+    .encode();
+
+// alternative syntax
+const filtered = await canvacord(image, 512, 512)
+    .hueRotate(90)
+    .invert(2)
+    .sepia(1)
+    .opacity(0.5)
+    .saturate(2)
+    .encode();
+
+fs.writeFileSync('filtered.png', filtered);`;
+
+const EXAMPLE_2 = `import { Font, RankCardBuilder } from 'canvacord';
+import { writeFile } from 'fs/promises';
+
+// load default font
+Font.loadDefault();
+
+const card = new RankCardBuilder()
+  .setUsername('Lost Ctrl')
+  .setDisplayName('thearchaeopteryx')
+  .setAvatar('...')
+  .setCurrentXP(3800)
+  .setRequiredXP(2500)
+  .setLevel(54)
+  .setRank(32)
+  .setStatus('online');
+
+const image = await card.build({
+  format: 'png'
+});
+
+await writeFileSync('./card.png', data);`;
+
+export default function Page() {
+  return (
+    <main className="container">
+      <h1 className="text-3xl font-bold border-b">DOCS WIP</h1>
+      <h1 className="text-xl font-bold">Canvacord</h1>
+      <p>
+        Easily generate images on-the-fly with node.js using wide range of
+        templates.
+      </p>
+
+      <h2 className="font-semibold">Get started</h2>
+      <p>Install canvacord using npm:</p>
+      <code>npm i --save canvacord@beta</code>
+
+      <h2 className="font-semibold text-lg">Example</h2>
+      <h3 className="font-semibold">Image Generation</h3>
+      <h4 className="font-medium">
+        Using built-in templates (New &quot;Legacy api&quot;)
+      </h4>
+
+      <pre className="rounded-md bg-gray-100 dark:bg-background p-4 my-2">
+        {EXAMPLE_1}
+      </pre>
+
+      <h4 className="font-medium">New XP Card</h4>
+
+      <pre className="rounded-md bg-gray-100 dark:bg-background p-4 my-2">
+        {EXAMPLE_2}
+      </pre>
+      {/* eslint-disable-next-line */}
+      <img
+        src="https://raw.githubusercontent.com/neplextech/canvacord/main/packages/canvacord/test/jsx/test2.svg"
+        alt="xp-card"
+        className="w-[50%] mb-6"
+      />
+    </main>
+  );
+}

apps/docs/src/app/globals.css

@@ -2,26 +2,49 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
   }
-}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
 }

apps/docs/src/app/layout.tsx

@@ -1,8 +1,11 @@
+import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import { Navbar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+import { Providers } from "./providers";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
 export const metadata: Metadata = {
   title: "Canvacord",
@@ -16,8 +19,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body className={inter.className}>
+        <Providers
+          attribute="class"
+          defaultTheme="light"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Navbar />
+          {children}
+          <Footer />
+        </Providers>
+      </body>
     </html>
   );
 }