Monaco code example working

website/next.config.ts

@@ -1,18 +1,7 @@
 import type { NextConfig } from "next";
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const nextConfig: NextConfig = {
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.plugins.push(
-        new MonacoWebpackPlugin({
-          languages: ['typescript', 'javascript'],
-          filename: 'static/[name].worker.js',
-        })
-      );
-    }
-    return config;
-  },
+  /* config options here */
 };
 
 export default nextConfig;

website/package-lock.json

@@ -8,6 +8,7 @@
       "name": "unicord-website",
       "version": "0.1.0",
       "dependencies": {
+        "@monaco-editor/react": "^4.7.0",
         "monaco-editor": "^0.52.2",
         "monaco-editor-webpack-plugin": "^7.1.0",
         "next": "15.1.7",
@@ -442,6 +443,27 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "15.1.7",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.7.tgz",
@@ -1791,6 +1813,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",

website/package.json

@@ -9,6 +9,7 @@
     "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",

website/src/app/page.module.css

@@ -100,10 +100,11 @@
   pointer-events: none;
 }
 
-.hero > div:nth-child(2) {
+.codeExample {
   flex: 1;
-  min-width: 45%;
-  height: 100%;
+  max-width: 60%;
+  height: 75%;
+  max-height: 500px;
 }
 
 .code {

website/src/app/page.tsx

@@ -24,32 +24,12 @@ export default function Home() {
                             Finally a simpler way to build Discord bots.{" "}
                         </p>
                     </div>
-                    <div>
+                    <div className={styles.codeExample}>
                         <CodeExample />
                     </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 className={styles.pillars}>
                 </div>
             </main>
         </div>

website/src/components/CodeExample.module.css

@@ -4,6 +4,6 @@
     min-height: 300px;
     border-radius: 8px;
     overflow: hidden;
-    margin: 20px 0;
+    /* margin: 20px 0; */
     border: 1px solid #2d2d2d;
 }