feat incubator: Add a couple eggs and make incubator functional

assets/css/base.css

@@ -1,3 +1,7 @@
 a.link-underline-none {
   text-decoration: underline transparent !important;
+}
+
+#EggReadme {
+  margin-top: 1.5rem
 }

assets/js/base.js

@@ -0,0 +1,31 @@
+function Show404() {
+  document.querySelector("#NotificationDisplay").innerHTML = `
+    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <i class="bi bi-x-lg flex-shrink-0 me-2"></i>
+      <div>The page you are trying to visit does not exist.</div>
+    </div>
+  `
+}
+function ShowError() {
+  document.querySelector("#NotificationDisplay").innerHTML = `
+    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <i class="bi bi-exclamation-circle-fill flex-shrink-0 me-2"></i>
+      <div>Something went wrong, check your browser console for more information.</div>
+    </div>
+  `
+}
+async function RenderMarkdown(url, target) {
+  fetch(url)
+    .then(b => {
+      if (!b.ok) {
+        throw new Error(`Network response was not ok: ${b.status}`);
+      }
+      return b.text();
+    })
+    .then(markdownContent => {
+      document.querySelector(target).innerHTML = marked.parse(markdownContent);
+    })
+    .catch(c => {
+      console.error('Error fetching the Markdown content:', c);
+    });
+}

assets/js/egg.js

@@ -0,0 +1,28 @@
+function EggRender(url, callback) {
+  var xhr = new XMLHttpRequest()
+  xhr.open("GET", url, true)
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      var result = jsyaml.load(xhr.responseText)
+      callback(result)
+    }
+    if (xhr.readyState == 4 && xhr.status == 404) {
+      Show404()
+    }
+  }
+  xhr.send()
+}
+
+function DisplayEggInformation(egg) {
+  document.querySelector("#EggName").innerHTML = egg.name
+  document.querySelector("#EggDescription").innerHTML = egg.description
+  document.querySelector("#EggDownload").href = `../repository/${url.searchParams.get('egg')}/${egg.download}`
+
+  if(egg.readme == true) {
+    RenderMarkdown(`../repository/${url.searchParams.get('egg')}/README.md`, "#EggReadme")
+  } else {
+    document.querySelector("#EggReadme").classList.add("d-none")
+  }
+
+  document.querySelector("#EggContainer").classList.remove("d-none")
+}

assets/js/products.js

@@ -0,0 +1,95 @@
+function LoadProducts(url, callback) {
+  var xhr = new XMLHttpRequest()
+  xhr.open("GET", url, true)
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      var result = jsyaml.load(xhr.responseText)
+      callback(result)
+    }
+    if (xhr.readyState == 4 && xhr.status == 404) {
+      Show404()
+    }
+  }
+  xhr.send()
+}
+
+function DisplayCategories(products) {
+  var productList = document.querySelector("#RepositoryContainer")
+
+  products.forEach(function (product) {
+    var listItem = document.createElement("div")
+    listItem.className = "col-sm-12 col-md-6 col-lg-4 mb-4"
+
+    listItem.innerHTML = `
+      <a href="?category=${product.id}" class="link-underline-none">
+        <div class="card overflow-hidden bg-dark-subtle rounded-3">
+          <div class="btn-group position-absolute" style="right: 11px; top: 0px;">
+          </div>
+          <div class="card-body">
+            <h5 class="card-title text-truncate">
+              ${product.name}
+              <i class="bi bi-arrow-right float-end"></i>
+            </h5>
+            <p class="card-text text-truncate">
+              ${product.description}
+            </p>
+          </div>
+        </div>
+      </a>
+    `
+
+    productList.appendChild(listItem)
+  })
+}
+
+function DisplayCategoryContent(products) {
+  var categoryList = document.querySelector("#CategoryContainer")
+  var productList = document.querySelector("#RepositoryContainer")
+
+  products.forEach(function (product) {    
+    var listItem = document.createElement("div")
+
+    if(product.type == "category") {
+      listItem.className = "col-sm-12 col-md-6 col-lg-4 mb-4"
+      listItem.innerHTML = `
+        <a href="?category=${url.searchParams.get('category')}/${product.id}" class="link-underline-none">
+          <div class="card overflow-hidden bg-dark-subtle rounded-3">
+            <div class="btn-group position-absolute" style="right: 11px; top: 0px;">
+            </div>
+            <div class="card-body">
+              <h5 class="card-title text-truncate">
+                ${product.name}
+                <i class="bi bi-arrow-right float-end"></i>
+              </h5>
+              <p class="card-text text-truncate">
+                ${product.description}
+              </p>
+            </div>
+          </div>
+        </a>
+      `
+      categoryList.appendChild(listItem)
+    }
+
+    if(product.type == "egg") {
+      listItem.className = "col-sm-12 col-md-6 col-lg-4 mb-4"
+      listItem.innerHTML = `
+        <a href="egg/?egg=${url.searchParams.get('category')}/${product.id}" class="link-underline-none">
+          <div class="card overflow-hidden bg-dark-subtle rounded-3">
+            <div class="btn-group position-absolute" style="right: 11px; top: 0px;">
+            </div>
+            <div class="card-body">
+              <h5 class="card-title text-truncate">
+                ${product.name}
+              </h5>
+              <p class="card-text text-truncate">
+                ${product.description}
+              </p>
+            </div>
+          </div>
+        </a>
+      `
+      productList.appendChild(listItem)
+    }
+  })
+}

