Website init

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);
+```

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,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

website/package.json

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

website/src/app/globals.css

@@ -0,0 +1,32 @@
+
+: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,33 @@
+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-space-mono",
+  subsets: ["latin"],
+  weight: ["400"]
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+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,148 @@
+.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);
+}
+
+/* pag 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;
+}
+
+.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;
+}
+
+.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);
+}

website/src/app/page.tsx

@@ -0,0 +1,79 @@
+import styles from "./page.module.css";
+
+export default function Home() {
+    return (
+        <div className={[styles.page, styles.pageWithHeader].join(" ")}>
+            <header className={styles.header}>
+                <div className={styles.logoMark}>
+                    <img src="/unicord.png"></img>
+                    <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
+                </div>
+            </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}>
+                            Finally a simpler way to build Discord bots.{" "}
+                        </p>
+                    </div>
+                    <div>
+                        <code className={styles.code}>
+                            <pre className={styles.codeBlock}>
+{`\
+import { Client, type Context } 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();
+`}
+                            </pre>
+                        </code>
+                    </div>
+                </div>
+
+                <div>
+                    <h2 className={styles.title}>Features</h2>
+                    <ul className={styles.features}>
+                        <li>TypeScript support</li>
+                        <li>Intuitive API</li>
+                        <li>Powerful command system</li>
+                        <li>Built-in event handling</li>
+                        <li>Easy to use</li>
+                    </ul>
+                    <h2 className={styles.title}>Get Started</h2>
+                    <p className={styles.description}>
+                        To get started, check out the{" "}
+                        <a href="https://unicord.dev" target="_blank">
+                            <span className={styles.link}>documentation</span>
+                        </a>{" "}
+                        or join our{" "}
+                        <a href="https://discord.gg/9v6Z4J5q" target="_blank">
+                            <span className={styles.link}>Discord server</span>
+                        </a>{" "}
+                        for help and support.
+                    </p>
+                </div>
+            </main>
+        </div>
+    );
+}

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"]
+}