feat: initial commit

(cherry picked from commit 44c4d7b9521fe449e61edc614446195861932f8c)

src/components/widget/Profile.astro

@@ -0,0 +1,26 @@
+---
+import ImageBox from "../misc/ImageBox.astro";
+import ButtonLight from "../control/Button.astro";
+import {getConfig} from "../../utils/config-utils";
+interface props {
+
+}
+const className = Astro.props
+
+const vConf = getConfig();
+
+---
+<div class="card-base" transition:persist>
+    <ImageBox src={vConf.profile.avatar} class="w-full rounded-2xl mb-3"></ImageBox>
+    <div class="font-bold text-lg text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
+    <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
+    <div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
+    <div class="flex gap-2 mx-2 justify-center mb-4">
+        {vConf.profile.links.map(item =>
+            <a href={item.url} target="_blank">
+                <ButtonLight isIcon iconName={item.icon} regular height="40px"></ButtonLight>
+            </a>
+        )}
+    </div>
+</div>
+

src/components/widget/RecentPost.astro

@@ -0,0 +1,18 @@
+---
+import WidgetLayout from "./WidgetLayout.astro";
+import ButtonLink from "../control/ButtonLink.astro";
+import {getPostUrlBySlug, getSortedPosts} from "../../utils/content-utils";
+
+let posts = await getSortedPosts()
+
+const LIMIT = 5;
+
+posts = posts.slice(0, LIMIT)
+
+// console.log(posts)
+---
+<WidgetLayout name="Recent Posts">
+    {posts.map(post =>
+        <ButtonLink url={getPostUrlBySlug(post.slug)}>{post.data.title}</ButtonLink>
+    )}
+</WidgetLayout>

src/components/widget/SideBar.astro

@@ -0,0 +1,27 @@
+---
+import Profile from "./Profile.astro";
+import RecentPost from "./RecentPost.astro";
+import Tag from "./Tag.astro";
+
+const className = Astro.props.class;
+---
+<div id="sidebar" class:list={[className, "flex flex-col w-full gap-4"]} transition:persist>
+    <Profile></Profile>
+    <RecentPost></RecentPost>
+    <Tag></Tag>
+</div>
+
+<style>
+#sidebar {
+    view-transition-name: ssss;
+}
+/* TODO temporarily */
+html::view-transition-old(ssss) {
+    mix-blend-mode: normal;
+    animation: none;
+}
+html::view-transition-new(ssss) {
+    mix-blend-mode: normal;
+    animation: none;
+}
+</style>

src/components/widget/Tag.astro

@@ -0,0 +1,18 @@
+---
+
+import WidgetLayout from "./WidgetLayout.astro";
+import ButtonTag from "../control/ButtonTag.astro";
+import {getTagList} from "../../utils/content-utils";
+
+const tags = await getTagList();
+
+---
+<WidgetLayout name="Tags">
+    <div class="flex gap-2 flex-wrap">
+        {tags.map(t => (
+            <ButtonTag href={`/archive/tag/${t.name}`}>
+                {t.name}
+            </ButtonTag>
+        ))}
+    </div>
+</WidgetLayout>

src/components/widget/WidgetLayout.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+    name?: string;
+}
+const props = Astro.props;
+const {
+    name,
+} = Astro.props
+
+---
+<div class="pb-4 card-base">
+    <div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-8 mt-4 mb-2
+        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
+        before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>
+    <div class="px-4">
+        <slot></slot>
+    </div>
+</div>