nimblehq · malparty · Jul 27, 2023 · Jul 3, 2023 · Jul 3, 2023 · Jul 3, 2023
@@ -9,9 +9,9 @@ env:
   DOCKER_REGISTRY_HOST: ${{ secrets.DOCKER_REGISTRY_HOST }}
   DOCKER_REGISTRY_USERNAME: ${{ github.repository_owner }}
   DOCKER_REGISTRY_TOKEN: ${{ secrets.DOCKER_REGISTRY_TOKEN }}
-  RUBY_VERSION: 3.0.1
+  RUBY_VERSION: 3.2.2
   NODE_VERSION: 16
-  RAILS_VERSION: 7.0.1
+  RAILS_VERSION: 7.0.6
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

@@ -6,9 +6,9 @@ env:
   APP_NAME: rails_templates
   DOCKER_IMAGE: ${{ github.repository }}
   DOCKER_REGISTRY_HOST: ${{ secrets.DOCKER_REGISTRY_HOST }}
-  RUBY_VERSION: 3.0.1
+  RUBY_VERSION: 3.2.2
   NODE_VERSION: 16
-  RAILS_VERSION: 7.0.1
+  RAILS_VERSION: 7.0.6
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

@@ -3,7 +3,7 @@ name: Test the codebase of the template
 on: push
 
 env:
-  RUBY_VERSION: 3.0.1
+  RUBY_VERSION: 3.2.2
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

@@ -2,64 +2,70 @@ GEM
   remote: https://rubygems.org/
   specs:
     ast (2.4.2)
-    diff-lcs (1.4.4)
+    diff-lcs (1.5.0)
     docker-api (2.2.0)
       excon (>= 0.47.0)
       multi_json
-    excon (0.90.0)
+    excon (0.100.0)
+    json (2.6.3)
+    language_server-protocol (3.17.0.3)
     multi_json (1.15.0)
-    net-scp (3.0.0)
-      net-ssh (>= 2.6.5, < 7.0.0)
-    net-ssh (6.1.0)
+    net-scp (4.0.0)
+      net-ssh (>= 2.6.5, < 8.0.0)
+    net-ssh (7.1.0)
     net-telnet (0.1.1)
-    parallel (1.21.0)
-    parser (3.1.0.0)
+    parallel (1.23.0)
+    parser (3.2.2.3)
       ast (~> 2.4.1)
+      racc
+    racc (1.7.1)
     rainbow (3.1.1)
-    regexp_parser (2.2.0)
+    regexp_parser (2.8.1)
     rexml (3.2.5)
-    rspec (3.9.0)
-      rspec-core (~> 3.9.0)
-      rspec-expectations (~> 3.9.0)
-      rspec-mocks (~> 3.9.0)
-    rspec-core (3.9.2)
-      rspec-support (~> 3.9.3)
-    rspec-expectations (3.9.2)
+    rspec (3.12.0)
+      rspec-core (~> 3.12.0)
+      rspec-expectations (~> 3.12.0)
+      rspec-mocks (~> 3.12.0)
+    rspec-core (3.12.2)
+      rspec-support (~> 3.12.0)
+    rspec-expectations (3.12.3)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.9.0)
+      rspec-support (~> 3.12.0)
     rspec-its (1.3.0)
       rspec-core (>= 3.0.0)
       rspec-expectations (>= 3.0.0)
-    rspec-mocks (3.9.1)
+    rspec-mocks (3.12.5)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.9.0)
-    rspec-support (3.9.3)
+      rspec-support (~> 3.12.0)
+    rspec-support (3.12.1)
     rspec-wait (0.0.9)
       rspec (>= 3, < 4)
-    rubocop (1.25.0)
+    rubocop (1.54.0)
+      json (~> 2.3)
+      language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
-      parser (>= 3.1.0.0)
+      parser (>= 3.2.2.3)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
-      rexml
-      rubocop-ast (>= 1.15.1, < 2.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.28.0, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.15.1)
-      parser (>= 3.0.1.1)
-    ruby-progressbar (1.11.0)
-    serverspec (2.41.5)
+      unicode-display_width (>= 2.4.0, < 3.0)
+    rubocop-ast (1.29.0)
+      parser (>= 3.2.1.0)
+    ruby-progressbar (1.13.0)
+    serverspec (2.42.2)
       multi_json
       rspec (~> 3.0)
       rspec-its
       specinfra (~> 2.72)
     sfl (2.3)
