Build the css without requiring the user to run Sass

projectblacklight · Jun 7, 2024 · 1ae67ce · 1ae67ce
1 parent 094e10f
commit 1ae67ce
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@
 /pkg/
 /spec/reports/
 /tmp/
+/app/assets/builds/
 
 # rspec failure tracking
 .rspec_status

diff --git a/README.md b/README.md
@@ -117,7 +117,7 @@ You can also run `bin/console` for an interactive prompt that will allow you to
 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 publish` to push the javascript package to https://npmjs.org/package/arclight
+3. run `npm run build && npm publish` to push the javascript package to https://npmjs.org/package/arclight
 
 ## Contributing
 

diff --git a/app/assets/stylesheets/arclight/build.scss b/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";
diff --git a/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss b/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss
@@ -48,9 +48,14 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
 
   turbo-frame[busy] {
     &::before {
-      @extend .placeholder !optional;
       animation: placeholder-glow 2s ease-in-out infinite;
-      content: 'Loading...';
+      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;
     }
@@ -101,8 +106,8 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
 
 .title-container {
   border-bottom: $border-width solid $border-color;
-  padding-bottom: $spacer * .5;
-  margin-bottom: $spacer * .75;
+  padding-bottom: $spacer * 0.5;
+  margin-bottom: $spacer * 0.75;
   display: grid;
   gap: 0.5rem;
   grid-template-areas:
@@ -142,7 +147,7 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
   .online-contents {
     grid-area: online-contents;
     margin-bottom: 1rem;
-  
+
     h2 {
       font-size: 1rem;
       text-transform: uppercase;

diff --git a/app/assets/stylesheets/arclight/modules/icons.scss b/app/assets/stylesheets/arclight/modules/icons.scss
@@ -1,5 +1,7 @@
-
-.toggle-bookmark, .breadcrumb-item, .document, .al-online-content-icon {
+.toggle-bookmark,
+.breadcrumb-item,
+.document,
+.al-online-content-icon {
   .blacklight-icons svg {
     height: 1rem;
     width: 1rem;
@@ -11,5 +13,5 @@
 }
 
 .btn > .bi:first-child {
-  @extend .me-1
+  margin-inline-end: 0.25rem !important;
 }
diff --git a/app/assets/stylesheets/arclight/modules/layout.scss b/app/assets/stylesheets/arclight/modules/layout.scss
@@ -7,7 +7,7 @@
 .al-show-breadcrumb {
   border-bottom: $border-width solid $border-color;
   padding-bottom: $spacer;
-  margin-bottom: $spacer * .75;
+  margin-bottom: $spacer * 0.75;
   width: 100%;
 
   $bent-arrow: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><path fill-rule='evenodd' d='M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z'></path></svg>";
@@ -53,7 +53,9 @@
     }
   }
 
-  .breadcrumb-item-1, .breadcrumb-item-4 { // breadcrumb-item-3 can have multiple on one line
+  .breadcrumb-item-1,
+  .breadcrumb-item-4 {
+    // breadcrumb-item-3 can have multiple on one line
     flex: 1 0 100%;
     color: $gray-600;
   }
@@ -100,14 +102,14 @@
   border: $default-border-styling;
   background-color: $gray-200;
   font-size: $font-size-sm;
-  padding: ($spacer * .5) $spacer ($spacer * .75);
+  padding: ($spacer * 0.5) $spacer ($spacer * 0.75);
 
   @media (max-width: 767px) {
     margin-top: $spacer;
   }
 
   .al-collection-id {
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
 
   &-options {
@@ -153,12 +155,16 @@
 }
 
 .show-document {
-  @extend .ps-lg-4;
-
   .title-container .bookmark-toggle {
-    @extend .card;
-    @extend .bg-light;
-    @extend .p-2;
+    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
+    padding: 0.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .show-document {
+    padding-left: 1.5rem !important;
   }
 }
 
@@ -177,7 +183,10 @@ dl.deflist dt {
   text-align: left;
 }
 
-.chronlist-head, .list-head, .index-head, .table-head {
+.chronlist-head,
+.list-head,
+.index-head,
+.table-head {
   caption-side: top;
   font-size: 1.25rem;
   font-weight: 500;

diff --git a/app/assets/stylesheets/arclight/modules/search_results.scss b/app/assets/stylesheets/arclight/modules/search_results.scss
@@ -35,7 +35,7 @@
     }
 
     .al-document-abstract-or-scope {
-      margin-bottom: $spacer * .5;
+      margin-bottom: $spacer * 0.5;
       max-width: 45em;
     }
   }
@@ -51,7 +51,7 @@ article.document {
   div.breadcrumb-links,
   dd.al-document-abstract-or-scope,
   dd.al-document-creator {
-    margin-top: ($spacer * .5);
+    margin-top: ($spacer * 0.5);
   }
 
   form.bookmark-toggle.col-auto {
@@ -66,12 +66,12 @@ article.document {
 
   .al-document-abstract-or-scope {
     margin-bottom: 0;
-    margin-top: $spacer * .75;
+    margin-top: $spacer * 0.75;
     max-width: 45em;
   }
   .al-grouped-repository {
     font-size: $font-size-sm;
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
   .al-grouped-title-bar {
     background-color: $gray-200;
@@ -91,7 +91,7 @@ article.document {
     .al-grouped-more {
       border-bottom: $default-border-styling;
       margin-bottom: $spacer;
-      padding: ($spacer * .5) 0;
+      padding: ($spacer * 0.5) 0;
     }
 
     .document {
@@ -121,7 +121,6 @@ article.document {
   margin-bottom: ($spacer * 3) !important;
 }
 
-
 // Compact Search Results
 .documents-compact {
   margin-bottom: $spacer;
@@ -147,7 +146,7 @@ article.document {
 
 .index-document-functions {
   display: flex;
-  @extend .justify-content-end;
+  justify-content: flex-end !important;
 }
 
 .al-document-container.text-muted {
@@ -176,13 +175,14 @@ article.document {
 
 .breadcrumb-links .col {
   flex-basis: auto;
- }
+}
 
 .btn-outline-secondary svg {
   fill: $gray-600;
 }
 
-.btn-outline-secondary:not(:disabled):not(.disabled).active svg, .btn-outline-secondary:hover svg {
+.btn-outline-secondary:not(:disabled):not(.disabled).active svg,
+.btn-outline-secondary:hover svg {
   fill: $white;
 }
 
@@ -197,11 +197,10 @@ article.document {
   justify-content: flex-end;
 }
 
-
 .result-type-group {
   order: -1;
   flex-grow: 1;
-  &.btn-group>.btn {
+  &.btn-group > .btn {
     flex-grow: 0;
   }
 }
@@ -246,6 +245,5 @@ article.document {
     .bookmark-toggle {
       display: none;
     }
-
   }
 }
diff --git a/package.json b/package.json
@@ -9,9 +9,12 @@
   "devDependencies": {
     "eslint": "^8.26.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.2.0"
+    "eslint-plugin-import": "^2.2.0",
+    "sass": "^1.59.3",
+    "bootstrap": "^5.2.0"
   },
   "scripts": {
+    "build": "sass ./app/assets/stylesheets/arclight/build.scss:./app/assets/builds/arclight.css --no-source-map --load-path=node_modules",
     "lint": "eslint './app/assets/javascripts/**/*.{js,es6}'",
     "lint:fix": "eslint --fix './app/assets/javascripts/**/*.{js,es6}'",
     "test": "echo \"Error: no test specified\" && exit 1"