From 7f939b76a49318a949009427addda8f3751f5c7f Mon Sep 17 00:00:00 2001 From: Renato Date: Tue, 4 Aug 2026 13:21:13 +0800 Subject: [PATCH] Rediseno home: hero destacado, chips de genero, masonry + scroll infinito, busqueda publica /buscar, footer comunidad, status/queue protegidos --- src/app/(public)/buscar/page.tsx | 66 ++++++++++++++++++ src/app/(public)/layout.tsx | 58 ++++++++++++++-- src/app/(public)/page.tsx | 113 +++++++++++++++++++++++++------ src/app/api/posts/route.ts | 13 +++- src/app/globals.css | 22 ++++++ src/components/infinite-grid.tsx | 100 +++++++++++++++++++++++++++ src/components/post-card.tsx | 49 ++++++++++---- src/lib/db.ts | 32 +++++++++ src/lib/site.ts | 10 +++ src/middleware.ts | 13 ++-- 10 files changed, 430 insertions(+), 46 deletions(-) create mode 100644 src/app/(public)/buscar/page.tsx create mode 100644 src/components/infinite-grid.tsx create mode 100644 src/lib/site.ts diff --git a/src/app/(public)/buscar/page.tsx b/src/app/(public)/buscar/page.tsx new file mode 100644 index 0000000..dffdf56 --- /dev/null +++ b/src/app/(public)/buscar/page.tsx @@ -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 ( +
+ + + Volver + + +

Buscar

+

+ Buscar publicaciones por título, artista o tags +

+ +
+
+ + +
+
+ + {!query ? ( +

Escribí algo para buscar publicaciones.

+ ) : results.length === 0 ? ( + + ) : ( + <> +

{results.length} resultado(s)

+
+ {results.map((post) => ( + + ))} +
+ + )} +
+ ) +} \ No newline at end of file diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx index 237bffa..0664e0b 100644 --- a/src/app/(public)/layout.tsx +++ b/src/app/(public)/layout.tsx @@ -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 }
- worst-scan + {SITE_NAME} - +
{children}
) diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx index 6ccc4e6..8781087 100644 --- a/src/app/(public)/page.tsx +++ b/src/app/(public)/page.tsx @@ -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() + 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 (
} /> @@ -20,19 +34,80 @@ export default function PublicHomePage() { } return ( -
-
-

Publicaciones

-

- Traducciones automáticas generadas por worst-scan -

-
+
+ {/* ===== HERO: publicación destacada (hook visual inmediato) ===== */} + {latest && ( +
+ +
+ {latest.title} +
+ + Último lanzamiento +
+
+
+
+ + Destacado + + {latest.num_pages > 0 && ( + {latest.num_pages} páginas + )} +
+

+ {latest.title} +

+ {latest.artist && ( +

por {latest.artist}

+ )} + {latest.summary && latest.summary.length > 40 && ( +

+ {latest.summary} +

+ )} +
+ + + Leer + + +
+
+ +
+ )} -
- {posts.map((post) => ( - - ))} -
+ {/* ===== Chips de tags populares (navegación por interés) ===== */} + {popularTags.length > 0 && ( +
+

+ Explorar por género +

+
+ {popularTags.map((tag) => ( + + ))} +
+
+ )} + + {/* ===== Feed central: masonry + scroll infinito ===== */} +
+
+
+

Todas las publicaciones

+

+ {total} traducciones · deslizá para descubrir más +

+
+
+ +
) -} +} \ No newline at end of file diff --git a/src/app/api/posts/route.ts b/src/app/api/posts/route.ts index db1f7df..2f96e1b 100644 --- a/src/app/api/posts/route.ts +++ b/src/app/api/posts/route.ts @@ -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 }) } diff --git a/src/app/globals.css b/src/app/globals.css index d4d0793..18ae070 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; + } +} diff --git a/src/components/infinite-grid.tsx b/src/components/infinite-grid.tsx new file mode 100644 index 0000000..148593a --- /dev/null +++ b/src/components/infinite-grid.tsx @@ -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(initialPosts) + const [page, setPage] = useState(1) + const [meta, setMeta] = useState(null) + const [loading, setLoading] = useState(false) + const [error, setError] = useState(false) + const sentinelRef = useRef(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 ( +
+
+ {posts.map((post, i) => ( +
+ +
+ ))} +
+ + {/* Sentinel: cuando entra en viewport, carga la siguiente página */} +
+ {loading && ( +
+ + Cargando más... +
+ )} + {error && ( + + )} + {meta && !meta.has_more && !loading && ( +

Llegaste al final — no hay nada más. Por ahora. 😉

+ )} +
+
+ ) +} diff --git a/src/components/post-card.tsx b/src/components/post-card.tsx index 8ba13d5..17f6715 100644 --- a/src/components/post-card.tsx +++ b/src/components/post-card.tsx @@ -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 ( + {/* Portada dominante con overlay en hover */}
{post.title} + {/* Gradiente inferior para legibilidad del overlay */} +
+ + {/* Overlay de acción en hover */} +
+ + + Leer + +
+ {isAnthology && ( - + ANTOLOGÍA )} + {post.num_pages > 0 && ( + + + {post.num_pages}p + + )}
-
+ + {/* Metadatos */} +

{post.title}

- {post.artist && ( -

{post.artist}

- )} +
+ {post.artist || post.parody || post.source || "worst-scan"} + {readMinutes && ( + {readMinutes} min + )} +
{post.tags && post.tags.length > 0 && (
- {post.tags.slice(0, 3).map((tag) => ( + {post.tags.slice(0, 2).map((tag) => ( ))}
)} -
- {post.num_pages > 0 && {post.num_pages} pág} - {post.published_at && {formatDate(post.published_at)}} -
) diff --git a/src/lib/db.ts b/src/lib/db.ts index 9091866..25fad02 100644 --- a/src/lib/db.ts +++ b/src/lib/db.ts @@ -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[] + 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[] + 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 [] } diff --git a/src/lib/site.ts b/src/lib/site.ts new file mode 100644 index 0000000..4eb15b4 --- /dev/null +++ b/src/lib/site.ts @@ -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" \ No newline at end of file diff --git a/src/middleware.ts b/src/middleware.ts index ae899ed..2617779 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -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 {