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,28 +1,23 @@
-# Node Modules
+.DS_Store
-node_modules
+node_modules
-
+/dist
-# Local ENV files
+
-.env.local
+
-.env.*.local
+# local env files
-
+.env.local
-# Log files
+.env.*.local
-npm-debug.log*
+
-yarn-debug.log*
+# Log files
-yarn-error.log*
+npm-debug.log*
-pnpm-debug.log*
+yarn-debug.log*
-
+yarn-error.log*
-# Editor Directories/Files
+pnpm-debug.log*
-.idea
+
-.vscode
+# Editor directories and files
-*.suo
+.idea
-*.ntvs*
+.vscode
-*.njsproj
+*.suo
-*.sln
+*.ntvs*
-*.sw?
+*.njsproj
-.DS_Store
+*.sln
-
+*.sw?
-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",
+  "version": "1.0.0",
-  "description": "troplo-base",
+  "private": true,
-  "main": "index.js",
+  "scripts": {
-  "scripts": {
+    "serve": "vue-cli-service serve",
-    "serve": "nodemon --ignore ./ui/"
+    "build": "vue-cli-service build --no-clean",
-  },
+    "lint": "vue-cli-service lint",
-  "author": "Troplo",
+    "postinstall": "patch-package"
-  "license": "Internal use only.",
+  },
-  "private": true,
+  "dependencies": {
-  "dependencies": {
+    "core-js": "^3.6.5",
-    "@discordjs/rest": "^0.1.0-canary.0",
+    "patch-package": "^6.4.7",
-    "axios": "^0.21.1",
+    "register-service-worker": "^1.7.1",
-    "bcryptjs": "^2.4.3",
+    "vue": "^2.6.11",
-    "body-parser": "^1.19.0",
+    "vue-router": "^3.2.0",
-    "btcpay": "^0.2.5",
+    "vuetify": "^2.5.10",
-    "btoa": "^1.2.1",
+    "vuex": "^3.4.0"
-    "cloudflare": "^2.8.0",
+  },
-    "cors": "^2.8.5",
+  "devDependencies": {
-    "crypto-random-string": "3.3.1",
+    "@vue/cli-plugin-babel": "~4.5.0",
-    "discord.js": "^13.1.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
-    "dotenv": "^10.0.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
-    "express": "^4.17.1",
+    "@vue/cli-plugin-router": "~4.5.0",
-    "express-autosanitizer": "^1.0.2",
+    "@vue/cli-plugin-vuex": "~4.5.0",
-    "form-data": "^4.0.0",
+    "@vue/cli-service": "~4.5.0",
-    "helmet": "^4.6.0",
+    "babel-eslint": "^10.1.0",
-    "is-valid-domain": "^0.1.2",
+    "eslint": "^6.7.2",
-    "jsonwebtoken": "^8.5.1",
+    "eslint-plugin-vue": "^6.2.2",
-    "jw-paginate": "^1.0.4",
+    "sass": "~1.32.0",
-    "microstats": "^0.1.2",
+    "sass-loader": "^10.0.0",
-    "moment": "^2.29.1",
+    "vue-cli-plugin-vuetify": "~2.4.2",
-    "multer": "^1.4.2",
+    "vue-template-compiler": "^2.6.11",
-    "mysql2": "^2.2.5",
+    "vuetify-loader": "^1.7.0",
-    "nodemon": "^2.0.12",
+    "prettier": "^2.5.1"
-    "sequelize": "^6.6.5",
+  }
-    "sequelize-cli": "^6.2.0",
+}
-    "speakeasy": "^2.0.0",
-    "whois": "^2.13.5"
-  }
-}

public/img/icons/safari-pinned-tab.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
-</svg>
+</svg>

public/index.html

@@ -1,22 +1,22 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="en">
+<html lang="en">
-<head>
+<head>
-    <meta charset="utf-8">
+    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-</head>
+</head>
-<body>
+<body>
-<noscript>
+<noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-</noscript>
+</noscript>
-<div id="app"></div>
+<div id="app"></div>
-<!-- built files will be auto injected -->
+<!-- built files will be auto injected -->
-</body>
+</body>
-</html>
+</html>

public/robots.txt

@@ -1,2 +1,2 @@
-User-agent: *
+User-agent: *
-Disallow:
+Disallow:

src/App.vue

