from Wiki to Documentation

assets/system/main.css

@@ -186,8 +186,8 @@ body {
   box-sizing: border-box;
   font-family: var(--font-families);
   font-size: 18px;
-  border: 2px var(--general-fg) solid;
-  background-color: var(--general-bg);
+  border: 2px var(--tag-fg) solid;
+  background-color: var(--main-fg);
   color: var(--tag-fg);
   border-radius: 8px 0 0 8px;
 }
@@ -211,8 +211,8 @@ body {
   box-sizing: border-box;
   font-family: var(--font-families);
   font-size: 18px;
-  border: 2px var(--general-fg) solid;
-  background-color: var(--general-bg);
+  border: 2px var(--tag-fg) solid;
+  background-color: var(--main-fg);
   color: var(--tag-fg);
   border-radius: 8px 0 0 8px;
   position: absolute;
@@ -227,9 +227,9 @@ body {
   box-sizing: border-box;
   font-size: 18px;
   border-radius: 0 8px 8px 0;
-  color: var(--general-bg);
-  background-color: var(--general-bg);
-  border: 2px var(--general-fg) solid;
+  color: var(--main-fg);
+  border: 2px var(--tag-fg) solid;
+  background-color: var(--main-fg);
   position: absolute;
   right: 8px;
   cursor: default;
@@ -246,7 +246,7 @@ body {
 }
 
 #sbheader input::placeholder {
-  color: var(--general-fg);
+  color: var(--secondary);
 }
 
 .menubutton {
@@ -295,11 +295,17 @@ body {
     margin-top: 8px;
   }
 }
+.showonmobile {
+  display: none;
+}
 
 @media only screen and (max-width: 800px) {
   .hideonmobile {
     display: none;
   }
+  .showonmobile {
+    display: initial;
+  }
 
   #sidebar {
     width: 100vw !important;

assets/system/page.css

@@ -17,15 +17,20 @@
   margin: 16px 0;
 }
 #page p {
+  display: inline-block;
   font-size: 16px;
   width: 100%;
   margin: 0;
 }
 #page small {
+  display: inline-block;
   font-size: 12px;
   width: 100%;
   margin: 0;
 }
+#page > small {
+  margin-bottom: 16px;
+}
 #page a {
   color: var(--main);
 }
@@ -34,3 +39,11 @@
   padding: 2px;
   border-radius: 4px;
 }
+#page img {
+  display: block;
+  max-width: 100%;
+  max-height: 500px;
+  object-fit: contain;
+  object-position: left;
+  margin-top: 16px;
+}

index.js

@@ -15,7 +15,7 @@ var getPages = () => {
   __pg.tags["Meta"] = templateTag("//","#808080");
   __pg.tags["404"] = templateTag("404","#008000");
   __pg.tags["500"] = templateTag("500","#FF0080");
-  __pg.wikiData.fullName = __pg.wikiData.name.join(" ");
+  __pg.documentationData.fullName = __pg.documentationData.name.join(" ");
   pages = __pg;
 }
 setInterval(getPages, 10000);
@@ -32,10 +32,10 @@ var getPage = (page) => {
   return templateIndex(page, pages.pages[page]);
 }
 
-app.get('/', (_,r) => r.redirect("/wiki/Welcome"));
-app.get('/wiki', (_,r) => r.redirect("/wiki/Welcome"));
+app.get('/', (_,r) => r.redirect("/page/Welcome"));
+app.get('/page', (_,r) => r.redirect("/page/Welcome"));
 
