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/back-to-top.js

@@ -15,12 +15,6 @@ export function back2top() {
   });
 
   $('#back-to-top').on('click', () => {
-    $('body,html').animate(
-      {
-        scrollTop: 0
-      },
-      800
-    );
-    return false;
+    window.scrollTo(0, 0);
   });
 }

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

_javascript/modules/components/convert-title.js

@@ -62,7 +62,5 @@ export function convertTitle() {
   observer.observe(document.querySelector(titleSelector));
 
   /* Click title will scroll to top */
-  $topbarTitle.on('click', function () {
-    $('body,html').animate({ scrollTop: 0 }, 800);
-  });
+  $topbarTitle.on('click', () => window.scrollTo(0, 0));
 }

_javascript/modules/components/locale-datetime.js

@@ -39,12 +39,13 @@ export function initLocaleDatetime() {
     $(this).removeAttr(LocaleHelper.attrDateFormat);
 
     // setup tooltips
-    const tooltip = $(this).attr('data-toggle');
+    const tooltip = $(this).attr('data-bs-toggle');
     if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
       return;
     }
 
     const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    $(this).attr('data-original-title', tooltipText);
+    $(this).attr('data-bs-title', tooltipText);
+    new bootstrap.Tooltip($(this));
   });
 }

_javascript/modules/components/smooth-scroll.js

@@ -1,109 +0,0 @@
-/**
- Safari doesn't support CSS `scroll-behavior: smooth`,
- so here is a compatible solution for all browser to smooth scrolling
-
- See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
-
- Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
- */
-import ScrollHelper from './utils/scroll-helper';
-
-export function smoothScroll() {
-  const $topbarTitle = $('#topbar-title');
-  const REM = 16; // in pixels
-  const ATTR_SCROLL_FOCUS = 'scroll-focus';
-  const SCOPE = "a[href*='#']:not([href='#']):not([href='#0'])";
-
-  $(SCOPE).on('click', function (event) {
-    if (
-      this.pathname.replace(/^\//, '') !== location.pathname.replace(/^\//, '')
-    ) {
-      return;
-    }
-
-    if (location.hostname !== this.hostname) {
-      return;
-    }
-
-    const hash = decodeURI(this.hash);
-    let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
-    let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
-    let selector = '#' + $.escapeSelector(hash.substring(1));
-    let $target = $(selector);
-
-    let isMobileViews = $topbarTitle.is(':visible');
-    let isPortrait = $(window).width() < $(window).height();
-
-    if (typeof $target === 'undefined') {
-      return;
-    }
-
-    event.preventDefault();
-
-    if (history.pushState) {
-      /* add hash to URL */
-      history.pushState(null, null, hash);
-    }
-
-    let curOffset = $(window).scrollTop();
-    let destOffset = ($target.offset().top -= REM / 2);
-
-    if (destOffset < curOffset) {
-      // scroll up
-      ScrollHelper.hideTopbar();
-      ScrollHelper.addScrollUpTask();
-
-      if (isMobileViews && isPortrait) {
-        destOffset -= ScrollHelper.getTopbarHeight();
-      }
-    } else {
-      // scroll down
-      if (isMobileViews && isPortrait) {
-        destOffset -= ScrollHelper.getTopbarHeight();
-      }
-    }
-
-    $('html').animate(
-      {
-        scrollTop: destOffset
-      },
-      500,
-      () => {
-        $target.trigger('focus');
-
-        /* clean up old scroll mark */
-        const $scroll_focus = $(`[${ATTR_SCROLL_FOCUS}=true]`);
-        if ($scroll_focus.length) {
-          $scroll_focus.attr(ATTR_SCROLL_FOCUS, 'false');
-        }
-
-        /* Clean :target links */
-        const $target_links = $(':target');
-        if ($target_links.length) {
-          /* element that visited by the URL with hash */
-          $target_links.attr(ATTR_SCROLL_FOCUS, 'false');
-        }
-
-        /* set scroll mark to footnotes */
-        if (toFootnote || toFootnoteRef) {
-          $target.attr(ATTR_SCROLL_FOCUS, 'true');
-        }
-
-        if ($target.is(':focus')) {
-          /* Checking if the target was focused */
-          return false;
-        } else {
-          $target.attr(
-            'tabindex',
-            '-1'
-          ); /* Adding tabindex for elements not focusable */
-          $target.trigger('focus'); /* Set focus again */
-        }
-
-        if (ScrollHelper.hasScrollUpTask()) {
-          ScrollHelper.popScrollUpTask();
-        }
-      }
-    );
-  }); /* click() */
-}

_javascript/modules/components/tooltip-loader.js

@@ -2,5 +2,11 @@
  * Initial Bootstrap Tooltip.
  */
 export function loadTooptip() {
-  $('[data-toggle="tooltip"]').tooltip();
+  const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+  );
+
+  [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+  );
 }