Bump

.browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v4

.github/workflows/publish-containers.yml

@@ -10,7 +10,7 @@ jobs:
     name: Publish rfd-fyi-backend
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Prepare
         id: prep
@@ -50,7 +50,7 @@ jobs:
     name: Publish rfd-fyi-frontend
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Prepare
         id: prep

Caddyfile

@@ -1,4 +1,5 @@
-rfd.davegallant.ca {
+rfd.fyi
+
 file_server
+
 reverse_proxy /api/* backend:8080
-}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.2.0-alpine3.16 as builder
+FROM node:20.2.0-alpine3.16 AS builder
 
 WORKDIR /app
 
@@ -10,7 +10,7 @@ COPY . .
 
 RUN npm run build
 
-FROM caddy:2.10.2-alpine as runtime
+FROM caddy:2.8.4-alpine AS runtime
 
 WORKDIR /my-site
 

Makefile

@@ -20,7 +20,8 @@ backend:
 
 ## frontend: Build and run the frontend from source
 frontend:
-	@npm run serve
+	@npm install @vue/cli-service
+	@npx vue-cli-service serve
 .PHONY: frontend
 
 ## dev: Build and run in docker compose

README.md

@@ -1,9 +1,11 @@
-# rfd-fyi
+# rfd.fyi
 
 This repository provides a simple, less-distracting overlay for hot deals posted on https://forums.redflagdeals.com.
 
 The frontend is made with Vue 3 and the backend is written in Go. The backend exists for caching purposes; to prevent excessive requests to RedFlagDeals itself.
 
+It is hosted at [rfd.fyi](https://rfd.fyi).
+
 ## Local Development
 
 To get up and running locally: in one pane/tab, run:

backend/Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker/dockerfile:1.18
+# syntax=docker/dockerfile:1.9
 FROM cgr.dev/chainguard/go:latest as build
 
 WORKDIR /src

backend/app.go

@@ -91,15 +91,12 @@ func (a *App) refreshTopics() {
 	for {
 		log.Info().Msg("Refreshing topics")
 		latestTopics := a.getDeals(9, 1, 6)
-
-		if len(latestTopics) > 0 {
 		latestTopics = a.updateScores(latestTopics)
 
 		log.Info().Msg("Refreshing redirects")
 		latestRedirects := a.getRedirects()
 		a.Redirects = latestRedirects
 		a.CurrentTopics = a.stripRedirects(latestTopics)
-		}
 
 		a.LastRefresh = time.Now()
 		rand.Seed(time.Now().UnixNano())

backend/go.mod

@@ -3,10 +3,10 @@ module github.com/davegallant/rfd-fyi
 go 1.18
 
 require (
-	github.com/dlclark/regexp2 v1.11.5
+	github.com/dlclark/regexp2 v1.11.4
 	github.com/gorilla/mux v1.8.1
 	github.com/joho/godotenv v1.5.1
-	github.com/rs/zerolog v1.34.0
+	github.com/rs/zerolog v1.33.0
 )
 
 require (

backend/go.sum

@@ -9,8 +9,6 @@ github.com/dlclark/regexp2 v1.11.2 h1:/u628IuisSTwri5/UKloiIsH8+qF2Pu7xEQX+yIKg6
 github.com/dlclark/regexp2 v1.11.2/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/dlclark/regexp2 v1.11.4 h1:rPYF9/LECdNymJufQKmri9gV604RvvABwgOA8un7yAo=
 github.com/dlclark/regexp2 v1.11.4/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
-github.com/dlclark/regexp2 v1.11.5 h1:Q/sSnsKerHeCkc/jSTNq1oCm7KiVgUMZRDUoRu0JQZQ=
-github.com/dlclark/regexp2 v1.11.5/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
 github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
 github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
@@ -23,15 +21,12 @@ github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APP
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/rs/xid v1.5.0/go.mod h1:trrq9SKmegXys3aeAKXMUTdJsYXVwGY3RLcfgqegfbg=
-github.com/rs/xid v1.6.0/go.mod h1:7XoLgs4eV+QndskICGsho+ADou8ySMSjJKDIan90Nz0=
 github.com/rs/zerolog v1.31.0 h1:FcTR3NnLWW+NnTwwhFWiJSZr4ECLpqCm6QsEnyvbV4A=
 github.com/rs/zerolog v1.31.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
 github.com/rs/zerolog v1.32.0 h1:keLypqrlIjaFsbmJOBdB/qvyF8KEtCWHwobLp5l/mQ0=
 github.com/rs/zerolog v1.32.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
 github.com/rs/zerolog v1.33.0 h1:1cU2KZkvPxNyfgEmhHAz/1A9Bz+llsdYzklWFzgp0r8=
 github.com/rs/zerolog v1.33.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
-github.com/rs/zerolog v1.34.0 h1:k43nTLIwcTVQAncfCw4KZ2VY6ukYoZaBPNOE8txlOeY=
-github.com/rs/zerolog v1.34.0/go.mod h1:bJsvje4Z08ROH4Nhs5iH600c3IkWhwp44iRc54W6wYQ=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.12.0 h1:CM0HF96J0hcLAwsHPJZjfdNzs0gftsLfgKt57wWHJ0o=

docker-compose.prod.yml

@@ -1,3 +1,4 @@
+version: "3.9"
 services:
   frontend:
     image: ghcr.io/davegallant/rfd-fyi-frontend

docker-compose.yml

@@ -1,3 +1,4 @@
+version: "3.9"
 services:
   frontend:
     build:

package.json

@@ -3,42 +3,37 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vite",
+    "serve": "vue-cli-service serve",
-    "preview": "vite preview",
+    "build": "vue-cli-service build",
-    "build": "vite build",
+    "lint": "vue-cli-service lint"
-    "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@fontsource/roboto": "5.2.6",
     "@github/hotkey": "^3.0.0",
-    "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
-    "axios": "^1.12.0",
+    "axios": "^1.6.0",
+    "bootstrap": "^5.3.1",
+    "bootstrap-vue": "^2.22.0",
     "core-js": "^3.32.1",
     "cssnano": "^7.0.0",
     "jquery": "^3.7.0",
     "moment": "^2.29.4",
-    "vue": "^3.5.17",
+    "vue": "^3.3.4",
     "vue-github-button": "^3.0.3",
+    "vue-gtag": "^2.0.1",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^4.5.1",
+    "vue-router": "4.4.3"
-    "vuetify": "^3.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@types/bootstrap": "^5.2.6",
+    "@types/mousetrap": "^1.6.11",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "^5.0.9",
+    "@vue/cli-service": "^5.0.8",
-    "eslint": "^8.47.0",
+    "eslint": "^9.0.0",
     "eslint-plugin-vue": "^9.17.0",
-    "postcss-cli": "^11.0.0",
+    "postcss-cli": "^11.0.0"
-    "sass-embedded": "^1.89.2",
-    "unplugin-fonts": "^1.3.1",
-    "unplugin-vue-components": "^29.0.0",
-    "vite": "^6.3.6",
-    "vite-plugin-vuetify": "^2.1.1"
   },
   "eslintConfig": {
     "root": true,
@@ -53,5 +48,11 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {}
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }

public/index.html

@@ -10,12 +10,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
     />
-    <title>rfd-fyi - An overlay of hot deals</title>
+    <title>rfd.fyi - An overlay of hot deals</title>
-    <script
-      defer
-      src="https://umami.snake-cloud.ts.net/script.js"
-      data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"
-    ></script>
   </head>
   <body>
     <noscript>
@@ -25,7 +20,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

@@ -2,37 +2,33 @@
 import axios from "axios";
 import moment from "moment";
 import Loading from "vue-loading-overlay";
+import GithubButton from "vue-github-button";
 import { install } from "@github/hotkey";
 
 import "vue-loading-overlay/dist/css/index.css";
-import { ref } from "vue";
 
 export default {
   data() {
     return {
       ascending: this.ascending,
       filter: window.location.href.split("filter=")[1] || "",
+      isLoading: false,
       sortColumn: this.sortColumn,
       topics: [],
     };
   },
   mounted() {
-    window.addEventListener("keydown", this.handleKeyDown);
+    // Install all the hotkeys on the page
+    for (const el of document.querySelectorAll("[data-hotkey]")) {
+      install(el);
+    }
+    this.sortColumn = localStorage.getItem("sortColumn") || "score";
+    this.ascending =
+      localStorage.getItem("ascending") === "false" ? false : true;
+    this.isLoading = true;
     this.fetchDeals();
   },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.handleKeyDown);
-  },
   methods: {
-    handleKeyDown(event) {
-      const isInput = ["INPUT", "TEXTAREA"].includes(
-        document.activeElement.tagName
-      );
-      if (event.key === "/" && !isInput) {
-        event.preventDefault(); // prevent typing `/` into whatever is focused
-        this.$refs.filter.focus();
-      }
-    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -42,15 +38,49 @@ export default {
       );
     },
     fetchDeals() {
+      this.isLoading = true;
       axios
         .get("api/v1/topics")
         .then((response) => {
           this.topics = response.data;
+          this.isLoading = false;
+          this.sortTable(this.sortColumn, false);
         })
         .catch((err) => {
           console.log(err.response);
         });
     },
+    sortTable: function sortTable(col, flipAscending) {
+      if (this.sortColumn === col && flipAscending) {
+        this.ascending = !this.ascending;
+      }
+
+      var ascending = this.ascending;
+
+      localStorage.setItem("ascending", this.ascending);
+      localStorage.setItem("sortColumn", col);
+      this.sortColumn = col;
+
+      this.topics.sort(function (a, b) {
+        if (a[col] > b[col]) {
+          return ascending ? -1 : 1;
+        } else if (a[col] < b[col]) {
+          return ascending ? 1 : -1;
+        }
+        return 0;
+      });
+    },
+    isMobile() {
+      if (
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent
+        )
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
   },
   computed: {
     formatDate() {
@@ -58,6 +88,14 @@ export default {
         return moment(String(v)).format("hh:mm A z (MM/DD)");
       };
     },
+    columns() {
+      return {
+        Deal: "deal",
+        Score: "score",
+        Views: "total_views",
+        "Last Reply": "last_post_time",
+      };
+    },
     filteredTopics() {
       return this.topics.filter((row) => {
         const titles = (
@@ -81,81 +119,111 @@ export default {
       };
     },
   },
+  components: {
+    Loading,
+    GithubButton,
+  },
 };
 </script>
 
-<script setup>
-const headers = [
-  { title: "Deal", value: "title", align: "center" },
-  { title: "Score", value: "score", align: "center", sortable: true },
-  { title: "Views", value: "total_views", align: "center", sortable: true },
-  {
-    title: "Last Post",
-    value: "last_post_time",
-    align: "center",
-    sortable: true,
-  },
-];
-const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
-</script>
-
 <template>
-  <v-app>
-    <v-main>
   <link rel="shortcut icon" type="image/png" href="/favicon.png" />
   <body>
-        <v-text-field
+    <input
+      class="form-control"
+      type="text"
+      id="filter"
+      placeholder="Filter"
+
+      data-hotkey="/"
       v-model="filter"
-          label="Filter"
+      v-on:keyup.enter="createFilterRoute(this.filter.toString())"
+      v-on:keyup.escape="this.$refs.filter.blur()"
       ref="filter"
-          @keyup.enter="createFilterRoute(filter.toString())"
-          @keyup.esc="$refs.filter.blur()"
-          hide-details="true"
     />
-        <v-data-table
+    <table class="table table-hover">
-          :headers="headers"
+      <thead class="thead text-muted">
-          :items="filteredTopics"
+        <tr>
-          :sort-by="sortColumn"
+          <th
-          v-model:sortBy="sortBy"
+            v-for="(col, key) in columns"
-          :items-per-page="25"
+            v-on:click="sortTable(col, true)"
+            :key="col"
           >
-          <template #item.title="{ item }">
+            {{ key }}
+            <div
+              class="arrow"
+              v-if="col == sortColumn"
+              v-bind:class="ascending ? 'arrow_up' : 'arrow_down'"
+            ></div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <loading
+          v-model:active="isLoading"
+          color="#ccc"
+          opacity="0"
+          loader="bars"
+          :is-full-page="false"
+        >
+        </loading>
+        <tr
+          scope="row"
+          v-for="(topic, index) in filteredTopics"
+          :key="`topic.topic_id-${index}`"
+        >
+          <td scope="col">
             <a
-              :href="`https://forums.redflagdeals.com${item.web_path}`"
+              :href="`https://forums.redflagdeals.com${topic.web_path}`"
               target="_blank"
               v-html="
                 highlightMatches(
-                  item.title + ' [' + item.Offer.dealer_name + '] '
+                  topic.title + ' [' + topic.Offer.dealer_name + '] '
                 )
               "
             ></a>
-            <a :href="item.Offer.url" target="_blank" v-if="item.Offer.url">
+            <a
-              <span class="material-symbols-outlined"> link </span>
+              :href="`${topic.Offer.url}`"
-            </a>
+              target="_blank"
-            <span v-else class="material-symbols-outlined"> link_off </span>
+              v-if="topic.Offer.url"
-          </template>
+              ><span class="material-symbols-outlined"> link </span></a
-
-          <template #item.score="{ item }">
-            <span v-if="item.score > 0" class="green-score"
-              >+{{ item.score }}</span
             >
-            <span v-else-if="item.score < 0" class="red-score">{{
+            <span v-if="!topic.Offer.url" class="material-symbols-outlined">
-              item.score
+              link_off
-            }}</span>
+            </span>
-            <span v-else>{{ item.score }}</span>
+          </td>
-          </template>
+          <td v-if="topic.score > 0" scope="col" class="green-score">
-
+            +{{ topic.score }}
-          <template #item.last_post_time="{ item }">
+          </td>
-            {{ formatDate(item.last_post_time) }}
+          <td v-if="topic.score < 0" scope="col" class="red-score">
-          </template>
+            {{ topic.score }}
-
+          </td>
-          <template #loading>
+          <td v-if="topic.score == 0" scope="col">
-            <v-progress-linear indeterminate color="grey" />
+            {{ topic.score }}
-          </template>
+          </td>
-        </v-data-table>
+          <td scope="col">{{ topic.total_views }}</td>
+          <td scope="col">{{ formatDate(topic.last_post_time) }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="!isMobile()">
+      <footer class="fixed-bottom">
+        <small
+          >Press '/' to begin filtering (i.e.
+          <a
+            href="/#/filter=costco"
+            onclick="setTimeout(location.reload.bind(location), 1)"
+            >https://rfd.fyi/#/filter=costco</a
+          >)</small
+        >
+        <div class="footer-right">
+          <github-button href="https://github.com/davegallant/rfd-fyi"
+            >Star</github-button
+          >
+        </div>
+      </footer>
+    </div>
   </body>
-    </v-main>
-  </v-app>
 </template>
 
 <style>
@@ -166,9 +234,4 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
   text-align: center;
   color: #2c3e50;
 }
-
-.fixed-bottom {
-  background: #ffc;
-  color: black;
-}
 </style>

src/main.js

@@ -1,10 +1,12 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import VueGtag from "vue-gtag";
 import { createRouter, createWebHashHistory } from "vue-router";
 
-import "./theme.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
 
-import { registerPlugins } from "@/plugins";
+import "./theme.css";
 
 const routes = [];
 
@@ -13,9 +15,9 @@ const router = createRouter({
   routes,
 });
 
-const app = createApp(App);
+const app = createApp(App).use(VueGtag, {
-
+  config: { id: "G-YF11ZH9SYD" },
-registerPlugins(app);
+});
 
 app.use(router);
 app.mount("#app");

src/plugins/README.md

@@ -1,3 +0,0 @@
-# Plugins
-
-Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

src/plugins/index.js

@@ -1,12 +0,0 @@
-/**
- * plugins/index.js
- *
- * Automatically included in `./src/main.js`
- */
-
-// Plugins
-import vuetify from './vuetify'
-
-export function registerPlugins (app) {
-  app.use(vuetify)
-}

src/plugins/vuetify.js

@@ -1,35 +0,0 @@
-/**
- * plugins/vuetify.js
- *
- * Framework documentation: https://vuetifyjs.com`
- */
-
-// Styles
-import "@mdi/font/css/materialdesignicons.css";
-import "vuetify/styles";
-
-const tokyoNight = {
-  dark: true,
-  colors: {
-    background: "#1a1b26",
-    surface: "#24283b",
-    primary: "#7aa2f7",
-    secondary: "#b4f9f8",
-    accent: "#ff9e64",
-    error: "#f7768e",
-    info: "#2ac3de",
-    success: "#9ece6a",
-    warning: "#e0af68",
-  },
-};
-
-// Composables
-import { createVuetify } from "vuetify";
-
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
-  theme: {
-    defaultTheme: "tokyoNight",
-    themes: { tokyoNight },
-  },
-});

