3 Commits

Author SHA1 Message Date
Dave Gallant
bea32bc3b2 Bump 2024-08-16 15:05:45 -04:00
Dave Gallant
0901010aff Fix lint issue 2024-08-16 15:01:35 -04:00
renovate[bot]
efd69575c3 Update dependency eslint to v9 2024-08-16 15:01:35 -04:00
31 changed files with 3193 additions and 6519 deletions

View File

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

1
.envrc
View File

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

View File

@@ -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

View File

@@ -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

2
.gitignore vendored
View File

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

View File

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

View File

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

View File

@@ -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

View File

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

View File

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

View File

@@ -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,104 +87,16 @@ 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")
latestRedirects := a.getRedirects()
a.Redirects = latestRedirects
a.CurrentTopics = a.stripRedirects(latestTopics)
}
a.LastRefresh = time.Now()
rand.Seed(time.Now().UnixNano())
@@ -232,22 +143,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]")
}

View File

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

View File

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

View File

@@ -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

View File

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

View File

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

61
flake.lock generated
View File

@@ -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
}

View File

@@ -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'"
'';
};
}
);
}

View File

@@ -1,52 +0,0 @@
<!DOCTYPE html>
<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" />
<!-- 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&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>
</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>

8639
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -3,39 +3,37 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vite",
"preview": "vite preview",
"build": "vite build",
"lint": "eslint . --fix"
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"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.6.0",
"bootstrap": "^5.3.1",
"bootstrap-vue": "^2.22.0",
"core-js": "^3.32.1",
"cssnano": "^7.0.0",
"dayjs": "^1.11.10",
"vue": "^3.5.17",
"jquery": "^3.7.0",
"moment": "^2.29.4",
"vue": "^3.3.4",
"vue-github-button": "^3.0.3",
"vue-gtag": "^2.0.1",
"vue-loading-overlay": "^6.0.3",
"vue-router": "^5.0.0",
"vuetify": "^3.9.6"
"vue-router": "4.4.3"
},
"devDependencies": {
"@babel/core": "^7.22.10",
"@babel/eslint-parser": "^7.22.10",
"@vitejs/plugin-vue": "^5.2.3",
"@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",
"eslint": "^8.47.0",
"@vue/cli-service": "^5.0.8",
"eslint": "^9.0.0",
"eslint-plugin-vue": "^9.17.0",
"postcss-cli": "^11.0.0",
"sass-embedded": "^1.89.2",
"unplugin-vue-components": "^31.0.0",
"vite": "^7.0.0",
"vite-plugin-vuetify": "^2.1.1"
"postcss-cli": "^11.0.0"
},
"eslintConfig": {
"root": true,
@@ -50,5 +48,11 @@
"parser": "@babel/eslint-parser"
},
"rules": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

25
public/index.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>
</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>

View File

