geoblacklight 4.4.1 → 5.0.0.pre.alpha.11

data/config/locales/geoblacklight.en.yml

@@ -2,8 +2,6 @@ en:
   geoblacklight:
     bbox_label: 'Bounding Box'
     location: 'Location'
-    citation:
-      retrieved_from: 'Retrieved from %{document_url}'
     clipboard:
       citation: Citation copied to clipboard
       web_service: Web service copied to clipboard
@@ -11,12 +9,6 @@ en:
       download: 'Download'
       download_link: 'Original %{download_format}'
       success: 'Your file %{title} is ready for download'
-      hgl_success: 'You should receive an email when your download is ready.'
-      hgl_request: 'Request Layer'
-      hgl_request_button: 'Request'
-      hgl_close: 'Close'
-      hgl_instructions: 'Please enter your email address. You will receive a link to download the layer when it is ready.' ## new variable
-      hgl_email: 'Email'
       error: 'Sorry, the requested file could not be downloaded.'
       export_formats: 'Export Formats'
       export_link: 'Export %{download_format}'
@@ -24,6 +16,7 @@ en:
       export_kmz_link: 'KMZ'
       export_geojson_link: 'GeoJSON'
       export_geotiff_link: 'GeoTIFF'
+      export_csv_link: 'CSV'
     home:
       headline: 'Explore and discover...'
       search_heading: 'Find the maps and data you need'
@@ -36,7 +29,6 @@ en:
       version: 'GeoBlacklight version %{version}'
     tools:
       login_to_view: 'Login to View and Download'
-      open_carto: 'Open in Carto'
       open_arcgis: 'Open in ArcGIS Online'
     formats:
       arcgrid: 'ArcGRID'
@@ -45,6 +37,7 @@ en:
       kmz: 'KMZ'
       shapefile: 'Shapefile'
       jpg: 'JPG'
+      csv: 'CSV'
       esri_geodatabase: 'ESRI Geodatabase'
       sqlite_database: 'SQLite Database'
     map:
@@ -67,7 +60,6 @@ en:
       image_map_layer: 'ArcGIS Image Map Layer'
       data_dictionary: 'Documentation'
       services: 'Web services'
-      services_close: 'Close'
       tms: 'Tile Map Service'
       tilejson: 'TileJSON Document'
       xyz: 'XYZ Tiles'
@@ -89,7 +81,8 @@ en:
       version_of_descendants: 'Has version...'
       browse_all_no_count: "Browse all records..."
       browse_all: "Browse all %{count} records..."
-
+    modal:
+      copy-citation: "Copy Citation"
     metadata:
       toggle_summary: 'Toggle summary'
       view_metadata: 'View Metadata'
@@ -132,12 +125,21 @@ en:
         tiled_map_layer:
           title: ArcGIS Tiled Map Layer
           content: An ArcGIS Tiled Map Layer Service displays set of web-accessible tiles that reside on a server.
+        tilejson:
+          title: TileJSON
+          content: A JSON format used for describing tilesets.
         tms:
-          title: Tile Map Service
+          title: Tile Map Service (TMS)
           content: A Tile Map Service displays georeferenced map tiles as an image on a map.
         wms:
           title: Web Map Service (WMS)
           content: A Web Map Service displays a geospatial dataset as map images.
+        wmts:
+          title: Web Map Tile Service (WMTS)
+          content: A Web Map Tile Service displays maps over the web using cached image tiles.
+        xyz:
+          title: XYZ Tiles
+          content: Also known as slippy map tiles, is a method of expressing map tile mosaics, indexed by (x,y) offsets and zoom levels (z).
   blacklight:
     icon:
       american-geographical-society-library-uwm-libraries: American Geographical Society Library - UWM Libraries
@@ -146,34 +148,24 @@ en:
       baruch-cuny: Baruch College
       berkeley: University of California, Berkeley
       cd-rom: CD-Rom
-      chicago: The University of Chicago
       columbia: Columbia University
       cornell: Cornell University
       dvd-rom: DVD-Rom
       esri-globe: Esri Global
       george-mason: George Mason University
       harvard: Harvard University
-      illinois: University of Illinois
+      iiif-drag-drop: Drag icon to any IIIF viewer
       indiana: Indiana University
