Remove UIKit classes

[vladyio]

Hi, thanks for your work! This is not a PR to merge, it's kind of a suggestion for you which came as a result of my own needs.

1. I work with Jekyll 4.0, so I had to update the dependency version.
2. Adding UIKit as an additional dependency wasn't an option for me, so I modified the template so it doesn't depend on the whole CSS/JS set from UIKit. This is a workaround that works in my case, most probably you can use it as an inspiration to get rid of UIKit in future.

To make things work I also add some CSS and JS to my project (this code is from w3schools)

Add this to your `head.html`:

 <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>

Add this to your CSS assets:

/* 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 */

Resulting control

[tranlv]

Hi @vladyio , which css asset should I add into ?https://github.com/tranlyvu/distributedsystemsblog.com/tree/master/_sass/minimal-mistakes

thanks

[vladyio]

Hi @vladyio , which css asset should I add into ?https://github.com/tranlyvu/distributedsystemsblog.com/tree/master/_sass/minimal-mistakes

thanks

There's no difference which Sass file you choose there, you can even create a separate one exclusively for this purpose.

[nickhuangcyh]

@vladyio Thank you. You just save my day.

[oleg-nenashev]

The patch from @vladyio works well for pages when there is only one tabbed section, but breaks otherwise. In https://github.com/wiremock/wiremock.org/pull/165 I took those scripts and reworked them to support multiple appearances on the page, and also added a "Copy" button

@clustergarage If you are still interested in this project, I can create a PR here with proper integration for @vladyio's commits. If anyone is interested to co-maintain, I can create a fork with the patches in a separate repo