Rediseno home: hero destacado, chips de genero, masonry + scroll infinito, busqueda publica /buscar, footer comunidad, status/queue protegidos
This commit is contained in:
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import Link from "next/link"
|
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).
|
// Header del sitio público: búsqueda pública (SQLite) + logo.
|
||||||
// Solo navegación pública (logo -> home).
|
|
||||||
export default function PublicLayout({ children }: { children: React.ReactNode }) {
|
export default function PublicLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
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)]">
|
<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)]" />
|
<Image className="h-4 w-4 text-[var(--accent)]" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm font-bold tracking-tight">worst-scan</span>
|
<span className="text-sm font-bold tracking-tight">{SITE_NAME}</span>
|
||||||
</Link>
|
</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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="mx-auto max-w-5xl px-3 py-4 sm:px-4 sm:py-8">{children}</main>
|
<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">
|
<footer className="border-t border-[var(--border)] py-6 text-center text-xs text-[var(--muted)] mb-12 sm:mb-0">
|
||||||
worst-scan · 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} · {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>
|
</footer>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
+94
-19
@@ -1,14 +1,28 @@
|
|||||||
import { getAllPosts } from "@/lib/db"
|
import Link from "next/link"
|
||||||
import { PostCard } from "@/components/post-card"
|
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 { EmptyState } from "@/components/empty-state"
|
||||||
import { BookOpen } from "lucide-react"
|
import { BookOpen, Sparkles, ArrowRight } from "lucide-react"
|
||||||
|
|
||||||
export const dynamic = "force-dynamic"
|
export const dynamic = "force-dynamic"
|
||||||
|
|
||||||
export default function PublicHomePage() {
|
export default async function PublicHomePage() {
|
||||||
const posts = getAllPosts(true)
|
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 (
|
return (
|
||||||
<div className="py-20">
|
<div className="py-20">
|
||||||
<EmptyState message="Todavía no hay publicaciones" icon={<BookOpen className="mb-3 h-10 w-10 text-[var(--muted)]" />} />
|
<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 (
|
return (
|
||||||
<div>
|
<div className="space-y-8 sm:space-y-10">
|
||||||
<div className="mb-6 sm:mb-8">
|
{/* ===== HERO: publicación destacada (hook visual inmediato) ===== */}
|
||||||
<h1 className="text-xl sm:text-2xl font-bold tracking-tight">Publicaciones</h1>
|
{latest && (
|
||||||
<p className="mt-1 text-xs sm:text-sm text-[var(--muted)]">
|
<section className="rounded-3xl overflow-hidden border border-[var(--border)] bg-gradient-to-br from-[var(--surface)] via-[var(--surface)] to-[#1a1a20]">
|
||||||
Traducciones automáticas generadas por worst-scan
|
<Link href={`/p/${latest.slug}`} className="group grid gap-0 md:grid-cols-2">
|
||||||
</p>
|
<div className="relative aspect-[4/3] md:aspect-auto md:h-full overflow-hidden">
|
||||||
</div>
|
<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">
|
{/* ===== Chips de tags populares (navegación por interés) ===== */}
|
||||||
{posts.map((post) => (
|
{popularTags.length > 0 && (
|
||||||
<PostCard key={post.id} post={post} />
|
<section>
|
||||||
))}
|
<h2 className="mb-3 text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
|
||||||
</div>
|
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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -1,9 +1,20 @@
|
|||||||
import { NextRequest } from "next/server"
|
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"
|
import { slugify } from "@/lib/slug"
|
||||||
|
|
||||||
export async function GET(req: NextRequest) {
|
export async function GET(req: NextRequest) {
|
||||||
const publishedOnly = req.nextUrl.searchParams.get("published") === "1"
|
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)
|
const posts = getAllPosts(publishedOnly)
|
||||||
return Response.json({ data: posts })
|
return Response.json({ data: posts })
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -164,3 +164,25 @@ body {
|
|||||||
0% { background-position: 200% 0; }
|
0% { background-position: 200% 0; }
|
||||||
100% { 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -2,13 +2,19 @@ import Link from "next/link"
|
|||||||
import type { Post } from "@/lib/db"
|
import type { Post } from "@/lib/db"
|
||||||
import { formatDate } from "@/lib/utils"
|
import { formatDate } from "@/lib/utils"
|
||||||
import { TagBadge } from "@/components/tag-badge"
|
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 }) {
|
export function PostCard({ post, compact = false }: { post: Post; compact?: boolean }) {
|
||||||
const isAnthology =
|
const isAnthology =
|
||||||
post.tags?.some((t) =>
|
post.tags?.some((t) =>
|
||||||
["anthology", "compilation", "tankoubon"].some((k) => t.toLowerCase().includes(k))
|
["anthology", "compilation", "tankoubon"].some((k) => t.toLowerCase().includes(k))
|
||||||
) || post.num_pages >= 100
|
) || 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) {
|
if (compact) {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
@@ -47,39 +53,58 @@ export function PostCard({ post, compact = false }: { post: Post; compact?: bool
|
|||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={`/p/${post.slug}`}
|
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)]">
|
<div className="relative aspect-[3/4] overflow-hidden bg-[var(--surface)]">
|
||||||
<img
|
<img
|
||||||
src={`/api/cover/${post.gid}`}
|
src={`/api/cover/${post.gid}`}
|
||||||
alt={post.title}
|
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"
|
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 && (
|
{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
|
ANTOLOGÍA
|
||||||
</span>
|
</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>
|
||||||
<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">
|
<h3 className="line-clamp-2 text-sm font-semibold leading-snug group-hover:text-[var(--accent)] transition-colors">
|
||||||
{post.title}
|
{post.title}
|
||||||
</h3>
|
</h3>
|
||||||
{post.artist && (
|
<div className="flex items-center justify-between text-[10px] text-[var(--muted)]">
|
||||||
<p className="text-xs text-[var(--muted)]">{post.artist}</p>
|
<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 && (
|
{post.tags && post.tags.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-1">
|
<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)}`} />
|
<TagBadge key={tag} tag={tag} href={`/tag/${encodeURIComponent(tag)}`} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -214,6 +214,38 @@ export function getPostCount(): number {
|
|||||||
return row.count
|
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[] {
|
export function getGidsNotInPosts(): string[] {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -24,17 +24,14 @@ const publicPrefixes = [
|
|||||||
// "/" es MATCH EXACTO (startsWith("/") matchearía TODO).
|
// "/" es MATCH EXACTO (startsWith("/") matchearía TODO).
|
||||||
// "/gallery/" incluye el lector: cualquiera puede LEER (GET); las acciones
|
// "/gallery/" incluye el lector: cualquiera puede LEER (GET); las acciones
|
||||||
// del panel (eliminar, etc.) quedan protegidas por el middleware vía método.
|
// 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
|
// GET de lectura del proxy hacia el pipeline: solo las rutas que el LECTOR
|
||||||
// funcione sin login. POST/DELETE/PATCH (mutaciones) siempre requieren sesión.
|
// 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 {
|
function isPublicProxyRead(pathname: string, method: string): boolean {
|
||||||
if (method !== "GET" && method !== "HEAD") return false
|
if (method !== "GET" && method !== "HEAD") return false
|
||||||
return (
|
return pathname.startsWith("/api/proxy/galleries/")
|
||||||
pathname.startsWith("/api/proxy/galleries/") ||
|
|
||||||
pathname === "/api/proxy/status" ||
|
|
||||||
pathname === "/api/proxy/queue"
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function isPublicPath(pathname: string, method: string): boolean {
|
function isPublicPath(pathname: string, method: string): boolean {
|
||||||
|
|||||||
Reference in New Issue
Block a user