Update layout of Get-Started page - #1211
Merged
gibahjoe merged 4 commits intoJun 22, 2026
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughRemoves the ChangesStep-by-step nav removal and sub-navigation replacement
Sequence DiagramsequenceDiagram
participant User
participant Subnav as Sub-navigation Component
participant Section as Content Section
User->>Subnav: Click section anchor link
Subnav->>Section: Navigate to section
Section->>User: Display content (prepare/check/publish/provide/view/update)
User->>Subnav: Click another section link
Subnav->>Section: Scroll to new section
Section->>User: Display updated content
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Coverage Report
File CoverageNo changed files found. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/views/organisations/get-started.html (1)
143-146: ⚡ Quick winConsider using HTTPS for example URLs.
Whilst these are example URLs for documentation purposes, using HTTPS rather than HTTP would demonstrate better security practices, particularly in government guidance materials.
🔒 Suggested change to HTTPS examples
-<p class="govuk-body">Give each record its own webpage, so that the documentation-url is the full page address. For example, <a class="govuk-link" href="http://www.yourwebsite.gov.uk/planning/article-4-directions/smith-road">www.yourwebsite.gov.uk/planning/article-4-directions/smith-road</a>.</p> +<p class="govuk-body">Give each record its own webpage, so that the documentation-url is the full page address. For example, <a class="govuk-link" href="https://www.yourwebsite.gov.uk/planning/article-4-directions/smith-road">www.yourwebsite.gov.uk/planning/article-4-directions/smith-road</a>.</p> <p class="govuk-body"><strong>2. Multiple records</strong></p> -<p class="govuk-body">List all records on a single page and add an anchor link for each one. For example, <a class="govuk-link" href="http://yourwebsite.gov.uk/planning/article-4-directions#smith-road">yourwebsite.gov.uk/planning/article-4-directions#smith-road</a>.</p> +<p class="govuk-body">List all records on a single page and add an anchor link for each one. For example, <a class="govuk-link" href="https://yourwebsite.gov.uk/planning/article-4-directions#smith-road">yourwebsite.gov.uk/planning/article-4-directions#smith-road</a>.</p>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/views/organisations/get-started.html` around lines 143 - 146, The example URLs in the guidance content currently use HTTP protocol instead of HTTPS, which does not demonstrate security best practices for government guidance materials. Update both example URLs to use HTTPS instead of HTTP: change the first example link from "http://www.yourwebsite.gov.uk/planning/article-4-directions/smith-road" to "https://www.yourwebsite.gov.uk/planning/article-4-directions/smith-road" and change the second example link from "http://yourwebsite.gov.uk/planning/article-4-directions#smith-road" to "https://yourwebsite.gov.uk/planning/article-4-directions#smith-road".Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/views/organisations/get-started.html`:
- Around line 143-146: The example URLs in the guidance content currently use
HTTP protocol instead of HTTPS, which does not demonstrate security best
practices for government guidance materials. Update both example URLs to use
HTTPS instead of HTTP: change the first example link from
"http://www.yourwebsite.gov.uk/planning/article-4-directions/smith-road" to
"https://www.yourwebsite.gov.uk/planning/article-4-directions/smith-road" and
change the second example link from
"http://yourwebsite.gov.uk/planning/article-4-directions#smith-road" to
"https://yourwebsite.gov.uk/planning/article-4-directions#smith-road".
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: fffdf959-23a5-4f0d-928e-afb1e11f94fb
📒 Files selected for processing (6)
src/assets/js/step-by-step-nav.jssrc/assets/scss/components/_sub-navigation.scsssrc/assets/scss/index.scsssrc/assets/scss/step-by-step-nav.scsssrc/views/organisations/get-started.htmlwebpack.config.mjs
💤 Files with no reviewable changes (4)
- webpack.config.mjs
- src/assets/scss/step-by-step-nav.scss
- src/assets/js/step-by-step-nav.js
- src/assets/scss/index.scss
Currently we have accordions highlighting each step on the get-started page. New guidance is to use a navigation menu, which we will display in a left column like we do on the guidance page. This will use anchor links to navigate content which is now all visible to the user on a single page, without hidden elements like accordions. The nav is made sticky for easy navigation throughout content.
jpherr
force-pushed
the
630-update-get-startedalternative-sources-content
branch
from
June 18, 2026 09:17
735eea6 to
ebe966b
Compare
|
Aware there are some tests failing to be resolved before pushing to prod. Content itself and functionality of the navigation are as intended. Only thing to update is the H1. H1 is currently wrapped in a 2/3 row, so it's 2/3 within 2/3. What this should look like: 
|
We are in the process of updating the get-started page with a 2 column layout. The heading is imported however, and has its own layout of 2 thirds with. This change moves the layout responsibility to the parent, and enables us to have a full width heading layout in our 2/3 column on the get-started page.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/views/includes/_dataset-page-header.html`:
- Line 11: The _dataset-page-header.html include file should not contain its own
govuk-grid-column-two-thirds wrapper since the callers are already wrapping the
include with their own two-thirds column, creating an unintended nested layout.
Remove the govuk-grid-column-two-thirds wrapper div from the include file by
deleting the opening div element at the beginning and the corresponding closing
div at the end, leaving only the content that should be rendered within the
caller's wrapper.
In `@src/views/organisations/get-started.html`:
- Around line 146-148: The example URLs in the href attributes within the
get-started.html file are using the insecure http:// protocol instead of
https://. Update both example links to use https:// instead of http:// to follow
security best practices and avoid promoting insecure URL patterns. This applies
to the link showing the single record webpage example and the link showing the
multiple records with anchor example.
- Around line 55-65: The includes/_dataset-page-header.html include is nested
too deeply within the govuk-grid-column-two-thirds column, causing layout issues
with the H1 heading. Move the _dataset-page-header.html include outside of the
nested govuk-grid-row and govuk-grid-column-full structure so it renders before
the main app-grid-row--flex container that splits the page into sub-navigation
(one-third) and content (two-thirds) columns. This will ensure the page heading
spans the full width as intended rather than being constrained to the two-thirds
column width.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: eb6a8fc2-b220-4f50-b34f-ef9c453b746a
📒 Files selected for processing (12)
src/assets/js/step-by-step-nav.jssrc/assets/scss/components/_sub-navigation.scsssrc/assets/scss/index.scsssrc/assets/scss/step-by-step-nav.scsssrc/views/includes/_dataset-page-header.htmlsrc/views/organisations/dataset-overview.htmlsrc/views/organisations/datasetTaskList.htmlsrc/views/organisations/dataview.htmlsrc/views/organisations/get-started.htmlsrc/views/organisations/http-error.htmlsrc/views/organisations/issueDetails.htmlwebpack.config.mjs
💤 Files with no reviewable changes (4)
- src/assets/scss/index.scss
- src/assets/scss/step-by-step-nav.scss
- webpack.config.mjs
- src/assets/js/step-by-step-nav.js
✅ Files skipped from review due to trivial changes (2)
- src/views/organisations/dataview.html
- src/views/organisations/datasetTaskList.html
🚧 Files skipped from review as they are similar to previous changes (1)
- src/assets/scss/components/_sub-navigation.scss
Contributor
Author
Good catch. This comes from an imported file. I have updated the file and all locations it is imported, so these locations will need to be considered when testing (You can see where it has been updated here). 
|
Contributor
|
Happy to approve these design and content changes. @jpherr - if you could get a quick code review then that would be fab. |
gibahjoe
requested changes
Jun 19, 2026
gibahjoe
left a comment
gibahjoe
left a comment
Contributor
There was a problem hiding this comment.
Oops. Looks like its not responsive.
Contributor
Author
I can take a look at this, it might fix itself once placed into a code block. It wasn't thoroughly tested by myself, as noted in the ticket, because I intended it to be picked up by another developer when I moved teams. |
jpherr
force-pushed
the
630-update-get-startedalternative-sources-content
branch
from
June 19, 2026 14:00
23be7e3 to
eaab0cd
Compare
jpherr
force-pushed
the
630-update-get-startedalternative-sources-content
branch
from
June 19, 2026 14:00
eaab0cd to
ba1a57c
Compare
jpherr
force-pushed
the
630-update-get-startedalternative-sources-content
branch
from
June 19, 2026 14:02
ba1a57c to
46ca37c
Compare
jpherr
force-pushed
the
630-update-get-startedalternative-sources-content
branch
from
June 19, 2026 14:43
46ca37c to
03f0fc2
Compare
Example links should be plain text and not active links. This has been discussed and confirmed with Product. We also use govuk break-word override class to force the wrapping of the example links on mobile devices, since they were extending beyond the viewport.
jpherr
force-pushed
the
630-update-get-startedalternative-sources-content
branch
from
June 22, 2026 07:19
03f0fc2 to
ecee85b
Compare
Contributor
Author
|
Updates to content and forced wrapping of example links are now ready and available for testing in development environment. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Currently we have accordions highlighting each step on the get-started page. New guidance is to use a navigation menu, which we will display in a left column like we do on the guidance page. This will use anchor links to navigate content which is now all visible to the user on a single page, without hidden elements like accordions. The nav is made sticky for easy navigation throughout content.
Redundant javascript for the step menu has been removed.
The layout responsibility for the dataset heading has been moved to the parent now that it differs from page to page.
What type of PR is this? (check all applicable)
Related Tickets & Documents
Update get started/alternative sources content digital-land#630
QA Instructions, Screenshots, Recordings
Before
After
Added/updated tests?
We encourage you to keep the code coverage percentage at 80% and above.
QA sign off
[optional] Are there any post-deployment tasks we need to perform?
[optional] Are there any dependencies on other PRs or Work?
Summary by CodeRabbit
Release Notes
Refactor
Style
Layout