LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-10 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 { Glow } from "./default-changelog";
import { StarField } from "./stat-field"; import { StarField } from "./stat-field";
import { DiscordLogoIcon } from "@radix-ui/react-icons"; import { DiscordLogoIcon } from "@radix-ui/react-icons";
import Image from "next/image";
export async function BlogPage() { export async function BlogPage() {
const posts = blogs.getPages(); const posts = blogs.getPages();
@@ -54,47 +55,58 @@ export async function BlogPage() {
</p> </p>
</div> </div>
</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"> <div className="flex flex-col gap-2">
{posts.map((post) => ( {posts.map((post) => (
<article <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">
key={post.slugs.join("/")} <article
className="group relative flex flex-col space-y-2" key={post.slugs.join("/")}
> className="group relative flex flex-col space-y-2 flex-3/4 py-1"
<div className="flex gap-2"> >
{/* {post.data?.image && ( <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 <Image
src={post.data.image} src={post.data.image}
alt={post.data.title} alt={post.data.title}
width={402} width={402}
height={252} 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"> <div className="flex gap-2">
<p className="text-xs opacity-50"> <div className="flex flex-col gap-2 border-b border-dashed pb-2">
{formatBlogDate(post.data.date)} <p className="text-muted-foreground">
</p> {post.data?.description.substring(0, 100)}...
<h2 className="text-2xl font-bold">{post.data?.title}</h2> </p>
<p className="text-muted-foreground"> </div>
{post.data?.description.substring(0, 100)}...
</p>
</div> </div>
</div> <p className="text-xs opacity-50">
<p className="text-xs opacity-50"> {post.data.structuredData.contents[0].content.substring(
{post.data.structuredData.contents[0].content.substring(0, 250)} 0,
... 250,
</p> )}
<Link href={`/blog/${post.slugs.join("/")}`}> ...
<p className="text-xs underline">Read More</p> </p>
</Link> <Link href={`/blog/${post.slugs.join("/")}`}>
<Link <p className="text-xs group-hover/blog:underline underline-offset-4 transition-all">
href={`/blog/${post.slugs.join("/")}`} Read More
className="absolute inset-0" </p>
> </Link>
<span className="sr-only">View Article</span> <Link
</Link> href={`/blog/${post.slugs.join("/")}`}
</article> className="absolute inset-0"
>
<span className="sr-only">View Article</span>
</Link>
</article>
</div>
))} ))}
</div> </div>
</div> </div>