-      iowa: University of Iowa
       lewis-clark: Lewis & Clark
-      maryland: University of Maryland
       massgis: MassGIS
-      michigan-state: Michigan State University
-      michigan: University of Michigan
-      minnesota: University of Minnesota
       mit: Massachusetts Institute of Technology
       multilinestring: Multi-line string
       multipoint: Multi-point
       multipolygon: Multi-polygon
-      nebraska: University of Nebraska-Lincoln
       northwestern-university: Northwestern University
       nyu: New York University
-      ohio-state: The Ohio State University
-      penn-state: Penn State University
       princeton: Princeton University
       public: Public content
-      purdue: Purdue University
       restricted: Restricted content
       rutgers: Rutgers University
       sms: SMS
@@ -182,4 +174,3 @@ en:
       tufts: Tufts University
       ucla: University of California, Los Angeles
       uva: University of Virginia
-      wisconsin: University of Wisconsin

data/geoblacklight.gemspec

@@ -17,29 +17,29 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
   spec.required_rubygems_version = ">= 2.5.2"
 
-  spec.add_dependency "rails", ">= 6.1", "< 7.3"
-  spec.add_dependency "blacklight", "~> 7.0"
+  spec.add_dependency "rails", ">= 6.1", "< 8"
+  spec.add_dependency "blacklight", "~> 8.0"
   spec.add_dependency "config"
   spec.add_dependency "faraday", "~> 2.0"
   spec.add_dependency "coderay"
   spec.add_dependency "deprecation"
   spec.add_dependency "geo_combine", "~> 0.9"
   spec.add_dependency "mime-types"
-  spec.add_dependency "handlebars_assets"
   spec.add_dependency "rgeo-geojson"
-  spec.add_dependency "sprockets-rails", "~> 3.0"
+  spec.add_dependency "rsolr"
   spec.add_dependency "vite_rails", "~> 3.0"
+  spec.add_dependency "zeitwerk"
 
-  spec.add_development_dependency "solr_wrapper"
   spec.add_development_dependency "rails-controller-testing"
   spec.add_development_dependency "rspec-rails"
   spec.add_development_dependency "engine_cart", "~> 2.0"
   spec.add_development_dependency "capybara", ">= 2.5.0"
-  spec.add_development_dependency "webdrivers"
+  spec.add_development_dependency "selenium-webdriver"
   spec.add_development_dependency "factory_bot_rails"
-  spec.add_development_dependency "database_cleaner", "~> 2.0"
   spec.add_development_dependency "simplecov", "~> 0.22"
   spec.add_development_dependency "foreman"
   spec.add_development_dependency "standardrb", "1.0.1"
   spec.add_development_dependency "webmock", "~> 3.14"
+  spec.add_development_dependency "database_cleaner"
+  spec.add_development_dependency "axe-core-rspec"
 end

