diff --git a/CHANGELOG.md b/CHANGELOG.md index 863131c3..a3873a0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,11 @@ # Changelog ## Unreleased +- Upgrade to govuk-frontend v5.6.0 and introduce new Javascript entry point + +You need to + - create a `govuk_frontend.js` file your project’s `source/assets/javascripts` directory + - add `//= require govuk_frontend_all` into it - BREAKING: drop support for end-of-life Ruby versions 2.7 and 3.0. The minimum Ruby version is now 3.1. - Update gem dependencies. @@ -9,6 +14,7 @@ - Use hidden attribute to show/hide expiry notices instead of just CSS - Only use dialog role for table of contents when it behaves like one (accessibility fix) - Prevent interactive elements being obscured by sticky table of contents header +- Only wrap images with alt text in hyperlinks ## 3.5.0 diff --git a/example/.ruby-version b/example/.ruby-version index 37c2961c..15a27998 100644 --- a/example/.ruby-version +++ b/example/.ruby-version @@ -1 +1 @@ -2.7.2 +3.3.0 diff --git a/example/source/javascripts/govuk_frontend.js b/example/source/javascripts/govuk_frontend.js new file mode 100644 index 00000000..c3588dfe --- /dev/null +++ b/example/source/javascripts/govuk_frontend.js @@ -0,0 +1 @@ +//= require govuk_frontend_all diff --git a/govuk_tech_docs.gemspec b/govuk_tech_docs.gemspec index e4cf5e18..5bf199cf 100644 --- a/govuk_tech_docs.gemspec +++ b/govuk_tech_docs.gemspec @@ -7,7 +7,7 @@ require "govuk_tech_docs/version" `npm install` abort "npm install failed" unless $CHILD_STATUS.success? -unless File.exist?("node_modules/govuk-frontend/govuk/all.scss") +unless File.exist?("node_modules/govuk-frontend/dist/govuk/all.scss") abort "govuk-frontend npm package not installed" end @@ -25,7 +25,7 @@ Gem::Specification.new do |spec| files_in_git = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) } # Include assets from GOV.UK Frontend library in the distributed gem - govuk_frontend_assets = Dir["node_modules/govuk-frontend/**/*.{scss,js,woff,woff2,png,svg,ico}"] + govuk_frontend_assets = Dir["node_modules/govuk-frontend/**/*.{scss,js,mjs,woff,woff2,png,svg,ico}"] spec.files = files_in_git + govuk_frontend_assets @@ -52,6 +52,8 @@ Gem::Specification.new do |spec| spec.add_dependency "nokogiri" spec.add_dependency "openapi3_parser", "~> 0.9.0" spec.add_dependency "redcarpet", "~> 3.6" + spec.add_dependency "terser", "~> 1.2.3" + spec.add_dependency "sassc-embedded", "~> 1.78.0" spec.add_development_dependency "byebug" spec.add_development_dependency "capybara", "~> 3.32" diff --git a/lib/assets/javascripts/_modules/table-of-contents.js b/lib/assets/javascripts/_modules/table-of-contents.js index 850d7285..b24257e7 100644 --- a/lib/assets/javascripts/_modules/table-of-contents.js +++ b/lib/assets/javascripts/_modules/table-of-contents.js @@ -10,7 +10,7 @@ this.isMonitoring = false } StickyOverlapMonitors.prototype.run = function () { - var stickyIsVisible = this.$sticky.is(':visible') + var stickyIsVisible = this.$sticky.length > 0 && this.$sticky.is(':visible') if (stickyIsVisible && !this.isMonitoring) { document.addEventListener('focus', this.onFocus, true) this.isMonitoring = true @@ -26,11 +26,13 @@ if (!applicable) { return } - var stickyEdge = this.$sticky.get(0).getBoundingClientRect().bottom + this.offset - var diff = focused.getBoundingClientRect().top - stickyEdge + if (this.$sticky && this.$sticky.is(':visible') && this.$sticky.get(0)) { + var stickyEdge = this.$sticky.get(0).getBoundingClientRect().bottom + this.offset + var diff = focused.getBoundingClientRect().top - stickyEdge - if (diff < 0) { - $(window).scrollTop($(window).scrollTop() + diff) + if (diff < 0) { + $(window).scrollTop($(window).scrollTop() + diff) + } } } diff --git a/lib/assets/javascripts/govuk_frontend_all.js b/lib/assets/javascripts/govuk_frontend_all.js new file mode 100644 index 00000000..3e059c1b --- /dev/null +++ b/lib/assets/javascripts/govuk_frontend_all.js @@ -0,0 +1,3 @@ +//= require govuk/all.bundle.js +const { initAll } = window.GOVUKFrontend +initAll() diff --git a/lib/assets/javascripts/govuk_tech_docs.js b/lib/assets/javascripts/govuk_tech_docs.js index 6c657e52..cb874c3c 100644 --- a/lib/assets/javascripts/govuk_tech_docs.js +++ b/lib/assets/javascripts/govuk_tech_docs.js @@ -4,9 +4,7 @@ //= require _vendor/lodash //= require _analytics //= require _start-modules -//= require govuk/all.js $(function () { $('.fixedsticky').fixedsticky() - GOVUKFrontend.initAll() }) diff --git a/lib/assets/stylesheets/_govuk_tech_docs.scss b/lib/assets/stylesheets/_govuk_tech_docs.scss index 4006d118..e081631b 100644 --- a/lib/assets/stylesheets/_govuk_tech_docs.scss +++ b/lib/assets/stylesheets/_govuk_tech_docs.scss @@ -11,8 +11,8 @@ $govuk-assets-path: "/assets/govuk/assets/" !default; $govuk-new-link-styles: true; @import "govuk/base"; -@import "govuk/core/all"; -@import "govuk/objects/all"; +@import "govuk/core/index"; +@import "govuk/objects/index"; @import "govuk/components/footer/index"; @import "govuk/components/header/index"; @@ -22,14 +22,8 @@ $govuk-new-link-styles: true; @import "govuk/components/skip-link/index"; @import "govuk/components/warning-text/index"; -@import "govuk/utilities/all"; -@import "govuk/overrides/all"; +@import "govuk/utilities/index"; +@import "govuk/overrides/index"; @import "core"; @import "vendor/fixedsticky"; - -// manual Tudor Crown spacing adjustment from govuk-frontend 4.8 -.govuk-header__logotype-crown[width="32"] { - top: -3px; - margin-right: 2px; -} diff --git a/lib/assets/stylesheets/modules/_search.scss b/lib/assets/stylesheets/modules/_search.scss index 9bde54cd..401de5f9 100644 --- a/lib/assets/stylesheets/modules/_search.scss +++ b/lib/assets/stylesheets/modules/_search.scss @@ -45,10 +45,6 @@ $input-size: 40px; outline: $govuk-focus-width solid $govuk-focus-colour; outline-offset: 0; box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black"); - - @include govuk-if-ie8 { - border-width: $govuk-border-width-form-element * 2; - } } } diff --git a/lib/govuk_tech_docs.rb b/lib/govuk_tech_docs.rb index 696ddb96..e76e6432 100644 --- a/lib/govuk_tech_docs.rb +++ b/lib/govuk_tech_docs.rb @@ -10,6 +10,8 @@ require "nokogiri" require "chronic" require "active_support/all" +require "terser" +require "sassc-embedded" require "govuk_tech_docs/redirects" require "govuk_tech_docs/table_of_contents/helpers" @@ -23,6 +25,18 @@ require "govuk_tech_docs/warning_text_extension" require "govuk_tech_docs/api_reference/api_reference_extension" +module SassWarningSupressor + def warn(message) + if message.to_s.match?(/Sass|dart-sass/i) + # suppress dart sass warnings + else + super + end + end +end + +Warning.extend(SassWarningSupressor) + module GovukTechDocs # Configure the tech docs template # @@ -32,7 +46,7 @@ module GovukTechDocs def self.configure(context, options = {}) context.activate :sprockets - context.sprockets.append_path File.join(__dir__, "../node_modules/govuk-frontend/") + context.sprockets.append_path File.join(__dir__, "../node_modules/govuk-frontend/dist") context.sprockets.append_path File.join(__dir__, "./source") context.activate :syntax @@ -50,6 +64,9 @@ def self.configure(context, options = {}) tables: true, no_intra_emphasis: true + # this doesnt seem to work + context.set :sass, { output_style: "nested", quiet_deps: true } + # Reload the browser automatically whenever files change context.configure :development do activate :livereload, options[:livereload].to_h @@ -57,7 +74,7 @@ def self.configure(context, options = {}) context.configure :build do activate :autoprefixer - activate :minify_javascript, ignore: ["/raw_assets/*"] + activate :minify_javascript, compressor: Terser.new, ignore: ["/raw_assets/*"] end config_file = ENV.fetch("CONFIG_FILE", "config/tech-docs.yml") diff --git a/lib/govuk_tech_docs/meta_tags.rb b/lib/govuk_tech_docs/meta_tags.rb index 76850e1b..56ade52f 100644 --- a/lib/govuk_tech_docs/meta_tags.rb +++ b/lib/govuk_tech_docs/meta_tags.rb @@ -48,7 +48,7 @@ def canonical_url attr_reader :config, :current_page def page_image - "#{host}/images/govuk-large.png" + "#{host}/assets/govuk/assets/images/govuk-opengraph-image.png" end def site_name diff --git a/lib/govuk_tech_docs/table_of_contents/helpers.rb b/lib/govuk_tech_docs/table_of_contents/helpers.rb index 8e0d34c8..60090703 100644 --- a/lib/govuk_tech_docs/table_of_contents/helpers.rb +++ b/lib/govuk_tech_docs/table_of_contents/helpers.rb @@ -18,12 +18,27 @@ def single_page_table_of_contents(html, url: "", max_level: nil) output end + # Items with a weight appear first, in weight order + # if items have equal weight, they stay in the order they appeared (stable sort) + # Items without a weight appear after, sorted stably in the order that they are + # present in the resource list + def sort_resources_stably(resources) + resources + .each.with_index + .sort_by { |r, index| [r.data.weight ? 0 : 1, r.data.weight || 0, index] } + .map(&:first) + .to_a + end + + def select_top_level_html_files(resources) + resources + .select { |r| r.path.end_with?(".html") && (r.parent.nil? || r.parent.url == "/") } + end + def multi_page_table_of_contents(resources, current_page, config, current_page_html = nil) - # Only parse top level html files - # Sorted by weight frontmatter - resources = resources - .select { |r| r.path.end_with?(".html") && (r.parent.nil? || r.parent.url == "/") } - .sort_by { |r| [r.data.weight ? 0 : 1, r.data.weight || 0] } + resources = sort_resources_stably( + select_top_level_html_files(resources), + ) render_page_tree(resources, current_page, config, current_page_html) end @@ -40,9 +55,7 @@ def list_items_from_headings(html, url: "", max_level: nil) end def render_page_tree(resources, current_page, config, current_page_html) - # Sort by weight frontmatter - resources = resources - .sort_by { |r| [r.data.weight ? 0 : 1, r.data.weight || 0] } + resources = sort_resources_stably(resources) output = "