From cef2c6c480d881d933ce4b98246c37bf07c77442 Mon Sep 17 00:00:00 2001 From: Simon Hughesdon Date: Thu, 12 Sep 2019 12:37:23 +0100 Subject: [PATCH 1/6] Redirect chapters to anchors in page We're testing this guide as a single page. We want existing links to behave nicely, so we'll redirect subchapters to the default page in the guide. We're also using the slug to try to find the section of the page they're looking for. This works because the IDs of in page headings are the same as the slug of the chapter that they refer to. --- config/routes.rb | 3 +++ 1 file changed, 3 insertions(+) diff --git a/config/routes.rb b/config/routes.rb index 0eca6af76..fcfcacce2 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -11,6 +11,9 @@ get "healthcheck", to: proc { [200, {}, [""]] } + # Testing guides as a single page so we redirect parts to the default page + get "/voting-in-the-uk/:chapter", to: redirect("/voting-in-the-uk#%{chapter}") + get "*path/:variant" => "content_items#show", constraints: { variant: /print/, From 981efdb5d408b6302b3e757c0945b49ba95156b7 Mon Sep 17 00:00:00 2001 From: Simon Hughesdon Date: Thu, 12 Sep 2019 09:48:16 +0100 Subject: [PATCH 2/6] Render a guide as a single page We think it might really help our SEO to have guide content on one page. The how to vote page is particularly interesting because we have some data about searching intents that might bring people to this page. We also think that amending this format to a single page might benefit voice answers. There are some existing issues with guides having multiple h1 tags on a page. This PR doesn't attempt to fix it (and in a way makes it worse) because we have more h1s on the page than we used to. I'm led to believe that this is not relevant to WCAG by this [trello card on the GOV.UK accessibility backlog](https://trello.com/c/LzxvPjUz/117-fix-multiple-h1-heading-structure). Other than that, this has been mostly stolen from the existing guide layout, only including all of the parts. --- app/controllers/content_items_controller.rb | 2 + app/presenters/content_item/parts.rb | 2 +- app/presenters/content_item_presenter.rb | 5 ++ app/views/content_items/guide_single.html.erb | 47 +++++++++++++++++++ 4 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 app/views/content_items/guide_single.html.erb diff --git a/app/controllers/content_items_controller.rb b/app/controllers/content_items_controller.rb index 2488ece75..20209cdac 100644 --- a/app/controllers/content_items_controller.rb +++ b/app/controllers/content_items_controller.rb @@ -83,6 +83,8 @@ def format_banner_links(links, type) end def content_item_template + return "guide_single" if @content_item.render_guide_as_single_page? + @content_item.schema_name end diff --git a/app/presenters/content_item/parts.rb b/app/presenters/content_item/parts.rb index da0f12f7c..cbe87cecf 100644 --- a/app/presenters/content_item/parts.rb +++ b/app/presenters/content_item/parts.rb @@ -61,7 +61,7 @@ def previous_and_next_navigation def part_link_elements parts.map do |part| - if part["slug"] != current_part["slug"] + if part["slug"] != current_part["slug"] || render_guide_as_single_page? { href: part["full_path"], text: part["title"] } else { href: part["full_path"], text: part["title"], active: true } diff --git a/app/presenters/content_item_presenter.rb b/app/presenters/content_item_presenter.rb index fdd20948e..6b32ba825 100644 --- a/app/presenters/content_item_presenter.rb +++ b/app/presenters/content_item_presenter.rb @@ -78,6 +78,11 @@ def cache_control_public? !content_item.cache_control.private? end + def render_guide_as_single_page? + # /voting-in-the-uk + content_id == "9315bc67-33e7-42e9-8dea-e022f56dabfa" + end + private def display_date(timestamp, format = "%-d %B %Y") diff --git a/app/views/content_items/guide_single.html.erb b/app/views/content_items/guide_single.html.erb new file mode 100644 index 000000000..7e01caf3d --- /dev/null +++ b/app/views/content_items/guide_single.html.erb @@ -0,0 +1,47 @@ +<% content_for :extra_head_content do %> + <%= machine_readable_metadata( + schema: :article, + canonical_url: @content_item.canonical_url, + body: @content_item.current_part_body + ) %> +<% end %> + + + +<% content_for :simple_header, true %> + +
+
+ <%= render 'govuk_publishing_components/components/title', { title: @content_item.content_title } %> + + <% if @content_item.show_guide_navigation? %> + + <% end %> +
+ +
+ <% if @content_item.has_parts? %> + + <% @content_item.parts.each do |part| %> +

class="part-title"> + <%= part["title"] %> +

