Render team w. js, add basic 404 page, add docker-compose for debug webserver

content/404.md

@@ -0,0 +1,10 @@
+---
+title: Whoops! Page not found
+noindex: true
+layout: page
+---
+
+# Whoops!
+The requested page could not be found.
+
+Please head back to [our homepage](/).

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3'
+
+services:
+  nginx:
+    image: docker.io/nginx
+    volumes:
+      - ./public:/usr/share/nginx/html:ro
+    ports:
+      - 8080:80
+    environment:
+      - NGINX_PORT=80

layouts/shortcodes/team.html

@@ -1,25 +1,3 @@
 <!-- Get data maybe from custom Luckperms API -->
-<div class="flex flex-col">
+<div id="teamContainer" class="flex flex-col"></div>
-  {{ range .Site.Data.team.ranks }}
+<script src="/js/team.js"></script>
-  <h2>{{.name | humanize }}</h2>
-  <div class="flex flex-row flex-wrap ranks -{{.name}}">
-    {{ range .members }}
-    <div id="{{.uid}}" class="flex flex-row playerbox ml-4 pr-5 pt-4">
-      <div class="mx-6">
-        <img src="http://localhost:3000/renders/body/{{.uid}}?overlay&scale=5" alt="{{.name}}" class="playerimage w-16">
-      </div>
-      <div id="description" class="flex flex-col text-center">
-        <p><b>Name: </b>{{.name}}</p>
-        <p><b>Location: </b><img src="https://flagsapi.com/{{.loc}}/flat/32.png" alt=""></p>
-        <p>
-          <b>Languages: </b>
-          {{ range .lang }}
-          <img src="https://flagsapi.com/{{.}}/flat/32.png" alt="">
-          {{ end }}
-        </p>
-      </div>
-    </div>
-    {{ end }}
-  </div>
-  {{ end }}
-</div>

static/js/team.js

@@ -0,0 +1,63 @@
+teamContainer = document.getElementById("teamContainer");
+
+function ucFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+fetch('/json/team.json')
+  .then((response) => response.json())
+  .then((json) => {
+    json.ranks.forEach((rank) => {
+      const rankTitle = document.createElement("h2");
+      rankTitle.innerHTML = ucFirst(rank.name);
+      teamContainer.appendChild(rankTitle);
+
+      const membersContainer = document.createElement("div");
+      membersContainer.classList.add("flex", "flex-row", "ranks", "-"+rank.name+"");
+      rank.members.forEach((member) => {
+        const memberContainer = document.createElement("div");
+        memberContainer.id = member.uid
+        memberContainer.classList.add("flex", "flex-row", "playerbox", "ml-4", "pr-5", "pt-4");
+
+        const memberImageContainer = document.createElement("div");
+        memberImageContainer.classList.add("mx-6");
+
+        const memberImage = document.createElement("img");
+        memberImage.src = "https://crafatar.com/renders/body/"+member.uid+"?overlay&scale=5";
+        memberImage.alt = member.name;
+        memberImage.classList.add("playerimage", "w-16");
+
+        memberImageContainer.appendChild(memberImage);
+
+        const descriptionContainer = document.createElement("div");
+        descriptionContainer.id = "description";
+        descriptionContainer.classList.add("flex", "flex-col", "text-center");
+
+        const memberName = document.createElement("p");
+        memberName.innerHTML = "<b>"+member.name+"</b>"
+
+        const memberLocation = document.createElement("p");
+        memberLocation.innerHTML = "<b>Location: </b><img src='https://flagsapi.com/"+member.loc+"/flat/32.png' alt=''></img>"
+
+        const memberLanguages = document.createElement("p")
+        memberLanguages.innerHTML = "<b>Languages: </b>"
+
+        member.lang.forEach((spokenLang) => {
+          const memberLang = document.createElement("img");
+          memberLang.src = "https://flagsapi.com/"+spokenLang+"/flat/32.png";
+          memberLang.alt = "";
+          memberLanguages.appendChild(memberLang);
+        });
+
+        descriptionContainer.appendChild(memberName);
+        descriptionContainer.appendChild(memberLocation);
+        descriptionContainer.appendChild(memberLanguages);
+
+        memberContainer.appendChild(memberImageContainer);
+        memberContainer.appendChild(descriptionContainer);
+
+        membersContainer.appendChild(memberContainer);
+      });
+      teamContainer.appendChild(membersContainer);
+    });
+  });