Website tweaks and new logo

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",

unicord.code-workspace

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

website/src/app/layout.tsx

@@ -21,7 +21,7 @@ export const metadata: Metadata = {
         description: 'Unicord is a simple, type-safe, and modular framework for building Discord bots in TypeScript.',
         images: [
             {
-                url: '/unicord.png',
+                url: 'https://unicord.hat.fish/unicord.png',
                 width: 1024,
                 height: 1024,
                 alt: 'Unicord logo'

website/src/app/page.module.css

@@ -267,58 +267,6 @@
     line-height: 1.6;
 }
 
-@media (max-width: 1200px) {
-    .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;
-        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;
-    }
-}
-
 .typeSection {
     padding: 6rem 12em;
     min-height: 50vh;
@@ -456,7 +404,70 @@
     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;
     }

website/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from "./page.module.css";
 import dynamic from 'next/dynamic';
 
@@ -12,6 +12,22 @@ import { simpleExample, hydrationExample, typeCoercionExample } from '../compone
 
 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}>
@@ -21,7 +37,7 @@ export default function Home() {
                 </div>
                 <nav className={styles.nav}>
                     {/* <a href="/docs" className={styles.navLink}>Docs</a> */}
-                    <a href="https://github.com/jaronpate/unicord" target='_blank' className={styles.navLink}>Source</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>
@@ -32,11 +48,11 @@ export default function Home() {
                             Welcome to <span className={styles.logoMarkSpan}>uni</span>cord
                         </h1>
                         <p className={styles.description}>
-                            Finally a simpler way to build Discord bots.{" "}
+                            Build good bots fast.
                         </p>
                     </div>
                     <div className={styles.codeExample}>
-                        <CodeExample code={simpleExample} noScroll={true} />
+                        <CodeExample code={simpleExample} noScroll={false} />
                     </div>
                 </div>
 
@@ -63,7 +79,7 @@ export default function Home() {
                 <div className={styles.hydrationSection}>
                     <div className={styles.hydrationContainer}>
                         <div className={styles.hydrationCode}>
-                            <CodeExample code={hydrationExample} height={245} noScroll={true} />
+                            <CodeExample code={hydrationExample} height={260} noScroll={windowWidth < 1200 ? false : true} />
                         </div>
                         <div className={styles.hydrationText}>
                             <h2>Smart Hydration</h2>
@@ -94,7 +110,7 @@ export default function Home() {
                             </p>
                         </div>
                         <div className={styles.typeCode}>
-                            <CodeExample code={typeCoercionExample} height={370} noScroll={true} />
+                            <CodeExample code={typeCoercionExample} height={370} noScroll={windowWidth < 1200 ? false : true} />
                         </div>
                     </div>
                 </div>

website/src/components/CodeExample.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import Editor from "@monaco-editor/react";
+import Editor, { Monaco } from "@monaco-editor/react";
 import styles from './CodeExample.module.css';
+import { useEffect, useState } from "react";
 
 type CodeExampleProps = {
     code: string;
@@ -9,10 +10,69 @@ type CodeExampleProps = {
     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} style={{ pointerEvents: noScroll ? 'none' : 'auto' }}>
+            <div className={styles.editorContainer}>
                 <Editor
                     height={height}
                     defaultLanguage="typescript"
@@ -27,7 +87,11 @@ export default function CodeExample({ code, height = "100%", noScroll = false }:
                         roundedSelection: false,
                         padding: { top: 16, bottom: 16 },
                         automaticLayout: true,
+                        scrollbar: {
+                            alwaysConsumeMouseWheel: !noScroll,
+                        }
                     }}
+                    // beforeMount={handleEditorDidMount}
                 />
             </div>
         </div>
@@ -36,7 +100,7 @@ export default function CodeExample({ code, height = "100%", noScroll = false }:
 
 // Export the example code snippets for reuse
 export const simpleExample = `\
-import { Client, type Context } from 'unicord';
+import { Client, type Context, Intent } from 'unicord';
 
 // Initialize and configure
 const client = new Client({