From ffdb7ecc0b0a4b5d8eebbcaff88639890a9cc4dc Mon Sep 17 00:00:00 2001
From: purple <hello@prpl.wtf>
Date: Sun, 12 Nov 2023 14:37:02 +0100
Subject: [PATCH] feat(docs): Make documentation rendering and links work.

---
 docs/index.html                               | 53 ++++++++++++++-----
 docs/pages/Documentation.md                   |  2 +
 docs/pages/Error.md                           |  3 ++
 docs/pages/getting-started/Contribute.md      |  0
 .../getting-started/Extension-development.md  |  2 +
 docs/pages/getting-started/Installation.md    |  2 +
 index.html                                    | 44 +++++++--------
 7 files changed, 70 insertions(+), 36 deletions(-)
 create mode 100644 docs/pages/Documentation.md
 create mode 100644 docs/pages/Error.md
 create mode 100644 docs/pages/getting-started/Contribute.md
 create mode 100644 docs/pages/getting-started/Extension-development.md
 create mode 100644 docs/pages/getting-started/Installation.md

diff --git a/docs/index.html b/docs/index.html
index a14f894..1a86b11 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -58,9 +58,9 @@
       <div class="col-2">
         <div class="docs-category pb-4">
           <span class="ps-2 fw-bolder">Getting started</span><br>
-          <button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Installation</button><br>
-          <button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Extension development</button><br>
-          <button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Contribute</button><br>
+          <a href="?page=getting-started/Installation"><button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Installation</button></a><br>
+          <a href="?page=getting-started/Extension-development"><button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Extension development</button></a><br>
+          <a href="?page=getting-started/Contribute"><button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Contribute</button></a><br>
         </div>
         <div class="docs-category pb-4">
           <span class="ps-2 fw-bolder">Guides</span><br>
@@ -71,9 +71,12 @@
           <button type="button" class="btn btn-dark btn-sm text-start" style="--bs-btn-padding-y: .1rem;">Custom controllers</button><br>
         </div>
       </div>
-      <div class="col-10">
-        <h2><i class="bi bi-journal-code"></i> Documentation</h2>
-        <p>Select something from the sidebar to get started.</p>
+      <div class="col-10" id="content">
+        <div class="d-flex justify-content-center">
+          <div class="spinner-border spinner-border-sm text-secondary mt-4" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -86,22 +89,44 @@ <h2><i class="bi bi-journal-code"></i> Documentation</h2>
     <div class="col-md-4 d-flex align-items-center">
       <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
         <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="30" height="24" fill="#aeb2b6">
-  <rect x="0" y="166.6666" width="166.6666" height="166.6666"/>
-  <rect x="166.6666" y="0" width="166.6666" height="166.6666"/>
-  <rect x="166.6666" y="333.3332" width="333.3332" height="166.6666"/>
-  <rect x="333.3332" y="166.6666" width="166.667" height="333.3332"/>
-</svg>
+          <rect x="0" y="166.6666" width="166.6666" height="166.6666"/>
+          <rect x="166.6666" y="0" width="166.6666" height="166.6666"/>
+          <rect x="166.6666" y="333.3332" width="333.3332" height="166.6666"/>
+          <rect x="333.3332" y="166.6666" width="166.667" height="333.3332"/>
+        </svg>
       </a>
       <span class="mb-3 mb-md-0 text-body-secondary">© 2023 prpl.wtf</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-discord" width="24" height="24"></i></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-github" width="24" height="24"></i></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-chat-right-heart-fill" width="24" height="24"></i></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="https://discord.gg/CUwHwv6xRe"><i class="bi bi-discord" width="24" height="24"></i></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="https://github.com/teamblueprint/main"><i class="bi bi-github" width="24" height="24"></i></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="https://liberapay.com/blueprint"><i class="bi bi-chat-right-heart-fill" width="24" height="24"></i></a></li>
     </ul>
   </footer>
 </div>
 
   <script src="/.modules/bootstrap/js/bootstrap.bundle.js" crossorigin="anonymous"></script>
+  <script src="/.modules/marked/marked.min.js" crossorigin="anonymous"></script>
+  <script>
+    var u = new URL(window.location.href);
+    var d = u.searchParams.get('page');
+    try { document.querySelector('a[href="?page='+d+'"] button').classList.add("disabled") } catch {  }
+    if(d) { a = './pages/'+d+'.md' } else { a = './pages/Documentation.md' }
+    fetch(a)
+      .then(b => {
+        if (!b.ok) {
+          throw new Error(`Network response was not ok: ${b.status}`);
+          window.location="?page=Error"
+        }
+        return b.text();
+      })
+      .then(markdownContent => {
+        document.getElementById('content').innerHTML = marked.parse(markdownContent);
+      })
+      .catch(c => {
+        console.error('Error fetching the Markdown content:', c);
+        window.location="?page=Error"
+      });
+  </script>
 </body>
