From b2163ef1b299ed67da54c0e8a4dd2d84ffc9521f Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Tue, 26 Nov 2024 18:08:33 +0800
Subject: [PATCH] feat: add a calendar for sidebar.

---
 .vscode/settings.json                        |  1 +
 options.ts                                   |  8 +++--
 src/assets/styles/globals.css                | 32 ++++++++++----------
 src/components/search/SearchBar.astro        |  2 +-
 src/components/sidebar/OwspaceCalendar.astro | 30 ++++++++++++++++++
 src/components/sidebar/RandomPosts.astro     |  2 +-
 src/components/sidebar/RandomTags.astro      | 26 ++++++++--------
 src/components/sidebar/RecentComments.astro  | 10 +++---
 src/components/sidebar/Sidebar.astro         |  2 ++
 9 files changed, 74 insertions(+), 39 deletions(-)
 create mode 100644 src/components/sidebar/OwspaceCalendar.astro

diff --git a/.vscode/settings.json b/.vscode/settings.json
index df74d35..219ede9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -103,6 +103,7 @@
     "opendal",
     "oppo",
     "opposans",
+    "owspace",
     "pandiyan",
     "penheulim",
     "pilgi",
diff --git a/options.ts b/options.ts
index 4b125f5..fd27e81 100644
--- a/options.ts
+++ b/options.ts
@@ -65,6 +65,7 @@ const Options = z
         post: z.number().default(6),
         comment: z.number().default(0),
         tag: z.number().default(20),
