feat: add a calendar for sidebar.

.vscode/settings.json

@@ -103,6 +103,7 @@
     "opendal",
     "oppo",
     "opposans",
+    "owspace",
     "pandiyan",
     "penheulim",
     "pilgi",

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',

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 {

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>

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>
+  )
+}

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) => (

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">
+{
+  randomSize > 0 && (
+    <div id="tag_cloud" class="widget widget-tag-cloud">
       <div class="widget-title">文章标签</div>
       <div class="tagcloud">
-    {
-      _.sampleSize(tags, randomSize).map((tag) => (
+        {_.sampleSize(tags, randomSize).map((tag) => (
           <a href={tag.permalink} class="tag-cloud-link" title={`${tag.name} (${tag.counts} 篇文章)`}>
             {tag.name}
           </a>
-      ))
-    }
+        ))}
       </div>
-</div>
+    </div>
+  )
+}

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

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>