egg/index.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en" data-bs-theme="dark">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Incubator</title>
+    <link href="../assets/css/materialstyle.min.css" rel="stylesheet">
+    <link href="../assets/css/bootstrap-icons.min.css" rel="stylesheet">
+    <link href="../assets/css/base.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <!-- Navigation -->
+    <div class="container mt-5 mb-4">
+      <div class="row">
+        <div class="col fw-bold h3">
+          <a href="/" class="link-underline-none text-body">
+            <i class="bi bi-egg-fill"></i>
+            Incubator
+          </a>
+        </div>
+        <div class="col text-end">
+          <a href="https://pterodactyl.io" target="_blank" class="link-underline-none link-danger">
+            Pterodactyl <i class="bi bi-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Notification -->
+    <div class="container" id="NotificationDisplay"></div>
+
+    <!-- Description -->
+    <div class="container d-none" id="EggContainer">
+      <div id="EggInformation" class="mb-2 mt-3 rounded-3 bg-dark-subtle p-4">
+        <div class="row">
+          <div class="col-9">
+            <h4 id="EggName"></h4>
+            <p id="EggDescription" class="mb-0"></p>
+          </div>
+          <div class="col-3 align-self-center">
+            <a href="" id="EggDownload" download>
+              <button class="btn btn-danger float-end">Download</button>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div id="EggReadme" class="px-4">
+      </div>
+    </div>
+
+    <script src="../assets/js/materialstyle.min.js"></script>
+    <script src="../assets/js/mdc.ripple.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <script src="../assets/js/js-yaml.min.js"></script>
+    <script src="../assets/js/marked.min.js"></script>
+    <script src="../assets/js/base.js"></script>
+    <script src="../assets/js/egg.js"></script>
+    <script>
+      var url = new URL(window.location.href)
+
+      if(url.searchParams.get('egg') == null) { Show404() }
+      else {
+        EggRender(
+          `../repository/${url.searchParams.get('egg')}/egg.yml`,
+          DisplayEggInformation
+        )
+      }
+    </script>
+  </body>
+</html>

index.html

@@ -9,12 +9,15 @@
     <link href="./assets/css/base.css" rel="stylesheet">
   </head>
   <body>
+
     <!-- Navigation -->
-    <div class="container mt-5">
+    <div class="container mt-5 mb-4">
       <div class="row">
         <div class="col fw-bold h3">
