Initial project and page setup.

.editorconfig

@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 2

.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true,
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/vue3-recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 13,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "exclude": [
+        "node_modules"
+    ]
+}

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "ent.reslate.xyz",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@dev.sys.reslate.xyz:ydeng/ent.reslate.xyz.git"
+  },
+  "keywords": [],
+  "author": "Reslate",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@vue/compiler-sfc": "^3.2.26",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.6.0",
+    "eslint-plugin-vue": "^8.3.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "html-webpack-plugin": "^5.5.0",
+    "inject-body-webpack-plugin": "^1.3.0",
+    "sass": "^1.48.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "vue-loader": "^17.0.0",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.7.2",
+    "vue": "^3.2.26",
+    "vue-router": "^4.0.12"
+  }
+}

src/App.vue

@@ -0,0 +1,73 @@
+<template>
+  <header>
+    <nav class="navbar">
+      <div class="container-fluid">
+        <a
+          class="navbar-brand"
+          href="/"
+        >RES</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navigation"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <i class="bi bi-list" />
+        </button>
+        <div
+          id="navigation"
+          class="collapse navbar-collapse"
+        >
+          <div class="navbar-nav">
+            <router-link
+              class="nav-link"
+              :to="{name: 'IntroPortal'}"
+              active-class="active"
+            >
+              Info
+            </router-link>
+            <router-link
+              class="nav-link"
+              :to="{name: 'steam'}"
+              active-class="active"
+            >
+              Steam
+            </router-link>
+            <router-link
+              class="nav-link"
+              :to="{name: 'remcs'}"
+              active-class="active"
+            >
+              Minecraft
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <router-view />
+  </main>
+  <footer>
+    <!-- TODO: Proper footer. -->
+  </footer>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        greeting: "Hello World!"
+      };
+    }
+  };
+</script>
+
+<style>
+  .greeting {
+    color: red;
+    font-weight: bold;
+  }
+</style>

src/main.js

@@ -0,0 +1,12 @@
+import "@/styles/global.scss";
+import "bootstrap/dist/js/bootstrap";
+import App from "./App.vue";
+import { createApp } from "vue";
+
+import { router } from "./router/router";
+
+document.body.classList.add("theme-light");
+
+const app = createApp(App);
+app.use(router);
+app.mount("body");

src/pages/MinecraftServer.vue

@@ -0,0 +1,15 @@
+<template>
+  <main>
+    <h1>REMCS</h1>
+  </main>
+</template>
+
+<script>
+export default {
+  
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/OverviewInfo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="sections">
+    <div class="section">
+      <div class="panels">
+        <div
+          id="steam"
+          class="panel"
+        >
+          <div class="contained-title">
+            <h2>Steam System</h2>
+            <hr>
+            <p>Access the RES Steam web interface for establishing connections to the game system and viewing some statistics.</p>
+          </div>
+        </div>
+        <div
+          id="minecraft"
+          class="panel"
+        >
+          <div class="contained-title">
+            <h2>Minecraft Server</h2>
+            <hr>
+            <p> Access the RES Minecraft Server web interface for interacting with a variety of game utilities and information.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="about"
+      class="section"
+    >
+      <div class="contained-title">
+        <h1>What is this?</h1>
+        <p>This is the web interface for Reslate Entertainment Systems. This is <b>not</b> a public service and you may be on this page by mistake. Alternatively, you may be this page completely intentionally!</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/themer";
+
+#steam {
+  background-size: cover;
+  background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/controller.png");
+
+  .contained-title {
+    color: white;
+  }
+}
+
+#minecraft {
+  background-size: cover;
+  background-image: radial-gradient(circle at center, rgba(0,0,0,0.25) 0%, rgba(0, 0, 0, 0.10) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/minecraft.png");
+
+  .contained-title {
+    color: white;
+  }
+}
+
+#about {
+  background-size: cover;
+  background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0,0,0,1) 100%), url("@/assets/images/about.png");
+  .contained-title {
+    color: white;
+  }
+}
+</style>

src/pages/SteamServer.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Steam System</h1>
+</template>
+
+<script>
+export default {
+  
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/router.js

@@ -0,0 +1,7 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import { routes } from "./routes";
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: routes
+});

