LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-08 12:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: better blog preview (#3489)

Browse Source
This commit is contained in:
Dagmawi Babi
2025-07-20 03:39:17 +03:00
committed by GitHub
parent 84a8af814e
commit adee10d522
1 changed files with 44 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/app/blog/_components/blog-list.tsx
View File

@@ -6,6 +6,7 @@ import { GitHubIcon, BookIcon, XIcon } from "./icons";
import { Glow } from "./default-changelog";
import { StarField } from "./stat-field";
import { DiscordLogoIcon } from "@radix-ui/react-icons";
import Image from "next/image";
export async function BlogPage() {
const posts = blogs.getPages();
@@ -54,47 +55,58 @@ export async function BlogPage() {
</p>
</div>
</div>
<div className="py-6 lg:py-10 px-6">
<div className="py-6 lg:py-10 px-3">
<div className="flex flex-col gap-2">
{posts.map((post) => (
<article
key={post.slugs.join("/")}
className="group relative flex flex-col space-y-2"
>
<div className="flex gap-2">
{/* {post.data?.image && (
<div className="group/blog flex flex-col gap-3 hover:bg-neutral-200/50 dark:hover:bg-neutral-900/50 transition-colors border dark:border-white/10 border-black/10 p-4">
<article
key={post.slugs.join("/")}
className="group relative flex flex-col space-y-2 flex-3/4 py-1"
>
<div className="flex gap-2">
<div className="flex flex-col gap-2 border-b border-dashed pb-2">
<p className="text-xs opacity-50">
{formatBlogDate(post.data.date)}
</p>
<h2 className="text-2xl font-bold">{post.data?.title}</h2>
</div>
</div>
{post.data?.image && (
<Image
src={post.data.image}
alt={post.data.title}
width={402}
height={252}
className="rounded-md border bg-muted w-4/12 transition-colors"
className="rounded-md w-full bg-muted transition-colors"
/>
)} */}
<div className="flex flex-col gap-2 border-b border-dashed pb-2">
<p className="text-xs opacity-50">
{formatBlogDate(post.data.date)}
</p>
<h2 className="text-2xl font-bold">{post.data?.title}</h2>
<p className="text-muted-foreground">
{post.data?.description.substring(0, 100)}...
</p>
)}
<div className="flex gap-2">
<div className="flex flex-col gap-2 border-b border-dashed pb-2">
<p className="text-muted-foreground">
{post.data?.description.substring(0, 100)}...
</p>
</div>
</div>
</div>
<p className="text-xs opacity-50">
{post.data.structuredData.contents[0].content.substring(0, 250)}
...
</p>
<Link href={`/blog/${post.slugs.join("/")}`}>
<p className="text-xs underline">Read More</p>
</Link>
<Link
href={`/blog/${post.slugs.join("/")}`}
className="absolute inset-0"
>
<span className="sr-only">View Article</span>
</Link>
</article>
<p className="text-xs opacity-50">
{post.data.structuredData.contents[0].content.substring(
0,
250,
)}
...
</p>
<Link href={`/blog/${post.slugs.join("/")}`}>
<p className="text-xs group-hover/blog:underline underline-offset-4 transition-all">
Read More
</p>
</Link>
<Link
href={`/blog/${post.slugs.join("/")}`}
className="absolute inset-0"
>
<span className="sr-only">View Article</span>
</Link>
</article>
</div>
))}
</div>
</div>