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

Tweak card images, dark mode text, social links, and add right sidebar

Browse Source
This commit is contained in:
gbanyan
2025-11-17 17:19:47 +08:00
parent 78b28a5b7b
commit b89c01c966
9 changed files with 118 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/hero.tsx
View File

@@ -14,10 +14,15 @@ export function Hero() {
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
{name}
</h1>
<p className="mt-1 max-w-2xl text-sm text-slate-600 dark:text-slate-300">
<p className="mt-1 max-w-2xl text-sm text-slate-700 dark:text-slate-100">
{tagline}
</p>
{(social.github || social.twitter || social.linkedin || social.email) && (
{(social.github ||
social.twitter ||
social.linkedin ||
social.email ||
social.mastodon ||
social.gitea) && (
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-500">
{social.github && (
<a
@@ -39,6 +44,26 @@ export function Hero() {
Twitter
</a>
)}
{social.mastodon && (
<a
href={social.mastodon}
target="_blank"
rel="noopener noreferrer"
className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
>
Mastodon
</a>
)}
{social.gitea && (
<a
href={social.gitea}
target="_blank"
rel="noopener noreferrer"
className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
>
Gitea
</a>
)}
{social.linkedin && (
<a
href={social.linkedin}
@@ -64,4 +89,3 @@ export function Hero() {
</section>
);
}

10
components/layout-shell.tsx
View File

@@ -1,11 +1,17 @@
import { SiteHeader } from './site-header';
import { SiteFooter } from './site-footer';
import { RightSidebar } from './right-sidebar';
export function LayoutShell({ children }: { children: React.ReactNode }) {
return (
<div className="min-h-screen flex flex-col">
<div className="flex min-h-screen flex-col">
<SiteHeader />
<main className="flex-1 container mx-auto px-4 py-6">{children}</main>
<main className="container mx-auto flex-1 px-4 py-6">
<div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
<div>{children}</div>
<RightSidebar />
</div>
</main>
<SiteFooter />
</div>
);

17
components/post-card.tsx
View File

@@ -15,12 +15,14 @@ export function PostCard({ post }: PostCardProps) {
return (
<article className="group overflow-hidden rounded-xl border bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800 dark:bg-slate-900">
{cover && (
// eslint-disable-next-line @next/next/no-img-element
<img
src={cover}
alt={post.title}
className="h-44 w-full object-cover"
/>
<div className="w-full bg-slate-100 dark:bg-slate-800">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={cover}
alt={post.title}
className="mx-auto max-h-60 w-full object-contain"
/>
</div>
)}
<div className="space-y-2 px-4 py-4">
<h2 className="text-lg font-semibold leading-snug">
@@ -53,7 +55,7 @@ export function PostCard({ post }: PostCardProps) {
)}
</div>
{post.description && (
<p className="line-clamp-3 text-sm text-slate-600 dark:text-slate-300">
<p className="line-clamp-3 text-sm text-slate-700 dark:text-slate-100">
{post.description}
</p>
)}
@@ -61,4 +63,3 @@ export function PostCard({ post }: PostCardProps) {
</article>
);
}

3
components/post-toc.tsx
View File

@@ -28,7 +28,7 @@ export function PostToc() {
if (items.length === 0) return null;
return (
<nav className="sticky top-20 text-xs text-slate-500">
<nav className="sticky top-20 text-xs text-slate-500 dark:text-slate-400">
<div className="mb-2 font-semibold text-slate-700 dark:text-slate-200">
目錄
</div>
@@ -47,4 +47,3 @@ export function PostToc() {
</nav>
);
}

39
components/right-sidebar.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Link from 'next/link';
import { siteConfig } from '@/lib/config';
import { getAllPostsSorted } from '@/lib/posts';
export function RightSidebar() {
const latest = getAllPostsSorted().slice(0, 5);
return (
<aside className="hidden flex-col gap-4 lg:flex">
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
關於本站
</h2>
<p className="mt-1 text-xs text-slate-600 dark:text-slate-200">
{siteConfig.description}
</p>
</section>
<section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
最新文章
</h2>
<ul className="mt-2 space-y-1">
{latest.map((post) => (
<li key={post._id}>
<Link
href={post.url}
className="line-clamp-2 text-xs text-slate-700 hover:text-blue-600 dark:text-slate-100 dark:hover:text-blue-400"
>
{post.title}
</Link>
</li>
))}
</ul>
</section>
</aside>
);
}

29
components/site-footer.tsx
View File

@@ -4,11 +4,16 @@ export function SiteFooter() {
const { social } = siteConfig;
return (
<footer className="border-t py-4 text-center text-sm text-gray-500">
<footer className="border-t py-4 text-center text-sm text-gray-500 dark:text-slate-400">
<div>
© {new Date().getFullYear()} {siteConfig.author}
</div>
{(social.github || social.twitter || social.linkedin || social.email) && (
{(social.github ||
social.twitter ||
social.linkedin ||
social.email ||
social.mastodon ||
social.gitea) && (
<div className="mt-1 space-x-3">
{social.github && (
<a
@@ -40,6 +45,26 @@ export function SiteFooter() {
LinkedIn
</a>
)}
{social.mastodon && (
<a
href={social.mastodon}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
>
Mastodon
</a>
)}
{social.gitea && (
<a
href={social.gitea}
target="_blank"
rel="noopener noreferrer"
className="hover:underline"
>
Gitea
</a>
)}
{social.email && (
<a
href={`mailto:${social.email}`}

4
components/site-header.tsx
View File

@@ -4,8 +4,8 @@ import { siteConfig } from '@/lib/config';
export function SiteHeader() {
return (
<header className="border-b bg-white/80 dark:bg-gray-950/80 backdrop-blur">
<div className="container mx-auto flex items-center justify-between px-4 py-3">
<header className="border-b bg-white/80 backdrop-blur dark:bg-gray-950/80">
<div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
<Link href="/" className="font-semibold">
{siteConfig.title}
</Link>