feat: "new articles" use new blog card component

components/blog/article-list-card.tsx

@@ -7,9 +7,11 @@ import { useRouter } from "next/navigation"
 export const ArticleListCard = ({
   lang,
   article,
+  lineClamp = false,
 }: {
   lang: string
   article: Article
+  lineClamp?: boolean
 }) => {
   const url = `/${lang}/blog/${article.id}`
 
@@ -21,6 +23,11 @@ export const ArticleListCard = ({
 
   const router = useRouter()
 
+  const tldr = lineClamp
+    ? (article.tldr || "").replace(/\n/g, " ").substring(0, 120) +
+      (article.tldr && article.tldr.length > 120 ? "..." : "")
+    : article.tldr || ""
+
   return (
     <div className="flex h-full">
       <div
@@ -88,7 +95,7 @@ export const ArticleListCard = ({
                     img: ({ src, alt }) => null,
                   }}
                 >
-                  {article.tldr || ""}
+                  {tldr}
                 </Markdown>
               </div>
             </div>

components/blog/blog-content.tsx

@@ -5,6 +5,7 @@ import { Markdown } from "../ui/markdown"
 import { BlogArticleCard } from "./blog-article-card"
 import { BlogArticleRelatedProjects } from "./blog-article-related-projects"
 import { LocaleTypes } from "@/app/i18n/settings"
+import { ArticleListCard } from "./article-list-card"
 
 interface BlogContentProps {
   post: Article
@@ -71,42 +72,17 @@ export function BlogContent({ post, lang }: BlogContentProps) {
                 View all
               </Link>
             </div>
-            <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-              {moreArticles.map(
-                ({
-                  id,
-                  title,
-                  image,
-                  tldr = "",
-                  date,
-                  content,
-                  authors,
-                }: Article) => {
-                  const url = `/blog/${id}`
-                  return (
-                    <div
-                      key={id}
-                      className="flex flex-col min-h-[400px] w-full"
-                    >
-                      <Link
-                        href={url}
-                        className="flex h-full w-full group hover:opacity-90 transition-opacity duration-300 rounded-xl overflow-hidden bg-white shadow-sm border border-slate-900/10"
-                        style={{ display: "flex", flexDirection: "column" }}
-                      >
-                        <BlogArticleCard
-                          id={id}
-                          image={image}
-                          title={title}
-                          date={date}
-                          content={content}
-                          authors={authors}
-                          tldr={tldr}
-                        />
-                      </Link>
-                    </div>
-                  )
-                }
-              )}
+            <div className="flex flex-col gap-10">
+              {moreArticles.map((article: Article) => {
+                return (
+                  <ArticleListCard
+                    key={article.id}
+                    lang={lang}
+                    article={article}
+                    lineClamp
+                  />
+                )
+              })}
             </div>
           </div>
         )}