build(deps): bump bootstrap from 4.4.1 to 5.5.3

daattali · Sep 28, 2024 · 47a1e07 · 47a1e07
1 parent 3920be6
commit 47a1e07
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 152 deletions.
diff --git a/_includes/footer-scripts.html b/_includes/footer-scripts.html
@@ -6,16 +6,7 @@
 
 {% if layout.common-js %}
   {% for js in layout.common-js %}
-    <!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
-    {% if js contains 'jquery' %}
-      <script>
-        if (typeof jQuery == 'undefined') {
-          document.write('<script src="{{ js | relative_url }}"></scr' + 'ipt>');
-        }
-      </script>
-    {% else %}
-      <script src="{{ js | relative_url }}"></script>
-    {% endif %}
+    <script src="{{ js | relative_url }}"></script>
   {% endfor %}
 {% endif %}
 

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,62 +1,64 @@
 <nav class="navbar navbar-expand-xl navbar-light fixed-top navbar-custom {% if page.nav-short %}top-nav-short-permanent{% else %}top-nav-regular{% endif %}">
+  <div class="container-fluid">
 
-  {%- if site.title-img -%}
-    <a class="navbar-brand navbar-brand-logo" href="{{ '/' | absolute_url }}"><img alt="{{ site.title }} Logo" src="{{ site.title-img | relative_url}}"/></a>
-  {%- elsif site.title -%}
-    <a class="navbar-brand" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
-  {%- endif -%}
+    {%- if site.title-img -%}
+      <a class="navbar-brand navbar-brand-logo" href="{{ '/' | absolute_url }}"><img alt="{{ site.title }} Logo" src="{{ site.title-img | relative_url}}"/></a>
+    {%- elsif site.title -%}
+      <a class="navbar-brand" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
+    {%- endif -%}
 
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-  <div class="collapse navbar-collapse" id="main-navbar">
-    <ul class="navbar-nav ml-auto">
-      {%- for link in site.navbar-links -%}
-        {%- if link[1].first %}
-          <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">{{ link[0] }}</a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-              {%- for childlink in link[1] -%}
-                {%- for linkparts in childlink %}
-                  <a class="dropdown-item" href="{{ linkparts[1] | relative_url }}">{{ linkparts[0] }}</a>
-                {%- endfor -%}
-              {%- endfor %}
-            </div>
-          </li>
-        {% else %}
+    <div class="collapse navbar-collapse" id="main-navbar">
+      <ul class="navbar-nav ms-auto">
+        {%- for link in site.navbar-links -%}
+          {%- if link[1].first %}
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ link[0] }}</a>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                {%- for childlink in link[1] -%}
+                  {%- for linkparts in childlink %}
+                    <a class="dropdown-item" href="{{ linkparts[1] | relative_url }}">{{ linkparts[0] }}</a>
+                  {%- endfor -%}
+                {%- endfor %}
+              </div>
+            </li>
+          {% else %}
+            <li class="nav-item">
+              <a class="nav-link" href="{{ link[1] | relative_url }}">{{ link[0] }}</a>
+            </li>
+          {%- endif -%}
+        {%- endfor -%}
+        {% if site.post_search %}
           <li class="nav-item">
-            <a class="nav-link" href="{{ link[1] | relative_url }}">{{ link[0] }}</a>
+            <a class="nav-link" id="nav-search-link" href="#" title="Search">
+              <span id="nav-search-icon" class="fa fa-search"></span>
+              <span id="nav-search-text">Search</span>
+            </a>
           </li>
         {%- endif -%}
-      {%- endfor -%}
-      {% if site.post_search %}
-        <li class="nav-item">
-          <a class="nav-link" id="nav-search-link" href="#" title="Search">
-            <span id="nav-search-icon" class="fa fa-search"></span>
-            <span id="nav-search-text">Search</span>
-          </a>
-        </li>
-      {%- endif -%}
-    </ul>
-  </div>
+      </ul>
+    </div>
 
-  {% if site.navbar-extra %}
-    {% for file in site.navbar-extra %}
-      {% include {{ file }} %}
-    {% endfor %}
-  {% endif %}
+    {% if site.navbar-extra %}
+      {% for file in site.navbar-extra %}
+        {% include {{ file }} %}
+      {% endfor %}
+    {% endif %}
 
-  {% if site.avatar and page.show-avatar != false %}
-    <div class="avatar-container">
-      <div class="avatar-img-border">
-        <a href="{{ '/' | absolute_url }}">
-          <img alt="Navigation bar avatar" class="avatar-img" src="{{ site.avatar | relative_url }}" />
-        </a>
+    {% if site.avatar and page.show-avatar != false %}
+      <div class="avatar-container">
+        <div class="avatar-img-border">
+          <a href="{{ '/' | absolute_url }}">
+            <img alt="Navigation bar avatar" class="avatar-img" src="{{ site.avatar | relative_url }}" />
+          </a>
+        </div>
       </div>
