From 9309f7dc654b9cccd6db07f471367f6e968ee584 Mon Sep 17 00:00:00 2001 From: skdhg <46562212+skdhg@users.noreply.github.com> Date: Fri, 1 Dec 2023 21:21:54 +0545 Subject: [PATCH] feat: docs outline --- apps/docs/components.json | 16 + apps/docs/package.json | 17 +- apps/docs/src/app/docs/page.tsx | 93 + apps/docs/src/app/globals.css | 61 +- apps/docs/src/app/layout.tsx | 23 +- apps/docs/src/app/page.tsx | 189 +- apps/docs/src/app/providers.tsx | 9 + apps/docs/src/components/discord-invite.tsx | 84 + apps/docs/src/components/footer.tsx | 20 + apps/docs/src/components/navbar.tsx | 52 + apps/docs/src/components/theme-switch.tsx | 44 + apps/docs/src/components/ui/avatar.tsx | 50 + apps/docs/src/components/ui/button.tsx | 57 + apps/docs/src/components/ui/card.tsx | 76 + apps/docs/src/components/ui/dropdown-menu.tsx | 205 ++ apps/docs/src/components/ui/label.tsx | 26 + apps/docs/src/components/ui/separator.tsx | 31 + apps/docs/src/lib/constants.ts | 32 + apps/docs/src/lib/utils.ts | 6 + apps/docs/tailwind.config.js | 81 + apps/docs/tailwind.config.ts | 20 - .../components/rank-card/NeoClassicalCard.tsx | 110 + packages/canvacord/src/helpers/utils.ts | 3 +- yarn.lock | 1928 ++++++++++++++++- 24 files changed, 3021 insertions(+), 212 deletions(-) create mode 100644 apps/docs/components.json create mode 100644 apps/docs/src/app/docs/page.tsx create mode 100644 apps/docs/src/app/providers.tsx create mode 100644 apps/docs/src/components/discord-invite.tsx create mode 100644 apps/docs/src/components/footer.tsx create mode 100644 apps/docs/src/components/navbar.tsx create mode 100644 apps/docs/src/components/theme-switch.tsx create mode 100644 apps/docs/src/components/ui/avatar.tsx create mode 100644 apps/docs/src/components/ui/button.tsx create mode 100644 apps/docs/src/components/ui/card.tsx create mode 100644 apps/docs/src/components/ui/dropdown-menu.tsx create mode 100644 apps/docs/src/components/ui/label.tsx create mode 100644 apps/docs/src/components/ui/separator.tsx create mode 100644 apps/docs/src/lib/constants.ts create mode 100644 apps/docs/src/lib/utils.ts create mode 100644 apps/docs/tailwind.config.js delete mode 100644 apps/docs/tailwind.config.ts create mode 100644 packages/canvacord/src/components/rank-card/NeoClassicalCard.tsx diff --git a/apps/docs/components.json b/apps/docs/components.json new file mode 100644 index 0000000..7681c2f --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/apps/docs/package.json b/apps/docs/package.json index 4be7440..e991792 100644 --- a/apps/docs/package.json +++ b/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" } diff --git a/apps/docs/src/app/docs/page.tsx b/apps/docs/src/app/docs/page.tsx new file mode 100644 index 0000000..98a401a --- /dev/null +++ b/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 ( +
+

DOCS WIP

+

Canvacord

+

+ Easily generate images on-the-fly with node.js using wide range of + templates. +

+ +

Get started

+

Install canvacord using npm:

+ npm i --save canvacord@beta + +

Example

+

Image Generation

+

+ Using built-in templates (New "Legacy api") +

+ + 
+        {EXAMPLE_1}
+
+ +

New XP Card

+ + 
+        {EXAMPLE_2}
+
+ {/* eslint-disable-next-line */} + xp-card +
+ ); +} diff --git a/apps/docs/src/app/globals.css b/apps/docs/src/app/globals.css index fd81e88..88e338e 100644 --- a/apps/docs/src/app/globals.css +++ b/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%; + } } diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx index 21072e7..0d6812a 100644 --- a/apps/docs/src/app/layout.tsx +++ b/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 ( - - {children} + + + + + + {children} +