From f67801c418810372c47396a450929443d5e3c0dd Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:25:57 +0100
Subject: [PATCH 01/16] Add a custom component for exploring the configs

---
 .../configuration/{README.md => README.mdx}   |  8 +-
 .../ConfigurationStructureDiagram.tsx         | 87 +++++++++++++++++++
 src/css/custom.css                            | 25 ++++++
 3 files changed, 119 insertions(+), 1 deletion(-)
 rename docs/paper/admin/reference/configuration/{README.md => README.mdx} (96%)
 create mode 100644 src/components/ConfigurationStructureDiagram.tsx

diff --git a/docs/paper/admin/reference/configuration/README.md b/docs/paper/admin/reference/configuration/README.mdx
similarity index 96%
rename from docs/paper/admin/reference/configuration/README.md
rename to docs/paper/admin/reference/configuration/README.mdx
index bc3bcf804..9877795db 100644
--- a/docs/paper/admin/reference/configuration/README.md
+++ b/docs/paper/admin/reference/configuration/README.mdx
@@ -4,7 +4,13 @@ slug: /reference/configuration
 
 # Paper Configuration
 
-<!-- ## Global Configuration -->
+import ConfigurationStructureDiagram from '@site/src/components/ConfigurationStructureDiagram';
+
+---
+
+## Paper Configuration Files:
+
+<ConfigurationStructureDiagram/>
 
 ## Per World Configuration
 
diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
new file mode 100644
index 000000000..346e7cf37
--- /dev/null
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+
+const folderData = [
+    {
+        name: "config",
+        children: [
+            { name: "paper-global.yml", url: "/paper/reference/global-configuration" },
+            { name: "paper-world-defaults.yml", url: "/paper/reference/world-configuration" },
+        ],
+    },
+    {
+        name: "world",
+        children: [
+            { name: "paper-world.yml", url: "/paper/reference/configuration#per-world-values" },
+        ],
+    },
+    { name: "bukkit.yml", url: "WIP" },
+    { name: "spigot.yml", url: "WIP" },
+    { name: "server.properties", url: "/paper/reference/server-properties" },
+    { name: "permissions.yml", url: "WIP" },
+    { name: "help.yml", url: "WIP" },
+];
+
+const IndentationArrow = ({ level }) => {
+
+    if (level === 0) {
+        return (<></>);
+    }
+
+    const arrowStyle = {
+        fontSize: "14px",
+        color: "#bbbbbb",
+        marginRight: "8px",
+        marginLeft: `8px`,
+    };
+
+    return (
+        <span style={arrowStyle}>
+            {level > 0 && Array(level).fill("→").join("")}
+        </span>
+    );
+};
+
+export default function ConfigurationStructureDiagram({}) {
+    const renderNode = (node, level = 0) => {
+        const isFolder = "children" in node && Array.isArray(node.children);
+
+        const nodeStyle = {
+            alignItems: "center",
+        };
+
+        if (level > 0) {
+            nodeStyle.display = "flex";
+        }
+
+        const iconStyle = {
+            fontSize: "20px",
+            marginRight: "8px",
+        };
+
+        return (
+            <div key={node.name} style={{ ...nodeStyle }}>
+
+                <IndentationArrow level={level} />
+                <a className={isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node"} href={node.url}>
+                    <span style={iconStyle}>{isFolder ? "📁" : "📄"}</span>
+                    <span>{node.name}</span>
+                </a>
+
+                {isFolder &&
+                    node.children.map((child) => (
+                        <div key={child.name}>
+                            {renderNode(child, level + 1)}
+                        </div>
+                    ))}
+            </div>
+        );
+    };
+
+    return (
+        <div>
+            <pre>
+                {folderData.map(item => renderNode(item))}
+            </pre>
+        </div>
+    );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 23a53f041..e3239c7cb 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -13,6 +13,7 @@
   /* Config Node */
   --default-config-node-text-color: rgb(148, 148, 148);
   --config-node-highlight-text-color: black;
+  --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.03);
 }
 
 html[data-theme="dark"] {
@@ -29,6 +30,7 @@ html[data-theme="dark"] {
   /* Config Node */
   --default-config-node-text-color: rgb(128, 128, 128);
   --config-node-highlight-text-color: white;
+  --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.1);
 }
 
 .button.button--secondary {
@@ -282,3 +284,26 @@ ul.yaml-list-elem > li:before {
 [data-theme="light"] .expand-list-text {
   color: rgb(148, 148, 148);
 }
+
+.config-explorer-file-node {
+  display: flex;
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 3px 10px;
+  margin: 5px;
+  width: fit-content;
+  background-color: var(--config-explorer-file-node-text-color);
+}
+
+.config-explorer-file-node:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.config-explorer-file-folder-node {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+}

From 2861af8f8c27a1dcacb2efad824af68e3f229f46 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Thu, 31 Aug 2023 20:39:43 +0100
Subject: [PATCH 02/16] Rename world and recolour folders

---
 src/components/ConfigurationStructureDiagram.tsx |  2 +-
 src/css/custom.css                               | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 346e7cf37..5522bf21d 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -9,7 +9,7 @@ const folderData = [
         ],
     },
     {
-        name: "world",
+        name: "<world>",
         children: [
             { name: "paper-world.yml", url: "/paper/reference/configuration#per-world-values" },
         ],
diff --git a/src/css/custom.css b/src/css/custom.css
index e3239c7cb..3e49b36f0 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -303,7 +303,14 @@ ul.yaml-list-elem > li:before {
 }
 
 .config-explorer-file-folder-node {
-    display: flex;
-    align-items: center;
-    width: fit-content;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  color: var(--config-node-highlight-text-color);
+}
+
+.config-explorer-file-folder-node:hover {
+  cursor: default;
+  text-decoration: none;
+  color: var(--config-node-highlight-text-color);
 }

From 17c87e13c4b7d8204e370f3160b8e723109689df Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Thu, 31 Aug 2023 21:40:06 +0100
Subject: [PATCH 03/16] Added Pop(downs)

---
 .../ConfigurationStructureDiagram.tsx         | 70 +++++++++++++++----
 src/css/custom.css                            | 20 +++++-
 2 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 5522bf21d..746bec90e 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -1,24 +1,38 @@
-import React from "react";
+import React, {useState} from "react";
 
 const folderData = [
     {
         name: "config",
+        type: "folder",
         children: [
             { name: "paper-global.yml", url: "/paper/reference/global-configuration" },
             { name: "paper-world-defaults.yml", url: "/paper/reference/world-configuration" },
         ],
     },
+    {
+        name: "plugins",
+        type: "folder",
+        description: "Plugin jars go here.",
+    },
     {
         name: "<world>",
+        type: "folder",
         children: [
             { name: "paper-world.yml", url: "/paper/reference/configuration#per-world-values" },
         ],
     },
-    { name: "bukkit.yml", url: "WIP" },
-    { name: "spigot.yml", url: "WIP" },
-    { name: "server.properties", url: "/paper/reference/server-properties" },
-    { name: "permissions.yml", url: "WIP" },
-    { name: "help.yml", url: "WIP" },
+    { name: "banned-ips.json", type: "file", description: "WIP" },
+    { name: "banned-players.json", type: "file", description: "WIP" },
+    { name: "bukkit.yml", type: "file", url: "WIP" },
+    { name: "commands.yml", type: "file", url: "WIP" },
+    { name: "eula.txt", type: "file", description: "WIP" },
+    { name: "help.yml", type: "file", url: "WIP" },
+    { name: "ops.json", type: "file", description: "WIP" },
+    { name: "permissions.yml", type: "file", url: "WIP" },
+    { name: "server.properties", type: "file", url: "/paper/reference/server-properties" },
+    { name: "spigot.yml", type: "file", url: "WIP" },
+    { name: "usercache.json", type: "file", description: "WIP" },
+    { name: "whitelist.json", type: "file", description: "WIP" },
 ];
 
 const IndentationArrow = ({ level }) => {
@@ -42,11 +56,21 @@ const IndentationArrow = ({ level }) => {
 };
 
 export default function ConfigurationStructureDiagram({}) {
+    const [popupNode, setPopupNode] = useState(null);
+
+    const closePopup = () => {
+        setPopupNode(null);
+    };
+
     const renderNode = (node, level = 0) => {
-        const isFolder = "children" in node && Array.isArray(node.children);
+        const isFolder = node.type === "folder";
+        const hasDescription = "description" in node;
+        const hasUrl = "url" in node;
 
         const nodeStyle = {
             alignItems: "center",
+            position: "relative",
+            width: "50%",
         };
 
         if (level > 0) {
@@ -56,18 +80,40 @@ export default function ConfigurationStructureDiagram({}) {
         const iconStyle = {
             fontSize: "20px",
             marginRight: "8px",
+            cursor: hasDescription ? "pointer" : "auto",
+        };
+
+        const handlePopupClick = (event) => {
+            event.stopPropagation();
+            setPopupNode((prevNode) => (prevNode === node ? null : node));
         };
 
         return (
-            <div key={node.name} style={{ ...nodeStyle }}>
+            <div key={node.name} style={nodeStyle} onMouseLeave={closePopup}>
+
+                {level > 0 && (
+                    <IndentationArrow level={level} />
+                )}
+
+                <a className={isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node"} href={node.url}
+                   style={{cursor: hasUrl ? "pointer" : "default"}}>
 
-                <IndentationArrow level={level} />
-                <a className={isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node"} href={node.url}>
                     <span style={iconStyle}>{isFolder ? "📁" : "📄"}</span>
-                    <span>{node.name}</span>
+                    <span style={{ margin: "0 5px 0 5px" }}>{node.name}</span>
+                    {hasDescription && (
+                        <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handlePopupClick}>ⓘ</span>
+                    )}
+
                 </a>
 
-                {isFolder &&
+                {hasDescription && (
+                    <div className={"config-explorer-popup-window"}
+                         style={{ marginLeft: iconStyle.marginRight, display: popupNode === node ? "block" : "none" }}>
+                        <strong>Description:</strong><br/>{node.description}
+                    </div>
+                )}
+
+                {isFolder && node.children &&
                     node.children.map((child) => (
                         <div key={child.name}>
                             {renderNode(child, level + 1)}
diff --git a/src/css/custom.css b/src/css/custom.css
index 3e49b36f0..b26d76aa1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -288,12 +288,9 @@ ul.yaml-list-elem > li:before {
 .config-explorer-file-node {
   display: flex;
   align-items: center;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 10px;
-  padding: 3px 10px;
   margin: 5px;
   width: fit-content;
-  background-color: var(--config-explorer-file-node-text-color);
 }
 
 .config-explorer-file-node:hover {
@@ -314,3 +311,20 @@ ul.yaml-list-elem > li:before {
   text-decoration: none;
   color: var(--config-node-highlight-text-color);
 }
+
+.config-explorer-popup-window {
+  position: absolute;
+  background-color: #1c1e21;
+  padding: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  z-index: 1000;
+  top: 100%;
+  left: 0;
+  width: fit-content;
+}
+
+.config-explorer-popup-window-open-tag:hover {
+  font-weight: bold;
+  cursor: pointer;
+}

From ddd94eebe77312a58de5a98b677fd1a177d0c56d Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Tue, 5 Sep 2023 12:47:50 +0100
Subject: [PATCH 04/16] styling changes

---
 src/components/ConfigurationStructureDiagram.tsx | 8 ++++----
 src/css/custom.css                               | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 746bec90e..b77de40f3 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -83,9 +83,9 @@ export default function ConfigurationStructureDiagram({}) {
             cursor: hasDescription ? "pointer" : "auto",
         };
 
-        const handlePopupClick = (event) => {
+        const handleNodeOpening = (event) => {
             event.stopPropagation();
-            setPopupNode((prevNode) => (prevNode === node ? null : node));
+            setPopupNode(node);
         };
 
         return (
@@ -95,13 +95,13 @@ export default function ConfigurationStructureDiagram({}) {
                     <IndentationArrow level={level} />
                 )}
 
-                <a className={isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node"} href={node.url}
+                <a className={`${(isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node")} ${(!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link")}`} href={node.url}
                    style={{cursor: hasUrl ? "pointer" : "default"}}>
 
                     <span style={iconStyle}>{isFolder ? "📁" : "📄"}</span>
                     <span style={{ margin: "0 5px 0 5px" }}>{node.name}</span>
                     {hasDescription && (
-                        <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handlePopupClick}>ⓘ</span>
+                        <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
                     )}
 
                 </a>
diff --git a/src/css/custom.css b/src/css/custom.css
index 6a05fe0e3..e54110592 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -290,11 +290,10 @@ ul.yaml-list-elem > li:before {
   display: flex;
   align-items: center;
   border-radius: 10px;
-  margin: 5px;
   width: fit-content;
 }
 
-.config-explorer-file-node:hover {
+.config-explorer-file-node-with-link:hover {
   background-color: rgba(0, 0, 0, 0.1);
   cursor: pointer;
   text-decoration: none;

From 392da39909435198b71fb62523d027fa19d5d837 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Sat, 9 Sep 2023 22:23:30 +0100
Subject: [PATCH 05/16] Styling changes

---
 .../ConfigurationStructureDiagram.tsx          | 18 +++++++++---------
 src/css/custom.css                             | 13 +++++++++----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index b77de40f3..faf95498e 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -23,14 +23,14 @@ const folderData = [
     },
     { name: "banned-ips.json", type: "file", description: "WIP" },
     { name: "banned-players.json", type: "file", description: "WIP" },
-    { name: "bukkit.yml", type: "file", url: "WIP" },
+    { name: "bukkit.yml", type: "file", url: "/paper/reference/bukkit-configuration" },
     { name: "commands.yml", type: "file", url: "WIP" },
-    { name: "eula.txt", type: "file", description: "WIP" },
+    { name: "eula.txt", type: "file", description: "This file is in place to allow you to accept the Minecraft EULA.\nThis is required to start the server." },
     { name: "help.yml", type: "file", url: "WIP" },
     { name: "ops.json", type: "file", description: "WIP" },
     { name: "permissions.yml", type: "file", url: "WIP" },
     { name: "server.properties", type: "file", url: "/paper/reference/server-properties" },
-    { name: "spigot.yml", type: "file", url: "WIP" },
+    { name: "spigot.yml", type: "file", url: "/paper/reference/spigot-configuration" },
     { name: "usercache.json", type: "file", description: "WIP" },
     { name: "whitelist.json", type: "file", description: "WIP" },
 ];
@@ -70,7 +70,6 @@ export default function ConfigurationStructureDiagram({}) {
         const nodeStyle = {
             alignItems: "center",
             position: "relative",
-            width: "50%",
         };
 
         if (level > 0) {
@@ -79,7 +78,6 @@ export default function ConfigurationStructureDiagram({}) {
 
         const iconStyle = {
             fontSize: "20px",
-            marginRight: "8px",
             cursor: hasDescription ? "pointer" : "auto",
         };
 
@@ -101,15 +99,17 @@ export default function ConfigurationStructureDiagram({}) {
                     <span style={iconStyle}>{isFolder ? "📁" : "📄"}</span>
                     <span style={{ margin: "0 5px 0 5px" }}>{node.name}</span>
                     {hasDescription && (
-                        <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
+                        <span style ={{ zIndex: 100 }} className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
                     )}
 
                 </a>
 
                 {hasDescription && (
-                    <div className={"config-explorer-popup-window"}
-                         style={{ marginLeft: iconStyle.marginRight, display: popupNode === node ? "block" : "none" }}>
-                        <strong>Description:</strong><br/>{node.description}
+                    <div className={"config-explorer-popup-window-container"}>
+                        <div className={"config-explorer-popup-window"}
+                             style={{ display: popupNode === node ? "block" : "none", marginLeft: "30px" }}>
+                            <strong>Description:</strong><br/>{node.description}
+                        </div>
                     </div>
                 )}
 
diff --git a/src/css/custom.css b/src/css/custom.css
index e54110592..9f03776b4 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -312,15 +312,20 @@ ul.yaml-list-elem > li:before {
   color: var(--config-node-highlight-text-color);
 }
 
-.config-explorer-popup-window {
+.config-explorer-popup-window-container {
   position: absolute;
+  z-index: 10;
+  top: 100%;
+  left: 0;
+  width: fit-content;
+}
+
+.config-explorer-popup-window {
   background-color: #1c1e21;
   padding: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
-  z-index: 1000;
-  top: 100%;
-  left: 0;
+  margin-right: 100px;
   width: fit-content;
 }
 

From b4780982e96c71497b93d5d29849929ce2a72c0e Mon Sep 17 00:00:00 2001
From: olijeffers0n <69084614+olijeffers0n@users.noreply.github.com>
Date: Sun, 24 Sep 2023 16:08:04 +0100
Subject: [PATCH 06/16] Work on the css but still cant work out the z index

---
 .../ConfigurationStructureDiagram.tsx           |  6 +++---
 src/css/custom.css                              | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index faf95498e..aa29e3a38 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -99,7 +99,7 @@ export default function ConfigurationStructureDiagram({}) {
                     <span style={iconStyle}>{isFolder ? "📁" : "📄"}</span>
                     <span style={{ margin: "0 5px 0 5px" }}>{node.name}</span>
                     {hasDescription && (
-                        <span style ={{ zIndex: 100 }} className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
+                        <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
                     )}
 
                 </a>
@@ -107,7 +107,7 @@ export default function ConfigurationStructureDiagram({}) {
                 {hasDescription && (
                     <div className={"config-explorer-popup-window-container"}>
                         <div className={"config-explorer-popup-window"}
-                             style={{ display: popupNode === node ? "block" : "none", marginLeft: "30px" }}>
+                             /*style={{ display: popupNode === node ? "block" : "none" }}*/>
                             <strong>Description:</strong><br/>{node.description}
                         </div>
                     </div>
@@ -125,7 +125,7 @@ export default function ConfigurationStructureDiagram({}) {
 
     return (
         <div>
-            <pre>
+            <pre className={"config-explorer-code-outer-container"}>
                 {folderData.map(item => renderNode(item))}
             </pre>
         </div>
diff --git a/src/css/custom.css b/src/css/custom.css
index 9f03776b4..21406705a 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -286,6 +286,10 @@ ul.yaml-list-elem > li:before {
   color: rgb(148, 148, 148);
 }
 
+.config-explorer-code-outer-container {
+  overflow: visible;
+}
+
 .config-explorer-file-node {
   display: flex;
   align-items: center;
@@ -312,21 +316,28 @@ ul.yaml-list-elem > li:before {
   color: var(--config-node-highlight-text-color);
 }
 
-.config-explorer-popup-window-container {
+.config-explorer-popup-window-container { /* Container */
   position: absolute;
-  z-index: 10;
+  margin-left: 30px;
+  transform: translateZ(0);
   top: 100%;
   left: 0;
   width: fit-content;
+  z-index: 10;
 }
 
-.config-explorer-popup-window {
+.config-explorer-popup-window { /* Inner */
   background-color: #1c1e21;
   padding: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   margin-right: 100px;
   width: fit-content;
+  z-index: 20;
+}
+
+.config-explorer-popup-window-open-tag { /* (i) tag */
+  z-index: 15; /* Between container and popup window */
 }
 
 .config-explorer-popup-window-open-tag:hover {

From 1d9d278642b58bc1ffff5990ec01e93c46054084 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Thu, 22 Feb 2024 00:23:50 +0000
Subject: [PATCH 07/16] It like actually works now TM

---
 .../ConfigurationStructureDiagram.tsx         | 44 +++++++------------
 src/css/custom.css                            | 26 +++++++++--
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index aa29e3a38..8436c2d24 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -21,24 +21,24 @@ const folderData = [
             { name: "paper-world.yml", url: "/paper/reference/configuration#per-world-values" },
         ],
     },
-    { name: "banned-ips.json", type: "file", description: "WIP" },
-    { name: "banned-players.json", type: "file", description: "WIP" },
+    { name: "banned-ips.json", type: "file", description: "This file stores all the banned IP addresses on the server." },
+    { name: "banned-players.json", type: "file", description: "This file stores all the banned player information for the server." },
     { name: "bukkit.yml", type: "file", url: "/paper/reference/bukkit-configuration" },
-    { name: "commands.yml", type: "file", url: "WIP" },
+    { name: "commands.yml", type: "file", url: "/paper/reference/bukkit-commands-configuration" },
     { name: "eula.txt", type: "file", description: "This file is in place to allow you to accept the Minecraft EULA.\nThis is required to start the server." },
-    { name: "help.yml", type: "file", url: "WIP" },
-    { name: "ops.json", type: "file", description: "WIP" },
-    { name: "permissions.yml", type: "file", url: "WIP" },
+    { name: "help.yml", type: "file", description: "This file provides you with a wide variety of ways to configure the /help system in your Paper Server." },
+    { name: "ops.json", type: "file", description: "ops.json is a JSON file located in the root directory of a server containing a list of players with operator status." },
+    { name: "permissions.yml", type: "file", description: "The permissions.yml file allows creating of permission nodes so that server admins can easily distribute permissions." },
     { name: "server.properties", type: "file", url: "/paper/reference/server-properties" },
     { name: "spigot.yml", type: "file", url: "/paper/reference/spigot-configuration" },
-    { name: "usercache.json", type: "file", description: "WIP" },
-    { name: "whitelist.json", type: "file", description: "WIP" },
+    { name: "usercache.json", type: "file", description: "This file acts as a cache of user information that has been requested from Mojang's servers when they join the server or their texture is used as a Head." },
+    { name: "whitelist.json", type: "file", description: "This is is a server configuration file that stores the usernames of players who have been whitelisted on a server." },
 ];
 
 const IndentationArrow = ({ level }) => {
 
     if (level === 0) {
-        return (<></>);
+        return null;
     }
 
     const arrowStyle = {
@@ -50,7 +50,7 @@ const IndentationArrow = ({ level }) => {
 
     return (
         <span style={arrowStyle}>
-            {level > 0 && Array(level).fill("→").join("")}
+            {level > 0 && "→".repeat(level)}
         </span>
     );
 };
@@ -67,47 +67,33 @@ export default function ConfigurationStructureDiagram({}) {
         const hasDescription = "description" in node;
         const hasUrl = "url" in node;
 
-        const nodeStyle = {
-            alignItems: "center",
-            position: "relative",
-        };
-
-        if (level > 0) {
-            nodeStyle.display = "flex";
-        }
-
-        const iconStyle = {
-            fontSize: "20px",
-            cursor: hasDescription ? "pointer" : "auto",
-        };
-
         const handleNodeOpening = (event) => {
             event.stopPropagation();
             setPopupNode(node);
         };
 
         return (
-            <div key={node.name} style={nodeStyle} onMouseLeave={closePopup}>
+            <div key={node.name} className={level > 0 ? "config-explorer-node" : "config-explorer-node-noflex"} onMouseLeave={closePopup}>
 
                 {level > 0 && (
                     <IndentationArrow level={level} />
                 )}
 
-                <a className={`${(isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node")} ${(!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link")}`} href={node.url}
+                <a className={`${(isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node")} 
+                   ${(!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link")}`} href={node.url}
                    style={{cursor: hasUrl ? "pointer" : "default"}}>
 
-                    <span style={iconStyle}>{isFolder ? "📁" : "📄"}</span>
+                    <span style={{cursor: hasDescription ? "pointer" : "auto"}} className={"config-explorer-node-icon"}>{isFolder ? "📁" : "📄"}</span>
                     <span style={{ margin: "0 5px 0 5px" }}>{node.name}</span>
                     {hasDescription && (
                         <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
                     )}
-
                 </a>
 
                 {hasDescription && (
                     <div className={"config-explorer-popup-window-container"}>
                         <div className={"config-explorer-popup-window"}
-                             /*style={{ display: popupNode === node ? "block" : "none" }}*/>
+                             style={{ display: popupNode === node ? "block" : "none" }}>
                             <strong>Description:</strong><br/>{node.description}
                         </div>
                     </div>
diff --git a/src/css/custom.css b/src/css/custom.css
index 95ac130fa..268e08001 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -326,7 +326,8 @@ ul.yaml-list-elem > li:before {
   color: var(--config-node-highlight-text-color);
 }
 
-.config-explorer-popup-window-container { /* Container */
+.config-explorer-popup-window-container {
+  /* Container */
   position: absolute;
   margin-left: 30px;
   transform: translateZ(0);
@@ -336,7 +337,8 @@ ul.yaml-list-elem > li:before {
   z-index: 10;
 }
 
-.config-explorer-popup-window { /* Inner */
+.config-explorer-popup-window {
+  /* Inner */
   background-color: #1c1e21;
   padding: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -346,11 +348,27 @@ ul.yaml-list-elem > li:before {
   z-index: 20;
 }
 
-.config-explorer-popup-window-open-tag { /* (i) tag */
-  z-index: 15; /* Between container and popup window */
+.config-explorer-popup-window-open-tag {
+  /* (i) tag */
+  z-index: 5;
 }
 
 .config-explorer-popup-window-open-tag:hover {
   font-weight: bold;
   cursor: pointer;
 }
+
+.config-explorer-node-icon {
+  font-size: 20px;
+}
+
+.config-explorer-node {
+  align-items: center;
+  position: relative;
+  display: flex;
+}
+
+.config-explorer-node-noflex {
+  align-items: center;
+  position: relative;
+}

From b519ce2d91a5c82a81e4f6c4428e7c5dc726ee5e Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Thu, 22 Feb 2024 00:32:32 +0000
Subject: [PATCH 08/16] CSS Changes

---
 src/css/custom.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 268e08001..4bc05ce3c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -297,7 +297,8 @@ ul.yaml-list-elem > li:before {
 }
 
 .config-explorer-code-outer-container {
-  overflow: visible;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
 .config-explorer-file-node {
@@ -305,6 +306,8 @@ ul.yaml-list-elem > li:before {
   align-items: center;
   border-radius: 10px;
   width: fit-content;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .config-explorer-file-node-with-link:hover {
@@ -335,6 +338,7 @@ ul.yaml-list-elem > li:before {
   left: 0;
   width: fit-content;
   z-index: 10;
+  white-space: normal;
 }
 
 .config-explorer-popup-window {
@@ -346,6 +350,7 @@ ul.yaml-list-elem > li:before {
   margin-right: 100px;
   width: fit-content;
   z-index: 20;
+  white-space: pre-wrap;
 }
 
 .config-explorer-popup-window-open-tag {
@@ -366,6 +371,8 @@ ul.yaml-list-elem > li:before {
   align-items: center;
   position: relative;
   display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .config-explorer-node-noflex {

From 48a8dd5f6e4d9eca192b094d1b9e711ea8890b0b Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Fri, 23 Feb 2024 20:12:10 +0000
Subject: [PATCH 09/16] Some Work

---
 .../ConfigurationStructureDiagram.tsx         | 49 +++++-----
 src/css/configuration-explorer-layout.css     | 89 +++++++++++++++++++
 src/css/custom.css                            | 84 -----------------
 3 files changed, 114 insertions(+), 108 deletions(-)
 create mode 100644 src/css/configuration-explorer-layout.css

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 8436c2d24..82a82f937 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -1,12 +1,21 @@
 import React, {useState} from "react";
+import "@site/src/css/configuration-explorer-layout.css";
+
+interface ExplorerNode {
+    name: string;
+    type: "folder" | "file";
+    children?: ExplorerNode[];
+    description?: string;
+    url?: string;
+}
 
-const folderData = [
+const folderData: ExplorerNode[] = [
     {
         name: "config",
         type: "folder",
         children: [
-            { name: "paper-global.yml", url: "/paper/reference/global-configuration" },
-            { name: "paper-world-defaults.yml", url: "/paper/reference/world-configuration" },
+            { name: "paper-global.yml", type: "file", url: "/paper/reference/global-configuration" },
+            { name: "paper-world-defaults.yml", type: "file", url: "/paper/reference/world-configuration" },
         ],
     },
     {
@@ -18,7 +27,7 @@ const folderData = [
         name: "<world>",
         type: "folder",
         children: [
-            { name: "paper-world.yml", url: "/paper/reference/configuration#per-world-values" },
+            { name: "paper-world.yml", type: "file", url: "/paper/reference/configuration#per-world-values" },
         ],
     },
     { name: "banned-ips.json", type: "file", description: "This file stores all the banned IP addresses on the server." },
@@ -35,45 +44,37 @@ const folderData = [
     { name: "whitelist.json", type: "file", description: "This is is a server configuration file that stores the usernames of players who have been whitelisted on a server." },
 ];
 
-const IndentationArrow = ({ level }) => {
+interface IndentationArrowProps {
+    level: number;
+}
 
+const IndentationArrow: React.FC<IndentationArrowProps> = ({ level }) => {
     if (level === 0) {
         return null;
     }
 
-    const arrowStyle = {
-        fontSize: "14px",
-        color: "#bbbbbb",
-        marginRight: "8px",
-        marginLeft: `8px`,
-    };
-
     return (
-        <span style={arrowStyle}>
-            {level > 0 && "→".repeat(level)}
-        </span>
+        <span className={"indentation-arrow"}>
+      {level > 0 && "→".repeat(level)}
+    </span>
     );
 };
 
 export default function ConfigurationStructureDiagram({}) {
-    const [popupNode, setPopupNode] = useState(null);
-
-    const closePopup = () => {
-        setPopupNode(null);
-    };
+    const [popupNode, setPopupNode] = useState<ExplorerNode | null>(null);
 
-    const renderNode = (node, level = 0) => {
+    const renderNode = (node: ExplorerNode, level: number = 0) => {
         const isFolder = node.type === "folder";
         const hasDescription = "description" in node;
         const hasUrl = "url" in node;
 
-        const handleNodeOpening = (event) => {
+        const handleNodeOpening = (event: React.MouseEvent) => {
             event.stopPropagation();
             setPopupNode(node);
         };
 
         return (
-            <div key={node.name} className={level > 0 ? "config-explorer-node" : "config-explorer-node-noflex"} onMouseLeave={closePopup}>
+            <div key={node.name} className={level > 0 ? "config-explorer-node" : "config-explorer-node-noflex"} onMouseLeave={() => {setPopupNode(null)}}>
 
                 {level > 0 && (
                     <IndentationArrow level={level} />
@@ -112,7 +113,7 @@ export default function ConfigurationStructureDiagram({}) {
     return (
         <div>
             <pre className={"config-explorer-code-outer-container"}>
-                {folderData.map(item => renderNode(item))}
+                {folderData.map((item) => renderNode(item))}
             </pre>
         </div>
     );
diff --git a/src/css/configuration-explorer-layout.css b/src/css/configuration-explorer-layout.css
new file mode 100644
index 000000000..2edccb5b7
--- /dev/null
+++ b/src/css/configuration-explorer-layout.css
@@ -0,0 +1,89 @@
+.config-explorer-code-outer-container {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.config-explorer-file-node {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  width: fit-content;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.config-explorer-file-node-with-link:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.config-explorer-file-folder-node {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  color: var(--config-node-highlight-text-color);
+}
+
+.config-explorer-file-folder-node:hover {
+  cursor: default;
+  text-decoration: none;
+  color: var(--config-node-highlight-text-color);
+}
+
+.config-explorer-popup-window-container {
+  /* Container */
+  position: absolute;
+  margin-left: 30px;
+  transform: translateZ(0);
+  top: 100%;
+  left: 0;
+  width: fit-content;
+  z-index: 10;
+  white-space: normal;
+}
+
+.config-explorer-popup-window {
+  /* Inner */
+  background-color: #1c1e21;
+  padding: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  margin-right: 100px;
+  width: fit-content;
+  z-index: 20;
+  white-space: pre-wrap;
+}
+
+.config-explorer-popup-window-open-tag {
+  /* (i) tag */
+  z-index: 5;
+}
+
+.config-explorer-popup-window-open-tag:hover {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.indentation-arrow {
+  font-size: 14px;
+  color: #bbbbbb;
+  margin: 0 8px 0 8px;
+}
+
+.config-explorer-node-icon {
+  font-size: 20px;
+}
+
+.config-explorer-node {
+  align-items: center;
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.config-explorer-node-noflex {
+  align-items: center;
+  position: relative;
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 4bc05ce3c..de3f84573 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -295,87 +295,3 @@ ul.yaml-list-elem > li:before {
 [data-theme="light"] .expand-list-text {
   color: rgb(148, 148, 148);
 }
-
-.config-explorer-code-outer-container {
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.config-explorer-file-node {
-  display: flex;
-  align-items: center;
-  border-radius: 10px;
-  width: fit-content;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.config-explorer-file-node-with-link:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.config-explorer-file-folder-node {
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  color: var(--config-node-highlight-text-color);
-}
-
-.config-explorer-file-folder-node:hover {
-  cursor: default;
-  text-decoration: none;
-  color: var(--config-node-highlight-text-color);
-}
-
-.config-explorer-popup-window-container {
-  /* Container */
-  position: absolute;
-  margin-left: 30px;
-  transform: translateZ(0);
-  top: 100%;
-  left: 0;
-  width: fit-content;
-  z-index: 10;
-  white-space: normal;
-}
-
-.config-explorer-popup-window {
-  /* Inner */
-  background-color: #1c1e21;
-  padding: 10px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  border-radius: 5px;
-  margin-right: 100px;
-  width: fit-content;
-  z-index: 20;
-  white-space: pre-wrap;
-}
-
-.config-explorer-popup-window-open-tag {
-  /* (i) tag */
-  z-index: 5;
-}
-
-.config-explorer-popup-window-open-tag:hover {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.config-explorer-node-icon {
-  font-size: 20px;
-}
-
-.config-explorer-node {
-  align-items: center;
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.config-explorer-node-noflex {
-  align-items: center;
-  position: relative;
-}

From d602dd4f28ecf73aca04ee37fa7724e522815fff Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Fri, 23 Feb 2024 20:20:54 +0000
Subject: [PATCH 10/16] Some Work

---
 src/components/ConfigurationStructureDiagram.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 82a82f937..23c245f27 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -21,7 +21,7 @@ const folderData: ExplorerNode[] = [
     {
         name: "plugins",
         type: "folder",
-        description: "Plugin jars go here.",
+        description: "You can place your plugin jars here.",
     },
     {
         name: "<world>",
@@ -76,16 +76,20 @@ export default function ConfigurationStructureDiagram({}) {
         return (
             <div key={node.name} className={level > 0 ? "config-explorer-node" : "config-explorer-node-noflex"} onMouseLeave={() => {setPopupNode(null)}}>
 
-                {level > 0 && (
+                {level > 0 &&
                     <IndentationArrow level={level} />
-                )}
+                }
 
-                <a className={`${(isFolder ? "config-explorer-file-folder-node" : "config-explorer-file-node")} 
+                <a className={`${("config-explorer-file-" + (isFolder ? "folder-" : "") + "node")} 
                    ${(!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link")}`} href={node.url}
                    style={{cursor: hasUrl ? "pointer" : "default"}}>
 
-                    <span style={{cursor: hasDescription ? "pointer" : "auto"}} className={"config-explorer-node-icon"}>{isFolder ? "📁" : "📄"}</span>
-                    <span style={{ margin: "0 5px 0 5px" }}>{node.name}</span>
+                    <span style={{cursor: hasDescription ? "pointer" : "auto"}} className={"config-explorer-node-icon"}>
+                        {isFolder ? "📁" : "📄"}
+                    </span>
+                    <span style={{ margin: "0 5px 0 5px" }}>
+                        {node.name}
+                    </span>
                     {hasDescription && (
                         <span className={"config-explorer-popup-window-open-tag"} onMouseEnter={handleNodeOpening}>ⓘ</span>
                     )}

From 25065712d00e54b19e49b7400ab5b1260b148f97 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Fri, 23 Feb 2024 20:28:27 +0000
Subject: [PATCH 11/16] finalising work

---
 src/css/configuration-explorer-layout.css | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/css/configuration-explorer-layout.css b/src/css/configuration-explorer-layout.css
index 2edccb5b7..e400022c0 100644
--- a/src/css/configuration-explorer-layout.css
+++ b/src/css/configuration-explorer-layout.css
@@ -1,8 +1,10 @@
+/* Outer Container */
 .config-explorer-code-outer-container {
-  overflow-x: auto;
+  overflow: visible;
   white-space: nowrap;
 }
 
+/* File Node */
 .config-explorer-file-node {
   display: flex;
   align-items: center;
@@ -18,6 +20,7 @@
   text-decoration: none;
 }
 
+/* File Folder Node */
 .config-explorer-file-folder-node {
   display: flex;
   align-items: center;
@@ -31,8 +34,8 @@
   color: var(--config-node-highlight-text-color);
 }
 
+/* Popup Window Container */
 .config-explorer-popup-window-container {
-  /* Container */
   position: absolute;
   margin-left: 30px;
   transform: translateZ(0);
@@ -43,8 +46,8 @@
   white-space: normal;
 }
 
+/* Popup Window */
 .config-explorer-popup-window {
-  /* Inner */
   background-color: #1c1e21;
   padding: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -56,7 +59,6 @@
 }
 
 .config-explorer-popup-window-open-tag {
-  /* (i) tag */
   z-index: 5;
 }
 
@@ -65,16 +67,19 @@
   cursor: pointer;
 }
 
+/* Indentation Arrow */
 .indentation-arrow {
   font-size: 14px;
   color: #bbbbbb;
   margin: 0 8px 0 8px;
 }
 
+/* Node Icon */
 .config-explorer-node-icon {
   font-size: 20px;
 }
 
+/* Node */
 .config-explorer-node {
   align-items: center;
   position: relative;
@@ -83,6 +88,7 @@
   white-space: nowrap;
 }
 
+/* Node without Flex */
 .config-explorer-node-noflex {
   align-items: center;
   position: relative;

From 81b9f65fb251b6d35c2bb09813032b5c3d9a2b60 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:02:41 +0000
Subject: [PATCH 12/16] Address Comments

---
 docs/paper/admin/reference/configuration/README.mdx | 2 +-
 src/components/ConfigurationStructureDiagram.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/paper/admin/reference/configuration/README.mdx b/docs/paper/admin/reference/configuration/README.mdx
index 9877795db..118eadb10 100644
--- a/docs/paper/admin/reference/configuration/README.mdx
+++ b/docs/paper/admin/reference/configuration/README.mdx
@@ -8,7 +8,7 @@ import ConfigurationStructureDiagram from '@site/src/components/ConfigurationStr
 
 ---
 
-## Paper Configuration Files:
+## Paper Configuration Files
 
 <ConfigurationStructureDiagram/>
 
diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 23c245f27..6a1d2379a 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -55,12 +55,12 @@ const IndentationArrow: React.FC<IndentationArrowProps> = ({ level }) => {
 
     return (
         <span className={"indentation-arrow"}>
-      {level > 0 && "→".repeat(level)}
-    </span>
+            {level > 0 && "→".repeat(level)}
+        </span>
     );
 };
 
-export default function ConfigurationStructureDiagram({}) {
+export default function ConfigurationStructureDiagram() {
     const [popupNode, setPopupNode] = useState<ExplorerNode | null>(null);
 
     const renderNode = (node: ExplorerNode, level: number = 0) => {

From dedb2a4a510d37d2cf6883ad6676e7e5ad1ad938 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:29:37 +0000
Subject: [PATCH 13/16] Address Comments

---
 docs/paper/admin/reference/configuration/README.mdx | 7 +++++++
 src/components/ConfigurationStructureDiagram.tsx    | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/paper/admin/reference/configuration/README.mdx b/docs/paper/admin/reference/configuration/README.mdx
index 118eadb10..e4a9e0e72 100644
--- a/docs/paper/admin/reference/configuration/README.mdx
+++ b/docs/paper/admin/reference/configuration/README.mdx
@@ -10,6 +10,13 @@ import ConfigurationStructureDiagram from '@site/src/components/ConfigurationStr
 
 ## Paper Configuration Files
 
+:::info
+
+Many of our files have been comprehensively documented. If this is the case, they will offer a link to their page.
+If this is not the case, they offer a brief explanation to what they are.
+
+:::
+
 <ConfigurationStructureDiagram/>
 
 ## Per World Configuration
diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index 6a1d2379a..d540ccc34 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -27,7 +27,7 @@ const folderData: ExplorerNode[] = [
         name: "<world>",
         type: "folder",
         children: [
-            { name: "paper-world.yml", type: "file", url: "/paper/reference/configuration#per-world-values" },
+            { name: "paper-world.yml", type: "file", url: "/paper/reference/configuration#per-world-values", description: "Every world folder will have this file. The values here only apply to this world." },
         ],
     },
     { name: "banned-ips.json", type: "file", description: "This file stores all the banned IP addresses on the server." },

From 24adcdc4b81ec32a9c3b1d199f1a187c28f3387f Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:16:02 +0000
Subject: [PATCH 14/16] Work

---
 .../ConfigurationStructureDiagram.tsx         | 18 +++++++++++-------
 src/css/configuration-explorer-layout.css     | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index d540ccc34..d7dca6b04 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -1,5 +1,9 @@
 import React, {useState} from "react";
 import "@site/src/css/configuration-explorer-layout.css";
+import { Icon } from '@iconify/react';
+
+const folderIcon = "mdi:folder";
+const fileIcon = "mdi:file";
 
 interface ExplorerNode {
     name: string;
@@ -48,7 +52,7 @@ interface IndentationArrowProps {
     level: number;
 }
 
-const IndentationArrow: React.FC<IndentationArrowProps> = ({ level }) => {
+const IndentationArrow = ({ level } : IndentationArrowProps): null | JSX.Element => {
     if (level === 0) {
         return null;
     }
@@ -60,7 +64,7 @@ const IndentationArrow: React.FC<IndentationArrowProps> = ({ level }) => {
     );
 };
 
-export default function ConfigurationStructureDiagram() {
+export default function ConfigurationStructureDiagram() : JSX.Element {
     const [popupNode, setPopupNode] = useState<ExplorerNode | null>(null);
 
     const renderNode = (node: ExplorerNode, level: number = 0) => {
@@ -74,7 +78,9 @@ export default function ConfigurationStructureDiagram() {
         };
 
         return (
-            <div key={node.name} className={level > 0 ? "config-explorer-node" : "config-explorer-node-noflex"} onMouseLeave={() => {setPopupNode(null)}}>
+            <div key={node.name} className={level > 0 ? "config-explorer-node" : "config-explorer-node-noflex"}
+                 onMouseLeave={() => {setPopupNode(null)}}
+            >
 
                 {level > 0 &&
                     <IndentationArrow level={level} />
@@ -84,10 +90,8 @@ export default function ConfigurationStructureDiagram() {
                    ${(!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link")}`} href={node.url}
                    style={{cursor: hasUrl ? "pointer" : "default"}}>
 
-                    <span style={{cursor: hasDescription ? "pointer" : "auto"}} className={"config-explorer-node-icon"}>
-                        {isFolder ? "📁" : "📄"}
-                    </span>
-                    <span style={{ margin: "0 5px 0 5px" }}>
+                    <span className={"config-node-contents-wrapper"}>
+                        <Icon icon={isFolder ? folderIcon : fileIcon} className={"config-explorer-icon config-explorer-node-icon"}/>
                         {node.name}
                     </span>
                     {hasDescription && (
diff --git a/src/css/configuration-explorer-layout.css b/src/css/configuration-explorer-layout.css
index e400022c0..be6b3975b 100644
--- a/src/css/configuration-explorer-layout.css
+++ b/src/css/configuration-explorer-layout.css
@@ -14,6 +14,10 @@
   white-space: nowrap;
 }
 
+.config-explorer-file-node-with-link {
+  font-weight: bold;
+}
+
 .config-explorer-file-node-with-link:hover {
   background-color: rgba(0, 0, 0, 0.1);
   cursor: pointer;
@@ -86,10 +90,25 @@
   display: flex;
   flex-shrink: 0;
   white-space: nowrap;
+  margin: 5px;
 }
 
 /* Node without Flex */
 .config-explorer-node-noflex {
   align-items: center;
   position: relative;
+  margin: 5px;
+}
+
+.config-node-contents-wrapper {
+  margin: 0 5px;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+}
+
+.config-explorer-icon {
+  /* Make it go back to the original color */
+  color: var(--config-node-highlight-text-color);
+  margin-right: 5px;
 }

From df1f9dd5d667efddadbe690e16081538335ea8b9 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:19:35 +0000
Subject: [PATCH 15/16] CSS Changes

---
 src/css/configuration-explorer-layout.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/css/configuration-explorer-layout.css b/src/css/configuration-explorer-layout.css
index be6b3975b..564a0607c 100644
--- a/src/css/configuration-explorer-layout.css
+++ b/src/css/configuration-explorer-layout.css
@@ -80,7 +80,7 @@
 
 /* Node Icon */
 .config-explorer-node-icon {
-  font-size: 20px;
+  font-size: 23px;
 }
 
 /* Node */
@@ -97,7 +97,7 @@
 .config-explorer-node-noflex {
   align-items: center;
   position: relative;
-  margin: 5px;
+  margin: 5px 0 5px 0;
 }
 
 .config-node-contents-wrapper {

From b8079d0a0576697c7be9dc3d347939c8870eeeb8 Mon Sep 17 00:00:00 2001
From: Ollie <69084614+olijeffers0n@users.noreply.github.com>
Date: Fri, 15 Mar 2024 22:33:36 +0000
Subject: [PATCH 16/16] Final Work

---
 src/components/ConfigurationStructureDiagram.tsx | 12 +++++++++---
 src/css/configuration-explorer-layout.css        |  4 ++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ConfigurationStructureDiagram.tsx b/src/components/ConfigurationStructureDiagram.tsx
index d7dca6b04..0630d2b3d 100644
--- a/src/components/ConfigurationStructureDiagram.tsx
+++ b/src/components/ConfigurationStructureDiagram.tsx
@@ -4,6 +4,7 @@ import { Icon } from '@iconify/react';
 
 const folderIcon = "mdi:folder";
 const fileIcon = "mdi:file";
+const infoIcon = "mdi:information-outline";
 
 interface ExplorerNode {
     name: string;
@@ -14,6 +15,11 @@ interface ExplorerNode {
 }
 
 const folderData: ExplorerNode[] = [
+    {
+        name: "logs",
+        type: "folder",
+        description: "This folder contains all the logs for the server. It compresses old logs into .gz files, but holds the most recent log as a .txt file.",
+    },
     {
         name: "config",
         type: "folder",
@@ -40,7 +46,7 @@ const folderData: ExplorerNode[] = [
     { name: "commands.yml", type: "file", url: "/paper/reference/bukkit-commands-configuration" },
     { name: "eula.txt", type: "file", description: "This file is in place to allow you to accept the Minecraft EULA.\nThis is required to start the server." },
     { name: "help.yml", type: "file", description: "This file provides you with a wide variety of ways to configure the /help system in your Paper Server." },
-    { name: "ops.json", type: "file", description: "ops.json is a JSON file located in the root directory of a server containing a list of players with operator status." },
+    { name: "ops.json", type: "file", description: "This file stores a list of all players with operator status." },
     { name: "permissions.yml", type: "file", description: "The permissions.yml file allows creating of permission nodes so that server admins can easily distribute permissions." },
     { name: "server.properties", type: "file", url: "/paper/reference/server-properties" },
     { name: "spigot.yml", type: "file", url: "/paper/reference/spigot-configuration" },
@@ -59,7 +65,7 @@ const IndentationArrow = ({ level } : IndentationArrowProps): null | JSX.Element
 
     return (
         <span className={"indentation-arrow"}>
-            {level > 0 && "→".repeat(level)}
+            {level > 0 && "└─".repeat(level)}
         </span>
     );
 };
@@ -86,7 +92,7 @@ export default function ConfigurationStructureDiagram() : JSX.Element {
                     <IndentationArrow level={level} />
                 }
 
-                <a className={`${("config-explorer-file-" + (isFolder ? "folder-" : "") + "node")} 
+                <a className={`${("config-explorer-file-" + (isFolder ? "folder-" : "") + "node")}
                    ${(!hasUrl ? "config-explorer-file-node" : "config-explorer-file-node-with-link")}`} href={node.url}
                    style={{cursor: hasUrl ? "pointer" : "default"}}>
 
diff --git a/src/css/configuration-explorer-layout.css b/src/css/configuration-explorer-layout.css
index 564a0607c..3e4ce0180 100644
--- a/src/css/configuration-explorer-layout.css
+++ b/src/css/configuration-explorer-layout.css
@@ -75,7 +75,7 @@
 .indentation-arrow {
   font-size: 14px;
   color: #bbbbbb;
-  margin: 0 8px 0 8px;
+  margin: 0 8px 0 2px;
 }
 
 /* Node Icon */
@@ -101,7 +101,7 @@
 }
 
 .config-node-contents-wrapper {
-  margin: 0 5px;
+  margin: 0 5px 0 0;
   display: flex;
   align-items: center;
   font-size: 15px;