feat(layout): code block style fix and add folding

includes/common/ConfigValidator.js

@@ -103,7 +103,7 @@ function compareVersion(ver1, ver2) {
 }
 
 function isBreakingChange(base, ver) {
-    return base.major !== ver.major;
+    return base.major !== ver.major || base.minor !== ver.minor;
 }
 
 

includes/specs/article.spec.js

@@ -4,10 +4,24 @@ module.exports = {
     [type]: 'object',
     [doc]: 'Article display settings',
     highlight: {
+        [type]: 'object',
+        [doc]: 'Code highlight settings',
+        theme: {
             [type]: 'string',
-        [doc]: 'Code highlight theme\nhttps://github.com/highlightjs/highlight.js/tree/master/src/styles',
+            [doc]: 'Code highlight themes\nhttps://github.com/highlightjs/highlight.js/tree/master/src/styles',
             [defaultValue]: 'atom-one-light'
         },
+        clipboard: {
+            [type]: 'boolean',
+            [doc]: 'Show code copying button',
+            [defaultValue]: true
+        },
+        fold: {
+            [type]: 'string',
+            [doc]: 'Default folding status of the code blocks. Can be "", "folded", "unfolded"',
+            [defaultValue]: 'unfolded'
+        }
+    },
     thumbnail: {
         [type]: 'boolean',
         [doc]: 'Whether to show article thumbnail images',

includes/specs/plugins.spec.js

@@ -60,11 +60,6 @@ module.exports = {
         [doc]: 'Show a loading progress bar at top of the page',
         [defaultValue]: true
     },
-    clipboard: {
-        [type]: 'boolean',
-        [doc]: 'Show the copy button in the highlighted code area',
-        [defaultValue]: true
-    },
     busuanzi: {
         [type]: 'boolean',
         [doc]: 'BuSuanZi site/page view counter\nhttps://busuanzi.ibruce.info',

layout/common/head.ejs

@@ -29,7 +29,7 @@
 <%- _css(cdn('bulma', '0.7.2', 'css/bulma.css')) %>
 <%- _css(iconcdn()) %>
 <%- _css(fontcdn('Ubuntu:400,600|Source+Code+Pro')) %>
-<%- _css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight') + '.css')) %>
+<%- _css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight.theme') + '.css')) %>
 
 <% if (has_config('plugins')) { %>
     <% for (let plugin in get_config('plugins')) { %>

layout/common/scripts.ejs

@@ -2,6 +2,21 @@
 <%- _js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %>
 <script>moment.locale("<%= get_config('language', 'en') %>");</script>
 
+<script>
+var IcarusThemeSettings = {
+    article: {
+        highlight: {
+            clipboard: <%= get_config('article.highlight.clipboard', true) %>,
+            fold: '<%= get_config('article.highlight.fold', true) %>'
+        }
+    }
+};
+</script>
+
+<% if (get_config('article.highlight.clipboard')) { %>
+    <%- _js(cdn('clipboard', '2.0.4', 'dist/clipboard.min.js'), true) %>
+<% } %>
+
 <% if (has_config('plugins')) { %>
     <% for (let plugin in get_config('plugins')) { %>
     <%- partial('plugin/' + plugin, { head: false, plugin: get_config('plugins')[plugin] }) %>

layout/plugin/clipboard.ejs

@@ -1,6 +0,0 @@
-<% if (plugin !== false) { %>
-    <% if (!head) { %>
-    <%- _js(cdn('clipboard', '2.0.4', 'dist/clipboard.min.js'), true) %>
-    <%- _js('js/clipboard', true) %>
-    <% } %>
-<% } %>

package.json

@@ -1,5 +1,5 @@
 {
   "name": "hexo-theme-icarus",
-  "version": "2.3.0",
+  "version": "2.6.0",
   "private": true
 }

source/css/style.styl

@@ -356,6 +356,9 @@ figure.highlight
     width: 100%
     position: relative
     margin: 1em 0 1em !important
+    &.folded
+        .highlight-body
+            display: none
 
     pre,
     table tr:hover
@@ -381,14 +384,29 @@ figure.highlight
         text-align: left
         font-style: normal
         font-size: .8em
+        &:after
+            clear: both
+            content: " "
+            display: table
 
         span
             font-weight: 500
             font-family: family-mono
 
+        .fold
+        a
+            color: #9a9a9a
+
         a
             float: right
-            color: #9a9a9a
+            margin-left: 0.5em
+
+        .fold
+            margin-right: 0.5em
+            cursor: pointer
+
+    .highlight-body
+        overflow: auto
 
     .gutter
         text-align: right
@@ -408,16 +426,6 @@ figure.highlight
         min-width: inherit
         border-radius: inherit
 
-    .copy
-        display: none
-        position: absolute
-        bottom: 0
-        right: 0
-        color: white
-        background: rgba(0, 0, 0, 0.5)
-    &:hover .copy
-        display: block
-
 /* ---------------------------------
  *          Overflow Table
  * --------------------------------- */

source/js/clipboard.js

@@ -1,10 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-    if (typeof(ClipboardJS) !== 'undefined') {
-        $('figure.highlight').each(function () {
-            var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
-            $(this).attr('id', id);
-            $(this).prepend($(`<button class="button is-borderless is-radiusless is-small copy" data-clipboard-target="#${id} .code" title="Copy"><i class="fas fa-copy"></i></button>`));
-        });
-        new ClipboardJS('.highlight .copy');
-    }
-});

source/js/main.js

@@ -32,6 +32,51 @@
     adjustNavbar();
     $(window).resize(adjustNavbar);
 
+    $('figure.highlight table').wrap('<div class="highlight-body">');
+    if (typeof (IcarusThemeSettings) !== 'undefined' &&
+        typeof (IcarusThemeSettings.article) !== 'undefined' &&
+        typeof (IcarusThemeSettings.article.highlight) !== 'undefined') {
+        if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) {
+            $('figure.highlight').each(function () {
+                var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
+                var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
+                $(this).attr('id', id);
+                if ($(this).find('figcaption').length) {
+                    $(this).find('figcaption').prepend(button);
+                } else {
+                    $(this).prepend('<figcaption>' + button + '</figcaption>');
+                }
+            });
+            new ClipboardJS('.highlight .copy');
+        }
+        var fold = IcarusThemeSettings.article.highlight.fold;
+        if (fold.trim()) {
+            var button = '<span class="fold">' + (fold === 'unfolded' ? '<i class="fas fa-angle-down"></i>' : '<i class="fas fa-angle-right"></i>') + '</span>';
+            $('figure.highlight').each(function () {
+                if ($(this).find('figcaption').length) {
+                    $(this).find('figcaption').prepend(button);
+                } else {
+                    $(this).prepend('<figcaption>' + button + '</figcaption>');
+                }
+            });
+
+            function toggleFold(codeBlock, isFolded) {
+                var $toggle = $(codeBlock).find('.fold i');
+                !isFolded ? $(codeBlock).removeClass('folded') : $(codeBlock).addClass('folded');
+                !isFolded ? $toggle.removeClass('fa-angle-right') : $toggle.removeClass('fa-angle-down');
+                !isFolded ? $toggle.addClass('fa-angle-down') : $toggle.addClass('fa-angle-right');
+            }
+
+            $('figure.highlight').each(function () {
+                toggleFold(this, fold === 'folded');
+            });
+            $('figure.highlight figcaption .fold').click(function () {
+                var $code = $(this).closest('figure.highlight');
+                toggleFold($code.eq(0), !$code.hasClass('folded'));
+            });
+        }
+    }
+
     var $toc = $('#toc');
     if ($toc.length > 0) {
         var $mask = $('<div>');