data/lib/generators/geoblacklight/assets/importmap_generator.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module Geoblacklight
+  module Assets
+    class ImportmapGenerator < Rails::Generators::Base
+      source_root Geoblacklight::Engine.root.join("lib", "generators", "geoblacklight", "templates")
+
+      class_option :test, type: :boolean, default: false, aliases: "-t", desc: "Indicates that app will be installed in a test environment"
+
+      desc <<-DESCRIPTION
+        This generator sets up the app to use Importmaps to manage the javascript,
+        and dartsass-rails to manage the styles.
+
+        SCSS sources from Bootstrap and Blacklight are installed via yarn and
+        built into a single CSS stylesheet.
+
+        JS sources from the Blacklight and Geoblacklight gems are delivered as
+        ES modules via importmap, and their dependencies are pinned to versions
+        delivered via CDN.
+      DESCRIPTION
+
+      # If this is a local dev/test build, symlink the frontend package so we
+      # can reference its stylesheets in development
+      def link_frontend
+        run "yarn link @geoblacklight/frontend" if options[:test]
+      end
+
+      # Workaround for https://github.com/projectblacklight/blacklight/pull/3285
+      def update_blacklight_frontend
+        run "yarn add blacklight-frontend@8.3"
+      end
+
+      # Add the customization overrides and insert before bootstrap import
+      def add_customizations
+        copy_file "assets/_customizations.scss", "app/assets/stylesheets/_customizations.scss"
+        gsub_file "app/assets/stylesheets/_customizations.scss", "@geoblacklight/frontend/app/assets/", ""
+        insert_into_file "app/assets/stylesheets/application.bootstrap.scss", "@import 'customizations';\n", before: "@import 'bootstrap/scss/bootstrap';"
+      end
+
+      # Add CDN imports for CSS files used by Geoblacklight (leaflet, openlayers)
+      def add_leaflet_ol_css_cdn
+        insert_into_file "app/assets/stylesheets/application.bootstrap.scss", before: "@import 'customizations';\n" do
+          <<~SCSS
+            /* GeoBlacklight dependencies CSS */
+            @import url("https://cdn.skypack.dev/leaflet@1.9.4/dist/leaflet.css");
+            @import url("https://cdn.jsdelivr.net/npm/leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css");
+            @import url("https://cdn.skypack.dev/ol@8.1.0/ol.css");
+
+          SCSS
+        end
+      end
+
+      # Add an import for Geoblacklight's stylesheet
+      def add_geoblacklight_styles
+        append_to_file "app/assets/stylesheets/application.bootstrap.scss", "@import '@geoblacklight/frontend/app/assets/stylesheets/geoblacklight/geoblacklight';"
+      end
+
+      # Ensure import of Blacklight's JS uses the name that importmap has pinned
+      def update_blacklight_import
+        gsub_file "app/javascript/application.js", "blacklight-frontend", "blacklight"
+      end
+
+      # Import Geoblacklight's JS using the name that importmap has pinned
+      def add_geoblacklight_js
+        append_to_file "app/javascript/application.js", "import Geoblacklight from \"geoblacklight\";"
+      end
+
+      # Add pins for application dependencies to the importmap
+      def update_importmap
+        gsub_file "config/importmap.rb", "bootstrap.min.js", "https://cdn.skypack.dev/bootstrap@5.3.3"
+        append_to_file "config/importmap.rb" do
+          <<~CONTENT
+            pin "@github/auto-complete-element", to: "https://cdn.skypack.dev/@github/auto-complete-element"
+            pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/dist/umd/popper.min.js"
+          CONTENT
+        end
+      end
+
+      # Run the build so styles are available for the first load of the app
+      def build_styles
+        run "yarn build:css"
+      end
+    end
+  end
+end

data/lib/generators/geoblacklight/assets/vite_generator.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module Geoblacklight
+  module Assets
+    class ViteGenerator < Rails::Generators::Base
+      source_root Geoblacklight::Engine.root.join("lib", "generators", "geoblacklight", "templates")
+
+      class_option :test, type: :boolean, default: false, aliases: "-t", desc: "Indicates that app will be installed in a test environment"
+
+      desc <<-DESCRIPTION
+      This generator sets up the app to use Vite as the bundler for styles and
+      javascript using the vite_rails gem. Existing stylesheets for Blacklight
+      are removed and replaced with a single JS entrypoint file and a single
+      SCSS entrypoint file, which will be bundled by Vite.
+
+      Geoblacklight's frontend assets are installed from the npm package. In
+      local development they automatically reference the versions from the
+      outer directory (the Geoblacklight repository) via a yarn symlink.
+      DESCRIPTION
+
+      # Install Vite
+      def install_vite
+        gem "vite_rails", "~> 3.0"
+        run "bundle install"
+      end
+
+      # Add our version of the Blacklight base layout with Vite helper tags
+      def geoblacklight_base_layout
+        copy_file "base.html.erb", "app/views/layouts/blacklight/base.html.erb"
+      end
+
+      # Copy Vite config files
+      def copy_config_vite_json
+        copy_file "vite.json", "config/vite.json"
+        copy_file "vite.config.ts", "vite.config.ts"
+      end
+
+      # Add our package.json with non-GBL dependencies (Blacklight, Bootstrap, etc.)
+      def install_dependencies
+        copy_file "package.json", "package.json"
+        run "yarn install"
+      end
+
+      # This will write its own package.json if one doesn't exist, causing a
+      # conflict, so it needs to happen after we copy ours
+      def bundle_install
+        run "bundle exec vite install"
+      end
+
+      # Pick a version of the frontend asset package and install it.
+      def add_frontend
+        # If in local development or CI, install the version we made linkable in
+        # the test app generator. This will make it so changes made in the outer
+        # directory are picked up automatically, like a symlink. Note that this
+        # does NOT install the dependencies of the package, so we have to make
+        # sure to install those separately. See:
+        # https://classic.yarnpkg.com/lang/en/docs/cli/link/
+        # https://github.com/yarnpkg/yarn/issues/2914
+        if options[:test]
+          run "yarn link @geoblacklight/frontend"
+
+        # If a branch was specified (e.g. you are running a template.rb build
+        # against a test branch), use the latest version available on npm
+        elsif ENV["BRANCH"]
+          run "yarn add @geoblacklight/frontend@latest"
+
+        # Otherwise, pick the version from npm that matches our Geoblacklight
+        # gem version
+        else
+          run "yarn add @geoblacklight/frontend@#{Geoblacklight::VERSION}"
+        end
+      end
+
+      # Add our own stylesheets that reference the versions from npm
+      def add_stylesheets
+        copy_file "assets/_customizations.scss", "app/javascript/stylesheets/_customizations.scss"
+        copy_file "assets/geoblacklight.scss", "app/javascript/stylesheets/geoblacklight.scss"
+        copy_file "assets/application.scss", "app/javascript/entrypoints/application.scss"
+      end
+
+      # Replace the default generated Vite entrypoint with our own
+      def add_javascript
+        remove_file "app/javascript/entrypoints/application.js"
+        copy_file "assets/application.js", "app/javascript/entrypoints/application.js"
+      end
+    end
+  end
+end

