Updates

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

assets/Files/theme.css

@@ -0,0 +1,38 @@
+html {
+  --main: #35FF00;
+  --main-fg: #0D4F00;
+  --secondary: #2ACC00;
+  --general-bg: #4F4F4F;
+  --general-fg: #808080;
+  --bg-transparency: #4F4F4F80;
+  --background-image: url(/assets/goo.png);
+  --page-bg: #000000AA;
+  --page-fg: #D8FFCC;
+  --tag-fg: #FFFFFF;
+}
+
+html.Meta {
+  --main: #cccccc;
+  --main-fg: #202020;
+  --secondary: #808080;
+  --general-bg: #4F4F4F;
+  --general-fg: #808080;
+  --bg-transparency: #4F4F4F80;
+  --background-image: none;
+  --page-bg: #000000AA;
+  --page-fg: #ffffff;
+  --tag-fg: #FFFFFF;
+}
+
+html.MikeyLore {
+  --main: #0080ff;
+  --main-fg: #002040;
+  --secondary: #004080;
+  --general-bg: #4F4F4F;
+  --general-fg: #808080;
+  --bg-transparency: #4F4F4F80;
+  --background-image: none;
+  --page-bg: #000000AA;
+  --page-fg: #ccddff;
+  --tag-fg: #FFFFFF;
+}

assets/system/main.css

@@ -0,0 +1,327 @@
+body, html {
+  min-width: 100vw;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: "JetBrains Mono", monospace;
+  overflow: hidden;
+  font-size: 18px;
+}
+
+body {
+  display: grid;
+  grid-template-rows: 48px calc(100vh - 48px);
+}
+
+#header {
+  background-color: var(--main);
+  color: var(--main-fg);
+  font-weight: bold;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px;
+  gap: 16px;
+}
+
+#header .menubutton {
+  background-color: var(--main);
+  color: var(--main-fg);
+  font-weight: bold;
+  border: none;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 18px;
+  height: 32px;
+  cursor: pointer;
+}
+
+#body {
+  background-color: var(--general-bg);
+  display: grid;
+  grid-template-columns: 400px auto;
+  grid-template-rows: 100%;
+  height: 100%;
+}
+
+#body #sidebar {
+  background-color: var(--secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  padding: 8px 0;
+  gap: 8px;
+  height: 100%;
+  width: 400px;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+#body #sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+#body #sidebar #searchNodes {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  gap: 8px;
+}
+
+#sbheader, #inheader {
+  background-color: var(--main);
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+}
+
+#inheader {
+  top: 8px;
+}
+
+#inheader #headertext {
+  width: 100%;
+}
+
+#index {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0 0 0;
+  gap: 8px;
+  overflow: auto;
+  height: 100%;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  background-image: linear-gradient(0deg, var(--bg-transparency) 0%, var(--bg-transparency) 100%), var(--background-image);
+  background-repeat: repeat-y;
+}
+
+#index::-webkit-scrollbar {
+  display: none;
+}
+
+#page {
+  display: inline-block;
+  margin: 8px 64px;
+  background-color: var(--page-bg);
+  height: max-content;
+  overflow-y: visible;
+  color: var(--page-fg);
+  padding: 16px;
+  transition: margin 0.25s;
+}
+
+.fullwidthlink {
+  background-color: var(--main);
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+  box-sizing: border-box;
+  color: var(--page-fg);
+  font-weight: bold;
+  height: 48px;
+}
+
+.fullwidthlink .linkname {
+  display: inline-block;
+  text-decoration: none;
+  color: var(--page-fg);
+  height: 100%;
+  width: 100%;
+  line-height: 32px;
+}
+
+.taglist {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.tagLabel {
+  display: inline-block;
+  width: 48px;
+  height: 32px;
+  text-align: center;
+  border-radius: 32px;
+  font-weight: bold;
+  border: 2px solid var(--tag-fg);
+  color: var(--tag-fg);
+  font-size: 18px;
+  padding: 0;
+  font-family: "JetBrains Mono", monospace;
+  user-select: none;
+  cursor: pointer;
+}
+
+#sidebar .showsearch {
+  display: none;
+}
+
+#sidebar .isSearching .showsearch {
+  display: flex;
+}
+
+#sbheader input {
+  width: calc(100% - 30px);
+  height: 32px;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 18px;
+  border: 2px var(--general-fg) solid;
+  background-color: var(--general-bg);
+  color: var(--tag-fg);
+  border-radius: 8px 0 0 8px;
+}
+
+#sbheader input:focus, #sbheader .overinput:focus, #sbheader .clearinput:focus {
+  outline: 2px solid white;
+}
+
+#sbheader input:focus ~ .clearinput, #sbheader .overinput:focus ~ .clearinput {
+  outline: 2px solid white;
+}
+
+#sbheader .overinput {
+  width: calc(400px - 46px);
+  display: none;
+  height: 32px;
+  padding: 0 8px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 18px;
+  border: 2px var(--general-fg) solid;
+  background-color: var(--general-bg);
+  color: var(--tag-fg);
+  border-radius: 8px 0 0 8px;
+  position: absolute;
+  cursor: text;
+}
+
+#sbheader .clearinput {
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 18px;
+  border-radius: 0 8px 8px 0;
+  color: var(--general-bg);
+  background-color: var(--general-bg);
+  border: 2px var(--general-fg) solid;
+  position: absolute;
+  right: 8px;
+  cursor: default;
+  transition: color 0.25s;
+}
+
+#sbheader.isSearching .clearinput {
+  cursor: pointer;
+  color: var(--tag-fg);
+}
+
+#sbheader #searchbar:focus ~ .overinput {
+  display: none !important;
+}
+
+#sbheader input::placeholder {
+  color: var(--general-fg);
+}
+
+.menubutton {
+  display: none;
+}
+
+#sidebar {
+  position:relative;
+  left: 0;
+  transition: left 0.25s, width 0.25s;
+}
+#sidebar .overinput {
+  transition: left 0.25s, width 0.25s;
+}
+#body {
+  transition: grid-template-columns 0.25s;
+}
+
+@media only screen and (max-width: 1000px) {
+  .menubutton {
+    display: inline-block;
+  }
+
+  #sidebar {
+    left: -800px;
+    width: 300px !important;
+    z-index: 9;
+  }
+
+  #sbheader .overinput {
+    width: calc(300px - 46px) !important;
+  }
+
+  #body {
+    grid-template-columns: 0px auto;
+  }
+
+  #body.sidebarOpen {
+    grid-template-columns: 300px auto;
+  }
+  #body.sidebarOpen #sidebar {
+    position:relative;
+    left: 0;
+  }
+  #page {
+    margin: 0 8px;
+    margin-top: 8px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .hideonmobile {
+    display: none;
+  }
+
+  #sidebar {
+    left: -800px !important;
+    width: 100vw !important;
+  }
+
+  #sidebar .overinput {
+    width: calc(100vw - 46px) !important;
+  }
+
+  #body {
+    grid-template-columns: 0px auto;
+  }
+
+  #body.sidebarOpen {
+    grid-template-columns: 0px auto;
+  }
+
+  #sidebar, #sidebar .overinput {
+    transition: left 0.25s, width 0s !important;
+  }
+
+  #body.sidebarOpen #sidebar {
+    left: 0 !important;
+  }
+}