-          <i class="bi bi-egg-fill"></i>
-          Incubator
+          <a href="/" class="link-underline-none text-body">
+            <i class="bi bi-egg-fill"></i>
+            Incubator
+          </a>
         </div>
         <div class="col text-end">
           <a href="https://pterodactyl.io" target="_blank" class="link-underline-none link-danger">
@@ -24,8 +27,39 @@
       </div>
     </div>
 
+    <!-- Notification -->
+    <div class="container" id="NotificationDisplay"></div>
+
+    <!-- List -->
+    <div class="container">
+      <div class="row" id="CategoryContainer"></div>
+      <div class="row" id="RepositoryContainer"></div>
+    </div>
+
     <script src="./assets/js/materialstyle.min.js"></script>
     <script src="./assets/js/mdc.ripple.min.js"></script>
     <script src="./assets/js/popper.min.js"></script>
+    <script src="./assets/js/js-yaml.min.js"></script>
+    <script src="./assets/js/base.js"></script>
+    <script src="./assets/js/products.js"></script>
+    <script>
+      var url = new URL(window.location.href)
+
+      // overview
+      if(url.searchParams.get('category') == null) {
+        LoadProducts(
+          "./repository/root.yml",
+          DisplayCategories
+        )
+      }
+
+      // category
+      if(url.searchParams.get('category') != null) {
+        LoadProducts(
+          `./repository/${url.searchParams.get('category')}/category.yml`,
+          DisplayCategoryContent
+        )
+      }
+    </script>
   </body>
 </html>

repository/root.example.yml

@@ -0,0 +1,4 @@
+# Category
+- name: Category
+  description: Description
+  id: category

repository/root.yml

@@ -0,0 +1,9 @@
+# Software
+- name: Software
+  description: Eggs for running all kinds of software.
+  id: software
+
+# Games
+- name: Games
+  description: Pterodactyl eggs for game-servers.
+  id: games

repository/software/5e-tools/README.md

@@ -0,0 +1,4 @@
+# 5e Tools
+> A suite of tools for 5th Edition Dungeons & Dragons players and Dungeon Masters.
+
+This is a self-hosted mirror of https://5e.tools. It will clone a github repository mirror on install and update on container reboot.

repository/software/5e-tools/egg-5e-tools.json

