move to root

2024-09-14 00:10:40 +10:00 · 2024-09-14 00:10:40 +10:00 · 41c182b58f
commit 41c182b58f
parent 5a7e9c0195
99 changed files with 3837 additions and 15225 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11
--- a/troplo-website-next/.editorconfig
+++ b/troplo-website-next/.editorconfig
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,14 +1,20 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
 module.exports = {
  root: true,
  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended"],
-  parserOptions: {
-    parser: "babel-eslint"
+    node: true,
  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
+    'vue/multi-word-component-names': 'off',
+  },
 }
--- a/.gitignore
+++ b/.gitignore
@ -2,7 +2,6 @@
 node_modules
 /dist

-
 # local env files
 .env.local
 .env.*.local
--- a/README.md
+++ b/README.md
@ -1,29 +1,81 @@
-# ui
+# Vuetify (Default)

-## Project setup
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.

-```
-yarn install
+## ❗️ Important Links
+
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## 💿 Install
+
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
+
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
+
+After completing the installation, your environment is ready for Vuetify development.
+
+## ✨ Features
+
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
+
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
+
+## 💡 Usage
+
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
 ```

-### Compiles and hot-reloads for development
+(Repeat for npm, pnpm, and bun with respective commands.)

-```
-yarn serve
-```
+> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.

-### Compiles and minifies for production
+### Building for Production

