- {/* ===== HERO: publicación destacada (hook visual inmediato) ===== */}
+ {/* ===== HERO CARRUSEL: último lanzamiento → más leído → más viral ===== */}
{latest && (
-
-
-
+
+ {mostViewed.length > 0 && (
+
+ )}
+
+ {/* ===== Feed central: grid + scroll infinito ===== */}
- 
-
-
-
-
-
-
-
-
- Destacado
-
- {latest.num_pages > 0 && (
- {latest.num_pages} páginas
- )}
-
- - {displayTitle(latest)} -
- {latest.artist && ( -por {latest.artist}
- )} - {latest.summary && latest.summary.length > 40 && ( -- {latest.summary} -
- )} -
-
-
-
+
+
+
+ )}
+
+ {trending.length > 0 && (
+
+
+ -
+ {mostViewed.slice(0, 5).map((p, i) => (
+
-
+
+
+ {i + 1}
+
+
+
++ ++ {displayTitle(p)} +
++ {p.views} {p.views === 1 ? "lectura" : "lecturas"} +
+
+ ))}
+
+
+
+
+ )}
+
+
+ -
+ {trending.slice(0, 5).map((p, i) => (
+
-
+
+
+ {i + 1}
+
+ ++ +
+ {displayTitle(p)} +
++ {p.views} {p.views === 1 ? "lectura" : "lecturas"} esta semana +
+
+ ))}
+
diff --git a/src/app/api/stats/view/route.ts b/src/app/api/stats/view/route.ts
new file mode 100644
index 0000000..7ddccde
--- /dev/null
+++ b/src/app/api/stats/view/route.ts
@@ -0,0 +1,28 @@
+import { NextRequest } from "next/server"
+import { recordView } from "@/lib/db"
+
+// POST /api/stats/view — registra una vista de un post.
+// Dedupe por cookie: cada visitante cuenta 1 vista por gid por día
+// (cookie ws_v_ con expiración 24h). Evita que bots/refrescos inflen.
+export async function POST(req: NextRequest) {
+ const body = await req.json().catch(() => ({}))
+ const gid = String(body.gid || "").trim()
+ if (!gid || !/^\d+$/.test(gid)) {
+ return Response.json({ error: "gid inválido" }, { status: 400 })
+ }
+
+ const cookieName = `ws_v_${gid}`
+ const already = req.cookies.get(cookieName)?.value
+ if (already === "1") {
+ return Response.json({ counted: false })
+ }
+
+ recordView(gid)
+
+ const res = Response.json({ counted: true })
+ res.headers.append(
+ "Set-Cookie",
+ `${cookieName}=1; Path=/; Max-Age=${24 * 60 * 60}; SameSite=Lax`,
+ )
+ return res
+}
\ No newline at end of file
diff --git a/src/components/hero-carousel.tsx b/src/components/hero-carousel.tsx
new file mode 100644
index 0000000..0da45f8
--- /dev/null
+++ b/src/components/hero-carousel.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import { useEffect, useRef, useState, useCallback } from "react"
+import Link from "next/link"
+import type { ViewedPost } from "@/lib/db"
+import { displayTitle } from "@/lib/title"
+import { ArrowRight, BookOpen, Sparkles, Flame, TrendingUp } from "lucide-react"
+
+interface Slide {
+ key: string
+ label: string
+ icon: "sparkles" | "flame" | "trending"
+ post: ViewedPost
+}
+
+// Hero carrusel: desliza entre Último lanzamiento → Lo más leído → Lo más viral.
+// Autoplay cada 6s + swipe táctil + flechas. Transición suave (translateX).
+export function HeroCarousel({
+ latest,
+ mostViewed,
+ trending,
+}: {
+ latest: ViewedPost
+ mostViewed: ViewedPost[]
+ trending: ViewedPost[]
+}) {
+ const [index, setIndex] = useState(0)
+ const [paused, setPaused] = useState(false)
+ const touchX = useRef(null)
+
+ const slides: Slide[] = [
+ { key: "latest", label: "Último lanzamiento", icon: "sparkles", post: latest },
+ ]
+ if (mostViewed.length > 0) {
+ slides.push({ key: "most-viewed", label: "Lo más leído", icon: "flame", post: mostViewed[0] })
+ }
+ if (trending.length > 0 && trending[0].gid !== mostViewed[0]?.gid) {
+ slides.push({ key: "trending", label: "Lo más viral", icon: "trending", post: trending[0] })
+ }
+
+ const go = useCallback(
+ (dir: 1 | -1) => setIndex((i) => (i + dir + slides.length) % slides.length),
+ [slides.length],
+ )
+
+ // Autoplay (pausa al hover/touch)
+ useEffect(() => {
+ if (paused || slides.length <= 1) return
+ const t = setInterval(() => go(1), 6000)
+ return () => clearInterval(t)
+ }, [paused, go, slides.length])
+
+ if (slides.length === 0) return null
+ const active = slides[index]
+
+ return (
+ setPaused(true)}
+ onMouseLeave={() => setPaused(false)}
+ onTouchStart={(e) => (touchX.current = e.touches[0].clientX)}
+ onTouchEnd={(e) => {
+ if (touchX.current === null) return
+ const delta = e.changedTouches[0].clientX - touchX.current
+ if (Math.abs(delta) > 40) go(delta < 0 ? 1 : -1) // swipe izq = next, der = prev
+ touchX.current = null
+ }}
+ >
+ {/* Slides en fila, translateX suave */}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/view-tracker.tsx b/src/components/view-tracker.tsx
new file mode 100644
index 0000000..9c4e861
--- /dev/null
+++ b/src/components/view-tracker.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { useEffect } from "react"
+
+// Registra una vista de un post al abrirlo (dedupe por cookie en el servidor:
+// 1 vista por visitante por gid por día). No bloquea ni afecta la UI.
+export function ViewTracker({ gid }: { gid: string }) {
+ useEffect(() => {
+ if (!gid) return
+ // Fire-and-forget: no esperamos respuesta, no importa si falla.
+ fetch("/api/stats/view", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ gid }),
+ credentials: "same-origin",
+ }).catch(() => {})
+ }, [gid])
+
+ return null
+}
\ No newline at end of file
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 3e159c2..f4d8ddb 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -117,6 +117,19 @@ function migrate(db: Database.Database) {
try {
db.exec("ALTER TABLE posts ADD COLUMN title_es TEXT")
} catch {}
+
+ // ===== Métricas de popularidad =====
+ // post_views: cada lectura de un post (1 por visitante por día, dedup por cookie).
+ db.exec(`
+ CREATE TABLE IF NOT EXISTS post_views (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ gid TEXT NOT NULL,
+ viewed_at TEXT DEFAULT (datetime('now'))
+ );
+
+ CREATE INDEX IF NOT EXISTS idx_views_gid ON post_views(gid);
+ CREATE INDEX IF NOT EXISTS idx_views_date ON post_views(viewed_at);
+ `)
}
export interface Post {
@@ -534,3 +547,53 @@ export function getTagsWithCounts(limit = 25): { tag: string; count: number }[]
return []
}
}
+
+// ===== Métricas de popularidad =====
+
+export interface ViewedPost extends Post {
+ views: number
+}
+
+// Registra una vista de un post (1 por visitante por día — el dedupe lo hace
+// el endpoint vía cookie; acá solo insertamos el evento).
+export function recordView(gid: string): void {
+ const d = getDb()
+ d.prepare("INSERT INTO post_views (gid) VALUES (?)").run(gid)
+}
+
+// Posts más LEÍDOS (total acumulado de vistas).
+export function getMostViewedPosts(limit = 10): ViewedPost[] {
+ const d = getDb()
+ const rows = d
+ .prepare(
+ `SELECT p.*, (SELECT COUNT(*) FROM post_views v WHERE v.gid = p.gid) as views
+ FROM posts p
+ WHERE p.published = 1
+ ORDER BY views DESC
+ LIMIT @limit`,
+ )
+ .all({ limit }) as Record[]
+ return rows.map((r) => ({ ...rowToPost(r), views: (r.views as number) || 0 }))
+}
+
+// Posts más VIRALES (vistas en los últimos N días) — lo que está explotando ahora.
+export function getTrendingPosts(days = 7, limit = 10): ViewedPost[] {
+ const d = getDb()
+ const rows = d
+ .prepare(
+ `SELECT p.*, (SELECT COUNT(*) FROM post_views v WHERE v.gid = p.gid AND v.viewed_at >= datetime('now', @daysExpr)) as views
+ FROM posts p
+ WHERE p.published = 1
+ ORDER BY views DESC
+ LIMIT @limit`,
+ )
+ .all({ daysExpr: `-${days} days`, limit }) as Record[]
+ return rows.map((r) => ({ ...rowToPost(r), views: (r.views as number) || 0 }))
+}
+
+// Cantidad de vistas de un gid (para el badge de la card).
+export function getPostViews(gid: string): number {
+ const d = getDb()
+ const row = d.prepare("SELECT COUNT(*) as c FROM post_views WHERE gid = ?").get(gid) as { c: number }
+ return row.c
+}
diff --git a/src/middleware.ts b/src/middleware.ts
index 4c399a1..dbcf128 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -53,6 +53,9 @@ function isPublicPath(pathname: string, method: string): boolean {
// Solo GET; el token valida la autorización dentro del handler.
if (pathname.startsWith("/api/review/") && method === "GET") return true
+ // /api/stats/view: registro de vistas (POST, gid validado en el handler).
+ if (pathname === "/api/stats/view" && method === "POST") return true
+
return false
}
+ {slides.map((s) => (
+
+
+
+ {/* Flechas (desktop) */}
+ {slides.length > 1 && (
+ <>
+
+
+
+ )}
+
+ {/* Indicadores */}
+ {slides.length > 1 && (
+
+ 
+
+
+ {s.icon === "flame" &&
+
+
+
+ ))}
+
+ {s.post.views > 0 && (
+
+
+ + {displayTitle(s.post)} +
+ {s.post.artist && ( +por {s.post.artist}
+ )} +
+
+
+
+ {slides.map((s, i) => (
+
+ )}
+