data/lib/generators/geoblacklight/assets_generator.rb

@@ -1,46 +1,21 @@
 # frozen_string_literal: true
 
-require "rails/generators"
-
 module Geoblacklight
+  # Run general asset setup and then delegate to the appropriate generator
+  # Based on Blacklight::AssetsGenerator
   class AssetsGenerator < Rails::Generators::Base
-    source_root File.expand_path("templates", __dir__)
-
-    desc <<-DESCRIPTION
-      This generator makes the following changes to your application:
-       1. Copies GBL javascript into the application
-       2. Removes stock Rails and Blacklight stylesheets from the application
-       3. Copies GBL stylesheets into the local application
-       4. Sets asset initializer values into the local application
-    DESCRIPTION
-
-    def add_javascript
-      copy_file "assets/geoblacklight.js", "app/assets/javascripts/geoblacklight.js"
-
-      if Rails.version.to_i >= 6
-        append_to_file "app/assets/javascripts/application.js",
-          "\n// Required by GeoBlacklight\n//= require geoblacklight"
+    class_option :"asset-pipeline", type: :string, default: ENV.fetch("ASSET_PIPELINE", "vite"), desc: "Choose the asset pipeline to use (vite or importmap)"
+    class_option :test, type: :boolean, default: ENV.fetch("CI", false), aliases: "-t", desc: "Indicates that app will be installed in a test environment"
+
+    def run_asset_pipeline_specific_generator
+      generated_options = "--test=true" if options[:test]
+      generator = if options[:"asset-pipeline"]
+        "geoblacklight:assets:#{options[:"asset-pipeline"]}"
+      else
+        "geoblacklight:assets:vite"
       end
-    end
-
-    def remove_stylesheets
-      remove_file "app/assets/stylesheets/application.css"
-      remove_file "app/assets/stylesheets/blacklight.scss"
-    end
-
-    def add_stylesheets
-      copy_file "assets/application.scss", "app/assets/stylesheets/application.scss"
-      copy_file "assets/_blacklight.scss", "app/assets/stylesheets/_blacklight.scss"
-      copy_file "assets/_customizations.scss", "app/assets/stylesheets/_customizations.scss"
-      copy_file "assets/_geoblacklight.scss", "app/assets/stylesheets/_geoblacklight.scss"
-    end
-
-    def add_initializers
-      append_to_file "config/initializers/assets.rb",
-        "\nRails.application.config.assets.precompile += %w( favicon.ico )\n"
 