+ + <%= render 'govuk_publishing_components/components/govspeak', + content: part["body"].html_safe, + direction: page_text_direction, + disable_youtube_expansions: true %> + + <% end %> + <%= render 'components/print-link', href: @content_item.print_link, link_text: t("multi_page.print_entire_guide") %> + <% end %> +
+ + <%= render 'shared/sidebar_navigation' %> +
+ +<%= render 'shared/footer_navigation' %> From ec2c686cec5f451b0e9a6c59edaeeac0b8cb4e9d Mon Sep 17 00:00:00 2001 From: Simon Hughesdon Date: Fri, 25 Oct 2019 08:53:30 +0100 Subject: [PATCH 3/6] Use heading component instead of h1 tag This allows us to use standard padding, borders, styles etc. This doesn't fix the issue of multiple h1s on the page, but this problem can only be addressed by first shuffling down the heading levels of the published content. At present, content within the body starts at h2, which doesn't leave us any room for separate heading levels for the page title and individual chapter titles. As mentioned in the previous commit, this is not a WCAG issue though, so I don't intend to try to fix that here. --- app/views/content_items/guide_single.html.erb | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/views/content_items/guide_single.html.erb b/app/views/content_items/guide_single.html.erb index 7e01caf3d..5ef89cd8a 100644 --- a/app/views/content_items/guide_single.html.erb +++ b/app/views/content_items/guide_single.html.erb @@ -26,10 +26,14 @@
<% if @content_item.has_parts? %> - <% @content_item.parts.each do |part| %> -

class="part-title"> - <%= part["title"] %> -

+ <% @content_item.parts.each_with_index do |part, index| %> + <%= render "govuk_publishing_components/components/heading", { + text: part["title"], + id: part["slug"], + heading_level: 1, + border_top: index.zero? ? 0 : 2, + padding: true + } %> <%= render 'govuk_publishing_components/components/govspeak', content: part["body"].html_safe, From 5221bdd18cfad60d41baf1ef415a32103e7a6b3c Mon Sep 17 00:00:00 2001 From: Simon Hughesdon Date: Fri, 25 Oct 2019 09:38:45 +0100 Subject: [PATCH 4/6] Render chapters as sections in single page guide This spaces the sections out a bit better, as well as indicating that the chapters are somewhat [standalone groupings of content](https://gds-way.cloudapps.digital/manuals/programming-languages/html.html#sectioned-content). --- app/views/content_items/guide_single.html.erb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/content_items/guide_single.html.erb b/app/views/content_items/guide_single.html.erb index 5ef89cd8a..21aaab6b9 100644 --- a/app/views/content_items/guide_single.html.erb +++ b/app/views/content_items/guide_single.html.erb @@ -27,6 +27,7 @@ <% if @content_item.has_parts? %> <% @content_item.parts.each_with_index do |part, index| %> +
"> <%= render "govuk_publishing_components/components/heading", { text: part["title"], id: part["slug"], @@ -39,7 +40,7 @@ content: part["body"].html_safe, direction: page_text_direction, disable_youtube_expansions: true %> - +
<% end %> <%= render 'components/print-link', href: @content_item.print_link, link_text: t("multi_page.print_entire_guide") %> <% end %> From a4f8953519420cb145c47460c5b2408b8e1b1fce Mon Sep 17 00:00:00 2001 From: Simon Hughesdon Date: Fri, 25 Oct 2019 09:44:03 +0100 Subject: [PATCH 5/6] Use anchors in single page guide nav We want these to be in page navigation, not to rely on the route redirection to work. --- app/presenters/content_item/parts.rb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/presenters/content_item/parts.rb b/app/presenters/content_item/parts.rb index cbe87cecf..e44bc4c6b 100644 --- a/app/presenters/content_item/parts.rb +++ b/app/presenters/content_item/parts.rb @@ -61,7 +61,9 @@ def previous_and_next_navigation def part_link_elements parts.map do |part| - if part["slug"] != current_part["slug"] || render_guide_as_single_page? + if render_guide_as_single_page? + { href: "##{part['slug']}", text: part["title"] } + elsif part["slug"] != current_part["slug"] { href: part["full_path"], text: part["title"] } else { href: part["full_path"], text: part["title"], active: true } From 1c748cdad9df259314a761bb81715f3ee7e09dc5 Mon Sep 17 00:00:00 2001 From: Simon Hughesdon Date: Fri, 25 Oct 2019 09:49:18 +0100 Subject: [PATCH 6/6] Remove print link for single page guide It's effectively the same page, so let's not waste people's time. --- app/views/content_items/guide_single.html.erb | 1 - 1 file changed, 1 deletion(-) diff --git a/app/views/content_items/guide_single.html.erb b/app/views/content_items/guide_single.html.erb index 21aaab6b9..e0030c800 100644 --- a/app/views/content_items/guide_single.html.erb +++ b/app/views/content_items/guide_single.html.erb @@ -42,7 +42,6 @@ disable_youtube_expansions: true %> <% end %> - <%= render 'components/print-link', href: @content_item.print_link, link_text: t("multi_page.print_entire_guide") %> <% end %>