Upgrade to bootstrap 5

config.yml

@@ -175,6 +175,8 @@ module:
       target: static/fonts/jetbrains-mono
     - source: node_modules/@fontsource-variable/quicksand
       target: static/fonts/quicksand
+    - source: node_modules/bootstrap/dist/js
+      target: static/js
 
 markup:
   goldmark:

layouts/partials/carousel.html

@@ -5,7 +5,7 @@
     style="gap: 1em 1em; overflow-x: scroll"
 >
     {{ range sort .Site.Params.carousel "weight" }}
-    <figure class="my-5 mr-5 text-center" style="min-width: 65vw">
+    <figure class="my-5 me-5 text-center" style="min-width: 65vw">
         <a href="{{ .image }}">
             <img
                 class="rounded img-thumbnail"

layouts/partials/cta-join.html

@@ -2,7 +2,7 @@
 <section id="cta">
     <div class="container">
         <div class="cta-content">
-            <h2 class="display-5 font-weight-bold mb-4">
+            <h2 class="display-5 fw-bold mb-4">
                 {{ i18n "cta-account-title" }}
             </h2>
             <div class="row mb-4">

layouts/partials/cta-newsletter.html

@@ -9,7 +9,7 @@
                     <div
                         class="col-lg-7 d-flex flex-column justify-content-center"
                     >
-                        <h2 class="font-weight-bold">
+                        <h2 class="fw-bold">
                             {{ i18n "cta-newsletter-title" }}
                         </h2>
                         <p class="lead mb-0">
@@ -50,7 +50,7 @@
                         >
                             {{ i18n "cta-newsletter-button1" }}
                         </button>
-                        <small class="form-text text-justify my-2">
+                        <small class="form-text my-2">
                             {{ i18n "cta-newsletter-no-spam" }}
                         </small>
                     </form>

layouts/partials/downloads.html

@@ -12,7 +12,7 @@
                 />
             </div>
             <div class="col">
-                <h3 class="font-weight-bolder">
+                <h3 class="fw-bolder">
                     {{ i18n "downloads-title" }}
                     <span class="text-muted">
                         {{ i18n "downloads-subtitle" }}

layouts/partials/features.html

@@ -14,7 +14,7 @@
 
         <div class="alert alert-warning my-5 d-flex">
             <div class="display-2">🏗️</div>
-            <div class="ml-2 flex-fill">
+            <div class="ms-2 flex-fill">
                 <p class="lead">{{ i18n "features-wip-lead" }}</p>
                 <p>
                     {{ i18n "features-wip-p1-start" }}
@@ -59,10 +59,10 @@
                     {{ end }}
                     <div class="card-body align-items-center">
                         <div class="d-flex flex-column justify-content-center">
-                            <h4 class="card-title font-weight-bolder">
+                            <h4 class="card-title fw-bolder">
                                 {{ index .title $.Language.Lang }}
                             </h4>
-                            <p class="card-text text-justify">
+                            <p class="card-text">
                                 {{ index .content $.Language.Lang }}
                             </p>
                             {{ if and .link .link.link }}

layouts/partials/jumbo.html

@@ -1,5 +1,5 @@
 <section
