Merge pull request #6 from jaronpate/ft/website

ft/website — getting out of hand

README.md

@@ -181,3 +181,46 @@ client.interactions.register('button_1', buttonInteractionHandler);
 client.interactions.register('button_2', buttonInteractionHandler);
 client.interactions.register('button_3', buttonInteractionHandler);
 ```
+
+## Multi-Context Support
+
+This is an example of how a single function can be used for both chat and application commands.
+
+```typescript
+const quotesCommandHandler = createCommandHandler({
+    description: 'Get a list of a users quotes',
+    args: [
+        {
+            id: 'user',
+            name: 'user',
+            type: CommandOptionType.User,
+            description: 'The user to get quotes for',
+            required: true
+        }
+    ] as const,
+    execute: async (context: Context, args) => {
+        // Lookup user
+        const user = await findUserByDiscordId(args.user.id);
+
+        if (user === undefined) {
+            return context.reply('User not found', true);
+        }
+
+        const quotes = await getQuotesByUser(user.id);
+
+        if (quotes.length === 0) {
+            return context.reply('No quotes found', true);
+        } else {
+            const embed = new Embed()
+                .setAuthor({ icon_url: args.user.avatarURL, name: args.user.display_name })
+                .setDescription(quotes.map(q => `"${q.quote_content}"`).join('\n\n'))
+                .setColor(0xFFFFFF);
+
+            return context.reply(embed.toMessage(), true);
+        }
+    }
+});
+
+client.chatCommands.register('quotes', quotesCommandHandler);
+client.applicationCommands.register('quotes', ApplicationCommandType.Chat, quotesCommandHandler);
+```

package.json

@@ -9,6 +9,7 @@
   "files": [
     "out"
   ],
+  "repository": "github:jaronpate/unicord",
   "scripts": {
     "test": "bun run testing/demo.test.ts",
     "test:inspect": "bun --inspect testing/demo.test.ts",
@@ -34,5 +35,11 @@
   },
   "dependencies": {
     "ws": "^8.18.0"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 120,
+    "tabWidth": 4
   }
 }

src/index.ts

@@ -1,17 +1,11 @@
 // Base classes
-export { Client } from './services/client';
+export { Client, Client as unicord } from './services/client';
 export { Intent, Trait } from './types/common';
 // Consumable types
 export type { ClientConfig } from './types/common';
 export type { Context } from './types/context';
 export { Expectation } from './types/common';
-export { 
+export { ChannelType, ChannelFlags, VideoQualityMode, SortOrderType, ForumLayoutType } from './types/channel';
-    ChannelType,
-    ChannelFlags,
-    VideoQualityMode,
-    SortOrderType,
-    ForumLayoutType 
-} from './types/channel';
 // Consumable util classes
 export { Guild } from './types/guild';
 export { Role } from './types/role';
@@ -21,5 +15,11 @@ export { Message, type MessagePayload, ComponentStyle, ComponentType } from './t
 export { Embed } from './types/embed';
 export { Emoji } from './types/emoji';
 // Other
-export { createCommandHandler, type InteractionData, type InteractionCommpoentData, type InteractionCommandData, type InteractionHandlerFunction } from './types/handler';
+export {
+    createCommandHandler,
+    type InteractionData,
+    type InteractionCommpoentData,
+    type InteractionCommandData,
+    type InteractionHandlerFunction,
+} from './types/handler';
 export { ApplicationCommandType, ApplicationCommandOptionType as CommandOptionType } from './types/applicationCommand';

src/services/caches/cache.ts

@@ -1,16 +1,22 @@
-import { fromDiscord } from "../../types/common";
+import { fromDiscord } from '../../types/common';
-import type { Context } from "../../types/context";
+import type { Context } from '../../types/context';
-import type { API } from "../api";
+import type { API } from '../api';
-import type { Processor } from "../processor";
+import type { Processor } from '../processor';
-
 
 export class ObjectCache<T, K extends T> {
     cache: LRUCache<string, K>;
     requests = new Map<string, Promise<K>>();
     readonly type: string;
 
-    constructor(protected api: API, processor: Processor, type: string, private readonly factory: { [fromDiscord]: (data: any) => K } & (new (data: T) => T), events: string[], capacity: number = 10_000) {
+    constructor(
-        this.cache = new LRUCache<string, K>(10_000)
+        protected api: API,
+        processor: Processor,
+        type: string,
+        private readonly factory: { [fromDiscord]: (data: any) => K } & (new (data: T) => T),
+        events: string[],
+        maxCapacity: number = 10_000,
+    ) {
+        this.cache = new LRUCache<string, K>(maxCapacity);
         this.type = type;
         processor.events.register(events, async (_context: Context, e: Record<string, any>) => {
             this.cache.set(e.id, factory[fromDiscord](e));
@@ -49,10 +55,8 @@ export class ObjectCache<T, K extends T> {
             });
             // Save the request
             this.requests.set(object_id, req);
-            // Remove the request from the cache if it succeeds
+            // Remove the request from the cache when it finishes
-            req.then(() => this.requests.delete(object_id));
+            req.finally(() => this.requests.delete(object_id));
-            // Remove the request from the cache if it fails
-            req.catch(() => this.requests.delete(object_id));
             // Return the request
             return req;
         }

src/services/client.ts

@@ -1,4 +1,4 @@
-import { Expectation, HandlerType, Intent, type ClientConfig } from '../types/common';
+import { type DiscordAPIEvent, Expectation, HandlerType, Intent, type ClientConfig } from '../types/common';
 import { Message, type DiscordMessage } from '../types/message';
 import { exists, isNil } from '../utils/index';
 import { API } from './api';
@@ -95,9 +95,12 @@ export class Client {
      *
      * @throws Will throw an error if an expectation cannot be resolved.
      */
-    hydrate = async <T extends Hydrateable | Hydrated<Hydrateable, Array<Expectation>>, K extends Array<Expectation>>(data: T, expectations: K) => {
+    hydrate = async <T extends Hydrateable | Hydrated<Hydrateable, Array<Expectation>>, K extends Array<Expectation>>(
+        data: T,
+        expectations: K,
+    ) => {
         return hydrate<T, K>(data, expectations, this, this.api);
-    }
+    };
 
     /**
      * A wrapper function that attempts to hydrate a given data object and returns a type guard function.
@@ -112,15 +115,32 @@ export class Client {
      */
     hydrator = async <T extends Hydrateable, K extends Expectation[]>(data: T, expectations: K) => {
         return hydrator<T, K>(data, expectations, this, this.api);
-    }
+    };
 
     sendMessage = async (channel_id: string, message: Message | string) => {
         if (typeof message === 'string') {
             message = new Message().setContent(message);
         }
 
-        return Message.fromDiscord(await this.api.post<DiscordMessage>(`/channels/${channel_id}/messages`, message.toJSON()));
+        return Message.fromDiscord(
-    }
+            await this.api.post<DiscordMessage>(`/channels/${channel_id}/messages`, message.toJSON()),
+        );
+    };
+
+    /**
+     * Makes a raw HTTP request to the Discord API.
+     * @param method HTTP method to use for the request (GET, POST, PUT, DELETE).
+     * @param endpoint The API endpoint to request; can start with a slash or be a full URL.
+     * @param body Optional body to send with the request, typically used for POST or PUT requests.
+     * @returns A promise that resolves to the response data of type T.
+     */
+    rawRequest = async <T = Record<string, any>>(
+        method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+        endpoint: string,
+        body?: Record<string, any>,
+    ): Promise<T> => {
+        return this.api.request<T>(method, endpoint, body);
+    };
 
     // chatCommands = {
     //     register: (name: string | string[], handler: Handler) => this.processor.chat_commands.register(name, handler),
@@ -134,11 +154,11 @@ export class Client {
     //     has: (name: string) => this.processor.application_commands.has(name)
     // }
 
-    on = (event: string, handler: (...args: any[]) => void) => this.bus.on(event, handler);
+    on = (event: DiscordAPIEvent, handler: (...args: any[]) => void) => this.bus.on(event, handler);
 
-    once = (event: string, handler: (...args: any[]) => void) => this.bus.once(event, handler);
+    once = (event: DiscordAPIEvent, handler: (...args: any[]) => void) => this.bus.once(event, handler);
 
-    off = (event: string, handler: (...args: any[]) => void) => this.bus.off(event, handler);
+    off = (event: DiscordAPIEvent, handler: (...args: any[]) => void) => this.bus.off(event, handler);
 
     connect = () => this.gateway.connect();
 }

src/types/common.ts

@@ -3,7 +3,7 @@ export type ClientConfig = {
     application_id: string;
     prefix?: string;
     intents?: Intent[];
-}
+};
 
 export enum Expectation {
     Guild = 'guild',
@@ -16,24 +16,26 @@ export enum HandlerType {
     Events = 'events',
     ChatCommands = 'chat_commands',
     ApplicationCommands = 'application_commands',
-    Interactions = 'interactions'
+    Interactions = 'interactions',
 }
 
-export type Expects<T extends Array<Expectation>, K extends Expectation> = Extract<K, T[number]> extends never ? false : true;
+export type Expects<T extends Array<Expectation>, K extends Expectation> = Extract<K, T[number]> extends never
+    ? false
+    : true;
 
-export const clone: unique symbol = Symbol('clone')
+export const clone: unique symbol = Symbol('clone');
-export const fromDiscord: unique symbol = Symbol('fromDiscord')
+export const fromDiscord: unique symbol = Symbol('fromDiscord');
-export const execute: unique symbol = Symbol('execute')
+export const execute: unique symbol = Symbol('execute');
 
 export const Trait: {
-    clone: typeof clone
+    clone: typeof clone;
-    fromDiscord: typeof fromDiscord
+    fromDiscord: typeof fromDiscord;
-    execute: typeof execute
+    execute: typeof execute;
 } = {
     clone,
     fromDiscord,
-    execute
+    execute,
-}
+};
 
 export type EventPayload = any;
 
@@ -58,7 +60,7 @@ export type Payload = {
 export enum InteractionResponseType {
     Pong = 1,
     Message = 4,
-    DeferredMessage = 5
+    DeferredMessage = 5,
 }
 
 export enum Intent {
@@ -79,110 +81,189 @@ export enum Intent {
     DIRECT_MESSAGE_TYPING = 1 << 14,
     MESSAGE_CONTENT = 1 << 15,
     DEFAULT = 513,
-    ALL = 32767
+    ALL = 32767,
 }
 
 export const IntentGroup: { [key in Intent]?: [string[], number] } = {
-    [Intent.GUILDS]: [[
+    [Intent.GUILDS]: [
-        "GUILD_CREATE",
+        [
-        "GUILD_UPDATE",
+            'GUILD_CREATE',
-        "GUILD_DELETE",
+            'GUILD_UPDATE',
-        "GUILD_ROLE_CREATE",
+            'GUILD_DELETE',
-        "GUILD_ROLE_UPDATE",
+            'GUILD_ROLE_CREATE',
-        "GUILD_ROLE_DELETE",
+            'GUILD_ROLE_UPDATE',
-        "CHANNEL_CREATE",
+            'GUILD_ROLE_DELETE',
-        "CHANNEL_UPDATE",
+            'CHANNEL_CREATE',
-        "CHANNEL_DELETE",
+            'CHANNEL_UPDATE',
-        "CHANNEL_PINS_UPDATE",
+            'CHANNEL_DELETE',
-        "THREAD_CREATE",
+            'CHANNEL_PINS_UPDATE',
-        "THREAD_UPDATE",
+            'THREAD_CREATE',
-        "THREAD_DELETE",
+            'THREAD_UPDATE',
-        "THREAD_LIST_SYNC",
+            'THREAD_DELETE',
-        "THREAD_MEMBER_UPDATE",
+            'THREAD_LIST_SYNC',
-        "THREAD_MEMBERS_UPDATE *",
+            'THREAD_MEMBER_UPDATE',
-        "STAGE_INSTANCE_CREATE",
+            'THREAD_MEMBERS_UPDATE *',
-        "STAGE_INSTANCE_UPDATE",
+            'STAGE_INSTANCE_CREATE',
-        "STAGE_INSTANCE_DELETE"
+            'STAGE_INSTANCE_UPDATE',
-    ], 0],
+            'STAGE_INSTANCE_DELETE',
+        ],
+        0,
+    ],
 
-    [Intent.GUILD_MEMBERS]: [[
+    [Intent.GUILD_MEMBERS]: [
-        "GUILD_MEMBER_ADD",
+        ['GUILD_MEMBER_ADD', 'GUILD_MEMBER_UPDATE', 'GUILD_MEMBER_REMOVE', 'THREAD_MEMBERS_UPDATE *'],
-        "GUILD_MEMBER_UPDATE",
+        1,
-        "GUILD_MEMBER_REMOVE",
+    ],
-        "THREAD_MEMBERS_UPDATE *",
-    ], 1],
 
-    [Intent.GUILD_BANS]: [[
+    [Intent.GUILD_BANS]: [['GUILD_BAN_ADD', 'GUILD_BAN_REMOVE'], 2],
-        "GUILD_BAN_ADD",
-        "GUILD_BAN_REMOVE",
-    ], 2],
 
-    [Intent.GUILD_EMOJIS_AND_STICKERS]: [[
+    [Intent.GUILD_EMOJIS_AND_STICKERS]: [['GUILD_EMOJIS_UPDATE', 'GUILD_STICKERS_UPDATE'], 3],
-        "GUILD_EMOJIS_UPDATE",
-        "GUILD_STICKERS_UPDATE",
-    ], 3],
 
-    [Intent.GUILD_INTEGRATIONS]: [[
+    [Intent.GUILD_INTEGRATIONS]: [
-        "GUILD_INTEGRATIONS_UPDATE",
+        ['GUILD_INTEGRATIONS_UPDATE', 'INTEGRATION_CREATE', 'INTEGRATION_UPDATE', 'INTEGRATION_DELETE'],
-        "INTEGRATION_CREATE",
+        4,
-        "INTEGRATION_UPDATE",
+    ],
-        "INTEGRATION_DELETE",
-    ], 4],
 
-    [Intent.GUILD_WEBHOOKS]: [[
+    [Intent.GUILD_WEBHOOKS]: [['WEBHOOKS_UPDATE'], 5],
-        "WEBHOOKS_UPDATE"
-    ], 5],
 
-    [Intent.GUILD_INVITES]: [[
+    [Intent.GUILD_INVITES]: [['INVITE_CREATE', 'INVITE_DELETE'], 6],
-        "INVITE_CREATE",
-        "INVITE_DELETE",
-    ], 6],
 
-    [Intent.GUILD_VOICE_STATES]: [[
+    [Intent.GUILD_VOICE_STATES]: [['VOICE_STATE_UPDATE'], 7],
-        "VOICE_STATE_UPDATE"
-    ], 7],
 
-    [Intent.GUILD_PRESENCES]: [[
+    [Intent.GUILD_PRESENCES]: [['PRESENCE_UPDATE'], 8],
-        "PRESENCE_UPDATE"
-    ], 8],
 
-    [Intent.GUILD_MESSAGES]: [[
+    [Intent.GUILD_MESSAGES]: [['MESSAGE_CREATE', 'MESSAGE_UPDATE', 'MESSAGE_DELETE', 'MESSAGE_DELETE_BULK'], 9],
-        "MESSAGE_CREATE",
-        "MESSAGE_UPDATE",
-        "MESSAGE_DELETE",
-        "MESSAGE_DELETE_BULK",
-    ], 9],
 
-    [Intent.GUILD_MESSAGE_REACTIONS]: [[
+    [Intent.GUILD_MESSAGE_REACTIONS]: [
-        "MESSAGE_REACTION_ADD",
+        [
-        "MESSAGE_REACTION_REMOVE",
+            'MESSAGE_REACTION_ADD',
-        "MESSAGE_REACTION_REMOVE_ALL",
+            'MESSAGE_REACTION_REMOVE',
-        "MESSAGE_REACTION_REMOVE_EMOJI",
+            'MESSAGE_REACTION_REMOVE_ALL',
-    ], 10],
+            'MESSAGE_REACTION_REMOVE_EMOJI',
+        ],
+        10,
+    ],
 
-    [Intent.GUILD_MESSAGE_TYPING]: [[
+    [Intent.GUILD_MESSAGE_TYPING]: [['TYPING_START'], 11],
-        "TYPING_START"
-    ], 11],
 
-    [Intent.DIRECT_MESSAGES]: [[
+    [Intent.DIRECT_MESSAGES]: [['MESSAGE_CREATE', 'MESSAGE_UPDATE', 'MESSAGE_DELETE', 'CHANNEL_PINS_UPDATE'], 12],
-        "MESSAGE_CREATE",
-        "MESSAGE_UPDATE",
-        "MESSAGE_DELETE",
-        "CHANNEL_PINS_UPDATE",
-    ], 12],
 
-    [Intent.DIRECT_MESSAGE_REACTIONS]: [[
+    [Intent.DIRECT_MESSAGE_REACTIONS]: [
-        "MESSAGE_REACTION_ADD",
+        [
-        "MESSAGE_REACTION_REMOVE",
+            'MESSAGE_REACTION_ADD',
-        "MESSAGE_REACTION_REMOVE_ALL",
+            'MESSAGE_REACTION_REMOVE',
-        "MESSAGE_REACTION_REMOVE_EMOJI",
+            'MESSAGE_REACTION_REMOVE_ALL',
-    ], 13],
+            'MESSAGE_REACTION_REMOVE_EMOJI',
+        ],
+        13,
+    ],
 
-    [Intent.DIRECT_MESSAGE_TYPING]: [[
+    [Intent.DIRECT_MESSAGE_TYPING]: [['TYPING_START'], 14],
-        "TYPING_START"
-    ], 14],
 
-    [Intent.MESSAGE_CONTENT]: [[
+    [Intent.MESSAGE_CONTENT]: [['MESSAGE_CONTENT'], 15],
-        "MESSAGE_CONTENT"
+};
-    ], 15]
+
+export type DiscordAPIEvent =
+    | 'READY'
+    | 'RESUMED'
+    | 'CHANNEL_CREATE'
+    | 'CHANNEL_UPDATE'
+    | 'CHANNEL_DELETE'
+    | 'CHANNEL_PINS_UPDATE'
+    | 'THREAD_CREATE'
+    | 'THREAD_UPDATE'
+    | 'THREAD_DELETE'
+    | 'THREAD_LIST_SYNC'
+    | 'THREAD_MEMBER_UPDATE'
+    | 'THREAD_MEMBERS_UPDATE *'
+    | 'STAGE_INSTANCE_CREATE'
+    | 'STAGE_INSTANCE_UPDATE'
+    | 'STAGE_INSTANCE_DELETE'
+    | 'GUILD_CREATE'
+    | 'GUILD_UPDATE'
+    | 'GUILD_DELETE'
+    | 'GUILD_ROLE_CREATE'
+    | 'GUILD_ROLE_UPDATE'
+    | 'GUILD_ROLE_DELETE'
+    | 'GUILD_MEMBER_ADD'
+    | 'GUILD_MEMBER_UPDATE'
+    | 'GUILD_MEMBER_REMOVE'
+    | 'GUILD_MEMBERS_CHUNK *'
+    | 'GUILD_BAN_ADD'
+    | 'GUILD_BAN_REMOVE'
+    | 'GUILD_EMOJIS_UPDATE'
+    | 'GUILD_STICKERS_UPDATE'
+    | 'GUILD_INTEGRATIONS_UPDATE'
+    | 'INTEGRATION_CREATE'
+    | 'INTEGRATION_UPDATE'
+    | 'INTEGRATION_DELETE'
+    | 'WEBHOOKS_UPDATE'
+    | 'INVITE_CREATE'
+    | 'INVITE_DELETE'
+    | 'VOICE_STATE_UPDATE'
+    | 'MESSAGE_CREATE'
+    | 'MESSAGE_UPDATE'
+    | 'MESSAGE_DELETE'
+    | 'MESSAGE_DELETE_BULK'
+    | 'MESSAGE_REACTION_ADD'
+    | 'MESSAGE_REACTION_REMOVE'
+    | 'MESSAGE_REACTION_REMOVE_ALL'
+    | 'MESSAGE_REACTION_REMOVE_EMOJI'
+    | 'TYPING_START'
+    | 'PRESENCE_UPDATE'
+    | 'APPLICATION_COMMAND_CREATE'
+    | 'APPLICATION_COMMAND_UPDATE'
+    | 'APPLICATION_COMMAND_DELETE';
+
+export enum DiscordAPIEvents {
+    READY = 'READY',
+    RESUMED = 'RESUMED',
+    CHANNEL_CREATE = 'CHANNEL_CREATE',
+    CHANNEL_UPDATE = 'CHANNEL_UPDATE',
+    CHANNEL_DELETE = 'CHANNEL_DELETE',
+    CHANNEL_PINS_UPDATE = 'CHANNEL_PINS_UPDATE',
+    THREAD_CREATE = 'THREAD_CREATE',
+    THREAD_UPDATE = 'THREAD_UPDATE',
+    THREAD_DELETE = 'THREAD_DELETE',
+    THREAD_LIST_SYNC = 'THREAD_LIST_SYNC',
+    THREAD_MEMBER_UPDATE = 'THREAD_MEMBER_UPDATE',
+    THREAD_MEMBERS_UPDATE = 'THREAD_MEMBERS_UPDATE *',
+    STAGE_INSTANCE_CREATE = 'STAGE_INSTANCE_CREATE',
+    STAGE_INSTANCE_UPDATE = 'STAGE_INSTANCE_UPDATE',
+    STAGE_INSTANCE_DELETE = 'STAGE_INSTANCE_DELETE',
+    GUILD_CREATE = 'GUILD_CREATE',
+    GUILD_UPDATE = 'GUILD_UPDATE',
+    GUILD_DELETE = 'GUILD_DELETE',
+    GUILD_ROLE_CREATE = 'GUILD_ROLE_CREATE',
+    GUILD_ROLE_UPDATE = 'GUILD_ROLE_UPDATE',
+    GUILD_ROLE_DELETE = 'GUILD_ROLE_DELETE',
+    GUILD_MEMBER_ADD = 'GUILD_MEMBER_ADD',
+    GUILD_MEMBER_UPDATE = 'GUILD_MEMBER_UPDATE',
+    GUILD_MEMBER_REMOVE = 'GUILD_MEMBER_REMOVE',
+    GUILD_MEMBERS_CHUNK = 'GUILD_MEMBERS_CHUNK *',
+    GUILD_BAN_ADD = 'GUILD_BAN_ADD',
+    GUILD_BAN_REMOVE = 'GUILD_BAN_REMOVE',
+    GUILD_EMOJIS_UPDATE = 'GUILD_EMOJIS_UPDATE',
+    GUILD_STICKERS_UPDATE = 'GUILD_STICKERS_UPDATE',
+    GUILD_INTEGRATIONS_UPDATE = 'GUILD_INTEGRATIONS_UPDATE',
+    INTEGRATION_CREATE = 'INTEGRATION_CREATE',
+    INTEGRATION_UPDATE = 'INTEGRATION_UPDATE',
+    INTEGRATION_DELETE = 'INTEGRATION_DELETE',
+    WEBHOOKS_UPDATE = 'WEBHOOKS_UPDATE',
+    INVITE_CREATE = 'INVITE_CREATE',
+    INVITE_DELETE = 'INVITE_DELETE',
+    VOICE_STATE_UPDATE = 'VOICE_STATE_UPDATE',
+    MESSAGE_CREATE = 'MESSAGE_CREATE',
+    MESSAGE_UPDATE = 'MESSAGE_UPDATE',
+    MESSAGE_DELETE = 'MESSAGE_DELETE',
+    MESSAGE_DELETE_BULK = 'MESSAGE_DELETE_BULK',
+    MESSAGE_REACTION_ADD = 'MESSAGE_REACTION_ADD',
+    MESSAGE_REACTION_REMOVE = 'MESSAGE_REACTION_REMOVE',
+    MESSAGE_REACTION_REMOVE_ALL = 'MESSAGE_REACTION_REMOVE_ALL',
+    MESSAGE_REACTION_REMOVE_EMOJI = 'MESSAGE_REACTION_REMOVE_EMOJI',
+    TYPING_START = 'TYPING_START',
+    PRESENCE_UPDATE = 'PRESENCE_UPDATE',
+    APPLICATION_COMMAND_CREATE = 'APPLICATION_COMMAND_CREATE',
+    APPLICATION_COMMAND_UPDATE = 'APPLICATION_COMMAND_UPDATE',
+    APPLICATION_COMMAND_DELETE = 'APPLICATION_COMMAND_DELETE',
 }

unicord.code-workspace

@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"name": "unicord",
+			"path": "."
+		},
+		{
+			"name": "quotes-bot",
+			"path": "../quotes-bot"
+		}
+	],
+	"settings": {}
+}

website/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

website/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

website/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  output: 'export'
+};
+
+export default nextConfig;

website/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "unicord-website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "monaco-editor": "^0.52.2",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "next": "15.1.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-syntax-highlighter": "^15.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}

website/src/app/globals.css

@@ -0,0 +1,31 @@
+:root {
+    --background: #252525;
+    --foreground: #ededed;
+}
+
+
+html,
+body {
+    max-width: 100vw;
+    overflow-x: hidden;
+    color-scheme: dark;
+}
+
+body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}

website/src/app/layout.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+import "./globals.css";
+
+const spaceGrotesk = Space_Grotesk({
+    variable: "--font-space-grotesk",
+    subsets: ["latin"]
+});
+
+const spaceMono = Space_Mono({
+    variable: "--font-mono",
+    subsets: ["latin"],
+    weight: ["400"]
+});
+
+export const metadata: Metadata = {
+    title: 'Unicord',
+    description: 'Unicord is a simple, type-safe, and modular framework for building Discord bots in TypeScript.',
+    openGraph: {
+        title: 'Unicord',
+        description: 'Unicord is a simple, type-safe, and modular framework for building Discord bots in TypeScript.',
+        images: [
+            {
+                url: 'https://unicord.hat.fish/unicord.png',
+                width: 1024,
+                height: 1024,
+                alt: 'Unicord logo'
+            }
+        ]
+    }
+}
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <body className={`${spaceGrotesk.variable} ${spaceMono.variable}`}>
+                {children}
+            </body>
+        </html>
+    );
+}

website/src/app/page.module.css

@@ -0,0 +1,494 @@
+.page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+
+    font-family: var(--font-space-grotesk);
+}
+
+/* page with header needs margin atop */
+.pageWithHeader {
+    margin-top: 4rem;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.7rem;
+    /* glassy background */
+    background: transparent;
+    backdrop-filter: blur(16px);
+    border-bottom: 1px solid var(--gray-alpha-200);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+}
+
+.nav {
+    display: flex;
+    gap: 2rem;
+    margin-right: 2rem;
+}
+
+.navLink {
+    color: var(--color-text);
+    text-decoration: none;
+    font-size: 1rem;
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+}
+
+.navLink:hover {
+    opacity: 1;
+}
+
+.header img {
+    width: 40px;
+    height: 40px;
+    margin-right: 8px;
+}
+
+.logoMark {
+    display: flex;
+    align-items: center;
+    gap: 0px;
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.logoMarkSpan {
+    color: #ff0080;
+}
+
+.main {
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* padding: 4rem 0em; */
+}
+
+@keyframes dotPattern {
+    0% {
+        background-position: top right;
+    }
+
+    100% {
+        background-position: bottom left;
+    }
+}
+
+.hero {
+    padding: 0 15em 0;
+    height: calc(100vh - 4rem);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid var(--gray-alpha-200);
+}
+
+.hero::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: radial-gradient(circle, #ff0080 1px, transparent 1px);
+    background-size: 20px 20px;
+    animation: dotPattern 30s linear infinite;
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.hero::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    background: linear-gradient(to bottom, transparent, var(--gray-alpha-100));
+    pointer-events: none;
+}
+
+.codeExample {
+    flex: 1;
+    max-width: 60%;
+    height: 75%;
+    max-height: 500px;
+}
+
+.code {
+    font-family: var(--font-mono);
+    font-size: 1em;
+}
+
+.codeBlock {
+    background: var(--gray-alpha-100);
+    padding: 1em;
+    border-radius: 0.5em;
+}
+
+.codeBlock pre {
+    margin: 0;
+}
+
+.codeBlock code {
+    font-size: 1em;
+}
+
+.codeBlock code::before {
+    content: "";
+}
+
+.codeBlock code::after {
+    content: "";
+}
+
+.codeBlock code:hover {
+    background: var(--gray-alpha-200);
+}
+
+.codeBlock code:active {
+    background: var(--gray-alpha-200);
+}
+
+.codeBlock code:focus {
+    background: var(--gray-alpha-200);
+}
+
+.codeBlock code:focus-visible {
+    background: var(--gray-alpha-200);
+}
+
+.codeBlock code:focus-within {
+    background: var(--gray-alpha-200);
+}
+
+.pillars {
+    padding: 6rem 12em;
+    background: var(--gray-alpha-100);
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.pillarContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: center;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.pillar {
+    flex: 1;
+    text-align: center;
+    padding: 2rem;
+    background: var(--gray-alpha-100);
+    border-radius: 12px;
+    border: 1px solid var(--gray-alpha-200);
+    transition: transform 0.2s ease-in-out;
+}
+
+.pillar:hover {
+    transform: translateY(-5px);
+}
+
+.pillarIcon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.pillar h2 {
+    color: #ff0080;
+    margin: 0.5rem 0;
+    font-size: 1.5rem;
+}
+
+.pillar p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.hydrationSection {
+    padding: 6rem 12em;
+    min-height: 50vh;
+    display: flex;
+    align-items: space;
+    justify-content: center;
+    position: relative;
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.hydrationContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.hydrationCode {
+    flex: 2;
+    width: 100%;
+    max-width: 780px;
+}
+
+.hydrationText {
+    flex: 1;
+    /* padding: 2rem; */
+}
+
+.hydrationText h2 {
+    color: #ff0080;
+    margin: 0 0 1.5rem 0;
+    font-size: 2rem;
+}
+
+.hydrationText p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
+.typeSection {
+    padding: 6rem 12em;
+    min-height: 50vh;
+    display: flex;
+    align-items: space;
+    justify-content: center;
+    position: relative;
+    background: var(--gray-alpha-100);
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.typeContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.typeText {
+    flex: 1;
+}
+
+.typeCode {
+    flex: 2;
+    width: 100%;
+    max-width: 780px;
+}
+
+.typeText h2 {
+    color: #ff0080;
+    margin: 0 0 1.5rem 0;
+    font-size: 2rem;
+}
+
+.typeText p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
+.typeText p code, .hydrationText p code {
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+    background-color: var(--gray-alpha-100);
+    border-radius: 0.2em;
+    padding: 0.1em 0.2em;
+    color: var(--foreground);
+    border: 1px solid var(--gray-alpha-200);
+}
+
+.installSection {
+    padding: 6rem 12em;
+    min-height: 30vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.installContainer {
+    width: 100%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.installContainer h2 {
+    color: #fff;
+    margin: 0 0 2rem 0;
+    font-size: 2rem;
+}
+
+.packageManagerTabs {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.tabButton {
+    background: transparent;
+    border: 1px solid var(--gray-alpha-200);
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.tabButton:hover {
+    background: var(--gray-alpha-200);
+}
+
+.activeTab {
+    background: var(--gray-alpha-200);
+    border-color: #ff0080;
+}
+
+.installCommandWrapper {
+    display: flex;
+    align-items: center;
+    background: var(--gray-alpha-100);
+    border: 1px solid var(--gray-alpha-200);
+    border-radius: 8px;
+    padding: 1rem;
+    gap: 1rem;
+}
+
+.installCommand {
+    flex: 1;
+    display: block;
+    text-align: left;
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: #fff;
+}
+
+.copyButton {
+    background: transparent;
+    border: 1px solid var(--gray-alpha-200);
+    color: #fff;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.copyButton:hover {
+    background: var(--gray-alpha-200);
+}
+
+
+@media (max-width: 1200px) {
+    .hero {
+        padding: 0 2rem;
+        height: calc(100vh - 4rem);
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .hero .codeExample, .hero::after {
+        display: none;
+    }
+
+    .pillars {
+        padding: 4rem 2rem;
+    }
+
+    .pillarContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .pillar {
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    .hydrationSection {
+        padding: 4rem 2rem;
+    }
+
+    .hydrationContainer {
+        flex-direction: column-reverse;
+        gap: 2rem;
+    }
+
+    .hydrationCode {
+        width: 100%;
+    }
+
+    .hydrationText {
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .typeSection {
+        padding: 4rem 2rem;
+    }
+
+    .typeContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .typeCode {
+        width: 100%;
+    }
+
+    .typeText {
+        width: 100%;
+        padding: 1rem;
+    }
+
+    .installSection {
+        padding: 4rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .packageManagerTabs {
+        flex-wrap: wrap;
+    }
+    
+    .tabButton {
+        flex: 1;
+        min-width: 80px;
+    }
+
+    .nav {
+        gap: 1rem;
+        margin-right: 1rem;
+    }
+    
+    .navLink {
+        font-size: 0.9rem;
+    }
+}

website/src/app/page.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import styles from "./page.module.css";
+import dynamic from 'next/dynamic';
+
+const CodeExample = dynamic(
+  () => import('../components/CodeExample')
+);
+
+import { simpleExample, hydrationExample, typeCoercionExample } from '../components/CodeExample';
+
+export default function Home() {
+    const [activeTab, setActiveTab] = useState('npm');
+    const [windowWidth, setWindowWidth] = useState(1200);
+  
+    useEffect(() => {
+        setWindowWidth(window.innerWidth);
+
+      const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
+  
+      window.addEventListener('resize', handleResize);
+  
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, []);
+    
+    return (
+        <div className={[styles.page, styles.pageWithHeader].join(" ")}>
+            <header className={styles.header}>
+                <div className={styles.logoMark}>
+                    <img src="/unicord.png" alt="Unicord logo"></img>
+                    <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
+                </div>
+                <nav className={styles.nav}>
+                    {/* <a href="/docs" className={styles.navLink}>Docs</a> */}
+                    <a href="https://github.com/jaronpate/unicord" className={styles.navLink}>Source</a>
+                    <a href="https://discord.gg/6kFfqa5bde" target='_blank' className={styles.navLink}>Discord</a>
+                </nav>
+            </header>
+            <main className={styles.main}>
+                <div className={styles.hero}>
+                    <div>
+                        <h1 className={styles.title}>
+                            Welcome to <span className={styles.logoMarkSpan}>uni</span>cord
+                        </h1>
+                        <p className={styles.description}>
+                            Build good bots fast.
+                        </p>
+                    </div>
+                    <div className={styles.codeExample}>
+                        <CodeExample code={simpleExample} noScroll={false} />
+                    </div>
+                </div>
+
+                <div className={styles.pillars}>
+                    <div className={styles.pillarContainer}>
+                        <div className={styles.pillar}>
+                            <div className={styles.pillarIcon}>⚡</div>
+                            <h2>Simple</h2>
+                            <p>Build Discord bots with minimal boilerplate and intuitive APIs</p>
+                        </div>
+                        <div className={styles.pillar}>
+                            <div className={styles.pillarIcon}>🔧</div>
+                            <h2>Maintainable</h2>
+                            <p>Type-safe, modular architecture that scales with your project</p>
+                        </div>
+                        <div className={styles.pillar}>
+                            <div className={styles.pillarIcon}>📈</div>
+                            <h2>Scalable</h2>
+                            <p>Efficient caching and event handling for bots of any size</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={styles.hydrationSection}>
+                    <div className={styles.hydrationContainer}>
+                        <div className={styles.hydrationCode}>
+                            <CodeExample code={hydrationExample} height={260} noScroll={windowWidth < 1200 ? false : true} />
+                        </div>
+                        <div className={styles.hydrationText}>
+                            <h2>Smart Hydration</h2>
+                            <p>
+                                Unicord's hydration system automatically manages Discord object lifecycles. 
+                                The <code>context.hydrate</code> method intelligently fetches and caches Discord objects 
+                                like messages, users, and guilds, ensuring your bot stays efficient while 
+                                keeping your code clean and predictable.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={styles.typeSection}>
+                    <div className={styles.typeContainer}>
+                        <div className={styles.typeText}>
+                            <h2>Type Coercion</h2>
+                            <p>
+                                Unicord automatically handles type coercion for command arguments, 
+                                ensuring you always get the correct types in your handlers. Define your 
+                                command structure once, and get full type safety and autocompletion 
+                                throughout your codebase.
+                            </p>
+                            <p>
+                                In this example, the <code>user</code> argument is automatically typed 
+                                as a <code>User</code> object, providing access to all user properties 
+                                with full TypeScript support.
+                            </p>
+                        </div>
+                        <div className={styles.typeCode}>
+                            <CodeExample code={typeCoercionExample} height={370} noScroll={windowWidth < 1200 ? false : true} />
+                        </div>
+                    </div>
+                </div>
+
+                <div className={styles.installSection}>
+                    <div className={styles.installContainer}>
+                        <h2>Install <span className={styles.logoMarkSpan}>uni</span>cord</h2>
+                        <div className={styles.packageManagerTabs}>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'npm' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('npm')}
+                            >
+                                npm
+                            </button>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'yarn' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('yarn')}
+                            >
+                                yarn
+                            </button>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'pnpm' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('pnpm')}
+                            >
+                                pnpm
+                            </button>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'bun' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('bun')}
+                            >
+                                bun
+                            </button>
+                        </div>
+                        <div className={styles.installCommandWrapper}>
+                            <code className={styles.installCommand}>
+                                {activeTab === 'npm' && 'npm install unicord'}
+                                {activeTab === 'yarn' && 'yarn add unicord'}
+                                {activeTab === 'pnpm' && 'pnpm add unicord'}
+                                {activeTab === 'bun' && 'bun add unicord'}
+                            </code>
+                            <button 
+                                className={styles.copyButton}
+                                onClick={() => {
+                                    const commands = {
+                                        npm: 'npm install unicord',
+                                        yarn: 'yarn add unicord',
+                                        pnpm: 'pnpm add unicord',
+                                        bun: 'bun add unicord'
+                                    };
+                                    navigator.clipboard.writeText(commands[activeTab as keyof typeof commands]);
+                                }}
+                            >
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}

website/src/components/CodeExample.module.css

@@ -0,0 +1,13 @@
+.editorWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.editorContainer {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #2d2d2d;
+}

website/src/components/CodeExample.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import Editor, { Monaco } from "@monaco-editor/react";
+import styles from './CodeExample.module.css';
+import { useEffect, useState } from "react";
+
+type CodeExampleProps = {
+    code: string;
+    height?: string | number;
+    noScroll?: boolean;
+}
+
+
+export default function CodeExample({ code, height = "100%", noScroll = false }: CodeExampleProps) {
+    // const [unicordLib, setUnicordLib] = useState("");
+
+    // useEffect(() => {
+    //     setUnicordLib(`
+    //         declare module 'unicord' {
+    //             export enum Intent {
+    //                 GUILDS = 1 << 0,
+    //             }
+    //         }
+    //     `);
+        
+    // }, []);
+
+    // const handleEditorDidMount = (monaco: Monaco) => {
+    //     monaco.languages.typescript.typescriptDefaults.addExtraLib(unicordLib);
+
+    //     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    //         noSemanticValidation: false,
+    //         noSyntaxValidation: false,
+    //         noSuggestionDiagnostics: false,
+    //     });
+    //     monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    //         target: monaco.languages.typescript.ScriptTarget.ESNext,
+    //         module: monaco.languages.typescript.ModuleKind.ESNext,
+    //         allowJs: true,
+    //         checkJs: true,
+    //         allowNonTsExtensions: true,
+    //         strict: true,
+    //         noEmit: true,
+    //         lib: [
+    //             "ESNext",
+    //             "DOM",
+    //             "DOM.Iterable",
+    //             "ESNext.AsyncIterable",
+    //             "ESNext.BigInt"
+    //         ],
+    //         types: ["node", "unicord"],
+    //         baseUrl: "./",
+    //         paths: {
+    //             "index": ["./src/index.ts"],
+    //             "unicord": ["./node_modules/unicord/dist/index.d.ts"]
+    //         }
+    //     });
+
+    // };
+
+    // useEffect(() => {
+    //     fetch("https://www.unpkg.com/unicord@0.0.4/out/types/common.d.ts")
+    //         .then((response) => response.text())
+    //         .then((text) => {
+    //             setUnicordLib(text);
+    //             console.log("Fetched extra lib:", text);
+    //         })
+    //         .catch((error) => {
+    //             console.error("Error fetching extra lib:", error);
+    //         });
+    // }, []);
+    
+    return (
+        <div className={styles.editorWrapper}>
+            <div className={styles.editorContainer}>
+                <Editor
+                    height={height}
+                    defaultLanguage="typescript"
+                    defaultValue={code}
+                    theme="vs-dark"
+                    options={{
+                        readOnly: true,
+                        minimap: { enabled: false },
+                        fontSize: 14,
+                        lineNumbers: 'on',
+                        scrollBeyondLastLine: false,
+                        roundedSelection: false,
+                        padding: { top: 16, bottom: 16 },
+                        automaticLayout: true,
+                        scrollbar: {
+                            alwaysConsumeMouseWheel: !noScroll,
+                        }
+                    }}
+                    // beforeMount={handleEditorDidMount}
+                />
+            </div>
+        </div>
+    );
+}
+
+// Export the example code snippets for reuse
+export const simpleExample = `\
+import { Client, type Context, Intent } from 'unicord';
+
+// Initialize and configure
+const client = new Client({
+    token: '<token>',
+    application_id: '<application_id>',
+    intents: [
+        Intent.GUILDS,
+        Intent.GUILD_MESSAGES,
+        Intent.GUILD_MESSAGE_REACTIONS,
+        Intent.MESSAGE_CONTENT
+    ],
+    prefix: '??'
+});
+
+// Register a command
+client.chatCommands.register('ping', (context: Context, args) => {
+    context.reply('Pong!', true);
+});
+
+// Connect
+client.connect();`;
+
+export const hydrationExample = `\
+client.chatCommands.register('ping', async (context: Context, args: any[]) => {
+    // Hydrate the message id from the context
+    const { message } = await context.hydrate(context, [Expectation.Message]);
+    // Send a message to the channel
+    const response = await context.reply(\`Pong!: got \${args.join(', ')}\`, true);
+    // Calculate the time it took to send the message
+    const time = Date.now() - message.timestamp.getTime();
+    // Edit the message to include the time
+    await context.editMessage(response, \`Pong! Latency: \${time}ms\`);
+});`;
+
+export const typeCoercionExample = `\
+const avatarCommand = createCommandHandler({
+    description: 'Get a users avatar',
+    args: [
+        {
+            id: 'user',
+            name: 'user',
+            type: CommandOptionType.User,
+            description: 'The user to get the avatar for',
+            required: true
+        }
+    ],
+    execute: async (context: Context, args) => {
+        // Args will be typed here as { user: User }
+        context.reply(args.user.avatarURL);
+    }
+});`;

website/src/styles/shared.css

@@ -0,0 +1,27 @@
+:root {
+  --color-primary: #ff0080;
+  --color-background: #000;
+  --color-text: #fff;
+  
+  --gray-rgb: 255, 255, 255;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+  
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+  
+  --border-radius-sm: 6px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  
+  --font-size-sm: 0.9rem;
+  --font-size-md: 1.1rem;
+  --font-size-lg: 1.5rem;
+  --font-size-xl: 2rem;
+  
+  --section-padding-desktop: 6rem 12em;
+  --section-padding-mobile: 4rem 2rem;
+}

website/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}