-app.get('/wiki/:page', function(req, res, next) {
+app.get('/page/:page', function(req, res, next) {
   var page = getPage(req.params.page);
   switch (page.type) {
     case "invaildrequest":

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "avalon-wiki-engine",
+  "name": "avalon-documentation-engine",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

views/articles/Installation.ejs

@@ -1,16 +1,37 @@
-<p>Welcome to the AWE installation guide!</p>
-<p>This guide will assist you while installing the Avalon Wiki Engine on a local server.</p>
+<p>Welcome to the ADE installation guide!</p>
+<p>This guide will assist you while installing the Avalon Documentation Engine on a local server.</p>
 <p>Make sure you have your 80 port open on this server.</p>
 <%- include("blocks/MessageBox.ejs", {
   title: "Docker support",
-  content: "This guide will not contain resources for installing AWE on Docker. You are purely on your own for that."
+  content: "This guide will not contain resources for installing ADE on Docker. You are purely on your own for that."
 }) %>
 <h1>Installing locally or on a Node server</h1>
-<p>If you just want AWE for your local network, or on your own real server.</p>
+<p>If you just want ADE for your local network, or on your own real server.</p>
+<h2>Steps</h2>
+<h3>Step 1 - Downloading the repository from GitHub</h3>
+<p>First, go to any folder you would like to keep ADE in.</p>
+<p>Then, go to <a href="https://github.com/MeowcaTheoRange/AvalonDocumentationEngine" target="_blank">the GitHub repository for ADE</a> and download the ZIP.</p>
+<img src="/assets/github1.png" />
+<small>Selecting Code > Download ZIP on the GitHub UI.</small>
+<p>Then, extract the ZIP into the folder.</p>
+<img src="/assets/extract1.png" />
+<small>Dragging the ZIP contents into a folder.</small>
+<%- include("blocks/MessageBox.ejs", {
+  title: "HOLD ON...",
+  content: "Make sure to read the license! This information is important for defining who and what can use the documentation contents.<br />Alternatively, make a \"License\" article within the Documentation to define your own license for the content.<br />Instructions on how to do this can be found <a href=\"/page/Licensing_documentation_content\">here.</a><img src='/assets/makesure1.png' />"
+}) %>
+<h3>Step 2 - Install dependencies</h3>
+<p>Installing dependencies for the Avalon Documentation Engine is super easy. Simply open a Node terminal in your Documentation folder.</p>
+<img src="/assets/terminal1.png" />
+<small>A terminal, which has the documentation as its' current directory.</small>
+<p>Then, type <code>npm install</code> (or <code>npm i</code>) into the terminal.</p>
+<img src="/assets/npmi1.png" />
+<small>A terminal, which has the output of the aforementioned npm command.</small>
+<p><code>package-lock.json</code> and <code>node-modules/</code> should appear in the directory.</p>
 <h1>Installing on Replit</h1>
-<p>If you want quickly get AWE up and running.</p>
+<p>If you want quickly get ADE up and running.</p>
 <%- include("blocks/MessageBox.ejs", {
   title: "Cycles required",
-  content: "In order to use AWE on Replit, you will have to use Cycles to make your AWE Repl Always On.",
-  notice: "2 cycles/day for Always On"
+  content: "In order to use ADE on Replit, you will have to use Cycles to make your ADE Repl Always On.",
+  notice: "2 cycles/day for Always On - recommended amount is 62, for at least a month"
 }) %>

views/articles/Searching.ejs

@@ -1,4 +1,4 @@
-<p>Searching in the Avalon Wiki Engine is possible.</p>
+<p>Searching in the Avalon Documentation Engine is possible.</p>
 <p>Use the searchbar element on the top-left to type text in and look for articles using a filter.</p>
 <h1>Search methods</h1>
 <h2>Searching by name</h2>

views/articles/Welcome.ejs

@@ -1,11 +1,11 @@
 <%- include("blocks/MessageBox.ejs", {
   title: "Welcome!",
-  content: "Welcome to the " + allPages.wikiData.fullName + " development resource!"
+  content: "Welcome to the " + allPages.documentationData.fullName + " development resource!"
 }) %>
-<h1><%- allPages.wikiData.fullName %></h1>
-<p>The Avalon Wiki Engine (also known as AWE) is a free and open-source piece of software, that lets site administrators manage content in a simple format.</p>
+<h1><%- allPages.documentationData.fullName %></h1>
+<p>The Avalon Documentation Engine (also known as ADE) is a free and open-source piece of software, that lets site administrators manage content in a simple format.</p>
 <h2>About</h2>
-<p>The Avalon Wiki Engine is a bit tacky, but it functions well, allowing end users to easily navigate content, with fancy tricks like searching - by name or by tags.</p>
+<p>The Avalon Documentation Engine is a bit tacky, but it functions well, allowing end users to easily navigate content, with fancy tricks like searching - by name or by tags.</p>
 <p>Formatting is based on individual EJS files - see <a href="https://ejs.co">ejs.co</a> for more info on EJS templating.</p>
 <h2>Installation and Source</h2>
-<p>An installation guide can be found at <a href="/wiki/Installation">Installation</a>.</p>
+<p>An installation guide can be found at <a href="/page/Installation">Installation</a>.</p>

views/articles/blocks/LunchBox.ejs

@@ -15,7 +15,7 @@ gap:8px;">
     <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>
+    <small><%- locals.attribution ?? "<a href='https://en.documentationpedia.org/page/John_Doe'>John Doe on Documentationpedia</a>" %></small>
   </div>
   <div style="display: flex;flex-direction: column;gap:8px;padding: 16px;">
     <h3 style="margin:0;">About</h3>

views/index.ejs

@@ -17,7 +17,19 @@
   <body>
     <div id="header">
       <button class="menubutton material-symbols-outlined" onclick="toggleSidebar()">toc</button>
-      <span class="title"><%- allPages.wikiData.name[0] %> <span class="hideonmobile"><%- allPages.wikiData.name[1] %></span></span>
+      <span class="title">
+        <span class="<%- allPages.documentationData.shortName.length !== 0 ? "hideonmobile" : "" %>">
+          <%- allPages.documentationData.name[0] ?? "No-name" %> 
+          <span class="hideonmobile">
+            <%- allPages.documentationData.name[1] ?? "" %>
+          </span> 
+          <%- allPages.documentationData.name[2] ?? "" %> 
+          <span class="hideonmobile">
+            <%- allPages.documentationData.name[3] ?? "" %>
+          </span>
+        </span>
+        <span class="<%- allPages.documentationData.shortName.length !== 0 ? "showonmobile" : "" %>"><%- allPages.documentationData.shortName ?? "" %></span>
+      </span>
     </div>
     <div id="body">
       <div id="sidebar">

views/pages.json

@@ -1,9 +1,11 @@
 {
-  "wikiData": {
+  "documentationData": {
     "name": [
       "Avalon",
-      "Wiki Engine"
-    ]
+      "Documentation Engine",
+      "Help Desk"
+    ],
+    "shortName": "ADE Help Desk"
   },
   "tags": {
     "Accessibility": {

views/system/500.ejs

@@ -1,4 +1,4 @@
 There was an internal server error while rendering this article.<br />
 Possibly, this article's page <b>index</b> exists, but it is redirecting to or referencing a non-existent article.<br />
 <br />
-If possible, please notify the wiki managers.
+If possible, please notify the documentation managers.

views/system/fullwidth.ejs

@@ -1,5 +1,5 @@
 <div class="fullwidthlink <%- redirect ? "showsearch" : "" %>" style="background-color: <%- data.color ?? "var(--main-fg)" %>;">
-  <a class="linkname" href="/wiki/<%- name %>">
+  <a class="linkname" href="/page/<%- name %>">
     <%- name.replace(/_/g, " ") %> <%- redirect ? (">> " + data.replace(/_/g, " ")) : "" %>
   </a>
   <% if (!redirect) { %>