feat(web): add dockerized web UI with comic library browser
Adds a `yoink serve` command that starts an HTTP server with a Sonarr/MeTube-inspired dark UI. Features a URL input bar for triggering downloads, a 150x300 cover grid with filter and sort controls, a live download queue strip, and toast notifications. Includes Dockerfile (multi-stage, distroless runtime) and docker-compose.yml for easy deployment.
This commit is contained in:
5
.dockerignore
Normal file
5
.dockerignore
Normal file
@@ -0,0 +1,5 @@
|
||||
.git
|
||||
.github
|
||||
*.md
|
||||
library/
|
||||
*_test.go
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -19,4 +19,15 @@ go.work
|
||||
go.work.sum
|
||||
|
||||
# env file
|
||||
.env
|
||||
.env
|
||||
|
||||
# Built binary
|
||||
yoink
|
||||
yoink.exe
|
||||
|
||||
# Comic library (downloaded content)
|
||||
library/
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
37
Dockerfile
Normal file
37
Dockerfile
Normal file
@@ -0,0 +1,37 @@
|
||||
# ── Build stage ────────────────────────────────────────────────────────────
|
||||
FROM mcr.microsoft.com/oss/go/microsoft/golang:1.22-bullseye AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Restore modules in a separate layer so it's cached until go.mod/go.sum change
|
||||
COPY go.mod go.sum ./
|
||||
RUN go mod download && go mod verify
|
||||
|
||||
# Copy source and build a fully static binary
|
||||
COPY . .
|
||||
RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
|
||||
go build -ldflags="-s -w" -trimpath -o yoink .
|
||||
|
||||
# ── Runtime stage ──────────────────────────────────────────────────────────
|
||||
# distroless/base-debian12:nonroot — minimal attack surface, non-root by default
|
||||
FROM gcr.io/distroless/base-debian12:nonroot
|
||||
|
||||
LABEL org.opencontainers.image.title="yoink" \
|
||||
org.opencontainers.image.description="Comic downloader web UI" \
|
||||
org.opencontainers.image.source="https://github.com/bryanlundberg/yoink-go"
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY --from=builder --chown=nonroot:nonroot /app/yoink .
|
||||
|
||||
ENV YOINK_LIBRARY=/library
|
||||
|
||||
VOLUME ["/library"]
|
||||
EXPOSE 8080
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
|
||||
CMD ["/app/yoink", "healthcheck"]
|
||||
|
||||
USER nonroot
|
||||
|
||||
CMD ["/app/yoink", "serve"]
|
||||
28
cli/healthcheck.go
Normal file
28
cli/healthcheck.go
Normal file
@@ -0,0 +1,28 @@
|
||||
package cli
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"os"
|
||||
|
||||
"github.com/spf13/cobra"
|
||||
)
|
||||
|
||||
var healthcheckCmd = &cobra.Command{
|
||||
Use: "healthcheck",
|
||||
Short: "Check if the web server is running (used by Docker HEALTHCHECK)",
|
||||
Args: cobra.NoArgs,
|
||||
Hidden: true,
|
||||
Run: func(cmd *cobra.Command, args []string) {
|
||||
port, _ := cmd.Flags().GetString("port")
|
||||
resp, err := http.Get(fmt.Sprintf("http://localhost:%s/health", port))
|
||||
if err != nil || resp.StatusCode != http.StatusOK {
|
||||
os.Exit(1)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
func init() {
|
||||
healthcheckCmd.Flags().StringP("port", "p", "8080", "Port the server is listening on")
|
||||
cli.AddCommand(healthcheckCmd)
|
||||
}
|
||||
36
cli/serve.go
Normal file
36
cli/serve.go
Normal file
@@ -0,0 +1,36 @@
|
||||
package cli
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"log"
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
"github.com/spf13/cobra"
|
||||
"yoink/web"
|
||||
)
|
||||
|
||||
var serveCmd = &cobra.Command{
|
||||
Use: "serve",
|
||||
Short: "Start the Yoink web UI",
|
||||
Args: cobra.NoArgs,
|
||||
Run: func(cmd *cobra.Command, args []string) {
|
||||
library, ok := os.LookupEnv("YOINK_LIBRARY")
|
||||
if !ok {
|
||||
userHome, _ := os.UserHomeDir()
|
||||
library = filepath.Join(userHome, ".yoink")
|
||||
}
|
||||
|
||||
port, _ := cmd.Flags().GetString("port")
|
||||
addr := fmt.Sprintf(":%s", port)
|
||||
|
||||
if err := web.Listen(addr, library); err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
func init() {
|
||||
serveCmd.Flags().StringP("port", "p", "8080", "Port to listen on")
|
||||
cli.AddCommand(serveCmd)
|
||||
}
|
||||
10
docker-compose.yml
Normal file
10
docker-compose.yml
Normal file
@@ -0,0 +1,10 @@
|
||||
services:
|
||||
yoink:
|
||||
build: .
|
||||
ports:
|
||||
- "8080:8080"
|
||||
volumes:
|
||||
- ./library:/library
|
||||
environment:
|
||||
- YOINK_LIBRARY=/library
|
||||
restart: unless-stopped
|
||||
247
web/server.go
Normal file
247
web/server.go
Normal file
@@ -0,0 +1,247 @@
|
||||
package web
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"io/fs"
|
||||
"net/http"
|
||||
"net/url"
|
||||
"os"
|
||||
"path/filepath"
|
||||
"sort"
|
||||
"strings"
|
||||
"sync"
|
||||
"time"
|
||||
|
||||
"github.com/PuerkitoBio/goquery"
|
||||
"yoink/comic"
|
||||
)
|
||||
|
||||
//go:embed static
|
||||
var staticFiles embed.FS
|
||||
|
||||
type JobStatus string
|
||||
|
||||
const (
|
||||
StatusPending JobStatus = "pending"
|
||||
StatusRunning JobStatus = "running"
|
||||
StatusComplete JobStatus = "complete"
|
||||
StatusError JobStatus = "error"
|
||||
)
|
||||
|
||||
type Job struct {
|
||||
ID string `json:"id"`
|
||||
URL string `json:"url"`
|
||||
Title string `json:"title"`
|
||||
Status JobStatus `json:"status"`
|
||||
Error string `json:"error,omitempty"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
}
|
||||
|
||||
type ComicEntry struct {
|
||||
Title string `json:"title"`
|
||||
CoverURL string `json:"cover_url"`
|
||||
FileURL string `json:"file_url"`
|
||||
DownloadedAt time.Time `json:"downloaded_at"`
|
||||
}
|
||||
|
||||
type Server struct {
|
||||
libraryPath string
|
||||
jobs map[string]*Job
|
||||
mu sync.RWMutex
|
||||
}
|
||||
|
||||
func NewServer(libraryPath string) *Server {
|
||||
return &Server{
|
||||
libraryPath: libraryPath,
|
||||
jobs: make(map[string]*Job),
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Server) Handler() http.Handler {
|
||||
mux := http.NewServeMux()
|
||||
|
||||
// Embedded static assets
|
||||
staticFS, _ := fs.Sub(staticFiles, "static")
|
||||
mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticFS))))
|
||||
|
||||
// Library files: covers (inline) and cbz downloads (attachment)
|
||||
mux.Handle("/covers/", http.StripPrefix("/covers/", http.FileServer(http.Dir(s.libraryPath))))
|
||||
mux.Handle("/files/", http.StripPrefix("/files/", s.downloadHandler()))
|
||||
|
||||
// API
|
||||
mux.HandleFunc("/api/download", s.handleDownload)
|
||||
mux.HandleFunc("/api/comics", s.handleComics)
|
||||
mux.HandleFunc("/api/jobs", s.handleJobs)
|
||||
mux.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
|
||||
w.WriteHeader(http.StatusOK)
|
||||
})
|
||||
|
||||
// SPA root
|
||||
mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
|
||||
if r.URL.Path != "/" {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
data, _ := staticFiles.ReadFile("static/index.html")
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
w.Write(data)
|
||||
})
|
||||
|
||||
return mux
|
||||
}
|
||||
|
||||
// downloadHandler wraps the library file server to force Content-Disposition: attachment.
|
||||
func (s *Server) downloadHandler() http.Handler {
|
||||
fs := http.FileServer(http.Dir(s.libraryPath))
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Disposition", "attachment")
|
||||
fs.ServeHTTP(w, r)
|
||||
})
|
||||
}
|
||||
|
||||
func (s *Server) handleDownload(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != http.MethodPost {
|
||||
http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
|
||||
return
|
||||
}
|
||||
|
||||
var req struct {
|
||||
URL string `json:"url"`
|
||||
}
|
||||
if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.URL) == "" {
|
||||
http.Error(w, "invalid request", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
job := &Job{
|
||||
ID: fmt.Sprintf("%d", time.Now().UnixNano()),
|
||||
URL: req.URL,
|
||||
Status: StatusPending,
|
||||
CreatedAt: time.Now(),
|
||||
}
|
||||
|
||||
s.mu.Lock()
|
||||
s.jobs[job.ID] = job
|
||||
s.mu.Unlock()
|
||||
|
||||
go s.runJob(job)
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
json.NewEncoder(w).Encode(job)
|
||||
}
|
||||
|
||||
func (s *Server) runJob(job *Job) {
|
||||
s.mu.Lock()
|
||||
job.Status = StatusRunning
|
||||
s.mu.Unlock()
|
||||
|
||||
markupCh := make(chan *goquery.Document)
|
||||
imageCh := make(chan []string)
|
||||
|
||||
c := comic.NewComic(job.URL, s.libraryPath, imageCh, markupCh)
|
||||
|
||||
s.mu.Lock()
|
||||
job.Title = c.Title
|
||||
s.mu.Unlock()
|
||||
|
||||
errs := c.Download(len(c.Filelist))
|
||||
if len(errs) > 0 {
|
||||
s.mu.Lock()
|
||||
job.Status = StatusError
|
||||
job.Error = errs[0].Error()
|
||||
s.mu.Unlock()
|
||||
return
|
||||
}
|
||||
|
||||
if err := c.Archive(); err != nil {
|
||||
s.mu.Lock()
|
||||
job.Status = StatusError
|
||||
job.Error = err.Error()
|
||||
s.mu.Unlock()
|
||||
return
|
||||
}
|
||||
|
||||
c.Cleanup()
|
||||
|
||||
s.mu.Lock()
|
||||
job.Status = StatusComplete
|
||||
s.mu.Unlock()
|
||||
}
|
||||
|
||||
func (s *Server) handleComics(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
|
||||
entries := []ComicEntry{}
|
||||
|
||||
dirs, err := os.ReadDir(s.libraryPath)
|
||||
if err != nil {
|
||||
json.NewEncoder(w).Encode(entries)
|
||||
return
|
||||
}
|
||||
|
||||
for _, dir := range dirs {
|
||||
if !dir.IsDir() {
|
||||
continue
|
||||
}
|
||||
|
||||
title := dir.Name()
|
||||
dirPath := filepath.Join(s.libraryPath, title)
|
||||
|
||||
var coverURL, fileURL string
|
||||
var downloadedAt time.Time
|
||||
|
||||
files, _ := os.ReadDir(dirPath)
|
||||
for _, f := range files {
|
||||
name := f.Name()
|
||||
|
||||
if strings.HasSuffix(name, ".cbz") {
|
||||
fileURL = "/files/" + url.PathEscape(title) + "/" + url.PathEscape(name)
|
||||
if info, err := f.Info(); err == nil {
|
||||
downloadedAt = info.ModTime()
|
||||
}
|
||||
}
|
||||
|
||||
// Cover kept by Cleanup: "<Title> 001.jpg"
|
||||
stripped := strings.TrimSpace(strings.TrimPrefix(name, title))
|
||||
if strings.HasPrefix(strings.ToLower(stripped), "001") {
|
||||
coverURL = "/covers/" + url.PathEscape(title) + "/" + url.PathEscape(name)
|
||||
}
|
||||
}
|
||||
|
||||
if fileURL != "" {
|
||||
entries = append(entries, ComicEntry{
|
||||
Title: title,
|
||||
CoverURL: coverURL,
|
||||
FileURL: fileURL,
|
||||
DownloadedAt: downloadedAt,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Default: newest first
|
||||
sort.Slice(entries, func(i, j int) bool {
|
||||
return entries[i].DownloadedAt.After(entries[j].DownloadedAt)
|
||||
})
|
||||
|
||||
json.NewEncoder(w).Encode(entries)
|
||||
}
|
||||
|
||||
func (s *Server) handleJobs(w http.ResponseWriter, r *http.Request) {
|
||||
s.mu.RLock()
|
||||
jobs := make([]*Job, 0, len(s.jobs))
|
||||
for _, j := range s.jobs {
|
||||
jobs = append(jobs, j)
|
||||
}
|
||||
s.mu.RUnlock()
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
json.NewEncoder(w).Encode(jobs)
|
||||
}
|
||||
|
||||
func Listen(addr string, libraryPath string) error {
|
||||
srv := NewServer(libraryPath)
|
||||
fmt.Printf("Yoink web server listening on %s\n", addr)
|
||||
return http.ListenAndServe(addr, srv.Handler())
|
||||
}
|
||||
695
web/static/index.html
Normal file
695
web/static/index.html
Normal file
@@ -0,0 +1,695 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Yoink</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0d0f14;
|
||||
--surface: #13151e;
|
||||
--card: #1a1d2e;
|
||||
--border: #252840;
|
||||
--accent: #4f8ef7;
|
||||
--accent-hv: #6aa3ff;
|
||||
--text: #e2e8f0;
|
||||
--muted: #6b7280;
|
||||
--success: #22c55e;
|
||||
--error: #ef4444;
|
||||
--warn: #f59e0b;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Header ─────────────────────────────────────────────── */
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.url-form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.url-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-right: none;
|
||||
border-radius: 6px 0 0 6px;
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.url-input::placeholder { color: var(--muted); }
|
||||
.url-input:focus { border-color: var(--accent); }
|
||||
|
||||
.url-btn {
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.url-btn:hover { background: var(--accent-hv); }
|
||||
.url-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* ── Queue strip ─────────────────────────────────────────── */
|
||||
#queue {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 24px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
#queue.visible { display: flex; }
|
||||
|
||||
.queue-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.queue-item:last-child { border-bottom: none; }
|
||||
|
||||
.queue-title {
|
||||
flex: 1;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.queue-url {
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-pill.pending { background: rgba(107,114,128,0.2); color: var(--muted); }
|
||||
.status-pill.running { background: rgba(79,142,247,0.15); color: var(--accent); }
|
||||
.status-pill.complete { background: rgba(34,197,94,0.15); color: var(--success); }
|
||||
.status-pill.error { background: rgba(239,68,68,0.15); color: var(--error); }
|
||||
|
||||
.spinner {
|
||||
width: 12px; height: 12px;
|
||||
border: 2px solid currentColor;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.dismiss-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dismiss-btn:hover { color: var(--text); background: var(--border); }
|
||||
|
||||
/* ── Main grid ───────────────────────────────────────────── */
|
||||
main {
|
||||
padding: 28px 24px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#comics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 150px);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* ── Comic card ──────────────────────────────────────────── */
|
||||
.comic-card {
|
||||
width: 150px;
|
||||
height: 300px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comic-card:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 8px 32px rgba(79, 142, 247, 0.25);
|
||||
border-color: rgba(79, 142, 247, 0.45);
|
||||
}
|
||||
|
||||
.comic-cover {
|
||||
width: 150px;
|
||||
height: 230px;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comic-cover-placeholder {
|
||||
width: 150px;
|
||||
height: 230px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #1e2240 0%, #0d1025 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comic-cover-placeholder svg {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.comic-info {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--card);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.comic-title {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* Download badge on hover */
|
||||
.comic-card::after {
|
||||
content: "↓ Download";
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
left: 0; right: 0;
|
||||
background: rgba(79, 142, 247, 0.85);
|
||||
color: #fff;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 6px 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.18s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.comic-card:hover::after { opacity: 1; }
|
||||
|
||||
/* ── Empty state ─────────────────────────────────────────── */
|
||||
#empty-state {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 80px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#empty-state svg { opacity: 0.3; }
|
||||
#empty-state p { font-size: 0.9rem; }
|
||||
|
||||
/* ── Toast ───────────────────────────────────────────────── */
|
||||
#toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast-msg {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.82rem;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.5);
|
||||
animation: slideIn 0.2s ease;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.toast-msg.fade { opacity: 0; }
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(40px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Library toolbar ─────────────────────────────────────────────────── */
|
||||
.library-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.library-toolbar .section-heading {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 0.8rem;
|
||||
outline: none;
|
||||
width: 200px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.filter-input::placeholder { color: var(--muted); }
|
||||
.filter-input:focus { border-color: var(--accent); }
|
||||
|
||||
.sort-group {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sort-btn:hover { color: var(--text); border-color: var(--accent); }
|
||||
.sort-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(79,142,247,0.08); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="logo">YOINK<span>.</span></div>
|
||||
<form class="url-form" id="url-form">
|
||||
<input
|
||||
class="url-input"
|
||||
id="url-input"
|
||||
type="url"
|
||||
placeholder="Paste a comic URL to download..."
|
||||
required
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<button class="url-btn" id="url-btn" type="submit">Download</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<div id="queue"></div>
|
||||
|
||||
<main>
|
||||
<div class="library-toolbar">
|
||||
<div class="section-heading">Library</div>
|
||||
<input class="filter-input" id="filter-input" type="search" placeholder="Filter by title…" />
|
||||
<div class="sort-group">
|
||||
<button class="sort-btn active" data-sort="newest">Newest</button>
|
||||
<button class="sort-btn" data-sort="oldest">Oldest</button>
|
||||
<button class="sort-btn" data-sort="az">A–Z</button>
|
||||
<button class="sort-btn" data-sort="za">Z–A</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comics-grid"></div>
|
||||
<div id="empty-state">
|
||||
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18M9 21V9"/>
|
||||
</svg>
|
||||
<p>No comics yet — paste a URL above to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast"></div>
|
||||
|
||||
<script>
|
||||
// ── State ──────────────────────────────────────────────────────────────
|
||||
let knownJobs = {};
|
||||
let dismissedJobs = JSON.parse(localStorage.getItem('dismissedJobs') || '{}');
|
||||
let allComics = []; // raw list from server (newest-first)
|
||||
let currentSort = localStorage.getItem('comicSort') || 'newest';
|
||||
|
||||
// ── DOM refs ───────────────────────────────────────────────────────────
|
||||
const form = document.getElementById('url-form');
|
||||
const input = document.getElementById('url-input');
|
||||
const btn = document.getElementById('url-btn');
|
||||
const queue = document.getElementById('queue');
|
||||
const grid = document.getElementById('comics-grid');
|
||||
const emptyEl = document.getElementById('empty-state');
|
||||
const toastEl = document.getElementById('toast');
|
||||
const filterInput = document.getElementById('filter-input');
|
||||
const sortBtns = document.querySelectorAll('.sort-btn');
|
||||
|
||||
// ── Submit handler ─────────────────────────────────────────────────────
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const url = input.value.trim();
|
||||
if (!url) return;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Queuing…';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/download', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
|
||||
const job = await res.json();
|
||||
knownJobs[job.id] = job;
|
||||
input.value = '';
|
||||
toast('Download queued');
|
||||
renderQueue();
|
||||
} catch (err) {
|
||||
toast('Error: ' + err.message, true);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Download';
|
||||
}
|
||||
});
|
||||
|
||||
// ── Render queue ───────────────────────────────────────────────────────
|
||||
function renderQueue() {
|
||||
const active = Object.values(knownJobs).filter(j => !dismissedJobs[j.id]);
|
||||
queue.innerHTML = '';
|
||||
|
||||
if (active.length === 0) {
|
||||
queue.classList.remove('visible');
|
||||
return;
|
||||
}
|
||||
|
||||
queue.classList.add('visible');
|
||||
|
||||
active.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
|
||||
|
||||
active.forEach(job => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'queue-item';
|
||||
|
||||
const statusPill = makeStatusPill(job);
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.style.flex = '1';
|
||||
meta.style.minWidth = '0';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'queue-title';
|
||||
title.textContent = job.title || 'Fetching…';
|
||||
|
||||
const urlEl = document.createElement('div');
|
||||
urlEl.className = 'queue-url';
|
||||
urlEl.textContent = job.url;
|
||||
|
||||
meta.append(title, urlEl);
|
||||
|
||||
const dismiss = document.createElement('button');
|
||||
dismiss.className = 'dismiss-btn';
|
||||
dismiss.title = 'Dismiss';
|
||||
dismiss.textContent = '×';
|
||||
dismiss.addEventListener('click', () => {
|
||||
dismissedJobs[job.id] = true;
|
||||
localStorage.setItem('dismissedJobs', JSON.stringify(dismissedJobs));
|
||||
renderQueue();
|
||||
});
|
||||
|
||||
row.append(statusPill, meta, dismiss);
|
||||
queue.append(row);
|
||||
});
|
||||
}
|
||||
|
||||
function makeStatusPill(job) {
|
||||
const pill = document.createElement('span');
|
||||
pill.className = 'status-pill ' + job.status;
|
||||
|
||||
if (job.status === 'pending' || job.status === 'running') {
|
||||
const spin = document.createElement('span');
|
||||
spin.className = 'spinner';
|
||||
pill.append(spin);
|
||||
}
|
||||
|
||||
const label = {
|
||||
pending: 'Pending',
|
||||
running: 'Downloading',
|
||||
complete: '✓ Done',
|
||||
error: '✕ Error',
|
||||
}[job.status] || job.status;
|
||||
|
||||
pill.append(document.createTextNode(label));
|
||||
|
||||
if (job.error) {
|
||||
pill.title = job.error;
|
||||
}
|
||||
|
||||
return pill;
|
||||
}
|
||||
|
||||
// ── Render comics grid ─────────────────────────────────────────────────
|
||||
function applyFilterAndSort() {
|
||||
const query = filterInput.value.trim().toLowerCase();
|
||||
|
||||
let comics = query
|
||||
? allComics.filter(c => c.title.toLowerCase().includes(query))
|
||||
: allComics.slice();
|
||||
|
||||
// Server already sends newest-first; re-sort only when needed
|
||||
if (currentSort === 'oldest') {
|
||||
comics = comics.slice().reverse();
|
||||
} else if (currentSort === 'az') {
|
||||
comics = comics.slice().sort((a, b) => a.title.localeCompare(b.title));
|
||||
} else if (currentSort === 'za') {
|
||||
comics = comics.slice().sort((a, b) => b.title.localeCompare(a.title));
|
||||
}
|
||||
|
||||
renderComics(comics);
|
||||
}
|
||||
|
||||
function renderComics(comics) {
|
||||
grid.innerHTML = '';
|
||||
|
||||
if (!comics || comics.length === 0) {
|
||||
emptyEl.style.display = 'flex';
|
||||
return;
|
||||
}
|
||||
|
||||
emptyEl.style.display = 'none';
|
||||
|
||||
comics.forEach(comic => {
|
||||
const a = document.createElement('a');
|
||||
a.className = 'comic-card';
|
||||
a.href = comic.file_url;
|
||||
|
||||
if (comic.cover_url) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'comic-cover';
|
||||
img.src = comic.cover_url;
|
||||
img.alt = comic.title;
|
||||
img.loading = 'lazy';
|
||||
img.onerror = () => img.replaceWith(makePlaceholder());
|
||||
a.append(img);
|
||||
} else {
|
||||
a.append(makePlaceholder());
|
||||
}
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'comic-info';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'comic-title';
|
||||
title.textContent = comic.title;
|
||||
|
||||
info.append(title);
|
||||
a.append(info);
|
||||
grid.append(a);
|
||||
});
|
||||
}
|
||||
|
||||
function makePlaceholder() {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'comic-cover-placeholder';
|
||||
div.innerHTML = `
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18M9 21V9"/>
|
||||
</svg>`;
|
||||
return div;
|
||||
}
|
||||
|
||||
// ── Toast ──────────────────────────────────────────────────────────────
|
||||
function toast(msg, isError = false) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast-msg';
|
||||
el.textContent = msg;
|
||||
if (isError) el.style.borderColor = 'var(--error)';
|
||||
toastEl.append(el);
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('fade');
|
||||
setTimeout(() => el.remove(), 350);
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
// ── Polling ────────────────────────────────────────────────────────────
|
||||
async function pollJobs() {
|
||||
try {
|
||||
const res = await fetch('/api/jobs');
|
||||
const jobs = await res.json();
|
||||
|
||||
let needComicRefresh = false;
|
||||
|
||||
jobs.forEach(job => {
|
||||
const prev = knownJobs[job.id];
|
||||
if (prev && prev.status !== 'complete' && job.status === 'complete') {
|
||||
needComicRefresh = true;
|
||||
toast(`"${job.title}" downloaded successfully`);
|
||||
}
|
||||
if (prev && prev.status !== 'error' && job.status === 'error') {
|
||||
toast(`Error downloading "${job.title || job.url}": ${job.error}`, true);
|
||||
}
|
||||
knownJobs[job.id] = job;
|
||||
});
|
||||
|
||||
renderQueue();
|
||||
|
||||
if (needComicRefresh) {
|
||||
await fetchComics();
|
||||
}
|
||||
} catch (_) { /* network hiccup — ignore */ }
|
||||
}
|
||||
|
||||
async function fetchComics() {
|
||||
try {
|
||||
const res = await fetch('/api/comics');
|
||||
allComics = await res.json();
|
||||
applyFilterAndSort();
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// ── Init ───────────────────────────────────────────────────────────────
|
||||
|
||||
// Restore saved sort
|
||||
sortBtns.forEach(btn => {
|
||||
if (btn.dataset.sort === currentSort) btn.classList.add('active');
|
||||
else btn.classList.remove('active');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
currentSort = btn.dataset.sort;
|
||||
localStorage.setItem('comicSort', currentSort);
|
||||
sortBtns.forEach(b => b.classList.toggle('active', b === btn));
|
||||
applyFilterAndSort();
|
||||
});
|
||||
});
|
||||
|
||||
filterInput.addEventListener('input', applyFilterAndSort);
|
||||
|
||||
fetchComics();
|
||||
setInterval(pollJobs, 2000);
|
||||
setInterval(fetchComics, 10000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user