updated look
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 2m15s
This commit is contained in:
Akshay Kolli
@@ -3,14 +3,12 @@ import { MDXRemote } from 'next-mdx-remote/rsc';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { format } from 'date-fns';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
||||
import { TableOfContents } from '@/components/mdx/TableOfContents';
|
||||
import { SideNote } from '@/components/mdx/SideNote';
|
||||
import { Citation, Bibliography } from '@/components/mdx/Citation';
|
||||
import { MobileTableOfContents } from '@/components/mdx/MobileTableOfContents';
|
||||
|
||||
// Utility to ensure consistent IDs
|
||||
const slugify = (text: React.ReactNode): string => {
|
||||
if (!text) return '';
|
||||
const str = typeof text === 'string' ? text : String(text);
|
||||
@@ -21,16 +19,16 @@ const slugify = (text: React.ReactNode): string => {
|
||||
};
|
||||
|
||||
const components = {
|
||||
h1: (props: React.ComponentPropsWithoutRef<'h1'>) => <h1 {...props} id={slugify(props.children)} className="text-3xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
|
||||
h2: (props: React.ComponentPropsWithoutRef<'h2'>) => <h2 {...props} id={slugify(props.children)} className="text-2xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
|
||||
h3: (props: React.ComponentPropsWithoutRef<'h3'>) => <h3 {...props} id={slugify(props.children)} className="text-xl font-bold mt-6 mb-3 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
|
||||
p: (props: React.ComponentPropsWithoutRef<'p'>) => <p {...props} className="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300" />,
|
||||
ul: (props: React.ComponentPropsWithoutRef<'ul'>) => <ul {...props} className="list-disc pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
|
||||
ol: (props: React.ComponentPropsWithoutRef<'ol'>) => <ol {...props} className="list-decimal pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
|
||||
blockquote: (props: React.ComponentPropsWithoutRef<'blockquote'>) => <blockquote {...props} className="border-l-4 border-zinc-200 dark:border-zinc-700 pl-4 italic my-6 text-zinc-600 dark:text-zinc-400" />,
|
||||
code: (props: React.ComponentPropsWithoutRef<'code'>) => <code {...props} className="bg-zinc-100 dark:bg-zinc-800 text-pink-600 dark:text-pink-400 px-1 py-0.5 rounded text-sm font-mono" />,
|
||||
pre: (props: React.ComponentPropsWithoutRef<'pre'>) => <pre {...props} className="bg-zinc-900 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 text-sm font-mono" />,
|
||||
a: (props: React.ComponentPropsWithoutRef<'a'>) => <a {...props} className="text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all font-medium" />,
|
||||
h1: (props: React.ComponentPropsWithoutRef<'h1'>) => <h1 {...props} id={slugify(props.children)} className="mt-12 scroll-mt-24 font-sans text-[2rem] font-medium leading-tight tracking-[-0.05em] text-ink sm:text-[2.5rem]" />,
|
||||
h2: (props: React.ComponentPropsWithoutRef<'h2'>) => <h2 {...props} id={slugify(props.children)} className="mt-14 scroll-mt-24 font-sans text-[1.65rem] font-medium leading-tight tracking-[-0.05em] text-ink sm:text-[2rem]" />,
|
||||
h3: (props: React.ComponentPropsWithoutRef<'h3'>) => <h3 {...props} id={slugify(props.children)} className="mt-10 scroll-mt-24 font-sans text-[1.22rem] font-medium tracking-[-0.03em] text-ink sm:text-[1.42rem]" />,
|
||||
p: (props: React.ComponentPropsWithoutRef<'p'>) => <p {...props} className="mb-6 text-[1.02rem] leading-[1.85] text-ink-soft" />,
|
||||
ul: (props: React.ComponentPropsWithoutRef<'ul'>) => <ul {...props} className="mb-6 list-disc space-y-2 pl-5 text-[0.98rem] leading-8 text-ink-soft marker:text-accent" />,
|
||||
ol: (props: React.ComponentPropsWithoutRef<'ol'>) => <ol {...props} className="mb-6 list-decimal space-y-2 pl-5 text-[0.98rem] leading-8 text-ink-soft marker:text-accent" />,
|
||||
blockquote: (props: React.ComponentPropsWithoutRef<'blockquote'>) => <blockquote {...props} className="my-10 border-l border-line-strong pl-5 text-[1.05rem] italic leading-8 text-ink-soft" />,
|
||||
code: (props: React.ComponentPropsWithoutRef<'code'>) => <code {...props} className="rounded bg-paper-strong px-1.5 py-0.5 font-mono text-[0.9em] text-ink" />,
|
||||
pre: (props: React.ComponentPropsWithoutRef<'pre'>) => <pre {...props} className="my-8 overflow-x-auto rounded-[1rem] border border-line bg-[#161412] p-5 text-sm text-paper shadow-[0_16px_40px_rgba(17,16,15,0.12)]" />,
|
||||
a: (props: React.ComponentPropsWithoutRef<'a'>) => <a {...props} className="font-medium text-ink underline decoration-line-strong underline-offset-4 transition-colors hover:text-accent hover:decoration-accent" />,
|
||||
SideNote,
|
||||
Citation,
|
||||
Bibliography,
|
||||
@@ -82,7 +80,6 @@ export default async function BlogPost({ params }: Props) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Extract headings for TOC
|
||||
const headingLines = post.content.match(/^#{2,3}\s+(.+)$/gm) || [];
|
||||
const headings = headingLines.map((line) => {
|
||||
const level = line.match(/^#+/)?.[0].length || 2;
|
||||
@@ -90,47 +87,40 @@ export default async function BlogPost({ params }: Props) {
|
||||
const id = slugify(text);
|
||||
return { id, text, level };
|
||||
});
|
||||
const tags = Array.isArray(post.metadata.tags) ? post.metadata.tags : [];
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-6 py-24 animate-fade-in relative">
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-[250px_1fr] gap-12">
|
||||
{/* Left Column: TOC */}
|
||||
<div className="page-frame py-20 sm:py-24">
|
||||
<div className="mx-auto max-w-[78rem] xl:grid xl:grid-cols-[11rem_minmax(0,44rem)] xl:gap-x-10">
|
||||
<aside className="hidden xl:block">
|
||||
<div className="sticky top-32">
|
||||
<div className="sticky top-24">
|
||||
<TableOfContents headings={headings} />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Right Column: Content */}
|
||||
<article className="max-w-3xl mx-auto xl:mx-0 w-full">
|
||||
|
||||
{/* Mobile TOC */}
|
||||
<MobileTableOfContents headings={headings} />
|
||||
|
||||
<header className="mb-12 text-center sm:text-left">
|
||||
<div className="flex items-center gap-3 text-sm text-zinc-400 dark:text-zinc-500 mb-4 justify-center sm:justify-start">
|
||||
<article className="w-full">
|
||||
<header className="mb-8 space-y-4 border-b border-line pb-8">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-[0.72rem] font-mono uppercase tracking-[0.14em] text-muted-strong">
|
||||
<time dateTime={post.metadata.date}>
|
||||
{format(new Date(post.metadata.date), 'MMMM d, yyyy')}
|
||||
</time>
|
||||
<span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
|
||||
<div className="flex gap-2">
|
||||
{Array.isArray(post.metadata.tags) && post.metadata.tags.map((tag: string) => (
|
||||
<span key={tag} className="text-xs uppercase tracking-wider">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
{tags.map((tag: string) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 mb-6 leading-tight">
|
||||
<h1 className="max-w-[38rem] text-balance font-sans text-[clamp(2.7rem,5.8vw,4.4rem)] font-medium leading-[0.94] tracking-[-0.08em] text-ink">
|
||||
{post.metadata.title}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-zinc-500 dark:text-zinc-400 font-light leading-relaxed">
|
||||
<p className="max-w-[34rem] text-[1.04rem] leading-8 text-muted">
|
||||
{post.metadata.description}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="prose prose-zinc dark:prose-invert prose-lg max-w-none relative">
|
||||
<MobileTableOfContents headings={headings} />
|
||||
|
||||
<div className="essay-prose relative mt-8 max-w-none xl:max-w-[44rem]">
|
||||
<MDXRemote
|
||||
source={post.content}
|
||||
components={components}
|
||||
@@ -144,11 +134,11 @@ export default async function BlogPost({ params }: Props) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 pt-8 border-t border-zinc-200 dark:border-zinc-800 flex justify-between items-center text-sm text-zinc-500">
|
||||
<Link href="/blog" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
|
||||
<div className="mt-14 flex items-center justify-between border-t border-line pt-6 text-sm text-muted">
|
||||
<Link href="/blog" className="transition-colors hover:text-ink">
|
||||
← Back to all posts
|
||||
</Link>
|
||||
<a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
|
||||
<a href="#" className="transition-colors hover:text-ink">
|
||||
Scroll to top ↑
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user