updates

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended"],
+  parserOptions: {
+    parser: "babel-eslint"
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+  }
+}

.gitignore

@@ -1,7 +1,9 @@
-# Node Modules
+.DS_Store
 node_modules
+/dist
 
-# Local ENV files
+
+# local env files
 .env.local
 .env.*.local
 
@@ -11,7 +13,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-# Editor Directories/Files
+# Editor directories and files
 .idea
 .vscode
 *.suo
@@ -19,10 +21,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-.DS_Store
-
-yarn.lock
-
-# Custom
-.env
-config/config.json

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+dist
+public
+patches

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "always"
+}

README.md

@@ -1,24 +1,29 @@
 # ui
 
 ## Project setup
+
 ```
 yarn install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 yarn serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 yarn build
 ```
 
 ### Lints and fixes files
+
 ```
 yarn lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+}

package.json

@@ -1,41 +1,37 @@
 {
-  "name": "troplo-base",
+  "name": "troplo-site",
   "version": "1.0.0",
-  "description": "troplo-base",
-  "main": "index.js",
-  "scripts": {
-    "serve": "nodemon --ignore ./ui/"
-  },
-  "author": "Troplo",
-  "license": "Internal use only.",
   "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --no-clean",
+    "lint": "vue-cli-service lint",
+    "postinstall": "patch-package"
+  },
   "dependencies": {
-    "@discordjs/rest": "^0.1.0-canary.0",
-    "axios": "^0.21.1",
-    "bcryptjs": "^2.4.3",
-    "body-parser": "^1.19.0",
-    "btcpay": "^0.2.5",
-    "btoa": "^1.2.1",
-    "cloudflare": "^2.8.0",
-    "cors": "^2.8.5",
-    "crypto-random-string": "3.3.1",
-    "discord.js": "^13.1.0",
-    "dotenv": "^10.0.0",
-    "express": "^4.17.1",
-    "express-autosanitizer": "^1.0.2",
-    "form-data": "^4.0.0",
-    "helmet": "^4.6.0",
-    "is-valid-domain": "^0.1.2",
-    "jsonwebtoken": "^8.5.1",
-    "jw-paginate": "^1.0.4",
-    "microstats": "^0.1.2",
-    "moment": "^2.29.1",
-    "multer": "^1.4.2",
-    "mysql2": "^2.2.5",
-    "nodemon": "^2.0.12",
-    "sequelize": "^6.6.5",
-    "sequelize-cli": "^6.2.0",
-    "speakeasy": "^2.0.0",
-    "whois": "^2.13.5"
+    "core-js": "^3.6.5",
+    "patch-package": "^6.4.7",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.5.10",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
+    "vue-cli-plugin-vuetify": "~2.4.2",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.7.0",
+    "prettier": "^2.5.1"
   }
 }

src/App.vue

@@ -13,28 +13,28 @@
 }
 .troplo-header-title {
   -webkit-font-smoothing: antialiased !important;
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
   font-weight: 450;
   elevation: 0 !important;
   font-size: 15rem;
   font-style: italic;
   text-shadow: none !important;
   color: -webkit-radial-gradient(#0179f3, #0190ea) !important;
-  -webkit-background-clip: text
+  -webkit-background-clip: text;
 }
 .troplo-title {
   font-weight: 500;
   background: -webkit-radial-gradient(#0179f3, #0190ea);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent
+  -webkit-text-fill-color: transparent;
 }
 .theme--dark.v-sheet {
   background-color: #151515 !important;
   border-color: #151515 !important;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 .card {
-  overflow: hidden
+  overflow: hidden;
 }
 .theme--dark.v-card {
   background-color: #151515 !important;
@@ -59,12 +59,11 @@
   border-radius: 20px;
   border: 3px solid #151515;
 }
-
 </style>
 <script>
-import Header from './components/Header.vue'
+import Header from "./components/Header.vue"
 export default {
-  name: 'App',
+  name: "App",
   components: {
     Header
   },
@@ -73,9 +72,9 @@ export default {
   }),
   watch: {
     $route(to) {
-      this.$store.commit('setRoute', to.name)
-      document.title = to.name + ' - ' + this.$store.state.site.name
+      this.$store.commit("setRoute", to.name)
+      document.title = to.name + " - " + this.$store.state.site.name
+    }
   }
 }
-};
 </script>

src/components/Header.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="header">
+    <v-toolbar dark>
+      <v-app-bar-nav-icon
+        @click.stop="sidebar = !sidebar"
+        v-if="$vuetify.breakpoint.mobile"
+      ></v-app-bar-nav-icon>
+      <v-toolbar-title
+        class="troplo-title"
+        @click="$router.push('/')"
+        style="cursor: pointer"
+        >Troplo</v-toolbar-title
+      >
+      <v-spacer></v-spacer>
+      <v-list v-if="!$vuetify.breakpoint.mobile">
+        <v-btn
+          text
+          v-for="item in items"
+          :key="item.id"
+          :to="item.path"
+          style="text-transform: unset !important;"
+          :disabled="item.disabled"
+        >
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-btn>
+        <v-btn
+          v-if="false"
+          text
+          @click="$vuetify.theme.dark = !$vuetify.theme.dark"
+        >
+          <v-list-item-title>
+            <v-icon>{{
+              $vuetify.theme.dark ? "mdi-lightbulb-on" : "mdi-lightbulb-outline"
+            }}</v-icon>
+          </v-list-item-title>
+        </v-btn>
+      </v-list>
+    </v-toolbar>
+    <v-navigation-drawer
+      floating
+      color="dark"
+      app
+      v-model="sidebar"
+      v-if="$vuetify.breakpoint.mobile"
+      expand
+    >
+      <v-divider></v-divider>
+      <v-list nav dense>
+        <v-list-item v-for="item in items" :key="item.id" link :to="item.path">
+          <v-list-item-icon>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item link @click="$vuetify.theme.dark = !$vuetify.theme.dark" v-if="false">
+          <v-list-item-icon>
+            <v-icon>{{
+              $vuetify.theme.dark ? "mdi-lightbulb-on" : "mdi-lightbulb-outline"
+            }}</v-icon>
+          </v-list-item-icon>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  data() {
+    return {
+      sidebar: false,
+      items: [
+        { id: 1, title: "Home", icon: "mdi-home", path: "/" },
+        {
+          id: 2,
+          title: "Projects",
+          icon: "mdi-text-box-multiple",
+          path: "/projects"
+        },
+        { id: 3, title: "Contact", icon: "mdi-email", path: "/contact" }
+      ]
+    }
+  },
+  mounted() {
+    this.$vuetify.theme = { dark: true }
+  }
+}
+</script>
+
+<style scoped></style>

src/main.js

@@ -0,0 +1,14 @@
+import Vue from "vue"
+import App from "./App.vue"
+import "./registerServiceWorker"
+import router from "./router"
+import vuetify from "./plugins/vuetify"
+import store from "./store"
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  vuetify,
+  store,
+  render: (h) => h(App)
+}).$mount("#app")

src/plugins/vuetify.js

@@ -0,0 +1,25 @@
+import Vue from "vue"
+import Vuetify from "vuetify/lib/framework"
+import colors from "vuetify/es5/util/colors"
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: colors.blue.lighten3,
+        secondary: colors.grey.darken1,
+        accent: colors.shades.black,
+        error: colors.red.accent3,
+        dark: "#151515",
+        text: "#000000"
+      },
+      dark: {
+        primary: colors.blue,
+        dark: "#151515",
+        text: "#ffffff"
+      }
+    }
+  }
+})

src/registerServiceWorker.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker"
+
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      )
+    },
+    registered() {
+      console.log("Service worker has been registered.")
+    },
+    cached() {
+      console.log("Content has been cached for offline use.")
+    },
+    updatefound() {
+      console.log("New content is downloading.")
+    },
+    updated() {
+      console.log("New content is available; please refresh.")
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      )
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error)
+    }
+  })
+}

src/router/index.js

@@ -0,0 +1,46 @@
+import Vue from "vue"
+import VueRouter from "vue-router"
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue")
+  },
+  {
+    path: "/projects",
+    name: "Projects",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "projects" */ "../views/Projects.vue")
+  },
+  {
+    path: "/contact",
+    name: "Contact",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "contact" */ "../views/Contact.vue")
+  },
+  {
+    path: "*",
+    name: "Not Found",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "notFound" */ "../views/NotFound.vue")
+  }
+]
+
+const router = new VueRouter({
+  routes,
+  mode: "history"
+})
+
+export default router

src/store/index.js

@@ -1,5 +1,5 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue"
+import Vuex from "vuex"
 
 Vue.use(Vuex)
 
@@ -18,8 +18,6 @@ export default new Vuex.Store({
       state.site.route = data
     }
   },
-  actions: {
-  },
-  modules: {
-  }
+  actions: {},
+  modules: {}
 })

src/views/Contact.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <v-container class="justify-center text-center">
+      <p class="text-h4">Contact</p>
+      <v-row>
+        <v-col
+          md="3"
+          xs="3"
+          sm="3"
+          cols="6"
+          v-for="contact in contacts"
+          :key="contact.id"
+        >
+          <v-card class="rounded-xl" elevation="8">
+            <br />
+            <v-icon>{{ contact.icon }}</v-icon>
+            <v-card-title class="justify-center">{{
+              contact.title
+            }}</v-card-title>
+
+            <v-card-text>
+              <a :href="contact.url">{{ contact.displayName }}</a>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Contact",
+  data() {
+    return {
+      contacts: [
+        {
+          id: 1,
+          icon: "mdi-email",
+          title: "Email",
+          displayName: "troplo@troplo.com",
+          url: "mailto:troplo@troplo.com"
+        },
+        {
+          id: 2,
+          icon: "mdi-matrix",
+          title: "Matrix",
+          displayName: "@troplo:troplo.com",
+          url: "https://matrix.to/#/@troplo:troplo.com?via=troplo.com"
+        },
+        {
+          id: 3,
+          icon: "mdi-discord",
+          title: "Discord",
+          displayName: "Troplo#8495",
+          url: "https://discord.com/users/692259321907773460"
+        },
+        {
+          id: 4,
+          icon: "mdi-twitter",
+          title: "Twitter",
+          displayName: "@TheTroplo",
+          url: "https://twitter.com/TheTroplo"
+        },
+        {
+          id: 5,
+          icon: "mdi-send",
+          title: "Telegram",
+          displayName: "@Troplo",
+          url: "https://t.me/Troplo"
+        },
+        {
+          id: 6,
+          icon: "mdi-github",
+          title: "GitHub",
+          displayName: "Troplo",
+          url: "https://github.com/Troplo"
+        },
+        {
+          id: 8,
+          icon: "mdi-tea",
+          title: "Gitea",
+          displayName: "Troplo",
+          url: "https://git.troplo.com/Troplo"
+        },
+        {
+          id: 7,
+          icon: "mdi-gitlab",
+          title: "GitLab",
+          displayName: "Troplo",
+          url: "https://gitlab.com/Troplo"
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped></style>

src/views/Home.vue

@@ -3,8 +3,16 @@
     <v-container class="text-center">
       <v-card elevation="8" class="troplo-header rounded-xl">
         <v-container>
-          <div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title">Troplo</div>
-          <div v-if="$vuetify.breakpoint.mobile" class="troplo-header-title" style="background: -webkit-radial-gradient(#0179f3, #0190ea);">T</div>
+          <div v-if="!$vuetify.breakpoint.mobile" class="troplo-header-title">
+            Troplo
+          </div>
+          <div
+            v-if="$vuetify.breakpoint.mobile"
+            class="troplo-header-title"
+            style="background: -webkit-radial-gradient(#0179f3, #0190ea)"
+          >
+            T
+          </div>
         </v-container>
       </v-card>
     </v-container>
@@ -13,6 +21,6 @@
 
 <script>
 export default {
-  name: 'Home',
+  name: "Home"
 }
 </script>

src/views/Nexus.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="nexus">
-
-  </div>
+  <div id="nexus"></div>
 </template>
 
 <script>
@@ -10,6 +8,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/NotFound.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container>
-      <v-card>
+      <v-card elevation="8" class="rounded-xl">
         <v-container class="text-center">
           <p class="text-h4">Not Found.</p>
           <p class="subtitle">This route does not exist.</p>
@@ -18,6 +18,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/Projects.vue

@@ -5,9 +5,7 @@
       <v-row>
         <v-col md="3" v-for="(project, index) in getVisible" :key="index">
           <v-card class="rounded-xl" elevation="8">
-            <v-img
-                :src="getImage(project.internalName)"
-            ></v-img>
+            <v-img :src="getImage(project.internalName)"></v-img>
 
             <v-card-title>{{ project.name }}</v-card-title>
 
@@ -17,12 +15,10 @@
 
             <v-divider class="mx-4"></v-divider>
 
-            <v-card-title>More Information</v-card-title>
+            <v-card-title>Information</v-card-title>
 
             <v-card-text>
-              <v-chip-group
-                  column
-              >
+              <v-chip-group column>
                 <v-chip
                   v-for="tag in project.tags"
                   :key="tag.id"
@@ -31,7 +27,8 @@
                   disabled
                   style="opacity: 1"
                 >
-                  <v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon">&nbsp;</template>
+                  <v-icon>{{ tag.icon }}</v-icon
+                  ><template v-if="tag.icon">&nbsp;</template>
                   {{ tag.name }}
                 </v-chip>
               </v-chip-group>
@@ -39,7 +36,7 @@
 
             <v-divider v-if="project.links.length" class="mx-4"></v-divider>
 
-            <v-card-actions>
+            <v-card-actions v-if="project.links.length">
               <v-btn
                 v-for="link in project.links"
                 :key="link.name"
@@ -91,14 +88,17 @@ export default {
               name: "Express",
               icon: "mdi-nodejs",
               link: "https://expressjs.com"
-            },
+            }
           ],
-          description: "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
+          description:
+            "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
           visible: true,
-          links: [{
+          links: [
+            {
               name: "Git Repository",
               link: "https://git.troplo.com/Kaverti/website"
-          }],
+            }
+          ]
         },
         {
           id: 2,
@@ -128,14 +128,17 @@ export default {
               name: "Express",
               icon: "mdi-nodejs",
               link: "https://expressjs.com"
-            },
+            }
           ],
-          description: "An invite only file uploading service written in Express and Vue.js.",
+          description:
+            "An invite only file uploading service written in Express and Vue.js.",
           visible: true,
-          links: [{
+          links: [
+            {
               name: "Website",
               link: "https://jays.host"
-          }],
+            }
+          ]
         },
         {
           id: 3,
@@ -166,14 +169,16 @@ export default {
               name: "Crystal",
               icon: "mdi-language-ruby",
               link: "https://crystal-lang.org"
-            },
+            }
           ],
           description: "EPUB reader written in Crystal and Vue.js.",
           visible: true,
-          links: [{
+          links: [
+            {
               name: "Git Repository",
               link: "https://github.com/pinnoto/mira"
-          }],
+            }
+          ]
         },
         {
           id: 4,
@@ -198,14 +203,17 @@ export default {
               name: "Adonis.JS",
               icon: "mdi-nodejs",
               link: "https://adonisjs.com"
-            },
+            }
           ],
-          description: "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
+          description:
+            "Helping create the brand new website for Polytoria, a 3D sandbox platform.",
           visible: true,
-          links: [{
+          links: [
+            {
               name: "Website",
               link: "https://polytoria.com"
-          }],
+            }
+          ]
         },
         {
           id: 5,
@@ -236,9 +244,10 @@ export default {
               name: "Crystal",
               icon: "mdi-language-ruby",
               link: "https://crystal-lang.org"
-            },
+            }
           ],
-          description: "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
+          description:
+            "Self hostable, and open source file uploading service created to be performant, and modular.\nName not finalized.",
           visible: true,
           links: {}
         },
@@ -260,7 +269,7 @@ export default {
         },
         {
           id: 7,
-          name: "Website",
+          name: "Troplo Website",
           internalName: "troplo-website",
           tags: [
             {
@@ -280,9 +289,10 @@ export default {
               icon: "mdi-vuejs",
               color: "#42b883",
               link: "https://vuejs.org"
-            },
+            }
           ],
-          description: "If you want the source code to this website for whatever reason, it is available.",
+          description:
+            "If you want the source code to this website for whatever reason, it is available.",
           visible: true,
           links: [
             {
@@ -292,8 +302,8 @@ export default {
             {
               name: "Website",
               link: "https://troplo.com"
-            },
-          ],
+            }
+          ]
         },
         {
           id: 8,
@@ -319,9 +329,9 @@ export default {
               icon: "mdi-infinity",
               color: "#24c8db",
               link: "https://tauri.studio"
-            },
+            }
           ],
-          description: "IDE. Coming soon.",
+          description: "Code editor. Coming soon.",
           visible: true,
           links: []
         },
@@ -346,7 +356,7 @@ export default {
               name: "Express",
               icon: "mdi-nodejs",
               link: "https://expressjs.com"
-            },
+            }
           ],
           description: "TroploPlex is a reimplementation of the myPlex API.",
           visible: true,
@@ -355,22 +365,24 @@ export default {
               name: "Git Repository",
               link: "https://git.troplo.com/Troplo/Plex"
             }
-          ],
-        },
+          ]
+        }
       ]
     }
   },
   computed: {
     getVisible() {
-      return this.projects.filter(i => i.visible)
+      return this.projects.filter((i) => i.visible)
     }
   },
   methods: {
     getImage(image) {
       try {
-        return require('../assets/images/' + image + '.png')
+        return require("../assets/images/" + image + ".png")
       } catch {
-        return "https://dummyimage.com/1920x1080/151515/ffffff.png&text=" + image
+        return (
+          "https://dummyimage.com/1920x1080/151515/ffffff.png&text=" + image
+        )
       }
     }
   }

ui/.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    'eslint:recommended'
-  ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
-}

ui/.gitignore

@@ -1,23 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

ui/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

ui/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "troplo-site",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --no-clean",
-    "lint": "vue-cli-service lint",
-    "postinstall": "patch-package"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "patch-package": "^6.4.7",
-    "register-service-worker": "^1.7.1",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vuetify": "^2.5.10",
-    "vuex": "^3.4.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "~1.32.0",
-    "sass-loader": "^10.0.0",
-    "vue-cli-plugin-vuetify": "~2.4.2",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.7.0"
-  }
-}

ui/src/components/Header.vue

@@ -1,87 +0,0 @@
-<template>
-  <div id="header">
-    <v-toolbar
-        dark
-    >
-      <v-app-bar-nav-icon @click.stop="sidebar = !sidebar" v-if="$vuetify.breakpoint.mobile"></v-app-bar-nav-icon>
-      <v-toolbar-title class="troplo-title" @click="$router.push('/')" style="cursor: pointer">Troplo</v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-list v-if="!$vuetify.breakpoint.mobile">
-        <v-btn
-            text
-            v-for="(item) in items"
-            :key="item.id"
-            :to="item.path"
-            :disabled="item.disabled"
-        >
-          <v-list-item-title>{{ item.title }}</v-list-item-title>
-        </v-btn>
-        <v-btn
-            v-if="false"
-            text
-            @click="$vuetify.theme.dark = !$vuetify.theme.dark"
-        >
-          <v-list-item-title>
-            <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-outline' }}</v-icon>
-          </v-list-item-title>
-        </v-btn>
-      </v-list>
-    </v-toolbar>
-    <v-navigation-drawer
-        floating
-        color="dark"
-        app
-        v-model="sidebar"
-        v-if="$vuetify.breakpoint.mobile"
-        expand>
-      <v-divider></v-divider>
-      <v-list nav dense>
-        <v-list-item
-            v-for="item in items"
-            :key="item.id"
-            link
-            :to="item.path"
-        >
-          <v-list-item-icon>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-icon>
-
-          <v-list-item-content>
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-        <v-list-item
-            link
-            @click="$vuetify.theme.dark = !$vuetify.theme.dark"
-        >
-          <v-list-item-icon>
-            <v-icon>{{ $vuetify.theme.dark ? 'mdi-lightbulb-on' : 'mdi-lightbulb-outline' }}</v-icon>
-          </v-list-item-icon>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Header",
-  data() {
-    return {
-      sidebar: false,
-      items: [
-        {id: 1, title: "Home", icon: "mdi-home", path: "/"},
-        {id: 2, title: "Projects", icon: "mdi-text-box-multiple", path: "/projects"},
-        {id: 3, title: "Contact", icon: "mdi-email", path: "/contact"},
-      ]
-    }
-  },
-  mounted() {
-    this.$vuetify.theme = { dark: true }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

ui/src/main.js

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import './registerServiceWorker'
-import router from './router'
-import vuetify from './plugins/vuetify'
-import store from './store'
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  vuetify,
-  store,
-  render: h => h(App)
-}).$mount('#app')

ui/src/plugins/vuetify.js

@@ -1,25 +0,0 @@
-import Vue from 'vue'
-import Vuetify from 'vuetify/lib/framework'
-import colors from "vuetify/es5/util/colors";
-
-Vue.use(Vuetify)
-
-export default new Vuetify({
-    theme: {
-        themes: {
-            light: {
-                primary: colors.blue.lighten3,
-                secondary: colors.grey.darken1,
-                accent: colors.shades.black,
-                error: colors.red.accent3,
-                dark: "#151515",
-                text: "#000000"
-            },
-            dark: {
-                primary: colors.blue,
-                dark: "#151515",
-                text: "#ffffff"
-            },
-        },
-    }
-});

ui/src/registerServiceWorker.js

@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}

ui/src/router/index.js

@@ -1,51 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
-  },
-  {
-    path: '/projects',
-    name: 'Projects',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "projects" */ '../views/Projects.vue')
-  },
-  {
-    path: '/nexus',
-    name: 'Nexus',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "nexus" */ '../views/Nexus.vue')
-  },
-  {
-    path: '/contact',
-    name: 'Contact',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue')
-  },
-  {
-    path: '*',
-    name: 'Not Found',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "notFound" */ '../views/NotFound.vue')
-  },
-]
-
-const router = new VueRouter({
-  routes,
-  mode: "history"
-})
-
-export default router

ui/src/views/Contact.vue

@@ -1,98 +0,0 @@
-<template>
-  <div>
-    <v-container class="justify-center text-center">
-      <p class="text-h4">Contact</p>
-      <v-row>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-email</v-icon>
-            <v-card-title class="justify-center">Email</v-card-title>
-
-            <v-card-text>
-              <a href="mailto:troplo@troplo.com">troplo@troplo.com</a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-matrix</v-icon>
-            <v-card-title class="justify-center">Matrix</v-card-title>
-
-            <v-card-text>
-              <a href="https://matrix.to/#/@troplo:troplo.com?via=troplo.com">@troplo:troplo.com</a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-discord</v-icon>
-            <v-card-title class="justify-center">Discord</v-card-title>
-
-            <v-card-text>
-              <a href="https://discord.com/users/692259321907773460">
-                Troplo#8495
-              </a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-twitter</v-icon>
-            <v-card-title class="justify-center">Twitter</v-card-title>
-
-            <v-card-text>
-              <a href="https://twitter.com/TheTroplo">@TheTroplo</a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-send</v-icon>
-            <v-card-title class="justify-center">Telegram</v-card-title>
-
-            <v-card-text>
-              <a href="https://t.me/Troplo">@Troplo</a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-github</v-icon>
-            <v-card-title class="justify-center">GitHub</v-card-title>
-
-            <v-card-text>
-              <a href="https://github.com/Troplo">Troplo</a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col md="3">
-          <v-card class="rounded-xl" elevation="8">
-            <br>
-            <v-icon>mdi-tea</v-icon>
-            <v-card-title class="justify-center">Gitea</v-card-title>
-
-            <v-card-text>
-              <a href="https://git.troplo.com/Troplo">Troplo</a>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Contact"
-}
-</script>
-
-<style scoped>
-
-</style>

ui/vue.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  transpileDependencies: [
-    'vuetify'
-  ]
-}

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  transpileDependencies: ["vuetify"]
+}