From 42ff11c4a436e175efec6ee03acdb1d30373471d Mon Sep 17 00:00:00 2001 From: uy-rrodriguez <5296200+uy-rrodriguez@users.noreply.github.com> Date: Wed, 24 Apr 2024 18:02:12 +0100 Subject: [PATCH] Fixed SASS to load Bootstrap from project folder --- .github/workflows/jekyll.yml | 2 +- Dockerfile | 4 +- README.md | 22 ++++++++++ _sass/_bootstrap.scss | 82 ++++++++++++++++++------------------ 4 files changed, 65 insertions(+), 45 deletions(-) diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml index 52c6440..a341e7c 100644 --- a/.github/workflows/jekyll.yml +++ b/.github/workflows/jekyll.yml @@ -57,7 +57,7 @@ jobs: - name: Setup Ruby uses: ruby/setup-ruby@55283cc23133118229fd3f97f9336ee23a179fcf # v1.146.0 with: - ruby-version: '3.1' # Not needed with a .ruby-version file + ruby-version: '3.2' # Not needed with a .ruby-version file bundler-cache: true # runs 'bundle install' and caches installed gems automatically cache-version: 0 # Increment this number if you need to re-download cached gems - name: Setup Pages diff --git a/Dockerfile b/Dockerfile index 52947c5..4bcaf6e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,9 +9,6 @@ ARG FTP_PROXY=${FTP_PROXY} ARG HTTP_PROXY=${HTTP_PROXY} ARG HTTPS_PROXY=${HTTPS_PROXY} -ENV GEM_HOME=/home/${USER}/gems -ENV PATH="${GEM_HOME}:${PATH}" - EXPOSE 4000 WORKDIR /opt/code @@ -42,6 +39,7 @@ USER ${USER}:${GROUP} COPY --chown=${USER}:${GROUP} . . # Finally, install Jekyll, Bundler, and other dependencies +RUN bundle config --local path $PWD/vendor/bundle RUN bundle install CMD bundle exec jekyll serve --host 0.0.0.0 diff --git a/README.md b/README.md index 5c419c8..9158ccb 100644 --- a/README.md +++ b/README.md @@ -21,3 +21,25 @@ And build and serve the site with: ```sh bundle exec jekyll serve ``` + +## Building with Docker + +Docker deployment files are provided to develop in environments where installing +Ruby is not possible. + +The file `compose.yml` binds the project folder to the host mount point +`/opt/code`. This is done so Jekyll can detect changes in the local files and +rebuild the website. + +1. Clone this repository +2. Copy `sample.env` to `.env` and update with your environment configuration. +3. Build and serve the site with: + + ```sh + docker compose build + docker compose run --rm web bundle install + docker compose up + ``` + + The second command will install the Ruby dependencies in your local project + folder and make them available for the Docker container during development. diff --git a/_sass/_bootstrap.scss b/_sass/_bootstrap.scss index 19d2722..decb75e 100644 --- a/_sass/_bootstrap.scss +++ b/_sass/_bootstrap.scss @@ -1,11 +1,11 @@ /* * This file includes Bootstrap components as required by the website. * - * Boostrap library is now managed as a gem and downloaded into $GEM_HOME (~/gems). + * Boostrap library is now managed as a gem and downloaded into the default $GEM_HOME. */ // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/functions"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/functions"; // 2. Include any default variable overrides here @import "brand_colours"; @@ -26,52 +26,52 @@ $navbar-dark-color: $white !default; $navbar-dark-toggler-border-color: rgba($white, .5) !default; // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/bootstrap.scss"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/variables"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/variables-dark"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/bootstrap.scss"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/variables"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/variables-dark"; // 4. Include any default map overrides here // 5. Include remainder of required parts -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/maps"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/mixins"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/root"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/maps"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/mixins"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/root"; // 6. Optionally include any other parts as needed -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/utilities"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/reboot"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/type"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/images"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/containers"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/grid"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/tables"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/forms"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/buttons"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/transitions"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/dropdown"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/button-group"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/nav"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/navbar"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/card"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/accordion"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/breadcrumb"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/pagination"; -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/badge"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/alert"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/progress"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/list-group"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/close"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/toasts"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/modal"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/tooltip"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/popover"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/carousel"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/spinners"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/offcanvas"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/placeholders"; -// @import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/helpers"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/utilities"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/reboot"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/type"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/images"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/containers"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/grid"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/tables"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/forms"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/buttons"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/transitions"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/dropdown"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/button-group"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/nav"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/navbar"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/card"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/accordion"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/breadcrumb"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/pagination"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/badge"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/alert"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/progress"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/list-group"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/close"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/toasts"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/modal"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/tooltip"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/popover"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/carousel"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/spinners"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/offcanvas"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/placeholders"; +// @import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/helpers"; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` -@import "~/gems/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/utilities/api"; +@import "../vendor/bundle/ruby/3.2.0/gems/bootstrap-5.3.2/assets/stylesheets/bootstrap/utilities/api"; // 8. Add additional custom code here