HALF WORK!

1 files changed, 124 insertions, 0 deletions

diff --git a/www-2/src/pages/index.astro b/www-2/src/pages/index.astro
new file mode 100644
index 0000000..4007037
--- /dev/null
+++ b/www-2/src/pages/index.astro
@@ -0,0 +1,124 @@
+---
+import { getCollection, render } from "astro:content";
+
+import PageBase from "../layouts/PageBase.astro";
+import Friend from "../components/Friend.astro";
+import ArticlePreview from "../components/ArticlePreview.astro";
+
+const posts = (
+    await getCollection("blogs", ({ id }) => id.startsWith("posts/"))
+).slice(0, 3);
+---
+
+<PageBase>
+    <img id="avatar" src="/avatar.png" alt="My avatar" width="80" height="80" />
+    <h1 id="title">Hello! This is <code>crupest</code> !</h1>
+    <hr />
+    <section>
+        <p>Welcome to my home page! Nice to meet you here! 🥰</p>
+        <p>
+            Feel free to contact me via my email address <a
+                href="mailto:crupest@crupest.life">crupest@crupest.life</a
+            >, or just create an issue in any of my <a
+                rel="noopener noreferrer"
+                href="https://github.com/crupest">GitHub</a
+            >
+            repos. I love talking with people a lot.
+        </p>
+        <div id="links" class="mono-link">
+            goto:
+            <ul>
+                <li><a href="/git/">git</a></li>
+                <li><a href="/notes/">notes</a></li>
+                <li><a href="/notes/hurd">hurd</a></li>
+                <li><a href="/notes/cheat-sheet">cheat-sheet</a></li>
+            </ul>
+        </div>
+    </section>
+    <hr />
+    <section id="recent-posts">
+        <h2>Recent Posts <a class="mono-link" href="/posts">(all)</a></h2>
+        {
+            posts.map((post) => (
+                <ArticlePreview
+                    title={post.data.title}
+                    date={post.data.date.toLocaleString()}
+                    url={"/posts/" + post.id}
+                    content=""
+                />
+            ))
+        }
+    </section>
+    <hr />
+    <section>
+        <h2 id="friends">
+            My Friends <small>(more links are being collected ...)</small>
+        </h2>
+        <div id="friends-container">
+            <Friend
+                name="wsm"
+                avatarUrl="https://avatars.githubusercontent.com/u/74699943?v=4"
+                githubUrl="wushuming666"
+            />
+            <Friend
+                name="hsz"
+                url="https://www.hszsoft.com"
+                avatarUrl="https://avatars.githubusercontent.com/u/63097618?v=4"
+                githubUrl="hszSoft"
+                tag="随性の程序员"
+            />
+        </div>
+    </section>
+</PageBase>
+
+<style>
+    #avatar {
+        float: right;
+    }
+
+    #links {
+        font-family: monospace;
+
+        margin-block-end: 1rem;
+
+        > ul {
+            display: inline;
+            padding-inline-start: 0.5em;
+            > li {
+                display: inline;
+
+                &::after {
+                    content: " | ";
+                }
+            }
+        }
+    }
+
+    #recent-posts {
+        margin-block-end: 1.5em;
+    }
+
+    #friends-container {
+        display: flex;
+        gap: 1em;
+    }
+
+    .friend {
+        flex-grow: 0;
+        text-align: center;
+    }
+
+    .citation {
+        margin: auto;
+    }
+
+    .citation figcaption {
+        text-align: right;
+    }
+
+    html[data-theme="dark"] {
+        & .friend-github {
+            filter: invert(1);
+        }
+    }
+</style>