Update Ruby and javascript dependencies

Put base url in Jekyll config to ensure rss feed has correct path
Popper needs to be explicitly imported
Bootstrap5 bg-dark color has changed, so need to match landing page
title background color

Bootstrap 4 -> 5 migration
Replace data-toggle by data-bs-toggle
Replace mr- by me-
Replace right- by end-
Put a container round navbar
Replace badge-secondary by bg-secondary
Replace ml-auto by ms-auto

.github/workflows/deploy.yml

@@ -41,34 +41,33 @@ jobs:
           cache: "npm"
       - name: Configure for production
         run: |
-          echo "JEKYLL_BASE_URL=" >> ${GITHUB_ENV}
           echo "ORIGIN=${{ github.repository }}" >> ${GITHUB_ENV}
           echo "TARGET_BRANCH=asf-site" >> ${GITHUB_ENV}
-          echo >> _extra_config.yml
+          echo "base_url: " >> _extra_config.yml
         if: |
           github.event_name == 'push' &&
             github.repository == 'apache/arrow-site'
       - name: Configure for GitHub Pages on push to main branch
         run: |
           owner=$(jq --raw-output .repository.owner.login ${GITHUB_EVENT_PATH})
           repository=$(jq --raw-output .repository.name ${GITHUB_EVENT_PATH})
-          echo "JEKYLL_BASE_URL=/${repository}" >> ${GITHUB_ENV}
           echo "ORIGIN=${owner}/${repository}" >> ${GITHUB_ENV}
           echo "TARGET_BRANCH=gh-pages" >> ${GITHUB_ENV}
           # "url:" is for the opengraph tags, and it can't be relative
-          echo "url: https://${owner}.github.io/${repository}" >> _extra_config.yml
+          echo "url: https://${owner}.github.io" >> _extra_config.yml
+          echo "base_url: /${repository}" >> _extra_config.yml
         if: |
           github.event_name == 'push' &&
             github.repository != 'apache/arrow-site'
       - name: Configure for GitHub Pages on pull request
         run: |
           owner=$(jq --raw-output .pull_request.head.user.login ${GITHUB_EVENT_PATH})
           repository=$(jq --raw-output .pull_request.head.repo.name ${GITHUB_EVENT_PATH})
-          echo "JEKYLL_BASE_URL=/${repository}" >> ${GITHUB_ENV}
           echo "ORIGIN=${owner}/${repository}" >> ${GITHUB_ENV}
           echo "TARGET_BRANCH=gh-pages" >> ${GITHUB_ENV}
           # "url:" is for the opengraph tags, and it can't be relative
-          echo "url: https://${owner}.github.io/${repository}" >> _extra_config.yml
+          echo "url: https://${owner}.github.io" >> _extra_config.yml
+          echo "baseurl: /${repository}" >> _extra_config.yml
         if: |
           github.event_name == 'pull_request'
       - name: Build

.ruby-version

@@ -1 +1 @@
-3.0.2
+3.3.0

Gemfile

@@ -24,7 +24,7 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem "webrick"
 
 group :jekyll_plugins do
-  gem "jekyll-feed", "~> 0.6"
+  gem "jekyll-feed", "~> 0.17.0"
   gem "jekyll-jupyter-notebook"
   gem "jekyll-seo-tag"
 end

Rakefile

@@ -51,8 +51,6 @@ task :default => :serve
 desc "Generate site"
 task :generate => webpacked_js do
   command_line = ["jekyll", "build"]
-  base_url = ENV["JEKYLL_BASE_URL"]
-  command_line << "--baseurl=#{base_url}" if base_url
   extra_config = ENV["JEKYLL_EXTRA_CONFIG"]
   command_line << "--config=_config.yml,#{extra_config}" if extra_config
   destination = ENV["JEKYLL_DESTINATION"]

_includes/blog_header.html

@@ -45,21 +45,21 @@ <h1>
 {% endcapture %}{% assign discard = nil %}
 
 <p class="mb-4 pb-1">
-  <span class="badge badge-secondary">Published</span>
-  <span class="published mr-3">
+  <span class="badge bg-secondary">Published</span>
+  <span class="published me-3">
     {{ page.date | date_to_string }}
   </span>
   <br />
-  <span class="badge badge-secondary">By</span>
+  <span class="badge bg-secondary">By</span>
   {% if author_name %}
-    <a class="mr-3" href="{{ homepage }}">{{ author_name }} ({{ page.author }}) </a>
+    <a class="me-3" href="{{ homepage }}">{{ author_name }} ({{ page.author }}) </a>
   {% else %}
     {{ page.author }}
   {% endif %}
 
   {% if page.translations %}
     <br />
-    <span class="badge badge-secondary">Translations</span>
+    <span class="badge bg-secondary">Translations</span>
     {% for trans in page.translations %}
       <a href="{{ site.baseurl }}/blog/{{ trans.url }}">{{ trans.language }}</a>
     {% endfor %}

_includes/header.html

@@ -1,8 +1,9 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+ <div class="container-fluid p-3">
   {% if page.url != "/" %}
   <a class="navbar-brand no-padding" href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/img/arrow-inverse-300px.png" height="40px"/></a>
   {% endif %}
-   <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#arrow-navbar" aria-controls="arrow-navbar" aria-expanded="false" aria-label="Toggle navigation">
+   <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-target="#arrow-navbar" aria-controls="arrow-navbar" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
@@ -14,7 +15,7 @@
         <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/blog" role="button" aria-haspopup="true" aria-expanded="false">Blog</a></li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#"
-             id="navbarDropdownGetArrow" role="button" data-toggle="dropdown"
+             id="navbarDropdownGetArrow" role="button" data-bs-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Get Arrow
           </a>
@@ -26,7 +27,7 @@
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#"
-             id="navbarDropdownDocumentation" role="button" data-toggle="dropdown"
+             id="navbarDropdownDocumentation" role="button" data-bs-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Documentation
           </a>
@@ -50,7 +51,7 @@
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#"
-             id="navbarDropdownSubprojects" role="button" data-toggle="dropdown"
+             id="navbarDropdownSubprojects" role="button" data-bs-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Subprojects
           </a>
@@ -64,7 +65,7 @@
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#"
-             id="navbarDropdownCommunity" role="button" data-toggle="dropdown"
+             id="navbarDropdownCommunity" role="button" data-bs-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Community
           </a>
@@ -82,11 +83,11 @@
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#"
-             id="navbarDropdownASF" role="button" data-toggle="dropdown"
+             id="navbarDropdownASF" role="button" data-bs-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              ASF Links
           </a>
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownASF">
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownASF">
             <a class="dropdown-item" href="https://www.apache.org/">ASF Website</a>
             <a class="dropdown-item" href="https://www.apache.org/licenses/">License</a>
             <a class="dropdown-item" href="https://www.apache.org/foundation/sponsorship.html">Donate</a>
@@ -96,4 +97,5 @@
         </li>
       </ul>
     </div><!-- /.navbar-collapse -->
-  </nav>
+  </div> 
+ </nav>

_webpack/main.js

@@ -15,4 +15,4 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import "bootstrap";
+import { Dropdown } from 'bootstrap';

css/main.scss

@@ -31,7 +31,7 @@ body {
 }
 
 .big-arrow-bg {
-  background-color: #343a40;
+  background-color: #212529;
 }
 
 .lead {