src/theme.css

@@ -2,6 +2,11 @@ body {
   max-width: 100%;
 }
 
+.thead {
+  position: sticky;
+  top: 0;
+}
+
 html {
   font-family: sans-serif;
   min-width: 100%;
@@ -9,6 +14,16 @@ html {
   -ms-text-size-adjust: 100%;
 }
 
+a {
+  color: #96ada5; /**/
+}
+a:visited {
+  color: #53514f; /**/
+}
+a:hover {
+  color: #d65d03; /**/
+}
+
 footer {
   background: #212529;
   color: white;
@@ -26,29 +41,28 @@ footer {
 }
 
 .green-score {
-  color: rgb(158, 206, 106) !important;
+  color: rgb(22, 120, 63) !important;
 }
 
 .red-score {
-  color: rgb(247, 118, 142) !important;
+  color: rgb(175, 21, 21) !important;
 }
 
-a {
+.arrow_down {
-  color: var(--v-theme-primary);
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC");
+}
+.arrow_up {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=");
+}
+.arrow {
+  float: right;
+  width: 10px;
+  height: 12px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position-y: bottom;
 }
 
-a:hover {
+.material-symbols-outlined {
-  color: #d65d03;
+ font-size: medium;
-}
-
-a:visited {
-  color: #53514f;
-}
-
-@media (min-width: 769px) {
-  .v-data-table-header th,
-  .v-data-table__td,
-  .v-data-footer {
-    font-size: 1.2rem;
-  }
 }

vite.config.mjs

@@ -1,58 +0,0 @@
-// Plugins
-import Components from "unplugin-vue-components/vite";
-import Vue from "@vitejs/plugin-vue";
-import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
-import Fonts from "unplugin-fonts/vite";
-
-// Utilities
-import { defineConfig } from "vite";
-import { fileURLToPath, URL } from "node:url";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    Vue({
-      template: { transformAssetUrls },
-    }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-    Vuetify(),
-    Components(),
-    Fonts({
-      fontsource: {
-        families: [
-          {
-            name: "Roboto",
-            weights: [100, 300, 400, 500, 700, 900],
-            styles: ["normal", "italic"],
-          },
-        ],
-      },
-    }),
-  ],
-  optimizeDeps: {
-    exclude: ["vuetify"],
-  },
-  define: { "process.env": {} },
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("src", import.meta.url)),
-    },
-    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
-  },
-  server: {
-    port: 3000,
-    proxy: {
-      "/api": "http://localhost:8080",
-    },
-  },
-  css: {
-    preprocessorOptions: {
-      sass: {
-        api: "modern-compiler",
-      },
-      scss: {
-        api: "modern-compiler",
-      },
-    },
-  },
-});

vue.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  devServer: {
+    proxy: "http://localhost:8080",
+  },
+});