feat: code block tab (#1063)

* Try to find a way to recognize the codeblock tabs, its title, and
where it ends
- I try using DOCUSAURUS_CODE_TABS to mark the start
- Use TAB_TITLE to mark the title of the tab
- END_TAB to mark the end of that tab
- END_DOCUSAURUS_CODE_TABS to mark the end of the whole code blocks
then parse using regex and render accordingly

* Added on click hook

* Added example on how to write it, how to use it, how it will look like can be reverted later

* Fix css error

* - Move addEventListener part to lib/static
- Remove comments

* Add documentation

* Remove examples

* Change syntax of the codetabs

v1/lib/static/css/main.css

@@ -2361,3 +2361,57 @@ input::placeholder {
   padding: 5px 0;
 }
 /* End of Footer */
+
+
+.tabs {
+  border-top: 1px solid #cfcfcf;
+}
+
+.nav-tabs {
+  display: flex;
+  border-bottom: 4px solid #e0e0e0;
+  width: 100%;
+  padding: 0;
+  overflow-x: auto;
+  white-space: nowrap;
+  max-height: 100%;
+}
+
+.nav-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tabs .tab-pane:focus {
+  outline: none;
+}
+
+.tabs .nav-tabs > div {
+  font-size: 14px;
+  line-height: 1.14286;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
+
+.tabs .nav-tabs > div.active {
+  border-bottom: 4px solid $primaryColor;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.tab-pane > pre {
+  white-space: pre-wrap;
+}
+
+.tab-pane > pre > code {
+  margin-top: 0;
+  border-radius: 0;
+  box-shadow: none;
+}

v1/lib/static/js/codetabs.js

@@ -0,0 +1,24 @@
+// Turn off ESLint for this file because it's sent down to users as-is.
+/* eslint-disable */
+window.addEventListener('load', function() {
+  // add event listener for all tab
+  document.querySelectorAll('.nav-link').forEach(function(el) {
+    el.addEventListener('click', function(e) {
+      const groupId = e.target.getAttribute('data-group');
+      document
+        .querySelectorAll(`.nav-link[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');
+        });
+      document
+        .querySelectorAll(`.tab-pane[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');
+        });
+      e.target.classList.add('active');
+      document
+        .querySelector(`#${e.target.getAttribute('data-tab')}`)
+        .classList.add('active');
+    });
+  });
+});