-      append_to_file "config/initializers/assets.rb",
-        "\nRails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'images')\n"
+      generate generator, generated_options
     end
   end
 end

data/lib/generators/geoblacklight/install_generator.rb

@@ -50,10 +50,6 @@ module Geoblacklight
       inject_into_file "config/routes.rb", routes, before: /^end/
     end
 
-    def generate_assets
-      generate "geoblacklight:assets"
-    end
-
     def create_blacklight_catalog
       remove_file "app/controllers/catalog_controller.rb"
       copy_file "catalog_controller.rb", "app/controllers/catalog_controller.rb"
@@ -67,6 +63,14 @@ module Geoblacklight
       directory "../../../../solr", "solr"
     end
 
+    def add_rsolr_gem
+      gem "rsolr", ">= 1.0", "< 3"
+    end
+
+    def docker_compose
+      copy_file "../../../../compose.yml", "compose.yml"
+    end
+
     def include_geoblacklight_solrdocument
       inject_into_file "app/models/solr_document.rb", after: "include Blacklight::Solr::Document" do
         "\n include Geoblacklight::SolrDocument"
@@ -85,13 +89,6 @@ module Geoblacklight
       end
     end
 
-    # Turn off JQuery animations during testing
-    def inject_disable_jquery_animations
-      inject_into_file "app/views/layouts/application.html.erb", before: "</head>" do
-        "  <%= javascript_tag '$.fx.off = true;' if Rails.env.test? %>\n"
-      end
-    end
-
     def create_downloads_directory
       FileUtils.mkdir_p("tmp/cache/downloads") unless File.directory?("tmp/cache/downloads")
     end
@@ -105,47 +102,12 @@ module Geoblacklight
       FileUtils.mkdir_p("app/assets/images") unless File.directory?("app/assets/images")
     end
 
-    # Vite - Required for successful installation
-    def install_vite_rails
-      append_to_file "Gemfile" do
-        "gem \"vite_rails\", \"~> 3.0\""
-      end
-    end
-
-    # Vite - GBL Base Layout with Vite Helper Tags
-    def geoblacklight_base_layout
-      copy_file "base.html.erb", "app/views/layouts/blacklight/base.html.erb"
-    end
-
-    def copy_package_json
+    def generate_assets
       if options[:test]
-        # If building engine cart test app, use specific package.json so the
-        # locally built frontend javascript is used instead of the npm package.
-        copy_file "package-test.json", "package.json"
+        generate "geoblacklight:assets", "--test=true"
       else
-        copy_file "package.json", "package.json"
+        generate "geoblacklight:assets"
       end
     end
-
-    # Vite - Config files
-    def copy_config_vite_json
-      copy_file "vite.json", "config/vite.json"
-      copy_file "vite.config.ts", "vite.config.ts"
-      run "yarn install"
-    end
-
-    # Run bundle with vite install
-    def bundle_install
-      Bundler.with_clean_env do
-        run "bundle install"
-        run "bundle exec vite install"
-      end
-    end
-
-    # Vite - Copy over the Vite entrypoints
-    def copy_vite_entrypoints
-      copy_file "clover.js", "app/javascript/entrypoints/clover.js"
-      copy_file "ol.js", "app/javascript/entrypoints/ol.js"
-    end
   end
 end

data/lib/generators/geoblacklight/templates/assets/_customizations.scss

@@ -1,29 +1,23 @@
 // Local Application Customizations
 
 // Set Header Logo
-$logo-image: image_url('blacklight/logo.svg') !default;
-
-.navbar-brand {  /* The main logo image for the Blacklight instance */
-  @if $logo-image {
-    background: transparent $logo-image no-repeat top left;
-  }
-}
+$logo-image: url("@geoblacklight/frontend/app/assets/images/blacklight/logo.svg");
 
 // Optional
 // Override default Bootstrap variables here
 
 // Example: Bootstrap Colors
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-$dark:    #212529 !default; // $gray-900
+// $blue:    #0d6efd !default;
+// $indigo:  #6610f2 !default;
+// $purple:  #6f42c1 !default;
+// $pink:    #d63384 !default;
+// $red:     #dc3545 !default;
+// $orange:  #fd7e14 !default;
+// $yellow:  #ffc107 !default;
+// $green:   #198754 !default;
+// $teal:    #20c997 !default;
+// $cyan:    #0dcaf0 !default;
+// $dark:    #212529 !default; // $gray-900
 
 // Example: Bootstrap Link color