-    specinfra (2.82.18)
+    specinfra (2.86.0)
       net-scp
       net-ssh (>= 2.7)
       net-telnet (= 0.1.1)
       sfl
-    unicode-display_width (2.1.0)
+    unicode-display_width (2.4.2)
 
 PLATFORMS
   ruby

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 
-run 'yarn add bootstrap@5.2.3'
-run 'yarn add @popperjs/[email protected].2'
+run 'yarn add bootstrap@5.3.0'
+run 'yarn add @popperjs/[email protected].8'
@@ -1,52 +1,53 @@
-// By default every component is imported
-// But DO NOT import the whole framework but instead
-// pick what the project requires
-// and comment out the rest.
-
-// Configuration
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import 'bootstrap/scss/functions';
+
+// 2. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
 @import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/maps';
-// @import 'sass_maps'; // Optional Sass map overrides here (See: https://getbootstrap.com/docs/5.2/migration/#new-_mapsscss)
-// e.g., $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+@import 'bootstrap/scss/variables-dark';
 
+// 3. Include remainder of required parts
+@import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/root';
 @import 'bootstrap/scss/utilities';
 
-// Layout & components
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
+// 4. Optionally include any other parts as needed
+// By default every component is imported
+// But DO NOT import the whole framework but instead
+// pick what the project requires
+// and comment out the rest.
+@import 'bootstrap/scss/accordion';
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/button-group';
 @import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/carousel';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/containers';
 @import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/helpers';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/modal';
 @import 'bootstrap/scss/nav';
 @import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/accordion';
-@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/offcanvas';
 @import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/placeholders';
+@import 'bootstrap/scss/popover';
 @import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/tables';
 @import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
 @import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/offcanvas';
-
-// Helpers
-@import 'bootstrap/scss/helpers';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/type';
 
-// Utilities
+// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import 'bootstrap/scss/utilities/api';
@@ -38,7 +38,8 @@ RUN apt-get update -qq && \
 ADD https://dl.yarnpkg.com/debian/pubkey.gpg /tmp/yarn-pubkey.gpg
 RUN apt-key add /tmp/yarn-pubkey.gpg && rm /tmp/yarn-pubkey.gpg && \
     echo "deb http://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list && \
-    curl -sL https://deb.nodesource.com/setup_"$NODE_SOURCE_VERSION".x | bash - && \
+    echo 'Package: nodejs\nPin: origin deb.nodesource.com\nPin-Priority: 600' > /etc/apt/preferences.d/nodesource && \
+    curl -fsSL https://deb.nodesource.com/setup_"$NODE_SOURCE_VERSION".x | bash - && \
     apt-get update -qq && \
     apt-get install -y --no-install-recommends nodejs yarn && \
     apt-get clean && \

@@ -2,17 +2,30 @@ name: Publish Wiki
 
 on:
   push:
