Update dependency vite to v7

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

.browserslistrc

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

.github/dependabot.yml

@@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: github-actions
-    directory: "/"
-    schedule:
-      interval: daily
-    reviewers:
-      - davegallant
-    assignees:
-      - davegallant
-  - package-ecosystem: "docker"
-    directory: "/"
-    schedule:
-      interval: weekly
-    reviewers:
-      - davegallant
-    assignees:
-      - davegallant

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v3
+        uses: actions/dependency-review-action@v4

.github/workflows/publish-containers.yml

@@ -10,7 +10,7 @@ jobs:
     name: Publish rfd-fyi-backend
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Prepare
         id: prep
@@ -39,7 +39,7 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build / push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: backend
           file: ./backend/Dockerfile
@@ -50,7 +50,7 @@ jobs:
     name: Publish rfd-fyi-frontend
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Prepare
         id: prep
@@ -79,7 +79,7 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build / push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile

Caddyfile

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

Dockerfile

@@ -4,13 +4,13 @@ WORKDIR /app
 
 COPY package*.json ./
 
-RUN yarn install
+RUN npm install
 
 COPY . .
 
-RUN yarn build
+RUN npm run build
 
-FROM caddy:2.7.6-alpine as runtime
+FROM caddy:2.10.2-alpine as runtime
 
 WORKDIR /my-site
 

Makefile

@@ -20,14 +20,13 @@ backend:
 
 ## frontend: Build and run the frontend from source
 frontend:
-	@npm install @vue/cli-service
+	@npm run serve
-	@npx vue-cli-service serve
+.PHONY: frontend
-.PHONY: server
 
 ## dev: Build and run in docker compose
 dev:
 	docker compose up --build -d
-.PHONY: up
+.PHONY: dev
 
 ## prod: Run the latest images in docker compose
 prod:
@@ -35,7 +34,7 @@ prod:
 	@docker pull ghcr.io/davegallant/rfd-fyi-backend
 	@docker pull ghcr.io/davegallant/rfd-fyi-frontend
 	@docker compose -f docker-compose.prod.yml up -d
-.PHONY: up
+.PHONY: prod
 
 ## teardown: Teardown docker
 teardown:

README.md

@@ -4,8 +4,6 @@ This repository provides a simple, less-distracting overlay for hot deals posted
 
 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:

backend/Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker/dockerfile:1.4
+# syntax=docker/dockerfile:1.19
 FROM cgr.dev/chainguard/go:latest as build
 
 WORKDIR /src

backend/app.go

@@ -6,15 +6,15 @@ import (
 	"io/ioutil"
 	"math/rand"
 	"net/http"
-	"os"
+	"net/url"
 	"strings"
 	"time"
 
+	"github.com/dlclark/regexp2"
 	_ "github.com/joho/godotenv/autoload"
 	"github.com/rs/zerolog/log"
 
 	"github.com/gorilla/mux"
-	"go.opentelemetry.io/otel"
 )
 
 // @title           RFD FYI API
