hexo-theme-stellar 1.10.0 → 1.12.0

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

@@ -20,13 +20,15 @@
     &:before
       display: none
 
-.tag-plugin.timeline .timenode
+.md .tag-plugin.timeline .timenode
   position: relative
   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
@@ -35,24 +37,50 @@
   &:hover .header
     p
       color: var(--text-p1)
+    .user-info
+      background: $color-theme
+      span
+        color: var(--card)
     &:before
       background: $color-theme
       height: 16px
       top: 'calc(50% - 0.5 * %s)' % @height
       transform: scale(1)
 
-.tag-plugin.timeline .header
+.tag-plugin.timeline .timenode .header
   display: flex
   align-items: center
   position: relative
-  p
-    margin: .25rem 0
+  margin: 0.25rem 0
+  font-size: $fs-12
+  .user-info 
+    display: flex
+    align-items: center
     font-size: $fs-12
-    font-weight: 700
+    font-weight: 500
+    color: var(--text-p1)
+    margin-right: 4px
+    line-height: 1
+    border-radius: 16px
+    padding-right: 6px
+    trans2 color background
+    img 
+      background: white
+      height: 16px
+      border-radius: 16px
+      display: inline
+      margin: 0 4px 0 0
+      object-fit: contain
+    &:hover
+      background: $color-hover
+  &,p  
+    font-weight: 500
     color: var(--text-p3)
-    font-family: $ff-code
     trans1 color
-    opacity: 0.75
+    line-height: 1
+  p
+    margin: 0 !important
+    font-size: $fs-12 !important
     a
       color: inherit
       font-weight: inherit
@@ -76,6 +104,8 @@
   padding: 0.5rem 1rem
   margin-top: 4px
   box-shadow: $boxshadow-block
+  p
+    font-size: $fs-14
   &:empty
     display: none
   p,.highlight,ol,ul,.tag-plugin
@@ -87,21 +117,28 @@
 .tag-plugin.timeline.stellar-timeline-api .body
   max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
   overflow: scroll
-  p
-    font-size: $fs-14
   p.title 
     font-size: 1rem
-    font-weight: 500
-    margin: 0
-    padding: 0.5rem 0 0.75rem
+    font-weight: 700
+    margin: 0.5rem 0 0.75rem
     line-height: 1.25
-    border-bottom: 1px dashed var(--block-border)
+    a 
+      color: inherit
+      &:hover
+        color: $color-hover
+  a
+    &:has(img):after
+      display: none
+    img  
+      margin: 0 auto
+  img
+    margin: 0.5rem auto
   pre code 
     font-size: $fs-12
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer
+  margin: 0 0 -0.5rem
   padding: 0.5rem 0 1rem
-  margin-bottom: -0.5rem
   user-select: none
   font-weight: 500
   display: flex
@@ -116,18 +153,13 @@
     line-height: 1.8
   &:empty
     display: none
-  a.comments 
-    margin-right: 0
-  
+  .flex
+    display: flex
+    flex-wrap: wrap
+    font-size: $fs-12
+    align-items: stretch
 
-.tag-plugin.timeline.stellar-timeline-api .body .footer .flex
-  display: flex
-  flex-wrap: wrap
-  font-size: $fs-12
-  align-items: stretch
-  .reaction 
-    border-color: var(--block)
-    border-style: dashed
+.tag-plugin.timeline.stellar-timeline-api .body .footer
   .item
     border-width: 1px
     border-style: solid
@@ -136,24 +168,20 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
-    &.comments
-      border-width: 0
     &:first-child 
       margin-left: 0
     &:last-child 
       margin-right: 0
-    .key
-      margin-right: 4px
+  .reaction 
+    border-color: var(--block)
 
-.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
-  border-radius: 4px
+.tag-plugin.timeline .body blockquote
   padding: 0 0.5rem
-  color: white
-  trans1: all
-  margin-left: 2px
-  background: $color-theme
-  .key
-    margin-right: 4px
-  &:hover
-    background: $color-hover
-
+  box-shadow: none
+  border-left: 4px solid var(--block-border)
+  border-radius: 0
+  display: block
+  margin: 0.75rem 0
+  p
+    font-size: $fs-13
+    margin: 0.25rem

package/source/css/_plugins/comments/twikoo.styl

@@ -2,7 +2,7 @@
   --twikoo-lighttext: #ef794f;
   --twikoo-secondtext: #909094;
   --twikoo-emoji-background: #f8f8f8;
