arclight 0.0.1 → 1.4.0

data/Gemfile

@@ -1,4 +1,45 @@
+# frozen_string_literal: true
+
 source 'https://rubygems.org'
 
 # Specify your gem's dependencies in arclight.gemspec
 gemspec
+
+# BEGIN ENGINE_CART BLOCK
+# engine_cart: 2.5.0
+# engine_cart stanza: 2.5.0
+# the below comes from engine_cart, a gem used to test this Rails engine gem in the context of a Rails app.
+file = File.expand_path('Gemfile', ENV['ENGINE_CART_DESTINATION'] || ENV['RAILS_ROOT'] || File.expand_path('.internal_test_app', File.dirname(__FILE__)))
+if File.exist?(file)
+  begin
+    eval_gemfile file
+  rescue Bundler::GemfileError => e
+    Bundler.ui.warn '[EngineCart] Skipping Rails application dependencies:'
+    Bundler.ui.warn e.message
+  end
+else
+  Bundler.ui.warn "[EngineCart] Unable to find test application dependencies in #{file}, using placeholder dependencies"
+
+  if ENV['RAILS_VERSION']
+    if ENV['RAILS_VERSION'] == 'edge'
+      gem 'rails', github: 'rails/rails'
+      ENV['ENGINE_CART_RAILS_OPTIONS'] = '--edge --skip-turbolinks'
+    else
+      gem 'rails', ENV['RAILS_VERSION']
+    end
+
+    case ENV['RAILS_VERSION']
+    when /^6.0/
+      gem 'sass-rails', '>= 6'
+      gem 'webpacker', '~> 4.0'
+    when /^5.[12]/
+      gem 'sass-rails', '~> 5.0'
+      gem 'sprockets', '~> 3.7'
+      gem 'thor', '~> 0.20'
+    end
+  end
+end
+# END ENGINE_CART BLOCK
+
+# Used by engine_cart if you need to change a specific version of a dependency
+eval_gemfile File.expand_path('spec/test_app_templates/Gemfile.extra', File.dirname(__FILE__))

data/LICENSE.txt

@@ -1,4 +1,5 @@
 Copyright 2017 The Board of Trustees of the Leland Stanford Junior University
+Copyright (c) 2017, Regents of the University of Michigan.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

data/README.md