-    </div>
-  {% endif %}
+    {% endif %}
 
+  </div>
 </nav>
 
 {% include search.html %}
diff --git a/_includes/staticman-comments.html b/_includes/staticman-comments.html
@@ -72,12 +72,6 @@ <h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
   </div>
 
   <!-- Load script to handle comment form submission -->
-  <!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
-  <script>
-    if (typeof jQuery == 'undefined') {
-      document.write('<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></scr' + 'ipt>');
-    }
-  </script>
   <script src="{{ "/assets/js/staticman.js" | relative_url }}"></script>
 </div>
 {% endif %}
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -3,18 +3,14 @@
   - "/assets/css/bootstrap-social.css"
   - "/assets/css/beautifuljekyll.css"
 common-ext-css:
-  - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-    sri: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+  - href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    sri: "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
   - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
   - "https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
   - "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
 common-ext-js:
-  - href: "https://code.jquery.com/jquery-3.5.1.slim.min.js"
-    sri: "sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
-  - href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
-    sri: "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-  - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-    sri: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+  - href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    sri: "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
 common-js:
   - "/assets/js/beautifuljekyll.js"
 ---

diff --git a/_layouts/minimal.html b/_layouts/minimal.html
@@ -2,15 +2,11 @@
 common-css:
   - "/assets/css/beautifuljekyll-minimal.css"
 common-ext-css:
-  - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-    sri: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+  - href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    sri: "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
 common-ext-js:
-  - href: "https://code.jquery.com/jquery-3.5.1.slim.min.js"
-    sri: "sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
-  - href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
-    sri: "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-  - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-    sri: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+  - href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    sri: "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
 ---
 
 <!DOCTYPE html>

diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
@@ -48,6 +48,9 @@ body {
 body > main {
   flex: 1;
 }
+a {
+  text-decoration: none;  /* no underline */
+}
 p {
   line-height: 1.5;
   margin: 1.875rem 0;
@@ -95,6 +98,7 @@ hr.small {
   border-width: 0.25rem;
   border-color: inherit;
   border-radius: 0.1875rem;
+  opacity: 0.65;
 }
 
 /* fix in-page anchors to not be behind fixed header */
@@ -269,7 +273,7 @@ img {
   }
 }
 
-.navbar-custom .nav-item.dropdown.show {
+.navbar-custom .dropdown-toggle.show {
   background: rgba(0, 0, 0, 0.2);
 }
 

diff --git a/assets/js/beautifuljekyll.js b/assets/js/beautifuljekyll.js
@@ -2,27 +2,29 @@
 
 let BeautifulJekyllJS = {
 
-  bigImgEl : null,
-  numImgs : null,
+  bigImgEl: null,
+  numImgs: null,
 
-  init : function() {
+  init: function() {
     setTimeout(BeautifulJekyllJS.initNavbar, 10);
 
+    let navbar = document.querySelector(".navbar");
+
     // Shorten the navbar after scrolling a little bit down
-    $(window).scroll(function() {
-        if ($(".navbar").offset().top > 50) {
-            $(".navbar").addClass("top-nav-short");
-        } else {
-            $(".navbar").removeClass("top-nav-short");
-        }
+    window.addEventListener('scroll', function() {
+      if (window.scrollY > 50) {
+        navbar.classList.add("top-nav-short");
+      } else {
+        navbar.classList.remove("top-nav-short");
+      }
     });
 
     // On mobile, hide the avatar when expanding the navbar menu
-    $('#main-navbar').on('show.bs.collapse', function () {
-      $(".navbar").addClass("top-nav-expanded");
+    document.getElementById('main-navbar').addEventListener('show.bs.collapse', function() {
+      navbar.classList.add("top-nav-expanded");
     });
-    $('#main-navbar').on('hidden.bs.collapse', function () {
-      $(".navbar").removeClass("top-nav-expanded");
+    document.getElementById('main-navbar').addEventListener('hidden.bs.collapse', function() {
+      navbar.classList.remove("top-nav-expanded");
     });
 
     // show the big header image
@@ -31,26 +33,30 @@ let BeautifulJekyllJS = {
     BeautifulJekyllJS.initSearch();
   },
 
-  initNavbar : function() {
+  initNavbar: function() {
     // Set the navbar-dark/light class based on its background color
-    const rgb = $('.navbar').css("background-color").replace(/[^\d,]/g,'').split(",");
+    const rgb = getComputedStyle(document.querySelector('.navbar')).backgroundColor.replace(/[^\d,]/g, '').split(",");
     const brightness = Math.round(( // http://www.w3.org/TR/AERT#color-contrast
       parseInt(rgb[0]) * 299 +
       parseInt(rgb[1]) * 587 +
       parseInt(rgb[2]) * 114
     ) / 1000);
+
+    let navbar = document.querySelector(".navbar");
     if (brightness <= 125) {
-      $(".navbar").removeClass("navbar-light").addClass("navbar-dark");
+      navbar.classList.remove("navbar-light");
+      navbar.classList.add("navbar-dark");
     } else {
-      $(".navbar").removeClass("navbar-dark").addClass("navbar-light");
+      navbar.classList.remove("navbar-dark");
+      navbar.classList.add("navbar-light");
     }
   },
 
-  initImgs : function() {
-    // If the page was large images to randomly select from, choose an image
-    if ($("#header-big-imgs").length > 0) {
-      BeautifulJekyllJS.bigImgEl = $("#header-big-imgs");
-      BeautifulJekyllJS.numImgs = BeautifulJekyllJS.bigImgEl.attr("data-num-img");
+  initImgs: function() {
+    // If the page has large images to randomly select from, choose an image
+    if (document.getElementById("header-big-imgs")) {
+      BeautifulJekyllJS.bigImgEl = document.getElementById("header-big-imgs");
+      BeautifulJekyllJS.numImgs = BeautifulJekyllJS.bigImgEl.getAttribute("data-num-img");
 
       // 2fc73a3a967e97599c9763d05e564189
       // set an initial image
@@ -69,19 +75,19 @@ let BeautifulJekyllJS = {
         prefetchImg.src = src;
         // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
 
-        setTimeout(function(){
-          const img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
-          $(".intro-header.big-img").prepend(img);
-          setTimeout(function(){ img.css("opacity", "1"); }, 50);
+        setTimeout(function() {
+          const img = document.createElement("div");
+          img.className = "big-img-transition";
+          img.style.backgroundImage = 'url(' + src + ')';
+          document.querySelector(".intro-header.big-img").prepend(img);
+          setTimeout(function() { img.style.opacity = "1"; }, 50);
 
           // after the animation of fading in the new image is done, prefetch the next one
-          //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
           setTimeout(function() {
             BeautifulJekyllJS.setImg(src, desc);
             img.remove();
             getNextImg();
           }, 1000);
-          //});
         }, 6000);
       };
 
@@ -92,46 +98,51 @@ let BeautifulJekyllJS = {
     }
   },
 
-  getImgInfo : function() {
+  getImgInfo: function() {
     const randNum = Math.floor((Math.random() * BeautifulJekyllJS.numImgs) + 1);
-    const src = BeautifulJekyllJS.bigImgEl.attr("data-img-src-" + randNum);
-    const desc = BeautifulJekyllJS.bigImgEl.attr("data-img-desc-" + randNum);
+    const src = BeautifulJekyllJS.bigImgEl.getAttribute("data-img-src-" + randNum);
+    const desc = BeautifulJekyllJS.bigImgEl.getAttribute("data-img-desc-" + randNum);
 
     return {
-      src : src,
-      desc : desc
+      src: src,
+      desc: desc
     }
   },
 
-  setImg : function(src, desc) {
-    $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
+  setImg: function(src, desc) {
+    document.querySelector(".intro-header.big-img").style.backgroundImage = 'url(' + src + ')';
+
+    let imgDesc = document.querySelector(".img-desc");
     if (typeof desc !== typeof undefined && desc !== false) {
-      $(".img-desc").text(desc).show();
+      imgDesc.textContent = desc;
+      imgDesc.style.display = "block";
     } else {
-      $(".img-desc").hide();
+      imgDesc.style.display = "none";
     }
   },
 
-  initSearch : function() {
+  initSearch: function() {
     if (!document.getElementById("beautifuljekyll-search-overlay")) {
       return;
     }
 
-    $("#nav-search-link").click(function(e) {
+    document.getElementById("nav-search-link").addEventListener('click', function(e) {
       e.preventDefault();
-      $("#beautifuljekyll-search-overlay").show();
-      $("#nav-search-input").focus().select();
-      $("body").addClass("overflow-hidden");
+      document.getElementById("beautifuljekyll-search-overlay").style.display = "block";
+      const searchInput = document.getElementById("nav-search-input");
+      searchInput.focus();
+      searchInput.select();
+      document.body.classList.add("overflow-hidden");
     });
-    $("#nav-search-exit").click(function(e) {
+    document.getElementById("nav-search-exit").addEventListener('click', function(e) {
       e.preventDefault();
-      $("#beautifuljekyll-search-overlay").hide();
-      $("body").removeClass("overflow-hidden");
+      document.getElementById("beautifuljekyll-search-overlay").style.display = "none";
+      document.body.classList.remove("overflow-hidden");
     });
-    $(document).on('keyup', function(e) {
-      if (e.key == "Escape") {
-        $("#beautifuljekyll-search-overlay").hide();
-        $("body").removeClass("overflow-hidden");
+    document.addEventListener('keyup', function(e) {
+      if (e.key === "Escape") {
+        document.getElementById("beautifuljekyll-search-overlay").style.display = "none";
+        document.body.classList.remove("overflow-hidden");
       }
     });
   }