@@ -37,6 +37,12 @@ type App struct {
 	BasePath      string
 	CurrentTopics []Topic
 	LastRefresh   time.Time
+	Redirects     []Redirect
+}
+
+type Redirect struct {
+	Name    string `json:"name"`
+	Pattern string `json:"pattern"`
 }
 
 func (a *App) Initialize() {
@@ -78,23 +84,26 @@ func respondWithJSON(w http.ResponseWriter, code int, payload interface{}) {
 // @Router       /topics [get]
 // @Success 200 {array} Topic
 func (a *App) listTopics(w http.ResponseWriter, r *http.Request) {
-	tracer := otel.Tracer(os.Getenv("OTEL_SERVICE_NAME"))
-	ctx := r.Context()
-	ctx, span := tracer.Start(ctx, "list-topics")
-	defer span.End()
-
 	respondWithJSON(w, http.StatusOK, a.CurrentTopics)
 }
 
 func (a *App) refreshTopics() {
 	for {
+		log.Info().Msg("Refreshing topics")
 		latestTopics := a.getDeals(9, 1, 6)
-		latestTopics = a.updateScores(latestTopics)
+
-		log.Debug().Msg("Refreshing topics")
+		if len(latestTopics) > 0 {
-		a.CurrentTopics = 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())
-		time.Sleep(time.Duration(rand.Intn(90 - 60 + 1) + 60) * time.Second)
+		time.Sleep(time.Duration(rand.Intn(90-60+1)+60) * time.Second)
 	}
 }
 
@@ -105,6 +114,38 @@ func (a *App) updateScores(t []Topic) []Topic {
 	return t
 }
 
+func (a *App) stripRedirects(t []Topic) []Topic {
+	for i := range t {
+		if t[i].Offer.Url == "" {
+			continue
+		}
+
+		var offerUrl = t[i].Offer.Url
+		log.Debug().Msgf("Offer url is : %s", offerUrl)
+		for _, r := range a.Redirects {
+			re := regexp2.MustCompile(r.Pattern, 0)
+			if m, _ := re.FindStringMatch(offerUrl); m != nil {
+				g := m.GroupByName("baseUrl")
+
+				if g.Name != "baseUrl" {
+					continue
+				}
+				decodedValue, err := url.QueryUnescape(g.String())
+				if err != nil {
+					log.Error().Msgf("%s", err)
+					break
+				}
+				t[i].Offer.Url = decodedValue
+				log.Debug().Msgf("Setting offer url to: %s", t[i].Offer.Url)
+
+				break
+			}
+		}
+
+	}
+	return t
+}
+
 func (a *App) isSponsor(t Topic) bool {
 	return strings.HasPrefix(t.Title, "[Sponsored]")
 }
@@ -129,7 +170,7 @@ func (a *App) getDeals(id int, firstPage int, lastPage int) []Topic {
 		err = json.Unmarshal([]byte(body), &response)
 
 		if err != nil {
-			log.Warn().Msgf("could not unmarshal response body: %s\n %s", err)
+			log.Warn().Msgf("could not unmarshal response body: %s", err)
 		}
 
 		for _, topic := range response.Topics {
@@ -141,3 +182,26 @@ func (a *App) getDeals(id int, firstPage int, lastPage int) []Topic {
 	}
 	return t
 }
+
+func (a *App) getRedirects() []Redirect {
+
+	requestURL := fmt.Sprintf("https://raw.githubusercontent.com/davegallant/rfd-redirect-stripper/main/redirects.json")
+	res, err := http.Get(requestURL)
+	if err != nil {
+		log.Warn().Msgf("error fetching redirects: %s\n", err)
+	}
+	body, err := ioutil.ReadAll(res.Body)
+	if err != nil {
+		log.Warn().Msgf("could not read response body: %s\n", err)
+	}
+
+	var r []Redirect
+
+	err = json.Unmarshal([]byte(body), &r)
+
+	if err != nil {
+		log.Warn().Msgf("could not unmarshal response body: %s", err)
+	}
+
+	return r
+}

backend/go.mod

@@ -3,17 +3,14 @@ module github.com/davegallant/rfd-fyi
 go 1.18
 
 require (
-	github.com/gorilla/mux v1.8.0
+	github.com/dlclark/regexp2 v1.11.5
-	github.com/joho/godotenv v1.4.0
+	github.com/gorilla/mux v1.8.1
-	github.com/rs/zerolog v1.27.0
+	github.com/joho/godotenv v1.5.1
-	go.opentelemetry.io/otel v1.11.1
+	github.com/rs/zerolog v1.34.0
 )
 
 require (
-	github.com/go-logr/logr v1.2.3 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/go-logr/stdr v1.2.2 // indirect
+	github.com/mattn/go-isatty v0.0.19 // indirect
-	github.com/mattn/go-colorable v0.1.12 // indirect
+	golang.org/x/sys v0.12.0 // indirect
-	github.com/mattn/go-isatty v0.0.14 // indirect
-	go.opentelemetry.io/otel/trace v1.11.1 // indirect
-	golang.org/x/sys v0.5.0 // indirect
 )

backend/go.sum

@@ -1,32 +1,38 @@
-github.com/coreos/go-systemd/v22 v22.3.3-0.20220203105225-a9a7ef127534/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
+github.com/coreos/go-systemd/v22 v22.5.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/dlclark/regexp2 v1.10.0 h1:+/GIL799phkJqYW+3YbOd8LCcbHzT0Pbo8zl70MHsq0=
-github.com/go-logr/logr v1.2.2/go.mod h1:jdQByPbusPIv2/zmleS9BjJVeZ6kBagPoEUsqbVz/1A=
+github.com/dlclark/regexp2 v1.10.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
-github.com/go-logr/logr v1.2.3 h1:2DntVwHkVopvECVRSlL5PSo9eG+cAkDCuckLubN+rq0=
+github.com/dlclark/regexp2 v1.11.0 h1:G/nrcoOa7ZXlpoa/91N3X7mM3r8eIlMBBJZvsz/mxKI=
-github.com/go-logr/logr v1.2.3/go.mod h1:jdQByPbusPIv2/zmleS9BjJVeZ6kBagPoEUsqbVz/1A=
+github.com/dlclark/regexp2 v1.11.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
-github.com/go-logr/stdr v1.2.2 h1:hSWxHoqTgW2S2qGc0LTAI563KZ5YKYRhT3MFKZMbjag=
+github.com/dlclark/regexp2 v1.11.1 h1:CJs78ewKXO9PuNf6Xwlw6eibMadBkXTRpOeUdv+IcWM=
-github.com/go-logr/stdr v1.2.2/go.mod h1:mMo/vtBO5dYbehREoey6XUKy/eSumjCCveDpRre4VKE=
+github.com/dlclark/regexp2 v1.11.1/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
+github.com/dlclark/regexp2 v1.11.2 h1:/u628IuisSTwri5/UKloiIsH8+qF2Pu7xEQX+yIKg68=
+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/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
+github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
-github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
+github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
-github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
-github.com/joho/godotenv v1.4.0 h1:3l4+N6zfMWnkbPEXKng2o2/MR5mSwTrBih4ZEkkz1lg=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
-github.com/joho/godotenv v1.4.0/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.12 h1:jF+Du6AlPIjs2BiUiQlKOX0rt3SujHxPnksPKZbaA40=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-colorable v0.1.12/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.14 h1:yVuAays6BHfxijgZPzw+3Zlu5yQgKGP2/hcQbHb7S9Y=
+github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
-github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
+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/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/rs/xid v1.5.0/go.mod h1:trrq9SKmegXys3aeAKXMUTdJsYXVwGY3RLcfgqegfbg=
-github.com/rs/xid v1.3.0/go.mod h1:trrq9SKmegXys3aeAKXMUTdJsYXVwGY3RLcfgqegfbg=
+github.com/rs/xid v1.6.0/go.mod h1:7XoLgs4eV+QndskICGsho+ADou8ySMSjJKDIan90Nz0=
-github.com/rs/zerolog v1.27.0 h1:1T7qCieN22GVc8S4Q2yuexzBb1EqjbgjSH9RohbMjKs=
+github.com/rs/zerolog v1.31.0 h1:FcTR3NnLWW+NnTwwhFWiJSZr4ECLpqCm6QsEnyvbV4A=
-github.com/rs/zerolog v1.27.0/go.mod h1:7frBqO0oezxmnO7GF86FY++uy8I0Tk/If5ni1G9Qc0U=
+github.com/rs/zerolog v1.31.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
-github.com/stretchr/testify v1.8.0 h1:pSgiaMZlXftHpm5L7V1+rVB+AZJydKsMxsQBIJw4PKk=
+github.com/rs/zerolog v1.32.0 h1:keLypqrlIjaFsbmJOBdB/qvyF8KEtCWHwobLp5l/mQ0=
-go.opentelemetry.io/otel v1.11.1 h1:4WLLAmcfkmDk2ukNXJyq3/kiz/3UzCaYq6PskJsaou4=
+github.com/rs/zerolog v1.32.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
-go.opentelemetry.io/otel v1.11.1/go.mod h1:1nNhXBbWSD0nsL38H6btgnFN2k4i0sNLHNNMZMSbUGE=
+github.com/rs/zerolog v1.33.0 h1:1cU2KZkvPxNyfgEmhHAz/1A9Bz+llsdYzklWFzgp0r8=
-go.opentelemetry.io/otel/trace v1.11.1 h1:ofxdnzsNrGBYXbP7t7zpUK281+go5rF7dvdIZXF8gdQ=
+github.com/rs/zerolog v1.33.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
-go.opentelemetry.io/otel/trace v1.11.1/go.mod h1:f/Q9G7vzk5u91PhbmKbg1Qn0rzH1LJ4vbPHFGkTPtOk=
+github.com/rs/zerolog v1.34.0 h1:k43nTLIwcTVQAncfCw4KZ2VY6ukYoZaBPNOE8txlOeY=
-golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+github.com/rs/zerolog v1.34.0/go.mod h1:bJsvje4Z08ROH4Nhs5iH600c3IkWhwp44iRc54W6wYQ=
-golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.12.0 h1:CM0HF96J0hcLAwsHPJZjfdNzs0gftsLfgKt57wWHJ0o=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=

docker-compose.prod.yml

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

docker-compose.yml

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

index.html

@@ -1,15 +1,21 @@
 <!DOCTYPE html>
-<html lang="">
+<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>
+    <title>rfd-fyi - An overlay of hot deals</title>
+    <script
+      defer
+      src="https://umami.snake-cloud.ts.net/script.js"
+      data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"
+    ></script>
   </head>
   <body>
     <noscript>
@@ -19,6 +25,7 @@
       >
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -3,35 +3,42 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vite",
-    "build": "vue-cli-service build",
+    "preview": "vite preview",
-    "lint": "vue-cli-service lint"
+    "build": "vite build",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@github/hotkey": "^2.0.1",
+    "@fontsource/roboto": "5.2.8",
+    "@github/hotkey": "^3.0.0",
+    "@mdi/font": "7.4.47",
     "@popperjs/core": "^2.11.8",
-    "axios": "^1.6.0",
+    "axios": "^1.12.0",
-    "bootstrap": "^5.3.1",
-    "bootstrap-vue": "^2.22.0",
     "core-js": "^3.32.1",
+    "cssnano": "^7.0.0",
     "jquery": "^3.7.0",
     "moment": "^2.29.4",
-    "vue": "^3.3.4",
+    "vue": "^3.5.17",
     "vue-github-button": "^3.0.3",
-    "vue-gtag": "^2.0.1",
     "vue-loading-overlay": "^6.0.3",
-    "vue-router": "4.2.4"
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@types/bootstrap": "^5.2.6",
+    "@vitejs/plugin-vue": "^5.2.3",
-    "@types/mousetrap": "^1.6.11",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-service": "^5.0.9",
     "eslint": "^8.47.0",
-    "eslint-plugin-vue": "^9.17.0"
+    "eslint-plugin-vue": "^9.17.0",
+    "postcss-cli": "^11.0.0",
+    "sass-embedded": "^1.89.2",
+    "unplugin-fonts": "^1.3.1",
+    "unplugin-vue-components": "^29.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-vuetify": "^2.1.1"
   },
   "eslintConfig": {
     "root": true,
@@ -46,11 +53,5 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {}
-  },
+  }
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
 }