assets/system/page.css

@@ -0,0 +1,29 @@
+#page h1, #page h2 {
+  width: 100%;
+  border-bottom: 2px solid var(--main);
+  color: var(--main);
+  font-size: 32px;
+  margin: 16px 0;
+}
+#page h2 {
+  font-size: 28px;
+}
+#page h3 {
+  width: 100%;
+  color: var(--main);
+  font-size: 24px;
+  margin: 16px 0;
+}
+#page p {
+  font-size: 16px;
+  width: 100%;
+  margin: 0;
+}
+#page small {
+  font-size: 12px;
+  width: 100%;
+  margin: 0;
+}
+#page a {
+  color: var(--main);
+}

assets/system/searchNodes.js

@@ -0,0 +1,94 @@
+var page = document.getElementById("page");
+var search = document.getElementById("searchbar");
+var overinput = document.querySelector(".overinput");
+var clearinput = document.querySelector(".clearinput");
+var searchNodes = [...document.getElementById("searchNodes").children];
+var searchNodesCont = document.getElementById("searchNodes");
+var sbheader = document.getElementById("sbheader");
+
+search.addEventListener('input', onsearch);
+
+function onsearch () {
+  search.value = search.value.replace(/Redirects to /i, "|=> " );
+  search.value = search.value.replace(/Redirects /i, "|=> ");
+  if (sessionStorage.getItem("searchvalue") === "()" && search.value === ")")
+    search.value = "";
+  if (sessionStorage.getItem("searchvalue") === "()" && search.value === "(")
+    search.value = "";
+  if (search.value === "(" || search.value.startsWith("Tagged ")) {
+    search.value = "()";
+    search.setSelectionRange(1, 1);
+    search.focus();
+  }
+
+  if (search.value != "") {
+    searchNodesCont.classList.add("isSearching");
+    sbheader.classList.add("isSearching");
+  } else {
+    searchNodesCont.classList.remove("isSearching");
+    sbheader.classList.remove("isSearching");
+    searchNodes.forEach(child => child.style.display = "")
+  }
+
+  var value = search.value.replace(/>/g, "&gt;").replace(/</g, "&lt;");
+  if (search.value.startsWith("|=>")) {
+    overinput.style.display = "inline-block";
+    overinput.innerHTML = "Redirects " + (search.value.length > 4 && search.value !== "|=> " ? search.value.replace(/^\|\=\>/, "to ") : "");
+    searchNodes.forEach(child => {
+      child.style.display = "none";
+      var name = child.querySelector(".linkname");
+      if (name.innerHTML.toLowerCase().includes(value.toLowerCase()))
+        child.style.display = "";
+    });
+  } else if (/^\(/.test(search.value) && /\)$/.test(search.value)) {
+    overinput.style.display = "inline-block";
+    overinput.innerHTML = "Tagged " + (search.value !== "()" ? search.value.replace(/^\(/, "with ").replace(/\)$/, "") : "");
+    var valstripped = search.value.replace(/^\(/, "").replace(/\)$/, "").toLowerCase();
+    searchNodes.forEach(child => {
+      child.style.display = "none";
+      var tags = child.querySelectorAll(".tagLabel");
+      tags.forEach(tag => {
+        if (tag.getAttribute("title").toLowerCase().includes(valstripped))
+          child.style.display = "";
+        else if (tag.innerHTML.toLowerCase().includes(valstripped))
+          child.style.display = "";
+      })
+    });
+  } else {
+    overinput.style.display = "none";
+    searchNodes.forEach(child => {
+      child.style.display = "none";
+      var name = child.querySelector(".linkname");
+      if (name.innerHTML.toLowerCase().includes(value.toLowerCase()))
+        child.style.display = "";
+    });
+  }
+  sessionStorage.setItem("searchvalue", search.value); 
+};
+
+function toggleSidebar() {
+  document.querySelector('#body').classList.toggle('sidebarOpen');
+  sessionStorage.setItem("sidebar", document.querySelector("#body").className);
+}
+
+function opensearch(sq) {
+  search.value = sq;
+  onsearch();
+  document.querySelector('#body').classList.add('sidebarOpen');
+  sessionStorage.setItem("sidebar", document.querySelector("#body").className);
+}
+
+if (window.innerWidth > 800) {
+  document.querySelector("#body").className = sessionStorage.getItem("sidebar");
+}
+search.value = sessionStorage.getItem("searchvalue");
+onsearch();
+
+overinput.addEventListener("click", () => {
+  search.focus();
+})
+
+clearinput.addEventListener("click", () => {
+  search.value = "";
+  onsearch();
+})