-  --twikoo-theme: #409eff;
+  --twikoo-theme: $color-theme;
   margin-top: 1.5rem
 
   .tk-content
@@ -106,10 +106,16 @@
   .tk-comments-no
     color: var(--text-p1);
 
+set_darkmode_comments()
+  .cmt-body.twikoo
+    --twikoo-lighttext: #f2b94b;
+    --twikoo-secondtext: #a1a2b8;
+    --twikoo-emoji-background: darken($dark-block, 1);
+    --twikoo-theme: #409eff;
+
 if hexo-config('style.darkmode') == 'auto'
   @media (prefers-color-scheme: dark)
-    .cmt-body.twikoo
-      --twikoo-lighttext: #f2b94b;
-      --twikoo-secondtext: #a1a2b8;
-      --twikoo-emoji-background: darken($dark-block, 1);
-      --twikoo-theme: #409eff;
+    set_darkmode_comments()
+
+if hexo-config('style.darkmode') == 'always'
+  set_darkmode_comments()

package/source/css/_plugins/comments/valine.styl

@@ -49,12 +49,16 @@
             if hexo-config('style.darkmode') == 'auto'
               @media (prefers-color-scheme: dark)
                 box-shadow: none
+            if hexo-config('style.darkmode') == 'always'
+              box-shadow: none
           &:active
             background: linear-gradient(145deg, #eee, #fff)
             box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
             if hexo-config('style.darkmode') == 'auto'
               @media (prefers-color-scheme: dark)
                 box-shadow: none
+            if hexo-config('style.darkmode') == 'always'
+              box-shadow: none
       .vedit
         .vctrl span
           padding: 0

package/source/css/_plugins/comments/waline.styl

@@ -5,8 +5,8 @@
   --waline-light-grey: #999;
   --waline-dark-grey: #666;
   /* 主题色 */
-  --waline-theme-color: #3498db;
-  --waline-active-color: #2ecc71;
+  --waline-theme-color: $color-theme;
+  --waline-active-color: $color-hover;
   /* 布局颜色 */
   --waline-color: #444;
   --waline-bgcolor: #fff;

package/source/js/main.js

@@ -217,14 +217,20 @@ if (stellar.plugins.lazyload) {
 if (stellar.plugins.stellar) {
   for (let key of Object.keys(stellar.plugins.stellar)) {
     let js = stellar.plugins.stellar[key];
-    const els = document.getElementsByClassName('stellar-' + key + '-api');
-    if (els != undefined && els.length > 0) {
-      stellar.jQuery(() => {
-        stellar.loadScript(js, { defer: true });
-        if (key == 'timeline') {
-          stellar.loadScript(stellar.plugins.marked);
-        }
-      })
+    if (key == 'linkcard') {
+      stellar.loadScript(js, { defer: true }).then(function () {
+        setCardLink(document.querySelectorAll('a.link-card'));
+      });
+    } else {
+      const els = document.getElementsByClassName('stellar-' + key + '-api');
+      if (els != undefined && els.length > 0) {
+        stellar.jQuery(() => {
+          stellar.loadScript(js, { defer: true });
+          if (key == 'timeline') {
+            stellar.loadScript(stellar.plugins.marked);
+          }
+        })
+      }
     }
   }
 }

package/source/js/plugins/friends.js

@@ -44,7 +44,7 @@ const friendsjs = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    $(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>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
@@ -60,7 +60,8 @@ const friendsjs = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }

package/source/js/plugins/ghinfo.js

@@ -44,13 +44,25 @@ const GitHubInfo = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    GitHubInfo.requestAPI(cfg.api, function(data) {
-      const arr = data.content || data;
+    function fill(data) {
       for (let key of Object.keys(data)) {
         $(el).find("[type=text]#" + key).text(data[key]);
         $(el).find("[type=link]#" + key).attr("href", data[key]);
         $(el).find("[type=img]#" + key).attr("src", data[key]);
       }
+    }
+    GitHubInfo.requestAPI(cfg.api, function(data) {
+      const idx = el.getAttribute('index');
+      if (idx != undefined) {
+        const arr = data.content || data;
+        if (arr && arr.length > idx) {
+          let obj = arr[idx];
+          obj['latest-tag-name'] = obj['name'];
+          fill(arr[idx]);
+        }
+      } else {
+        fill(data);
+      }
     }, function() {
     });
   },

package/source/js/plugins/linkcard.js

@@ -0,0 +1,124 @@
+// 本插件由CardLink定制而成，原项目源码: https://github.com/Lete114/CardLink
+
+var cardLink = {};
+cardLink.caches = {};
+cardLink.server = 'https://api.allorigins.win/raw?url=';
+
+/**
+ * Remove '/' and '/index.html'
+ * @param {String} params
+ * @returns { String }
+ */
+function indexHandler(params) {
+  let path = params.replace(/(\/index\.html|\/)*$/gi, '')
+  if (path.length === 0) path += '/'
+  return path
+}
+
+/**
+ * Determine if it is a ['https://', 'http://', '//'] protocol
+ * @param {String} url Website url
+ * @returns {Boolean}
+ */
+function isHttp(url) {
+  return /^(https?:)?\/\//g.test(url)
+}
+
+function renderer(el, obj) {
+  if (obj.title && obj.title.length > 0) {
+    el.querySelector('.title').innerHTML = obj.title;
+  }
+  if (obj.icon && obj.icon.length > 0) {
+    el.querySelector('.img').style = 'background-image: url("' + obj.icon + '");';
+  }
+  let desc = el.querySelector('.desc');
+  if (desc && obj.desc && obj.desc.length > 0) {
+    desc.innerHTML = obj.desc;
+  }
+}
+
+/**
+ * Get info
+ * @param {Element} el Element
+ * @param {String} html String type html
+ * @param {String} link Website address
+ */
+// eslint-disable-next-line max-statements
+function getInfo(el, html, link) {
+  try {
+    let title, icon, desc
+    const doc = new DOMParser().parseFromString(html, 'text/html')
+    // If there is no title, no card link is generated
+    title = doc.querySelector('title')
+    if (title) {
+      title = title.textContent
+
+      // Get the src of the first img tag in the body tag
+      let tmp = doc.querySelector('head link[rel="apple-touch-icon"]')
+      if (!tmp) {
+        tmp = doc.querySelector('head link[rel="icon"]')
+      }
+      icon = tmp && tmp.getAttribute('href')
+
+      if (/^data:image/.test(icon)) icon = ''
+
+      // If there is no src then get the site icon
+      if (!icon) {
+        const links = [].slice.call(doc.querySelectorAll('link[rel][href]'))
+        icon = links.find((_el) => _el.rel.includes('icon'))
+        icon = icon && icon.getAttribute('href')
+      }
+      
+      desc = doc.querySelector('head meta[name="description"]')
+
+      if (desc) {
+        desc = desc.content;
+      }
+      // If `icon` is not the ['https://', 'http://', '//'] protocol, splice on the `origin` of the a tag
+      if (icon && !isHttp(icon)) icon = new URL(link).origin + icon
+      cardLink.caches[link] = { title, link, icon, desc }
+      
+      renderer(el, cardLink.caches[link])
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('CardLink Error: Failed to parse', error)
+  }
+}
+
+function fetchPage(link, callback) {
+  fetch(link)
+    .then((result) => result.text())
+    .then(callback)
+    .catch((error) => {
+      const server = cardLink.server
+      // eslint-disable-next-line no-console
+      if (link.includes(server) || !server) return console.error('CardLink Error:', error)
+      fetchPage(server + link, callback)
+    })
+}
+
+/**
+ * Create card links
+ * @param {NodeList} nodes A collection of nodes or a collection of arrays,
+ * if it is an array then the array must always contain node element
+ */
+function setCardLink(nodes) {
+  // If the `nodes` do not contain a `forEach` method, then the default `a[cardlink]` is used
+  nodes = 'forEach' in (nodes || {}) ? nodes : document.querySelectorAll('a[cardlink]')
+  nodes.forEach((el) => {
+    // If it is not a tag element then it is not processed
+    if (el.nodeType !== 1) return
+    el.removeAttribute('cardlink')
+    const link = el.href
+
+    const cache = cardLink.caches[link]
+    if (cache) return renderer(el, cache)
+
+    if (isHttp(link)) {
+      fetchPage(link, (html) => {
+        getInfo(el, html, link)
+      })
+    }
+  })
+}

package/source/js/plugins/sites.js

@@ -44,14 +44,14 @@ const sitesjs = {
   },
   layout: (cfg) => {
     const el = $(cfg.el)[0];
-    $(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>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     sitesjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       const arr = data.content;
       arr.forEach((item, i) => {
         var cell = '<div class="site-card">';
         cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">';
-        cell += '<img src="' + (item.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + item.url)) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
+        cell += '<img src="' + (item.screenshot || ('https://screenshot-api.xaoxuu.com/api?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
         cell += '<div class="info">';
         cell += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';"/>';
         cell += '<span class="title">' + item.title + '</span>';
@@ -63,7 +63,8 @@ const sitesjs = {
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }

package/source/js/plugins/timeline.js

@@ -54,54 +54,81 @@ const StellarTimeline = {
   },
   layoutDiv: (cfg) => {
     const el = $(cfg.el)[0];
-    $(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>');
+    $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     StellarTimeline.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
       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.labels.length > 0) {
-          var cell = '<div class="timenode" index="' + i + '">';
-          cell += '<div class="header">';
-          let date = new Date(item.created_at);
-          cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
-          cell += '</div>';
-          cell += '<div class="body">';
-          cell += '<p class="title">' + item.title + '</p>';
-          cell += marked.parse(item.body);
-          cell += '<div class="footer">';
-          cell += '<div class="flex labels">';
+        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 (!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>';
+          cell += '</a>';
+        }
+        let date = new Date(item.created_at);
+        cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
+        cell += '</div>';
+        cell += '<div class="body">';
+        cell += '<p class="title">';
+        cell += '<a href="' + item.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
+        cell += item.title || item.name || item.tag_name;
+        cell += '</a>';
+        cell += '</p>';
+        
+        cell += marked.parse(item.body);
+        cell += '<div class="footer">';
+        cell += '<div class="flex left">';
+        if (item.labels) {
           item.labels.forEach((label, i) => {
-            cell += '<div class="item label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">';
+            cell += '<div class="item label ' + label.name + '" style="background:#' + label.color + '18;border-color:#' + label.color + '36">';
             cell += '<span>' + label.name + '</span>';
             cell += '</div>';
           });
-          cell += '</div>';
-          cell += '<div class="flex reactions">';
-          if (item.reactions.total_count > 0) {
-            for (let key of Object.keys(StellarTimeline.reactions)) {
-              let num = item.reactions[key];
-              if (num > 0) {
-                cell += '<div class="item reaction ' + key + '">';
-                cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>';
-                cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>';
-                cell += '</div>';
-              }
+        } else if (item.zipball_url) {
+          cell += '<a class="item download" href="' + item.zipball_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
+          cell += '<span>📦 ' + item.tag_name + '.zip</span>';
+          cell += '</a>';
+        }
+        cell += '</div>';
+        cell += '<div class="flex right">';
+        if (item.reactions && item.reactions.total_count > 0) {
+          for (let key of Object.keys(StellarTimeline.reactions)) {
+            let num = item.reactions[key];
+            if (num > 0) {
+              cell += '<div class="item reaction ' + key + '">';
+              cell += '<span>' + StellarTimeline.reactions[key] + ' ' + item.reactions[key] + '</span>';
+              cell += '</div>';
             }
           }
-          cell += '<a class="item comments" href="' + item.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
-          cell += '<span class="key comments">💬</span>';
-          cell += '<span class="value comments">' + item.comments + '</span>';
+        }
+        if (item.comments != null) {
+          cell += '<a class="item comments last" href="' + item.html_url + '#issuecomment-new" target="_blank" rel="external nofollow noopener noreferrer">';
+          cell += '<span><svg t="1666270368054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2528" width="200" height="200"><path d="M952 64H72C32.3 64 0 96.3 0 136v508c0 39.7 32.3 72 72 72h261l128 128c14 14 32.5 21.1 50.9 21.1s36.9-7 50.9-21.1l128-128h261c39.7 0 72-32.3 72-72V136c0.2-39.7-32.1-72-71.8-72zM222 462c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m290-7.7c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72c0 39.7-32.2 72-72 72z m290 8c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72c0 39.7-32.2 72-72 72z" p-id="2529"></path></svg> ' + (item.comments || 0) + '</span>';
           cell += '</a>';
-          cell += '</div>';
-          cell += '</div>';
-          cell += '</div>';
-          cell += '</div>';
-          $(el).append(cell);
         }
+        
+        cell += '</div>';
+        cell += '</div>';
+        cell += '</div>';
+        cell += '</div>';
+        $(el).append(cell);
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();
-      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+      $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+      $(el).find('.loading-wrap').addClass('error');
     });
   },
 }