chore(core): move tag processors to hexo-component-inferno

include/register.js

@@ -11,7 +11,7 @@ module.exports = hexo => {
     require('hexo-component-inferno/lib/hexo/generator/tags')(hexo);
     require('hexo-component-inferno/lib/hexo/helper/cdn')(hexo);
     require('hexo-component-inferno/lib/hexo/helper/page')(hexo);
+    require('hexo-component-inferno/lib/hexo/tag/message')(hexo);
+    require('hexo-component-inferno/lib/hexo/tag/tabs')(hexo);
     require('hexo-component-inferno/lib/core/view').init(hexo);
-    require('./../scripts/tags/message')(hexo);
-    require('./../scripts/tags/tabs')(hexo);
 };

package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "deepmerge": "^4.2.2",
-    "hexo-component-inferno": "^1.0.2",
+    "hexo-component-inferno": "^1.1.0",
     "inferno": "^7.3.3",
     "inferno-create-element": "^7.3.3",
     "moment": "^2.22.2",

scripts/tags/message.js

@@ -1,60 +0,0 @@
-/**
- * Bulma Message Tag, see {@link https://bulma.io/documentation/components/message/}.
- *
- * @param {string} color    The color of this message, can not be set. Usable: dark, primary, link, info, success,
- *                          warning, danger.
- * @param {string} icon     The icon of this message, can not be set.
- * @param {string} title    The header of this message, can not be set, supported Markdown.
- * @param {string} size     The size of this message, can not be set. Usable: small, medium, large. The default
- *                          size is between small and medium.
- *
- * @example
- * {% message color:danger icon:info-circle 'title:Very danger!' size:small %}
- *     **You are in danger.**
- * {% endmessage %}
- */
-module.exports = function(hexo) {
-    hexo.extend.tag.register('message', (args, content) => {
-        let icon = '';
-        let title = '';
-        let classes = '';
-        let header = '';
-
-        args.forEach(element => {
-            const key = element.split(':')[0].trim();
-            const value = element.split(':')[1].trim();
-            if (value !== null && value !== undefined && value !== '') {
-                switch (key) {
-                    case 'color':
-                        classes += ` is-${value}`;
-                        break;
-                    case 'icon':
-                        icon = `<i class="fas fa-${value} mr-2"></i>`;
-                        break;
-                    case 'title':
-                        title = value;
-                        break;
-                    case 'size':
-                        classes += ` is-${value}`;
-                        break;
-                }
-            }
-        });
-        if (icon !== '' || title !== '') {
-            header = `
-            <div class="message-header">
-                ${hexo.render.renderSync({text: icon + title, engine: 'markdown'})}
-            </div>
-            `;
-        }
-
-        return `
-        <article class="message${classes}">
-            ${header}
-            <div class="message-body">
-            ${hexo.render.renderSync({text: content, engine: 'md'})}
-            </div>
-        </article>
-        `;
-    }, { ends: true });
-};

scripts/tags/tabs.js

@@ -1,116 +0,0 @@
-/**
- * Bulma Tabs Tag, see {@link https://bulma.io/documentation/components/tabs/}.
- *
- * The format of each item is: <!-- <active>item [id] [<icon>] '[title]' --> [content] <!-- enditem -->.
- * If each item's content is indented with four spaces or one tab, these indents will be ignored.
- *
- * @param {string} behavior     The behavior of this tab, can not be set. Usable: centered, right, fullwidth. The
- *                              default behavior is to display on the left.
- * @param {string} size         The size of this tab, can not be set. Usable: small, medium, large. The default
- *                              size is between small and medium.
- * @param {string} style        The style of this tab, can not be set. Usable: boxed, toggle, toggle-rounded.
- *
- * @example
- * {% tabs behavior:fullwidth size:small style:toggle-rounded %}
- *     <!-- item info info 'Info' -->This is info.<!-- enditem -->
- *     <!-- activeitem hello 'Hello' -->This is hello.<!-- enditem -->
- * {% endmessage %}
- */
-module.exports = function(hexo) {
-    hexo.extend.tag.register('tabs', (args, content) => {
-        let classes = '';
-
-        args.forEach(element => {
-            const key = element.split(':')[0].trim();
-            const value = element.split(':')[1].trim();
-            if (value !== null && value !== undefined && value !== '') {
-                switch (key) {
-                    case 'behavior':
-                        classes += ` is-${value}`;
-                        break;
-                    case 'size':
-                        classes += ` is-${value}`;
-                        break;
-                    case 'style':
-                        if (value === 'toggle-rounded') {
-                            classes += ' is-toggle is-toggle-rounded';
-                        } else {
-                            classes += ` is-${value}`;
-                        }
-                        break;
-                }
-            }
-        });
-
-        const blockRegExp = /<!--\s*(active)?item( \w+)( \w+)?( '.*?')\s*-->([\s\S]*?)<!--\s*enditem\s*-->/g;
-        let match;
-        let tabsEl = '';
-        let contentEl = '';
-
-        while ((match = blockRegExp.exec(content)) !== null) {
-            let active = '';
-            let hidden = ' is-hidden';
-            let icon = '';
-            let contentString = match[5].replace(/^\n?|[ \n\t]*$/g, '');
-
-            if (match[1] === 'active') {
-                active = ' class="is-active"';
-                hidden = '';
-            }
-            if (match[3] !== undefined && match[3].substring(1) !== '') icon = `<span class="icon is-small"><i class="fas fa-${match[3].substring(1)}" aria-hidden="true"></i></span>`;
-            if (contentString.match(/^ {4}|^\t{1}/gm) !== null && contentString.match(/^ {4}|^\t{1}/gm).length === contentString.split('\n').length) contentString = contentString.replace(/^ {4}|^\t{1}/g, '').replace(/\n {4}|\n\t{1}/g, '\n');
-
-            tabsEl += `
-            <li id="${match[2].substring(1)}"${active}">
-                <a onclick="switchTab(this)">${hexo.render.renderSync({text: icon + match[4].substring(2, match[4].length - 1), engine: 'markdown'})}</a>
-            </li>
-            `;
-
-            contentEl += `
-            <div id="${match[2].substring(1)}" class="tab-content${hidden}">
-                ${hexo.render.renderSync({text: contentString, engine: 'markdown'})}
-            </div>
-            `;
-        }
-
-        return `
-        <div>
-            <div class="tabs my-3${classes}">
-                <ul class="mx-0 my-0">
-                    ${tabsEl}
-                </ul>
-            </div>
-            <div>
-                ${contentEl}
-            </div>
-        </div>
-        `;
-    }, { ends: true });
-
-    hexo.extend.injector.register(
-        'head_end',
-        `
-        <script>
-            function switchTab(element) {
-                const id = element.parentElement.id;
-                const tabElements = element.parentElement.parentElement.children;
-                const contentElements = element.parentElement.parentElement.parentElement.parentElement.children[1].children;
-                for (let i = 0; i < tabElements.length; i++) {
-                    const $tab = tabElements[i];
-                    const $content = contentElements[i];
-                    if ($tab.id === id) {
-                        $tab.classList.add('is-active');
-                    } else {
-                        $tab.classList.remove('is-active');
-                    }
-                    if ($content.id === id) {
-                        $content.classList.remove('is-hidden');
-                    } else {
-                        $content.classList.add('is-hidden');
-                    }
-                }
-            }
-        </script>
-        `
-    );
-};