This commit is contained in:
z.ai committed
1 parent
c1541b80df
commit
b4c7908029
97 files changed
+12403
-154
No files matched your search
@@ -0,0 +1,79 @@
|
||||
import { Link } from "@/i18n/navigation";
|
||||
import { getLocale, getTranslations } from "next-intl/server";
|
||||
import { CalendarDays, Clock } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { formatDate, toDateTimeAttribute } from "@/lib/utils";
|
||||
import type { PostMeta } from "@/lib/posts/types";
|
||||
|
||||
/**
|
||||
* 文章卡片（服务端组件）。
|
||||
*
|
||||
* DESIGN.md 的 card-base：白底 + 1px hairline 描边 + rounded-lg，
|
||||
* 内部留白 {spacing.xl}。展示标题、日期、阅读时长、摘要与标签。
|
||||
*/
|
||||
export interface PostCardProps {
|
||||
post: PostMeta;
|
||||
/** 是否展示摘要；紧凑列表可关闭 */
|
||||
showSummary?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export async function PostCard({
|
||||
post,
|
||||
showSummary = true,
|
||||
className,
|
||||
}: PostCardProps) {
|
||||
const t = await getTranslations("Post");
|
||||
const locale = await getLocale();
|
||||
|
||||
return (
|
||||
<article className={className}>
|
||||
<Link
|
||||
href={`/posts/${post.slug}`}
|
||||
className="group flex h-full flex-col gap-sm rounded-lg border border-hairline bg-canvas p-xl transition-colors duration-150 hover:border-hairline-soft hover:bg-surface-soft active:bg-surface"
|
||||
>
|
||||
{/* 元信息：日期 + 阅读时长 */}
|
||||
<div className="flex flex-wrap items-center gap-sm text-caption text-steel">
|
||||
<span className="inline-flex items-center gap-[6px]">
|
||||
<CalendarDays className="size-3.5" aria-hidden="true" />
|
||||
<time dateTime={toDateTimeAttribute(post.date)}>
|
||||
{formatDate(post.date, locale)}
|
||||
</time>
|
||||
</span>
|
||||
|
||||
<span aria-hidden="true" className="text-muted">
|
||||
·
|
||||
</span>
|
||||
|
||||
<span className="inline-flex items-center gap-[6px]">
|
||||
<Clock className="size-3.5" aria-hidden="true" />
|
||||
{t("readingTime", { minutes: post.readingMinutes })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 标题 */}
|
||||
<h3 className="text-heading-4 font-semibold text-ink transition-colors duration-150 group-hover:text-brand-green-deep">
|
||||
{post.title}
|
||||
</h3>
|
||||
|
||||
{/* 摘要 */}
|
||||
{showSummary ? (
|
||||
<p className="flex-1 text-body-sm text-steel text-balance-pretty">
|
||||
{post.summary}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* 标签 */}
|
||||
{post.tags && post.tags.length > 0 ? (
|
||||
<ul className="mt-xs flex flex-wrap gap-xs">
|
||||
{post.tags.map((tag) => (
|
||||
<li key={tag}>
|
||||
<Badge variant="tag">{tag}</Badge>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</Link>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* 文章骨架屏组件。
|
||||
*
|
||||
* ## 为什么本项目没有使用路由级 `loading.tsx`
|
||||
*
|
||||
* 路由级 `loading.tsx` 会创建 Suspense 边界，Next.js 会**立即以 200 状态**
|
||||
* 流式输出骨架屏；之后页面内的 `notFound()` 只能替换内容，无法再改写已经
|
||||
* 发出的状态码。
|
||||
*
|
||||
* 实测结果（Next.js 16.3.8）：
|
||||
* - 存在 `app/[locale]/loading.tsx` 时，`/zh/posts/<草稿>` 与
|
||||
* `/zh/posts/<不存在>` 均返回 **200**（内容却是 404 页面）；
|
||||
* - 移除后，二者正确返回 **404**。
|
||||
*
|
||||
* 对博客而言，让不存在的 URL 返回 200 会被搜索引擎当作有效页面收录，
|
||||
* 属于必须避免的 SEO 缺陷。因此这里**牺牲路由级骨架屏**，
|
||||
* 保证状态码正确；骨架屏仅作为组件按需使用（例如包裹已知存在的
|
||||
* 慢速数据区块）。
|
||||
*/
|
||||
export function PostListSkeleton({ count = 6 }: { count?: number }) {
|
||||
return (
|
||||
<div
|
||||
className="grid grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-3"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{Array.from({ length: count }).map((_, index) => (
|
||||
<div
|
||||
// 骨架屏为静态占位，使用索引作 key 不会引起状态错位
|
||||
key={index}
|
||||
className={cn(
|
||||
"flex flex-col gap-sm rounded-lg border border-hairline bg-canvas p-xl",
|
||||
)}
|
||||
>
|
||||
{/* 日期 + 阅读时长 */}
|
||||
<div className="h-4 w-40 animate-pulse rounded-sm bg-hairline-soft" />
|
||||
{/* 标题 */}
|
||||
<div className="h-6 w-full animate-pulse rounded-md bg-hairline" />
|
||||
{/* 摘要两行 */}
|
||||
<div className="h-4 w-full animate-pulse rounded-sm bg-hairline-soft" />
|
||||
<div className="h-4 w-3/4 animate-pulse rounded-sm bg-hairline-soft" />
|
||||
{/* 标签 */}
|
||||
<div className="mt-xs flex gap-xs">
|
||||
<div className="h-5 w-14 animate-pulse rounded-sm bg-hairline-soft" />
|
||||
<div className="h-5 w-16 animate-pulse rounded-sm bg-hairline-soft" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 文章详情页正文骨架 */
|
||||
export function PostBodySkeleton() {
|
||||
return (
|
||||
<div className="mt-xl flex flex-col gap-md" aria-hidden="true">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-4 animate-pulse rounded-sm bg-hairline-soft"
|
||||
style={{ width: `${[100, 96, 88, 100, 92, 100, 84][index % 7]}%` }}
|
||||
/>
|
||||
))}
|
||||
<div className="mt-md h-40 w-full animate-pulse rounded-md bg-surface-code/20" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { TocItem } from "@/lib/toc";
|
||||
|
||||
/**
|
||||
* 文章目录（右侧栏）。
|
||||
*
|
||||
* 用 IntersectionObserver 做滚动高亮——比监听 scroll 事件性能更好，
|
||||
* 且不需要手动计算元素偏移。根边距设置为顶部 96px（避开粘性导航）
|
||||
* 到底部 -70%，让"当前阅读位置"落在视口上部三分之一处。
|
||||
*/
|
||||
export function TableOfContents({ items }: { items: TocItem[] }) {
|
||||
const t = useTranslations("Post");
|
||||
const [activeId, setActiveId] = useState<string>(items[0]?.id ?? "");
|
||||
|
||||
useEffect(() => {
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const headings = items
|
||||
.map((item) => document.getElementById(item.id))
|
||||
.filter((element): element is HTMLElement => element !== null);
|
||||
|
||||
if (headings.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
// 取当前可见且位置最靠上的标题作为激活项
|
||||
const visible = entries
|
||||
.filter((entry) => entry.isIntersecting)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
a.boundingClientRect.top - b.boundingClientRect.top,
|
||||
);
|
||||
|
||||
if (visible.length > 0) {
|
||||
setActiveId(visible[0].target.id);
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin: "-96px 0px -70% 0px",
|
||||
threshold: 0,
|
||||
},
|
||||
);
|
||||
|
||||
for (const heading of headings) {
|
||||
observer.observe(heading);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [items]);
|
||||
|
||||
if (items.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav aria-labelledby="toc-heading" className="flex flex-col gap-xs">
|
||||
<h2
|
||||
id="toc-heading"
|
||||
className="text-micro-uppercase font-semibold uppercase tracking-[0.5px] text-steel"
|
||||
>
|
||||
{t("tableOfContents")}
|
||||
</h2>
|
||||
|
||||
<ul className="flex flex-col border-l border-hairline">
|
||||
{items.map((item) => {
|
||||
const isActive = item.id === activeId;
|
||||
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
aria-current={isActive ? "location" : undefined}
|
||||
className={cn(
|
||||
"block border-l-2 py-xxs text-body-sm transition-colors duration-150",
|
||||
item.level === 3 ? "pl-lg" : "pl-sm",
|
||||
// 用 -ml-px 让边框与父级 border-l 重合
|
||||
"-ml-px",
|
||||
isActive
|
||||
? "border-brand-green font-medium text-ink"
|
||||
: "border-transparent text-steel hover:text-ink",
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user