index.js

@@ -0,0 +1,39 @@
+var express = require('express');
+var path = require("path");
+var fs = require("fs");
+var app = express();
+
+app.set('view engine', 'ejs');
+app.use("/a", express.static(path.join(__dirname, 'assets')));
+app.use("/assets", express.static(path.join(__dirname, 'assets', "Files")));
+
+var getPages = () => JSON.parse(fs.readFileSync(path.join(__dirname, "views", "pages.json"), 'utf8'));
+var getPage = (page) => {
+  var pageindexes = getPages();
+  console.log(pageindexes.pages, page, pageindexes.pages[page]);
+  if (pageindexes.pages[page].link.redirect)
+    return getPage(pageindexes.pages[page].link.location);
+  return {
+    name: page,
+    page: pageindexes.pages[page],
+    all: pageindexes
+  };
+}
+
+app.get('/wiki/:page', function(req, res, next) {
+  try {
+    if (!getPages().pages[req.params.page]) next();
+    var page = getPage(req.params.page);
+    res.render('index', page);
+  } catch (error) {
+    next(error);
+  }
+});
+
+app.use(function(req,res){
+  res.status(404).render('index', getPage("404_Not_Found"));
+});
+
+app.listen(8080, () => {
+  console.log('Server is listening on port 8080');
+});

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "avaloniandistricts",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.8",
+    "express": "^4.18.2"
+  }
+}