@@ -1,125 +1,34 @@
<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 GithubButton from "vue-github-button";
import { install } from "@github/hotkey";
import { ref, reactive } from "vue";
import "vue-loading-overlay/dist/css/index.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: [],
hoveredTopicId: null,
tooltipData: {},
loadingTooltip: {},
tooltipPosition: { x: 0, y: 0 },
isMobile: false,
};
},
mounted() {
window.addEventListener("keydown", this.handleKeyDown);
this.detectMobile();
// Install all the hotkeys on the page
for (const el of document.querySelectorAll("[data-hotkey]")) {
install(el);
}
this.sortColumn = localStorage.getItem("sortColumn") || "score";
this.ascending =
localStorage.getItem("ascending") === "false" ? false : true;
this.isLoading = true;
this.fetchDeals();
},
beforeUnmount() {
window.removeEventListener("keydown", this.handleKeyDown);
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
);
if (event.key === "/" && !isInput) {
event.preventDefault(); // prevent typing `/` into whatever is focused
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(
@@ -129,21 +38,62 @@ 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 date.format("hh:mm A (MM/DD)");
return moment(String(v)).format("hh:mm A z (MM/DD)");
};
},
columns() {
return {
Deal: "deal",
Score: "score",
Views: "total_views",
"Last Reply": "last_post_time",
};
},
filteredTopics() {
@@ -168,132 +118,115 @@ 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;
},
components: {
Loading,
GithubButton,
},
};
</script>
<script setup>
const sortBy = ref([{ key: "score", order: "desc" }]);
</script>
<template>
<v-app>
<v-main>
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<body>
<v-text-field
<input
class="form-control"
type="text"
id="filter"
placeholder="Filter"
data-hotkey="/"
v-model="filter"
label="Filter"
v-on:keyup.enter="createFilterRoute(this.filter.toString())"
v-on:keyup.escape="this.$refs.filter.blur()"
ref="filter"
@keyup.enter="createFilterRoute(filter.toString())"
@keyup.esc="$refs.filter.blur()"
hide-details="true"
/>
<v-data-table
:headers="visibleHeaders"
:items="filteredTopics"
:sort-by="sortColumn"
v-model:sortBy="sortBy"
:items-per-page="50"
<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"
>
<template #item.title="{ item }">
{{ key }}
<div
class="arrow"
v-if="col == sortColumn"
v-bind:class="ascending ? 'arrow_up' : 'arrow_down'"
></div>
</th>
</tr>
</thead>
<tbody>
<loading
v-model:active="isLoading"
color="#ccc"
opacity="0"
loader="bars"
:is-full-page="false"
>
</loading>
<tr
scope="row"
v-for="(topic, index) in filteredTopics"
:key="`topic.topic_id-${index}`"
>
<td scope="col">
<a
:href="`https://forums.redflagdeals.com${item.web_path}`"
:href="`https://forums.redflagdeals.com${topic.web_path}`"
target="_blank"
@mouseenter="handleTitleHover(item, $event)"
@mouseleave="handleTitleLeave"
@mousemove="handleMouseMove"
v-html="
highlightMatches(
item.title
topic.title + ' [' + topic.Offer.dealer_name + '] '
)
"
></a>
</template>
<template #item.score="{ item }">
<span v-if="item.score > 0" class="green-score"
>+{{ item.score }}</span
<a
:href="`${topic.Offer.url}`"
target="_blank"
v-if="topic.Offer.url"
><span class="material-symbols-outlined"> link </span></a
>
<span v-else-if="item.score < 0" class="red-score">{{
item.score
}}</span>
<span v-else>{{ item.score }}</span>
</template>
<template #item.last_post_time="{ item }">
{{ formatDate(item.last_post_time) }}
</template>
<template #loading>
<v-progress-linear indeterminate color="grey" />
</template>
</v-data-table>
<!-- 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,
}"
<span v-if="!topic.Offer.url" class="material-symbols-outlined">
link_off
</span>
</td>
<td v-if="topic.score > 0" scope="col" class="green-score">
+{{ topic.score }}
</td>
<td v-if="topic.score < 0" scope="col" class="red-score">
{{ topic.score }}
</td>
<td v-if="topic.score == 0" scope="col">
{{ topic.score }}
</td>
<td scope="col">{{ topic.total_views }}</td>
<td scope="col">{{ formatDate(topic.last_post_time) }}</td>
</tr>
</tbody>
</table>
<div v-if="!isMobile()">
<footer class="fixed-bottom">
<small
>Press '/' to begin filtering (i.e.
<a
href="/#/filter=costco"
onclick="setTimeout(location.reload.bind(location), 1)"
>https://rfd.fyi/#/filter=costco</a
>)</small
>
<div class="footer-right">
<github-button href="https://github.com/davegallant/rfd-fyi"
>Star</github-button
>
<div 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>
</footer>
</div>
</body>
</v-main>
</v-app>
</template>
<style scoped>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@@ -301,91 +234,4 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
text-align: center;
color: #2c3e50;
}
.fixed-bottom {
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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,79 +0,0 @@
// Plugins
import Components from "unplugin-vue-components/vite";
import Vue from "@vitejs/plugin-vue";
import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
// Utilities
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Vue({
template: { transformAssetUrls },
}),
Vuetify(),
Components(),
],
optimizeDeps: {
exclude: ["vuetify"],
include: ["axios", "vue-router", "vue-loading-overlay"],
},
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: {
"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,
},
});

7
vue.config.js Normal file
View File

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