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

_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="d-flex justify-content-center align-items-center text-muted ml-md-3 mr-md-3">
+  <div class="container px-lg-4">
+    <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-placement="top"
+            data-bs-toggle="tooltip"
+            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 %}
@@ -37,7 +34,7 @@
         {% assign show = true %}
       {% endif %}
     {% else %}
-      {% if i == 1 or i == paginator.total_pages%}
+      {% if i == 1 or i == paginator.total_pages %}
         {% assign show = true %}
       {% elsif i >= pre and i <= next %}
         {% assign show = true %}
@@ -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> <!-- .pagination -->
+</ul>
+<!-- .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-placement="top"
+        data-bs-toggle="tooltip"
+        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-placement="top"
+      data-bs-toggle="tooltip"
+      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-placement="bottom"
+  data-bs-toggle="tooltip"
+  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,28 +75,27 @@
 
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3
-      class="pt-2 mb-4 ml-1"
-      data-toc-skip
-    >
+    <h3 class="pt-2 mb-4 ms-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="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>
-            <div class="text-muted small">
-              <p>
-                {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+        <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 my-2" data-toc-skip>{{ post.title }}</h3>
+              <div class="text-muted small">
+                <p>
+                  {% include no-linenos.html content=post.content %}
+                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
+                </p>
+              </div>
             </div>
-          </div>
-        </a>
+          </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 class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
+  <div id="toc-wrapper" class="ps-0 pe-4 mb-5">
+    <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] %}