[feature] Add the jekyll-code-tabs plugin

- refer to clustergarage/jekyll-code-tabs#5

Gemfile

@@ -20,6 +20,7 @@ group :jekyll_plugins do
   gem "jekyll-sitemap"
   gem "jekyll-feed", "~> 0.12"
   gem "jekyll-archives"
+  gem "jekyll-code-tabs", git: "https://github.com/nickhuang9527/jekyll-code-tabs"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -1,3 +1,10 @@
+GIT
+  remote: https://github.com/nickhuang9527/jekyll-code-tabs
+  revision: 79e527ff0aa9b877cb454680ae5b49e0af489a30
+  specs:
+    jekyll-code-tabs (1.2.0)
+      jekyll (>= 3.0, < 5.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -278,6 +285,7 @@ PLATFORMS
 DEPENDENCIES
   github-pages (~> 219)
   jekyll-archives
+  jekyll-code-tabs!
   jekyll-feed (~> 0.12)
   jekyll-include-cache
   jekyll-sitemap

_config.yml

@@ -228,6 +228,7 @@ plugins:
   - jekyll-gist
   - jekyll-feed
   - jekyll-include-cache
+  - jekyll-code-tabs
 
 # mimic GitHub Pages with --safe
 whitelist:
@@ -236,6 +237,7 @@ whitelist:
   - jekyll-gist
   - jekyll-feed
   - jekyll-include-cache
+  - jekyll-code-tabs
 
 # Archives
 #  Type

_includes/head.html

@@ -0,0 +1,63 @@
+<meta charset="utf-8" />
+
+{% include seo.html %} {% unless site.atom_feed.hide %}
+<link
+  href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}"
+  type="application/atom+xml"
+  rel="alternate"
+  title="{{ site.title }} Feed"
+/>
+{% endunless %}
+
+<!-- https://t.co/dKP3o1e -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<script>
+  document.documentElement.className =
+    document.documentElement.className.replace(/\bno-js\b/g, "") + " js ";
+</script>
+
+<!-- For all browsers -->
+<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" />
+<link
+  rel="preload"
+  href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
+  as="style"
+  onload="this.onload=null;this.rel='stylesheet'"
+/>
+<noscript
+  ><link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
+/></noscript>
+
+{% if site.head_scripts %} {% for script in site.head_scripts %}
+<script src="{{ script | relative_url }}"></script>
+{% endfor %} {% endif %}
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    document.getElementById("default").click();
+  });
+
+  function showTab(evt, tabId) {
+    // Declare all variables
+    var i, tabcontent, tablinks;
+
+    // Get all elements with class="tabcontent" and hide them
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+      tabcontent[i].style.display = "none";
+    }
+
+    // Get all elements with class="tablinks" and remove the class "active"
+    tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) {
+      tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+
+    // Show the current tab, and add an "active" class to the button that opened the tab
+    document.getElementById(tabId).style.display = "block";
+    evt.currentTarget.className += " active";
+  }
+</script>

assets/css/main.scss

@@ -0,0 +1,62 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@charset "utf-8";
+
+@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
+@import "minimal-mistakes"; // main partials
+
+/* TABS */
+
+/* Style the tab */
+.tab {
+  overflow: hidden;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+  background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+  background-color: #ccc;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+
+.tabcontent {
+  animation: fadeEffect 0.5s; /* Fading effect takes 1 second */
+}
+
+/* Go from zero to full opacity */
+@keyframes fadeEffect {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* END TABS */