From c43b9d150b591db76ce2e8bc6490aeab08de3fa0 Mon Sep 17 00:00:00 2001
From: xaoxuu <me@xaoxuu.com>
Date: Sat, 10 Jul 2021 00:57:31 +0800
Subject: [PATCH] tabs v2

---
 scripts/tags/lib/tabs.js                 | 51 ++++++++++++++++++------
 scripts/tags/timeline.js                 |  4 +-
 source/css/_common/highlight.styl        |  3 ++
 source/css/_layout/tag-plugins/tabs.styl |  2 +
 4 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/scripts/tags/lib/tabs.js b/scripts/tags/lib/tabs.js
index 14b3171..d39af7c 100644
--- a/scripts/tags/lib/tabs.js
+++ b/scripts/tags/lib/tabs.js
@@ -1,36 +1,63 @@
 /**
- * tabs.js | https://theme-next.js.org/docs/tag-plugins/tabs
+ * tabs.js v2 | 基于NexT修改： https://theme-next.js.org/docs/tag-plugins/tabs
  */
 
 'use strict';
 
 module.exports = ctx => function(args, content) {
-  const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g;
-  args = ctx.args.map(args, ['active', 'codeblock', 'color'], ['tabName']);
+  var el = '';
+  var arr = content.split(/<!--\s*(.*?)\s*-->/g).filter((item, i) => {
+    return item.trim().length > 0;
+  });
+  if (arr.length < 1) {
+    return el;
+  }
+  var tabs = [];
+  arr.forEach((item, i) => {
+    if (item.startsWith('tab ')) {
+      tabs.push({
+        header: item
+      });
+    } else if (tabs.length > 0) {
+      var tab = tabs[tabs.length-1];
+      if (tab.body === undefined) {
+        tab.body = item;
+      } else {
+        tab.body += '\n' + item;
+      }
+    }
+  });
+
+  args = ctx.args.map(args, ['active', 'center'], ['tabName']);
   const tabName = args.tabName;
   const tabActive = Number(args.active) || 0;
 
-  let match;
   let tabId = 0;
   let tabNav = '';
   let tabContent = '';
 
   if (!tabName) ctx.log.warn('Tabs block must have unique name!');
 
-  while ((match = tabBlock.exec(content)) !== null) {
-    let {caption, codeblock} = ctx.args.map(match[1].split(' '), ['codeblock'], ['caption']);
-    let postContent = ctx.render.renderSync({ text: match[2], engine: 'markdown' }).trim();
-
+  tabs.forEach((tab, i) => {
+    let caption = tab.header.substring(4);
+    let content = ctx.render.renderSync({ text: tab.body, engine: 'markdown' }).trim();
     const abbr = tabName + ' ' + ++tabId;
     const href = abbr.toLowerCase().split(' ').join('-');
-
     const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '';
     tabNav += `<li class="tab${isActive}"><a href="#${href}">${caption || abbr}</a></li>`;
-    tabContent += `<div class="tab-pane${isActive}" ${codeblock ? 'codeblock="true"' : ''} id="${href}">${postContent}</div>`;
-  }
+    tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`;
+  });
 
   tabNav = `<ul class="nav-tabs">${tabNav}</ul>`;
   tabContent = `<div class="tab-content">${tabContent}</div>`;
 
-  return `<div class="tag-plugin tabs" id="${tabName.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`;
+  el += '<div class="tag-plugin tabs"';
+  if (args.center === 'true') {
+    el += ' center="true"';
+  }
+  el += 'id="' + tabName.toLowerCase().split(' ').join('-') + '"';
+  el += '">';
+  el += tabNav + tabContent;
+  el += '</div>';
+  return el;
 };
diff --git a/scripts/tags/timeline.js b/scripts/tags/timeline.js
index 1fd99be..fd47be4 100644
--- a/scripts/tags/timeline.js
+++ b/scripts/tags/timeline.js
@@ -37,9 +37,7 @@ function layoutNodeContent(content) {
 
 function postTimeline(args, content) {
   var el = '';
-  const nodeBlock = /<!--\s*(.*?)\s*-->/g;
-  let match;
-  var arr = content.split(nodeBlock).filter((item, i) => {
+  var arr = content.split(/<!--\s*(.*?)\s*-->/g).filter((item, i) => {
     return item.trim().length > 0;
   });
   if (arr.length < 1) {
diff --git a/source/css/_common/highlight.styl b/source/css/_common/highlight.styl
index ae9030b..bb0f23e 100644
--- a/source/css/_common/highlight.styl
+++ b/source/css/_common/highlight.styl
@@ -6,6 +6,9 @@ article.md .highlight
   border: 1px solid var(--block-border)
   line-height: 1.5
   font-family: $ff-code
+  box-sizing: border-box
+  @media screen and (min-width: $device-mobile)
+    min-width: 280px
 
 article.md .highlight
   position: relative
diff --git a/source/css/_layout/tag-plugins/tabs.styl b/source/css/_layout/tag-plugins/tabs.styl
index a3fa8aa..5309312 100644
--- a/source/css/_layout/tag-plugins/tabs.styl
+++ b/source/css/_layout/tag-plugins/tabs.styl
@@ -4,6 +4,8 @@
   margin-bottom: 1rem
   display: flex
   flex-direction: column
+  &[center]
+    align-items: center
 
 .tag-plugin.tabs
   ul.nav-tabs