+        calendar: z.boolean().default(false),
       }),
       comments: z.object({
         server: z.string().url().readonly(),
@@ -187,9 +188,10 @@ const options: z.input<typeof Options> = {
     },
     sidebar: {
       search: true,
-      post: 6,
-      comment: 6,
-      tag: 20,
+      post: 5,
+      comment: 5,
+      tag: 10,
+      calendar: true,
     },
     comments: {
       server: 'https://comment.yufan.me',
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 2432f34..e746f7f 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -2740,11 +2740,11 @@ a:hover .overlay {
     search style
 --------------------------------------------------------------*/
 
-.widget_search label {
+.widget-search label {
   display: block;
 }
 
-.widget_search .search-field {
+.widget-search .search-field {
   position: relative;
   display: block;
   width: 100%;
@@ -2772,46 +2772,46 @@ a:hover .overlay {
     -webkit-box-shadow 0.15s ease-in-out;
 }
 
-.widget_search .search-field:hover,
-.widget_search .search-field:focus {
+.widget-search .search-field:hover,
+.widget-search .search-field:focus {
   border-color: var(--border-muted);
   -webkit-box-shadow: none;
   box-shadow: none;
   outline: 0;
 }
 
-.widget_search .screen-reader-text,
-.widget_search .search-submit {
+.widget-search .screen-reader-text,
+.widget-search .search-submit {
   display: none;
 }
 
 /*--------------------------------------------------------------
-    widget_recent_comments style
-    widget_recent_entries  style
+    widget-recent-comments style
+    widget-recent-entries  style
 --------------------------------------------------------------*/
 
-.widget_recent_entries ul,
-.widget_recent_comments ul {
+.widget-recent-entries ul,
+.widget-recent-comments ul {
   padding-left: 1.25rem;
 }
 
-.widget_recent_entries ul li,
-.widget_recent_comments ul li {
+.widget-recent-entries ul li,
+.widget-recent-comments ul li {
   margin-bottom: 0.75rem;
   list-style-type: circle;
   font-size: inherit;
 }
 
-.widget_recent_entries ul li a {
+.widget-recent-entries ul li a {
   display: block;
 }
 
-.widget_recent_entries ul li span {
+.widget-recent-entries ul li span {
   color: var(--color-muted);
   font-size: inherit;
 }
 
-.widget_recent_comments ul li span {
+.widget-recent-comments ul li span {
   font-weight: 600;
   color: var(--color-dark);
   margin-right: 5px;
@@ -2850,7 +2850,7 @@ a:hover .overlay {
 }
 
 /*--------------------------------------------------------------
-    widget_recent_comments style
+    widget-recent-comments style
 --------------------------------------------------------------*/
 
 .widget_nav_menu ul li {
diff --git a/src/components/search/SearchBar.astro b/src/components/search/SearchBar.astro
index 8ad2ab8..ac0294f 100644
--- a/src/components/search/SearchBar.astro
+++ b/src/components/search/SearchBar.astro
@@ -2,7 +2,7 @@
 import options from '@/options';
 ---
 
-<div id="search" class="widget widget_search" hidden={!options.settings.sidebar.search}>
+<div id="search" class="widget widget-search" hidden={!options.settings.sidebar.search}>
   <div class="search-form">
     <label>
       <span class="screen-reader-text">搜索：</span>
diff --git a/src/components/sidebar/OwspaceCalendar.astro b/src/components/sidebar/OwspaceCalendar.astro
new file mode 100644
index 0000000..b71e96c
--- /dev/null
+++ b/src/components/sidebar/OwspaceCalendar.astro
@@ -0,0 +1,30 @@
+---
+import options from '@/options';
+import { DateTime } from 'luxon';
+
+const loadCalendarImage = async (): Promise<string> => {
+  const now = DateTime.now().setZone(options.settings.timeZone);
+  const link = `https://img.owspace.com/Public/uploads/Download/${now.year}/${now.toFormat('LLdd')}.jpg`;
+  const response = await fetch(link, {
+    referrer: '',
+  });
+
+  if (!response.ok) {
+    console.error(`Failed to fetch image ${link}`);
+    return '';
+  }
+
+  const encodedImage = Buffer.from(await response.arrayBuffer()).toString('base64');
+  return `data:image/jpeg;base64,${encodedImage}`;
+};
+
+const calendarImage = !options.settings.sidebar.calendar ? '' : await loadCalendarImage();
+---
+
+{
+  calendarImage !== '' && (
+    <div class="widget widget-owspace-calendar">
+      <img src={calendarImage} />
+    </div>
+  )
+}
diff --git a/src/components/sidebar/RandomPosts.astro b/src/components/sidebar/RandomPosts.astro
index eb4ce89..36ac939 100644
--- a/src/components/sidebar/RandomPosts.astro
+++ b/src/components/sidebar/RandomPosts.astro
@@ -14,7 +14,7 @@ const randomSize = options.settings.sidebar.post;
 
 {
   randomSize > 0 && (
-    <div id="recent_posts" class="widget widget_recent_entries">
+    <div id="recent_posts" class="widget widget-recent-entries">
       <div class="widget-title">随机文章</div>
       <ul class="line">
         {_.sampleSize(posts, randomSize).map((post) => (
diff --git a/src/components/sidebar/RandomTags.astro b/src/components/sidebar/RandomTags.astro
index eabe3af..1a3403f 100644
--- a/src/components/sidebar/RandomTags.astro
+++ b/src/components/sidebar/RandomTags.astro
@@ -12,15 +12,17 @@ const { tags } = Astro.props;
 const randomSize = options.settings.sidebar.tag;
 ---
 
-<div id="tag_cloud" class="widget widget_tag_cloud">
-  <div class="widget-title">文章标签</div>
-  <div class="tagcloud">
-    {
-      _.sampleSize(tags, randomSize).map((tag) => (
-        <a href={tag.permalink} class="tag-cloud-link" title={`${tag.name} (${tag.counts} 篇文章)`}>
-          {tag.name}
-        </a>
-      ))
-    }
-  </div>
-</div>
+{
+  randomSize > 0 && (
+    <div id="tag_cloud" class="widget widget-tag-cloud">
+      <div class="widget-title">文章标签</div>
+      <div class="tagcloud">
+        {_.sampleSize(tags, randomSize).map((tag) => (
+          <a href={tag.permalink} class="tag-cloud-link" title={`${tag.name} (${tag.counts} 篇文章)`}>
+            {tag.name}
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/sidebar/RecentComments.astro b/src/components/sidebar/RecentComments.astro
index cc95d4a..c9c1e46 100644
--- a/src/components/sidebar/RecentComments.astro
+++ b/src/components/sidebar/RecentComments.astro
@@ -1,17 +1,15 @@
 ---
 import { latestComments } from '@/helpers/db/query';
 import options from '@/options';
-
-const comments = await latestComments();
 ---
 
 {
   options.settings.sidebar.comment > 0 && (
-    <div id="recent-comments" class="widget widget_recent_comments">
+    <div id="recent-comments" class="widget widget-recent-comments">
       <div class="widget-title">近期评论</div>
-      <ul id="recentcomments">
-        {comments.map((comment) => (
-          <li class="recentcomments">
+      <ul id="recent-comments">
+        {(await latestComments()).map((comment) => (
+          <li class="recent-comments">
             <span class="comment-author-link">
               {comment.authorLink === '' ? (
                 comment.author
diff --git a/src/components/sidebar/Sidebar.astro b/src/components/sidebar/Sidebar.astro
index a883a2c..a7741d6 100644
--- a/src/components/sidebar/Sidebar.astro
+++ b/src/components/sidebar/Sidebar.astro
@@ -1,5 +1,6 @@
 ---
 import SearchBar from '@/components/search/SearchBar.astro';
+import OwspaceCalendar from '@/components/sidebar/OwspaceCalendar.astro';
 import RandomPosts from '@/components/sidebar/RandomPosts.astro';
 import RandomTags from '@/components/sidebar/RandomTags.astro';
 import RecentComments from '@/components/sidebar/RecentComments.astro';
@@ -19,5 +20,6 @@ const { posts, tags } = Astro.props;
     <RandomPosts {posts} />
     <RecentComments />
     <RandomTags {tags} />
+    <OwspaceCalendar />
   </div>
 </aside>