github releases timeline

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

@@ -91,11 +91,15 @@
     font-size: $fs-14
   p.title 
     font-size: 1rem
-    font-weight: 500
+    font-weight: 700
     margin: 0
     padding: 0.5rem 0 0.75rem
     line-height: 1.25
     border-bottom: 1px dashed var(--block-border)
+    a 
+      color: inherit
+      &:hover
+        color: $color-hover
   pre code 
     font-size: $fs-12
 
@@ -116,18 +120,13 @@
     line-height: 1.8
   &:empty
     display: none
-  a.comments 
+  .flex
-    margin-right: 0
+    display: flex
-  
+    flex-wrap: wrap
+    font-size: $fs-12
+    align-items: stretch
 
-.tag-plugin.timeline.stellar-timeline-api .body .footer .flex
+.tag-plugin.timeline.stellar-timeline-api .body .footer
-  display: flex
-  flex-wrap: wrap
-  font-size: $fs-12
-  align-items: stretch
-  .reaction 
-    border-color: var(--block)
-    border-style: dashed
   .item
     border-width: 1px
     border-style: solid
@@ -136,24 +135,9 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
-    &.comments
-      border-width: 0
     &:first-child 
       margin-left: 0
     &:last-child 
       margin-right: 0
-    .key
+  .reaction 
-      margin-right: 4px
+    border-color: var(--block)
-
-.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
-  border-radius: 4px
-  padding: 0 0.5rem
-  color: white
-  trans1: all
-  margin-left: 2px
-  background: $color-theme
-  .key
-    margin-right: 4px
-  &:hover
-    background: $color-hover
-

source/js/plugins/timeline.js

@@ -59,45 +59,55 @@ const StellarTimeline = {
       $(el).find('.loading-wrap').remove();
       const arr = data.content || data;
       arr.forEach((item, i) => {
-        if (item.labels.length > 0) {
+        var cell = '<div class="timenode" index="' + i + '">';
-          var cell = '<div class="timenode" index="' + i + '">';
+        cell += '<div class="header">';
-          cell += '<div class="header">';
+        let date = new Date(item.created_at);
-          let date = new Date(item.created_at);
+        cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
-          cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
+        cell += '</div>';
-          cell += '</div>';
+        cell += '<div class="body">';
-          cell += '<div class="body">';
+        cell += '<p class="title">';
-          cell += '<p class="title">' + item.title + '</p>';
+        cell += '<a href="' + item.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
-          cell += marked.parse(item.body);
+        cell += item.title || item.name || item.tag_name;
-          cell += '<div class="footer">';
+        cell += '</a>';
-          cell += '<div class="flex labels">';
+        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>';
+        } else if (item.zipball_url) {
-          cell += '<div class="flex reactions">';
+          cell += '<a class="item download" href="' + item.zipball_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
-          if (item.reactions.total_count > 0) {
+          cell += '<span>📦 ' + item.tag_name + '.zip</span>';
-            for (let key of Object.keys(StellarTimeline.reactions)) {
+          cell += '</a>';
-              let num = item.reactions[key];
+        }
-              if (num > 0) {
+        cell += '</div>';
-                cell += '<div class="item reaction ' + key + '">';
+        cell += '<div class="flex right">';
-                cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>';
+        if (item.reactions && item.reactions.total_count > 0) {
-                cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>';
+          for (let key of Object.keys(StellarTimeline.reactions)) {
-                cell += '</div>';
+            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>';
-          cell += '</a>';
-          cell += '</div>';
-          cell += '</div>';
-          cell += '</div>';
-          cell += '</div>';
-          $(el).append(cell);
         }
+        if (item.comments) {
+          cell += '<a class="item comments last" href="' + item.html_url + '" target="_blank" rel="external nofollow noopener noreferrer">';
+          cell += '<span>💬 ' + item.comments + '</span>';
+          cell += '</a>';
+        }
+        
+        cell += '</div>';
+        cell += '</div>';
+        cell += '</div>';
+        cell += '</div>';
+        $(el).append(cell);
       });
     }, function() {
       $(el).find('.loading-wrap svg').remove();