Update dependency @vitejs/plugin-vue to v6

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.envrc

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

.gitignore

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

Caddyfile

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

Makefile

@@ -15,7 +15,7 @@ help:
 
 ## backend: Build and run the backend from source
 backend:
-	@cd backend && go run .
+	@cd backend && CGO_ENABLED=0 go run .
 .PHONY: backend
 
 ## frontend: Build and run the frontend from source

backend/Dockerfile

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

backend/app.go

@@ -63,6 +63,7 @@ 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) {
@@ -87,12 +88,97 @@ 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")
@@ -146,6 +232,22 @@ 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.18
+go 1.26
 
 require (
 	github.com/dlclark/regexp2 v1.11.5

backend/model.go

@@ -27,3 +27,9 @@ 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

@@ -0,0 +1,61 @@
+{
+  "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

@@ -0,0 +1,51 @@
+{
+  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,17 +1,39 @@
 <!DOCTYPE html>
-<html lang="" data-bs-theme="dark">
+<html lang="en" 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" />
+    
+    <!-- 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="preload"
+      as="font"
+      type="font/woff2"
+      href="https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2"
+      crossorigin
+    />
     <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"
+      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"
@@ -26,6 +48,5 @@
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
-    <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -16,18 +16,16 @@
     "axios": "^1.12.0",
     "core-js": "^3.32.1",
     "cssnano": "^7.0.0",
-    "jquery": "^3.7.0",
-    "moment": "^2.29.4",
+    "dayjs": "^1.11.10",
     "vue": "^3.5.17",
-    "vue-github-button": "^3.0.3",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "^4.5.1",
+    "vue-router": "^5.0.0",
     "vuetify": "^3.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "^5.0.9",
@@ -35,8 +33,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "postcss-cli": "^11.0.0",
     "sass-embedded": "^1.89.2",
-    "unplugin-fonts": "^1.3.1",
-    "unplugin-vue-components": "^30.0.0",
+    "unplugin-vue-components": "^31.0.0",
     "vite": "^6.3.6",
     "vite-plugin-vuetify": "^2.1.1"
   },

src/App.vue

@@ -1,11 +1,15 @@
 <script>
 import axios from "axios";
-import moment from "moment";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import Loading from "vue-loading-overlay";
 import { install } from "@github/hotkey";
+import { ref, reactive } from "vue";
 
 import "vue-loading-overlay/dist/css/index.css";
-import { ref } from "vue";
+
+// Configure day.js with UTC support
+dayjs.extend(utc);
 
 export default {
   data() {
@@ -14,16 +18,42 @@ export default {
       filter: window.location.href.split("filter=")[1] || "",
       sortColumn: this.sortColumn,
       topics: [],
+      hoveredTopicId: null,
+      tooltipData: {},
+      loadingTooltip: {},
+      tooltipPosition: { x: 0, y: 0 },
+      isMobile: false,
     };
   },
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
+    this.detectMobile();
     this.fetchDeals();
   },
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
+    window.removeEventListener("resize", this.detectMobile);
   },
   methods: {
+    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
@@ -33,6 +63,63 @@ export default {
         this.$refs.filter.focus();
       }
     },
+    handleTitleHover(topic, event) {
+      // Don't load tooltips on mobile devices
+      if (this.isMobile) {
+        return;
+      }
+      this.hoveredTopicId = topic.topic_id;
+      this.tooltipPosition = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      this.loadTopicDetails(topic.topic_id);
+    },
+    handleTitleLeave() {
+      if (this.isMobile) {
+        return;
+      }
+      this.hoveredTopicId = null;
+    },
+    handleMouseMove(event) {
+      if (this.isMobile) {
+        return;
+      }
+      if (this.hoveredTopicId !== null) {
+        this.tooltipPosition = {
+          x: event.clientX,
+          y: event.clientY,
+        };
+      }
+    },
+    loadTopicDetails(topicId) {
+      if (!topicId) {
+        console.warn("Topic ID is undefined");
+        return;
+      }
+
+      if (this.tooltipData[topicId]) {
+        return; // Already loaded
+      }
+
+      if (this.loadingTooltip[topicId]) {
+        return; // Already loading
+      }
+
+      this.loadingTooltip[topicId] = true;
+
+      axios
+        .get(`api/v1/topics/${topicId}`)
+        .then((response) => {
+          this.tooltipData[topicId] = response.data;
+        })
+        .catch((err) => {
+          console.log("Error loading topic details:", err);
+        })
+        .finally(() => {
+          this.loadingTooltip[topicId] = false;
+        });
+    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -55,7 +142,8 @@ export default {
   computed: {
     formatDate() {
       return (v) => {
-        return moment(String(v)).format("hh:mm A z (MM/DD)");
+        const date = dayjs(String(v));
+        return date.format("hh:mm A (MM/DD)");
       };
     },
     filteredTopics() {
@@ -80,23 +168,30 @@ export default {
         return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
       };
     },
+    visibleHeaders() {
+      const baseHeaders = [
+        { title: "Deal", value: "title", align: "center" },
+        { title: "Score", value: "score", align: "center", sortable: true },
+      ];
+      
+      // Only show Last Post column on desktop
+      if (!this.isMobile) {
+        baseHeaders.push({
+          title: "Last Post",
+          value: "last_post_time",
+          align: "center",
+          sortable: true,
+        });
+      }
+      
+      return baseHeaders;
+    },
   },
 };
 </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
+const sortBy = ref([{ key: "score", order: "desc" }]);
 </script>
 
 <template>
@@ -113,26 +208,25 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
           hide-details="true"
         />
         <v-data-table
-          :headers="headers"
+          :headers="visibleHeaders"
           :items="filteredTopics"
           :sort-by="sortColumn"
           v-model:sortBy="sortBy"
-          :items-per-page="25"
+          :items-per-page="50"
         >
           <template #item.title="{ item }">
             <a
               :href="`https://forums.redflagdeals.com${item.web_path}`"
               target="_blank"
+              @mouseenter="handleTitleHover(item, $event)"
+              @mouseleave="handleTitleLeave"
+              @mousemove="handleMouseMove"
               v-html="
                 highlightMatches(
-                  item.title + ' [' + item.Offer.dealer_name + '] '
+                  item.title
                 )
               "
             ></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 }">
@@ -153,12 +247,53 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
             <v-progress-linear indeterminate color="grey" />
           </template>
         </v-data-table>
+
+        <!-- Tooltip for deal details -->
+        <div
+          v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
+          class="deal-tooltip"
+          :style="{
+            position: 'fixed',
+            left: tooltipPosition.x + 10 + 'px',
+            top: tooltipPosition.y + 10 + 'px',
+            zIndex: 9999,
+          }"
+        >
+          <div class="tooltip-content">
+            <div class="tooltip-header">{{ tooltipData[hoveredTopicId].topic.title }}</div>
+              <div class="tooltip-dealer">
+                {{ tooltipData[hoveredTopicId].topic.Offer.dealer_name }}
+              </div>
+              <div class="tooltip-stats">
+                <span class="stat-item">
+                  <span class="material-symbols-outlined">visibility</span>
+                  {{ tooltipData[hoveredTopicId].topic.total_views }} views
+                </span>
+                <span class="stat-item">
+                  <span class="material-symbols-outlined">chat</span>
+                  {{ tooltipData[hoveredTopicId].topic.total_replies }} replies
+                </span>
+              </div>
+            <div v-if="tooltipData[hoveredTopicId].description" class="tooltip-description">
+              <strong>Description:</strong>
+              {{ tooltipData[hoveredTopicId].description }}
+            </div>
+            <div v-if="tooltipData[hoveredTopicId].first_post" class="tooltip-first-post">
+              <strong>First Post:</strong>
+              {{ tooltipData[hoveredTopicId].first_post }}
+            </div>
+            <div class="tooltip-times">
+              <div>Posted: {{ formatDate(tooltipData[hoveredTopicId].topic.post_time) }}</div>
+              <div>Last Post: {{ formatDate(tooltipData[hoveredTopicId].topic.last_post_time) }}</div>
+            </div>
+          </div>
+        </div>
       </body>
     </v-main>
   </v-app>
 </template>
 
-<style>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -171,4 +306,86 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
   background: #ffc;
   color: black;
 }
