ghissues

_config.yml

@@ -27,8 +27,8 @@ sidebar:
   widgets:
     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'
+    post: [toc, ghrepo, ghissues] # for pages using 'layout:post'
-    wiki: [toc, ghrepo, related] # for pages using 'layout:wiki'
+    wiki: [toc, ghrepo, ghissues, related] # for pages using 'layout:wiki'
 
 
 ######## Main ########

_data/widgets.yml

@@ -3,13 +3,17 @@
 # - markdown: 渲染 md 文本
 #
 
-# ---- 内置组件，暂时不支持覆盖 ----
 ghrepo:
   layout: ghrepo
 related:
   layout: related
 
-# ---- 默认组件，可以覆盖自定义配置 ----
+ghissues:
+  layout: ghissues
+  title: # Recent Issues
+  limit: 3 # 显示的issues最大数量
+  labels: # 过滤只显示具有某些标签的issues
+
 # 将其覆盖设置为空，可删除一个默认组件，例如 welcome:
 # Recent update
 recent:

layout/_partial/sidebar/widgets/ghissues.ejs

@@ -0,0 +1,46 @@
+<%
+function layoutDiv() {
+  var el = '';
+  var repo;
+  var branch = 'main';
+  if (page.layout === 'wiki' && page.wiki) {
+    let proj = theme.wiki.projects[page.wiki];
+    if (proj && proj.repo) {
+      repo = proj.repo;
+      if (proj.branch != undefined) {
+        branch = proj.branch;
+      }
+    }
+  } else {
+    // 其它的如果有设置 repo 也可以
+    repo = page.repo;
+  }
+  if (repo == undefined) {
+    return el;
+  }
+  item.api = 'https://api.github.com/repos/' + repo + '/issues?per_page=' + item.limit;
+  if (item.labels) {
+    item.api += '&labels=' + item.labels;
+  }
+  console.log(item.api);
+  el += '<div class="widget-wrap" id="timeline">';
+    if (item.title) {
+      el += '<div class="widget-header cap theme 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() %>

layout/_partial/sidebar/widgets/ghrepo.ejs

@@ -26,7 +26,7 @@ function layoutDiv() {
   el += '<a class="repo" href="https://github.com/' + repo + '" target="_blank" rel="external nofollow noopener noreferrer">';
     el += '<div class="repo-name flex-row">';
       el += '<svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="user-select:none;overflow:visible"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>';
-      el += '<span>' + repo + '</span>';
+      el += repo;
     el += '</div>';
     el += '<div class="repo-desc"><span type="text" id="description">&nbsp;</span></div>';
     el += '<div class="grid">';

source/css/_layout/sidebar/ghrepo.styl

@@ -2,16 +2,19 @@
   .widget-body
     a.repo
       display: block
-      border: 1px solid var(--block-border)
+      padding: 0.75rem 0.5rem
       color: var(--text-p2)
       background: var(--card)
       border-radius: $border-block
-      >div  
+      box-shadow: $boxshadow-card
-        margin: 0.5rem
+      trans2 box-shadow transform
+      >div+div
+        margin-top: 0.5rem
       span
         color: var(--text-p2)
       &:hover
-        background: var(--block)
+        box-shadow: $boxshadow-card-float
+        transform: translateY(-1px)
     a.repo
       svg
         margin-right: 4px
@@ -21,13 +24,13 @@
       .repo-name
         font-size: $fs-14
         font-weight: 700
-        margin: 0.75rem 0.5rem
+        color: var(--text-p1)
       .repo-desc
         font-size: $fs-13
-        margin: 0.75rem 0.5rem
+        margin-left: 2px
+        margin-right: 2px
       .grid
         font-size: $fs-13
-        margin: 0.75rem 0.5rem
         display: grid
         grid-gap: 2px
         grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)

source/css/_layout/sidebar/widgets.styl

@@ -83,3 +83,21 @@
       line-height: 1.5
       &:hover
         color: $color-hover
+  
+  .widget-wrap#timeline .widget-body
+    margin-top: 0.5rem
+    .tag-plugin.timeline .timenode
+      .header
+        margin-bottom: 0.5rem
+        txt-ellipsis()
+        .user-info
+          background: var(--block)
+          &:hover
+            background: $color-hover
+            color: var(--card)
+        &:before
+          display: none
+      &+.timenode
+        margin-top: 0.75rem
+      .body
+        max-height: 40vh

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

@@ -1,7 +1,7 @@
-.tag-plugin.folding .body:has(.timeline)
+.md .tag-plugin.folding .body:has(.timeline)
   background: var(--site-bg)
   
-.tag-plugin.timeline
+.md .tag-plugin.timeline
   position: relative
   margin-top: 0
   padding-left: 16px
@@ -20,7 +20,7 @@
     &:before
       display: none
 
-.tag-plugin.timeline .timenode
+.md .tag-plugin.timeline .timenode
   position: relative
   display: flex
   flex-direction: column