@@ -1,12 +1,25 @@
-# Arclight
+[![Gem Version](https://badge.fury.io/rb/arclight.svg)](https://badge.fury.io/rb/arclight)
+[![npm version](https://badge.fury.io/js/arclight.svg)](https://badge.fury.io/js/arclight)
+![Build Status](https://github.com/projectblacklight/arclight/workflows/CI/badge.svg)
+[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](CONTRIBUTORS.md)
+[![Code Climate Test Coverage](https://codeclimate.com/github/projectblacklight/arclight/badges/coverage.svg)](https://codeclimate.com/github/projectblacklight/arclight/coverage)
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/arclight`. To experiment with that code, run `bin/console` for an interactive prompt.
+# ArcLight
 
-TODO: Delete this and the text above, and describe your gem
+A Rails engine supporting discovery of archival materials, based on [Blacklight](https://projectblacklight.org/)
+
+
+## Requirements
+
+* [Ruby](https://www.ruby-lang.org/en/) 3.0.3 or later
+* [Rails](http://rubyonrails.org) 7.0 or later
+* Solr 8.1 or later
 
 ## Installation
 
-Add this line to your application's Gemfile:
+[Installing ArcLight](https://github.com/projectblacklight/arclight/wiki/Creating,-installing,-and-running-your-ArcLight-application) is straightforward in a Rails environment.
+
+Basically, add this line to your application's `Gemfile`:
 
 ```ruby
 gem 'arclight'
@@ -14,28 +27,103 @@ gem 'arclight'
 
 And then execute:
 
-    $ bundle
+```sh
+$ bundle
+```
 
 Or install it yourself as:
 
-    $ gem install arclight
+```sh
+$ gem install arclight
+```
+
+For further details, see our [Installing ArcLight](https://github.com/projectblacklight/arclight/wiki/Creating,-installing,-and-running-your-ArcLight-application) documentation.
 
 ## Usage
 
-TODO: Write usage instructions here
+Arclight is a Ruby gem designed to work with archival data. It can be installed on a server or virtual server. Once running, finding aids in the form of archival collection data can be imported into Arclight through an indexing process. Institutional and repositories data can also be added to Arclight (Currently this requires a developer. Configuration pages will be added for this in future versions). Additional finding aids can be added at any time.
+
+After data indexing, Arclight can to be used to search, browse, and display the repositories (sets of collections), collections, and components within collections. Globally available search allows filtering on several types of terms (Keyword, Name, Place, etc.). Once a search is begun, it can be further narrowed using facets on the left side of the search page. Selecting a search result goes directly to that results show or display page. Also global available are buttons for Repositories and Collections which can be used an any time.
+
+Browsing allows you to view the Overview or Contents (when it exists) of a collection. The Overview tab displays top level metadata about the collection. The Contents tab displays an outline view of a next level of the collection. You can expand each level by selecting (clicking). Selecting a component in the Contents views goes to a component page which shows the metadata for it.
+
+Some pages include an inline view tab to the right of an item which will expand the Contents further.
+
+See the [ArcLight demo](https://arclight-demo.projectblacklight.org/) and [ArcLight MVP Wiki](https://github.com/projectblacklight/arclight/wiki) for usage.
+
+See [Arclight Major Features](https://github.com/projectblacklight/arclight/wiki/Arclight-Major-Features) for a list of features.
+
+### Traject indexing of EAD content
+[Traject](https://github.com/traject/traject) is a high performance way of transforming documents for indexing into Solr and how ArcLight does indexing. An EAD2 can be indexed by doing the following:
+
+```sh
+bundle exec traject -u http://127.0.0.1:8983/solr/blacklight-core -i xml -c lib/arclight/traject/ead2_config.rb spec/fixtures/ead/sample/large-components-list.xml
+```
+
+Or
+
+```sh
+bundle exec rake arclight:seed
+```
+
+## Resources
+
+* General
+  * [ArcLight demo site](https://arclight-demo.projectblacklight.org/)
+  * [ArcLight Github wiki](https://github.com/projectblacklight/arclight/wiki): developer/implementor documentation
+  * [Blacklight wiki](https://github.com/projectblacklight/blacklight/wiki)
+  * Use the [ArcLight Google Group](http://groups.google.com/d/forum/arclight-community) to contact us with questions
+* ArcLight MVP:
+  * [MVP sprint demo videos](https://www.youtube.com/playlist?list=PLMdUaIJ0G8QgbuDCUVvFhTSTO96N37lRA)
+
+## Contributors
+
+See the [CONTRIBUTORS](CONTRIBUTORS.md) file.
 
 ## Development
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+ArcLight requires Solr to be running.  For development you can start this using `solr_wrapper` or you may choose to use Docker. Start Solr using Docker by doing `docker compose up`.
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+### Run the test suite
 
-## Contributing
+Ensure Solr and Rails are _not_ running (ports 8983 and 3000 respectively), then:
+
+```sh
+$ bundle exec rake
+```
+If you find that the tests are failing when you run them on a Linux computer, you might need to install Google Chrome so the Selenium testing framework can run properly.
+
+### Run a development server
+
+```sh
+$ bundle exec rake arclight:server
+```
+
+Then visit http://localhost:3000. It will also start a Solr instance on port 8983.
+
+### Run a console
+
+You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+### Releasing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/arclight.
+#### To release a new gem:
 
+1. Update the version number in `lib/arclight/version.rb`
+2. Run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, build the gem file (e.g., `gem build arclight.gemspec`) and push the `.gem` file to [rubygems.org](https://rubygems.org) (e.g., `gem push arclight-x.y.z.gem`).
+
+#### To release the frontend sources:
+
+When any of the javascript components or SASS sources in the gem are changed, this package should be published to NPM with the following steps:
+1. [Install npm](https://www.npmjs.com/get-npm)
+2. Bump the version number in `package.json`
+3. run `npm run build && npm publish` to push the javascript package to https://npmjs.org/package/arclight
+
+## Contributing
 
+[Bug reports](https://github.com/projectblacklight/arclight/issues) and [pull requests](https://github.com/projectblacklight/arclight/pulls) are welcome on ArcLight -- see [CONTRIBUTING.md](https://github.com/projectblacklight/arclight/blob/main/CONTRIBUTING.md) for details.
 ## License
 
-The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [Apache 2 License](https://opensource.org/licenses/Apache-2.0).
 
+ArcLight also uses embedded SVG icons from the [FontAwesome](https://fontawesome.com) project. These icons are unmodified and licensed [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). All of these icons have the license and attribution embedded in them.

data/Rakefile

@@ -1,6 +1,16 @@
-require "bundler/gem_tasks"
-require "rspec/core/rake_task"
+# frozen_string_literal: true
+
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
 
 RSpec::Core::RakeTask.new(:spec)
 
-task :default => :spec
+require 'rubocop/rake_task'
+RuboCop::RakeTask.new(:rubocop)
+
+Dir.glob('./tasks/*.rake').each { |f| load f }
+Dir.glob('./lib/tasks/*.rake').each { |f| load f }
+
+require 'engine_cart/rake_task'
+
+task default: %i[rubocop eslint ci]

data/app/assets/images/blacklight/bookmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 384 512"><path d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z"/></svg>

data/app/assets/images/blacklight/collection.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M32 448c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V160H32v288zm160-212c0-6.6 5.4-12 12-12h104c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-8zM480 32H32C14.3 32 0 46.3 0 64v48c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16V64c0-17.7-14.3-32-32-32z"/></svg>

data/app/assets/images/blacklight/compact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M3,15H21V13H3Zm0,4H21V17H3Zm0-8H21V9H3ZM3,5V7H21V5Z"/></svg>

data/app/assets/images/blacklight/container.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>

data/app/assets/images/blacklight/ead.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512"><path d="M149.9 349.1l-.2-.2-32.8-28.9 32.8-28.9c3.6-3.2 4-8.8.8-12.4l-.2-.2-17.4-18.6c-3.4-3.6-9-3.7-12.4-.4l-57.7 54.1c-3.7 3.5-3.7 9.4 0 12.8l57.7 54.1c1.6 1.5 3.8 2.4 6 2.4 2.4 0 4.8-1 6.4-2.8l17.4-18.6c3.3-3.5 3.1-9.1-.4-12.4zm220-251.2L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM256 51.9l76.1 76.1H256zM336 464H48V48h160v104c0 13.3 10.7 24 24 24h104zM209.6 214c-4.7-1.4-9.5 1.3-10.9 6L144 408.1c-1.4 4.7 1.3 9.6 6 10.9l24.4 7.1c4.7 1.4 9.6-1.4 10.9-6L240 231.9c1.4-4.7-1.3-9.6-6-10.9zm24.5 76.9l.2.2 32.8 28.9-32.8 28.9c-3.6 3.2-4 8.8-.8 12.4l.2.2 17.4 18.6c3.3 3.5 8.9 3.7 12.4.4l57.7-54.1c3.7-3.5 3.7-9.4 0-12.8l-57.7-54.1c-3.5-3.3-9.1-3.2-12.4.4l-17.4 18.6c-3.3 3.5-3.1 9.1.4 12.4z"/></svg>

data/app/assets/images/blacklight/file.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 384 512"><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg>

data/app/assets/images/blacklight/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>

data/app/assets/images/blacklight/list.svg

@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>file</title><path d="M0,0H24V24H0Z" fill="none"/><path d="M3,19H21V13.45H3ZM3,5v5.61H21V5Z"/></svg>

data/app/assets/images/blacklight/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

data/app/assets/images/blacklight/online.svg

@@ -0,0 +1,5 @@
+<!--
+  Used unmodified from https://fontawesome.com
+  CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 640 512"><path d="M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32 32 32 0 0 1 32-32zm288 224H64v-32l64-64 32 32 128-128 96 96z"/></svg>

data/app/assets/images/blacklight/pdf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512"><path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm250.2-143.7c-12.2-12-47-8.7-64.4-6.5-17.2-10.5-28.7-25-36.8-46.3 3.9-16.1 10.1-40.6 5.4-56-4.2-26.2-37.8-23.6-42.6-5.9-4.4 16.1-.4 38.5 7 67.1-10 23.9-24.9 56-35.4 74.4-20 10.3-47 26.2-51 46.2-3.3 15.8 26 55.2 76.1-31.2 22.4-7.4 46.8-16.5 68.4-20.1 18.9 10.2 41 17 55.8 17 25.5 0 28-28.2 17.5-38.7zm-198.1 77.8c5.1-13.7 24.5-29.5 30.4-35-19 30.3-30.4 35.7-30.4 35zm81.6-190.6c7.4 0 6.7 32.1 1.8 40.8-4.4-13.9-4.3-40.8-1.8-40.8zm-24.4 136.6c9.7-16.9 18-37 24.7-54.7 8.3 15.1 18.9 27.2 30.1 35.5-20.8 4.3-38.9 13.1-54.8 19.2zm131.6-5s-5 6-37.3-7.8c35.1-2.6 40.9 5.4 37.3 7.8z"/></svg>

data/app/assets/images/blacklight/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

data/app/assets/images/blacklight/repository.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></svg>

data/app/assets/javascripts/arclight/arclight.js

@@ -0,0 +1,4 @@
+import Truncate from 'arclight/truncate_controller'
+Stimulus.register('arclight-truncate', Truncate)
+import Oembed from 'arclight/oembed_controller'
+Stimulus.register('arclight-oembed', Oembed)

data/app/assets/javascripts/arclight/oembed_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class OembedController extends Controller {
+  static values = {
+    url: String
+  }
+
+  connect() {
+    const loadedAttr = this.element.getAttribute('loaded')
+
+    if (loadedAttr && loadedAttr === 'loaded') {
+      return
+    }
+
+    fetch(this.urlValue)
+      .then((response) => {
+        if (response.ok) return response.text()
+        throw new Error(`HTTP error, status = ${response.status}`)
+      })
+      .then((body) => {
+        const oEmbedEndPoint = this.findOEmbedEndPoint(body)
+        if (!oEmbedEndPoint || oEmbedEndPoint.length === 0) {
+          console.warn(`No oEmbed endpoint found in <head> at ${this.urlValue}`)
+          return
+        }
+        this.loadEndPoint(oEmbedEndPoint)
+      }).catch(error => {
+        console.error(error)
+      })
+  }
+
+  // We are choosing not to make this class static so that downstream classes
+  // can override it and access values to populate extraParams.
+  // E.g. https://github.com/sul-dlss/vt-arclight/blob/main/app/javascript/controllers/sul_embed_controller.js
+  findOEmbedEndPoint(body, extraParams = {}) { // eslint-disable-line class-methods-use-this
+    // Parse out link elements so image assets are not loaded
+    const template = document.createElement('template')
+    template.innerHTML = body.match(/<link .*>/g).join('')
+
+    // Look for a link element containing the oEmbed endpoint; bail out if none
+    const endpoint = template.content.querySelector('link[rel="alternate"][type="application/json+oembed"]')
+      ?.getAttribute('href')
+    if (!endpoint) return ''
+
+    // Serialize any extra params and append them to the endpoint
+    const qs = new URLSearchParams(extraParams).toString()
+    return `${endpoint}&${qs}`
+  }
+
+  loadEndPoint(oEmbedEndPoint) {
+    fetch(oEmbedEndPoint)
+      .then((response) => response.json())
+      .then((json) => {
+        this.element.innerHTML = json.html
+        this.element.setAttribute('loaded', 'loaded')
+      })
+  }
+}

data/app/assets/javascripts/arclight/truncate_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['content']
+
+  connect() {
+    // target elements
+    const contentInner = Array.from(this.contentTarget.children)
+
+    // calculate total scrollable inner height vs. observed outer height
+    const outerHeight = this.contentTarget.clientHeight
+    const innerHeight = contentInner.map(e => e.scrollHeight).reduce((a, b) => a + b, 0)
+
+    // truncation occurred if total inner height exceeds outer (observed) height.
+    // if no longer truncated, reset the expanded state (e.g. on window resize).
+    if (innerHeight > outerHeight) {
+      this.element.classList.add('truncated')
+    } else {
+      this.element.classList.remove('truncated')
+      this.contentTarget.classList.remove('expanded')
+    }
+  }
+
+  trigger() {
+    this.element.classList.toggle('expanded')
+  }
+}

data/app/assets/stylesheets/arclight/application.scss

@@ -0,0 +1,14 @@
+@import 'variables';
+@import 'responsive';
+@import 'modules/collection_search';
+@import 'modules/highlights';
+@import 'modules/hierarchy_and_online_contents';
+@import 'modules/icons';
+@import 'modules/layout';
+@import 'modules/mastheads';
+@import 'modules/repositories.scss';
+@import 'modules/repository_card.scss';
+@import 'modules/search_results';
+@import 'modules/show_collection';
+@import 'modules/truncator';
+@import 'modules/search_form';

data/app/assets/stylesheets/arclight/build.scss

@@ -0,0 +1,4 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/variables";
+@import "application";

data/app/assets/stylesheets/arclight/modules/collection_search.scss

@@ -0,0 +1,3 @@
+.al-collection-count {
+  padding-top: 20px;
+}

data/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss

@@ -0,0 +1,155 @@
+:root {
+  --al-toggle-icon-color: #{$navbar-light-color};
+  /* Font Awesome Free 6.5.2 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license/free (CC BY 4.0 License) Copyright 2024 Fonticons, Inc. */
+  --al-hierarchy-view-expand-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>");
+  --al-hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>");
+}
+
+// Collapse +/- indicators
+.al-toggle-view-children {
+  background-color: var(--al-toggle-icon-color);
+  flex-shrink: 0;
+  height: 1.25rem;
+  margin-left: -1.25rem;
+  margin-right: 0.25 * $spacer;
+  margin-top: 0.1 * $spacer;
+  mask: var(--al-hierarchy-view-expand-icon);
+  width: 1.1rem;
+
+  &:not(.collapsed) {
+    mask: var(--al-hierarchy-view-collapse-icon);
+  }
+}
+
+.al-hierarchy-highlight > .documentHeader {
+  background: $mark-bg;
+}
+
+#collection-context {
+  ul {
+    list-style: none;
+
+    padding-left: 1.5rem;
+
+    ul {
+      padding-left: 1rem;
+    }
+  }
+
+  .documentHeader {
+    display: flex;
+    margin-bottom: 0.5 * $spacer;
+  }
+
+  .al-document-container {
+    display: none;
+  }
+
+  turbo-frame[busy] {
+    &::before {
+      animation: placeholder-glow 2s ease-in-out infinite;
+      background-color: currentcolor;
+      content: "Loading...";
+      cursor: wait;
+      display: inline-block;
+      min-height: 1em;
+      opacity: 0.5;
+      vertical-align: middle;
+      display: inline-block;
+      margin-left: 1.5rem;
+    }
+  }
+}
+
+#contents {
+  .documents {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      padding: 0.25 * $spacer 0.5 * $spacer;
+    }
+
+    li:nth-of-type(odd) {
+      background-color: $table-striped-bg;
+    }
+  }
+
+  .documentHeader {
+    display: flex;
+    gap: 2rem;
+    justify-content: space-between;
+    margin-bottom: 0.5 * $spacer;
+  }
+
+  .al-document-container {
+    flex-basis: 25%;
+    text-align: right;
+  }
+}
+
+// Scope content
+.al-document-abstract-or-scope {
+  font-size: 0.85rem;
+  line-height: 1.5;
+  max-width: 45em;
+  margin-bottom: $spacer;
+}
+
+.alert {
+  .blacklight-icons svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.title-container {
+  border-bottom: $border-width solid $border-color;
+  padding-bottom: $spacer * 0.5;
+  margin-bottom: $spacer * 0.75;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-areas:
+    "title bookmark-toggle"
+    "request request"
+    "sidebar-toggle sidebar-toggle"
+    "online-contents online-contents";
+  justify-content: space-between; // This will push the bookmark control to the right when the title is short
+  align-items: start;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "title request bookmark-toggle"
+      "sidebar-toggle sidebar-toggle sidebar-toggle"
+      "online-contents online-contents online-contents";
+  }
+
+  h1 {
+    grid-area: title;
+    margin-bottom: 0;
+  }
+
+  .al-request {
+    grid-area: request;
+  }
+
+  .bookmark-toggle {
+    grid-area: bookmark-toggle;
+    margin-left: 0 !important;
+  }
+
+  .sidebar-toggle {
+    grid-area: sidebar-toggle;
+    max-width: fit-content;
+  }
+
+  .online-contents {
+    grid-area: online-contents;
+    margin-bottom: 1rem;
+
+    h2 {
+      font-size: 1rem;
+      text-transform: uppercase;
+    }
+  }
+}

data/app/assets/stylesheets/arclight/modules/highlights.scss

@@ -0,0 +1,11 @@
+.al-document-highlight {
+  padding-top: 10px;
+  padding-left: 10px;
+  font-size: $font-size-sm;
+  font-style: italic;
+  margin-bottom: $spacer;
+  em {
+    background-color: $background-highlight;
+    font-weight: bold;
+  }
+}

data/app/assets/stylesheets/arclight/modules/icons.scss

@@ -0,0 +1,20 @@
+:root {
+  --al-online-icon-color: #{$online-icon-color};
+}
+.toggle-bookmark,
+.breadcrumb-item,
+.document,
+.al-online-content-icon {
+  .blacklight-icons svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.al-online-content-icon .blacklight-icons svg {
+  fill: var(--al-online-icon-color);
+}
+
+.btn > .bi:first-child {
+  margin-inline-end: 0.25rem !important;
+}