mirror of
https://github.com/davegallant/rfd-fyi.git
synced 2026-03-03 17:46:35 +00:00
Compare commits
16 Commits
8ad0633b1d
...
renovate/v
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2b30ff7b73 | ||
| bd4edebb0b | |||
| da44c48ba8 | |||
|
|
8129bc37b3 | ||
|
|
c09edd517c | ||
|
|
7442dd4dbd | ||
|
|
8d1fbc12de | ||
| a515a2277b | |||
| eeae328325 | |||
|
|
bde91d13bf | ||
|
|
0b938d5b02 | ||
| 9c348ee448 | |||
| 1769127342 | |||
| f0f175fb64 | |||
| cb6ff92283 | |||
| 81a5cde565 |
@@ -1 +1,4 @@
|
||||
backend
|
||||
node_modules
|
||||
dist
|
||||
.git
|
||||
.github
|
||||
|
||||
50
.github/workflows/publish-container.yml
vendored
Normal file
50
.github/workflows/publish-container.yml
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
name: Publish Container
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
schedule:
|
||||
- cron: "0 0 * * 0"
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
name: Publish rfd-fyi
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Prepare
|
||||
id: prep
|
||||
run: |
|
||||
IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi
|
||||
VERSION=${GITHUB_REF##*/}
|
||||
if [[ $GITHUB_REF == refs/heads/main ]]; then
|
||||
VERSION=latest
|
||||
fi
|
||||
if [[ $GITHUB_REF == refs/tags/* ]]; then
|
||||
VERSION=${GITHUB_REF#refs/tags/v}
|
||||
fi
|
||||
TAGS="${IMAGE_NAME}:${VERSION}"
|
||||
if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
|
||||
TAGS="$TAGS,${IMAGE_NAME}:latest"
|
||||
fi
|
||||
echo "tags=${TAGS}" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Login to GitHub Packages Docker Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build / push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
push: ${{ github.ref == 'refs/heads/main' }}
|
||||
tags: ${{ steps.prep.outputs.tags }}
|
||||
87
.github/workflows/publish-containers.yml
vendored
87
.github/workflows/publish-containers.yml
vendored
@@ -1,87 +0,0 @@
|
||||
name: Publish Containers
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
publish-backend:
|
||||
name: Publish rfd-fyi-backend
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Prepare
|
||||
id: prep
|
||||
run: |
|
||||
IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi-backend
|
||||
VERSION=${GITHUB_REF##*/}
|
||||
if [[ $GITHUB_REF == refs/heads/main ]]; then
|
||||
VERSION=latest
|
||||
fi
|
||||
if [[ $GITHUB_REF == refs/tags/* ]]; then
|
||||
VERSION=${GITHUB_REF#refs/tags/v}
|
||||
fi
|
||||
TAGS="${IMAGE_NAME}:${VERSION}"
|
||||
if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
|
||||
TAGS="$TAGS,${IMAGE_NAME}:latest"
|
||||
fi
|
||||
echo ::set-output name=tags::${TAGS}
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Login to GitHub Packages Docker Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build / push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: backend
|
||||
file: ./backend/Dockerfile
|
||||
push: ${{ github.ref == 'refs/heads/main' }}
|
||||
tags: ${{ steps.prep.outputs.tags }}
|
||||
|
||||
publish-frontend:
|
||||
name: Publish rfd-fyi-frontend
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Prepare
|
||||
id: prep
|
||||
run: |
|
||||
IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/rfd-fyi-frontend
|
||||
VERSION=${GITHUB_REF##*/}
|
||||
if [[ $GITHUB_REF == refs/heads/main ]]; then
|
||||
VERSION=latest
|
||||
fi
|
||||
if [[ $GITHUB_REF == refs/tags/* ]]; then
|
||||
VERSION=${GITHUB_REF#refs/tags/v}
|
||||
fi
|
||||
TAGS="${IMAGE_NAME}:${VERSION}"
|
||||
if [[ $VERSION =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
|
||||
TAGS="$TAGS,${IMAGE_NAME}:latest"
|
||||
fi
|
||||
echo ::set-output name=tags::${TAGS}
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Login to GitHub Packages Docker Registry
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Build / push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
push: ${{ github.ref == 'refs/heads/main' }}
|
||||
tags: ${{ steps.prep.outputs.tags }}
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,5 @@
|
||||
node_modules
|
||||
dist
|
||||
/dist
|
||||
data/
|
||||
backend/bin/
|
||||
.vscode
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
auto_https off
|
||||
}
|
||||
|
||||
:80 {
|
||||
file_server
|
||||
reverse_proxy /api/* rfd-fyi-backend:8080
|
||||
}
|
||||
24
Dockerfile
24
Dockerfile
@@ -1,20 +1,20 @@
|
||||
FROM node:20.2.0-alpine3.16 as builder
|
||||
|
||||
# Build frontend
|
||||
FROM dhi.io/node:25-debian13-dev AS frontend-builder
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN npm run build
|
||||
|
||||
FROM caddy:2.10.2-alpine as runtime
|
||||
# Build backend (with embedded frontend)
|
||||
FROM dhi.io/golang:1.26-debian13-dev AS backend-builder
|
||||
WORKDIR /src
|
||||
COPY backend /src
|
||||
COPY --from=frontend-builder /app/dist /src/dist
|
||||
RUN CGO_ENABLED=0 go build -o rfd-fyi .
|
||||
|
||||
WORKDIR /my-site
|
||||
|
||||
COPY --from=builder /app/dist ./
|
||||
|
||||
COPY Caddyfile /etc/caddy/Caddyfile
|
||||
FROM dhi.io/static:20251003-musl-alpine3.23 AS runtime
|
||||
COPY --from=backend-builder /src/rfd-fyi /rfd-fyi
|
||||
|
||||
EXPOSE 8080
|
||||
ENTRYPOINT ["/rfd-fyi"]
|
||||
|
||||
19
Makefile
19
Makefile
@@ -15,7 +15,7 @@ help:
|
||||
|
||||
## backend: Build and run the backend from source
|
||||
backend:
|
||||
@cd backend && CGO_ENABLED=0 go run .
|
||||
@cd backend && CGO_ENABLED=0 HTTP_PORT=8080 go run .
|
||||
.PHONY: backend
|
||||
|
||||
## frontend: Build and run the frontend from source
|
||||
@@ -23,20 +23,21 @@ frontend:
|
||||
@npm run serve
|
||||
.PHONY: frontend
|
||||
|
||||
## dev: Build and run in docker compose
|
||||
## dev: Build and run in Docker
|
||||
dev:
|
||||
docker compose up --build -d
|
||||
docker build -t rfd-fyi:dev .
|
||||
docker run -d --name rfd-fyi -p 8080:8080 rfd-fyi:dev
|
||||
.PHONY: dev
|
||||
|
||||
## prod: Run the latest images in docker compose
|
||||
## prod: Run the latest image in Docker
|
||||
prod:
|
||||
@git pull
|
||||
@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
|
||||
@docker pull ghcr.io/davegallant/rfd-fyi
|
||||
@docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
|
||||
.PHONY: prod
|
||||
|
||||
## teardown: Teardown docker
|
||||
## teardown: Teardown Docker
|
||||
teardown:
|
||||
docker compose down
|
||||
docker stop rfd-fyi || true
|
||||
docker rm rfd-fyi || true
|
||||
.PHONY: teardown
|
||||
|
||||
28
README.md
28
README.md
@@ -4,30 +4,30 @@ 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.
|
||||
|
||||
## Local Development
|
||||
## Docker
|
||||
|
||||
To get up and running locally: in one pane/tab, run:
|
||||
To run the latest:
|
||||
|
||||
```sh
|
||||
make backend
|
||||
docker run -d --name rfd-fyi -p 8080:8080 ghcr.io/davegallant/rfd-fyi
|
||||
```
|
||||
|
||||
In another pane/tab, run:
|
||||
|
||||
```sh
|
||||
make frontend
|
||||
```
|
||||
|
||||
## Docker Compose
|
||||
|
||||
To build containers from source:
|
||||
To build container from source:
|
||||
|
||||
```sh
|
||||
make dev
|
||||
```
|
||||
|
||||
To run the latest published images:
|
||||
## Local Development
|
||||
|
||||
To get up and running locally: in one shell, run:
|
||||
|
||||
```sh
|
||||
make prod
|
||||
make backend
|
||||
```
|
||||
|
||||
In another shell, run:
|
||||
|
||||
```sh
|
||||
make frontend
|
||||
```
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
# syntax=docker/dockerfile:1.21
|
||||
FROM cgr.dev/chainguard/go:latest AS build
|
||||
|
||||
WORKDIR /src
|
||||
|
||||
COPY . /src
|
||||
|
||||
RUN CGO_ENABLED=0 go build -o backend .
|
||||
|
||||
FROM cgr.dev/chainguard/static:latest
|
||||
|
||||
COPY --from=build /src/backend /backend
|
||||
|
||||
EXPOSE 8080
|
||||
|
||||
CMD [ "/backend" ]
|
||||
@@ -1,9 +1,11 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"io"
|
||||
"io/fs"
|
||||
"math/rand/v2"
|
||||
"net/http"
|
||||
"net/url"
|
||||
@@ -17,20 +19,8 @@ import (
|
||||
"github.com/gorilla/mux"
|
||||
)
|
||||
|
||||
// @title RFD FYI API
|
||||
// @version 1.0
|
||||
// @description An API for issue tracking
|
||||
// @termsOfService http://swagger.io/terms/
|
||||
|
||||
// @contact.name API Support
|
||||
// @contact.url https://linktr.ee/davegallant
|
||||
// @contact.email davegallant@gmail.com
|
||||
|
||||
// @license.name Apache 2.0
|
||||
// @license.url http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
|
||||
// @host localhost:8080
|
||||
// @BasePath /api/v1
|
||||
//go:embed dist/*
|
||||
var frontendFS embed.FS
|
||||
|
||||
type App struct {
|
||||
Router *mux.Router
|
||||
@@ -48,22 +38,45 @@ type Redirect struct {
|
||||
func (a *App) Initialize() {
|
||||
a.BasePath = "/api/v1"
|
||||
|
||||
a.Router = mux.NewRouter().PathPrefix(a.BasePath).Subrouter()
|
||||
http.Handle("/", a.Router)
|
||||
|
||||
a.Router = mux.NewRouter()
|
||||
a.initializeRoutes()
|
||||
}
|
||||
|
||||
func (a *App) Run(httpPort string) {
|
||||
log.Info().Msgf("Serving requests on port " + httpPort)
|
||||
if err := http.ListenAndServe(fmt.Sprintf(":"+httpPort), nil); err != nil {
|
||||
if err := http.ListenAndServe(fmt.Sprintf(":%s", httpPort), a.Router); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
}
|
||||
|
||||
func (a *App) initializeRoutes() {
|
||||
a.Router.HandleFunc("/topics", a.listTopics).Methods("GET")
|
||||
a.Router.HandleFunc("/topics/{id}", a.getTopicDetails).Methods("GET")
|
||||
a.Router.HandleFunc(a.BasePath+"/topics", a.listTopics).Methods("GET")
|
||||
a.Router.HandleFunc(a.BasePath+"/topics/{id}", a.getTopicDetails).Methods("GET")
|
||||
|
||||
distFS, err := fs.Sub(frontendFS, "dist")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
fileServer := http.FileServer(http.FS(distFS))
|
||||
a.Router.PathPrefix("/").Handler(spaHandler{staticHandler: fileServer, staticFS: distFS})
|
||||
}
|
||||
|
||||
// spaHandler serves static files when they exist, otherwise falls back to
|
||||
// index.html so that client-side routing works.
|
||||
type spaHandler struct {
|
||||
staticHandler http.Handler
|
||||
staticFS fs.FS
|
||||
}
|
||||
|
||||
func (h spaHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
||||
path := strings.TrimPrefix(r.URL.Path, "/")
|
||||
if path == "" {
|
||||
path = "index.html"
|
||||
}
|
||||
if _, err := fs.Stat(h.staticFS, path); err != nil {
|
||||
r.URL.Path = "/"
|
||||
}
|
||||
h.staticHandler.ServeHTTP(w, r)
|
||||
}
|
||||
|
||||
// func respondWithError(w http.ResponseWriter, code int, message string) {
|
||||
|
||||
6
backend/dist/index.html
vendored
Normal file
6
backend/dist/index.html
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<body>
|
||||
<p>Run the Vite dev server for the frontend.</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -11,21 +11,6 @@ import (
|
||||
utils "github.com/davegallant/rfd-fyi/pkg/utils"
|
||||
)
|
||||
|
||||
// @title RFD FYI API
|
||||
// @version 1.0
|
||||
// @description An API for an issue tracking service
|
||||
// @termsOfService http://swagger.io/terms/
|
||||
|
||||
// @contact.name API Support
|
||||
// @contact.url http://www.swagger.io/support
|
||||
// @contact.email support@swagger.io
|
||||
|
||||
// @license.name Apache 2.0
|
||||
// @license.url http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
|
||||
// @host localhost:8080
|
||||
// @BasePath /api/v1
|
||||
|
||||
func main() {
|
||||
log.Logger = log.Output(zerolog.ConsoleWriter{Out: os.Stderr})
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
services:
|
||||
frontend:
|
||||
image: ghcr.io/davegallant/rfd-fyi-frontend
|
||||
ports:
|
||||
- 80:80
|
||||
- 443:443
|
||||
links:
|
||||
- "backend:backend"
|
||||
volumes:
|
||||
- ./data:/data
|
||||
restart: always
|
||||
backend:
|
||||
image: ghcr.io/davegallant/rfd-fyi-backend
|
||||
ports:
|
||||
- 8080:8080
|
||||
restart: always
|
||||
@@ -1,18 +0,0 @@
|
||||
services:
|
||||
frontend:
|
||||
build:
|
||||
dockerfile: Dockerfile
|
||||
context: .
|
||||
ports:
|
||||
- 80:80
|
||||
- 443:443
|
||||
links:
|
||||
- "backend:backend"
|
||||
volumes:
|
||||
- ./data:/data
|
||||
backend:
|
||||
build:
|
||||
dockerfile: Dockerfile
|
||||
context: backend
|
||||
ports:
|
||||
- 8080:8080
|
||||
11
flake.nix
11
flake.nix
@@ -14,21 +14,12 @@
|
||||
{
|
||||
devShells.default = pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
# Node.js LTS with npm
|
||||
nodejs_20
|
||||
|
||||
# Go for backend
|
||||
nodejs_25
|
||||
go
|
||||
|
||||
# Build tools
|
||||
pkg-config
|
||||
|
||||
# Development utilities
|
||||
git
|
||||
curl
|
||||
jq
|
||||
|
||||
# Optional: for better development experience
|
||||
gnumake
|
||||
];
|
||||
|
||||
|
||||
699
package-lock.json
generated
699
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,7 @@
|
||||
"lint": "eslint . --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/roboto": "5.2.9",
|
||||
"@fontsource/roboto": "5.2.10",
|
||||
"@github/hotkey": "^3.0.0",
|
||||
"@mdi/font": "7.4.47",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
@@ -24,7 +24,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.22.10",
|
||||
"@babel/eslint-parser": "^7.22.10",
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "^5.0.9",
|
||||
|
||||
68
src/App.vue
68
src/App.vue
@@ -65,6 +65,7 @@ export default {
|
||||
themeChangeHandler: null,
|
||||
isLoading: false,
|
||||
menuOpen: false,
|
||||
infoOverlayVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -237,6 +238,36 @@ export default {
|
||||
event.preventDefault();
|
||||
this.$refs.filterInput.focus();
|
||||
}
|
||||
|
||||
if (event.key === "r" && !isInput) {
|
||||
event.preventDefault();
|
||||
this.fetchDeals();
|
||||
}
|
||||
|
||||
if (event.key === "i" && !isInput) {
|
||||
event.preventDefault();
|
||||
this.toggleInfoOverlay();
|
||||
}
|
||||
|
||||
if (event.key === "Escape" && this.infoOverlayVisible) {
|
||||
event.preventDefault();
|
||||
this.toggleInfoOverlay();
|
||||
}
|
||||
|
||||
if (event.key === "s" && !isInput) {
|
||||
event.preventDefault();
|
||||
this.toggleSort();
|
||||
}
|
||||
|
||||
if (event.key === "v" && !isInput) {
|
||||
event.preventDefault();
|
||||
this.toggleViewMode();
|
||||
}
|
||||
|
||||
if (event.key === "t" && !isInput) {
|
||||
event.preventDefault();
|
||||
this.toggleTheme();
|
||||
}
|
||||
},
|
||||
|
||||
parseFiltersFromUrl() {
|
||||
@@ -372,6 +403,14 @@ export default {
|
||||
color: color.text,
|
||||
};
|
||||
},
|
||||
toggleInfoOverlay() {
|
||||
this.infoOverlayVisible = !this.infoOverlayVisible;
|
||||
},
|
||||
methods: {
|
||||
toggleInfoOverlay() {
|
||||
this.infoOverlayVisible = !this.infoOverlayVisible;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -411,8 +450,9 @@ export default {
|
||||
<button class="icon-button desktop-only" :title="themeTitle" @click="toggleTheme">
|
||||
<span class="material-symbols-outlined">{{ themeIcon }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Mobile hamburger menu -->
|
||||
<button class="icon-button desktop-only" title="Info" @click="toggleInfoOverlay">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
</button>
|
||||
<div class="mobile-menu-wrapper mobile-only">
|
||||
<button class="icon-button" title="Menu" @click="toggleMenu">
|
||||
<span class="material-symbols-outlined">{{ menuOpen ? 'close' : 'menu' }}</span>
|
||||
@@ -430,20 +470,27 @@ export default {
|
||||
<span class="material-symbols-outlined">{{ viewIcon }}</span>
|
||||
<span>{{ viewTitle.split('(')[0].trim() }}</span>
|
||||
</button>
|
||||
<button class="dropdown-item" @click="toggleInfoOverlay">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
<span>Info</span>
|
||||
</button>
|
||||
<button class="dropdown-item" @click="handleMenuAction(toggleTheme)">
|
||||
<span class="material-symbols-outlined">{{ themeIcon }}</span>
|
||||
<span>{{ themeTitle.split('(')[0].trim() }}</span>
|
||||
</button>
|
||||
<button class="dropdown-item" @click="toggleInfoOverlay">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
<span>Info</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
|
||||
<div v-if="isLoading && topics.length === 0" class="loading-container">
|
||||
<span class="material-symbols-outlined spinning loading-spinner">refresh</span>
|
||||
<p>Loading deals...</p>
|
||||
</div>
|
||||
|
||||
<div class="cards-wrapper" v-else>
|
||||
<div v-if="isLoading" class="loading-overlay">
|
||||
<span class="material-symbols-outlined spinning loading-spinner">refresh</span>
|
||||
@@ -463,7 +510,7 @@ export default {
|
||||
:href="topic.Offer.url"
|
||||
target="_blank"
|
||||
class="card-link"
|
||||
title="Open deal"
|
||||
title="Open direct link to deal"
|
||||
>
|
||||
<span class="material-symbols-outlined">open_in_new</span>
|
||||
</a>
|
||||
@@ -480,7 +527,6 @@ export default {
|
||||
<span v-else>{{ topic.score }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-meta" v-if="topic.Offer.dealer_name">
|
||||
<span
|
||||
class="dealer-name dealer-label"
|
||||
@@ -488,7 +534,6 @@ export default {
|
||||
v-html="highlightText(topic.Offer.dealer_name)"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<div class="card-details" v-if="viewMode === 'cards'">
|
||||
<div class="details-stats">
|
||||
<div class="stat">
|
||||
@@ -500,20 +545,19 @@ export default {
|
||||
<span class="stat-value">{{ topic.total_replies }} replies</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-timestamp">First post: {{ formatDate(topic.post_time) }}</div>
|
||||
<div class="card-timestamp">Last post: {{ formatDate(topic.last_post_time) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row-stats" v-if="viewMode === 'list'">
|
||||
<span class="stat-compact">{{ topic.total_views }} views</span>
|
||||
<span class="stat-compact">{{ topic.total_replies }} replies</span>
|
||||
<span class="stat-compact">{{ formatDate(topic.post_time) }} - {{ formatDate(topic.last_post_time) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<InfoOverlay :visible="infoOverlayVisible" @close="toggleInfoOverlay" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cards-wrapper {
|
||||
|
||||
116
src/components/InfoOverlay.vue
Normal file
116
src/components/InfoOverlay.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="info-overlay" v-if="visible" @click.self="closeOverlay">
|
||||
<div class="info-panel">
|
||||
<strong>Source: </strong>
|
||||
<a href="https://github.com/davegallant/rfd-fyi" target="_blank" rel="noopener noreferrer">
|
||||
https://github.com/davegallant/rfd-fyi
|
||||
</a>
|
||||
<h3>Keyboard Shortcuts</h3>
|
||||
<table class="shortcuts-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>r</strong></td>
|
||||
<td>Refresh deals</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>s</strong></td>
|
||||
<td>Toggle sort</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>v</strong></td>
|
||||
<td>Toggle view mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>t</strong></td>
|
||||
<td>Toggle theme</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>/</strong></td>
|
||||
<td>Filter deals</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="close-button" @click="closeOverlay">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InfoOverlay",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeOverlay() {
|
||||
this.$emit("close");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-panel h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.info-panel .shortcuts-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 16px auto;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.info-panel .shortcuts-table td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding-left: 40px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user