-    class="jumbotron mt-n1 mb-0"
+    class="py-5 mt-n1 mb-0"
     style="
         background: linear-gradient(
             135deg,
@@ -23,7 +23,7 @@
                         class="col col-sm-8 offset-sm-2 col-md-10 offset-md-1 col-xl-8 offset-xl-2"
                     >
                         <h2
-                            class="display-4 text-center text-dark font-weight-bold"
+                            class="display-4 text-center text-dark fw-bold"
                             style="text-wrap: balance"
                         >
                             {{ i18n "slogan" | safeHTML }}
@@ -36,17 +36,15 @@
                 </p>
                 <div class="mt-5 py-2 d-none d-md-flex justify-content-center">
                     <a
-                        class="btn btn-lg btn-primary px-4 mr-3"
+                        class="btn btn-lg btn-primary px-4 me-3"
                         data-umami-event="jumbo-tryit"
                         href="{{ .Site.Params.tryit }}?lang={{ .Language }}"
-                        style="border-radius: 2em"
                         >{{ i18n "tryit" }} &#187;</a
                     >
                     <a
-                        class="btn btn-lg btn-outline-secondary px-4 ml-3"
+                        class="btn btn-lg btn-outline-secondary px-4 ms-3"
                         data-umami-event="jumbo-downloads"
                         href="#downloads"
-                        style="border-radius: 2em"
                         >{{ i18n "downloadit" }}</a
                     >
                 </div>

layouts/partials/nav.html

@@ -62,8 +62,8 @@
         <button
             class="navbar-toggler"
             type="button"
-            data-toggle="collapse"
-            data-target="#navbarCollapse"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarCollapse"
             aria-controls="navbarCollapse"
             aria-expanded="false"
             aria-label="Toggle navigation"
@@ -82,7 +82,7 @@
                         href="#"
                         id="navbarDropdown"
                         role="button"
-                        data-toggle="dropdown"
+                        data-bs-toggle="dropdown"
                         aria-haspopup="true"
                         aria-expanded="false"
                     >
@@ -121,23 +121,22 @@
                 </div>
                 <div class="nav-item dropdown">
                     <a
-                        class="nav-link dropdown-toggle"
+                        class="btn btn-outline-secondary dropdown-toggle"
                         href="#"
-                        id="navbarDropdown"
+                        id="navbarLangDropdown"
                         role="button"
-                        data-toggle="dropdown"
-                        aria-haspopup="true"
+                        data-bs-toggle="dropdown"
                         aria-expanded="false"
                     >
-                        {{ .Language }}
+                        <i class="bi bi-globe"></i> {{ .Language.Lang | upper }}
                     </a>
                     <div
-                        class="dropdown-menu dropdown-menu-right"
-                        aria-labelledby="navbarDropdown"
+                        class="dropdown-menu dropdown-menu-end"
+                        aria-labelledby="navbarLangDropdown"
                     >
                         {{ range .Site.Home.AllTranslations }}
                         <a href="{{ .Permalink }}" class="dropdown-item"
-                            >{{ .Language }}</a
+                            >{{ .Language.LanguageName }}</a
                         >
                         {{ end }}
                     </div>

layouts/partials/scripts.html

@@ -1,5 +1,4 @@
-<script src="/js/jquery.slim.min.js"></script>
-<script src="/js/bootstrap.min.js"></script>
+<script src="/js/bootstrap.bundle.min.js"></script>
 <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
 <script>
     window.addEventListener("scroll", function () {

layouts/partials/survey.html

@@ -17,15 +17,13 @@
         <div class="col align-self-center font-weigth-bolder">
             <button
                 type="button"
-                class="close float-right"
+                class="btn-close btn-close-white float-end"
                 aria-label="Close"
                 onclick="
                     document.getElementById('voxppl').style.display = 'none';
                     return false;
                 "
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
+            ></button>
             <strong>{{ i18n "survey-title" | markdownify }}</strong><br />
             {{ i18n "survey-text" | markdownify }}
         </div>

layouts/partials/usage_footer.html

@@ -2,13 +2,13 @@
 <div class="container mt-5 mb-4">
   <div class="row py-5">
     <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
-      <h4 class="font-weight-bold mb-3">
+      <h4 class="fw-bold mb-3">
         {{ i18n "footer-try-title-line1" }}<br>
         {{ i18n "footer-try-title-line2" }}
       </h4>
 
       <p>
-        happy<span class="font-weight-bold">Domain</span> {{ i18n "footer-try-text" }}
+        happy<span class="fw-bold">Domain</span> {{ i18n "footer-try-text" }}
       </p>
 
       <p>
@@ -60,10 +60,10 @@
   <div class="container my-4">
     <div class="row">
       <div class="order-0 col-md-5 offset-md-1 align-self-center text-center">
-        <h3 class="font-weight-bolder">{{ i18n "footer-us-title" }}</h3>
+        <h3 class="fw-bolder">{{ i18n "footer-us-title" }}</h3>
       </div>
       <div class="order-1 col-md-5">
-        <h4 class="font-weight-bold mb-3">
+        <h4 class="fw-bold mb-3">
           {{ i18n "footer-us-text-lead" }}
         </h4>