- Migration: champs isPublic + publicSlug + publishedAt sur Note - Route publique /p/[slug] — rendu SSR sans auth, prose styled - Server actions: publishNote / unpublishNote / getPublishedNote - API /api/notes/publish — toggle publication + génération slug - PublishDialog — modal avec lien copiable + bouton dépublier - Bouton Globe dans le toolbar (vert si publiée) - i18n FR/EN - Pattern inspiré de BrainstormSession.isPublic
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { notFound } from 'next/navigation'
|
|
import { getPublishedNote } from '@/app/actions/notes-publishing'
|
|
import { FileText, Calendar } from 'lucide-react'
|
|
import { format } from 'date-fns'
|
|
|
|
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params
|
|
const note = await getPublishedNote(slug)
|
|
if (!note) return { title: 'Note not found' }
|
|
return { title: note.title || 'Published note', description: note.content?.replace(/<[^>]+>/g, '').slice(0, 160) }
|
|
}
|
|
|
|
export const dynamic = 'force-static'
|
|
export const revalidate = 3600
|
|
|
|
export default async function PublishedNotePage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params
|
|
const note = await getPublishedNote(slug)
|
|
|
|
if (!note) notFound()
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F2F0E9] dark:bg-zinc-950">
|
|
<div className="max-w-3xl mx-auto px-6 py-12">
|
|
{/* Header */}
|
|
<div className="mb-8 pb-6 border-b border-black/10 dark:border-white/10">
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-3">
|
|
<FileText size={14} />
|
|
<span>Note publiée</span>
|
|
{note.publishedAt && (
|
|
<>
|
|
<span>·</span>
|
|
<Calendar size={12} />
|
|
<span>{format(new Date(note.publishedAt), 'MMM d, yyyy')}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<h1 className="text-3xl font-serif font-medium tracking-tight text-foreground leading-tight mb-2">
|
|
{note.title || 'Sans titre'}
|
|
</h1>
|
|
{note.user?.name && (
|
|
<p className="text-sm text-muted-foreground">par {note.user.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<article
|
|
dir="auto"
|
|
className="prose prose-stone dark:prose-invert max-w-none
|
|
prose-headings:font-serif prose-headings:font-medium
|
|
prose-p:leading-relaxed prose-p:text-[15px]
|
|
prose-pre:bg-zinc-100 prose-pre:dark:bg-zinc-900
|
|
prose-blockquote:border-brand-accent/40
|
|
prose-a:text-brand-accent"
|
|
dangerouslySetInnerHTML={{ __html: note.content || '' }}
|
|
/>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-12 pt-6 border-t border-black/10 dark:border-white/10 text-center">
|
|
<p className="text-xs text-muted-foreground">
|
|
Publié sur Momento
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|