-```
+To build your project for production, use:
+
+```bash
 yarn build
 ```

-### Lints and fixes files
+(Repeat for npm, pnpm, and bun with respective commands.)

-```
-yarn lint
-```
+Once the build process is completed, your application will be ready for deployment in a production environment.

-### Customize configuration
+## 💪 Support Vuetify Development

-See [Configuration Reference](https://cli.vuejs.org/config/).
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present Vuetify, LLC
--- a/babel.config.js
+++ b/babel.config.js
@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-}
--- a/troplo-website-next/codegen.ts
+++ b/troplo-website-next/codegen.ts
--- a/components.d.ts
+++ b/components.d.ts
@ -0,0 +1,16 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    FlowinityLogo: typeof import('./src/components/FlowinityLogo.vue')['default']
+    Header: typeof import('./src/components/Header.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/troplo-website-next/graphql.schema.json
+++ b/troplo-website-next/graphql.schema.json
--- a/troplo-website-next/index.html
+++ b/troplo-website-next/index.html
--- a/package.json
+++ b/package.json
@ -1,43 +1,48 @@
 {
-  "name": "troplo-site",
-  "version": "1.0.15",
-  "private": true,
+  "name": "troplo-website-next",
+  "version": "0.0.0",
  "scripts": {
-    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "postinstall": "patch-package"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore",
+    "codegen": "graphql-codegen --config ./codegen.ts"
  },
  "dependencies": {
-    "core-js": "^3.6.5",
-    "node-ipc": "git+https://git.troplo.com/Troplo/node-ipc",
-    "peacenotwar": "git+https://git.troplo.com/Troplo/peacenotwar",
-    "vue": "^2.6.11",
-    "vue-matomo": "^4.1.0",
-    "vue-router": "^3.2.0",
-    "vuetify": "2.5.10",
-    "vuex": "^3.4.0"
+    "@apollo/client": "^3.11.8",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/introspection": "^4.0.3",
+    "@mdi/font": "^7.4.47",
+    "@vue/apollo-composable": "^4.2.1",
+    "core-js": "^3.37.1",
+    "graphql": "^16.9.0",
+    "graphql-tag": "^2.12.6",
+    "pinia": "^2.2.2",
+    "roboto-fontface": "*",
+    "vue": "^3.4.31",
+    "vuetify": "^3.6.11"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~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",
-    "patch-package": "^6.4.7",
-    "prettier": "^2.5.1",
-    "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",
-    "webpack-auto-inject-version": "^1.2.2"
-  },
-  "resolutions": {
-    "peacenotwar": "git+https://git.troplo.com/Troplo/peacenotwar",
-    "node-ipc": "git+https://git.troplo.com/Troplo/node-ipc"
+    "@babel/types": "^7.24.7",
+    "@types/node": "^20.14.10",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "react": "^18.3.1",
+    "sass": "1.77.6",
+    "typescript": "^5.4.2",
+    "unplugin-fonts": "^1.1.1",
+    "unplugin-vue-components": "^0.27.2",
+    "unplugin-vue-router": "^0.10.0",
+    "vite": "^5.3.3",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vue-router": "^4.4.0",
+    "vue-tsc": "^2.0.26"
  }
 }
--- a/patches/vuetify+2.5.9.patch
+++ b/patches/vuetify+2.5.9.patch
@ -1,438 +0,0 @@
-diff --git a/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
-index ee4419a..6d1ba3d 100644
--- a/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
-+++ b/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
-@@ -9,7 +9,7 @@
-       background-color: map-get($material, 'dividers')
- 
-   .v-divider
-    border-color: map-get($material, 'dividers')
-+    width: 0
- 
- // Block
- .v-navigation-drawer
-diff --git a/node_modules/vuetify/src/styles/settings/_dark.scss b/node_modules/vuetify/src/styles/settings/_dark.scss
-index 753d70d..12980cc 100644
--- a/node_modules/vuetify/src/styles/settings/_dark.scss
-+++ b/node_modules/vuetify/src/styles/settings/_dark.scss
-@@ -6,7 +6,7 @@ $material-dark-elevation-colors: () !default;
- $material-dark-elevation-colors: map-deep-merge(
-   (
-     '0': #000000,
-    '1': #1E1E1E,
-+    '1': #151515,
-     '2': #222222,
-     '3': #252525,
-     '4': #272727,
-diff --git a/node_modules/vuetify/src/styles/settings/_variables.scss b/node_modules/vuetify/src/styles/settings/_variables.scss
-index f5cc26b..6b998f1 100644
--- a/node_modules/vuetify/src/styles/settings/_variables.scss
-+++ b/node_modules/vuetify/src/styles/settings/_variables.scss
-@@ -2,23 +2,24 @@
- 
- $color-pack: true !default;
- 
-$body-font-family: 'Roboto', sans-serif !default;
-+$body-font-family: 'Montserrat', sans-serif !default;
- $font-size-root: 16px !default;
- $line-height-root: 1.5 !default;
- $border-radius-root: 4px !default;
- 
- $rounded: () !default;
- $rounded: map-deep-merge(
-  (
-    0: 0,
-    'sm': $border-radius-root / 2,
-    null: $border-radius-root,
-    'lg': $border-radius-root * 2,
-    'xl': $border-radius-root * 6,
-    'pill': 9999px,
-    'circle': 50%
-  ),
-  $rounded
-+                (
-+                        0: 0,
-+                        'sm': $border-radius-root / 2,
-+                        null: $border-radius-root,
-+                        'lg': $border-radius-root * 2,
-+                        'xl': $border-radius-root * 3,
-+                        'xxl': $border-radius-root * 6,
-+                        'pill': 9999px,
-+                        'circle': 50%
-+                ),
-+                $rounded
- );
- 
- $spacer: 4px !default;
-@@ -39,14 +40,14 @@ $negative-spacers: () !default;
- 
- $grid-breakpoints: () !default;
- $grid-breakpoints: map-deep-merge(
-  (
-    'xs': 0,
-    'sm': 600px,
-    'md': 960px,
-    'lg': 1280px - 16px,
-    'xl': 1920px - 16px
-  ),
-  $grid-breakpoints
-+                (
-+                        'xs': 0,
-+                        'sm': 600px,
-+                        'md': 960px,
-+                        'lg': 1280px - 16px,
-+                        'xl': 1920px - 16px
-+                ),
-+                $grid-breakpoints
- );
- 
- $grid-gutter: $spacer * 6 !default;
-@@ -57,191 +58,191 @@ $container-padding-x: $grid-gutter / 2 !default;
- 
- $grid-gutters: () !default;
- $grid-gutters: map-deep-merge(
-  (
-    'xs': $grid-gutter / 12,
-    'sm': $grid-gutter / 6,
-    'md': $grid-gutter / 3,
-    'lg': $grid-gutter * 2/3,
-    'xl': $grid-gutter
-  ),
-  $grid-gutters
-+                (
-+                        'xs': $grid-gutter / 12,
-+                        'sm': $grid-gutter / 6,
-+                        'md': $grid-gutter / 3,
-+                        'lg': $grid-gutter * 2/3,
-+                        'xl': $grid-gutter
-+                ),
-+                $grid-gutters
- );
- 
- $container-max-widths: () !default;
- $container-max-widths: map-deep-merge(
-  (
-    'md': map-get($grid-breakpoints, 'md') * 0.9375,
-    'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
-    'xl': map-get($grid-breakpoints, 'xl') * 0.9375
-  ),
-  $container-max-widths
-+                (
-+                        'md': map-get($grid-breakpoints, 'md') * 0.9375,
-+                        'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
-+                        'xl': map-get($grid-breakpoints, 'xl') * 0.9375
-+                ),
-+                $container-max-widths
- );
- 
- $display-breakpoints: () !default;
- $display-breakpoints: map-deep-merge(
-  (
-    'print-only': 'only print',
-    'screen-only': 'only screen',
-    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
-    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-    'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
-    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-    'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
-    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-    'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
-    'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
-  ),
-  $display-breakpoints
-+                (
-+                        'print-only': 'only print',
-+                        'screen-only': 'only screen',
-+                        'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
-+                        'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-+                        'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-+                        'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
-+                        'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-+                        'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-+                        'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
-+                        'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-+                        'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-+                        'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
-+                        'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
-+                ),
-+                $display-breakpoints
- );
- 
- $font-weights: () !default;
- $font-weights: map-deep-merge(
-  (
-    'thin': 100,
-    'light': 300,
-    'regular': 400,
-    'medium': 500,
-    'bold': 700,
-    'black': 900
-  ),
-  $font-weights
-+                (
-+                        'thin': 100,
-+                        'light': 300,
-+                        'regular': 400,
-+                        'medium': 500,
-+                        'bold': 700,
-+                        'black': 900
-+                ),
-+                $font-weights
- );
- 
- $heading-font-family: $body-font-family !default;
- 
- $headings: () !default;
- $headings: map-deep-merge(
-  (
-    'h1': (
-      'size': 6rem,
-      'weight': 300,
-      'line-height': 6rem,
-      'letter-spacing': -.015625em,
-      'font-family': $heading-font-family,
-      'text-transform': false
-    ),
-    'h2': (
-      'size': 3.75rem,
-      'weight': 300,
-      'line-height': 3.75rem,
-      'letter-spacing': -.0083333333em,
-      'font-family': $heading-font-family,
-      'text-transform': false
-    ),
-    'h3': (
-      'size': 3rem,
-      'weight': 400,
-      'line-height': 3.125rem,
-      'letter-spacing': normal,
-      'font-family': $heading-font-family,
-      'text-transform': false
-    ),
-    'h4': (
-      'size': 2.125rem,
-      'weight': 400,
-      'line-height': 2.5rem,
-      'letter-spacing': .0073529412em,
-      'font-family': $heading-font-family,
-      'text-transform': false
-    ),
-    'h5': (
-      'size': 1.5rem,
-      'weight': 400,
-      'line-height': 2rem,
-      'letter-spacing': normal,
-      'font-family': $heading-font-family,
-      'text-transform': false
-    ),
-    'h6': (
-      'size': 1.25rem,
-      'weight': 500,
-      'line-height': 2rem,
-      'letter-spacing': .0125em,
-      'font-family': $heading-font-family,
-      'text-transform': false
-    ),
-    'subtitle-1': (
-      'size': 1rem,
-      'weight': normal,
-      'line-height': 1.75rem,
-      'letter-spacing': .009375em,
-      'font-family': $body-font-family,
-      'text-transform': false
-    ),
-    'subtitle-2': (
-      'size': .875rem,
-      'weight': 500,
-      'line-height': 1.375rem,
-      'letter-spacing': .0071428571em,
-      'font-family': $body-font-family,
-      'text-transform': false
-    ),
-    'body-1': (
-      'size': 1rem,
-      'weight': 400,
-      'line-height': 1.5rem,
-      'letter-spacing': .03125em,
-      'font-family': $body-font-family,
-      'text-transform': false
-    ),
-    'body-2': (
-      'size': .875rem,
-      'weight': 400,
-      'line-height': 1.25rem,
-      'letter-spacing': .0178571429em,
-      'font-family': $body-font-family,
-      'text-transform': false
-    ),
-    'button': (
-      'size': .875rem,
-      'weight': 500,
-      'line-height': 2.25rem,
-      'letter-spacing': .0892857143em,
-      'font-family': $body-font-family,
-      'text-transform': uppercase
-    ),
-    'caption': (
-      'size': .75rem,
-      'weight': 400,
-      'line-height': 1.25rem,
-      'letter-spacing': .0333333333em,
-      'font-family': $body-font-family,
-      'text-transform': false
-    ),
-    'overline': (
-      'size': .75rem,
-      'weight': 500,
-      'line-height': 2rem,
-      'letter-spacing': .1666666667em,
-      'font-family': $body-font-family,
-      'text-transform': uppercase
-    )
-  ),
-  $headings
-+                (
-+                        'h1': (
-+                                'size': 6rem,
-+                                'weight': 300,
-+                                'line-height': 6rem,
-+                                'letter-spacing': -.015625em,
-+                                'font-family': $heading-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'h2': (
-+                                'size': 3.75rem,
-+                                'weight': 300,
-+                                'line-height': 3.75rem,
-+                                'letter-spacing': -.0083333333em,
-+                                'font-family': $heading-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'h3': (
-+                                'size': 3rem,
-+                                'weight': 400,
-+                                'line-height': 3.125rem,
-+                                'letter-spacing': normal,
-+                                'font-family': $heading-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'h4': (
-+                                'size': 2.125rem,
-+                                'weight': 400,
-+                                'line-height': 2.5rem,
-+                                'letter-spacing': .0073529412em,
-+                                'font-family': $heading-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'h5': (
-+                                'size': 1.5rem,
-+                                'weight': 400,
-+                                'line-height': 2rem,
-+                                'letter-spacing': normal,
-+                                'font-family': $heading-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'h6': (
-+                                'size': 1.25rem,
-+                                'weight': 500,
-+                                'line-height': 2rem,
-+                                'letter-spacing': .0125em,
-+                                'font-family': $heading-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'subtitle-1': (
-+                                'size': 1rem,
-+                                'weight': normal,
-+                                'line-height': 1.75rem,
-+                                'letter-spacing': .009375em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'subtitle-2': (
-+                                'size': .875rem,
-+                                'weight': 500,
-+                                'line-height': 1.375rem,
-+                                'letter-spacing': .0071428571em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'body-1': (
-+                                'size': 1rem,
-+                                'weight': 400,
-+                                'line-height': 1.5rem,
-+                                'letter-spacing': .03125em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'body-2': (
-+                                'size': .875rem,
-+                                'weight': 400,
-+                                'line-height': 1.25rem,
-+                                'letter-spacing': .0178571429em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'button': (
-+                                'size': .875rem,
-+                                'weight': 500,
-+                                'line-height': 2.25rem,
-+                                'letter-spacing': .0892857143em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': uppercase
-+                        ),
-+                        'caption': (
-+                                'size': .75rem,
-+                                'weight': 400,
-+                                'line-height': 1.25rem,
-+                                'letter-spacing': .0333333333em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': false
-+                        ),
-+                        'overline': (
-+                                'size': .75rem,
-+                                'weight': 500,
-+                                'line-height': 2rem,
-+                                'letter-spacing': .1666666667em,
-+                                'font-family': $body-font-family,
-+                                'text-transform': uppercase
-+                        )
-+                ),
-+                $headings
- );
- 
- $typography: () !default;
- @each $type, $values in $headings {
-   $typography: map-deep-merge(
-    $typography,
-    (#{$type}: map-values($values))
-+                  $typography,
-+                  (#{$type}: map-values($values))
-   );
- }
- 
- $transition: () !default;
- $transition: map-deep-merge(
-  (
-    'fast-out-slow-in': cubic-bezier(0.4, 0, 0.2, 1),
-    'linear-out-slow-in': cubic-bezier(0, 0, 0.2, 1),
-    'fast-out-linear-in': cubic-bezier(0.4, 0, 1, 1),
-    'ease-in-out': cubic-bezier(0.4, 0, 0.6, 1),
-    'fast-in-fast-out': cubic-bezier(0.25, 0.8, 0.25, 1),
-    'swing': cubic-bezier(0.25, 0.8, 0.5, 1)
-  ),
-  $transition
-+                (
-+                        'fast-out-slow-in': cubic-bezier(0.4, 0, 0.2, 1),
-+                        'linear-out-slow-in': cubic-bezier(0, 0, 0.2, 1),
-+                        'fast-out-linear-in': cubic-bezier(0.4, 0, 1, 1),
-+                        'ease-in-out': cubic-bezier(0.4, 0, 0.6, 1),
-+                        'fast-in-fast-out': cubic-bezier(0.25, 0.8, 0.25, 1),
-+                        'swing': cubic-bezier(0.25, 0.8, 0.5, 1)
-+                ),
-+                $transition
- );
- $primary-transition: 0.3s map-get($transition, 'swing') !default;
- $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/src/assets/images/colubrina.png
+++ b/src/assets/images/colubrina.png
--- a/src/assets/images/compass-vue.png
+++ b/src/assets/images/compass-vue.png
--- a/src/assets/images/flowforms.png
+++ b/src/assets/images/flowforms.png
--- a/src/assets/images/flowinity-android.png
+++ b/src/assets/images/flowinity-android.png
--- a/src/assets/images/flowinity.png
+++ b/src/assets/images/flowinity.png
--- a/src/assets/images/geoguess.png
+++ b/src/assets/images/geoguess.png
--- a/troplo-website-next/public/images/kansas.png
+++ b/troplo-website-next/public/images/kansas.png
--- a/src/assets/images/kaverti.png
+++ b/src/assets/images/kaverti.png
--- a/src/assets/images/mira.png
+++ b/src/assets/images/mira.png
--- a/src/assets/images/polytoria.png
+++ b/src/assets/images/polytoria.png
--- a/src/assets/images/proj01.png
+++ b/src/assets/images/proj01.png
--- a/src/assets/images/troplo-plex.png
+++ b/src/assets/images/troplo-plex.png
--- a/src/assets/images/troplo-website.png
+++ b/src/assets/images/troplo-website.png
--- a/src/assets/images/vixlatio.png
+++ b/src/assets/images/vixlatio.png
--- a/public/index.html
+++ b/public/index.html
@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Troplo's Website</title>
-    <meta name="title" content="Troplo's Website">
-    <meta name="keywords" content="troplo, flowinity, pinnoto, berri, mira, polytoria, vixlatio, jays.host, troplo-site">
-    <meta name="robots" content="index, follow">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="language" content="English">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;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://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-</head>
-<body>
-<noscript>
-    <strong>We're sorry but Troplo's Website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-</noscript>
-<div id="app"></div>
-<!-- built files will be auto injected -->
-</body>
-</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -4,55 +4,73 @@
      <v-alert
        v-if="outages.length"
        class="mb-0 p-0"
-        text
+        variant="tonal"
        color="red"
        :value="true"
        tile
-        icon="mdi-alert-circle"
      >
        <div class="d-flex justify-space-between align-center justify-center">
-          <span>
-            You might be currently experiencing problems with:
-            {{ outageName }}.
-          </span>
-          <v-btn href="https://status.troplo.com" small color="red" text
+          <span class="d-flex">
+            <v-icon>mdi-alert-circle</v-icon>
+            <span class="ml-2">
+              You might be currently experiencing problems with:
+              {{ outageName }}.
+            </span></span
+          >
+          <v-btn
+            href="https://status.troplo.com"
+            size="small"
+            color="red"
+            variant="outlined"
            >Learn more</v-btn
          >
        </div>
      </v-alert>
-      <Header></Header>
+      <v-alert
+        v-for="banner in announcementsStore.banners"
+        :key="banner.id"
+        :value="true"
+        variant="tonal"
+        :type="banner.bannerType"
+        :icon="banner.bannerType === 'error' ? 'mdi-alert-circle' : undefined"
+        tile
+      >
+        <strong>UPCOMING:</strong>
+        {{ banner.bannerText }}
+        <template #append>
+          <v-btn
+            :to="`/announcements/${banner.id}`"
+            size="small"
+            variant="outlined"
+            >Learn more</v-btn
+          >
+        </template>
+      </v-alert>
+      <Header />
      <router-view />
    </v-main>
  </v-app>
 </template>

-<script>
-import Header from "./components/Header.vue"
-export default {
-  name: "App",
-  components: {
-    Header
-  },
-  data: () => ({
-    outages: []
-  }),
-  watch: {
-    $route(to) {
-      this.$store.commit("setRoute", to.name)
-      document.title = to.name + " - " + this.$store.state.site.name
-    }
-  },
-  computed: {
-    outageName() {
-      return this.outages.map((o) => o.attributes.pronounceable_name).join(", ")
-    }
-  },
-  mounted() {
-    fetch("https://troplo-status.flowinity.workers.dev")
-      .then((res) => res.json())
-      .then((data) => {
-        this.outages = data.data.filter((d) => d.attributes.status !== "up")
-      })
-  }
-}
+<script lang="ts" setup>
+//
+import Header from "@/components/Header.vue"
+import { computed, onMounted, ref } from "vue"
+import { useAnnouncementsStore } from "@/stores/announcements.store"
+
+const outages = ref<any[]>([])
+const announcementsStore = useAnnouncementsStore()
+
+onMounted(() => {
+  fetch("https://troplo-status.flowinity.workers.dev")
+    .then((res) => res.json())
+    .then((data) => {
+      outages.value = data.data.filter((d) => d.attributes.status !== "up")
+    })
+  announcementsStore.getBanners()
+})
+
+const outageName = computed(() => {
+  return outages.value.map((o) => o.attributes.pronounceable_name).join(", ")
+})
 </script>
--- a/src/assets/icons/crystal-icon.svg
+++ b/src/assets/icons/crystal-icon.svg
@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 193.2 206.7" style="enable-background:new 0 0 193.2 206.7;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;}
-</style>
-<g>
-	<path d="M165.4,122l-50,49.9c-0.2,0.2-0.5,0.3-0.7,0.2l-68.3-18.3c-0.3-0.1-0.5-0.3-0.5-0.5L27.5,85.1c-0.1-0.3,0-0.5,0.2-0.7
-		l50-49.9c0.2-0.2,0.5-0.3,0.7-0.2l68.3,18.3c0.3,0.1,0.5,0.3,0.5,0.5l18.3,68.2C165.7,121.6,165.6,121.8,165.4,122z M98.4,67.7
-		L31.3,85.6c-0.1,0-0.2,0.2-0.1,0.3l49.1,49c0.1,0.1,0.3,0.1,0.3-0.1l18-67C98.7,67.8,98.5,67.6,98.4,67.7z"/>
-	<g>
-		<rect class="st0" width="193.2" height="206.7"/>
-	</g>
-</g>
-</svg>
--- a/troplo-website-next/src/assets/logo.png
+++ b/troplo-website-next/src/assets/logo.png
--- a/troplo-website-next/src/assets/logo.svg
+++ b/troplo-website-next/src/assets/logo.svg
--- a/src/assets/style.css
+++ b/src/assets/style.css
@ -1,60 +0,0 @@
-.troplo-header {
-    -webkit-font-smoothing: antialiased !important;
-    background: linear-gradient(-45deg, #0179f3, #0190ea) !important;
-}
-.troplo-header-title {
-    -webkit-font-smoothing: antialiased !important;
-    font-weight: 450;
-    elevation: 0 !important;
-    font-size: 15rem;
-    font-style: italic;
-    text-shadow: none !important;
-    color: linear-gradient(#0179f3, #0190ea) !important;
-    -webkit-background-clip: text;
-}
-.troplo-title {
-    font-weight: 500;
-    background: linear-gradient(#0179f3, #0190ea);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-.theme--dark.v-sheet {
-    background-color: #151515 ;
-    border-color: #151515;
-    color: #ffffff;
-}
-
-#header .theme--dark.v-sheet {
-    background-color: #151515 !important;
-    border-color: #151515 !important;
-    color: #ffffff;
-}
-
-.card {
-    overflow: hidden;
-}
-.theme--dark.v-card {
-    background-color: #151515 !important;
-}
-
-/* Works on Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: black #151515;
-    font-family: "Inter", sans-serif !important;
-}
-
-/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-    width: 12px;
-}
-
-*::-webkit-scrollbar-track {
-    background: #0e0e0e;
-}
-
-*::-webkit-scrollbar-thumb {
-    background-color: #151515;
-    border-radius: 20px;
-    border: 3px solid #151515;
-}
--- a/src/components/FlowinityLogo.vue
+++ b/src/components/FlowinityLogo.vue
@ -4,27 +4,21 @@
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M418.455 0.303628C368.601 3.53963 317.099 15.4736 274.671 33.6216C247.274 45.3406 230.542 54.3696 204.955 71.2386C176.877 89.7506 157.205 105.979 130.432 132.715C92.391 170.705 65.015 208.32 43.462 252.215C24.648 290.532 12.494 328.601 5.50901 371.098C0.525014 401.415 -0.0489904 409.979 0.00300957 453.215C0.0460096 488.587 0.307011 495.159 2.26401 510.012C12.064 584.424 36.235 647.831 76.868 705.715C88.227 721.897 108.825 746.978 121.86 760.5V760.5C123.716 762.425 126.973 761.118 126.983 758.444L127.455 635.5L127.933 510.88C127.948 507.16 128.87 503.498 130.62 500.215V500.215C134.346 493.224 140.794 486.918 147.366 483.836C152.023 481.652 154.372 481.215 161.455 481.215C168.538 481.215 170.887 481.652 175.544 483.836C182.369 487.037 188.65 493.382 192.253 500.715V500.715C194.031 504.333 194.959 508.311 194.965 512.342L195.22 665.376L195.464 811.774C195.477 819.73 199.528 827.136 206.22 831.44V831.44C219.113 839.731 233.998 848.715 234.844 848.715C235.18 848.715 235.455 724.137 235.455 571.875C235.455 301.89 235.503 294.849 237.38 287.507C243.152 264.94 260.408 246.135 281.881 239.012C289.036 236.639 291.492 236.334 303.455 236.334C315.418 236.334 317.874 236.639 325.029 239.012C346.502 246.135 363.758 264.94 369.53 287.507C371.409 294.855 371.455 302.194 371.455 595.356V893.375C371.455 894.718 372.392 895.879 373.705 896.164V896.164C376.489 896.767 387.479 898.218 401.955 899.893C414.535 901.348 479.439 901.702 491.685 900.382V900.382C496.084 899.907 499.42 896.197 499.426 891.773L499.685 708.382L499.943 525.666C499.951 520.069 500.875 514.512 502.679 509.215V509.215C506.467 498.094 511.754 489.557 519.98 481.282C527.75 473.464 535.038 468.745 545.213 464.94C553.437 461.865 572.642 460.71 582.746 462.683C605.287 467.084 624.838 484.756 633.131 508.225V508.225C635 513.513 635.963 519.08 635.979 524.689L636.455 689.875L636.913 848.991C636.932 855.678 643.978 860.012 649.955 857.013V857.013C664.911 849.51 682.159 839.593 695.901 830.595V830.595C701.863 826.692 705.455 820.046 705.455 812.92V583.211C705.455 413.319 705.777 340.339 706.546 336.18C708.763 324.185 716.558 313.757 727.23 308.507C733.573 305.387 734.5 305.215 744.939 305.219C755.049 305.222 758.649 305.954 763.5 308.507C774.055 314.061 779.116 322.479 781.905 333.185C783.281 338.467 783.455 362.492 783.455 547.048C783.455 741.465 783.564 754.871 785.131 753.587C786.054 752.833 791.159 746.998 796.477 740.621C856.831 668.25 888.647 594.484 899.156 502.556C901.658 480.679 901.662 423.739 899.164 401.215C893.347 348.771 882.256 306.938 862.869 264.33C824.083 179.088 751.55 100.867 667.955 54.1346C618.093 26.2596 566.07 9.88263 502.955 2.19063C490.626 0.687629 432.526 -0.609372 418.455 0.303628Z"
-      :fill="fill ? fill : $vuetify.theme.dark ? 'white' : 'black'"
+      :fill="fill ? fill : theme.current.value.dark ? 'white' : 'black'"
    />
  </svg>
 </template>

-<script>
-export default {
-  props: {
-    gradient1: {
-      type: String,
-      default: "white"
-    },
-    gradient2: {
-      type: String,
-      default: "white"
-    },
-    fill: {
-      type: String
-    }
-  }
-};
+<script setup lang="ts">
+import { useTheme } from "vuetify"
+
+const props = defineProps<{
+  gradient1: string
+  gradient2: string
+  fill: string
+}>()
+
+const theme = useTheme()
 </script>

 <style scoped></style>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -1,9 +1,9 @@
 <template>
  <div id="header">
-    <v-toolbar dark>
+    <v-toolbar color="surface">
      <v-app-bar-nav-icon
        @click.stop="sidebar = !sidebar"
-        v-if="$vuetify.breakpoint.mobile"
+        v-if="display.mobile.value"
      ></v-app-bar-nav-icon>
      <v-toolbar-title
        class="troplo-title"
@ -12,12 +12,11 @@
        >Troplo's Website</v-toolbar-title
      >
      <v-spacer></v-spacer>
-      <v-list v-if="!$vuetify.breakpoint.mobile">
+      <div class="d-flex mr-4" style="gap: 4px" v-if="!display.mobile.value">
        <v-btn
          text
          v-for="item in items"
          :key="item.id"
-          class="ml-1"
          :to="item.path"
          style="text-transform: unset !important"
          :disabled="item.disabled"
@ -36,59 +35,47 @@
            }}</v-icon>
          </v-list-item-title>
        </v-btn>
-      </v-list>
+      </div>
    </v-toolbar>
    <v-navigation-drawer
      floating
      color="dark"
      app
      v-model="sidebar"
-      v-if="$vuetify.breakpoint.mobile"
+      v-if="display.mobile.value"
      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-icon>{{ item.icon }}</v-icon>

-          <v-list-item-content>
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item-content>
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </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 link>
+          <v-icon>{{
+            theme.current.value.dark
+              ? "mdi-lightbulb-on"
+              : "mdi-lightbulb-outline"
+          }}</v-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: 3, title: "Contact", icon: "mdi-email", path: "/contact" }
-      ]
-    }
-  },
-  mounted() {
-    this.$vuetify.theme = { dark: true }
-  }
-}
+<script setup lang="ts">
+import { useDisplay, useTheme } from "vuetify"
+import { ref } from "vue"
+
+const display = useDisplay()
+const theme = useTheme()
+
+const sidebar = ref(false)
+const items = ref([
+  { id: 1, title: "Home", icon: "mdi-home", path: "/" },
+  { id: 3, title: "Contact", icon: "mdi-email", path: "/contact" }
+])
 </script>

 <style scoped></style>
--- a/troplo-website-next/src/components/README.md
+++ b/troplo-website-next/src/components/README.md
--- a/troplo-website-next/src/gql/fragment-masking.ts
+++ b/troplo-website-next/src/gql/fragment-masking.ts
--- a/troplo-website-next/src/gql/gql.ts
+++ b/troplo-website-next/src/gql/gql.ts
--- a/troplo-website-next/src/gql/graphql.ts
+++ b/troplo-website-next/src/gql/graphql.ts
--- a/troplo-website-next/src/gql/index.ts
+++ b/troplo-website-next/src/gql/index.ts
--- a/troplo-website-next/src/graphql/announcements/announcements.query.ts
+++ b/troplo-website-next/src/graphql/announcements/announcements.query.ts
--- a/troplo-website-next/src/graphql/status/status.query.ts
+++ b/troplo-website-next/src/graphql/status/status.query.ts
--- a/src/main.js
+++ b/src/main.js
@ -1,106 +0,0 @@
-import Vue from "vue"
-import App from "./App.vue"
-import router from "./router"
-import vuetify from "./plugins/vuetify"
-import store from "./store"
-import VueMatomo from "vue-matomo"
-import "./assets/style.css"
-Vue.config.productionTip = false
-Vue.use(VueMatomo, {
-  // Configure your matomo server and site by providing
-  host: "https://analytics.flowinity.com",
-  siteId: 4,
-
-  // Changes the default .js and .php endpoint's filename
-  // Default: 'matomo'
-  trackerFileName: "matomo",
-
-  // Overrides the autogenerated tracker endpoint entirely
-  // Default: undefined
-  // trackerUrl: 'https://example.com/whatever/endpoint/you/have',
-
-  // Overrides the autogenerated tracker script path entirely
-  // Default: undefined
-  // trackerScriptUrl: 'https://example.com/whatever/script/path/you/have',
-
-  // Enables automatically registering pageviews on the router
-  router: router,
-
-  // Enables link tracking on regular links. Note that this won't
-  // work for routing links (ie. internal Vue router links)
-  // Default: true
-  enableLinkTracking: true,
-
-  // Require consent before sending tracking information to matomo
-  // Default: false
-  requireConsent: false,
-
-  // Whether to track the initial page view
-  // Default: true
-  trackInitialView: true,
-
-  // Run Matomo without cookies
-  // Default: false
-  disableCookies: false,
-
-  // Require consent before creating matomo session cookie
-  // Default: false
-  requireCookieConsent: false,
-
-  // Enable the heartbeat timer (https://developer.matomo.org/guides/tracking-javascript-guide#accurately-measure-the-time-spent-on-each-page)
-  // Default: false
-  enableHeartBeatTimer: false,
-
-  // Set the heartbeat timer interval
-  // Default: 15
-  heartBeatTimerInterval: 15,
-
-  // Whether or not to log debug information
-  // Default: false
-  debug: false,
-
-  // UserID passed to Matomo (see https://developer.matomo.org/guides/tracking-javascript-guide#user-id)
-  // Default: undefined
-  userId: undefined,
-
-  // Share the tracking cookie across subdomains (see https://developer.matomo.org/guides/tracking-javascript-guide#measuring-domains-andor-sub-domains)
-  // Default: undefined, example '*.example.com'
-  cookieDomain: undefined,
-
-  // Tell Matomo the website domain so that clicks on these domains are not tracked as 'Outlinks'
-  // Default: undefined, example: '*.example.com'
-  domains: "*.troplo.com",
-
-  // A list of pre-initialization actions that run before matomo is loaded
-  // Default: []
-  // Example: [
-  //   ['API_method_name', parameter_list],
-  //   ['setCustomVariable','1','VisitorType','Member'],
-  //   ['appendToTrackingUrl', 'new_visit=1'],
-  //   etc.
-  // ]
-  preInitActions: [],
-
-  // A function to determine whether to track an interaction as a site search
-  // instead of as a page view. If not a function, all interactions will be
-  // tracked as page views. Receives the new route as an argument, and
-  // returns either an object of keyword, category (optional) and resultsCount
-  // (optional) to track as a site search, or a falsey value to track as a page
-  // view.
-  // Default: false, i.e. track all interactions as page views
-  // Example: (to) => {
-  //   if (to.query.q && to.name === 'search') {
-  //     return { keyword: to.query.q, category: to.params.category }
-  //   } else {
-  //    return null
-  //   }
-  // }
-  trackSiteSearch: false
-})
-
-new Vue({
-  router,
-  vuetify,
-  store,
-  render: (h) => h(App)
-}).$mount("#app")
--- a/troplo-website-next/src/main.ts
+++ b/troplo-website-next/src/main.ts
--- a/troplo-website-next/src/pages/404.vue
+++ b/troplo-website-next/src/pages/404.vue
--- a/troplo-website-next/src/pages/README.md
+++ b/troplo-website-next/src/pages/README.md
--- a/troplo-website-next/src/pages/contact.vue
+++ b/troplo-website-next/src/pages/contact.vue
--- a/troplo-website-next/src/pages/index.vue
+++ b/troplo-website-next/src/pages/index.vue
--- a/troplo-website-next/src/plugins/README.md
+++ b/troplo-website-next/src/plugins/README.md
--- a/troplo-website-next/src/plugins/apollo.ts
+++ b/troplo-website-next/src/plugins/apollo.ts
--- a/troplo-website-next/src/plugins/index.ts
+++ b/troplo-website-next/src/plugins/index.ts
--- a/src/plugins/vuetify.js
+++ b/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"
-      }
-    }
-  }
-})
--- a/troplo-website-next/src/plugins/vuetify.ts
+++ b/troplo-website-next/src/plugins/vuetify.ts
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,54 +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: "/",
-    name: "Home",
-    // 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: "/projects",
-    name: "Projects",
-    redirect: "/",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-  },
-  {
-    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
--- a/troplo-website-next/src/router/index.ts
+++ b/troplo-website-next/src/router/index.ts
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,21 +0,0 @@
-import Vue from "vue"
-import Vuex from "vuex"
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-    site: {
-      name: "Troplo's Website",
-      route: "Home"
-    }
-  },
-  mutations: {
-    setSite(state, data) {
-      state.site = data
-    },
-    setRoute(state, data) {
-      state.site.route = data
-    }
-  }
-})
--- a/troplo-website-next/src/stores/announcements.store.ts
+++ b/troplo-website-next/src/stores/announcements.store.ts
--- a/troplo-website-next/src/stores/index.ts
+++ b/troplo-website-next/src/stores/index.ts
--- a/troplo-website-next/src/styles/README.md
+++ b/troplo-website-next/src/styles/README.md
--- a/troplo-website-next/src/styles/index.css
+++ b/troplo-website-next/src/styles/index.css
--- a/troplo-website-next/src/styles/settings.scss
+++ b/troplo-website-next/src/styles/settings.scss
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@ -1,116 +0,0 @@
-<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 v-if="contact.icon">{{ contact.icon }}</v-icon>
-            <FlowinityLogo style="width: 24px" v-else />
-            <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>
-import FlowinityLogo from "@/components/FlowinityLogo.vue"
-
-export default {
-  name: "Contact",
-  data() {
-    return {
-      contacts: [
-        {
-          id: 0,
-          icon: null,
-          title: "Flowinity",
-          displayName: "Troplo",
-          url: "https://flowinity.com/u/Troplo"
-        },
-        {
-          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:flowinity.com",
-          url: "https://matrix.to/#/@troplo:flowinity.com?via=flowinity.com"
-        },*/
-        {
-          id: 3,
-          icon: "mdi-discord",
-          title: "Discord",
-          displayName: "@troplo",
-          url: "https://discord.com/users/692259321907773460"
-        },
-        {
-          id: 9,
-          icon: "mdi-mastodon",
-          title: "Mastodon",
-          displayName: "@Troplo@social.troplo.com",
-          url: "https://social.troplo.com/@Troplo"
-        },
-        {
-          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"
-        }
-      ]
-    }
-  },
-  components: {
-    FlowinityLogo
-  }
-}
-</script>
-
-<style scoped>
-a {
-  text-decoration: none;
-}
-</style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,26 +0,0 @@
-<template>
-  <div id="home">
-    <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>
-        </v-container>
-      </v-card>
-    </v-container>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Home"
-}
-</script>
--- a/src/views/Nexus.vue
+++ b/src/views/Nexus.vue
@ -1,11 +0,0 @@
-<template>
-  <div id="nexus"></div>
-</template>
-
-<script>
-export default {
-  name: "Nexus"
-}
-</script>
-
-<style scoped></style>
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@ -1,21 +0,0 @@
-<template>
-  <div>
-    <v-container>
-      <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>
-          <v-btn text @click="$router.push('/')">Go Home</v-btn>
-        </v-container>
-      </v-card>
-    </v-container>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "NotFound"
-}
-</script>
-
-<style scoped></style>
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@ -1,976 +0,0 @@
-<template>
-  <div id="projects">
-    <v-container :fluid="useVu.breakpoint.lgAndDown">
-      <v-card
-        elevation="8"
-        class="troplo-header rounded-xl text-center"
-        v-if="false"
-      >
-        <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>
-        </v-container>
-      </v-card>
-      <p class="justify-center text-center text-h4">My Projects</p>
-      <v-row>
-        <v-col lg="3" v-for="(project, index) in getVisible" :key="index">
-          <v-card class="rounded-xl troplo-p" elevation="8">
-            <v-hover v-slot="{ hover }">
-              <v-img
-                :alt="'Image of ' + project.name"
-                :src="getImage(project.internalName)"
-              >
-                <a :href="getImage(project.internalName)" target="_blank">
-                  <v-fade-transition v-if="hover">
-                    <v-overlay absolute>
-                      <v-icon large>mdi-open-in-new</v-icon>
-                    </v-overlay>
-                  </v-fade-transition>
-                </a>
-              </v-img>
-            </v-hover>
-
-            <v-card-title
-              >{{ project.name }}
-              <v-chip v-if="project.release" outlined class="ml-2" small>
-                <v-icon size="18" class="mr-1 ml-n1">mdi-clock</v-icon>
-                {{ project.release }}
-              </v-chip></v-card-title
-            >
-
-            <v-card-text>
-              <span style="white-space: pre-line; overflow-wrap: anywhere">{{
-                project.description
-              }}</span>
-            </v-card-text>
-
-            <v-divider class="mx-4"></v-divider>
-
-            <v-card-title>Information</v-card-title>
-
-            <v-card-text>
-              <v-chip-group column>
-                <v-chip
-                  v-for="tag in project.tags"
-                  :key="tag.id"
-                  :href="tag.link"
-                  :color="tag.color"
-                  :disabled="!tag.link"
-                  class="troplo-p"
-                  :text-color="tag.textColor || 'white'"
-                  style="opacity: 1"
-                >
-                  <v-img
-                    v-if="tag.icon === 'crystal'"
-                    src="../assets/icons/crystal-icon.svg"
-                    width="30"
-                    height="30"
-                  ></v-img>
-                  {{ tag.icon }}
-                  <v-icon
-                    v-if="tag.icon !== 'crystal'"
-                    :color="tag.textColor || 'white'"
-                    >{{ tag.icon }}</v-icon
-                  >
-                  <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-if="project.links.length">
-              <v-btn
-                v-for="link in project.links"
-                :key="link.name"
-                color="blue"
-                text
-                :href="link.link"
-              >
-                {{ link.name }}
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from tags[Tags.Vue]
-import { useDisplay } from tags[Tags.Vuetify]
-
-const display = useDisplay()
-
-enum Tags  {
-  Active,
-  Vue,
-  Vuetify,
-  Express,
-  TypeScript,
-  Android ,
-  Kotlin ,
-  GraphQL,
-  Firebase,
-  Inactive,
-  DevelopmentHalted ,
-  Crystal ,
-  NoLongerAffiliated
-}
-
-const tags = {
-  [Tags.Active]: {
-    internalName: "active",
-    name: "Active",
-    icon: "mdi-check-circle",
-    color: "success"
-  },
-  [Tags.Vue]: {
-    internalName: tags[Tags.Vue],
-    name: "Vue",
-    icon: "mdi-vuejs",
-    color: "#42b883",
-    link: "https://vuejs.org",
-    textColor: "black"
-  },
-  [Tags.Vuetify]: {
-    internalName: tags[Tags.Vuetify],
-    name: "Vuetify",
-    icon: "mdi-vuetify",
-    link: "https://vuetifyjs.com",
-    color: "#2196F3"
-  },
-  [Tags.Express]: {
-    internalName: tags[Tags.Express],
-    name: "Express",
-    icon: "mdi-nodejs",
-    link: "https://expressjs.com"
-  },
-  [Tags.TypeScript]: {
-    internalName: tags[Tags.TypeScript],
-    name: "TypeScript",
-    icon: "mdi-language-typescript",
-    link: "https://typescriptlang.org",
-    color: "#007acc"
-  },
-  [Tags.Android]: {
-    internalName: "android",
-    name: "Android",
-    icon: "mdi-android",
-    link: "https://android.com",
-    color: "#3ddc84",
-    textColor: "black"
-  },
-  [Tags.Kotlin]: {
-    internalName: "kotlin",
-    name: "Kotlin",
-    icon: "mdi-language-kotlin",
-    link: "https://kotlinlang.org",
-    color: "#E24462"
-  },
-  [Tags.GraphQL]: {
-    internalName: tags[Tags.GraphQL],
-    name: "GraphQL",
-    icon: "mdi-graphql",
-    link: "https://graphql.org"
-  },
-  [Tags.Firebase]: {
-    internalName: tags[Tags.Firebase],
-    name: "Google APIs",
-    icon: "mdi-firebase",
-    link: "https://firebase.com"
-  },
-  [Tags.Inactive]: {
-    internalName: tags[Tags.Inactive],
-    name: "Discontinued",
-    color: "error",
-    icon: "mdi-alert-circle"
-  },
-  [Tags.DevelopmentHalted]: {
-    internalName: tags[Tags.DevelopmentHalted],
-    name: "Halted",
-    icon: "mdi-pause-octagon",
-    color: "warning"
-  },
-  [Tags.Crystal]: {
-    internalName: tags[Tags.Crystal],
-    color: "white",
-    textColor: "black",
-    name: "Crystal",
-    icon: tags[Tags.Crystal],
-    link: "https://crystal-lang.org"
-  },
-  [Tags.NoLongerAffiliated]: {
-    internalName: tags[Tags.NoLongerAffiliated],
-    name: "No longer affiliated",
-    icon: "mdi-help-circle",
-    color: "indigo"
-  }
-}
-
-const projects = [
-  {
-    id: 2,
-    name: "Flowinity",
-    release: "2021",
-    internalName: "proj01",
-    tags: [tags[Tags.Active], tags[Tags.Vue], tags[Tags.Vuetify], tags[Tags.Express], tags[Tags.TypeScript]],
-    description: "The versatile online social and collaborative platform.",
-    visible: true,
-    links: [
-      {
-        name: "Website",
-        link: "https://flowinity.com"
-      },
-      {
-        name: "GitHub",
-        link: "https://github.com/Flowinity/Flowinity"
-      }
-    ]
-  },
-  {
-    id: 13,
-    name: "FlowForms",
-    release: "2024",
-    internalName: "flowforms",
-    tags: [tags[Tags.Active], tags[Tags.Vue], tags[Tags.Vuetify], tags[Tags.GraphQL], tags[Tags.TypeScript]],
-    description: "The free flow chart form builder.",
-    visible: true,
-    links: [
-      {
-        name: "Website",
-        link: "https://flowforms.com"
-      },
-      {
-        name: "GitHub",
-        link: "https://github.com/Troplo/FlowForms"
-      }
-    ]
-  },
-  {
-    id: 14,
-    name: "Flowinity for Android",
-    release: "2023",
-    internalName: "flowinity-android",
-    tags: [tags[Tags.Active], tags[Tags.Android], "kotlin"],
-    description:
-      "The versatile online social and collaborative platform for Android.",
-    visible: true,
-    links: [
-      {
-        name: "Google Play",
-        link: "https://play.google.com/store/apps/details?id=com.troplo.privateuploader"
-      },
-      {
-        name: "GitHub",
-        link: "https://github.com/Flowinity/Android"
-      }
-    ]
-  },
-  {
-    id: 12,
-    name: "Colubrina",
-    internalName: "colubrina",
-    tags: [tags[Tags.Inactive], tags[Tags.Vue], tags[Tags.Vuetify], tags[Tags.Express]],
-    description:
-      "NOTE: Colubrina is now part of Flowinity as Flowinity Communications.\n\nColubrina - a simple open source chat platform written in Vue, Vuetify, NodeJS, and Socket.io.",
-    visible: true,
-    release: "2022",
-    links: [
-      {
-        name: "Website",
-        link: "https://colubrina.troplo.com"
-      },
-      {
-        name: "GitHub",
-        link: "https://github.com/Troplo/Colubrina"
-      }
-    ]
-  },
-  {
-    id: 11,
-    name: "BetterCompass",
-    internalName: "compass-vue",
-    release: "2022",
-    tags: [tags[Tags.Inactive], tags[Tags.Vue], tags[Tags.Vuetify], tags[Tags.Express]],
-    description:
-      "An open source modern frontend for the JDLF Compass School Manager written in Vue.js.",
-    visible: true,
-    links: [
-      {
-        name: "Website",
-        link: "https://compass.troplo.com"
-      },
-      {
-        name: "GitHub",
-        link: "https://github.com/Troplo/BetterCompass"
-      }
-    ]
-  },
-  {
-    id: 14,
-    name: "GeoGuess",
-    internalName: "geoguess",
-    release: "2022",
-    description:
-      "Contributed changes & fixes to the open source geography game GeoGuess.",
-    visible: true,
-    tags: [tags[Tags.Active], tags[Tags.Vue], tags[Tags.Vuetify], tags[Tags.Firebase]],
-    links: [
-      {
-        name: "My Instance",
-        link: "https://geo.troplo.com"
-      },
-      {
-        name: "GitHub",
-        link: "https://github.com/GeoGuess/GeoGuess"
-      },
-      {
-        name: "Website",
-        link: "https://geoguess.games"
-      }
-    ]
-  },
-  {
-    id: 3,
-    name: "Mira",
-    release: "2021",
-    internalName: "mira",
-    tags: [tags[Tags.Inactive], tags[Tags.Vue], tags[Tags.Crystal]],
-    description: "EPUB reader written in Crystal and Vue.js.",
-    visible: true,
-    links: [
-      {
-        name: "GitHub",
-        link: "https://github.com/pinnoto/mira"
-      }
-    ]
-  },
-  {
-    id: 10,
-    name: "Vixlatio",
-    internalName: "vixlatio",
-    release: "2022",
-    tags: [tags[Tags.Active], tags[Tags.Vue], tags[Tags.Express]],
-    description:
-      "Developer for Vixlatio, a blazing fast gaming platform that is powered by the creativity of its users.",
-    visible: true,
-    links: []
-  },
-  {
-    id: 13,
-    name: "Kansas",
-    internalName: "kansas",
-    release: "2022",
-    tags: [tags[Tags.DevelopmentHalted], tags[Tags.Vue], tags[Tags.Vuetify], tags[Tags.Express]],
-    description: "Open source project tracking software written in Vue.js.",
-    visible: true,
-    links: []
-  },
-  {
-    id: 7,
-    name: "Troplo's Website",
-    release: "2021",
-    internalName: "troplo-website",
-    tags: [tags[Tags.Active], tags[Tags.Vue], tags[Tags.Vuetify]],
-    description: "The website you are viewing right now.",
-    visible: true,
-    links: [
-      {
-        name: "GitHub",
-        link: "https://github.com/Troplo/website"
-      },
-      {
-        name: "Website",
-        link: "https://troplo.com"
-      }
-    ]
-  },
-  {
-    id: 1,
-    name: "Kaverti",
-    release: "2020",
-    internalName: "kaverti",
-    tags: [tags[Tags.Inactive], tags[Tags.Vue], tags[Tags.Express]],
-    description:
-      "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
-    visible: true,
-    links: []
-  }
-]
-
-const getVisible = computed(() => projects.filter((i) => i.visible))
-
-const getImage = (image) => {
-  try {
-    return require(`../assets/images/${image}.png`)
-  } catch {
-    return `https://dummyimage.com/3840x2035/151515/ffffff.png&text=${image}`
-  }
-}
-
-// export default {
-//   name: "Projects",
-//   data() {
-//     return {
-//       projects: [
-//         {
-//           id: 2,
-//           name: "Flowinity",
-//           release: "2021",
-//           internalName: "proj01",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Active],
-//               name: tags[Tags.Active],
-//               icon: "mdi-check-circle",
-//               color: "success"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             },
-//             {
-//               internalName: tags[Tags.Express],
-//               name: "Express",
-//               icon: "mdi-nodejs",
-//               link: "https://expressjs.com"
-//             },
-//             {
-//               internalName: tags[Tags.TypeScript],
-//               name: "TypeScript",
-//               icon: "mdi-language-typescript",
-//               link: "https://typescriptlang.org",
-//               color: "#007acc"
-//             }
-//           ],
-//           description:
-//             "The versatile online social and collaborative platform.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "Website",
-//               link: "https://flowinity.com"
-//             },
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/Flowinity/Flowinity"
-//             }
-//           ]
-//         },
-//         {
-//           id: 13,
-//           name: "FlowForms",
-//           release: "2024",
-//           internalName: "flowforms",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Active],
-//               name: tags[Tags.Active],
-//               icon: "mdi-check-circle",
-//               color: "success"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             },
-//             {
-//               internalName: tags[Tags.GraphQL],
-//               name: "GraphQL",
-//               icon: "mdi-graphql",
-//               link: "https://graphql.org"
-//             },
-//             {
-//               internalName: tags[Tags.TypeScript],
-//               name: "TypeScript",
-//               icon: "mdi-language-typescript",
-//               link: "https://typescriptlang.org",
-//               color: "#007acc"
-//             }
-//           ],
-//           description: "The free flow chart form builder.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "Website",
-//               link: "https://flowforms.com"
-//             },
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/Troplo/FlowForms"
-//             }
-//           ]
-//         },
-//         {
-//           id: 14,
-//           name: "Flowinity for Android",
-//           release: "2023",
-//           internalName: "flowinity-android",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Active],
-//               name: tags[Tags.Active],
-//               icon: "mdi-check-circle",
-//               color: "success"
-//             },
-//             {
-//               internalName: tags[Tags.Android],
-//               name: tags[Tags.Android],
-//               icon: "mdi-android",
-//               link: "https://android.com",
-//               color: "#3ddc84",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: "kotlin",
-//               name: "Kotlin",
-//               icon: "mdi-language-kotlin",
-//               link: "https://kotlinlang.org",
-//               color: "#E24462"
-//             }
-//           ],
-//           description:
-//             "The versatile online social and collaborative platform for Android.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "Google Play",
-//               link: "https://play.google.com/store/apps/details?id=com.troplo.privateuploader"
-//             },
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/Flowinity/Android"
-//             }
-//           ]
-//         },
-//         {
-//           id: 12,
-//           name: "Colubrina",
-//           internalName: "colubrina",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Inactive],
-//               name: "Discontinued",
-//               color: "error",
-//               icon: "mdi-alert-circle"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             },
-//             {
-//               internalName: tags[Tags.Express],
-//               name: "Express",
-//               icon: "mdi-nodejs",
-//               link: "https://expressjs.com"
-//             }
-//           ],
-//           description:
-//             "NOTE: Colubrina is now part of Flowinity as Flowinity Communications.\n\nColubrina - a simple open source chat platform written in Vue, Vuetify, NodeJS, and Socket.io.",
-//           visible: true,
-//           release: "2022",
-//           links: [
-//             {
-//               name: "Website",
-//               link: "https://colubrina.troplo.com"
-//             },
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/Troplo/Colubrina"
-//             }
-//           ]
-//         },
-//         {
-//           id: 11,
-//           name: "BetterCompass",
-//           internalName: "compass-vue",
-//           release: "2022",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Inactive],
-//               name: "Discontinued",
-//               color: "error",
-//               icon: "mdi-alert-circle"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             },
-//             {
-//               internalName: tags[Tags.Express],
-//               name: "Express",
-//               icon: "mdi-nodejs",
-//               link: "https://expressjs.com"
-//             }
-//           ],
-//           description:
-//             "An open source modern frontend for the JDLF Compass School Manager written in Vue.js.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "Website",
-//               link: "https://compass.troplo.com"
-//             },
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/Troplo/BetterCompass"
-//             }
-//           ]
-//         },
-//         {
-//           id: 14,
-//           name: "GeoGuess",
-//           internalName: "geoguess",
-//           release: "2022",
-//           description:
-//             "Contributed changes & fixes to the open source geography game GeoGuess.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "My Instance",
-//               link: "https://geo.troplo.com"
-//             },
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/GeoGuess/GeoGuess"
-//             },
-//             {
-//               name: "Website",
-//               link: "https://geoguess.games"
-//             }
-//           ],
-//           tags: [
-//             {
-//               internalName: tags[Tags.Active],
-//               name: tags[Tags.Active],
-//               icon: "mdi-check-circle",
-//               color: "success"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             },
-//             {
-//               internalName: tags[Tags.Firebase],
-//               name: "Google APIs",
-//               icon: "mdi-firebase",
-//               link: "https://firebase.com"
-//             }
-//           ]
-//         },
-//         {
-//           id: 3,
-//           name: "Mira",
-//           release: "2021",
-//           internalName: "mira",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Inactive],
-//               name: "Discontinued",
-//               color: "error",
-//               icon: "mdi-alert-circle"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Crystal],
-//               color: "white",
-//               textColor: "black",
-//               name: "Crystal",
-//               icon: tags[Tags.Crystal],
-//               link: "https://crystal-lang.org"
-//             }
-//           ],
-//           description: "EPUB reader written in Crystal and Vue.js.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/pinnoto/mira"
-//             }
-//           ]
-//         },
-//         {
-//           id: 10,
-//           name: "Vixlatio",
-//           internalName: "vixlatio",
-//           release: "2022",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Active],
-//               name: "No longer affiliated",
-//               icon: "mdi-help-circle",
-//               color: "indigo"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org"
-//             },
-//             {
-//               internalName: tags[Tags.Express],
-//               name: "Express",
-//               icon: "mdi-nodejs",
-//               link: "https://expressjs.com"
-//             }
-//           ],
-//           description:
-//             "Developer for Vixlatio, a blazing fast gaming platform that is powered by the creativity of its users.",
-//           visible: true,
-//           links: []
-//         },
-//         // {
-//         //   id: 5,
-//         //   name: "Berri",
-//         //   release: "2021",
-//         //   internalName: "berri",
-//         //   tags: [
-//         //     {
-//         //       internalName: tags[Tags.DevelopmentHalted],
-//         //       name: "Halted",
-//         //       icon: "mdi-pause-octagon",
-//         //       color: "warning"
-//         //     },
-//         //     {
-//         //       internalName: tags[Tags.Vue],
-//         //       name: "Vue",
-//         //       icon: "mdi-vuejs",
-//         //       color: "#42b883",
-//         //       link: "https://vuejs.org",
-//         //       textColor: "black"
-//         //     },
-//         //     {
-//         //       internalName: tags[Tags.Crystal],
-//         //       color: "white",
-//         //       name: "Crystal",
-//         //       textColor: "black",
-//         //       icon: tags[Tags.Crystal],
-//         //       link: "https://crystal-lang.org"
-//         //     }
-//         //   ],
-//         //   description:
-//         //     "Open source file hosting service which aims to be performant, and modular.\nName not finalized.",
-//         //   visible: true,
-//         //   links: {}
-//         // },
-//         {
-//           id: 13,
-//           name: "Kansas",
-//           internalName: "kansas",
-//           release: "2022",
-//           tags: [
-//             {
-//               internalName: tags[Tags.DevelopmentHalted],
-//               name: "Halted",
-//               icon: "mdi-pause-octagon",
-//               color: "warning"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             },
-//             {
-//               internalName: tags[Tags.Express],
-//               name: "Express",
-//               icon: "mdi-nodejs",
-//               link: "https://expressjs.com"
-//             }
-//           ],
-//           description:
-//             "Open source project tracking software written in Vue.js.",
-//           visible: true,
-//           links: {}
-//         } /*
-//         {
-//           id: 6,
-//           name: "Flowinity",
-//           internalName: "flowinity",
-//           tags: [
-//             {
-//               internalName: tags[Tags.DevelopmentHalted],
-//               name: "Halted",
-//               icon: "mdi-pause-octagon",
-//               color: "warning"
-//             }
-//           ],
-//           description: "A tech blog.",
-//           visible: true,
-//           links: {}
-//         },*/,
-//         {
-//           id: 7,
-//           name: "Troplo's Website",
-//           release: "2021",
-//           internalName: "troplo-website",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Active],
-//               name: tags[Tags.Active],
-//               icon: "mdi-check-circle",
-//               color: "success"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org",
-//               textColor: "black"
-//             },
-//             {
-//               internalName: tags[Tags.Vuetify],
-//               name: "Vuetify",
-//               icon: "mdi-vuetify",
-//               link: "https://vuetifyjs.com",
-//               color: "#2196F3"
-//             }
-//           ],
-//           description: "The website you are viewing right now.",
-//           visible: true,
-//           links: [
-//             {
-//               name: "GitHub",
-//               link: "https://github.com/Troplo/website"
-//             },
-//             {
-//               name: "Website",
-//               link: "https://troplo.com"
-//             }
-//           ]
-//         },
-//         {
-//           id: 1,
-//           name: "Kaverti",
-//           release: "2020",
-//           internalName: "kaverti",
-//           tags: [
-//             {
-//               internalName: tags[Tags.Inactive],
-//               name: "Discontinued",
-//               color: "error",
-//               icon: "mdi-alert-circle"
-//             },
-//             {
-//               internalName: tags[Tags.Vue],
-//               name: "Vue",
-//               icon: "mdi-vuejs",
-//               color: "#42b883",
-//               link: "https://vuejs.org"
-//             },
-//             {
-//               internalName: tags[Tags.Express],
-//               name: "Express",
-//               icon: "mdi-nodejs",
-//               link: "https://expressjs.com"
-//             }
-//           ],
-//           description:
-//             "A 3D sandbox game, and social avatar platform written in Express and Vue.js.",
-//           visible: true,
-//           links: []
-//         }
-//       ]
-//     }
-//   },
-//   computed: {
-//     getVisible() {
-//       return this.projects.filter((i) => i.visible)
-//     }
-//   },
-//   methods: {
-//     getImage(image) {
-//       try {
-//         return require("../assets/images/" + image + ".png")
-//       } catch {
-//         return (
-//           "https://dummyimage.com/3840x2035/151515/ffffff.png&text=" + image
-//         )
-//       }
-//     }
-//   }
-// }
-</script>
--- a/troplo-website-next/src/vite-env.d.ts
+++ b/troplo-website-next/src/vite-env.d.ts
--- a/troplo-website-next/.browserslistrc
+++ b/troplo-website-next/.browserslistrc
@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11
--- a/troplo-website-next/.eslintrc.js
+++ b/troplo-website-next/.eslintrc.js
@ -1,20 +0,0 @@
-/**
- * .eslint.js
- *
- * ESLint configuration file.
- */
-
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-  ],
-  rules: {
-    'vue/multi-word-component-names': 'off',
-  },
-}
--- a/troplo-website-next/.gitignore
+++ b/troplo-website-next/.gitignore
@ -1,22 +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?
--- a/troplo-website-next/README.md
+++ b/troplo-website-next/README.md
@ -1,81 +0,0 @@
-# Vuetify (Default)
-
-This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
-
-## ❗️ Important Links
-
- 📄 [Docs](https://vuetifyjs.com/)
- 🚨 [Issues](https://issues.vuetifyjs.com/)
- 🏬 [Store](https://store.vuetifyjs.com/)
- 🎮 [Playground](https://play.vuetifyjs.com/)
- 💬 [Discord](https://community.vuetifyjs.com)
-
-## 💿 Install
-
-Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
-
-| Package Manager                                                | Command        |
-|---------------------------------------------------------------|----------------|
-| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
-| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
-| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
-| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
-
-After completing the installation, your environment is ready for Vuetify development.
-
-## ✨ Features
-
- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
-
-These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
-
-## 💡 Usage
-
-This section covers how to start the development server and build your project for production.
-
-### Starting the Development Server
-
-To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
-
-```bash
-yarn dev
-```
-
-(Repeat for npm, pnpm, and bun with respective commands.)
-
-> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
-
-### Building for Production
-
-To build your project for production, use:
-
-```bash
-yarn build
-```
-
-(Repeat for npm, pnpm, and bun with respective commands.)
-
-Once the build process is completed, your application will be ready for deployment in a production environment.
-
-## 💪 Support Vuetify Development
-
-This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
-
- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
-
-## 📑 License
-[MIT](http://opensource.org/licenses/MIT)
-
-Copyright (c) 2016-present Vuetify, LLC
--- a/troplo-website-next/components.d.ts
+++ b/troplo-website-next/components.d.ts
@ -7,9 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
-    FlowinityLogo: typeof import('./src/components/FlowinityLogo.vue')['default']
    Header: typeof import('./src/components/Header.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
--- a/troplo-website-next/package.json
+++ b/troplo-website-next/package.json
@ -1,48 +0,0 @@
-{
-  "name": "troplo-website-next",
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --fix --ignore-path .gitignore",
-    "codegen": "graphql-codegen --config ./codegen.ts"
-  },
-  "dependencies": {
-    "@apollo/client": "^3.11.8",
-    "@graphql-codegen/cli": "^5.0.2",
-    "@graphql-codegen/introspection": "^4.0.3",
-    "@mdi/font": "^7.4.47",
-    "@vue/apollo-composable": "^4.2.1",
-    "core-js": "^3.37.1",
-    "graphql": "^16.9.0",
-    "graphql-tag": "^2.12.6",
-    "pinia": "^2.2.2",
-    "roboto-fontface": "*",
-    "vue": "^3.4.31",
-    "vuetify": "^3.6.11"
-  },
-  "devDependencies": {
-    "@babel/types": "^7.24.7",
-    "@types/node": "^20.14.10",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.4.0",
-    "eslint-plugin-vue": "^9.27.0",
-    "react": "^18.3.1",
-    "sass": "1.77.6",
-    "typescript": "^5.4.2",
-    "unplugin-fonts": "^1.1.1",
-    "unplugin-vue-components": "^0.27.2",
-    "unplugin-vue-router": "^0.10.0",
-    "vite": "^5.3.3",
-    "vite-plugin-vuetify": "^2.0.3",
-    "vue-router": "^4.4.0",
-    "vue-tsc": "^2.0.26"
-  }
-}
--- a/troplo-website-next/public/favicon.ico
+++ b/troplo-website-next/public/favicon.ico
--- a/troplo-website-next/public/favicon.png
+++ b/troplo-website-next/public/favicon.png
--- a/troplo-website-next/public/images/colubrina.png
+++ b/troplo-website-next/public/images/colubrina.png
--- a/troplo-website-next/public/images/compass-vue.png
+++ b/troplo-website-next/public/images/compass-vue.png
--- a/troplo-website-next/public/images/flowforms.png
+++ b/troplo-website-next/public/images/flowforms.png
--- a/troplo-website-next/public/images/flowinity-android.png
+++ b/troplo-website-next/public/images/flowinity-android.png
--- a/troplo-website-next/public/images/flowinity.png
+++ b/troplo-website-next/public/images/flowinity.png
--- a/troplo-website-next/public/images/geoguess.png
+++ b/troplo-website-next/public/images/geoguess.png
--- a/troplo-website-next/public/images/kaverti.png
+++ b/troplo-website-next/public/images/kaverti.png
--- a/troplo-website-next/public/images/mira.png
+++ b/troplo-website-next/public/images/mira.png
--- a/troplo-website-next/public/images/polytoria.png
+++ b/troplo-website-next/public/images/polytoria.png
--- a/troplo-website-next/public/images/proj01.png
+++ b/troplo-website-next/public/images/proj01.png
--- a/troplo-website-next/public/images/troplo-plex.png
+++ b/troplo-website-next/public/images/troplo-plex.png
--- a/troplo-website-next/public/images/troplo-website.png
+++ b/troplo-website-next/public/images/troplo-website.png
--- a/troplo-website-next/public/images/vixlatio.png
+++ b/troplo-website-next/public/images/vixlatio.png
--- a/troplo-website-next/src/App.vue
+++ b/troplo-website-next/src/App.vue
@ -1,76 +0,0 @@
-<template>
-  <v-app>
-    <v-main>
-      <v-alert
-        v-if="outages.length"
-        class="mb-0 p-0"
-        variant="tonal"
-        color="red"
-        :value="true"
-        tile
-      >
-        <div class="d-flex justify-space-between align-center justify-center">
-          <span class="d-flex">
-            <v-icon>mdi-alert-circle</v-icon>
-            <span class="ml-2">
-              You might be currently experiencing problems with:
-              {{ outageName }}.
-            </span></span
-          >
-          <v-btn
-            href="https://status.troplo.com"
-            size="small"
-            color="red"
-            variant="outlined"
-            >Learn more</v-btn
-          >
-        </div>
-      </v-alert>
-      <v-alert
-        v-for="banner in announcementsStore.banners"
-        :key="banner.id"
-        :value="true"
-        variant="tonal"
-        :type="banner.bannerType"
-        :icon="banner.bannerType === 'error' ? 'mdi-alert-circle' : undefined"
-        tile
-      >
-        <strong>UPCOMING:</strong>
-        {{ banner.bannerText }}
-        <template #append>
-          <v-btn
-            :to="`/announcements/${banner.id}`"
-            size="small"
-            variant="outlined"
-            >Learn more</v-btn
-          >
-        </template>
-      </v-alert>
-      <Header />
-      <router-view />
-    </v-main>
-  </v-app>
-</template>
-
-<script lang="ts" setup>
-//
-import Header from "@/components/Header.vue"
-import { computed, onMounted, ref } from "vue"
-import { useAnnouncementsStore } from "@/stores/announcements.store"
-
-const outages = ref<any[]>([])
-const announcementsStore = useAnnouncementsStore()
-
-onMounted(() => {
-  fetch("https://troplo-status.flowinity.workers.dev")
-    .then((res) => res.json())
-    .then((data) => {
-      outages.value = data.data.filter((d) => d.attributes.status !== "up")
-    })
-  announcementsStore.getBanners()
-})
-
-const outageName = computed(() => {
-  return outages.value.map((o) => o.attributes.pronounceable_name).join(", ")
-})
-</script>
--- a/troplo-website-next/src/components/FlowinityLogo.vue
+++ b/troplo-website-next/src/components/FlowinityLogo.vue
@ -1,24 +0,0 @@
-<template>
-  <svg viewBox="0 0 902 902" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M418.455 0.303628C368.601 3.53963 317.099 15.4736 274.671 33.6216C247.274 45.3406 230.542 54.3696 204.955 71.2386C176.877 89.7506 157.205 105.979 130.432 132.715C92.391 170.705 65.015 208.32 43.462 252.215C24.648 290.532 12.494 328.601 5.50901 371.098C0.525014 401.415 -0.0489904 409.979 0.00300957 453.215C0.0460096 488.587 0.307011 495.159 2.26401 510.012C12.064 584.424 36.235 647.831 76.868 705.715C88.227 721.897 108.825 746.978 121.86 760.5V760.5C123.716 762.425 126.973 761.118 126.983 758.444L127.455 635.5L127.933 510.88C127.948 507.16 128.87 503.498 130.62 500.215V500.215C134.346 493.224 140.794 486.918 147.366 483.836C152.023 481.652 154.372 481.215 161.455 481.215C168.538 481.215 170.887 481.652 175.544 483.836C182.369 487.037 188.65 493.382 192.253 500.715V500.715C194.031 504.333 194.959 508.311 194.965 512.342L195.22 665.376L195.464 811.774C195.477 819.73 199.528 827.136 206.22 831.44V831.44C219.113 839.731 233.998 848.715 234.844 848.715C235.18 848.715 235.455 724.137 235.455 571.875C235.455 301.89 235.503 294.849 237.38 287.507C243.152 264.94 260.408 246.135 281.881 239.012C289.036 236.639 291.492 236.334 303.455 236.334C315.418 236.334 317.874 236.639 325.029 239.012C346.502 246.135 363.758 264.94 369.53 287.507C371.409 294.855 371.455 302.194 371.455 595.356V893.375C371.455 894.718 372.392 895.879 373.705 896.164V896.164C376.489 896.767 387.479 898.218 401.955 899.893C414.535 901.348 479.439 901.702 491.685 900.382V900.382C496.084 899.907 499.42 896.197 499.426 891.773L499.685 708.382L499.943 525.666C499.951 520.069 500.875 514.512 502.679 509.215V509.215C506.467 498.094 511.754 489.557 519.98 481.282C527.75 473.464 535.038 468.745 545.213 464.94C553.437 461.865 572.642 460.71 582.746 462.683C605.287 467.084 624.838 484.756 633.131 508.225V508.225C635 513.513 635.963 519.08 635.979 524.689L636.455 689.875L636.913 848.991C636.932 855.678 643.978 860.012 649.955 857.013V857.013C664.911 849.51 682.159 839.593 695.901 830.595V830.595C701.863 826.692 705.455 820.046 705.455 812.92V583.211C705.455 413.319 705.777 340.339 706.546 336.18C708.763 324.185 716.558 313.757 727.23 308.507C733.573 305.387 734.5 305.215 744.939 305.219C755.049 305.222 758.649 305.954 763.5 308.507C774.055 314.061 779.116 322.479 781.905 333.185C783.281 338.467 783.455 362.492 783.455 547.048C783.455 741.465 783.564 754.871 785.131 753.587C786.054 752.833 791.159 746.998 796.477 740.621C856.831 668.25 888.647 594.484 899.156 502.556C901.658 480.679 901.662 423.739 899.164 401.215C893.347 348.771 882.256 306.938 862.869 264.33C824.083 179.088 751.55 100.867 667.955 54.1346C618.093 26.2596 566.07 9.88263 502.955 2.19063C490.626 0.687629 432.526 -0.609372 418.455 0.303628Z"
-      :fill="fill ? fill : theme.current.value.dark ? 'white' : 'black'"
-    />
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { useTheme } from "vuetify"
-
-const props = defineProps<{
-  gradient1: string
-  gradient2: string
-  fill: string
-}>()
-
-const theme = useTheme()
-</script>
-
-<style scoped></style>
--- a/troplo-website-next/src/components/Header.vue
+++ b/troplo-website-next/src/components/Header.vue
@ -1,81 +0,0 @@
-<template>
-  <div id="header">
-    <v-toolbar color="surface">
-      <v-app-bar-nav-icon
-        @click.stop="sidebar = !sidebar"
-        v-if="display.mobile.value"
-      ></v-app-bar-nav-icon>
-      <v-toolbar-title
-        class="troplo-title"
-        @click="$router.push('/')"
-        style="cursor: pointer"
-        >Troplo's Website</v-toolbar-title
-      >
-      <v-spacer></v-spacer>
-      <div class="d-flex mr-4" style="gap: 4px" v-if="!display.mobile.value">
-        <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"
-          class="ml-1"
-          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>
-      </div>
-    </v-toolbar>
-    <v-navigation-drawer
-      floating
-      color="dark"
-      app
-      v-model="sidebar"
-      v-if="display.mobile.value"
-      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-icon>{{ item.icon }}</v-icon>
-
-          <v-list-item-title>{{ item.title }}</v-list-item-title>
-        </v-list-item>
-        <v-list-item link>
-          <v-icon>{{
-            theme.current.value.dark
-              ? "mdi-lightbulb-on"
-              : "mdi-lightbulb-outline"
-          }}</v-icon>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDisplay, useTheme } from "vuetify"
-import { ref } from "vue"
-
-const display = useDisplay()
-const theme = useTheme()
-
-const sidebar = ref(false)
-const items = ref([
-  { id: 1, title: "Home", icon: "mdi-home", path: "/" },
-  { id: 3, title: "Contact", icon: "mdi-email", path: "/contact" }
-])
-</script>
-
-<style scoped></style>
--- a/troplo-website-next/yarn.lock
+++ b/troplo-website-next/yarn.lock
--- a/troplo-website-next/tsconfig.json
+++ b/troplo-website-next/tsconfig.json
--- a/troplo-website-next/tsconfig.node.json
+++ b/troplo-website-next/tsconfig.node.json
--- a/troplo-website-next/typed-router.d.ts
+++ b/troplo-website-next/typed-router.d.ts
--- a/troplo-website-next/vite.config.mts
+++ b/troplo-website-next/vite.config.mts
--- a/vue.config.js
+++ b/vue.config.js
@ -1,38 +0,0 @@
-const WebpackAutoInject = require("webpack-auto-inject-version")
-module.exports = {
-  transpileDependencies: ["vuetify"],
-  productionSourceMap: false,
-  configureWebpack: {
-    plugins: [
-      new WebpackAutoInject({
-        SHORT: "Versioning",
-        SILENT: false,
-        PACKAGE_JSON_PATH: "./package.json",
-        PACKAGE_JSON_INDENT: 2,
-        components: {
-          AutoIncreaseVersion: true,
-          InjectAsComment: true,
-          InjectByTag: true
-        },
-        componentsOptions: {
-          AutoIncreaseVersion: {
-            runInWatchMode: true
-          },
-          InjectAsComment: {
-            tag: "Version information: {version}, Build Date: {date}",
-            dateFormat: "dd/mm/yyyy; hh:MM:ss TT",
-            multiLineCommentType: false
-          },
-          InjectByTag: {
-            fileRegex: /\.+/,
-            AIVTagRegexp: /(\[AIV])(([a-zA-Z{} ,:;!()_@\-"'\\\/])+)(\[\/AIV])/g,
-            dateFormat: "dd/mm/yyyy; hh:MM:ss TT"
-          }
-        },
-        LOGS_TEXT: {
-          AIS_START: "AIV started"
-        }
-      })
-    ]
-  }
-}
--- a/yarn.lock
+++ b/yarn.lock