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/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');
+    });
+  });
+});