74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { useCallback } from "react"
|
|
import {
|
|
Alert,
|
|
AlertDescription,
|
|
AlertTitle,
|
|
} from "@/components/ui/alert";
|
|
import { AlertCircle } from "lucide-react";
|
|
import { base62 } from "@/lib/utils";
|
|
import { BlogAPI } from "@/lib/api/server";
|
|
import { handleAPIError } from "@/lib/api/common";
|
|
|
|
const formatNumber = (num: number): string => {
|
|
if (num >= 1_000_000) {
|
|
return (num / 1_000_000).toFixed(1) + 'M';
|
|
}
|
|
if (num >= 1_000) {
|
|
return (num / 1_000).toFixed(1) + 'K';
|
|
}
|
|
return num.toString();
|
|
};
|
|
|
|
const getBlogDetailUrl = (id: string): string => {
|
|
const cleanId = id.replace(/-/g, '');
|
|
const encoded = base62.encode(Buffer.from(cleanId, 'hex'));
|
|
return `/blog/${encoded}`;
|
|
};
|
|
|
|
export default async function Blog() {
|
|
let errorMsg = '';
|
|
const blogs = await BlogAPI.list().catch(e => {
|
|
handleAPIError(e, ({ message }) => { errorMsg = message });
|
|
return null;
|
|
});
|
|
|
|
return (
|
|
<section className="max-w-120 w-auto mx-auto my-10 flex flex-col gap-8">
|
|
{
|
|
errorMsg && (
|
|
<Alert variant="destructive" className="w-full">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertTitle>出错啦</AlertTitle>
|
|
<AlertDescription>
|
|
{errorMsg}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)
|
|
}
|
|
{
|
|
blogs && blogs.map((blog) => (
|
|
<article className="w-full px-5 cursor-default" key={blog.id}>
|
|
<h2 className="text-2xl font-medium">
|
|
<a
|
|
className="hover:underline focus:outline-none focus:ring-2 focus:ring-zinc-400 rounded"
|
|
href={getBlogDetailUrl(blog.id)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{blog.title}
|
|
</a>
|
|
</h2>
|
|
<p className="text-sm font-medium text-zinc-600">{blog.description}</p>
|
|
<footer className="mt-3 text-sm text-zinc-500 flex items-center gap-2">
|
|
<time dateTime={blog.createdAt}>
|
|
{new Date(blog.createdAt).toLocaleString('zh-CN')}
|
|
</time>
|
|
<span>·</span>
|
|
<span>{formatNumber(blog.viewCount)} 次访问</span>
|
|
</footer>
|
|
</article>
|
|
))
|
|
}
|
|
</section>
|
|
)
|
|
} |