PreStyling Layouts & Components

src/components/post/ArticleCard/ArticleCardItem.astro

@@ -0,0 +1,31 @@
+---
+import ContentImage from '@/components/media/ContentImage.astro'
+import { toMilitaryDTG } from '@/lib/content/dates'
+import type { Article } from '@/lib/site/types'
+
+type Props = {
+  article: Article
+}
+
+const { article } = Astro.props
+
+const { cover, excerpt } = article.summary
+const date = article.published
+---
+
+<article class="card">
+  <a class="link" href={article.path}>
+    {cover.image && (
+      <div class="cover">
+        <ContentImage src={cover.image} alt={cover.alt} fit />
+      </div>
+    )}
+    <h3 class="title">{article.title}</h3>
+  </a>
+  {excerpt && <p class="excerpt">{excerpt}</p>}
+  {date && (
+    <time class="date" datetime={date.toISOString()}>
+      {toMilitaryDTG(date)}
+    </time>
+  )}
+</article>