views/articles/404.ejs

@@ -0,0 +1 @@
+This article was not found.

views/articles/Sandbox.ejs

@@ -0,0 +1,24 @@
+<%- include("blocks/MessageBox.ejs", {
+  title: "Hello, world!",
+  content: "Sex is real and it's a danger to society",
+  notice: "This is a small notice."
+}) %>
+<%- include("blocks/MessageBox.ejs") %>
+<h1>Header 1</h1>
+<p>This is a paragraph. Hello!</p>
+<h2>Header 2</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti cumque aut, natus labore id voluptate quaerat hic enim tempore est sed sunt, sint praesentium culpa illum, ea autem modi! Expedita!</p>
+<h3>Header 3</h3>
+<small>Psssst! I'm small!</small>
+<%- include("blocks/LunchBox.ejs", {
+  width: "200",
+  imageURL: "/assets/ramin1.png",
+  fullName: "Ramin",
+  pronouns: "she/her, they/them",
+  birthday: "April 13, 2026",
+  gender: "Female",
+  preference: "Pansexual",
+  attribution: "Avalonian Vineyards",
+  description: `Ramin is a FUCK.`
+}) %>
+<%- include("blocks/LunchBox.ejs") %>

views/articles/Welcome.ejs

@@ -0,0 +1,10 @@
+<%- include("blocks/MessageBox.ejs", {
+  title: "Welcome!",
+  content: "Welcome to the Avalonian Districts Wiki!"
+}) %>
+<h1>Avalonian Districts Wiki</h1>
+<p>This wiki is dedicated to making a public resource of all <a href="#" onclick="opensearch('(MikeyLore)')">MikeyLore</a> and <a href="#" onclick="opensearch('(Avalonian_Vineyards)')">Avalonian Vineyards</a> content.</p>
+<h2>About</h2>
+<p>The wiki is run by <a href="https://twitter.com/Dizzy_Miles_">MikeyHX</a> and <a href="https://twitter.com/RaminDetergent">RaminDetergent</a>, and so is the lore. We are the admins of this page, and unlike normal wikis, this wiki is only editable through the source code. Feel free to look through it, I guess?</p>
+<h1>The Avalon Wiki Engine</h1>
+<p>Shortcuts for the Avalon Wiki Engine can be found here.</p>

views/articles/blocks/LunchBox.ejs

@@ -0,0 +1,24 @@
+<div class="MessageBox" style="margin: 8px 0;
+background-color:var(--main-fg);
+border-radius:4px;
+border:2px solid var(--main);
+padding:16px;
+display: grid;
+grid-template-columns: <%- locals.width ?? "200" %>px auto;
+grid-template-rows: max-content max-content;
+gap:8px;">
+  <div style="grid-row: 1 / 3;aspect-ratio: 2/3;">
+    <img src="<%- locals.imageURL ?? "" %>" width="<%- locals.width ?? "200" %>" />
+  </div>
+  <div style="display: flex;flex-direction: column;gap:8px;padding: 16px;">
+    <h2 style="margin:0;"><%- locals.fullName ?? "Jane Doe" %></h2>
+    <small><%- locals.pronouns ?? "she/her" %></small>
+    <p><%- locals.birthday ?? "January 1, 1970" %></p>
+    <p><%- locals.gender ?? "Female" %>, <%- locals.preference ?? "Asexual (deceased)" %></p>
+    <small><%- locals.attribution ?? "<a href='https://en.wikipedia.org/wiki/John_Doe'>John Doe on Wikipedia</a>" %></small>
+  </div>
+  <div style="display: flex;flex-direction: column;gap:8px;padding: 16px;">
+    <h3 style="margin:0;">About</h3>
+    <p><%- locals.description ?? `John Doe (male) and Jane Doe (female) are multiple-use placeholder names that are used when the true name of a person is unknown or is being intentionally concealed. In the context of law enforcement in the United States, such names are often used to refer to a corpse whose identity is unknown or unconfirmed. These names are also often used to refer to a hypothetical "everyman" in other contexts, in a manner similar to John Q. Public or "Joe Public". There are many variants to the above names, including John Roe, Richard Roe, Jane Roe, Baby Doe, and Janie Doe/Johnny Doe (for children).` %></p>
+  </div>
+</div>

views/articles/blocks/MessageBox.ejs

