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

_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-autohide="false"
+        data-bs-animation="true"
+        data-bs-autohide="false"
       >
         <div class="toast-header">
-          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
+          <button
+            type="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">
-
-  {% assign tags = "" | split: "" %}
+<div id="tags" class="d-flex flex-wrap mx-xl-2">
+  {% 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>