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

_data/assets/cross_origin.yml

@@ -19,8 +19,8 @@ jquery:
   js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
 
 toc:
   css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css

_includes/datetime.html

@@ -12,7 +12,7 @@
   data-ts="{{ include.date | date: '%s' }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
-    data-toggle="tooltip" data-placement="bottom"
+    data-bs-toggle="tooltip" data-bs-placement="bottom"
   {% endif %}
 >
   {{ include.date | date: df_strftime }}

_includes/footer.html

@@ -1,8 +1,8 @@
 <!-- The Footer -->
 
 <footer>
-  <div class="container pl-lg-4 pr-lg-4">
+  <div class="container px-lg-4">
-    <div class="d-flex justify-content-center align-items-center text-muted ml-md-3 mr-md-3">
+    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
       <p>
         {%- capture _platform -%}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
@@ -21,8 +21,8 @@
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
         {% if site.data.locales[include.lang].copyright.brief %}
           <span
-            data-toggle="tooltip"
+            data-bs-toggle="tooltip"
-            data-placement="top"
+            data-bs-placement="top"
             title="{{ site.data.locales[include.lang].copyright.verbose }}"
           >
             {{- site.data.locales[include.lang].copyright.brief -}}

_includes/post-paginator.html

@@ -1,13 +1,11 @@
-<!--
+<!-- The paginator for post list on HomgPage. -->
-  The paginator for post list on HomgPage.
--->
 
-<ul class="pagination align-items-center mt-4 pl-lg-2">
+<ul class="pagination align-items-center mt-4 ps-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}
   {% else %}
-    {% assign prev_url = "#" %}
+    {% assign prev_url = '#' %}
   {% endif %}
 
   <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
@@ -21,7 +19,6 @@
   {% assign right_ellipsis = false %}
 
   {% for i in (1..paginator.total_pages) %}
-
     {% assign pre = paginator.page | minus: 1 %}
     {% assign next = paginator.page | plus: 1 %}
     {% assign pre_less = pre | minus: 1 %}
@@ -47,7 +44,12 @@
     {% if show %}
       <!-- show number -->
       <li class="page-item {% if i == paginator.page %} active{% endif %}">
-        <a class="page-link btn-box-shadow" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}">{{ i }}</a>
+        <a
+          class="page-link btn-box-shadow"
+          href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
+        >
+          {{- i -}}
+        </a>
       </li>
     {% else %}
       <!-- hide number -->
@@ -63,7 +65,6 @@
         {% assign right_ellipsis = true %}
       {% endif %}
     {% endif %}
-
   {% endfor %}
 
   <!-- mobile pagination -->
@@ -76,7 +77,7 @@
   {% if paginator.next_page_path %}
     {% assign next_url = paginator.next_page_path | relative_url %}
   {% else %}
-    {% assign next_url = "#" %}
+    {% assign next_url = '#' %}
   {% endif %}
 
   <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
@@ -84,5 +85,5 @@
       <i class="fas fa-angle-right"></i>
     </a>
   </li>
-
+</ul>
-</ul> <!-- .pagination -->
+<!-- .pagination -->

_includes/post-sharing.html

@@ -1,7 +1,7 @@
 <!-- Post sharing snippet -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.locales[include.lang].post.share }}</span>
+  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
@@ -11,8 +11,8 @@
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
       <a
         href="{{ link }}"
-        data-toggle="tooltip"
+        data-bs-toggle="tooltip"
-        data-placement="top"
+        data-bs-placement="top"
         title="{{ share.type }}"
         target="_blank"
         rel="noopener"
@@ -25,8 +25,8 @@
     <i
       id="copy-link"
       class="fa-fw fas fa-link small"
-      data-toggle="tooltip"
+      data-bs-toggle="tooltip"
-      data-placement="top"
+      data-bs-placement="top"
       title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
       data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
     >

_includes/read-time.html

@@ -20,8 +20,8 @@
 <!-- return element -->
 <span
   class="readtime"
-  data-toggle="tooltip"
+  data-bs-toggle="tooltip"
-  data-placement="bottom"
+  data-bs-placement="bottom"
   title="{{ words }} {{ site.data.locales[include.lang].post.words }}"
 >
   <em>

_includes/refactor-content.html

