From eab80bd17a5f973f35dd2f18115605da6803b26f Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Wed, 19 Nov 2025 01:36:54 +0800
Subject: [PATCH] Render timeline ticks per card

---
 components/post-list-item.tsx   | 72 ++++++++++++++++-----------------
 components/timeline-wrapper.tsx | 19 +++++----
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index 8950d30..8051a43 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -18,44 +18,42 @@ export function PostListItem({ post }: Props) {
     post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
 
   return (
-    <div className="timeline-entry group relative pl-6" role="listitem">
-      <article className="motion-card group relative flex gap-4 rounded-lg border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/80">
-        <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
-        {cover && (
-          <div className="flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={cover}
-              alt={post.title}
-              className="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
-            />
-          </div>
-        )}
-        <div className="flex-1 space-y-1.5">
-          <div className="flex flex-wrap gap-3 text-xs">
-            {post.published_at && (
-              <MetaItem icon={faCalendarDays}>
-                {new Date(post.published_at).toLocaleDateString(
-                  siteConfig.defaultLocale
-                )}
-              </MetaItem>
-            )}
-            {post.tags && post.tags.length > 0 && (
-              <MetaItem icon={faTags} tone="muted">
-                {post.tags.slice(0, 3).join(', ')}
-              </MetaItem>
-            )}
-          </div>
-          <h2 className="text-base font-semibold leading-snug text-slate-900 hover:text-accent sm:text-lg dark:text-slate-50 dark:hover:text-accent">
-            <Link href={post.url}>{post.title}</Link>
-          </h2>
-          {excerpt && (
-            <p className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
-              {excerpt}
-            </p>
+    <article className="motion-card group relative flex gap-4 rounded-lg border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/80">
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
+      {cover && (
+        <div className="flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={cover}
+            alt={post.title}
+            className="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
+          />
+        </div>
+      )}
+      <div className="flex-1 space-y-1.5">
+        <div className="flex flex-wrap gap-3 text-xs">
+          {post.published_at && (
+            <MetaItem icon={faCalendarDays}>
+              {new Date(post.published_at).toLocaleDateString(
+                siteConfig.defaultLocale
+              )}
+            </MetaItem>
+          )}
+          {post.tags && post.tags.length > 0 && (
+            <MetaItem icon={faTags} tone="muted">
+              {post.tags.slice(0, 3).join(', ')}
+            </MetaItem>
           )}
         </div>
-      </article>
-    </div>
+        <h2 className="text-base font-semibold leading-snug text-slate-900 hover:text-accent sm:text-lg dark:text-slate-50 dark:hover:text-accent">
+          <Link href={post.url}>{post.title}</Link>
+        </h2>
+        {excerpt && (
+          <p className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
+            {excerpt}
+          </p>
+        )}
+      </div>
+    </article>
   );
 }
diff --git a/components/timeline-wrapper.tsx b/components/timeline-wrapper.tsx
index 980a42a..8b9eacf 100644
--- a/components/timeline-wrapper.tsx
+++ b/components/timeline-wrapper.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Children, ReactNode } from 'react';
 import clsx from 'clsx';
 
 interface TimelineWrapperProps {
@@ -7,21 +7,26 @@ interface TimelineWrapperProps {
 }
 
 export function TimelineWrapper({ children, className }: TimelineWrapperProps) {
+  const items = Children.toArray(children);
   return (
-    <div className={clsx('relative pl-8', className)}>
-      <span className="pointer-events-none absolute left-3 top-0 h-full w-[2px] bg-gradient-to-b from-blue-500 via-blue-200 to-slate-200 shadow-[0_0_8px_rgba(59,130,246,0.35)] dark:from-cyan-400 dark:via-cyan-300 dark:to-slate-700" aria-hidden="true" />
+    <div className={clsx('relative pl-10', className)}>
+      <span className="pointer-events-none absolute left-4 top-0 h-full w-[2px] bg-gradient-to-b from-blue-500 via-blue-200 to-slate-200 shadow-[0_0_8px_rgba(59,130,246,0.35)] dark:from-cyan-400 dark:via-cyan-300 dark:to-slate-700" aria-hidden="true" />
       <span
-        className="pointer-events-none absolute top-0 h-full w-[4px] opacity-80"
+        className="pointer-events-none absolute left-[calc(1rem-2px)] top-0 h-full w-[4px] opacity-80"
         style={{
-          left: 'calc(0.75rem - 2px)',
           backgroundImage:
             'repeating-linear-gradient(to bottom, rgba(96,165,250,0.9), rgba(96,165,250,0.9) 2px, transparent 2px, transparent 150px)'
         }}
         aria-hidden="true"
       />
-      <span className="pointer-events-none absolute bottom-0 h-3 w-3 translate-y-1/2 rotate-45 border-b-2 border-r-2 border-blue-400 dark:border-cyan-300" style={{ left: '0.75rem' }} aria-hidden="true" />
+      <span className="pointer-events-none absolute bottom-0 left-4 h-3 w-3 translate-y-1/2 rotate-45 border-b-2 border-r-2 border-blue-400 dark:border-cyan-300" aria-hidden="true" />
       <div className="space-y-4">
-        {children}
+        {items.map((child, index) => (
+          <div key={index} className="relative pl-6">
+            <span className="pointer-events-none absolute left-0 top-1/2 h-[2px] w-6 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-blue-400 to-transparent dark:from-cyan-300" aria-hidden="true" />
+            {child}
+          </div>
+        ))}
       </div>
     </div>
   );