From 78e3e234877cb10ca1088df31e831b36fa4a12c0 Mon Sep 17 00:00:00 2001
From: Yuqian Yang <crupest@crupest.life>
Date: Fri, 23 Jan 2026 23:16:45 +0800
Subject: HALF WORK!

---
 www-2/src/components/ArticlePreview.astro | 68 +++++++++++++++++++++++++++++++
 www-2/src/components/Friend.astro         | 49 ++++++++++++++++++++++
 www-2/src/components/Nav.astro            | 23 +++++++++++
 3 files changed, 140 insertions(+)
 create mode 100644 www-2/src/components/ArticlePreview.astro
 create mode 100644 www-2/src/components/Friend.astro
 create mode 100644 www-2/src/components/Nav.astro

(limited to 'www-2/src/components')

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>
diff --git a/www-2/src/components/Friend.astro b/www-2/src/components/Friend.astro
new file mode 100644
index 0000000..d0de0ab
--- /dev/null
+++ b/www-2/src/components/Friend.astro
@@ -0,0 +1,49 @@
+---
+import githubIcon from "../assets/img/github.png";
+
+interface Props {
+    name: string;
+    url?: string;
+    githubUrl: string;
+    avatarUrl: string;
+    tag?: string;
+}
+
+const { name, githubUrl, url = githubUrl, avatarUrl, tag } = Astro.props;
+---
+
+<div class="friend">
+    <a rel="noopener noreferrer" href={url}>
+        <img
+            class="friend-avatar"
+            alt={`Friend ${name}'s avatar`}
+            src={avatarUrl}
+            width="80"
+            height="80"
+        /><br />{name}</a
+    >
+    <a rel="noopener noreferrer" href={githubUrl}>
+        <img class="friend-github" src={githubIcon.src} />
+    </a><br />
+    {tag && <span class="friend-tag">{tag}</span>}
+</div>
+
+<style>
+.friend a {
+  font-family: unset;
+}
+
+.friend-avatar {
+  object-fit: cover;
+}
+
+.friend-github {
+  width: 1em;
+  vertical-align: middle;
+  margin-right: -0.5em;
+}
+
+.friend-tag {
+  font-size: 0.8em;
+}
+</style>
\ No newline at end of file
diff --git a/www-2/src/components/Nav.astro b/www-2/src/components/Nav.astro
new file mode 100644
index 0000000..f62a9dc
--- /dev/null
+++ b/www-2/src/components/Nav.astro
@@ -0,0 +1,23 @@
+---
+
+let path = Astro.url.pathname
+if (path.startsWith("/")) { path = path.slice(1)}
+if (path.endsWith("/")) { path = path.slice(0, -1)}
+const segments = path.split("/").slice(0, -1);
+const sections: {name: string; link: string;}[] = []
+let current = "/"
+for (const segment of segments) {
+    current += segment + "/";
+    sections.push({
+        name: segment,
+        link: current
+    })
+}
+
+---
+<nav class="mono">
+    { sections.map(s =>
+    <><a class="mono-link" href={s.link}>{s.name}</a> ></>)
+    }
+  this
+</nav>
-- 
cgit v1.2.3