Migrate to vuetify and vite (#251)

2025-10-02 22:56:01 +00:00 · 2025-08-29 20:57:27 -04:00
parent 065c965f00
commit f0e33e6060
13 changed files with 2230 additions and 362 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/3
+++ b/3
@@ -20,8 +20,7 @@ backend:

 ## frontend: Build and run the frontend from source
 frontend:
-	@npm install @vue/cli-service
-	@npx vue-cli-service serve
+	@npm run serve
 .PHONY: frontend

 ## dev: Build and run in docker compose
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,11 @@
      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>
-    <script defer src="https://umami.snake-cloud.ts.net/script.js" data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"></script>
+    <script
+      defer
+      src="https://umami.snake-cloud.ts.net/script.js"
+      data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"
+    ></script>
  </head>
  <body>
    <noscript>
@@ -21,6 +25,7 @@
      >
    </noscript>
    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,36 +3,44 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "vite",
+    "preview": "vite preview",
+    "build": "vite build",
+    "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.11.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.3.4",
+    "vue": "^3.5.17",
    "vue-github-button": "^3.0.3",
    "vue-loading-overlay": "^6.0.3",
-    "vue-router": "4.5.1"
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.9.6"
  },
  "devDependencies": {
    "@babel/core": "^7.22.10",
    "@babel/eslint-parser": "^7.22.10",
    "@types/bootstrap": "^5.2.6",
    "@types/mousetrap": "^1.6.11",
+    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "^5.0.8",
+    "@vue/cli-service": "^5.0.9",
    "eslint": "^8.47.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": "^28.8.0",
+    "vite": "^6.3.5",
+    "vite-plugin-vuetify": "^2.1.1"
  },
  "eslintConfig": {
    "root": true,
@@ -47,11 +55,5 @@
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
+  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@ import Loading from "vue-loading-overlay";
 import { install } from "@github/hotkey";

 import "vue-loading-overlay/dist/css/index.css";
+import { ref } from "vue";

 export default {
  data() {
@@ -43,43 +44,11 @@ export default {
        .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() {
@@ -87,14 +56,6 @@ 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 = (
@@ -117,11 +78,6 @@ export default {
        return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
      };
    },
-    showBeforeTargetDate() {
-      const now = new Date();
-      const target = new Date('2025-08-20T00:00:00');
-      return now < target;
-    }
  },
  components: {
    Loading,
@@ -129,92 +85,80 @@ export default {
 };
 </script>

-<template>
-  <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-  <body>
-    <input
-      class="form-control"
-      type="text"
-      id="filter"
-      placeholder="Filter"
+<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>

-      data-hotkey="/"
-      v-model="filter"
-      v-on:keyup.enter="createFilterRoute(this.filter.toString())"
-      v-on:keyup.escape="this.$refs.filter.blur()"
-      ref="filter"
-    />
-    <table class="table table-hover">
-      <thead class="thead text-muted">
-        <tr>
-          <th
-            v-for="(col, key) in columns"
-            v-on:click="sortTable(col, true)"
-            :key="col"
-          >
-            {{ 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"
+<template>
+  <v-app>
+    <v-main>
+      <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+      <body>
+        <v-text-field
+          v-model="filter"
+          label="Filter"
+          density="comfortable"
+          ref="filter"
+          @keyup.enter="createFilterRoute(filter.toString())"
+          @keyup.esc="$refs.filter.blur()"
+          data-hotkey="/"
+          hide-details
+        />
+        <v-data-table
+          :headers="headers"
+          :items="filteredTopics"
+          :sort-by="sortColumn"
+          :sort-desc="!ascending"
+          v-model:sortBy="sortBy"
        >
-        </loading>
-        <tr
-          scope="row"
-          v-for="(topic, index) in filteredTopics"
-          :key="`topic.topic_id-${index}`"
-        >
-          <td scope="col">
+          <template #item.title="{ item }">
            <a
-              :href="`https://forums.redflagdeals.com${topic.web_path}`"
+              :href="`https://forums.redflagdeals.com${item.web_path}`"
              target="_blank"
              v-html="
                highlightMatches(
-                  topic.title + ' [' + topic.Offer.dealer_name + '] '
+                  item.title + ' [' + item.Offer.dealer_name + '] '
                )
              "
            ></a>
-            <a
-              :href="`${topic.Offer.url}`"
-              target="_blank"
-              v-if="topic.Offer.url"
-              ><span class="material-symbols-outlined"> link </span></a
+            <a :href="item.Offer.url" target="_blank" v-if="item.Offer.url">
+              <span class="material-symbols-outlined"> link </span>
+            </a>
+            <span v-else class="material-symbols-outlined"> link_off </span>
+          </template>
+
+          <template #item.score="{ item }">
+            <span v-if="item.score > 0" class="green-score"
+              >+{{ item.score }}</span
            >
-            <span v-if="!topic.Offer.url" class="material-symbols-outlined">
-              link_off
-            </span>
-          </td>
-          <td v-if="topic.score > 0" scope="col" class="green-score">
-            +{{ topic.score }}
-          </td>
-          <td v-if="topic.score < 0" scope="col" class="red-score">
-            {{ topic.score }}
-          </td>
-          <td v-if="topic.score == 0" scope="col">
-            {{ topic.score }}
-          </td>
-          <td scope="col">{{ topic.total_views }}</td>
-          <td scope="col">{{ formatDate(topic.last_post_time) }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <div v-if="showBeforeTargetDate">
-      <footer class="fixed-bottom">
-        PSA: <a href="https://rfd.fyi">rfd.fyi</a> will not be renewed after 2025-08-20. Please use <a href="https://rfd.davegallant.ca">rfd.davegallant.ca</a>.
-      </footer>
-    </div>
-  </body>
+            <span v-else-if="item.score < 0" class="red-score">{{
+              item.score
+            }}</span>
+            <span v-else>{{ item.score }}</span>
+          </template>
+
+          <template #item.last_post_time="{ item }">
+            {{ formatDate(item.last_post_time) }}
+          </template>
+
+          <template #loading>
+            <v-progress-linear indeterminate color="grey" />
+          </template>
+        </v-data-table>
+      </body>
+    </v-main>
+  </v-app>
 </template>

 <style>
@@ -230,5 +174,4 @@ export default {
  background: #ffc;
  color: black;
 }
-
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -2,11 +2,10 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import { createRouter, createWebHashHistory } from "vue-router";

-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.min.js";
-
 import "./theme.css";

+import { registerPlugins } from "@/plugins";
+
 const routes = [];

 const router = createRouter({
@@ -16,5 +15,7 @@ const router = createRouter({

 const app = createApp(App);

+registerPlugins(app);
+
 app.use(router);
 app.mount("#app");
--- a/src/plugins/README.md
+++ b/src/plugins/README.md
@@ -0,0 +1,3 @@
+# 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.
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -0,0 +1,12 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app) {
+  app.use(vuetify)
+}
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'system',
+  },
+})
--- a/src/theme.css
+++ b/src/theme.css
@@ -2,11 +2,6 @@ body {
  max-width: 100%;
 }

-.thead {
-  position: sticky;
-  top: 0;
-}
-
 html {
  font-family: sans-serif;
  min-width: 100%;
@@ -47,22 +42,3 @@ footer {
 .red-score {
  color: rgb(175, 21, 21) !important;
 }
-
-.arrow_down {
-  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;
-}
-
-.material-symbols-outlined {
- font-size: medium;
-}
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -0,0 +1,58 @@
+// 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",
+      },
+    },
+  },
+});
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,7 +0,0 @@
-const { defineConfig } = require("@vue/cli-service");
-module.exports = defineConfig({
-  transpileDependencies: true,
-  devServer: {
-    proxy: "http://localhost:8080",
-  },
-});