HALF WORK!astro

2 files changed, 50 insertions, 12 deletions

diff --git a/www-2/src/components/ArticlePreview.astro b/www-2/src/components/ArticlePreview.astro
index 3301ad2..bce8b50 100644
--- a/www-2/src/components/ArticlePreview.astro
+++ b/www-2/src/components/ArticlePreview.astro
@@ -1,22 +1,25 @@
 ---
-interface Props {
-    title: string;
-    date: string;
-    url: string;
-    content: string;
+import type { CollectionEntry } from "astro:content";
+
+export type Props = {
+    article: CollectionEntry<"articles">;
     headerElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
-}
+};
 
-const { title, date, url, content, headerElement = "h2" } = Astro.props;
+const {
+    article: {
+        id,
+        data: { title, date },
+    },
+    headerElement = "h2",
+} = Astro.props;
 const H = headerElement;
 ---
 
 <section class="article-preview">
-    <span class="date">{date}</span>
-    <H class="title"><a href={url}>{title}</a></H>
-    <p class="content">
-        {content}
-    </p>
+    <span class="date">{date.toLocaleString()}</span>
+    <H class="title"><a href={id}>{title}</a></H>
+    <p class="content">aaa</p>
     <p>... <a class="mono-link" href="{{ .link }}">Read more</a></p>
 </section>
 
diff --git a/www-2/src/components/ArticlePreviewList.astro b/www-2/src/components/ArticlePreviewList.astro
new file mode 100644
index 0000000..abe54f2
--- /dev/null
+++ b/www-2/src/components/ArticlePreviewList.astro
@@ -0,0 +1,35 @@
+---
+import ArticlePreview, {
+    type Props as ArticlePreviewProps,
+} from "./ArticlePreview.astro";
+
+type Props = {
+    articles: ArticlePreviewProps["article"][];
+} & Omit<ArticlePreviewProps, "article">;
+
+export type { Props };
+
+const { articles, ...otherProps } = Astro.props;
+---
+
+{
+    articles.length > 0 && (
+        <ArticlePreview article={articles[0]} {...otherProps} />
+    )
+}
+
+{
+    articles.slice(1).map((a) => (
+        <>
+            <hr class="article-preview-hr" />
+            <ArticlePreview article={a} {...otherProps} />
+        </>
+    ))
+}
+
+<style>
+    hr.article-preview-hr {
+        border: none;
+        border-top: 1.5px dashed currentColor;
+    }
+</style>