Merge branch 'main' into renovate/npm-axios-vulnerability

.browserslistrc

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

.envrc

@@ -1 +0,0 @@
-use flake

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v6
+        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@v6
+      - 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@v6
+      - uses: actions/checkout@v4
 
       - name: Prepare
         id: prep

.gitignore

@@ -5,5 +5,3 @@ backend/bin/
 .vscode
 *.pem
 .env
-.direnv
-.envrc.local

Caddyfile

@@ -1,8 +1,8 @@
-{
+rfd.davegallant.ca {
-    auto_https off
+    file_server
+    reverse_proxy /api/* backend:8080
 }
 
-:80 {
+rfd.fyi {
-    file_server
+    redir https://rfd.davegallant.ca{uri} 301
-    reverse_proxy /api/* rfd-fyi-backend:8080
 }

Dockerfile

@@ -10,7 +10,7 @@ COPY . .
 
 RUN npm run build
 
-FROM caddy:2.10.2-alpine as runtime
+FROM caddy:2.10.0-alpine as runtime
 
 WORKDIR /my-site
 

Makefile

@@ -15,12 +15,13 @@ help:
 
 ## backend: Build and run the backend from source
 backend:
-	@cd backend && CGO_ENABLED=0 go run .
+	@cd backend && go run .
 .PHONY: 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

backend/Dockerfile

@@ -1,5 +1,5 @@
-# syntax=docker/dockerfile:1.21
+# syntax=docker/dockerfile:1.17
-FROM cgr.dev/chainguard/go:latest AS build
+FROM cgr.dev/chainguard/go:latest as build
 
 WORKDIR /src
 

backend/app.go

@@ -63,7 +63,6 @@ func (a *App) Run(httpPort string) {
 
 func (a *App) initializeRoutes() {
 	a.Router.HandleFunc("/topics", a.listTopics).Methods("GET")
-	a.Router.HandleFunc("/topics/{id}", a.getTopicDetails).Methods("GET")
 }
 
 // func respondWithError(w http.ResponseWriter, code int, message string) {
@@ -88,97 +87,12 @@ func (a *App) listTopics(w http.ResponseWriter, r *http.Request) {
 	respondWithJSON(w, http.StatusOK, a.CurrentTopics)
 }
 
-// getTopicDetails godoc
-// @Summary      Get detailed information about a specific topic
-// @Description  Fetches full details including recent comments for a topic by ID
-// @ID           get-topic-details
-// @Param        id path int true "Topic ID"
-// @Router       /topics/{id} [get]
-// @Success 200 {object} TopicDetails
-func (a *App) getTopicDetails(w http.ResponseWriter, r *http.Request) {
-	vars := mux.Vars(r)
-	topicID := vars["id"]
-
-	// Find topic in current topics
-	var topic *Topic
-	for i := range a.CurrentTopics {
-		if fmt.Sprintf("%d", a.CurrentTopics[i].TopicID) == topicID {
-			topic = &a.CurrentTopics[i]
-			break
-		}
-	}
-
-	if topic == nil {
-		respondWithJSON(w, http.StatusNotFound, map[string]string{"error": "Topic not found"})
-		return
-	}
-
-	// Fetch detailed info from RFD API
-	requestURL := fmt.Sprintf("https://forums.redflagdeals.com/api/topics/%s", topicID)
-	res, err := http.Get(requestURL)
-	if err != nil {
-		log.Warn().Msgf("error fetching topic details: %s\n", err)
-		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to fetch details"})
-		return
-	}
-	defer res.Body.Close()
-
-	body, err := ioutil.ReadAll(res.Body)
-	if err != nil {
-		log.Warn().Msgf("could not read response body: %s\n", err)
-		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to read response"})
-		return
-	}
-
-	var rfdResponse map[string]interface{}
-	err = json.Unmarshal([]byte(body), &rfdResponse)
-	if err != nil {
-		log.Warn().Msgf("could not unmarshal response body: %s", err)
-		respondWithJSON(w, http.StatusInternalServerError, map[string]string{"error": "Failed to parse response"})
-		return
-	}
-
-	// Extract relevant fields for tooltip
-	details := TopicDetails{
-		Topic:       *topic,
-		Description: extractDescription(rfdResponse),
-		FirstPost:   extractFirstPost(rfdResponse),
-	}
-
-	respondWithJSON(w, http.StatusOK, details)
-}
-
-func extractDescription(data map[string]interface{}) string {
-	if topic, ok := data["topic"].(map[string]interface{}); ok {
-		if description, ok := topic["description"].(string); ok {
-			return description
-		}
-	}
-	return ""
-}
-
-func extractFirstPost(data map[string]interface{}) string {
-	if posts, ok := data["posts"].([]interface{}); ok && len(posts) > 0 {
-		if firstPost, ok := posts[0].(map[string]interface{}); ok {
-			if body, ok := firstPost["body"].(string); ok {
-				// Truncate to first 200 characters
-				if len(body) > 200 {
-					return body[:200] + "..."
-				}
-				return body
-			}
-		}
-	}
-	return ""
-}
-
 func (a *App) refreshTopics() {
 	for {
 		log.Info().Msg("Refreshing topics")
 		latestTopics := a.getDeals(9, 1, 6)
 
 		if len(latestTopics) > 0 {
-			latestTopics = a.deduplicateTopics(latestTopics)
 			latestTopics = a.updateScores(latestTopics)
 
 			log.Info().Msg("Refreshing redirects")
@@ -232,22 +146,6 @@ func (a *App) stripRedirects(t []Topic) []Topic {
 	return t
 }
 
-func (a *App) deduplicateTopics(topics []Topic) []Topic {
-	seen := make(map[uint]bool)
-	var deduplicated []Topic
-
-	for _, topic := range topics {
-		if !seen[topic.TopicID] {
-			seen[topic.TopicID] = true
-			deduplicated = append(deduplicated, topic)
-		} else {
-			log.Debug().Msgf("Removing duplicate topic: %d", topic.TopicID)
-		}
-	}
-
-	return deduplicated
-}
-
 func (a *App) isSponsor(t Topic) bool {
 	return strings.HasPrefix(t.Title, "[Sponsored]")
 }

backend/go.mod

@@ -1,6 +1,6 @@
 module github.com/davegallant/rfd-fyi
 
-go 1.26
+go 1.18
 
 require (
 	github.com/dlclark/regexp2 v1.11.5

backend/model.go

@@ -27,9 +27,3 @@ type Offer struct {
 	DealerName string `json:"dealer_name"`
 	Url string `json:"url"`
 } // @name Offer
-
-type TopicDetails struct {
-	Topic       Topic  `json:"topic"`
-	Description string `json:"description"`
-	FirstPost   string `json:"first_post"`
-} // @name TopicDetails

flake.lock

@@ -1,61 +0,0 @@
-{
-  "nodes": {
-    "flake-utils": {
-      "inputs": {
-        "systems": "systems"
-      },
-      "locked": {
-        "lastModified": 1731533236,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1771008912,
-        "narHash": "sha256-gf2AmWVTs8lEq7z/3ZAsgnZDhWIckkb+ZnAo5RzSxJg=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "a82ccc39b39b621151d6732718e3e250109076fa",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs"
-      }
-    },
-    "systems": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}

flake.nix

@@ -1,51 +0,0 @@
-{
-  description = "rfd-fyi development environment";
-
-  inputs = {
-    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
-    flake-utils.url = "github:numtide/flake-utils";
-  };
-
-  outputs = { self, nixpkgs, flake-utils }:
-    flake-utils.lib.eachDefaultSystem (system:
-      let
-        pkgs = nixpkgs.legacyPackages.${system};
-      in
-      {
-        devShells.default = pkgs.mkShell {
-          buildInputs = with pkgs; [
-            # Node.js LTS with npm
-            nodejs_20
-
-            # Go for backend
-            go
-
-            # Build tools
-            pkg-config
-
-            # Development utilities
-            git
-            curl
-            jq
-
-            # Optional: for better development experience
-            gnumake
-          ];
-
-          shellHook = ''
-            echo "🚀 rfd-fyi development environment loaded"
-            echo "Available commands:"
-            echo "  Frontend: npm install, npm run build, npm run serve"
-            echo "  Backend:  cd backend && CGO_ENABLED=0 go run ."
-            echo ""
-            echo "Node version: $(node --version)"
-            echo "npm version: $(npm --version)"
-            echo "Go version: $(go version)"
-            echo ""
-            echo "Tip: Run 'npm install' to install frontend dependencies"
-            echo "Tip: Vite is available via 'npx vite' or 'npm run build'"
-          '';
-        };
-      }
-    );
-}

index.html

@@ -1,60 +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" />
-    <meta name="description" content="An overlay of rfd deals" />
-    
-    <!-- DNS prefetch for faster Google Fonts resolution -->
-    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
-    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
-    
-    <!-- Preconnect for faster font loading -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    
-    <link rel="icon" href="/favicon.png" />
-    
-    <!-- Load Material Symbols font with optimal display settings -->
-
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
-    />
-    
-    <title>rfd-fyi - An overlay of hot deals</title>
-    
-    <!-- Analytics - loaded async/defer so it doesn't block page -->
-    <script
-      async
-      defer
-      src="https://umami.davegallant.ca/script.js"
-      data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"
-    ></script>
-    
-    <!-- Theme detection script - runs before Vue loads to prevent flash of unstyled content -->
-    <script>
-      (function() {
-        // Check for saved theme preference or system preference
-        const savedTheme = localStorage.getItem('theme');
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = savedTheme || (prefersDark ? 'dark' : 'light');
-        
-        // Apply theme to html element
-        document.documentElement.setAttribute('data-bs-theme', theme);
-        document.documentElement.setAttribute('data-theme', theme);
-      })();
-    </script>
-  </head>
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but rfd.fyi doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

package.json

@@ -3,37 +3,36 @@
   "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.9",
     "@github/hotkey": "^3.0.0",
-    "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
-    "axios": "^1.12.0",
+    "axios": "^1.11.0",
+    "bootstrap": "^5.3.1",
+    "bootstrap-vue": "^2.22.0",
     "core-js": "^3.32.1",
     "cssnano": "^7.0.0",
-    "dayjs": "^1.11.10",
+    "jquery": "^3.7.0",
-    "vue": "^3.5.17",
+    "moment": "^2.29.4",
+    "vue": "^3.3.4",
+    "vue-github-button": "^3.0.3",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^5.0.0"
+    "vue-router": "4.5.1"
   },
   "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-plugin-vue": "^9.17.0",
-    "postcss-cli": "^11.0.0",
+    "postcss-cli": "^11.0.0"
-    "sass-embedded": "^1.89.2",
-    "unplugin-vue-components": "^31.0.0",
-    "vite": "^6.3.6"
   },
   "eslintConfig": {
     "root": true,
@@ -48,5 +47,11 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {}
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }

public/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="" data-bs-theme="dark">
+  <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" />
+    <meta name="description" content="An overlay of rfd deals" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
+    <link
+      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>
+    <script defer src="https://umami.snake-cloud.ts.net/script.js" data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"></script>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but rfd.fyi 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>

src/App.vue

@@ -1,150 +1,33 @@
 <script>
 import axios from "axios";
-import dayjs from "dayjs";
+import moment from "moment";
-import utc from "dayjs/plugin/utc";
+import Loading from "vue-loading-overlay";
+import { install } from "@github/hotkey";
 
 import "vue-loading-overlay/dist/css/index.css";
-import "./theme.css";
-
-// Configure day.js with UTC support
-dayjs.extend(utc);
 
 export default {
   data() {
     return {
       ascending: this.ascending,
       filter: window.location.href.split("filter=")[1] || "",
+      isLoading: false,
       sortColumn: this.sortColumn,
       topics: [],
-      isMobile: false,
-      currentTheme: 'auto',
-      mediaQueryListener: null,
-      vuetifyTheme: null,
-      darkModeQuery: null,
-      themeChangeHandler: null,
     };
   },
   mounted() {
-    window.addEventListener("keydown", this.handleKeyDown);
+    // Install all the hotkeys on the page
-    this.detectMobile();
+    for (const el of document.querySelectorAll("[data-hotkey]")) {
-    this.fetchDeals();
+      install(el);
-    // Initialize theme on next tick
-    this.$nextTick(() => {
-      this.initializeTheme();
-      this.setupThemeListener();
-    });
-  },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.handleKeyDown);
-    window.removeEventListener("resize", this.detectMobile);
-    if (this.darkModeQuery && this.themeChangeHandler) {
-      this.darkModeQuery.removeEventListener('change', this.themeChangeHandler);
     }
+    this.sortColumn = localStorage.getItem("sortColumn") || "score";
+    this.ascending =
+      localStorage.getItem("ascending") === "false" ? false : true;
+    this.isLoading = true;
+    this.fetchDeals();
   },
   methods: {
-    initializeTheme() {
-      // If no saved preference, default to auto
-      const savedTheme = localStorage.getItem('theme');
-      if (!savedTheme) {
-        this.currentTheme = 'auto';
-        this.applyTheme('auto');
-      } else {
-        this.currentTheme = savedTheme;
-        // Apply saved theme
-        this.applyTheme(savedTheme);
-      }
-    },
-    setupThemeListener() {
-      // Listen for system theme preference changes
-      const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-      this.mediaQueryListener = darkModeQuery;
-
-      // Use arrow function to preserve 'this' context
-      const themeChangeHandler = (e) => {
-        // Only auto-update theme if set to 'auto'
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'auto' || !savedTheme) {
-          const newTheme = e.matches ? 'dark' : 'light';
-          console.log('System theme changed to:', newTheme);
-          this.applyThemeActual(newTheme);
-        }
-      };
-
-      darkModeQuery.addEventListener('change', themeChangeHandler);
-      // Store the handler so we can remove it later if needed
-      this.themeChangeHandler = themeChangeHandler;
-      this.darkModeQuery = darkModeQuery;
-    },
-    applyTheme(theme, skipSave = false) {
-      this.currentTheme = theme;
-      if (!skipSave) {
-        localStorage.setItem('theme', theme);
-      }
-
-      // Determine actual theme to apply
-      let actualTheme = theme;
-      if (theme === 'auto') {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        actualTheme = prefersDark ? 'dark' : 'light';
-      }
-
-      this.applyThemeActual(actualTheme);
-    },
-    applyThemeActual(actualTheme) {
-      // Update data-bs-theme attribute for CSS variables to work
-      document.documentElement.setAttribute('data-bs-theme', actualTheme === 'dark' ? 'dark' : 'light');
-
-      // Update HTML class for theme-based CSS selectors
-      if (actualTheme === 'dark') {
-        document.documentElement.classList.add('dark-theme');
-        document.documentElement.classList.remove('light-theme');
-      } else {
-        document.documentElement.classList.add('light-theme');
-        document.documentElement.classList.remove('dark-theme');
-      }
-    },
-    toggleTheme() {
-      // Cycle through: auto -> light -> dark -> auto
-      let newTheme;
-      if (this.currentTheme === 'auto') {
-        newTheme = 'light';
-      } else if (this.currentTheme === 'light') {
-        newTheme = 'dark';
-      } else {
-        newTheme = 'auto';
-      }
-      this.applyTheme(newTheme);
-    },
-    detectMobile() {
-      // Detect if device is mobile/tablet based on touch capability and screen size
-      const hasTouch = () => {
-        return (
-          (typeof window !== "undefined" &&
-            ("ontouchstart" in window ||
-              navigator.maxTouchPoints > 0 ||
-              navigator.msMaxTouchPoints > 0)) ||
-          false
-        );
-      };
-
-      const isMobileScreen = () => {
-        return window.innerWidth <= 1024;
-      };
-
-      this.isMobile = hasTouch() || isMobileScreen();
-      window.addEventListener("resize", this.detectMobile);
-    },
-    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(
@@ -154,36 +37,75 @@ 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() {
       return (v) => {
-        const date = dayjs(String(v));
+        return moment(String(v)).format("hh:mm A z (MM/DD)");
-        return date.format("YYYY-MM-DD hh:mm A");
+      };
+    },
+    columns() {
+      return {
+        Deal: "deal",
+        Score: "score",
+        Views: "total_views",
+        "Last Reply": "last_post_time",
       };
     },
     filteredTopics() {
-      return this.topics
+      return this.topics.filter((row) => {
-        .filter((row) => {
+        const titles = (
-          const titles = (
+          row.title.toString() +
-            row.title.toString() +
+          " [" +
-            " [" +
+          row.Offer.dealer_name +
-            row.Offer.dealer_name +
+          "]"
-            "]"
+        ).toLowerCase();
-          ).toLowerCase();
+        const filterTerm = this.filter.toLowerCase();
-          const filterTerm = this.filter.toLowerCase();
+        return titles.includes(filterTerm);
-          return titles.includes(filterTerm);
+      });
-        })
-        .sort((a, b) => b.score - a.score); // Always sort by score descending
     },
     highlightMatches() {
       return (v) => {
@@ -195,113 +117,118 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
-    highlightDealerName() {
+    showBeforeTargetDate() {
-      return (dealerName) => {
+      const now = new Date();
-        if (this.filter == "") return dealerName;
+      const target = new Date('2025-08-20T00:00:00');
-        const matchExists = dealerName.toLowerCase().includes(this.filter.toLowerCase());
+      return now < target;
-        if (!matchExists) return dealerName;
+    }
-
+  },
-        const re = new RegExp(this.filter, "ig");
+  components: {
-        return dealerName.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
+    Loading,
-      };
-    },
-    getThemeIcon() {
-      if (this.currentTheme === 'auto') {
-        return 'brightness_auto';
-      } else if (this.currentTheme === 'dark') {
-        return 'light_mode';
-      } else {
-        return 'dark_mode';
-      }
-    },
-    getThemeTitle() {
-      if (this.currentTheme === 'auto') {
-        return 'Theme: Auto (click for Light)';
-      } else if (this.currentTheme === 'light') {
-        return 'Theme: Light (click for Dark)';
-      } else {
-        return 'Theme: Dark (click for Auto)';
-      }
-    },
   },
 };
 </script>
 
 <template>
-  <div id="app">
+  <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+  <body>
-    <div class="container">
+    <input
-      <div class="header">
+      class="form-control"
-        <div class="header-controls">
+      type="text"
-          <input
+      id="filter"
-            v-model="filter"
+      placeholder="Filter"
-            type="text"
-            placeholder="Filter deals"
-            ref="filter"
-            @keyup.enter="createFilterRoute(filter.toString())"
-            @keyup.esc="$refs.filter.blur()"
-            class="search-input"
-          />
-          <button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
-            <span class="material-symbols-outlined">{{ getThemeIcon }}</span>
-          </button>
-        </div>
-      </div>
 
-        <div class="cards-grid">
+      data-hotkey="/"
-          <div
+      v-model="filter"
-            v-for="topic in filteredTopics"
+      v-on:keyup.enter="createFilterRoute(this.filter.toString())"
-            :key="topic.topic_id"
+      v-on:keyup.escape="this.$refs.filter.blur()"
-            class="deal-card"
+      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"
           >
-            <div class="card-header">
+            {{ key }}
-              <div class="title-with-link">
+            <div
-                <a
+              class="arrow"
-                  :href="`https://forums.redflagdeals.com${topic.web_path}`"
+              v-if="col == sortColumn"
-                  target="_blank"
+              v-bind:class="ascending ? 'arrow_up' : 'arrow_down'"
-                  class="deal-title"
+            ></div>
-                  @click.stop
+          </th>
-                  v-html="highlightMatches(topic.title)"
+        </tr>
-                ></a>
+      </thead>
-                <a
+      <tbody>
-                  v-if="topic.Offer.url"
+        <loading
-                  :href="topic.Offer.url"
+          v-model:active="isLoading"
-                  target="_blank"
+          color="#ccc"
-                  class="card-link"
+          opacity="0"
-                  title="Open deal"
+          loader="bars"
-                >
+          :is-full-page="false"
-                  <span class="material-symbols-outlined">open_in_new</span>
+        >
-                </a>
+        </loading>
-              </div>
+        <tr
-              <div class="score-bubble" :class="{ positive: topic.score > 0, negative: topic.score < 0, neutral: topic.score === 0 }">
+          scope="row"
-                <span v-if="topic.score > 0">+{{ topic.score }}</span>
+          v-for="(topic, index) in filteredTopics"
-                <span v-else>{{ topic.score }}</span>
+          :key="`topic.topic_id-${index}`"
-              </div>
+        >
-            </div>
+          <td scope="col">
-
+            <a
-            <div class="card-meta">
+              :href="`https://forums.redflagdeals.com${topic.web_path}`"
-              <span class="dealer-name" v-html="highlightDealerName(topic.Offer.dealer_name)"></span>
+              target="_blank"
-            </div>
+              v-html="
-
+                highlightMatches(
-            <div class="card-details">
+                  topic.title + ' [' + topic.Offer.dealer_name + '] '
-              <div class="details-stats">
+                )
-                <div class="stat">
+              "
-                  <span class="material-symbols-outlined">visibility</span>
+            ></a>
-                  <span class="stat-value">{{ topic.total_views }} views</span>
+            <a
-                </div>
+              :href="`${topic.Offer.url}`"
-                <div class="stat">
+              target="_blank"
-                  <span class="material-symbols-outlined">chat</span>
+              v-if="topic.Offer.url"
-                  <span class="stat-value">{{ topic.total_replies }} replies</span>
+              ><span class="material-symbols-outlined"> link </span></a
-                </div>
+            >
-              </div>
+            <span v-if="!topic.Offer.url" class="material-symbols-outlined">
-
+              link_off
-              <div class="card-timestamp">
+            </span>
-                Last post: {{ formatDate(topic.last_post_time) }}
+          </td>
-              </div>
+          <td v-if="topic.score > 0" scope="col" class="green-score">
-
+            +{{ topic.score }}
-            </div>
+          </td>
-          </div>
+          <td v-if="topic.score < 0" scope="col" class="red-score">
-        </div>
+            {{ topic.score }}
-      </div>
+          </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>
 </template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.fixed-bottom {
+  background: #ffc;
+  color: black;
+}
+
+</style>

src/main.js

@@ -2,14 +2,12 @@ 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";
 
-const routes = [
+const routes = [];
-  {
-    path: '/:pathMatch(.*)*',
-    component: App,
-  },
-];
 
 const router = createRouter({
   history: createWebHashHistory(),

src/theme.css

@@ -1,58 +1,10 @@
-.material-symbols-outlined {
+body {
-  font-family: 'Material Symbols Outlined';
+  max-width: 100%;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
 }
 
-/* Theme-aware CSS variables */
+.thead {
-:root {
+  position: sticky;
-  /* Light theme (default) */
+  top: 0;
-  --bg-primary: #dddddd;
-  --bg-secondary: #e8e8e8;
-  --text-primary: #212529;
-  --text-secondary: #6c757d;
-  --border-color: #d0d0d0;
-  --link-color: #212529;
-}
-
-/* Dark theme */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-primary: #1a1a1a;
-    --bg-secondary: #2a2a2a;
-    --text-primary: #e0e0e0;
-    --text-secondary: #a0a0a0;
-    --border-color: #3a3a3a;
-    --link-color: #212529;
-  }
-}
-
-/* Support for explicit data-bs-theme attribute (Bootstrap override) */
-html[data-bs-theme="dark"] {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2a2a2a;
-  --text-primary: #e0e0e0;
-  --text-secondary: #a0a0a0;
-  --border-color: #3a3a3a;
-  --link-color: #e0e0e0;
-}
-
-html[data-bs-theme="light"],
-html.light-theme {
-  --bg-primary: #dddddd;
-  --bg-secondary: #e8e8e8;
-  --text-primary: #212529;
-  --text-secondary: #6c757d;
-  --border-color: #d0d0d0;
-  --link-color: #212529;
 }
 
 html {
@@ -60,352 +12,57 @@ html {
   min-width: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-}
-
-body {
-  max-width: 100%;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
-  margin: 0;
-  padding: 0;
-}
-
-.green-score {
-  color: rgb(34, 139, 34) !important;
-}
-
-html[data-bs-theme="light"] .green-score {
-  color: rgb(34, 139, 34) !important;
-}
-
-html[data-bs-theme="dark"] .green-score {
-  color: rgb(158, 206, 106) !important;
-}
-
-.red-score {
-  color: rgb(247, 118, 142) !important;
 }
 
 a {
-  color: var(--link-color);
+  color: #96ada5; /**/
-  transition: color 0.2s ease;
 }
-
 a:visited {
-  color: var(--link-color);
+  color: #53514f; /**/
+}
+a:hover {
+  color: #d65d03; /**/
 }
 
-/* App styles */
+footer {
-
+  background: #212529;
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  min-height: 100vh;
-}
-
-.header {
-  margin-bottom: 30px;
-}
-
-.header-controls {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.search-input {
-  flex: 1;
-  max-width: 500px;
-  padding: 10px 12px;
-  font-size: 14px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  color: var(--text-primary);
-  transition: all 0.2s ease;
-  font-family: inherit;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: #999999;
-  background-color: #ffffff;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
-}
-
-html.dark-theme .search-input {
-  border-color: #555555;
-  background-color: #1a1a1a;
-  color: #e0e0e0;
-}
-
-html.dark-theme .search-input:focus {
-  background-color: #2a2a2a;
-  border-color: #777777;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
-}
-
-.search-input::placeholder {
-  color: var(--text-secondary);
-}
-
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 18px;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.theme-toggle:hover {
-  background-color: #e8e8e8;
-  border-color: #999999;
-}
-
-.theme-toggle:active {
-  transform: scale(0.95);
-}
-
-html.dark-theme .theme-toggle {
-  border-color: #555555;
-  background-color: #1a1a1a;
-  color: #e0e0e0;
-}
-
-html.dark-theme .theme-toggle:hover {
-  background-color: #2a2a2a;
-  border-color: #777777;
-}
-
-.cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.deal-card {
-  background-color: var(--bg-secondary);
-  border: 1.5px solid #aaaaaa;
-  border-radius: 12px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.2s ease;
-  min-height: auto;
-}
-
-.deal-card:hover {
-  background-color: #15151515;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-color: #999999;
-}
-
-.card-header {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  margin-bottom: 12px;
-  justify-content: space-between;
-}
-
-.title-with-link {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  flex: 1;
-}
-
-.deal-title {
-  color: var(--link-color);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 1.4;
-  flex: 1;
-  transition: color 0.2s ease;
-}
-
-.deal-title:visited {
-  color: var(--link-color);
-}
-
-.deal-title:hover {
-  text-decoration: underline;
-}
-
-.card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 13px;
-  margin-bottom: 12px;
-}
-
-.dealer-name {
-  color: var(--text-secondary);
-  font-weight: 500;
-  font-size: 13px;
-}
-
-.card-timestamp {
-  color: var(--text-secondary);
-  font-size: 12px;
-  margin-top: 8px;
-}
-
-.card-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--link-color);
-  text-decoration: none;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.card-link:hover {
-  opacity: 0.7;
-}
-
-.card-link .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.score-bubble {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 50px;
-  height: 40px;
-  border-radius: 6px;
-  font-weight: 700;
-  font-size: 12px;
-  flex-shrink: 0;
-  transition: all 0.2s ease;
-  padding: 0 8px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-  border: none;
-}
-
-.score-bubble.positive {
-  background-color: rgb(34, 139, 34);
   color: white;
-  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
+  padding: 3px;
+  padding-right: 10px;
+  padding-left: 10px;
 }
 
-html.light-theme .score-bubble.positive {
+.footer-left {
-  background-color: rgb(34, 139, 34);
+  float: left;
-  color: white;
-  box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
 }
 
-html.dark-theme .score-bubble.positive {
+.footer-right {
-  background-color: rgb(158, 206, 106);
+  float: right;
-  color: #1a1a1a;
-  box-shadow: 0 1px 3px rgba(158, 206, 106, 0.2);
 }
 
-.score-bubble.negative {
+.green-score {
-  background-color: rgb(247, 118, 142);
+  color: rgb(22, 120, 63) !important;
-  color: white;
-  box-shadow: 0 1px 3px rgba(247, 118, 142, 0.2);
 }
 
-.score-bubble.neutral {
+.red-score {
-  background-color: var(--text-secondary);
+  color: rgb(175, 21, 21) !important;
-  color: var(--bg-primary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
-.card-details {
+.arrow_down {
-  margin-top: 12px;
+  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");
-  padding-top: 12px;
+}
-  border-top: 1px solid var(--border-color);
+.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;
 }
 
-.details-stats {
+.material-symbols-outlined {
-  display: flex;
+ font-size: medium;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.stat {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.stat .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.stat-value {
-  font-weight: 500;
-}
-
-.details-section {
-  margin-bottom: 12px;
-}
-
-.details-section strong {
-  display: block;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-  font-size: 13px;
-}
-
-.details-section p {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: 12px;
-  line-height: 1.4;
-  word-wrap: break-word;
-}
-
-/* Mobile responsive */
-@media (max-width: 768px) {
-  .cards-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .container {
-    padding: 12px;
-  }
-
-  .search-input {
-    max-width: 100%;
-  }
-}
-
-/* Mark highlighting */
-mark {
-  background-color: rgba(255, 193, 7, 0.3);
-  color: inherit;
-  font-weight: 600;
-  border-radius: 2px;
-}
-
-html.dark-theme mark {
-  background-color: rgba(255, 193, 7, 0.4);
-  color: inherit;
-  font-weight: 600;
-  border-radius: 2px;
 }

vite.config.mjs

@@ -1,70 +0,0 @@
-// Plugins
-import Components from "unplugin-vue-components/vite";
-import Vue from "@vitejs/plugin-vue";
-
-// Utilities
-import { defineConfig } from "vite";
-import { fileURLToPath, URL } from "node:url";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    Vue(),
-    Components(),
-  ],
-  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",
-      },
-    },
-  },
-  build: {
-    target: "esnext",
-    minify: "terser",
-    terserOptions: {
-      compress: {
-        drop_console: true,
-      },
-    },
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          "vendor": ["axios", "dayjs", "vue-router", "vue-loading-overlay"],
-        },
-        chunkFileNames: "js/[name].[hash].js",
-        entryFileNames: "js/[name].[hash].js",
-        assetFileNames: (assetInfo) => {
-          const info = assetInfo.name.split(".");
-          const ext = info[info.length - 1];
-          if (/png|jpe?g|gif|tiff|bmp|ico/i.test(ext)) {
-            return `images/[name].[hash][extname]`;
-          } else if (/woff|woff2|eot|ttf|otf/i.test(ext)) {
-            return `fonts/[name].[hash][extname]`;
-          } else if (ext === "css") {
-            return `css/[name].[hash][extname]`;
-          }
-          return `[name].[hash][extname]`;
-        },
-      },
-    },
-    chunkSizeWarningLimit: 1000,
-    reportCompressedSize: true,
-  },
-});

vue.config.js

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