支持动态时间线

_config.yml

@@ -266,6 +266,9 @@ tag_plugins:
   # {% image %}
   image:
     fancybox: # true, false
+  # {% timeline %}
+  timeline:
+    max-height: 80vh
 
 
 ######## JS Plugins ########
@@ -274,10 +277,15 @@ plugins:
   # jquery
   jquery: https://fastly.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
 
-  # issues api
-  sitesjs: /js/plugins/sites.js
-  friendsjs: /js/plugins/friends.js
-  ghinfo: /js/plugins/ghinfo.js
+  # stellar api
+  stellar:
+    sites: /js/plugins/sites.js
+    friends: /js/plugins/friends.js
+    ghinfo: /js/plugins/ghinfo.js
+    timeline: /js/plugins/timeline.js
+  
+
+  marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
 
   ## optional plugins ##
   # preload

layout/_partial/scripts/index.ejs

@@ -103,12 +103,13 @@
 
   // required plugins (only load if needs)
   stellar.plugins = {
-    jQuery: '<%- url_for(theme.plugins.jquery || "https://fastly.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js") %>',
-    sitesjs: '<%- url_for(theme.plugins.sitesjs) %>',
-    friendsjs: '<%- url_for(theme.plugins.friendsjs) %>',
-    ghinfo: '<%- url_for(theme.plugins.ghinfo) %>',
+    jQuery: '<%- url_for(theme.plugins.jquery || "https://fastly.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js") %>'
   };
 