@@ -1,81 +1,80 @@
-<template>
+<template>
-  <v-app>
+  <v-app>
-    <v-main>
+    <v-main>
-      <Header></Header>
+      <Header></Header>
-      <router-view/>
+      <router-view />
-    </v-main>
+    </v-main>
-  </v-app>
+  </v-app>
-</template>
+</template>
-<style>
+<style>
-.troplo-header {
+.troplo-header {
-  -webkit-font-smoothing: antialiased !important;
+  -webkit-font-smoothing: antialiased !important;
-  background: -webkit-radial-gradient(#0179f3, #0190ea) !important;
+  background: -webkit-radial-gradient(#0179f3, #0190ea) !important;
-}
+}
-.troplo-header-title {
+.troplo-header-title {
-  -webkit-font-smoothing: antialiased !important;
+  -webkit-font-smoothing: antialiased !important;
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
-  font-weight: 450;
+  font-weight: 450;
-  elevation: 0 !important;
+  elevation: 0 !important;
-  font-size: 15rem;
+  font-size: 15rem;
-  font-style: italic;
+  font-style: italic;
-  text-shadow: none !important;
+  text-shadow: none !important;
-  color: -webkit-radial-gradient(#0179f3, #0190ea) !important;
+  color: -webkit-radial-gradient(#0179f3, #0190ea) !important;
-  -webkit-background-clip: text
+  -webkit-background-clip: text;
-}
+}
-.troplo-title {
+.troplo-title {
-  font-weight: 500;
+  font-weight: 500;
-  background: -webkit-radial-gradient(#0179f3, #0190ea);
+  background: -webkit-radial-gradient(#0179f3, #0190ea);
-  -webkit-background-clip: text;
+  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent
+  -webkit-text-fill-color: transparent;
-}
+}
-.theme--dark.v-sheet {
+.theme--dark.v-sheet {
-  background-color: #151515 !important;
+  background-color: #151515 !important;
-  border-color: #151515 !important;
+  border-color: #151515 !important;
-  color: #FFFFFF;
+  color: #ffffff;
-}
+}
-.card {
+.card {
-  overflow: hidden
+  overflow: hidden;
-}
+}
-.theme--dark.v-card {
+.theme--dark.v-card {
-  background-color: #151515 !important;
+  background-color: #151515 !important;
-}
+}
-/* Works on Firefox */
+/* Works on Firefox */
-* {
+* {
-  scrollbar-width: thin;
+  scrollbar-width: thin;
-  scrollbar-color: black #151515;
+  scrollbar-color: black #151515;
-}
+}
-
+
-/* Works on Chrome, Edge, and Safari */
+/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
+*::-webkit-scrollbar {
-  width: 12px;
+  width: 12px;
-}
+}
-
+
-*::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track {
-  background: #0e0e0e;
+  background: #0e0e0e;
-}
+}
-
+
-*::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb {
-  background-color: #151515;
+  background-color: #151515;
-  border-radius: 20px;
+  border-radius: 20px;
-  border: 3px solid #151515;
+  border: 3px solid #151515;
-}
+}
-
+</style>
-</style>
+<script>
-<script>
+import Header from "./components/Header.vue"
-import Header from './components/Header.vue'
+export default {
-export default {
+  name: "App",
-  name: 'App',
+  components: {
-  components: {
+    Header
-    Header
+  },
-  },
+  data: () => ({
-  data: () => ({
+    //
-    //
+  }),
-  }),
+  watch: {
-  watch: {
+    $route(to) {
-    $route (to) {
+      this.$store.commit("setRoute", to.name)
-      this.$store.commit('setRoute', to.name)
+      document.title = to.name + " - " + this.$store.state.site.name
-      document.title = to.name + ' - ' + this.$store.state.site.name
+    }
-    }
+  }
-  }
+}
-};
+</script>
-</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 Vue from "vue"
-import Vuex from 'vuex'
+import Vuex from "vuex"
 
 Vue.use(Vuex)
 
@@ -18,8 +18,6 @@ export default new Vuex.Store({
       state.site.route = data
     }
   },
-  actions: {
+  actions: {},
-  },
+  modules: {}
-  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

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

src/views/Nexus.vue

@@ -1,15 +1,11 @@
-<template>
+<template>
-  <div id="nexus">
+  <div id="nexus"></div>
-
+</template>
-  </div>
+
-</template>
+<script>
-
+export default {
-<script>
+  name: "Nexus"
-export default {
+}
-  name: "Nexus"
+</script>
-}
+
-</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 scoped></style>
-
-</style>

src/views/Projects.vue

@@ -5,49 +5,46 @@
       <v-row>
         <v-col md="3" v-for="(project, index) in getVisible" :key="index">
           <v-card class="rounded-xl" elevation="8">
-            <v-img
+            <v-img :src="getImage(project.internalName)"></v-img>
-                :src="getImage(project.internalName)"
-            ></v-img>
 
-            <v-card-title>{{project.name}}</v-card-title>
+            <v-card-title>{{ project.name }}</v-card-title>
 
             <v-card-text>
-              <div>{{project.description}}</div>
+              <div>{{ project.description }}</div>
             </v-card-text>
 
             <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
+              <v-chip-group column>
-                  column
-              >
                 <v-chip
-                    v-for="tag in project.tags"
+                  v-for="tag in project.tags"
-                    :key="tag.id"
+                  :key="tag.id"
-                    :href="tag.link"
+                  :href="tag.link"
-                    :color="tag.color"
+                  :color="tag.color"
-                    disabled
+                  disabled
-                    style="opacity: 1"
+                  style="opacity: 1"
                 >
-                  <v-icon>{{tag.icon}}</v-icon><template v-if="tag.icon">&nbsp;</template>
+                  <v-icon>{{ tag.icon }}</v-icon
-                  {{tag.name}}
+                  ><template v-if="tag.icon">&nbsp;</template>
+                  {{ tag.name }}
                 </v-chip>
               </v-chip-group>
             </v-card-text>
 
             <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"
+                v-for="link in project.links"
-                  :key="link.name"
+                :key="link.name"
-                  color="blue"
+                color="blue"
-                  text
+                text
-                  :href="link.link"
+                :href="link.link"
               >
-                {{link.name}}
+                {{ link.name }}
               </v-btn>
             </v-card-actions>
           </v-card>
@@ -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"
+              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"
+              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"
+              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"
+              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,24 +365,26 @@ 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
+        )
       }
     }
   }
 }
-</script>
+</script>

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"]
+}