HALF WORK!

1 files changed, 68 insertions, 0 deletions

diff --git a/www-2/src/components/ArticlePreview.astro b/www-2/src/components/ArticlePreview.astro
new file mode 100644
index 0000000..3301ad2
--- /dev/null
+++ b/www-2/src/components/ArticlePreview.astro
@@ -0,0 +1,68 @@
+---
+interface Props {
+    title: string;
+    date: string;
+    url: string;
+    content: string;
+    headerElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
+}
+
+const { title, date, url, content, 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>
+    <p>... <a class="mono-link" href="{{ .link }}">Read more</a></p>
+</section>
+
+<style>
+    .article-preview {
+        font-size: 0.95em;
+        padding-inline: 0.5em;
+        padding-block: 0.5em;
+
+        & > p {
+            font-size: 0.9em;
+            line-height: 1.4;
+            margin-inline-start: 0.3em;
+            margin-block: 0;
+        }
+
+        & > .title {
+            margin-block-start: 0;
+            margin-block-end: 0.3em;
+        }
+
+        & > .date {
+            font-size: small;
+            margin-top: 0.25em;
+            float: right;
+            color: hsl(0, 0%, 25%);
+        }
+
+        & > .content {
+            overflow: hidden;
+            height: 3lh;
+        }
+    }
+
+    html[data-theme="dark"] {
+        & .article-preview {
+            background-color: hsl(0, 0%, 3%);
+
+            & > .date {
+                color: hsl(0, 0%, 75%);
+            }
+        }
+    }
+
+    hr.article-preview-hr {
+        border: none;
+        border-top: 1.5px dashed currentColor;
+    }
+</style>