+  // stellar js
+  stellar.plugins.stellar = Object.assign(<%- JSON.stringify(theme.plugins.stellar) %>);
+
+  stellar.plugins.marked = Object.assign(<%- JSON.stringify(theme.plugins.marked) %>);
   // optional plugins
   if ('<%- theme.plugins.lazyload.enable %>' == 'true') {
     stellar.plugins.lazyload = Object.assign(<%- JSON.stringify(theme.plugins.lazyload) %>);

layout/_partial/sidebar/widgets/ghuser.ejs

@@ -23,7 +23,7 @@ function layoutDiv() {
   }
   
   el += '<div class="widget-wrap" id="github-user">';
-  el += '<div class="widget-body fs14 github-info-wrap" id="ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
+  el += '<div class="widget-body fs14 stellar-ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
     el += '<div><img no-lazy class="avatar" type="img" id="avatar_url" src="' + config.avatar + '"></div>';
     // username
     el += '<div class="username" type="text" id="name" href="https://github.com/' + item.username + '">';

layout/_partial/sidebar/widgets/repo_info.ejs

@@ -26,7 +26,7 @@ function layoutDiv() {
   el += '</div>';
   // body
   el += '<div class="widget-body fs14">';
-  el += '<div class="items github-info-wrap" id="ghinfo-api" api="https://api.github.xaoxuu.com/repos/' + repo + '">';
+  el += '<div class="items stellar-ghinfo-api" api="https://api.github.xaoxuu.com/repos/' + repo + '">';
   var items = [];
   // GitHub
   items.push({

scripts/tags/friends.js

@@ -65,8 +65,7 @@ hexo.extend.tag.register('friends', function(args) {
           el += groupHeader(group);
         }
         if (group.repo) {
-          el += '<div class="friendsjs-wrap"';
-          el += ' id="friends-api"';
+          el += '<div class="stellar-friends-api"';
           el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
           el += '>';
           el += '<div class="group-body"></div>';

scripts/tags/lib/users.js

@@ -11,8 +11,7 @@ module.exports = ctx => function(args) {
   args = ctx.args.map(args, ['api']);
   var el = '<div class="tag-plugin users-wrap">';
   
-  el += '<div class="friendsjs-wrap"';
-  el += ' id="friends-api"';
+  el += '<div class="stellar-friends-api"';
   el += ' api="' + args.api + '"';
   el += '>';
   el += '<div class="group-body"></div>';

scripts/tags/sites.js

@@ -69,8 +69,7 @@ hexo.extend.tag.register('sites', function(args) {
           el += groupHeader(group);
         }
         if (group.repo) {
-          el += '<div class="sitesjs-wrap"';
-          el += ' id="sites-api"';
+          el += '<div class="stellar-sites-api"';
           el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
           el += '>';
           el += '<div class="group-body"></div>';

scripts/tags/timeline.js

@@ -36,36 +36,48 @@ function layoutNodeContent(content) {
 
 
 function postTimeline(args, content) {
+  args = hexo.args.map(args, ['api', 'sort', 'reversed']);
   var el = '';
+
+  if (args.api && args.api.length > 0) {
+    el += '<div class="tag-plugin timeline stellar-timeline-api" api="' + args.api + '"';
+    if (args.sort) {
+      el += ' sort="' + args.sort + '"';
+    }
+    if (args.reversed) {
+      el += ' reversed="' + args.reversed + '"';
+    }
+    el += '>';
+  } else {
+    el += '<div class="tag-plugin timeline">';
+  }
+
   var arr = content.split(/<!--\s*(.*?)\s*-->/g).filter((item, i) => {
     return item.trim().length > 0;
   });
-  if (arr.length < 1) {
-    return el;
-  }
-  var nodes = [];
-  arr.forEach((item, i) => {
-    if (item.startsWith('node ')) {
-      nodes.push({
-        header: item
-      });
-    } else if (nodes.length > 0) {
-      var node = nodes[nodes.length-1];
-      if (node.body == undefined) {
-        node.body = item;
-      } else {
-        node.body += '\n' + item;
+  if (arr.length > 0) {
+    var nodes = [];
+    arr.forEach((item, i) => {
+      if (item.startsWith('node ')) {
+        nodes.push({
+          header: item
+        });
+      } else if (nodes.length > 0) {
+        var node = nodes[nodes.length-1];
+        if (node.body == undefined) {
+          node.body = item;
+        } else {
+          node.body += '\n' + item;
+        }
       }
-    }
-  });
-
-  el += '<div class="tag-plugin timeline">';
-  nodes.forEach((node, i) => {
-    el += '<div class="timenode" item="' + (i + 1) + '">';
-    el += layoutNodeTitle(node.header.substring(5));
-    el += layoutNodeContent(node.body);
-    el += '</div>';
-  });
+    });
+    nodes.forEach((node, i) => {
+      el += '<div class="timenode" index="' + (i) + '">';
+      el += layoutNodeTitle(node.header.substring(5));
+      el += layoutNodeContent(node.body);
+      el += '</div>';
+    });  
+  }
 
   el += '</div>';
   return el;

source/css/_common/highlight.styl

@@ -4,12 +4,14 @@ code
   color: var(--text-code)
   font-family: $ff-code
   word-break: break-all
+
+p>code:not([class]),li>code:not([class])
   font-size: 85%
   background: var(--block)
   padding: .2em .4em
   border-radius: 4px
 
-article.md .highlight
+article.md .highlight, .tag-plugin pre:not([class])
   margin: var(--gap-p) 0
   border-radius: $border-block
   overflow: hidden
@@ -168,7 +170,7 @@ $hl-red = #EE2B29
 $hl-orange = #FB3F1B
 $hl-amber = #FD8607
 $hl-text = var(--text-p1)
-pre
+.code>pre
   .code:before
     display: none
   // 行

source/css/_common/pre.styl

@@ -0,0 +1,6 @@
+.tag-plugin pre:not([class])
+  display: block
+  padding: 1rem
+  overflow: scroll
+  code 
+    padding: 0

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

@@ -15,7 +15,7 @@
     align-items: stretch
     &+.group-header
       margin-top: 2rem
-  .friendsjs-wrap
+  .stellar-friends-api
     display: block
     .loading-wrap
       min-height: 50px

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

@@ -11,7 +11,7 @@
     width: 100%
     &+.group-header
       margin-top: 2rem
-  .sitesjs-wrap
+  .stellar-sites-api
     display: block
     .loading-wrap
       min-height: 50px

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

@@ -1,6 +1,6 @@
-.tag-plugin.timeline
+.md .tag-plugin.timeline
   position: relative
-  margin: 1rem 0
+  margin-top: 0
   padding-left: 16px
   &:before
     content: ''
@@ -74,3 +74,10 @@
     margin: .5rem 0
   .tag-plugin.copy
     width: 240px
+
+
+.tag-plugin.timeline.stellar-timeline-api .body
+  max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
+  overflow: scroll
+  pre code 
+    font-size: $fs-12

source/js/main.js

@@ -213,29 +213,20 @@ if (stellar.plugins.lazyload) {
   });
 }
 
-// issuesjs
-if (stellar.plugins.sitesjs) {
-  const issues_api = document.getElementById('sites-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.sitesjs, { defer: true })
-    })
-  }
-}
-if (stellar.plugins.friendsjs) {
-  const issues_api = document.getElementById('friends-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.friendsjs, { defer: true })
-    })
-  }
-}
-if (stellar.plugins.ghinfo) {
-  const issues_api = document.getElementById('ghinfo-api');
-  if (issues_api != undefined) {
-    stellar.jQuery(() => {
-      stellar.loadScript(stellar.plugins.ghinfo, { defer: true })
-    })
+// stellar js
+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(() => {
+        stellar.loadScript(js, { defer: true });
+        if (key == 'timeline') {
+          stellar.loadScript(stellar.plugins.marked);
+        }
+      })
+    }
   }
 }
 

source/js/plugins/friends.js

@@ -66,7 +66,7 @@ const friendsjs = {
 }
 
 $(function () {
-  const els = document.getElementsByClassName('friendsjs-wrap');
+  const els = document.getElementsByClassName('stellar-friends-api');
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const api = el.getAttribute('api');

source/js/plugins/ghinfo.js

@@ -57,7 +57,7 @@ const GitHubInfo = {
 }
 
 $(function () {
-  const els = document.getElementsByClassName('github-info-wrap');
+  const els = document.getElementsByClassName('stellar-ghinfo-api');
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const api = el.getAttribute('api');

source/js/plugins/sites.js

@@ -69,7 +69,7 @@ const sitesjs = {
 }
 
 $(function () {
-  const els = document.getElementsByClassName('sitesjs-wrap');
+  const els = document.getElementsByClassName('stellar-sites-api');
   for (var i = 0; i < els.length; i++) {
     const el = els[i];
     const api = el.getAttribute('api');

source/js/plugins/timeline.js

@@ -0,0 +1,86 @@
+const StellarTimeline = {
+  requestAPI: (url, callback, timeout) => {
+    let retryTimes = 5;
+    function request() {
+      return new Promise((resolve, reject) => {
+        let status = 0; // 0 等待 1 完成 2 超时
+        let timer = setTimeout(() => {
+          if (status === 0) {
+            status = 2;
+            timer = null;
+            reject('请求超时');
+            if (retryTimes == 0) {
+              timeout();
+            }
+          }
+        }, 5000);
+        fetch(url).then(function(response) {
+          if (status !== 2) {
+            clearTimeout(timer);
+            resolve(response);
+            timer = null;
+            status = 1;
+          }
+          if (response.ok) {
+            return response.json();
+          }
+          throw new Error('Network response was not ok.');
+        }).then(function(data) {
+          retryTimes = 0;
+          callback(data);
+        }).catch(function(error) {
+          if (retryTimes > 0) {
+            retryTimes -= 1;
+            setTimeout(() => {
+              request();
+            }, 5000);
+          } else {
+            timeout();
+          }
+        });
+      });
+    }
+    request();
+  },
+  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>');
+    StellarTimeline.requestAPI(cfg.api, function(data) {
+      $(el).find('.loading-wrap').remove();
+      const arr = data.content || data;
+      const reversed = el.getAttribute('reversed');
+      if (reversed == '' || reversed == true) {
+        arr.reverse();
+      }
+      arr.forEach((item, i) => {
+        var cell = '<div class="timenode" index="' + i + '">';
+        cell += '<div class="header">';
+        cell += '<p>' + item.title + '</p>';
+        cell += '</div>';
+        cell += '<div class="body fs14">';
+        cell += marked.parse(item.body);
+        cell += '</div>';
+        cell += '</div>';
+        $(el).append(cell);
+      });
+    }, function() {
+      $(el).find('.loading-wrap svg').remove();
+      $(el).find('.loading-wrap p').text('加载失败，请稍后重试。');
+    });
+  },
+}
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-timeline-api');
+  for (var i = 0; i < els.length; i++) {
+    const el = els[i];
+    const api = el.getAttribute('api');
+    if (api == null) {
+      continue;
+    }
+    var obj = new Object();
+    obj.el = el;
+    obj.api = api;
+    StellarTimeline.layoutDiv(obj);
+  }
+});