feat: ai

src/components/ArticleCard.astro

@@ -0,0 +1,181 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { formatDate } from '@/utils/date';
+import { getReadingTime } from '@/utils/reading-time';
+
+interface Props {
+  post: CollectionEntry<'posts'>;
+}
+
+const { post } = Astro.props;
+const readingTime = getReadingTime(post.body);
+---
+
+<article class="article-card">
+  <a href={`/posts/${post.slug}`} class="card-link">
+    <div class="title-row">
+      <h2 class="title">{post.data.title}</h2>
+      <span class="category">{post.data.category}</span>
+    </div>
+    <p class="description">{post.data.description}</p>
+    <div class="meta">
+      <time datetime={post.data.pubDate.toISOString()}>
+        {formatDate(post.data.pubDate)}
+      </time>
+      <span class="separator">·</span>
+      <span>{readingTime}</span>
+    </div>
+    {post.data.tags.length > 0 && (
+      <div class="tags">
+        {post.data.tags.map((tag, index) => (
+          <span class="tag">
+            #{tag}{index < post.data.tags.length - 1 ? ', ' : ''}
+          </span>
+        ))}
+      </div>
+    )}
+  </a>
+</article>
+
+<style>
+  .article-card {
+    padding: 1.75rem 2rem;
+    background: transparent;
+    border-radius: 0;
+    transition: all var(--transition-base);
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .article-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--accent-color);
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: transform var(--transition-base);
+  }
+
+  .article-card:hover {
+    transform: translateY(-2px);
+    background: var(--bg-secondary);
+  }
+
+  .article-card:hover::before {
+    transform: scaleY(1);
+  }
+
+  .card-link {
+    display: block;
+    color: inherit;
+  }
+
+  .title-row {
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .title {
+    font-size: 1.625rem;
+    color: var(--text-heading);
+    line-height: 1.3;
+    font-weight: 700;
+    transition: color var(--transition-base);
+    flex: 1;
+  }
+
+  .article-card:hover .title {
+    color: var(--accent-color);
+  }
+
+  .category {
+    color: var(--accent-secondary);
+    font-size: 0.875rem;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .description {
+    color: var(--text-secondary);
+    line-height: 1.7;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+  }
+
+  .meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-tertiary);
+    font-size: 0.875rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .separator {
+    opacity: 0.5;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+  }
+
+  .tag {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    font-weight: 400;
+    transition: color var(--transition-fast);
+  }
+
+  .article-card:hover .tag {
+    color: var(--accent-secondary);
+  }
+
+  @media (max-width: 768px) {
+    .article-card {
+      padding: 1.5rem 1rem;
+    }
+
+    .title {
+      font-size: 1.375rem;
+    }
+
+    .title-row {
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: flex-start;
+    }
+
+    .description {
+      font-size: 0.9375rem;
+    }
+
+    .meta {
+      font-size: 0.8125rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .article-card {
+      padding: 1.25rem 1rem;
+    }
+
+    .title {
+      font-size: 1.25rem;
+    }
+
+    .description {
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+  }
+</style>