[feat] memos timeline

_config.yml

@@ -290,6 +290,7 @@ plugins:
     linkcard: /js/plugins/linkcard.js
     fcircle: /js/plugins/fcircle.js
     weibo: /js/plugins/weibo.js
+    memos: /js/plugins/memos.js
 
   marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
 

scripts/tags/lib/timeline.js

@@ -1,5 +1,5 @@
 /**
- * timeline.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * timeline.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  *
  * {% timeline %}
  *
@@ -35,14 +35,14 @@ function layoutNodeContent(ctx, content) {
 }
 
 module.exports = ctx => function(args, content = '') {
-  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide'])
+  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide', 'avatar'])
   var el = ''
   if (!args.type) {
     args.type = 'timeline'
   }
   if (args.api && args.api.length > 0) {
     el += '<div class="tag-plugin timeline stellar-' + args.type + '-api"'
-    el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide']).join(' ')
+    el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'avatar']).join(' ')
     el += '>'
   } else {
     el += '<div class="tag-plugin timeline">'

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

@@ -206,4 +206,17 @@
   h5,h6
     font-size: $fs-15
     margin: 0.5rem 0
-    line-height: 1.2
+    line-height: 1.2
+
+.tag-plugin.timeline.stellar-memos-api .body
+  p:first-child 
+    margin-top: 2px
+  p:last-child
+    margin-bottom: 2px
+  img  
+    margin: 0
+    max-height: 128px
+  .tag-plugin.image
+    display: flex
+    .image-bg+.image-bg
+      margin-left: 4px

source/js/main.js

@@ -245,7 +245,7 @@ if (stellar.plugins.stellar) {
       if (els != undefined && els.length > 0) {
         stellar.jQuery(() => {
           stellar.loadScript(js, { defer: true });
-          if (key == 'timeline') {
+          if (key == 'timeline' || 'memos') {
             stellar.loadScript(stellar.plugins.marked);
           }
         })
@@ -299,13 +299,36 @@ if (stellar.plugins.preload) {
   }
 }
 
+function loadFancybox() {
+  stellar.loadCSS(stellar.plugins.fancybox.css);
+  stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
+    Fancybox.bind(selector, {
+      groupAll: true,
+      hideScrollbar: false,
+      Thumbs: {
+        autoStart: false,
+      },
+      caption: function (fancybox, carousel, slide) {
+        return slide.$trigger.alt || null
+      }
+    });
+  })
+}
 // fancybox
 if (stellar.plugins.fancybox) {
   let selector = 'img[fancybox]:not(.error)';
   if (stellar.plugins.fancybox.selector) {
     selector += `, ${stellar.plugins.fancybox.selector}`
   }
-  if (document.querySelectorAll(selector).length !== 0) {
+  var needFancybox = document.querySelectorAll(selector).length !== 0;
+  if (!needFancybox) {
+    const els = document.getElementsByClassName('stellar-memos-api');
+    console.log('els', els);
+    if (els != undefined && els.length > 0) {
+      needFancybox = true;
+    }
+  }
+  if (needFancybox) {
     stellar.loadCSS(stellar.plugins.fancybox.css);
     stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
       Fancybox.bind(selector, {

source/js/plugins/memos.js

@@ -0,0 +1,129 @@
+const MemosJS = {
+  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 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>');
+    MemosJS.requestAPI(cfg.api, function(data) {
+      $(el).find('.loading-wrap').remove();
+      var users = [];
+      const filter = el.getAttribute('user');
+      if (filter && filter.length > 0) {
+        users = filter.split(",");
+      }
+      var hide = [];
+      const hideStr = el.getAttribute('hide');
+      if (hideStr && hideStr.length > 0) {
+        hide = hideStr.split(",");
+      }
+      data.forEach((item, i) => {
+        if (cfg.limit && i >= cfg.limit) {
+          return;
+        }
+        if (item.user && item.user.login && users.length > 0) {
+          if (!users.includes(item.user.login)) {
+            return;
+          }
+        }
+        let date = new Date(item.createdTs * 1000)
+        var cell = '<div class="timenode" index="' + i + '">';
+        cell += '<div class="header">';
+        if (!users.length && !hide.includes('user')) {
+          cell += '<div class="user-info">';
+          if (cfg.avatar?.length > 0) {
+            cell += `<img src="${cfg.avatar}">`;
+          }
+          cell += '<span>' + item.creatorName + '</span>';
+          cell += '</div>';
+        }
+        cell += '<p>' + date.toLocaleString() + '</p>';
+        cell += '</div>';
+        cell += '<div class="body">';
+        cell += marked.parse(item.content || '');
+        var imgs = [];
+        for (let res of item.resourceList) {
+          if (res.type?.includes('image/')) {
+            imgs.push(res.id);
+            console.log('type', res.type);
+          }
+        }
+        if (imgs.length > 0) {
+          cell += '<div class="tag-plugin image">';
+          for (let id of imgs) {
+            cell += `<div class="image-bg"><img src="https://${cfg.host}/o/r/${id}" fancybox="true"></div>`;
+          }
+          cell += '</div>';
+        }
+        cell += '</div>';
+        cell += '</div>';
+        $(el).append(cell);
+      });
+    }, function() {
+      $(el).find('.loading-wrap svg').remove();
+      $(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');
+    });
+  },
+}
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-memos-api');
+  for (var i = 0; i < els.length; i++) {
+    const el = els[i];
+    const api = el.getAttribute('api');
+    if (api == null) {
+      continue;
+    }
+    var cfg = new Object();
+    cfg.el = el;
+    cfg.api = api;
+    cfg.limit = el.getAttribute('limit');
+    cfg.host = api.replace(/https:\/\/(.*?)\/(.*)/i, '$1');
+    cfg.avatar = el.getAttribute('avatar');
+    if (!cfg.avatar) {
+      cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/avatar/round/3442075.svg';
+    }
+    MemosJS.layoutDiv(cfg);
+  }
+});

source/js/plugins/timeline.js

@@ -84,7 +84,7 @@ const StellarTimeline = {
           cell += '</a>';
         }
         let date = new Date(item.created_at);
-        cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
+        cell += '<p>' + date.toLocaleString() + '</p>';
         cell += '</div>';
         cell += '<div class="body">';
         if (!hide.includes('title')) {