@@ -0,0 +1,5 @@
+<div class="MessageBox" style="margin: 8px 0;background-color:var(--main-fg);border-radius:4px;border:2px solid var(--main);padding:16px;display: flex;flex-direction: column;gap:8px;">
+  <h3 style="margin:0;"><%- locals.title ?? "" %></h3>
+  <p><%- locals.content ?? "" %></p>
+  <small><%- locals.notice ?? "" %></small>
+</div>

views/index.ejs

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="<%- page.tags.join(' ') %>">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/a/system/main.css">
+    <link rel="stylesheet" href="/a/system/page.css">
+    <link rel="stylesheet" href="/assets/theme.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;400;600&display=swap" rel="stylesheet"> 
+  </head>
+  <body>
+    <div id="header">
+      <button class="menubutton" onclick="toggleSidebar()">&lt;|</button>
+      <span class="title">Avalonian Districts <span class="hideonmobile">Wiki</span></span>
+    </div>
+    <div id="body">
+      <div id="sidebar">
+        <div id="sbheader">
+          <input type="text" id="searchbar" placeholder="Type here to search..." />
+          <button class="overinput"></button>
+          <button class="clearinput">X</button>
+        </div>
+        <div id="searchNodes">
+        <% Object.entries(all.pages).forEach(function([namey, jsony]){ %>
+          <% if (!jsony.hidden) { %>
+            <%- include('system/fullwidth', {namey,jsony,tags:all.tags}); %>
+          <% } %>
+        <% }); %>
+        </div>
+      </div>
+      <div id="index">
+        <div id="inheader">
+          <span id="headertext"><%- name.replace(/_/g, " ") %></span>
+          <div class="taglist">
+          <% page.tags.forEach(function(tagname){ %>
+            <%- include("system/tag", {
+              implcl: locals,
+              tagname
+            }) %> 
+          <% }); %>
+          </div>
+        </div>
+        <div id="page">
+          <%- include(page.link.location); %>
+        </div>
+      </div>
+    </div>
+    <script src="/a/system/searchNodes.js"></script>
+  </body>
+</html>

views/pages.json

@@ -0,0 +1,61 @@
+{
+  "tags": {
+    "404": {
+      "shortname": "404",
+      "color": "#008000"
+    },
+    "MikeyLore": {
+      "shortname": "MLR",
+      "color": "#0080ff"
+    },
+    "Avalonian_Vineyards": {
+      "shortname": "AVY",
+      "color": "#35ff00"
+    },
+    "Avalonian_Districts": {
+      "shortname": "M+A",
+      "color": "#1BC080"
+    },
+    "Meta": {
+      "shortname": "//",
+      "color": "#808080"
+    }
+  },
+  "pages": {
+    "Welcome!": {
+      "tags": [
+        "Avalonian_Districts", 
+        "Meta"
+      ],
+      "color": "#808080",
+      "link": {
+        "redirect": false,
+        "location": "articles/Welcome"
+      }
+    },
+    "Sandbox": {
+      "tags": [
+        "Avalonian_Districts", 
+        "Meta"
+      ],
+      "hidden": true,
+      "color": "#808080",
+      "link": {
+        "redirect": false,
+        "location": "articles/Sandbox"
+      }
+    },
+    "404_Not_Found": {
+      "tags": [
+        "Meta",
+        "404"
+      ],
+      "hidden": true,
+      "color": "#000000",
+      "link": {
+        "redirect": false,
+        "location": "articles/404"
+      }
+    }
+  }
+}

views/system/fullwidth.ejs

@@ -0,0 +1,15 @@
+<div class="fullwidthlink <%- jsony.link.redirect ? "showsearch" : "" %>" style="background-color: <%- jsony.color ?? "var(--bg)" %>;">
+  <% if (!jsony.link.redirect) { %>
+  <div class="taglist">
+    <% jsony.tags.forEach(function(tagname){ %>
+      <%- include("tag", {
+        implcl: locals,
+        tagname
+      }) %>
+    <% }); %>
+  </div>
+  <% } %>
+  <a class="linkname" href="/wiki/<%- namey %>">
+    <%- namey.replace(/_/g, " ") %> <%- jsony.link.redirect ? ("|=> " + jsony.link.location.replace(/_/g, " ")) : "" %>
+  </a>
+</div>

views/system/tag.ejs

@@ -0,0 +1,3 @@
+<button class="tagLabel" title="<%- tagname %>" onclick="opensearch('(<%- tagname %>)')" style="background-color: <%- implcl.all.tags[tagname].color %>;">
+  <%- implcl.all.tags[tagname].shortname %>
+</button>