mirror of
https://github.com/davegallant/rfd-fyi.git
synced 2026-03-03 09:36:35 +00:00
Compare commits
1 Commits
492f17a5f4
...
davegallan
| Author | SHA1 | Date | |
|---|---|---|---|
| 2805dd552f |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -5,5 +5,3 @@ backend/bin/
|
||||
.vscode
|
||||
*.pem
|
||||
.env
|
||||
.direnv
|
||||
.envrc.local
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
{
|
||||
auto_https off
|
||||
}
|
||||
|
||||
:80 {
|
||||
file_server
|
||||
reverse_proxy /api/* rfd-fyi-backend:8080
|
||||
reverse_proxy /api/* backend:8080
|
||||
}
|
||||
|
||||
2
Makefile
2
Makefile
@@ -15,7 +15,7 @@ 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
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# syntax=docker/dockerfile:1.21
|
||||
FROM cgr.dev/chainguard/go:latest AS build
|
||||
# syntax=docker/dockerfile:1.20
|
||||
FROM cgr.dev/chainguard/go:latest as build
|
||||
|
||||
WORKDIR /src
|
||||
|
||||
|
||||
102
backend/app.go
102
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]")
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
module github.com/davegallant/rfd-fyi
|
||||
|
||||
go 1.26
|
||||
go 1.18
|
||||
|
||||
require (
|
||||
github.com/dlclark/regexp2 v1.11.5
|
||||
|
||||
@@ -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
|
||||
|
||||
61
flake.lock
generated
61
flake.lock
generated
@@ -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
|
||||
}
|
||||
51
flake.nix
51
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'"
|
||||
'';
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
37
index.html
37
index.html
@@ -1,51 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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" />
|
||||
|
||||
<!-- 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="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&display=block"
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
@@ -56,5 +26,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1405
package-lock.json
generated
1405
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@@ -16,15 +16,18 @@
|
||||
"axios": "^1.12.0",
|
||||
"core-js": "^3.32.1",
|
||||
"cssnano": "^7.0.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"jquery": "^3.7.0",
|
||||
"moment": "^2.29.4",
|
||||
"vue": "^3.5.17",
|
||||
"vue-github-button": "^3.0.3",
|
||||
"vue-loading-overlay": "^6.0.3",
|
||||
"vue-router": "^5.0.0"
|
||||
"vue-router": "^4.5.1",
|
||||
"vuetify": "^3.9.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.22.10",
|
||||
"@babel/eslint-parser": "^7.22.10",
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"@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.9",
|
||||
@@ -32,8 +35,10 @@
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"sass-embedded": "^1.89.2",
|
||||
"unplugin-vue-components": "^31.0.0",
|
||||
"vite": "^6.3.6"
|
||||
"unplugin-fonts": "^1.3.1",
|
||||
"unplugin-vue-components": "^30.0.0",
|
||||
"vite": "^6.3.6",
|
||||
"vite-plugin-vuetify": "^2.1.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
291
src/App.vue
291
src/App.vue
@@ -1,13 +1,11 @@
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import moment from "moment";
|
||||
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);
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -16,125 +14,16 @@ export default {
|
||||
filter: window.location.href.split("filter=")[1] || "",
|
||||
sortColumn: this.sortColumn,
|
||||
topics: [],
|
||||
isMobile: false,
|
||||
currentTheme: 'auto',
|
||||
mediaQueryListener: null,
|
||||
vuetifyTheme: null,
|
||||
darkModeQuery: null,
|
||||
themeChangeHandler: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("keydown", this.handleKeyDown);
|
||||
this.detectMobile();
|
||||
this.fetchDeals();
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
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
|
||||
@@ -144,7 +33,6 @@ export default {
|
||||
this.$refs.filter.focus();
|
||||
}
|
||||
},
|
||||
|
||||
createFilterRoute(params) {
|
||||
this.$refs.filter.blur();
|
||||
history.pushState(
|
||||
@@ -167,13 +55,11 @@ export default {
|
||||
computed: {
|
||||
formatDate() {
|
||||
return (v) => {
|
||||
const date = dayjs(String(v));
|
||||
return date.format("YYYY-MM-DD hh:mm A");
|
||||
return moment(String(v)).format("hh:mm A z (MM/DD)");
|
||||
};
|
||||
},
|
||||
filteredTopics() {
|
||||
return this.topics
|
||||
.filter((row) => {
|
||||
return this.topics.filter((row) => {
|
||||
const titles = (
|
||||
row.title.toString() +
|
||||
" [" +
|
||||
@@ -182,8 +68,7 @@ export default {
|
||||
).toLowerCase();
|
||||
const filterTerm = this.filter.toLowerCase();
|
||||
return titles.includes(filterTerm);
|
||||
})
|
||||
.sort((a, b) => b.score - a.score); // Always sort by score descending
|
||||
});
|
||||
},
|
||||
highlightMatches() {
|
||||
return (v) => {
|
||||
@@ -195,113 +80,95 @@ export default {
|
||||
return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
|
||||
};
|
||||
},
|
||||
highlightDealerName() {
|
||||
return (dealerName) => {
|
||||
if (this.filter == "") return dealerName;
|
||||
const matchExists = dealerName.toLowerCase().includes(this.filter.toLowerCase());
|
||||
if (!matchExists) return dealerName;
|
||||
|
||||
const re = new RegExp(this.filter, "ig");
|
||||
return dealerName.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
|
||||
};
|
||||
},
|
||||
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>
|
||||
|
||||
<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>
|
||||
<div id="app">
|
||||
<v-app>
|
||||
<v-main>
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="header-controls">
|
||||
<input
|
||||
<body>
|
||||
<v-text-field
|
||||
v-model="filter"
|
||||
type="text"
|
||||
placeholder="Filter deals"
|
||||
label="Filter"
|
||||
ref="filter"
|
||||
@keyup.enter="createFilterRoute(filter.toString())"
|
||||
@keyup.esc="$refs.filter.blur()"
|
||||
class="search-input"
|
||||
hide-details="true"
|
||||
/>
|
||||
<button @click="toggleTheme" class="theme-toggle" :title="getThemeTitle">
|
||||
<span class="material-symbols-outlined">{{ getThemeIcon }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<div
|
||||
v-for="topic in filteredTopics"
|
||||
:key="topic.topic_id"
|
||||
class="deal-card"
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="filteredTopics"
|
||||
:sort-by="sortColumn"
|
||||
v-model:sortBy="sortBy"
|
||||
:items-per-page="25"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="title-with-link">
|
||||
<template #item.title="{ item }">
|
||||
<a
|
||||
:href="`https://forums.redflagdeals.com${topic.web_path}`"
|
||||
:href="`https://forums.redflagdeals.com${item.web_path}`"
|
||||
target="_blank"
|
||||
class="deal-title"
|
||||
@click.stop
|
||||
v-html="highlightMatches(topic.title)"
|
||||
v-html="
|
||||
highlightMatches(
|
||||
item.title + ' [' + item.Offer.dealer_name + '] '
|
||||
)
|
||||
"
|
||||
></a>
|
||||
<a
|
||||
v-if="topic.Offer.url"
|
||||
:href="topic.Offer.url"
|
||||
target="_blank"
|
||||
class="card-link"
|
||||
title="Open deal"
|
||||
>
|
||||
<span class="material-symbols-outlined">open_in_new</span>
|
||||
<a :href="item.Offer.url" target="_blank" v-if="item.Offer.url">
|
||||
<span class="material-symbols-outlined"> link </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="score-bubble" :class="{ positive: topic.score > 0, negative: topic.score < 0, neutral: topic.score === 0 }">
|
||||
<span v-if="topic.score > 0">+{{ topic.score }}</span>
|
||||
<span v-else>{{ topic.score }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="material-symbols-outlined"> link_off </span>
|
||||
</template>
|
||||
|
||||
<div class="card-meta">
|
||||
<span class="dealer-name" v-html="highlightDealerName(topic.Offer.dealer_name)"></span>
|
||||
</div>
|
||||
<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">{{
|
||||
item.score
|
||||
}}</span>
|
||||
<span v-else>{{ item.score }}</span>
|
||||
</template>
|
||||
|
||||
<div class="card-details">
|
||||
<div class="details-stats">
|
||||
<div class="stat">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
<span class="stat-value">{{ topic.total_views }} views</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span class="stat-value">{{ topic.total_replies }} replies</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #item.last_post_time="{ item }">
|
||||
{{ formatDate(item.last_post_time) }}
|
||||
</template>
|
||||
|
||||
<div class="card-timestamp">
|
||||
Last post: {{ formatDate(topic.last_post_time) }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #loading>
|
||||
<v-progress-linear indeterminate color="grey" />
|
||||
</template>
|
||||
</v-data-table>
|
||||
</body>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</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>
|
||||
|
||||
11
src/main.js
11
src/main.js
@@ -4,12 +4,9 @@ import { createRouter, createWebHashHistory } from "vue-router";
|
||||
|
||||
import "./theme.css";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
component: App,
|
||||
},
|
||||
];
|
||||
import { registerPlugins } from "@/plugins";
|
||||
|
||||
const routes = [];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
@@ -18,5 +15,7 @@ const router = createRouter({
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
registerPlugins(app);
|
||||
|
||||
app.use(router);
|
||||
app.mount("#app");
|
||||
3
src/plugins/README.md
Normal file
3
src/plugins/README.md
Normal file
@@ -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.
|
||||
12
src/plugins/index.js
Normal file
12
src/plugins/index.js
Normal file
@@ -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)
|
||||
}
|
||||
35
src/plugins/vuetify.js
Normal file
35
src/plugins/vuetify.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* 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 },
|
||||
},
|
||||
});
|
||||
411
src/theme.css
411
src/theme.css
@@ -1,58 +1,5 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Theme-aware CSS variables */
|
||||
:root {
|
||||
/* Light theme (default) */
|
||||
--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;
|
||||
body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -60,28 +7,25 @@ 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;
|
||||
footer {
|
||||
background: #212529;
|
||||
color: white;
|
||||
padding: 3px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -90,322 +34,21 @@ html[data-bs-theme="dark"] .green-score {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
transition: color 0.2s ease;
|
||||
color: var(--v-theme-primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #d65d03;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-color);
|
||||
color: #53514f;
|
||||
}
|
||||
|
||||
/* App styles */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
html.light-theme .score-bubble.positive {
|
||||
background-color: rgb(34, 139, 34);
|
||||
color: white;
|
||||
box-shadow: 0 1px 3px rgba(34, 139, 34, 0.2);
|
||||
}
|
||||
|
||||
html.dark-theme .score-bubble.positive {
|
||||
background-color: rgb(158, 206, 106);
|
||||
color: #1a1a1a;
|
||||
box-shadow: 0 1px 3px rgba(158, 206, 106, 0.2);
|
||||
}
|
||||
|
||||
.score-bubble.negative {
|
||||
background-color: rgb(247, 118, 142);
|
||||
color: white;
|
||||
box-shadow: 0 1px 3px rgba(247, 118, 142, 0.2);
|
||||
}
|
||||
|
||||
.score-bubble.neutral {
|
||||
background-color: var(--text-secondary);
|
||||
color: var(--bg-primary);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-details {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.details-stats {
|
||||
display: flex;
|
||||
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%;
|
||||
@media (min-width: 769px) {
|
||||
.v-data-table-header th,
|
||||
.v-data-table__td,
|
||||
.v-data-footer {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
// 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";
|
||||
@@ -9,9 +11,27 @@ import { fileURLToPath, URL } from "node:url";
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
Vue(),
|
||||
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: {
|
||||
@@ -35,36 +55,4 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user