add libraries to the docs (will probably re-design later)

documentation/landing.md

@@ -1,11 +1,15 @@
 ---
-title: 
+title: Minecraft Utilities Documentation
+description: Welcome to the Minecraft Utilities documentation! Here you can find information on how to use the various features of the plugin.
 ---
 
-# Minecraft Utilities Documentation
-
-Welcome to the Minecraft Utilities documentation! Here you can find information on how to use the various features of the plugin.
-
-## Getting Started
+# Getting Started
 
 This is still a work in progress, so please be patient as we continue to add more documentation.
+
+## Libraries
+
+We offer a few different libraries for different languages to help you get started with the Minecraft Utilities plugin.
+
+- [Java](/documentation/libraries/java)
+- [JavaScript](/documentation/libraries/javascript)

documentation/libraries/java.md

@@ -0,0 +1,42 @@
+---
+title: Java Library
+description: The Java library for Minecraft Utilities is a simple way to interact with the plugin from using Java!
+---
+
+# Java Library
+
+This is the Java library for Minecraft Utilities.
+
+## Installation
+
+To use the Java library, you can add the following to your `pom.xml` file:
+
+```xml
+<repositories>
+    <repository>
+        <id>fascinated-repo-public</id>
+        <name>Fascinated's Repository</name>
+        <url>https://repo.fascinated.cc/public</url>
+    </repository>
+</repositories>
+
+<dependencies>
+    <dependency>
+        <groupId>xyz.mcutils</groupId>
+        <artifactId>mcutils-java-library</artifactId>
+        <version>1.1.1</version>
+    </dependency>
+</dependencies>
+```
+
+## Usage
+
+This is a simple example of how to use the Java library to get a player's information.
+
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println(McUtilsAPI.getPlayer("Notch"));
+    }
+}
+```

documentation/libraries/javascript.md

@@ -0,0 +1,28 @@
+---
+title: Javascript Library
+description: The Javascript library for Minecraft Utilities is a simple way to interact with the plugin from using Javascript!
+---
+
+# Javascript Library
+
+This is the Javascript library for Minecraft Utilities.
+
+## Installation
+
+To use the Javascript library, you can run the following command:
+
+```bash
+npm install mcutils-library
+```
+
+## Usage
+
+This is a simple example of how to use the Javascript library to get a player's information.
+
+```javascript
+import { getPlayer, CachedPlayer } from "mcutils-library";
+
+const cachedPlayer = await getPlayer(playerId);
+
+console.log(player);
+```

package.json

@@ -39,6 +39,7 @@
     "react-spinners": "^0.13.8",
     "react-syntax-highlighter": "^15.5.0",
     "react-use-websocket": "4.8.1",
+    "read-file": "^0.2.0",
     "remote-mdx": "^0.0.4",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"

pnpm-lock.yaml

@@ -95,6 +95,9 @@ dependencies:
   react-use-websocket:
     specifier: 4.8.1
     version: 4.8.1(react-dom@18.2.0)(react@18.2.0)
+  read-file:
+    specifier: ^0.2.0
+    version: 0.2.0
   remote-mdx:
     specifier: ^0.0.4
     version: 0.0.4(react@18.2.0)
@@ -6494,6 +6497,11 @@ packages:
     dependencies:
       pify: 2.3.0
 
+  /read-file@0.2.0:
+    resolution: {integrity: sha512-na/zgd5KplGlR+io+ygXQMIoDfX/Y0bNS5+P2TOXOTk5plquOVd0snudCd30hZJAsnVK2rxuxUP2z0CN+Aw1lQ==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}

src/app/(pages)/documentation/[[...slug]]/page.tsx

@@ -5,7 +5,7 @@ import { generateEmbed } from "@/common/embed";
 
 type DocumentationPageParams = {
   params: {
-    slug?: string;
+    slug?: string[];
   };
 };
 
@@ -18,9 +18,16 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
+  const pageSlug = slug?.join("/");
   const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === slug);
+  let page = documentationPages.find(page => page.slug === pageSlug);
 
+  // Use the landing page on "/documentation"
+  if (!page && !slug) {
+    page = documentationPages.find(page => page.slug === "landing");
+  }
+
+  // Fallback to page not found
   if (!page) {
     return generateEmbed({
       title: "Page not found",
@@ -30,34 +37,37 @@ export async function generateMetadata({ params: { slug } }: DocumentationPagePa
 
   return generateEmbed({
     title: page.metadata.title,
-    description: "Click to view this page",
+    description: `${page.metadata.description}\n\nClick to view this page`,
   });
 }
 
 export default function Page({ params: { slug } }: DocumentationPageParams) {
+  const pageSlug = slug?.join("/");
   const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === slug);
+  let page = documentationPages.find(page => page.slug === pageSlug);
 
-  // Fallback to the landing page
-  if (!page) {
+  // Use the landing page on "/documentation"
+  if (!page && !slug) {
     page = documentationPages.find(page => page.slug === "landing");
   }
 
-  // Fallback to a 404 page if we still can't find the page
+  // Page was not found, show an error page
   if (!page) {
-    page = {
-      metadata: {
-        title: "404 - Not Found",
-      },
-      content: "If you are seeing this, it means that the documentation page you are looking for does not exist.",
-      slug: "empty",
-    };
+    return (
+      <div className="text-center flex flex-col gap-2">
+        <h1 className="text-red-400 text-2xl">Not Found</h1>
+        <p>The page you are looking for was not found.</p>
+      </div>
+    );
   }
 
   return (
     <div className="w-full px-4 flex flex-col gap-4">
-      {/* The documentation page title */}
-      {page.metadata.title && <h1 className="text-center">{page.metadata.title}</h1>}
+      {/* The documentation page title and description */}
+      <div className="text-center mb-4">
+        {page.metadata.title && <h1 className="text-2xl">{page.metadata.title}</h1>}
+        {page.metadata.description && <h1>{page.metadata.description}</h1>}
+      </div>
 
       {/* The content of the documentation page */}
       <div className="text-left w-full">

src/app/components/code-highlighter.tsx

@@ -9,6 +9,11 @@ type CodeHighlighterProps = {
    */
   code: string;
 
+  /**
+   * The language of the code.
+   */
+  language?: string;
+
   /**
    * Should the element be rounded?
    */
@@ -62,11 +67,11 @@ function rowRenderer({
   });
 }
 
-export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
+export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
   return (
     <div className="text-xs md:text-md">
       <SyntaxHighlighter
-        language="json"
+        language={language}
         style={atomOneDark}
         wrapLongLines
         renderer={rowRenderer}

src/app/components/mx-components.tsx

@@ -1,8 +1,53 @@
 import { MDXRemote } from "remote-mdx/rsc";
+import { CodeHighlighter } from "@/app/components/code-highlighter";
+import { Separator } from "@/app/components/ui/separator";
+import { cn } from "@/common/utils";
+import Link from "next/link";
 
+/**
+ * Create a heading component.
+ *
+ * @param level the level of the heading.
+ */
+function createHeading(level: number) {
+  // eslint-disable-next-line react/display-name
+  return (props: any) => {
+    const Tag = `h${level}`;
+    return (
+      <div className={cn("pb-4", level > 1 ? "pt-6" : null)}>
+        <Tag className={`text-${4 - level}xl font-semibold pb-2`} {...props} />
+        <Separator />
+      </div>
+    );
+  };
+}
+
+/**
+ * The components to use in the MDX renderer.
+ */
 const components = {
-  h1: (props: any) => <h1 className="text-2xl font-semibold pb-2" {...props} />,
-  h2: (props: any) => <h1 className="text-xl font-semibold pb-2 pt-4" {...props} />,
+  h1: (props: any) => createHeading(1)(props),
+  h2: (props: any) => createHeading(2)(props),
+  code: (props: any) => {
+    if (!props.className) {
+      return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
+    }
+
+    return (
+      <div className="pt-4">
+        <CodeHighlighter
+          language={props.className ? props.className.replace("language-") : undefined}
+          code={props.children}
+        />
+      </div>
+    );
+  },
+  ul: (props: any) => <ul className="list-disc pl-4 py-2">{props.children}</ul>,
+  a: (props: any) => (
+    <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
+      {props.children}
+    </Link>
+  ),
 };
 
 export function CustomMDX(props: any) {

src/common/documentation.ts

@@ -1,11 +1,20 @@
+/* eslint-disable */
+
 import * as fs from "node:fs";
 import path from "node:path";
+// @ts-ignore
+import read from "read-file";
 
 type Metadata = {
   /**
    * The title of the documentation page.
    */
   title: string;
+
+  /**
+   * The description of the documentation page.
+   */
+  description?: string;
 };
 
 /**
@@ -14,10 +23,28 @@ type Metadata = {
 const documentationDirectory = path.join(process.cwd(), "documentation");
 
 /**
- * Gets the files for the documentation.
+ * Gets all the documentation files recursively.
+ *
+ * @param dirPath the directory path to search for documentation files.
  */
-function getDocumentationFiles() {
-  return fs.readdirSync(documentationDirectory);
+function getDocumentationFiles(dirPath: string): string[] {
+  let files: string[] = [];
+  const items = fs.readdirSync(dirPath);
+
+  items.forEach(item => {
+    const itemPath = path.join(dirPath, item);
+    const stat = fs.statSync(itemPath);
+
+    if (stat.isDirectory()) {
+      // Recursively traverse directories
+      files.push(...getDocumentationFiles(itemPath));
+    } else if (stat.isFile() && path.extname(item) === ".md") {
+      // Collect markdown files
+      files.push(itemPath);
+    }
+  });
+
+  return files;
 }
 
 /**
@@ -26,18 +53,19 @@ function getDocumentationFiles() {
  * @param file the file to get the content of.
  */
 function getDocumentationFileContent(file: string) {
-  return fs.readFileSync(path.join(documentationDirectory, file), "utf-8");
+  return read.sync(file, "utf8");
 }
 
 /**
  * Gets all the documentation pages.
  */
 export function getDocumentation() {
-  const files = getDocumentationFiles();
+  const files = getDocumentationFiles(documentationDirectory);
 
   return files.map(file => {
     const { metadata, content } = parseFrontmatter(getDocumentationFileContent(file));
-    let slug = path.basename(file, path.extname(file));
+    let slug = path.relative(documentationDirectory, file).replace(/\.(md)$/, "");
+    slug = slug.replace(/\\/g, "/"); // Normalize path separators
 
     return {
       metadata,

tailwind.config.ts

@@ -3,7 +3,13 @@ import defaultTheme from "tailwindcss/defaultTheme";
 
 const config = {
   darkMode: ["class"],
-  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "../documentation",
+  ],
   prefix: "",
   theme: {
     container: {