sidebar timeline

_config.yml

@@ -25,7 +25,7 @@ sidebar:
     # about: '[关于](/about/)'
   # Sidebar widgets
   widgets:
-    index: [welcome, recent] # for home/wiki/categories/tags/archives/404 pages
+    index: [welcome, recent, timeline] # for home/wiki/categories/tags/archives/404 pages
     page: [welcome, toc] # for pages using 'layout:page'
     post: [toc, ghrepo] # for pages using 'layout:post'
     wiki: [toc, ghrepo, wiki_more] # for pages using 'layout:wiki'

_data/widgets.yml

@@ -45,3 +45,9 @@ welcome:
     创建 `blog/source/_data/widgets.yml` 文件，此文件中填写需要自定义的侧边栏组件，例如 `welcome` 组件。
     <br>
     如果有任何疑问，请先查阅[文档](https://xaoxuu.com/wiki/stellar/)，如果文档中没有提供，请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues/) 向开发中询问。
+
+timeline:
+  layout: timeline
+  title: 近期动态
+  api: https://api.github.com/repos/xaoxuu/hexo-theme-stellar/issues
+  user:

layout/_partial/sidebar/widgets/timeline.ejs

@@ -0,0 +1,27 @@
+<%
+function layoutDiv() {
+  var el = '';
+  if (item.api == undefined) {
+    return el;
+  }
+  el += '<div class="widget-wrap" id="timeline">';
+    if (item.title) {
+      el += '<div class="widget-header cap dis-select">';
+      el += '<span class="name">' + item.title + '</span>';
+      el += '</div>';
+    }
+    el += '<div class="widget-body fs14">';
+      el += '<div class="tag-plugin timeline stellar-timeline-api"';
+      ['api', 'user'].forEach(key => {
+        if (item[key]) {
+          el += ' ' + key + '="' + item[key] + '"';
+        }
+      });
+      el += '>';
+      el += '</div>';
+    el += '</div>';
+  el += '</div>';
+  return el;
+}
+%>
+<%- layoutDiv() %>

source/css/_common/highlight.styl

@@ -20,7 +20,7 @@ article.md .highlight, pre:not([class]):has(>code)
   font-family: $ff-code
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
-    min-width: 280px
+    min-width: 180px
 
 article.md .highlight
   position: relative

source/css/_custom.styl

@@ -69,14 +69,14 @@ $border-image = 6px
 
 // 可以动态变化的属性
 :root
-  --width-left: 256px
+  --width-left: 288px
   --width-main: 720px
   --gap-l: 16px
   --gap-p: .75rem // gap for paragraph
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
-    --width-left: 320px
+    --width-left: 352px
     --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
@@ -84,10 +84,10 @@ $border-image = 6px
     --gap-l: 64px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
-    --width-left: 220px
+    --width-left: 252px
   // iPad 竖屏
   @media screen and (max-width: $device-mobile-max)
-    --width-left: 256px
+    --width-left: 288px
 
 
 

source/css/_layout/sidebar/ghuser.styl

@@ -6,6 +6,7 @@
   background: var(--card)
   border-radius: $border-card
   padding: 1rem
+  box-shadow: $boxshadow-card
 
 .widget-wrap#github-user .widget-body .avatar
   display: block

source/css/_layout/sidebar/sidebar.styl

@@ -3,12 +3,14 @@
   flex-direction: column
   word-break: break-all
   text-align: justify
-  padding: var(--gap-l)
+  padding: var(--gap-l) 0
   padding-top: "calc(2 * %s)" % var(--gap-l)
   height: "calc(100vh - 3 * %s)" % var(--gap-l)
   @media screen and (max-width: $device-mobile-max)
     padding-top: "calc(1 * %s)" % var(--gap-l)
     height: "calc(100% - 2 * %s)" % var(--gap-l)
+  .header
+    margin: 0 var(--gap-l)
 
 .l_left[layout=wiki]
   padding-bottom: 0
@@ -153,7 +155,7 @@ nav.menu
   z-index: 1
   line-height: 1.2
   .widget-wrap
-    margin: 1rem 0 3rem 0
+    margin: 1rem var(--gap-l) 3rem var(--gap-l)
     .widget-header
       display: flex
       justify-content: space-between

source/css/_layout/tag-plugins/timeline.styl

@@ -1,7 +1,7 @@
-.md .tag-plugin.folding .body:has(.timeline)
+.tag-plugin.folding .body:has(.timeline)
   background: var(--site-bg)
   
-.md .tag-plugin.timeline
+.tag-plugin.timeline
   position: relative
   margin-top: 0
   padding-left: 16px
@@ -25,8 +25,10 @@
   display: flex
   flex-direction: column
   align-items: flex-start
-  max-width: 'calc(100% - %s)' % 1rem
+  box-sizing: border-box
+  max-width: 100%
   >.header, >.body
+    box-sizing: border-box
     max-width: @max-width
   &[highlight] .header:before
     background: $color-theme
@@ -50,6 +52,7 @@
   align-items: center
   position: relative
   margin: 0.25rem 0
+  font-size: $fs-12
   .user-info 
     display: flex
     align-items: center
@@ -70,13 +73,14 @@
       object-fit: contain
     &:hover
       background: $color-hover
-  p
-    margin: 0
-    font-size: $fs-12
+  &,p  
     font-weight: 500
     color: var(--text-p3)
     trans1 color
     line-height: 1
+  p
+    margin: 0 !important
+    font-size: $fs-12 !important
     a
       color: inherit
       font-weight: inherit

source/js/plugins/timeline.js

@@ -57,17 +57,21 @@ const StellarTimeline = {
     $(el).append('<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>');
     StellarTimeline.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      const user = el.getAttribute('user');
       const arr = data.content || data;
+      var users = [];
+      const filter = el.getAttribute('user');
+      if (filter && filter.length > 0) {
+        users = filter.split(",");
+      }
       arr.forEach((item, i) => {
-        if (item.user && item.user.login && user && user.length > 0) {
-          if (!user.includes(item.user.login)) {
+        if (item.user && item.user.login && users.length > 0) {
+          if (!users.includes(item.user.login)) {
             return;
           }
         }
         var cell = '<div class="timenode" index="' + i + '">';
         cell += '<div class="header">';
-        if (!user && item.user) {
+        if (!users.length && item.user) {
           cell += '<a class="user-info" href="' + item.user.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
           cell += '<img src="' + item.user.avatar_url + '">';
           cell += '<span>' + item.user.login + '</span>';