renovate.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "schedule": [
+    "every weekend"
+  ],
+  "extends": [
+    "config:recommended"
+  ]
+}

src/App.vue

@@ -2,33 +2,37 @@
 import axios from "axios";
 import moment from "moment";
 import Loading from "vue-loading-overlay";
-import GithubButton from "vue-github-button";
 import { install } from "@github/hotkey";
 
-import 'vue-loading-overlay/dist/css/index.css';
+import "vue-loading-overlay/dist/css/index.css";
+import { ref } from "vue";
 
 export default {
   data() {
     return {
       ascending: this.ascending,
       filter: window.location.href.split("filter=")[1] || "",
-      isLoading: false,
       sortColumn: this.sortColumn,
       topics: [],
     };
   },
   mounted() {
-    // Install all the hotkeys on the page
+    window.addEventListener("keydown", this.handleKeyDown);
-    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);
+  },
   methods: {
+    handleKeyDown(event) {
+      const isInput = ["INPUT", "TEXTAREA"].includes(
+        document.activeElement.tagName
+      );
+      if (event.key === "/" && !isInput) {
+        event.preventDefault(); // prevent typing `/` into whatever is focused
+        this.$refs.filter.focus();
+      }
+    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -38,49 +42,15 @@ 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() {
@@ -88,14 +58,6 @@ export default {
         return moment(String(v)).format("hh:mm A z (MM/DD)");
       };
     },
-    columns() {
-      return {
-        Deal: "deal",
-        Score: "score",
-        Views: "total_views",
-        "Last Reply": "last_post_time",
-      };
-    },
     filteredTopics() {
       return this.topics.filter((row) => {
         const titles = (
@@ -119,110 +81,81 @@ export default {
       };
     },
   },
-  components: {
-    Loading,
-    GithubButton,
-  },
 };
 </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>
-  <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+  <v-app>
-  <body>
+    <v-main>
-    <input
+      <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-      class="form-control bg-dark text-light"
+      <body>
-      type="text"
+        <v-text-field
-      id="filter"
+          v-model="filter"
-      placeholder="Filter"
+          label="Filter"
-      data-hotkey="/"
+          ref="filter"
-      v-model="filter"
+          @keyup.enter="createFilterRoute(filter.toString())"
-      v-on:keyup.enter="createFilterRoute(this.filter.toString())"
+          @keyup.esc="$refs.filter.blur()"
-      v-on:keyup.escape="this.$refs.filter.blur()"
+          hide-details="true"
-      ref="filter"
+        />
-    />
+        <v-data-table
-    <table class="table table-dark table-hover">
+          :headers="headers"
-      <thead class="thead thead-light text-muted">
+          :items="filteredTopics"
-        <tr>
+          :sort-by="sortColumn"
-          <th
+          v-model:sortBy="sortBy"
-            v-for="(col, key) in columns"
+          :items-per-page="25"
-            v-on:click="sortTable(col, true)"
-            :key="col"
-          >
-            {{ key }}
-            <div
-              class="arrow"
-              v-if="col == sortColumn"
-              v-bind:class="ascending ? 'arrow_up' : 'arrow_down'"
-            ></div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <loading
-          v-model:active="isLoading"
-          color="#ccc"
-          opacity=0
-          loader="bars"
-          :is-full-page="false"
         >
-        </loading>
+          <template #item.title="{ item }">
-        <tr
-          scope="row"
-          v-for="(topic, index) in filteredTopics"
-          :key="`topic.topic_id-${index}`"
-        >
-          <td scope="col">
             <a
-              :href="`https://forums.redflagdeals.com${topic.web_path}`"
+              :href="`https://forums.redflagdeals.com${item.web_path}`"
               target="_blank"
               v-html="
                 highlightMatches(
-                  topic.title + ' [' + topic.Offer.dealer_name + '] '
+                  item.title + ' [' + item.Offer.dealer_name + '] '
                 )
               "
             ></a>
-            <a
+            <a :href="item.Offer.url" target="_blank" v-if="item.Offer.url">
-              :href="`${topic.Offer.url}`"
+              <span class="material-symbols-outlined"> link </span>
-              target="_blank"
+            </a>
-              v-if="topic.Offer.url"
+            <span v-else class="material-symbols-outlined"> link_off </span>
-              ><span class="material-symbols-outlined"> link </span></a
+          </template>
+
+          <template #item.score="{ item }">
+            <span v-if="item.score > 0" class="green-score"
+              >+{{ item.score }}</span
             >
-            <span v-if="!topic.Offer.url" class="material-symbols-outlined">
+            <span v-else-if="item.score < 0" class="red-score">{{
-              link_off
+              item.score
-            </span>
+            }}</span>
-          </td>
+            <span v-else>{{ item.score }}</span>
-          <td v-if="topic.score > 0" scope="col" class="green-score">
+          </template>
-            +{{ topic.score }}
+
-          </td>
+          <template #item.last_post_time="{ item }">
-          <td v-if="topic.score < 0" scope="col" class="red-score">
+            {{ formatDate(item.last_post_time) }}
-            {{ topic.score }}
+          </template>
-          </td>
+
-          <td v-if="topic.score == 0" scope="col">
+          <template #loading>
-            {{ topic.score }}
+            <v-progress-linear indeterminate color="grey" />
-          </td>
+          </template>
-          <td scope="col">{{ topic.total_views }}</td>
+        </v-data-table>
-          <td scope="col">{{ formatDate(topic.last_post_time) }}</td>
+      </body>
-        </tr>
+    </v-main>
-      </tbody>
+  </v-app>
-    </table>
-    <div v-if="!isMobile()">
-      <footer class="fixed-bottom">
-        <small
-          >Tip: Press '/' to filter and create filter links (i.e.
-          <a
-            href="/#/filter=pizza"
-            onclick="setTimeout(location.reload.bind(location), 1)"
-            >https://rfd.fyi/#/filter=pizza</a
-          >)</small
-        >
-        <div class="footer-right">
-          <github-button href="https://github.com/davegallant/rfd-fyi"
-            >Star</github-button
-          >
-        </div>
-      </footer>
-    </div>
-  </body>
 </template>
 
 <style>
@@ -233,4 +166,9 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
+
+.fixed-bottom {
+  background: #ffc;
+  color: black;
+}
 </style>

src/main.js

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

src/plugins/README.md

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

src/plugins/index.js

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

src/plugins/vuetify.js

@@ -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 },
+  },
+});

