Migrate to Bootstrap 5 (#918)

* Migrate to Bootstrap 5

* Fix dropdown

* Fix horizontal line color

* Fix vertical line

* Migrate bootstrap on example site

* Fix style issue + scroll spy

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

assets/styles/components/buttons.scss

@@ -49,6 +49,15 @@
   color: get-light-color('muted-text-color');
 }
 
+.navbar-toggler {
+  border: none;
+  &:focus {
+    border: none;
+    outline: none !important;
+    box-shadow: none;
+  }
+}
+
 .tags {
   text-align: left;
   padding-top: 0.5em;

assets/styles/components/cards.scss

@@ -50,6 +50,7 @@
 
   .post-card-link {
     text-decoration: none !important;
+    color: get-light-color('text-color');
   }
 
   .card {

assets/styles/components/links.scss

@@ -2,6 +2,10 @@ a {
   color: get-light-color('accent-color');
   @include transition();
 
+  &:link {
+    text-decoration: none;
+  }
+
   &:hover,
   &:focus {
     text-decoration: get-light-color('hover-over-accent-color') underline;

assets/styles/layouts/single.scss

@@ -184,6 +184,7 @@ body.kind-page {
 
   #scroll-to-top {
     position: fixed;
+    border: none;
     bottom: 0rem;
     right: 1rem;
     color: get-light-color('accent-color');

assets/styles/navigators/navbar.scss

@@ -27,6 +27,7 @@
 
   .navbar-brand {
     color: get-light-color('heading-color');
+    text-decoration: none !important;
     font-weight: 600;
     img {
       width: 42px;

assets/styles/sections/experiences.scss

@@ -32,14 +32,14 @@
 
       &::after {
         content: '';
-        position: absolute;
+        position: relative;
         border-left: 3px solid get-light-color('accent-color');
         z-index: 1;
         height: 100%;
-        left: 50%;
+        left: -23px;
       }
       &:nth-child(even)::after {
-        left: calc(50% - 3px) !important;
+        left: -26px;
       }
     }
     .horizontal-line {
@@ -52,6 +52,7 @@
         margin: 0;
         top: 17px;
         position: relative;
+        opacity: 1;
       }
       .timeline-side-div {
         display: flex;

exampleSite/package-lock.json

@@ -11,7 +11,7 @@
         "@fontsource/mulish": "4.5.13",
         "@fortawesome/fontawesome-free": "^6.2.0",
         "autoprefixer": "^10.4.13",
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
         "eslint": "^8.31.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-config-standard": "^17.0.0",
@@ -191,6 +191,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -474,9 +485,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "funding": [
         {
@@ -489,8 +500,7 @@
         }
       ],
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
@@ -2779,13 +2789,6 @@
       "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==",
       "dev": true
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

exampleSite/package.json

@@ -35,7 +35,7 @@
     "@fontsource/mulish": "4.5.13",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",

layouts/_default/baseof.html

@@ -24,7 +24,7 @@
     </script>
   </head>
 
-  <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">
+  <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="80">
     <div class="container-fluid bg-secondary wrapper">
       <!----- ADD NAVBAR --------------->
       {{ block "navbar" . }} {{ end }}

layouts/_default/search.html

@@ -58,8 +58,8 @@
                   {{ end }}
                 </div>
                 <div class="card-footer">
-                  <span class="float-left">${date}</span>
-                  <a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
+                  <span class="float-start">${date}</span>
+                  <a href="${link}" class="float-end btn btn-outline-info btn-sm">Read</a>
                 </div>
               </div>
           </div>

layouts/_default/single.html

@@ -37,7 +37,7 @@
       <!--Content Start-->
       <div class="page-content">
         {{ if site.Params.features.blog.showAuthor | default true }}
-        <div class="author-profile ml-auto align-self-lg-center">
+        <div class="author-profile ms-auto align-self-lg-center">
           <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
@@ -51,7 +51,7 @@
         </div>
 
         {{ if not (site.Params.features.blog.showAuthor | default true) }}
-        <div class="author-profile ml-auto align-self-lg-center">
+        <div class="author-profile ms-auto align-self-lg-center">
           <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
         </div>
         {{ end }}
@@ -64,7 +64,7 @@
         </div>
 
         <!-- Share or Contribute -->
-        <div class="row pl-3 pr-3">
+        <div class="row ps-3 pe-3">
         <!--Social Media Share Buttons-->
           <div class="col-md-6 share-buttons">
           {{ if site.Params.features.blog.shareButtons }}
@@ -165,7 +165,7 @@
     </div>
   </div>
   <!--scroll back to top-->
-  <a id="scroll-to-top" class="btn"  data-toggle="tooltip" data-placement="left" title="Scroll to top">
+  <a id="scroll-to-top" class="btn" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Scroll to top">
     <i class="fas fa-chevron-circle-up"></i>
   </a>
 </section>
@@ -175,7 +175,7 @@
   <section class="toc-section" id="toc-section">
     {{ if and site.Params.features.toc.enable ( .Params.enableTOC | default true ) }}
     <div class="toc-holder">
-      <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
+      <h5 class="text-center ps-3">{{ i18n "toc_heading" }}</h5>
       <hr>
       <div class="toc">
         {{ .TableOfContents }}

layouts/index.html

@@ -29,7 +29,7 @@
       document.documentElement.setAttribute('data-theme', theme);
     </script>
   </head>
-  <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
+  <body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100">
 
     <!--- NAVBAR ------------------------->
     {{- partial "navigators/navbar.html" . -}}

layouts/partials/cards/accomplishments.html

@@ -4,7 +4,7 @@
       <h5 class="card-title mb-0">{{ .name }}</h5>
       <div class="sub-title">
         <span><a href="{{ .organization.url }}" title="{{ .organization.name }}" target="_blank" rel="noopener">{{ .organization.name }}</a></span>
-        <span class="ml-2">{{ .timeline }}</span>
+        <span class="ms-2">{{ .timeline }}</span>
       </div>
     </div>
     <div class="card-body">
@@ -12,7 +12,7 @@
     </div>
     <div class="card-footer">
       {{ if .certificateURL }}
-        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
+        <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
       {{ end }}
     </div>
   </div>

layouts/partials/cards/post.html

@@ -15,12 +15,12 @@
       {{ end }}
     </div>
     <div class="card-footer">
-      <span class="float-left">
+      <span class="float-start">
           {{ .Date | time.Format ":date_full" }}
           {{ if site.Params.features.readingTime }} | {{.ReadingTime}} {{ i18n "minute" .ReadingTime }} {{ end }}</span>
       <a
       href="{{ .RelPermalink | relLangURL }}"
-      class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
+      class="float-end btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
     </div>
   </div>
 </div>

layouts/partials/cards/publication.html

@@ -12,11 +12,11 @@
       <h5 class="card-title mb-0">{{ .title }}</h5>
       <div class="sub-title">
         <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
-        <span class="ml-2">{{ .publishedIn.date }}</span>
+        <span class="ms-2">{{ .publishedIn.date }}</span>
       </div>
       <div class="authors">
         {{ range $index,$author:= .authors }}
-          <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
+          <span class="me-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
         {{ end }}
       </div>
     </div>
@@ -26,13 +26,13 @@
     <div class="card-footer">
       <div class="tags">
         {{ range $index,$tag:= .tags }}
-            <span class="btn badge btn-info ml-1 p-2">
+            <span class="btn badge btn-info ms-1 p-2">
               {{ $tag }}
             </span>
         {{ end }}
       </div>
       <div class="details-btn">
-        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+        <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
       </div>
     </div>
   </div>

layouts/partials/footer.html

@@ -66,7 +66,7 @@
 
   <footer id="footer" class="container-fluid text-center align-content-center footer pb-2">
     <div class="container pt-5">
-      <div class="row text-left">
+      <div class="row text-start">
         {{ if $navigationEnabled }}
         <div class="col-md-4 col-sm-12">
           <h5>{{ i18n "navigation" }}</h5>
@@ -193,7 +193,7 @@
     {{ if $credentialsEnabled }}
     <hr />
     <div class="container">
-      <div class="row text-left">
+      <div class="row text-start">
         <div class="col-md-4">
           <a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener">
             <img src="{{ $themeLogo }}" alt="Toha Theme Logo">
@@ -201,7 +201,7 @@
           </a>
         </div>
         <div class="col-md-4 text-center">{{ $copyrightNotice | markdownify }}</div>
-        <div class="col-md-4 text-right">
+        <div class="col-md-4 text-end">
           <a id="hugo" href="https://gohugo.io/" target="_blank" rel="noopener">{{ i18n "hugoAttributionText" }}
           <img
             src="{{ $hugoLogo }}"

layouts/partials/navigators/lang-selector.html

@@ -3,7 +3,7 @@
   {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
 {{ end }}
 <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {{ if ne site.Params.features.flags.enable false }}
             {{ $countryCode := partial "helpers/country-code.html" . }}
             <span class="flag-icon flag-icon-{{$countryCode}}"></span>

layouts/partials/navigators/navbar.html

@@ -74,15 +74,15 @@
       class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}"
       id="navbar-toggler"
       type="button"
-      data-toggle="collapse"
-      data-target="#top-nav-items"
+      data-bs-toggle="collapse"
+      data-bs-target="#top-nav-items"
       aria-label="menu"
     >
       <i data-feather="menu"></i>
     </button>
 
     <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
-      <ul class="nav navbar-nav ml-auto">
+      <ul class="nav navbar-nav ms-auto">
         <li class="nav-item">
           <a class="nav-link" href="{{ if .IsHome }}#home{{else}}{{ site.BaseURL | relLangURL }}#home{{end}}">{{ i18n "home" }}</a>
         </li>
@@ -100,7 +100,7 @@
           {{- end }}
           {{ if gt $sectionCount $maxVisibleSections }}
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                 {{ $sectionCount := 1 }}
                 {{ range sort $sections "section.weight" }}

layouts/partials/navigators/theme-selector.html

@@ -1,6 +1,6 @@
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
-  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
 </a>
 <div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">

layouts/partials/sections/about.html

@@ -25,7 +25,7 @@
       <p class="p-1 text-justify">
         {{ .summary | markdownify }}
       </p>
-      <div class="text-container ml-auto">
+      <div class="text-container ms-auto">
         <ul class="social-link d-flex">
           {{ range .socialLinks }}
           <li>
@@ -52,7 +52,7 @@
       {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
-    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
+    <div class="col-sm-6 pt-5 ps-md-4 ps-sm-3 pt-sm-0">
       <div class="row">
         {{ range .badges }}
           {{ partial "misc/badge.html" . }}

layouts/partials/sections/achievements/entry.html

@@ -17,11 +17,11 @@
   <i class="fa-solid fa-xmark hidden"></i>
   <i class="fa-solid fa-magnifying-glass-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
-  <div class="caption hidden col-lg-6 text-left" id="caption">
+  <div class="caption hidden col-lg-6 text-start" id="caption">
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
     {{ if .url }}
-      <a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+      <a class="btn btn-info ms-1 ps-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
     {{ end }}
   </div>
   <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>

layouts/partials/sections/education-alt.html

@@ -101,9 +101,9 @@
                                     </ul>
                                 {{ end }}
                                 {{ if gt (len .takenCourses.courses) $collapseAfter }}
-                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
-                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-less-btn" aria-label="{{ i18n "show_less"}}">{{ i18n "show_less"}}</button>
                                 {{ end }}
                             </div>

layouts/partials/sections/education.html

@@ -101,9 +101,9 @@
                                     </ul>
                                 {{ end }}
                                 {{ if gt (len .takenCourses.courses ) $collapseAfter }}
-                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-more-btn">{{ i18n "show_more"}}</button>
-                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
                                     id="show-less-btn">{{ i18n "show_less"}}</button>
                                 {{ end }}
                             </div>

layouts/partials/sections/experiences/vertical-line.html

@@ -1,3 +1,3 @@
 <div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
-  <div class="circle font-weight-bold">{{ add . 1 }}</div>
+  <div class="circle fw-bold">{{ add . 1 }}</div>
 </div>

layouts/partials/sections/projects.html

@@ -11,7 +11,7 @@
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container ml-auto text-center">
+  <div class="container ms-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
       {{ range .buttons }}
       <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">

layouts/partials/sections/publications.html

@@ -11,7 +11,7 @@
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container ml-auto text-center">
+  <div class="container ms-auto text-center">
     <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
       {{ range .buttons }}
       <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">

layouts/partials/sections/recent-posts.html

@@ -29,7 +29,7 @@
   display: flex;
   align-items: center;
   justify-content: center;">
-    <a href="/posts/" title="Show More" class="float-right btn btn-outline-info btn-sm" >
+    <a href="/posts/" title="Show More" class="float-end btn btn-outline-info btn-sm" >
     {{ i18n "show_more"}}</a>
   </div>
   {{ end }}

package-lock.json

@@ -12,7 +12,7 @@
         "@fontsource/mulish": "4.5.13",
         "@fortawesome/fontawesome-free": "^6.2.0",
         "autoprefixer": "^10.4.13",
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
         "eslint": "^8.31.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-config-standard": "^17.0.0",
@@ -150,6 +150,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -352,9 +363,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "funding": [
         {
@@ -367,8 +378,7 @@
         }
       ],
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
@@ -2522,13 +2532,6 @@
       "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==",
       "dev": true
     },
-    "node_modules/jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -3931,6 +3934,13 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "peer": true
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -4063,9 +4073,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "dev": true,
       "requires": {}
     },
@@ -5652,13 +5662,6 @@
       "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==",
       "dev": true
     },
-    "jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==",
-      "dev": true,
-      "peer": true
-    },
     "js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",

package.hugo.json

@@ -27,18 +27,18 @@
     "eslint-plugin-n": "^15.6.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-promise": "^6.1.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "postcss-cli": "^8.3.1",
     "@fontsource/mulish": "4.5.13",
     "@fortawesome/fontawesome-free": "^6.2.0",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "filterizr": "^2.2.4",
     "flag-icon-css": "^4.1.7",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.6.0",
     "imagesloaded": "^5.0.0",
     "ityped": "^1.0.3",
-    "katex": "^0.16.3",
+    "katex": "^0.16.10",
     "mark.js": "^8.11.1",
     "mermaid": "^9.2.1",
     "plyr": "^3.7.2",

package.json

@@ -40,7 +40,7 @@
     "@fontsource/mulish": "4.5.13",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",