Rediseno home: hero destacado, chips de genero, masonry + scroll infinito, busqueda publica /buscar, footer comunidad, status/queue protegidos

This commit is contained in:
Renato
2026-08-04 13:21:13 +08:00
parent ff3ec34674
commit 7f939b76a4
10 changed files with 430 additions and 46 deletions
+66
View File
@@ -0,0 +1,66 @@
import Link from "next/link"
import { searchPosts } from "@/lib/db"
import { PostCard } from "@/components/post-card"
import { EmptyState } from "@/components/empty-state"
import { Search, ArrowLeft } from "lucide-react"
export const dynamic = "force-dynamic"
export default async function PublicSearchPage({
searchParams,
}: {
searchParams: Promise<{ q?: string }>
}) {
const { q } = await searchParams
const query = (q || "").trim()
const results = query ? searchPosts(query, true) : []
return (
<div>
<Link
href="/"
className="mb-4 sm:mb-6 inline-flex items-center gap-1.5 text-xs text-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
>
<ArrowLeft className="h-3.5 w-3.5" />
Volver
</Link>
<h1 className="text-xl sm:text-2xl font-bold tracking-tight mb-1">Buscar</h1>
<p className="text-xs sm:text-sm text-[var(--muted)] mb-5">
Buscar publicaciones por título, artista o tags
</p>
<form action="/buscar" method="get" className="mb-6">
<div className="flex gap-2">
<input
type="search"
name="q"
defaultValue={query}
placeholder="Título, artista, tag..."
className="input flex-1"
autoFocus
/>
<button type="submit" className="btn-primary">
<Search className="h-4 w-4" />
Buscar
</button>
</div>
</form>
{!query ? (
<p className="text-xs text-[var(--muted)]">Escribí algo para buscar publicaciones.</p>
) : results.length === 0 ? (
<EmptyState message={`No se encontraron resultados para "${query}"`} />
) : (
<>
<p className="mb-4 text-xs text-[var(--muted)]">{results.length} resultado(s)</p>
<div className="grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
{results.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
</>
)}
</div>
)
}
+52 -6
View File
@@ -1,8 +1,8 @@
import Link from "next/link"
import { Image } from "lucide-react"
import { Image, Search } from "lucide-react"
import { SITE_NAME, SITE_TAGLINE, SITE_LINKS } from "@/lib/site"
// Header del sitio público: sin links al panel admin (que queda escondido).
// Solo navegación pública (logo -> home).
// Header del sitio público: búsqueda pública (SQLite) + logo.
export default function PublicLayout({ children }: { children: React.ReactNode }) {
return (
<>
@@ -12,16 +12,62 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent-subtle)]">
<Image className="h-4 w-4 text-[var(--accent)]" />
</div>
<span className="text-sm font-bold tracking-tight">worst-scan</span>
<span className="text-sm font-bold tracking-tight">{SITE_NAME}</span>
</Link>
<nav className="flex items-center gap-2 sm:gap-4"></nav>
<nav className="flex items-center gap-2 sm:gap-4">
<Link
href="/buscar"
className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)] transition-colors"
>
<Search className="h-4 w-4" />
<span className="hidden sm:inline">Buscar</span>
</Link>
</nav>
</div>
</header>
<main className="mx-auto max-w-5xl px-3 py-4 sm:px-4 sm:py-8">{children}</main>
<footer className="border-t border-[var(--border)] py-6 text-center text-xs text-[var(--muted)] mb-12 sm:mb-0">
worst-scan &middot; traducción automática de manga
<div className="mx-auto max-w-5xl px-3 flex flex-col items-center gap-3">
<p>
{SITE_NAME} &middot; {SITE_TAGLINE}
</p>
<div className="flex items-center gap-4">
{SITE_LINKS.twitter && (
<>
<a
href={SITE_LINKS.twitter}
target="_blank"
rel="noopener noreferrer"
className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
>
X / Twitter
</a>
<span className="text-[var(--border)]">|</span>
</>
)}
<a
href={SITE_LINKS.discord}
target={SITE_LINKS.discord.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
title={SITE_LINKS.discord === "#" ? "Discord (próximamente)" : "Discord"}
>
Discord
</a>
<span className="text-[var(--border)]">|</span>
<a
href={SITE_LINKS.patreon}
target={SITE_LINKS.patreon.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
title={SITE_LINKS.patreon === "#" ? "Patreon (próximamente)" : "Patreon"}
>
Patreon
</a>
</div>
</div>
</footer>
</>
)
+93 -18
View File
@@ -1,14 +1,28 @@
import { getAllPosts } from "@/lib/db"
import { PostCard } from "@/components/post-card"
import Link from "next/link"
import { getPostsPage, getAllPosts } from "@/lib/db"
import { InfinitePostGrid } from "@/components/infinite-grid"
import { TagBadge } from "@/components/tag-badge"
import { EmptyState } from "@/components/empty-state"
import { BookOpen } from "lucide-react"
import { BookOpen, Sparkles, ArrowRight } from "lucide-react"
export const dynamic = "force-dynamic"
export default function PublicHomePage() {
const posts = getAllPosts(true)
export default async function PublicHomePage() {
const { items, total } = getPostsPage(1, 12, true)
const latest = getAllPosts(true)[0] // publicación destacada del hero
if (posts.length === 0) {
// Tags más frecuentes para los chips de exploración rápida.
const tagCounts = new Map<string, number>()
for (const p of getAllPosts(true)) {
for (const t of p.tags || []) {
const clean = t.toLowerCase().replace(/^artist:|^parody:/, "").trim()
if (!clean || clean.includes(" ")) continue
tagCounts.set(clean, (tagCounts.get(clean) || 0) + 1)
}
}
const popularTags = [...tagCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10).map(([t]) => t)
if (total === 0) {
return (
<div className="py-20">
<EmptyState message="Todavía no hay publicaciones" icon={<BookOpen className="mb-3 h-10 w-10 text-[var(--muted)]" />} />
@@ -20,19 +34,80 @@ export default function PublicHomePage() {
}
return (
<div>
<div className="mb-6 sm:mb-8">
<h1 className="text-xl sm:text-2xl font-bold tracking-tight">Publicaciones</h1>
<p className="mt-1 text-xs sm:text-sm text-[var(--muted)]">
Traducciones automáticas generadas por worst-scan
</p>
</div>
<div className="space-y-8 sm:space-y-10">
{/* ===== HERO: publicación destacada (hook visual inmediato) ===== */}
{latest && (
<section className="rounded-3xl overflow-hidden border border-[var(--border)] bg-gradient-to-br from-[var(--surface)] via-[var(--surface)] to-[#1a1a20]">
<Link href={`/p/${latest.slug}`} className="group grid gap-0 md:grid-cols-2">
<div className="relative aspect-[4/3] md:aspect-auto md:h-full overflow-hidden">
<img
src={`/api/cover/${latest.gid}`}
alt={latest.title}
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.05]"
/>
<div className="absolute top-3 left-3 inline-flex items-center gap-1.5 rounded-full bg-black/80 backdrop-blur-sm px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--accent)] border border-[var(--accent)]/40">
<Sparkles className="h-3 w-3" />
Último lanzamiento
</div>
</div>
<div className="flex flex-col justify-center gap-4 p-5 sm:p-8">
<div className="flex items-center gap-2">
<span className="rounded-full bg-[var(--accent)]/10 px-2 py-0.5 text-[10px] font-semibold text-[var(--accent)] border border-[var(--accent)]/30">
Destacado
</span>
{latest.num_pages > 0 && (
<span className="text-xs text-[var(--muted)]">{latest.num_pages} páginas</span>
)}
</div>
<h1 className="text-2xl sm:text-4xl font-bold tracking-tight leading-tight line-clamp-3">
{latest.title}
</h1>
{latest.artist && (
<p className="text-sm text-[var(--muted)]">por {latest.artist}</p>
)}
{latest.summary && latest.summary.length > 40 && (
<p className="hidden sm:block text-sm text-[var(--muted)] leading-relaxed line-clamp-3">
{latest.summary}
</p>
)}
<div className="flex flex-wrap items-center gap-3 pt-2">
<span className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-6 py-2.5 text-sm font-semibold text-white transition-all group-hover:bg-[var(--accent-hover)] group-hover:scale-[1.02]">
<BookOpen className="h-4 w-4" />
Leer
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</span>
</div>
</div>
</Link>
</section>
)}
<div className="grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
{posts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
{/* ===== Chips de tags populares (navegación por interés) ===== */}
{popularTags.length > 0 && (
<section>
<h2 className="mb-3 text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
Explorar por género
</h2>
<div className="flex flex-wrap gap-2">
{popularTags.map((tag) => (
<TagBadge key={tag} tag={tag} href={`/tag/${encodeURIComponent(tag)}`} />
))}
</div>
</section>
)}
{/* ===== Feed central: masonry + scroll infinito ===== */}
<section>
<div className="mb-4 flex items-end justify-between">
<div>
<h2 className="text-xl sm:text-2xl font-bold tracking-tight">Todas las publicaciones</h2>
<p className="mt-1 text-xs sm:text-sm text-[var(--muted)]">
{total} traducciones · deslizá para descubrir más
</p>
</div>
</div>
<InfinitePostGrid initialPosts={items} />
</section>
</div>
)
}
+12 -1
View File
@@ -1,9 +1,20 @@
import { NextRequest } from "next/server"
import { getAllPosts, createPost, getPostByGid } from "@/lib/db"
import { getAllPosts, getPostsPage, createPost, getPostByGid } from "@/lib/db"
import { slugify } from "@/lib/slug"
export async function GET(req: NextRequest) {
const publishedOnly = req.nextUrl.searchParams.get("published") === "1"
const page = Math.max(1, parseInt(req.nextUrl.searchParams.get("page") || "1", 10) || 1)
const perPage = Math.min(60, Math.max(1, parseInt(req.nextUrl.searchParams.get("per_page") || "12", 10) || 12))
if (req.nextUrl.searchParams.has("page") || req.nextUrl.searchParams.has("per_page")) {
const { items, total } = getPostsPage(page, perPage, publishedOnly)
return Response.json({
data: items,
meta: { total, page, per_page: perPage, has_more: page * perPage < total },
})
}
const posts = getAllPosts(publishedOnly)
return Response.json({ data: posts })
}
+22
View File
@@ -164,3 +164,25 @@ body {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Entrada suave de cards del feed (fade + slide up), con stagger vía delay */
@utility animate-fade-up {
animation: fade-up 0.45s ease-out both;
}
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.animate-fade-up {
animation: none;
}
}
+100
View File
@@ -0,0 +1,100 @@
"use client"
import { useEffect, useRef, useState, useCallback } from "react"
import type { Post } from "@/lib/db"
import { PostCard } from "@/components/post-card"
interface Meta {
total: number
page: number
per_page: number
has_more: boolean
}
// Feed de scroll infinito estilo TikTok/Pinterest: carga más al acercarse al
// fondo, sin que el usuario toque nada -> la persona sigue scrolleando.
export function InfinitePostGrid({ initialPosts }: { initialPosts: Post[] }) {
const [posts, setPosts] = useState<Post[]>(initialPosts)
const [page, setPage] = useState(1)
const [meta, setMeta] = useState<Meta | null>(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState(false)
const sentinelRef = useRef<HTMLDivElement>(null)
const loadingRef = useRef(false)
const loadMore = useCallback(async () => {
if (loadingRef.current) return
loadingRef.current = true
setLoading(true)
setError(false)
try {
const next = page + 1
const res = await fetch(`/api/posts?published=1&page=${next}&per_page=12`)
if (!res.ok) throw new Error()
const json = await res.json()
const newPosts = (json.data || []) as Post[]
const m = json.meta as Meta | undefined
setPosts((prev) => {
const seen = new Set(prev.map((p) => p.gid))
const fresh = newPosts.filter((p) => !seen.has(p.gid))
return [...prev, ...fresh]
})
setPage(next)
setMeta(m || null)
} catch {
setError(true)
} finally {
setLoading(false)
loadingRef.current = false
}
}, [page])
useEffect(() => {
const el = sentinelRef.current
if (!el || typeof IntersectionObserver === "undefined") return
const obs = new IntersectionObserver(
(entries) => {
const entry = entries[0]
if (entry.isIntersecting && (meta ? meta.has_more : true) && !loadingRef.current) {
loadMore()
}
},
{ rootMargin: "300px 0px" },
)
obs.observe(el)
return () => obs.disconnect()
}, [meta, loadMore])
return (
<div>
<div className="columns-2 gap-3 sm:gap-4 md:columns-3 xl:columns-4 [column-fill:balance]">
{posts.map((post, i) => (
<div key={post.id} className="mb-3 sm:mb-4 break-inside-avoid animate-fade-up" style={{ animationDelay: `${Math.min(i, 8) * 40}ms` }}>
<PostCard post={post} />
</div>
))}
</div>
{/* Sentinel: cuando entra en viewport, carga la siguiente página */}
<div ref={sentinelRef} className="mt-6 flex min-h-[40px] items-center justify-center">
{loading && (
<div className="flex items-center gap-2 text-xs text-[var(--muted)]">
<span className="h-3 w-3 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
Cargando más...
</div>
)}
{error && (
<button
onClick={loadMore}
className="btn-ghost border border-[var(--border)] px-4 py-2 text-xs"
>
Reintentar
</button>
)}
{meta && !meta.has_more && !loading && (
<p className="text-xs text-[var(--muted)]">Llegaste al final no hay nada más. Por ahora. 😉</p>
)}
</div>
</div>
)
}
+37 -12
View File
@@ -2,13 +2,19 @@ import Link from "next/link"
import type { Post } from "@/lib/db"
import { formatDate } from "@/lib/utils"
import { TagBadge } from "@/components/tag-badge"
import { BookOpen, Clock } from "lucide-react"
// Card estilo "pin" (Pinterest/manga sites): portada dominante, hover con zoom
// y overlay de lectura, metadata compacta. Image-first para retención visual.
export function PostCard({ post, compact = false }: { post: Post; compact?: boolean }) {
const isAnthology =
post.tags?.some((t) =>
["anthology", "compilation", "tankoubon"].some((k) => t.toLowerCase().includes(k))
) || post.num_pages >= 100
// Duraciones de lectura aproximadas para dar contexto (hook de curiosidad).
const readMinutes = post.num_pages > 0 ? Math.max(1, Math.round(post.num_pages / 30)) : null
if (compact) {
return (
<Link
@@ -47,39 +53,58 @@ export function PostCard({ post, compact = false }: { post: Post; compact?: bool
return (
<Link
href={`/p/${post.slug}`}
className="card card-hover group flex flex-col overflow-hidden p-0"
className="group block overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface)] transition-all duration-300 hover:border-[var(--border-hover)] hover:shadow-lg hover:shadow-black/40 hover:-translate-y-0.5"
>
{/* Portada dominante con overlay en hover */}
<div className="relative aspect-[3/4] overflow-hidden bg-[var(--surface)]">
<img
src={`/api/cover/${post.gid}`}
alt={post.title}
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.06]"
loading="lazy"
/>
{/* Gradiente inferior para legibilidad del overlay */}
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/80 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
{/* Overlay de acción en hover */}
<div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<span className="inline-flex items-center gap-1.5 rounded-full bg-white/95 px-4 py-2 text-xs font-semibold text-black shadow-lg">
<BookOpen className="h-3.5 w-3.5" />
Leer
</span>
</div>
{isAnthology && (
<span className="absolute top-2 left-2 rounded bg-black/80 backdrop-blur-sm px-1.5 py-0.5 text-[9px] font-bold text-[var(--accent)] border border-[var(--accent)]/40 shadow">
<span className="absolute top-2 left-2 rounded-full bg-black/80 backdrop-blur-sm px-2 py-0.5 text-[9px] font-bold text-[var(--accent)] border border-[var(--accent)]/40 shadow">
ANTOLOGÍA
</span>
)}
{post.num_pages > 0 && (
<span className="absolute top-2 right-2 inline-flex items-center gap-1 rounded-full bg-black/70 backdrop-blur-sm px-2 py-0.5 text-[10px] font-medium text-[var(--muted-light)]">
<Clock className="h-3 w-3" />
{post.num_pages}p
</span>
)}
</div>
<div className="flex flex-1 flex-col gap-2 p-3">
{/* Metadatos */}
<div className="flex flex-col gap-1.5 p-3">
<h3 className="line-clamp-2 text-sm font-semibold leading-snug group-hover:text-[var(--accent)] transition-colors">
{post.title}
</h3>
{post.artist && (
<p className="text-xs text-[var(--muted)]">{post.artist}</p>
)}
<div className="flex items-center justify-between text-[10px] text-[var(--muted)]">
<span className="truncate">{post.artist || post.parody || post.source || "worst-scan"}</span>
{readMinutes && (
<span className="flex-shrink-0">{readMinutes} min</span>
)}
</div>
{post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-1">
{post.tags.slice(0, 3).map((tag) => (
{post.tags.slice(0, 2).map((tag) => (
<TagBadge key={tag} tag={tag} href={`/tag/${encodeURIComponent(tag)}`} />
))}
</div>
)}
<div className="mt-auto flex items-center gap-2 text-[10px] text-[var(--muted)]">
{post.num_pages > 0 && <span>{post.num_pages} pág</span>}
{post.published_at && <span>{formatDate(post.published_at)}</span>}
</div>
</div>
</Link>
)
+32
View File
@@ -214,6 +214,38 @@ export function getPostCount(): number {
return row.count
}
// Búsqueda pública por título/título_jpn/artista/tags (LIKE sobre JSON).
export function searchPosts(query: string, publishedOnly = true): Post[] {
const d = getDb()
const q = `%${query}%`
const where = publishedOnly ? "published = 1 AND" : ""
const rows = d
.prepare(
`SELECT * FROM posts WHERE ${where} (
title LIKE @q OR
title_jpn LIKE @q OR
artist LIKE @q OR
parody LIKE @q OR
tags LIKE @q
) ORDER BY published_at DESC LIMIT 100`,
)
.all({ q }) as Record<string, unknown>[]
return rows.map(rowToPost)
}
// Paginación de la home pública.
export function getPostsPage(page: number, perPage: number, publishedOnly = true): { items: Post[]; total: number } {
const d = getDb()
const offset = (page - 1) * perPage
const where = publishedOnly ? "WHERE published = 1" : ""
const order = publishedOnly ? "published_at DESC" : "created_at DESC"
const rows = d
.prepare(`SELECT * FROM posts ${where} ORDER BY ${order} LIMIT @perPage OFFSET @offset`)
.all({ perPage, offset }) as Record<string, unknown>[]
const total = (d.prepare(`SELECT COUNT(*) as count FROM posts ${where}`).get() as { count: number }).count
return { items: rows.map(rowToPost), total }
}
export function getGidsNotInPosts(): string[] {
return []
}
+10
View File
@@ -0,0 +1,10 @@
// Links comunitarios del sitio. Reemplazá los placeholders cuando tengas
// Discord y Patreon reales.
export const SITE_LINKS = {
twitter: "https://x.com/worstscan",
discord: "#", // TODO: link real de Discord
patreon: "#", // TODO: link real de Patreon
}
export const SITE_NAME = "worst-scan"
export const SITE_TAGLINE = "traducción automática de manga"
+5 -8
View File
@@ -24,17 +24,14 @@ const publicPrefixes = [
// "/" es MATCH EXACTO (startsWith("/") matchearía TODO).
// "/gallery/" incluye el lector: cualquiera puede LEER (GET); las acciones
// del panel (eliminar, etc.) quedan protegidas por el middleware vía método.
const publicPages = ["/p/", "/tag/", "/gallery/"]
const publicPages = ["/p/", "/tag/", "/gallery/", "/buscar"]
// GET de lectura del proxy hacia el pipeline: públicos para que el lector
// funcione sin login. POST/DELETE/PATCH (mutaciones) siempre requieren sesión.
// GET de lectura del proxy hacia el pipeline: solo las rutas que el LECTOR
// público necesita (páginas, summary, artifacts, cover). /status y /queue
// exponen info operativa interna -> requieren sesión.
function isPublicProxyRead(pathname: string, method: string): boolean {
if (method !== "GET" && method !== "HEAD") return false
return (
pathname.startsWith("/api/proxy/galleries/") ||
pathname === "/api/proxy/status" ||
pathname === "/api/proxy/queue"
)
return pathname.startsWith("/api/proxy/galleries/")
}
function isPublicPath(pathname: string, method: string): boolean {