-    paths:
-      - .github/wiki/**
     branches:
       - develop
+    paths:
+      - .github/wiki/**
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
   publish:
-    name: Publish Wiki
-    uses: nimblehq/github-actions-workflows/.github/workflows/[email protected]
-    with:
-      USER_NAME: github-wiki-workflow
-      USER_EMAIL: ${{ secrets.GH_EMAIL }}
-    secrets:
-      USER_TOKEN: ${{ secrets.GH_TOKEN }}
+    name: Publish Github Wiki
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Publish Github Wiki
+        uses: nimblehq/[email protected]
+        with:
+          user_name: github-wiki-workflow
+          user_email: [email protected]
+          user_access_token: ${{ secrets.USER_ACCESS_TOKEN }}
@@ -144,7 +144,7 @@ jobs:
     needs: unit_tests
     runs-on: ubuntu-latest
     timeout-minutes: 5
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && !contains(join(github.event.pull_request.labels.*.name, ','), 'wip') && !contains(github.event.pull_request.title, '[wip]') && !github.event.pull_request.draft
     steps:
       - uses: actions/checkout@v3
         with:

@@ -5,7 +5,7 @@
 
     # rubocop:disable RSpec/ExampleLength
     it 'does not offend Phrase Pull configuration' do
-      locale_tags = Dir[File.expand_path(Rails.root.join('config', 'locales', '*.yml'))]
+      locale_tags = Dir[Rails.root.join('config', 'locales', '*.yml').expand_path]
                     .map { |path| path.split('/').last }
                     # ['campaign.en.yml', 'article.en.yml', 'campaign.th.yml', 'en.yml']
                     .map { |path| path.split('.').first }
@@ -16,7 +16,7 @@
       # replace en with root as `en` is not a tag
       locale_tags[locale_tags.index('en')] = 'root'
 
-      phrase_pull_tags = YAML.load_file(Rails.root.join('.phrase.yml'))
+      phrase_pull_tags = YAML.load_file(Rails.root.join('.phrase.yml'), aliases: true)
                              .dig('phrase', 'pull', 'targets')
                              .map { |target| target.dig('params', 'tags') }
                              .sort

@@ -0,0 +1,35 @@
+From time to time, we need to add new SVG icons to the app. This document describes the steps to do that.
+
+## Gems
+The following 2 gems are used to handle SVG:
+- [svgeez](https://github.com/jgarber623/svgeez): for generating an SVG sprite from a folder of SVG icons. Requires Node.js and SVGO 1.3.2.
+- [inline_svg](https://github.com/jamesmartin/inline_svg): to use inline SVG for styling SVG with CSS
+
+## Node dependencies
+- [svgo](https://www.npmjs.com/package/svgo): Optimizes SVG sprite file size
+  ```sh
+  npm -g install [email protected]
+  ```
+
+## Add a new icon:
+- Export the SVG icon from Figma
+- Add the icon to `app/assets/images/icons` directory.
+- Run the following command to generate the new `app/assets/images/icon-sprite.svg` file which contains all of the icons in the `icons` directory
+  ```sh
+  bin/svg-sprite
+  ```
+
+## Use the new icon
+- Add the `icon-sprite.svg` file to the layout of the page
+  ```erb
+  <body>
+    <%= inline_svg_tag 'icon-sprite.svg' %>
+  </body>
+  ```
+- Use the `svg_tag` provided by the `SvgHelper` (app/helpers/svg_helper.rb) and provided `icon_id` matched with icon file name with prefix `icon-`:
+  ```erb
+  <%= svg_tag icon_id: 'icon-[icon-file-name]', html: {} %>
+
+  <!-- example: -->
+  <%= svg_tag icon_id: 'icon-contacts', html: { class: 'icon' } %>
+  ```
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+if Dir.exist?('.github/wiki')
+  use_source_path __dir__
+
+  copy_file 'Managing-SVG-Icons.md', '.github/wiki/Managing-SVG-Icons.md'
+
+  # SVG Sprite
+  insert_into_file '.github/wiki/_Sidebar.md', after: /## Operations.*\n/ do
+    <<~RUBY
+      - [[Managing SVG icons]]
+    RUBY
+  end
+end
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# SVG Sprite
+insert_into_file 'Gemfile', after: /gem 'danger'.*\n/ do
+  <<~RUBY
+    gem 'svgeez' # Gem for generating an SVG sprite from a folder of SVG icons.
+  RUBY
+end
+
+# SVG Sprite
+insert_into_file 'Gemfile', after: /gem 'bcrypt'.*\n/ do
+  <<~RUBY
+    gem 'inline_svg' # Use Inline SVG for styling SVG with CSS
+  RUBY
+end
@@ -0,0 +1,12 @@
+# Generates an SVG sprite from a folder of SVG icons.
+#
+# Uses `svgeez` gem.
+#   https://github.com/jgarber623/svgeez
+#
+# Usage
+#  -s --source:	Path to the folder of source SVGs (defaults to ./_svgeez).
+#  -d --destination:	Path to the destination file or folder (defaults to ./svgeez.svg)
+#  --with-svgo:	Optimize SVG sprite file with SVGO
+
+# Generate the sprite file which includes the `icon-` prefix
+bin/bundle exec svgeez build --prefix icon --source app/assets/images/icons/ --destination app/assets/images/icon-sprite.svg --with-svgo
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+use_source_path __dir__
+
+copy_file 'svg-sprite', 'bin/svg-sprite', mode: :preserve