103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { CitationProvider } from '@/context/citation-context';
|
|
import { ReferencesContainer } from '@/components/references-container';
|
|
import { CustomMDX } from '@/components/custom-mdx';
|
|
import { Breadcrumbs } from "./breadcrumbs";
|
|
import Link from 'next/link';
|
|
import { Publication } from '@/lib/publications';
|
|
import { ProjectNavigation } from './project-navigation';
|
|
import { Tag } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
interface Post {
|
|
code: string;
|
|
frontmatter: {
|
|
title: string;
|
|
excerpt?: string;
|
|
teaser?: string;
|
|
tags?: string[];
|
|
icon?: string;
|
|
date?: string;
|
|
};
|
|
}
|
|
|
|
interface NavigationLink { slug: string; title: string; }
|
|
interface ArticleProps {
|
|
post: Post;
|
|
publications: Publication[];
|
|
navigation?: { prev: NavigationLink | null; next: NavigationLink | null; };
|
|
basePath: string;
|
|
}
|
|
|
|
export function Article({ post, publications, navigation, basePath }: ArticleProps) {
|
|
return (
|
|
<CitationProvider publications={publications}>
|
|
<main className="flex flex-col min-h-[100dvh] space-y-10">
|
|
<section id="article">
|
|
<div className="mx-auto w-full max-w-4xl space-y-8">
|
|
<div className="flex flex-col gap-y-2 sm:flex-row sm:justify-between sm:items-center">
|
|
<Breadcrumbs
|
|
basePath={basePath}
|
|
baseLabel={basePath.charAt(0).toUpperCase() + basePath.slice(1)}
|
|
/>
|
|
{/* MOVED: The date is now on the right side of the container */}
|
|
{post.frontmatter.date && (
|
|
<time className="text-sm text-muted-foreground" dateTime={post.frontmatter.date}>
|
|
{new Date(post.frontmatter.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
)}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
|
|
{post.frontmatter.title}
|
|
</h1>
|
|
{post.frontmatter.excerpt && (
|
|
<p className="text-muted-foreground">
|
|
{post.frontmatter.excerpt}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<article className="prose prose-stone dark:prose-invert max-w-none">
|
|
{post.frontmatter.icon && (
|
|
<div className="float-left mr-4 mb-2">
|
|
<Image
|
|
src={post.frontmatter.icon}
|
|
alt={`${post.frontmatter.title} icon`}
|
|
width={64}
|
|
height={64}
|
|
className="rounded-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<CustomMDX code={post.code} />
|
|
</article>
|
|
|
|
{/* Tags, References, and Navigation now live outside the `prose` scope for better control */}
|
|
{post.frontmatter.tags && (
|
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
|
<Tag className="size-4 text-muted-foreground" />
|
|
{post.frontmatter.tags.map((tag: string) => (
|
|
<Link key={tag} href={`/tags/${tag}`} className="px-3 py-1 text-sm font-medium bg-secondary text-secondary-foreground transition-colors hover:bg-primary hover:text-primary-foreground">
|
|
{tag}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<ReferencesContainer />
|
|
|
|
{navigation && (
|
|
<ProjectNavigation prev={navigation.prev} next={navigation.next} basePath={basePath} />
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</CitationProvider>
|
|
);
|
|
} |