src/router/routes.js

@@ -0,0 +1,21 @@
+import OverviewInfo from "@/pages/OverviewInfo.vue";
+import MinecraftServer from "@/pages/MinecraftServer.vue";
+import SteamServer from "@/pages/SteamServer.vue";
+
+export const routes = [
+  {
+    path: "/",
+    name: "IntroPortal",
+    component: OverviewInfo,
+  },
+  {
+      path: "/remcs",
+      name: "remcs",
+      component: MinecraftServer,
+  },
+  {
+    path: "/steam",
+    name: "steam",
+    component: SteamServer,
+  }
+];

src/styles/_themer.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "variables";
+
+// Applied Dmitry Borody's method for theming with modifications. - https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
+@mixin themed($themes: variables.$themes) {
+    @each $theme, $vars in $themes {
+        .theme-#{$theme} &, &.theme-#{$theme} {
+            $theme-values: $vars !global;
+            @content;
+            $theme-values: null !global;
+        }
+    }
+}
+
+@function color-of($type) {
+    @return map.get($theme-values, $type);
+}

src/styles/_variables.scss

@@ -0,0 +1,14 @@
+$themes: (
+  "light": (
+    "background": #ebf0ef,
+    "navbar": #fef6ff,
+    "navbar-brand": #8a2be2,
+    "navbar-link": #684eff,
+    "navbar-active": #3f28c0,
+    "main": #8a2be2,
+    "footer": #e2762b,
+    "text": #1a1a1a,
+    "special": #94e22b,
+    "muted": #797a7e,
+  ),
+);

src/styles/dependencies.scss

@@ -0,0 +1,2 @@
+@use "/node_modules/bootstrap/scss/bootstrap";
+@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?

src/styles/global.scss

@@ -0,0 +1,95 @@
+@use "themer";
+@use "sass:color";
+@use "/node_modules/bootstrap/scss/bootstrap";
+@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?
+
+header > nav {
+  @extend .navbar;
+  @extend .navbar-expand-lg;
+  @extend .border-bottom;
+
+  position: fixed !important;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+
+  @include themer.themed {
+    background-color: themer.color-of("navbar");
+  }
+
+  .navbar-brand {
+    @include themer.themed {
+      color: themer.color-of("navbar-brand");
+    }
+  }
+
+  .nav-link {
+    @include themer.themed {
+      color: themer.color-of("navbar-link");
+    }
+    &.active {
+      @include themer.themed {
+        color: themer.color-of("navbar-active");
+      }
+    }
+  }
+
+  .navbar-toggler {
+    @include themer.themed {
+      color: color.invert(themer.color-of("navbar"), 100%);
+    }
+  }
+}
+
+.sections {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+
+  .section {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.contained-title {
+  text-align: center;
+  max-width: 50%;
+}
+
+.panels {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  width: 100%;
+  .panel {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  @include themer.themed {
+    color: themer.color-of("text");
+  }
+}

webpack.common.js

@@ -0,0 +1,63 @@
+const path = require("path");
+const { VueLoaderPlugin } = require("vue-loader");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    entry: path.resolve("./src/main.js"),
+    output: {
+        filename: "[name].bundle.js",
+        path: path.resolve("./dist"),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: "vue-loader",
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    "vue-style-loader",
+                    "css-loader",
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            sassOptions: {
+                            }
+                        }
+                    },
+                ],
+            },
+            {
+                test: /\.js$/,
+                exclude: file => (
+                    /node_modules/.test(file) &&
+                    !/\.vue\.js/.test(file)
+                ),
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: ["@babel/preset-env"]
+                    }
+                }
+            },
+            {
+              test: /\.(woff|woff2|eot|ttf|otf)$/i,
+              type: "asset/resource",
+            },
+        ]
+    },
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "src/")
+        },
+    },
+    plugins: [
+        new HtmlWebpackPlugin(),
+        new VueLoaderPlugin(),
+    ]
+};

webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+
+let config = {
+    mode: "development",
+};
+
+module.exports = merge(common, config);

webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+
+let config = {
+    mode: "production",
+};
+
+module.exports = merge(common, config);