src/theme.css

@@ -1,185 +1,13 @@
-@import url(https://fonts.googleapis.com/css?family=Inconsolata);
-@import url(https://fonts.googleapis.com/css?family=PT+Sans);
-@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
-
 body {
-  background-color: black;
   max-width: 100%;
 }
 
-html {
-  background-color: #282828; /**/
-  min-width: 100%;
-}
-
-.thead {
-  position: sticky;
-  top: 0;
-}
-
-.form-control {
-  border-color: #404142;
-}
-
-.form-control:focus {
-  color: #ccc !important;
-  background-color: #404142 !important;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-[hidden] {
-  display: none;
-}
 html {
   font-family: sans-serif;
+  min-width: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
 }
-body {
-  margin: 0;
-}
-a:focus {
-  outline: thin dotted;
-}
-a:active,
-a:hover {
-  outline: 0;
-}
-h1 {
-  font-size: 2em;
-}
-b,
-strong {
-  font-weight: bold;
-}
-dfn {
-  font-style: italic;
-}
-mark {
-  background: #ff0;
-  color: #000;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, serif;
-  font-size: 1em;
-}
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-q {
-  quotes: "\201C""\201D""\2018""\2019";
-}
-sub,
-svg:not(:root) {
-  overflow: hidden;
-}
-legend {
-  border: 0;
-  padding: 0;
-}
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  margin: 0;
-}
-button,
-input {
-  line-height: normal;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  cursor: pointer;
-}
-button[disabled],
-input[disabled] {
-  cursor: default;
-}
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-input[type="search"] {
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-textarea {
-  overflow: auto;
-  vertical-align: top;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-html {
-  font-family: "PT Sans", sans-serif;
-}
-pre,
-code {
-  font-family: "Inconsolata", sans-serif;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "PT Sans Narrow", sans-serif;
-  font-weight: 700;
-}
-body {
-  background-color: #3c3836; /**/
-  margin: 0 auto;
-}
-a {
-  color: #83a598; /**/
-}
-a:visited {
-  color: #53514f; /**/
-}
-a:hover {
-  color: #d65d03; /**/
-}
 
 footer {
   background: #212529;
@@ -198,28 +26,29 @@ footer {
 }
 
 .green-score {
-  color: rgb(22, 120, 63) !important;
+  color: rgb(158, 206, 106) !important;
 }
 
 .red-score {
-  color: rgb(175, 21, 21) !important;
+  color: rgb(247, 118, 142) !important;
 }
 
-.arrow_down {
+a {
-  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");
+  color: var(--v-theme-primary);
-}
-.arrow_up {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=");
-}
-.arrow {
-  float: right;
-  width: 10px;
-  height: 12px;
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position-y: bottom;
 }
 
-.material-symbols-outlined {
+a:hover {
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  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;
+  }
 }

vite.config.mjs

@@ -0,0 +1,58 @@
+// Plugins
+import Components from "unplugin-vue-components/vite";
+import Vue from "@vitejs/plugin-vue";
+import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+import Fonts from "unplugin-fonts/vite";
+
+// Utilities
+import { defineConfig } from "vite";
+import { fileURLToPath, URL } from "node:url";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify(),
+    Components(),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: "Roboto",
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ["normal", "italic"],
+          },
+        ],
+      },
+    }),
+  ],
+  optimizeDeps: {
+    exclude: ["vuetify"],
+  },
+  define: { "process.env": {} },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("src", import.meta.url)),
+    },
+    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      "/api": "http://localhost:8080",
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: "modern-compiler",
+      },
+      scss: {
+        api: "modern-compiler",
+      },
+    },
+  },
+});

vue.config.js

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