\ No newline at end of file
diff --git a/docs/pages/Documentation.md b/docs/pages/Documentation.md
new file mode 100644
index 0000000..279316b
--- /dev/null
+++ b/docs/pages/Documentation.md
@@ -0,0 +1,2 @@
+# Documentation
+<h4 class="fw-light">Guides and feature documentation for developers and system administrators</h4>
\ No newline at end of file
diff --git a/docs/pages/Error.md b/docs/pages/Error.md
new file mode 100644
index 0000000..cbf53a3
--- /dev/null
+++ b/docs/pages/Error.md
@@ -0,0 +1,3 @@
+<div class="alert alert-dark" role="alert">
+  <i class="bi bi-exclamation-triangle-fill me-2" style="font-size:19px"></i>The page you were trying to visit does not exist or encountered an unknown error.
+</div>
\ No newline at end of file
diff --git a/docs/pages/getting-started/Contribute.md b/docs/pages/getting-started/Contribute.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/pages/getting-started/Extension-development.md b/docs/pages/getting-started/Extension-development.md
new file mode 100644
index 0000000..7e3aa75
--- /dev/null
+++ b/docs/pages/getting-started/Extension-development.md
@@ -0,0 +1,2 @@
+# Extension development
+<h4 class="fw-light">Set up your extension development environment</h4>
\ No newline at end of file
diff --git a/docs/pages/getting-started/Installation.md b/docs/pages/getting-started/Installation.md
new file mode 100644
index 0000000..3228a8e
--- /dev/null
+++ b/docs/pages/getting-started/Installation.md
@@ -0,0 +1,2 @@
+# Installation
+<h4 class="fw-light">Learn how to install Blueprint on your Pterodactyl instance</h4>
\ No newline at end of file
diff --git a/index.html b/index.html
index 76f812b..a33c28c 100644
--- a/index.html
+++ b/index.html
@@ -160,12 +160,12 @@ <h3 class="fs-2 text-body-emphasis">Theme support</h3>
         <h1 class="display-5 fw-bold lh-1 text-body-emphasis mb-4">Write and manage modifications, faster.</h1>
         <p class="lead">We aim to create a community of new and experienced developers being able to write easy to install and versitile extensions with up-to-date documentation, guides and developer tools.</p>
         <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3 mt-4">
-          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Documentation</button>
-          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Extensions</button>
+          <a href="/docs"><button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Documentation</button></a>
+          <a href=""><button type="button" class="btn btn-outline-secondary btn-lg px-4">Extensions</button></a>
         </div>
       </div>
       <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
-          <img class="rounded-3 d-lg-inline d-none" src="/.assets/storage/misc/png/1.png" alt="" width="720">
+        <img class="rounded-3 d-lg-inline d-none" src="/.assets/storage/misc/png/1.png" alt="" width="720">
       </div>
     </div>
   </div>
@@ -174,26 +174,26 @@ <h1 class="display-5 fw-bold lh-1 text-body-emphasis mb-4">Write and manage modi
 
   <!-- Footer -->
   <div class="container">
-  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-    <div class="col-md-4 d-flex align-items-center">
-      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
-        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="30" height="24" fill="#aeb2b6">
-  <rect x="0" y="166.6666" width="166.6666" height="166.6666"/>
-  <rect x="166.6666" y="0" width="166.6666" height="166.6666"/>
-  <rect x="166.6666" y="333.3332" width="333.3332" height="166.6666"/>
-  <rect x="333.3332" y="166.6666" width="166.667" height="333.3332"/>
-</svg>
-      </a>
-      <span class="mb-3 mb-md-0 text-body-secondary">© 2023 prpl.wtf</span>
-    </div>
+    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+      <div class="col-md-4 d-flex align-items-center">
+        <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
+          <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="30" height="24" fill="#aeb2b6">
+            <rect x="0" y="166.6666" width="166.6666" height="166.6666"/>
+            <rect x="166.6666" y="0" width="166.6666" height="166.6666"/>
+            <rect x="166.6666" y="333.3332" width="333.3332" height="166.6666"/>
+            <rect x="333.3332" y="166.6666" width="166.667" height="333.3332"/>
+          </svg>
+        </a>
+        <span class="mb-3 mb-md-0 text-body-secondary">© 2023 prpl.wtf</span>
+      </div>
 
-    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-body-secondary" href="https://discord.gg/CUwHwv6xRe"><i class="bi bi-discord" width="24" height="24"></i></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="https://github.com/teamblueprint/main"><i class="bi bi-github" width="24" height="24"></i></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="https://liberapay.com/blueprint"><i class="bi bi-chat-right-heart-fill" width="24" height="24"></i></a></li>
-    </ul>
-  </footer>
-</div>
+      <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
+        <li class="ms-3"><a class="text-body-secondary" href="https://discord.gg/CUwHwv6xRe"><i class="bi bi-discord" width="24" height="24"></i></a></li>
+        <li class="ms-3"><a class="text-body-secondary" href="https://github.com/teamblueprint/main"><i class="bi bi-github" width="24" height="24"></i></a></li>
+        <li class="ms-3"><a class="text-body-secondary" href="https://liberapay.com/blueprint"><i class="bi bi-chat-right-heart-fill" width="24" height="24"></i></a></li>
+      </ul>
+    </footer>
+  </div>
 
   <script src="/.modules/bootstrap/js/bootstrap.bundle.js" crossorigin="anonymous"></script>
 </body>
\ No newline at end of file