@@ -271,7 +271,7 @@
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
-      {% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
+      {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
 
       {% assign _new_content = _new_content | append: mark_start
           | append: left | append: anchor | append: right

_includes/related-posts.html

@@ -75,20 +75,18 @@
 
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3
+    <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
-      class="pt-2 mb-4 ml-1"
-      data-toc-skip
-    >
       {{ site.data.locales[include.lang].post.relate_posts }}
     </h3>
-    <div class="card-deck mb-4">
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
       {% for entry in index_list %}
         {% assign index = entry | plus: 0 %}
         {% assign post = site.posts[index] %}
-        <a href="{{ post.url | relative_url }}" class="card post-preview">
+        <div class="col">
+          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
             <div class="card-body">
               {% include datetime.html date=post.date class="small" lang=include.lang %}
-            <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
+              <h3 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h3>
               <div class="text-muted small">
                 <p>
                   {% include no-linenos.html content=post.content %}
@@ -97,6 +95,7 @@
               </div>
             </div>
           </a>
+        </div>
       {% endfor %}
     </div>
     <!-- .card-deck -->

_includes/search-loader.html

@@ -4,7 +4,7 @@
 -->
 
 {% capture result_elem %}
-<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
+<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
   <a href="{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
     {categories}
@@ -19,6 +19,7 @@
 <script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
 
 <script>
+  
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('search-results'),
@@ -30,7 +31,7 @@ SimpleJekyllSearch({
       if (value === '') {
         return `${value}`;
       } else {
-        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+        return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
       }
     }
 
@@ -43,4 +44,5 @@ SimpleJekyllSearch({
     }
   }
 });
+
 </script>

_includes/search-results.html

@@ -1,8 +1,7 @@
-<!--
+<!-- The Search results -->
-  The Search results
+
--->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-sm-11 post-content">
+  <div class="col-11 post-content">
     <div id="search-hints">
       {% include trending-tags.html %}
     </div>

_includes/sidebar.html

@@ -20,11 +20,11 @@
     <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
-    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
+    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
   </div>
   <!-- .profile-wrapper -->
 
-  <ul class="flex-grow-1 w-100 pl-0">
+  <ul class="nav flex-column flex-grow-1 w-100 ps-0">
     <!-- home -->
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">

_includes/toc.html

@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+  <div id="toc-wrapper" class="ps-0 pe-4 mb-5">
-    <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
+    <div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
     <nav id="toc"></nav>
   </div>
 

_includes/topbar.html

@@ -1,7 +1,10 @@
 <!-- The Top Bar -->
 
 <div id="topbar-wrapper">
-  <div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
+  <div
+    id="topbar"
+    class="container d-flex align-items-center justify-content-between h-100 px-3 px-md-4 px-xxl-5"
+  >
     <span id="breadcrumb">
       {% assign paths = page.url | split: '/' %}
 

_includes/trending-tags.html

@@ -36,7 +36,7 @@
 {% if trending_tags.size > 0 %}
   <div id="access-tags">
     <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
-    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
+    <div class="d-flex flex-wrap mt-3 mb-1 me-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
         <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>

_includes/update-list.html

@@ -26,7 +26,7 @@
 {% if update_list.size > 0 %}
   <div id="access-lastmod" class="post">
     <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
-    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+    <ul class="post-content ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}

_javascript/modules/components/back-to-top.js

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

_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,17 +61,21 @@ function resumeIcon(btn) {
 
 export function initClipboard() {
   // Initial the clipboard.js object
-  const clipboard = new ClipboardJS(btnSelector, {
+  if ($(clipboardSelector).length) {
+    const clipboard = new ClipboardJS(clipboardSelector, {
       target(trigger) {
         let codeBlock = trigger.parentNode.nextElementSibling;
         return codeBlock.querySelector('code .rouge-code');
       }
     });
 
-  $(btnSelector).tooltip({
+    const clipboardList = document.querySelectorAll(clipboardSelector);
-    trigger: 'hover',
+    [...clipboardList].map(
+      (elem) =>
+        new bootstrap.Tooltip(elem, {
           placement: 'left'
-  });
+        })
+    );
 
     clipboard.on('success', (e) => {
       e.clearSelection();
@@ -91,6 +95,7 @@ export function initClipboard() {
         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 () {
+  $topbarTitle.on('click', () => window.scrollTo(0, 0));
-    $('body,html').animate({ scrollTop: 0 }, 800);
-  });
 }

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

_javascript/modules/plugins.js

@@ -4,5 +4,4 @@ export { imgLazy } from './components/img-lazyload';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
 export { initPageviews } from './components/pageviews';
-export { smoothScroll } from './components/smooth-scroll';
 export { toc } from './components/toc';

_javascript/page.js

@@ -1,10 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import {
+import { imgLazy, imgPopup, initClipboard } from './modules/plugins';
-  imgLazy,
-  imgPopup,
-  initClipboard,
-  smoothScroll
-} from './modules/plugins';
 
 basic();
 initSidebar();
@@ -12,4 +7,3 @@ initTopbar();
 imgLazy();
 imgPopup();
 initClipboard();
-smoothScroll();

_javascript/post.js

@@ -4,7 +4,6 @@ import {
   imgPopup,
   initLocaleDatetime,
   initClipboard,
-  smoothScroll,
   initPageviews,
   toc
 } from './modules/plugins';
@@ -17,5 +16,4 @@ imgPopup();
 initLocaleDatetime();
 initClipboard();
 toc();
-smoothScroll(); // must be called after toc is created
 initPageviews();

_layouts/archives.html

@@ -23,7 +23,7 @@ layout: page
   <li>
   {% assign ts = post.date | date: '%s' %}
     <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-    <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+    <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
       {{ post.date | date: df_strftime_m }}
     </span>
     <a href="{{ post.url | relative_url }}">{{ post.title }}</a>

_layouts/categories.html

@@ -38,11 +38,11 @@ layout: page
         id="{{ HEAD_PREFIX }}{{ group_index }}"
         class="card-header d-flex justify-content-between hide-border-bottom"
       >
-        <span>
+        <span class="ms-2">
           <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
 
           {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
-          <a href="{{ _category_url | relative_url }}" class="ml-1 mr-2">{{ category_name }}</a>
+          <a href="{{ _category_url | relative_url }}" class="mx-2">{{ category_name }}</a>
 
           <!-- content count -->
           {% assign top_posts_size = site.categories[category_name] | size %}
@@ -83,7 +83,7 @@ layout: page
         {% if sub_categories_size > 0 %}
           <a
             href="#{{ LIST_PREFIX }}{{ group_index }}"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             aria-expanded="true"
             aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
             class="category-trigger hide-border-bottom"
@@ -91,7 +91,7 @@ layout: page
             <i class="fas fa-fw fa-angle-down"></i>
           </a>
         {% else %}
-          <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+          <span data-bs-toggle="collapse" class="category-trigger hide-border-bottom disabled">
             <i class="fas fa-fw fa-angle-right"></i>
           </span>
         {% endif %}
@@ -107,7 +107,7 @@ layout: page
                 <i class="far fa-folder fa-fw"></i>
 
                 {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
-                <a href="{{ _sub_ctg_url | relative_url }}" class="ml-1 mr-2">{{ sub_category }}</a>
+                <a href="{{ _sub_ctg_url | relative_url }}" class="mx-2">{{ sub_category }}</a>
 
                 {% assign posts_size = site.categories[sub_category] | size %}
                 <span class="text-muted small font-weight-light">

_layouts/category.html

@@ -6,15 +6,15 @@ layout: page
 {% include lang.html %}
 
 <div id="page-category">
-  <h1 class="pl-lg-2">
+  <h1 class="ps-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
 
-  <ul class="post-content pl-0">
+  <ul class="post-content ps-0">
     {% for post in page.posts %}
-      <li class="d-flex justify-content-between pl-md-3 pr-md-3">
+      <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
         {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}

_layouts/default.html

@@ -25,7 +25,7 @@ layout: compress
     {% include topbar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container pl-xl-4 pr-xl-4">
+      <div id="main" class="container px-xxl-5">
         {{ content }}
       </div>
 
@@ -52,16 +52,19 @@ layout: compress
         role="alert"
         aria-live="assertive"
         aria-atomic="true"
-        data-animation="true"
+        data-bs-animation="true"
-        data-autohide="false"
+        data-bs-autohide="false"
       >
         <div class="toast-header">
-          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
+          <button
-            <span aria-hidden="true">&times;</span>
+            type="button"
-          </button>
+            class="btn-close ms-auto"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+          ></button>
         </div>
         <div class="toast-body text-center pt-0">
-          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
+          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
           <button type="button" class="btn btn-primary" aria-label="Update">
             {{ site.data.locales[lang].notification.update }}
           </button>

_layouts/home.html

@@ -52,11 +52,11 @@ refactor: true
         {% endif %}
 
         <div class="card-body d-flex flex-column">
-          <h1 class="card-title">
+          <h1 class="card-title my-2 mt-md-0">
             {{ post.title }}
           </h1>
 
-          <div class="card-text post-content">
+          <div class="card-text post-content mt-0 mb-2">
             <p>
               {% include no-linenos.html content=post.content %}
               {{ content | markdownify | strip_html | truncate: 200 | escape }}
@@ -64,14 +64,14 @@ refactor: true
           </div>
 
           <div class="post-meta flex-grow-1 d-flex align-items-end">
-            <div class="mr-auto">
+            <div class="me-auto">
               <!-- posted date -->
-              <i class="far fa-calendar fa-fw mr-1"></i>
+              <i class="far fa-calendar fa-fw me-1"></i>
               {% include datetime.html date=post.date lang=lang %}
 
               <!-- categories -->
               {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw mr-1"></i>
+                <i class="far fa-folder-open fa-fw me-1"></i>
                 <span class="categories">
                   {% for category in post.categories %}
                     {{ category }}
@@ -82,7 +82,7 @@ refactor: true
             </div>
 
             {% if post.pin %}
-              <div class="pin ml-1">
+              <div class="pin ms-1">
                 <i class="fas fa-thumbtack fa-fw"></i>
                 <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
               </div>

_layouts/page.html

@@ -7,12 +7,12 @@ layout: default
 
 <div class="row">
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
     {% capture padding %}
-      {% unless page.layout == 'home' %}pl-1 pr-1{% endunless %}
+      {% unless page.layout == 'home' %}px-1{% endunless %}
     {% endcapture %}
 
-    <div class="post {{ padding | strip }} pl-md-2 pr-md-2">
+    <div class="post {{ padding | strip }} px-md-2">
       {% capture _content %}
       {% if layout.refactor or page.layout == 'page' %}
         {% include refactor-content.html content=content lang=lang %}
@@ -38,7 +38,7 @@ layout: default
   <!-- #core-wrapper -->
 
   <!-- panel -->
-  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
+  <div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
     <div class="access">
       {% include update-list.html lang=lang %}
       {% include trending-tags.html lang=lang %}
@@ -54,7 +54,7 @@ layout: default
 <!-- tail -->
 {% if layout.tail_includes %}
   <div class="row">
-    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4 mt-5">
+    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
       {% for _include in layout.tail_includes %}
         {% assign _include_path = _include | append: '.html' %}
         {% include {{ _include_path }} lang=lang %}

_layouts/post.html

@@ -98,7 +98,7 @@ tail_includes:
   <!-- categories -->
   {% if page.categories.size > 0 %}
   <div class="post-meta mb-3">
-    <i class="far fa-folder-open fa-fw mr-1"></i>
+    <i class="far fa-folder-open fa-fw me-1"></i>
     {% for category in page.categories %}
       <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
       {%- unless forloop.last -%}, {%- endunless -%}
@@ -109,7 +109,7 @@ tail_includes:
   <!-- tags -->
   {% if page.tags.size > 0 %}
   <div class="post-tags">
-    <i class="fa fa-tags fa-fw mr-1"></i>
+    <i class="fa fa-tags fa-fw me-1"></i>
       {% for tag in page.tags %}
       <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
           class="post-tag no-text-decoration" >

_layouts/tag.html

@@ -6,14 +6,14 @@ layout: page
 {% include lang.html %}
 
 <div id="page-tag">
-  <h1 class="pl-lg-2">
+  <h1 class="ps-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
-  <ul class="post-content pl-0">
+  <ul class="post-content ps-0">
     {% for post in page.posts %}
-      <li class="d-flex justify-content-between pl-md-3 pr-md-3">
+      <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
         {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}

_layouts/tags.html

@@ -3,9 +3,8 @@ layout: page
 # All the Tags of posts.
 ---
 
-<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
+<div id="tags" class="d-flex flex-wrap mx-xl-2">
-
+  {% assign tags = '' | split: '' %}
-  {% assign tags = "" | split: "" %}
   {% for t in site.tags %}
     {% assign tags = tags | push: t[0] %}
   {% endfor %}
@@ -15,9 +14,9 @@ layout: page
   {% for t in sorted_tags %}
     <div>
       <a class="tag" href="{{ t | slugify | url_encode | prepend: '/tags/' | append: '/' | relative_url }}">
-        {{ t }}<span class="text-muted">{{ site.tags[t].size }}</span>
+        {{ t -}}
+        <span class="text-muted">{{ site.tags[t].size }}</span>
       </a>
     </div>
   {% endfor %}
-
 </div>

_sass/addon/commons.scss

@@ -79,6 +79,8 @@ h5 {
 
 a {
   @extend %link-color;
+
+  text-decoration: none;
 }
 
 img {
@@ -200,13 +202,8 @@ footer {
   a {
     @extend %text-color;
 
-    &:link {
-      @extend %no-decoration;
-    }
-
     &:hover {
       @extend %link-hover;
-      @extend %no-decoration;
     }
   }
 
@@ -657,10 +654,6 @@ i {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-.no-text-decoration {
-  @extend %no-decoration;
-}
-
 /* overwrite bootstrap muted */
 .text-muted {
   color: var(--text-muted-color) !important;
@@ -763,10 +756,6 @@ $btn-mb: 0.5rem;
 
   a {
     @extend %sidebar-links;
-
-    &:hover {
-      @extend %no-decoration;
-    }
   }
 
   #avatar {
@@ -1263,8 +1252,6 @@ $btn-mb: 0.5rem;
   }
 
   &.toast {
-    display: none;
-
     &.show {
       display: block;
       min-width: 20rem;
@@ -1615,7 +1602,7 @@ $btn-mb: 0.5rem;
 
   #search-wrapper {
     margin-right: calc(
-      #{$main-content-max-width} * 0.25 - #{$search-max-width}
+      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
@@ -1623,6 +1610,8 @@ $btn-mb: 0.5rem;
   #main,
   footer > .container {
     max-width: $main-content-max-width;
+    padding-left: 1.75rem !important;
+    padding-right: 1.75rem !important;
   }
 
   #core-wrapper,

_sass/addon/module.scss

@@ -122,10 +122,6 @@
   -webkit-box-orient: vertical;
 }
 
-%no-decoration {
-  text-decoration: none;
-}
-
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {

_sass/addon/syntax.scss

@@ -117,10 +117,6 @@ code {
   blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
@@ -176,7 +172,7 @@ div {
   align-items: center;
   height: $code-header-height;
   margin-left: 1rem;
-  margin-right: 0.25rem;
+  margin-right: 0.5rem;
 
   /* the label block */
   span {

_sass/colors/dark-typography.scss

@@ -115,10 +115,6 @@
   }
 
   .categories {
-    &.card {
-      border-color: var(--main-border-color);
-    }
-
     .card-header {
       background-color: var(--card-header-bg);
     }

_sass/colors/light-typography.scss

@@ -98,6 +98,7 @@
   }
 
   /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
   --categories-hover-bg: var(--btn-border-color);
   --categories-icon-hover-color: darkslategray;
 

_sass/layout/categories.scss

@@ -8,6 +8,7 @@
 
 .categories {
   margin-bottom: 2rem;
+  border-color: var(--categories-border);
 
   &.card,
   .list-group {
@@ -15,8 +16,16 @@
   }
 
   .card-header {
-    padding-right: 12px;
+    $radius: calc($base-radius - 1px);
-    border-radius: $base-radius $base-radius 0 0;
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   i {
@@ -34,6 +43,10 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    &:last-child {
+      border-bottom: 0;
+    }
   }
 } /* .categories */
 

_sass/layout/home.scss

@@ -43,7 +43,6 @@
 
       .card-title {
         @extend %text-clip;
-        @include mt-mb(0.5rem);
 
         font-size: 1.25rem;
       }
@@ -53,9 +52,6 @@
       }
 
       .card-text.post-content {
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-
         @extend %muted;
 
         p {
@@ -160,11 +156,6 @@
         width: 60%;
         padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
-        .card-title {
-          margin-top: 0;
-          margin-bottom: 0.5rem;
-        }
-
         .card-text {
           display: inherit !important;
         }
@@ -183,11 +174,6 @@
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  #post-list .card {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-  }
-
   .pagination {
     justify-content: space-evenly;
 

_sass/layout/post.scss

@@ -347,13 +347,10 @@ h1 + .post-meta {
     -webkit-box-orient: vertical;
   }
 
-  a:hover {
-    @extend %no-decoration;
-  }
-
   .card {
     h3 {
       @extend %text-color;
+      @extend %text-clip;
     }
   }
 }