+
+.deal-tooltip {
+  pointer-events: none;
+  max-width: 400px;
+}
+
+.tooltip-content {
+  background: #24283b;
+  border: 2px solid #a9b1d6;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  font-size: 13px;
+  color: #e0e0e0;
+  text-align: left;
+}
+
+.tooltip-header {
+  font-weight: bold;
+  font-size: 14px;
+  color: #d0d0d0;
+  margin-bottom: 8px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.tooltip-dealer {
+  font-size: 12px;
+  color: #c0c0c0;
+  margin-bottom: 8px;
+}
+
+.tooltip-stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-item .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.tooltip-description {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: rgba(160, 160, 160, 0.1);
+  border-left: 2px solid #a9b1d6;
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+}
+
+.tooltip-first-post {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: rgba(160, 160, 160, 0.1);
+  border-left: 2px solid #a9b1d6;
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+}
+
+.tooltip-times {
+  font-size: 11px;
+  color: #b0b0b0;
+  border-top: 1px solid #555555;
+  padding-top: 8px;
+  margin-top: 8px;
+}
 </style>

src/theme.css

@@ -1,3 +1,26 @@
+/* Material Symbols font optimization - prevent flash of unstyled text */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  src: url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v211/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhQcyWwg.woff2') format('woff2');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: block;
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  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;
+}
+
 body {
   max-width: 100%;
 }

vite.config.mjs

@@ -2,7 +2,6 @@
 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";
@@ -14,23 +13,12 @@ export default defineConfig({
     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"],
+    include: ["axios", "vue-router", "vue-loading-overlay"],
   },
   define: { "process.env": {} },
   resolve: {
@@ -55,4 +43,37 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    target: "esnext",
+    minify: "terser",
+    terserOptions: {
+      compress: {
+        drop_console: true,
+      },
+    },
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          "vuetify": ["vuetify"],
+          "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,
+  },
 });