优化时间线

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

@@ -45,6 +45,7 @@
     color: var(--text-p3)
     font-family: $ff-code
     trans1 color
+    opacity: 0.75
     a
       color: inherit
       font-weight: inherit
@@ -79,5 +80,78 @@
 .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
+    line-height: 1.25
+    border-bottom: 1px dashed var(--block-border)
   pre code 
-    font-size: $fs-12
+    font-size: $fs-12
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer
+  padding: 0.5rem 0 1rem
+  margin-bottom: -0.5rem
+  user-select: none
+  font-weight: 500
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  position: sticky
+  position: -webkit-sticky
+  bottom: -0.5rem
+  background: var(--card)
+  &:empty
+    display: none
+  .label:first-child
+    margin-left: 0
+  a.comments 
+    margin-right: 0
+  
+
+
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer .labels
+  display: flex
+  flex-wrap: wrap
+  font-size: $fs-12
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer .reactions
+  display: flex
+  flex-wrap: wrap
+  font-size: $fs-13
+  .reaction 
+    border: 1px dashed var(--block-border)
+
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer .label 
+  color: white
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3)
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
+  border-radius: 64px
+  border: 1px solid var(--block-border)
+  padding: 0 0.5rem
+  color: inherit
+  trans1: all
+  .key
+    margin-right: 4px
+  &:hover
+    background: $color-theme
+    border: 1px solid $color-theme
+    color: var(--card)
+    background: var(--text-p1)
+    border: 1px solid var(--text-p1)
+
+
+.tag-plugin.timeline.stellar-timeline-api .body .footer .label,
+.tag-plugin.timeline.stellar-timeline-api .body .footer .reaction
+  margin: 0 0.25rem
+  border-radius: 64px
+  padding: 0 0.5rem
+  .key
+    margin-right: 4px

source/js/main.js

@@ -217,7 +217,6 @@ if (stellar.plugins.lazyload) {
 if (stellar.plugins.stellar) {
   for (let key of Object.keys(stellar.plugins.stellar)) {
     let js = stellar.plugins.stellar[key];
-    console.log(key, js);
     const els = document.getElementsByClassName('stellar-' + key + '-api');
     if (els != undefined && els.length > 0) {
       stellar.jQuery(() => {

source/js/plugins/timeline.js

@@ -1,4 +1,14 @@
 const StellarTimeline = {
+  reactions: {
+    '+1': '👍',
+    '-1': '👎', 
+    'laugh': '😀', 
+    'hooray': '🎉', 
+    'confused': '😕', 
+    'heart': '❤️', 
+    'rocket': '🚀', 
+    'eyes': '👀'
+  },
   requestAPI: (url, callback, timeout) => {
     let retryTimes = 5;
     function request() {
@@ -53,15 +63,45 @@ const StellarTimeline = {
         arr.reverse();
       }
       arr.forEach((item, i) => {
-        var cell = '<div class="timenode" index="' + i + '">';
+        if (item.labels.length > 0) {
-        cell += '<div class="header">';
+          var cell = '<div class="timenode" index="' + i + '">';
-        cell += '<p>' + item.title + '</p>';
+          cell += '<div class="header">';
-        cell += '</div>';
+          let date = new Date(item.created_at);
-        cell += '<div class="body fs14">';
+          cell += '<p>' + date + '</p>';
-        cell += marked.parse(item.body);
+          cell += '</div>';
-        cell += '</div>';
+          cell += '<div class="body">';
-        cell += '</div>';
+          cell += '<p class="title">' + item.title + '</p>';
-        $(el).append(cell);
+          cell += marked.parse(item.body);
+          cell += '<div class="footer">';
+          cell += '<div class="labels">';
+          item.labels.forEach((label, i) => {
+            cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '">';
+            cell += label.name;
+            cell += '</div>';
+          });
+          cell += '</div>';
+          cell += '<div class="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="reaction ' + key + '">';
+                cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>';
+                cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>';
+                cell += '</div>';
+              }
+            }
+          }
+          cell += '<a class="comments" href="' + item.html_url + '">';
+          cell += '<span class="key comments">💬</span>';
+          cell += '<span class="value comments">' + item.comments + '</span>';
+          cell += '</a>';
+          cell += '</div>';
+          cell += '</div>';
+          cell += '</div>';
+          cell += '</div>';
+          $(el).append(cell);
+        }
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();