marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wire header, footer, and scroll effects into layout

Browse Source
This commit is contained in:
Krishna Ayyalasomayajula
2026-06-01 20:31:34 -05:00
parent 715c85bb23
commit 8d17fe4307
3 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/layout.tsx
View File

@@ -4,7 +4,9 @@ import { ThemeProvider } from '@wrksz/themes/next'
import { Providers } from './providers' import { Providers } from './providers'
import './globals.css' import './globals.css'
import 'katex/dist/katex.min.css' import 'katex/dist/katex.min.css'
import { useMDXComponents } from '@/mdx-components' import { Header } from '@/components/layout/Header'
import { Footer } from '@/components/layout/Footer'
import { ScrollProgress } from '@/components/ui/ScrollProgress'
const inter = Inter({ const inter = Inter({
subsets: ['latin'], subsets: ['latin'],
@@ -40,7 +42,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<Providers>{children}</Providers> <ScrollProgress />
<Header />
{children}
<Footer />
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

46
app/posts/[slug]/page.tsx
View File

@@ -2,6 +2,8 @@ import { notFound } from 'next/navigation'
import { MDXRemote } from 'next-mdx-remote/rsc' import { MDXRemote } from 'next-mdx-remote/rsc'
import { getPosts, getPost, getReadingTime } from '@/lib/posts' import { getPosts, getPost, getReadingTime } from '@/lib/posts'
import { TableOfContents } from '@/components/blog/TableOfContents' import { TableOfContents } from '@/components/blog/TableOfContents'
import { ScrollToTop } from '@/components/ui/ScrollToTop'
import { ReadingProgress } from '@/components/ui/ReadingProgress'
export async function generateStaticParams() { export async function generateStaticParams() {
const posts = await getPosts() const posts = await getPosts()
@@ -25,26 +27,30 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
if (!post) notFound() if (!post) notFound()
return ( return (
<div className="max-w-4xl mx-auto px-6 py-16"> <>
<div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8"> <ScrollToTop />
<article> <ReadingProgress />
<header className="mb-12"> <div className="max-w-4xl mx-auto px-6 py-16">
<time className="font-mono text-sm text-ink-soft">{post.date}</time> <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
<h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink"> <article>
{post.title} <header className="mb-12">
</h1> <time className="font-mono text-sm text-ink-soft">{post.date}</time>
<p className="font-mono text-xs text-ink-soft"> <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
{getReadingTime(post.title)} min read {post.title}
</p> </h1>
</header> <p className="font-mono text-xs text-ink-soft">
<div className="prose prose-lg max-w-none"> {getReadingTime(post.title)} min read
<MDXRemote source={post.source} /> </p>
</div> </header>
</article> <div className="prose prose-lg max-w-none">
<aside className="hidden lg:block"> <MDXRemote source={post.source} />
<TableOfContents /> </div>
</aside> </article>
<aside className="hidden lg:block">
<TableOfContents />
</aside>
</div>
</div> </div>
</div> </>
) )
} }

2
components/blog/PostCard.tsx
View File

@@ -1,3 +1,5 @@
"use client";
import Link from "next/link"; import Link from "next/link";
import { motion } from "motion/react"; import { motion } from "motion/react";
import type { PostMeta } from "@/lib/posts"; import type { PostMeta } from "@/lib/posts";