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
Bootstrap5 underlines links by default, use css not to underline links
unless hovered over
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
Specify bootstrap javascript requirements

.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,99 +1,107 @@
 <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-bs-target="#arrow-navbar" aria-controls="arrow-navbar" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse justify-content-end" id="arrow-navbar">
       <ul class="nav navbar-nav">
-        <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/overview/" role="button" aria-haspopup="true" aria-expanded="false">Overview</a></li>
-        <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/faq/" role="button" aria-haspopup="true" aria-expanded="false">FAQ</a></li>
-        <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">
+          <a class="nav-link" href="{{ site.baseurl }}/overview/" role="button" aria-haspopup="true" aria-expanded="false">Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{ site.baseurl }}/faq/" role="button" aria-haspopup="true" aria-expanded="false">FAQ</a>
+        </li>
+        <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>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdownGetArrow">
-            <a class="dropdown-item" href="{{ site.baseurl }}/install/">Install</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/release/">Releases</a>
-            <a class="dropdown-item" href="https://github.com/apache/arrow">Source Code</a>
-          </div>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdownGetArrow">
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/install/">Install</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/release/">Releases</a></li>
+            <li><a class="dropdown-item" href="https://github.com/apache/arrow">Source Code</a></li>
+          </ul>
         </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>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdownDocumentation">
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs">Project Docs</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/format/Columnar.html">Format</a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdownDocumentation">
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs">Project Docs</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/format/Columnar.html">Format</a></li>
             <hr/>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/c_glib">C GLib</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/cpp">C++</a>
-            <a class="dropdown-item" href="https://github.com/apache/arrow/blob/main/csharp/README.md">C#</a>
-            <a class="dropdown-item" href="https://godoc.org/github.com/apache/arrow/go/arrow">Go</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/java">Java</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/js">JavaScript</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/julia/">Julia</a>
-            <a class="dropdown-item" href="https://github.com/apache/arrow/blob/main/matlab/README.md">MATLAB</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/python">Python</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/r">R</a>
-            <a class="dropdown-item" href="https://github.com/apache/arrow/blob/main/ruby/README.md">Ruby</a>
-            <a class="dropdown-item" href="https://docs.rs/arrow/latest">Rust</a>
-          </div>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/c_glib">C GLib</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/cpp">C++</a></li>
+            <li><a class="dropdown-item" href="https://github.com/apache/arrow/blob/main/csharp/README.md">C#</a></li>
+            <li><a class="dropdown-item" href="https://godoc.org/github.com/apache/arrow/go/arrow">Go</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/java">Java</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/js">JavaScript</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/julia/">Julia</a></li>
+            <li><a class="dropdown-item" href="https://github.com/apache/arrow/blob/main/matlab/README.md">MATLAB</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/python">Python</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/r">R</a></li>
+            <li><a class="dropdown-item" href="https://github.com/apache/arrow/blob/main/ruby/README.md">Ruby</a></li>
+            <li><a class="dropdown-item" href="https://docs.rs/arrow/latest">Rust</a></li>
+          </ul>
         </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>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdownSubprojects">
-            <a class="dropdown-item" href="{{ site.baseurl }}/adbc">ADBC</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/format/Flight.html">Arrow Flight</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/format/FlightSql.html">Arrow Flight SQL</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/datafusion">DataFusion</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/nanoarrow">nanoarrow</a>
-          </div>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdownSubprojects">
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/adbc">ADBC</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/format/Flight.html">Arrow Flight</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/format/FlightSql.html">Arrow Flight SQL</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/datafusion">DataFusion</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/nanoarrow">nanoarrow</a></li>
+          </ul>
         </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>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdownCommunity">
-            <a class="dropdown-item" href="{{ site.baseurl }}/community/">Communication</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/docs/developers/index.html">Contributing</a>
-            <a class="dropdown-item" href="https://github.com/apache/arrow/issues">Issue Tracker</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/committers/">Governance</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/use_cases/">Use Cases</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/powered_by/">Powered By</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/visual_identity/">Visual Identity</a>
-            <a class="dropdown-item" href="{{ site.baseurl }}/security/">Security</a>
-            <a class="dropdown-item" href="https://www.apache.org/foundation/policies/conduct.html">Code of Conduct</a>
-          </div>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdownCommunity">
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/community/">Communication</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/docs/developers/index.html">Contributing</a></li>
+            <li><a class="dropdown-item" href="https://github.com/apache/arrow/issues">Issue Tracker</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/committers/">Governance</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/use_cases/">Use Cases</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/powered_by/">Powered By</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/visual_identity/">Visual Identity</a></li>
+            <li><a class="dropdown-item" href="{{ site.baseurl }}/security/">Security</a></li>
+            <li><a class="dropdown-item" href="https://www.apache.org/foundation/policies/conduct.html">Code of Conduct</a></li>
+          </ul>
         </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">
-            <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>
-            <a class="dropdown-item" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
-            <a class="dropdown-item" href="https://www.apache.org/security/">Security</a>
-          </div>
+          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownASF">
+            <li><a class="dropdown-item" href="https://www.apache.org/">ASF Website</a></li>
+            <li><a class="dropdown-item" href="https://www.apache.org/licenses/">License</a></li>
+            <li><a class="dropdown-item" href="https://www.apache.org/foundation/sponsorship.html">Donate</a></li>
+            <li><a class="dropdown-item" href="https://www.apache.org/foundation/thanks.html">Thanks</a></li>
+            <li><a class="dropdown-item" href="https://www.apache.org/security/">Security</a></li>
+          </ul>
         </li>
       </ul>
     </div><!-- /.navbar-collapse -->
-  </nav>
+  </div><!-- navbar container -->
+ </nav>

_webpack/main.js

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

css/main.scss

@@ -12,6 +12,15 @@ a {
   color: #d74633;
 }
 
+a:not([class]), a:is([class *= "twitter-follow-button"]) {
+    text-decoration: none;
+}
+
+a:not([class]):hover, a:is([class *= "twitter-follow-button"]):hover {
+    color: #0062cc;
+    text-decoration: underline;
+}
+
 .dropdown-item.active, .dropdown-item:active {
     background-color: #d74633;
 }
@@ -31,7 +40,7 @@ body {
 }
 
 .big-arrow-bg {
-  background-color: #343a40;
+  background-color: #212529;
 }
 
 .lead {