refactor(deps): upgrade bootstrap from v4.6 to v5.2

- update class name of the spacing, font style, cards and toasts
- update attribute names &  tooltip usage
- remove custom smooth scroll
- syntax colors

_javascript/modules/components/clipboard.js

@@ -6,11 +6,11 @@
  *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
-const btnSelector = '.code-header>button';
+const clipboardSelector = '.code-header>button';
 const ICON_SUCCESS = 'fas fa-check';
 const ATTR_TIMEOUT = 'timeout';
 const ATTR_TITLE_SUCCEED = 'data-title-succeed';
-const ATTR_TITLE_ORIGIN = 'data-original-title';
+const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
 const TIMEOUT = 2000; // in milliseconds
 
 function isLocked(node) {
@@ -36,7 +36,7 @@ function getIcon(btn) {
   return iconNode.attr('class');
 }
 
-const ICON_DEFAULT = getIcon(btnSelector);
+const ICON_DEFAULT = getIcon(clipboardSelector);
 
 function showTooltip(btn) {
   const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
@@ -61,36 +61,41 @@ function resumeIcon(btn) {
 
 export function initClipboard() {
   // Initial the clipboard.js object
-  const clipboard = new ClipboardJS(btnSelector, {
-    target(trigger) {
-      let codeBlock = trigger.parentNode.nextElementSibling;
-      return codeBlock.querySelector('code .rouge-code');
-    }
-  });
+  if ($(clipboardSelector).length) {
+    const clipboard = new ClipboardJS(clipboardSelector, {
+      target(trigger) {
+        let codeBlock = trigger.parentNode.nextElementSibling;
+        return codeBlock.querySelector('code .rouge-code');
+      }
+    });
 
-  $(btnSelector).tooltip({
-    trigger: 'hover',
-    placement: 'left'
-  });
+    const clipboardList = document.querySelectorAll(clipboardSelector);
+    [...clipboardList].map(
+      (elem) =>
+        new bootstrap.Tooltip(elem, {
+          placement: 'left'
+        })
+    );
 
-  clipboard.on('success', (e) => {
-    e.clearSelection();
+    clipboard.on('success', (e) => {
+      e.clearSelection();
 
-    const trigger = e.trigger;
-    if (isLocked(trigger)) {
-      return;
-    }
+      const trigger = e.trigger;
+      if (isLocked(trigger)) {
+        return;
+      }
 
-    setSuccessIcon(trigger);
-    showTooltip(trigger);
-    lock(trigger);
+      setSuccessIcon(trigger);
+      showTooltip(trigger);
+      lock(trigger);
 
-    setTimeout(() => {
-      hideTooltip(trigger);
-      resumeIcon(trigger);
-      unlock(trigger);
-    }, TIMEOUT);
-  });
+      setTimeout(() => {
+        hideTooltip(trigger);
+        resumeIcon(trigger);
+        unlock(trigger);
+      }, TIMEOUT);
+    });
+  }
 
   /* --- Post link sharing --- */