- (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 (
+
+ {/* Gradiente inferior para legibilidad del overlay */}
+
+
+ {/* Overlay de acción en hover */}
+
-
+ Publicaciones
-- Traducciones automáticas generadas por worst-scan -
-
+ {/* ===== HERO: publicación destacada (hook visual inmediato) ===== */}
+ {latest && (
+
+
+
+ )}
-
+
+ )}
+
+ {/* ===== Feed central: masonry + scroll infinito ===== */}
+
+
)
-}
+}
\ 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
+ 
+
+
+
+
+
+
+
+
+ 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} +
+ )} +
+
+
+
- {posts.map((post) => (
-
+ {/* ===== Chips de tags populares (navegación por interés) ===== */}
+ {popularTags.length > 0 && (
+ + Explorar por género +
+
+ {popularTags.map((tag) => (
+
+
+
+
+
+ Todas las publicaciones
++ {total} traducciones · deslizá para descubrir más +
+
+
+ )
+}
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 */}
+ {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. 😉
+ )} +
+
+
+
{isAnthology && (
-
+
ANTOLOGÍA
)}
+ {post.num_pages > 0 && (
+
+
+
+ {/* Metadatos */}
+
)
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 {
{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)}}
-