-$link-color: $blue;
+// $link-color: $blue;

data/lib/generators/geoblacklight/templates/assets/application.js

@@ -0,0 +1,17 @@
+/* Main application javascript entrypoint */
+
+// Turbo & Stimulus
+import "@hotwired/turbo-rails";
+import { application } from "~/controllers/application";
+
+// Blacklight & Geoblacklight
+import githubAutoCompleteElement from "@github/auto-complete-element";
+import Blacklight from "blacklight-frontend";
+import Geoblacklight from "@geoblacklight/frontend";
+
+// Make imports available globally to your code
+window.Blacklight = Blacklight;
+window.Geoblacklight = Geoblacklight;
+
+// Your javascript code goes here
+// console.log("Hello Geoblacklight!");

data/lib/generators/geoblacklight/templates/assets/application.scss

@@ -1,4 +1,9 @@
-@import 'customizations';
-@import 'bootstrap';
-@import 'blacklight';
-@import 'geoblacklight';
+/* Main application styles entrypoint */
+
+// Leaflet, OpenLayers, GeoBlacklight (includes Blacklight and Bootstrap)
+@import "leaflet/dist/leaflet.css";
+@import "leaflet-fullscreen/dist/leaflet.fullscreen.css";
+@import "ol/ol.css";
+@import "~/stylesheets/geoblacklight.scss";
+
+// Your styles here!

data/lib/generators/geoblacklight/templates/assets/geoblacklight.scss

@@ -0,0 +1,11 @@
+// Local customizations (import first, so that variables take precedence)
+@import 'customizations.scss';
+
+// Bootstrap (will use variables defined in customizations, if present)
+@import 'bootstrap/scss/bootstrap.scss';
+
+// Blacklight, imported from blacklight-frontend package
+@import 'blacklight-frontend/app/assets/stylesheets/blacklight/blacklight.scss';
+
+// Geoblacklight, imported from @geoblacklight/frontend package
+@import '@geoblacklight/frontend/app/assets/stylesheets/geoblacklight/geoblacklight.scss';

data/lib/generators/geoblacklight/templates/base.html.erb

@@ -15,24 +15,21 @@
     </script>
     <%= opensearch_description_tag application_name, opensearch_catalog_url(format: 'xml') %>
     <%= favicon_link_tag %>
-    <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %>
-    <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
-
+  
     <%= vite_client_tag %>
-    <% if openlayers_container? %>
-      <%= vite_javascript_tag 'ol' %>
-    <% elsif iiif_manifest_container? %>
-      <%= vite_javascript_tag 'clover' %>
-    <% end %>
+    <%= vite_stylesheet_tag 'application.scss', media: 'all' %>
+    <%= vite_javascript_tag 'application' %>
 
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
   </head>
   <body class="<%= render_body_class %>">
-    <nav id="skip-link" role="navigation" aria-label="<%= t('blacklight.skip_links.label') %>">
-      <%= link_to t('blacklight.skip_links.search_field'), '#search_field', class: 'element-invisible element-focusable rounded-bottom py-2 px-3', data: { turbolinks: 'false' } %>
-      <%= link_to t('blacklight.skip_links.main_content'), '#main-container', class: 'element-invisible element-focusable rounded-bottom py-2 px-3', data: { turbolinks: 'false' } %>
-      <%= content_for(:skip_links) %>
+    <nav id="skip-link" role="navigation" class="visually-hidden-focusable" aria-label="<%= t('blacklight.skip_links.label') %>">
+      <div class="container-xl">
+        <%= link_to t('blacklight.skip_links.search_field'), '#search_field', class: 'd-inline-flex p-2 m-1', data: { turbolinks: 'false' } %>
+        <%= link_to t('blacklight.skip_links.main_content'), '#main-container', class: 'd-inline-flex p-2 m-1', data: { turbolinks: 'false' } %>
+        <%= content_for(:skip_links) %>
+      </div>
     </nav>
     <%= render partial: 'shared/header_navbar' %>