@@ -0,0 +1,42 @@
+{
+  "_comment": "DO NOT EDIT: FILE GENERATED AUTOMATICALLY BY PTERODACTYL PANEL - PTERODACTYL.IO",
+  "meta": {
+      "version": "PTDL_v2",
+      "update_url": null
+  },
+  "exported_at": "2022-11-27T17:50:04+01:00",
+  "name": "5e Tools",
+  "author": "[email protected]",
+  "description": "A suite of tools for 5th Edition Dungeons & Dragons players and Dungeon Masters.",
+  "features": null,
+  "docker_images": {
+      "ghcr.io\/parkervcp\/yolks:debian": "ghcr.io\/parkervcp\/yolks:debian"
+  },
+  "file_denylist": [],
+  "startup": "cd ~\/5e-tools && git pull && cd && .\/caddy run --config ~\/caddy.json",
+  "config": {
+      "files": "{\r\n    \"caddy.json\": {\r\n        \"parser\": \"json\",\r\n        \"find\": {\r\n            \"apps.http.servers.srv0.listen.0\": \":{{server.build.default.port}}\"\r\n        }\r\n    }\r\n}",
+      "startup": "{\r\n    \"done\": \"serving initial configuration\"\r\n}",
+      "logs": "{}",
+      "stop": "^C"
+  },
+  "scripts": {
+      "installation": {
+          "script": "#!\/bin\/bash\r\n# 5e Tools install script\r\n#\r\n# Server Files: \/mnt\/server\r\ndeclare -r DIR=\"\/mnt\/server\"\r\ndeclare -r CADDY_INSTALL_URL=\"https:\/\/caddyserver.com\/api\/download?os=linux&arch=amd64&idempotency=41554620449867\"\r\ndeclare -r LOCAL_REPO=\"${DIR}\/5e-tools\"\r\n\r\ndie() {\r\n  local message=\"$1\"\r\n  printf \"\\n%s\\n\" \"${message}\"\r\n  exit 2\r\n}\r\ncd_error() {\r\n  die \"ERROR: installation encountered an error while trying to change directory\"\r\n}\r\n\r\nmain() {\r\n  local git_origin\r\n  apt update\r\n  apt install -y wget\r\n  cd \"${DIR}\" || cd_error\r\n  printf \"\\nInstalling Caddy...\\n\"\r\n  wget \"${CADDY_INSTALL_URL}\" -O .\/caddy\r\n  chmod +x .\/caddy\r\n  printf \"\\nGenerating Caddy configuration...\\n\"\r\n  # this is a default config\r\n  # key variables, such as the port, will get overwritten with the pterodactyl\r\n  # configuration parser\r\n  cat <<EOF >\"${DIR}\/caddy.json\"\r\n{\r\n  \"apps\": {\r\n    \"http\": {\r\n      \"servers\": {\r\n        \"srv0\": {\r\n          \"listen\": [\r\n            \":8080\"\r\n          ],\r\n          \"routes\": [\r\n            {\r\n              \"handle\": [\r\n                {\r\n                  \"handler\": \"vars\",\r\n                  \"root\": \"\/home\/container\/5e-tools\"\r\n                },\r\n                {\r\n                  \"encodings\": {\r\n                    \"gzip\": {},\r\n                    \"zstd\": {}\r\n                  },\r\n                  \"handler\": \"encode\",\r\n                  \"prefer\": [\r\n                    \"zstd\",\r\n                    \"gzip\"\r\n                  ]\r\n                },\r\n                {\r\n                  \"handler\": \"file_server\"\r\n                }\r\n              ]\r\n            }\r\n          ]\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\nEOF\r\n  git config --global pull.ff only\r\n  if [[ ! -d \"${LOCAL_REPO}\" ]]; then\r\n    printf \"\\nCloning latest version (this may take a while)...\\n\"\r\n    # $REPOSITORY is passed via environment variable from pterodactyl\r\n    git clone \"${REPOSITORY}\" \"${LOCAL_REPO}\"\r\n  else\r\n    cd \"${LOCAL_REPO}\" || cd_error\r\n    git_origin=\"$(git config --get remote.origin.url)\"\r\n    cd \"${DIR}\" || cd_error\r\n    printf \"\\n\\ngit origin is %s\\n\\n\" \"${git_origin}\"\r\n    # if the user hasn't change the repository variable\r\n    if [[ \"${git_origin}\" == \"${REPOSITORY}\" ]]; then\r\n      cd \"${LOCAL_REPO}\" || cd_error\r\n      printf \"\\nRepository already installed - updating...\\n\"\r\n      git fetch --all\r\n      git reset --hard origin\/master\r\n      git pull\r\n      cd \"${DIR}\" || cd_error\r\n    else\r\n      printf \"\\nRepository variable changed since last update\\n...\\n\"\r\n      rm -rf \"${LOCAL_REPO}\"\r\n      git clone \"${REPOSITORY}\" \"${LOCAL_REPO}\"\r\n    fi\r\n  fi\r\n  printf \"\\nInstallation Complete\\n\"\r\n}\r\nmain \"@\"",
+          "container": "ghcr.io\/parkervcp\/installers:debian",
+          "entrypoint": "bash"
+      }
+  },
+  "variables": [
+      {
+          "name": "5e Tools Repository",
+          "description": "Git Repository to use for cloning 5e Tools",
+          "env_variable": "REPOSITORY",
+          "default_value": "https:\/\/github.com\/5etools-mirror-1\/5etools-mirror-1.github.io",
+          "user_viewable": false,
+          "user_editable": false,
+          "rules": "required|url",
+          "field_type": "text"
+      }
+  ]
+}

repository/software/5e-tools/egg.yml

@@ -0,0 +1,4 @@
+name: 5e Tools
+description: A suite of tools for 5th Edition Dungeons & Dragons players and Dungeon Masters.
+readme: true
+download: egg-5e-tools.json