docs: build home page #1160

ehtabrizi · 2025-02-12T14:06:36Z

Issue or RFC endorsed by the maintainers

#1082

Description of the change

Update homepage to follow new design approah

Alternative designs

N/A

Possible drawbacks

N/A

Verification process

Check that design follows the specification and works on all devices

Release notes

N/A

github-actions · 2025-02-12T14:07:48Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-12T14:07:50Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

jbarnardmoj

looks good; just needs a run through prettier (I think there's some spacing issues in the scss files)

github-actions · 2025-02-12T16:54:17Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-12T17:39:08Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-12T17:46:27Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-13T12:04:41Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-13T13:17:17Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-13T13:20:45Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-13T15:00:34Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

docs/_includes/layouts/macros/card.njk

github-actions · 2025-02-14T11:30:40Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

chrispymm · 2025-02-28T14:03:23Z

docs/_includes/macros/card/template.njk

+  {% endif -%}
+
+  <img {{- govukAttributes({
+    loading: "lazy",


Do we need a height and width on the image to prevent layout shift? Without it the browser can't determine the aspect ratio to know how much space to reserve before the image is loaded.

github-actions · 2025-02-28T14:21:47Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-28T14:23:22Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-28T14:32:26Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-28T14:45:04Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-28T14:49:43Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

colinrotherham · 2025-02-28T14:59:41Z

docs/assets/stylesheets/components/_app-card.scss

+    }
+  }
+
+  &__full {


Sorry, quick one, can this be --full as it adds a modifier (rather than a new element)

colinrotherham · 2025-02-28T15:03:24Z

docs/assets/stylesheets/components/_masthead.scss

+  @include govuk-media-query($from: desktop) {
+    > div {
+      padding-right: 130px;
+    }
+  }


Should we split out > div to .app-layout__content so it's not as fragile?

Lets the content move (or change element) without breaking

Suggested change

@include govuk-media-query($from: desktop) {

> div {

padding-right: 130px;

}

}

}

.app-layout__content {

@include govuk-media-query($from: desktop) {

padding-right: 130px;

}

}

Do you know where the 130px comes from btw?

Wondered if it was supposed to adhere to a grid size, e.g. "three quarters" instead?

<div class="govuk-grid-row"> <div class="govuk-grid-column-full govuk-grid-column-three-quarters-from-desktop">

colinrotherham · 2025-02-28T15:04:05Z

docs/assets/stylesheets/components/_prose.scss

+  .govuk-link--inverse {
+    @extend .govuk-link--inverse;
+  }


This is extending itself, can you check? Sorry!

github-actions · 2025-02-28T15:04:27Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

colinrotherham · 2025-02-28T15:07:00Z

docs/_includes/layouts/home.njk

+        <a class="govuk-link govuk-link--inverse" href="https://design-system.service.gov.uk/">
+          GOV.UK Design System</a>.
+      </p>
+      <p class="govuk-!-margin-bottom-0">


Probably fine until we remove app-prose but one for later

Suggested change

<p class="govuk-!-margin-bottom-0">

<p class="govuk-body govuk-!-margin-bottom-0">

colinrotherham · 2025-02-28T15:08:41Z

docs/_includes/layouts/home.njk

+              You can get involved with community components by adding a new one,
+              or providing information and feedback about an existing one.
+            </p>
+            <a class="gov-link" href="#">Discover more about collaborating with the community</a>


Have we got the link for this one?

Thanks Colin, not rendered via global commuinty var.

colinrotherham · 2025-02-28T15:12:00Z

docs/_includes/layouts/home.njk

+      }) }}
+
+      <div class="govuk-grid-row">
+        {% call card({ "layout": "full", "title": "How to choose the right prototyping tool" }) %}


Not a blocker in the slightest, just Nunjucks formatting

(Others below)

Suggested change

{% call card({ "layout": "full", "title": "How to choose the right prototyping tool" }) %}

{% call card({

layout: "full",

title: "How to choose the right prototyping tool"

}) %}

github-actions · 2025-02-28T15:19:55Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-28T15:22:39Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1082-build-home-page.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

ehtabrizi added 3 commits February 10, 2025 10:35

inital workings

abefb71

further working updates

1e5edf3

working updates to macro

431f765

ehtabrizi added the preview:request Deploy PR to a preview url label Feb 12, 2025

ehtabrizi requested a review from a team as a code owner February 12, 2025 14:06

ehtabrizi linked an issue Feb 12, 2025 that may be closed by this pull request

Build home page #1082

Closed

github-actions bot removed the preview:request Deploy PR to a preview url label Feb 12, 2025

github-actions bot added the preview:active label Feb 12, 2025

jbarnardmoj requested changes Feb 12, 2025

View reviewed changes

format scss files

9d765e7

updates for inverse link variant

78a67e2

updates

8a72d13

updated responsive view

e92f92d

aria hidden if no alt is added

e8ada62

added hidden on other variant

24d3c29

ehtabrizi changed the title ~~1082 build home page~~ feat: #1082 build home page Feb 13, 2025

ehtabrizi changed the title ~~feat: #1082 build home page~~ feat: build home page Feb 13, 2025

added images and optimised

50c60f6

colinrotherham reviewed Feb 13, 2025

View reviewed changes

docs/_includes/layouts/macros/card.njk Outdated Show resolved Hide resolved

updates

5cd32b7

Whersi requested a review from chrispymm February 28, 2025 14:01

chrispymm reviewed Feb 28, 2025

View reviewed changes

updates

ad3e917

updates to css

5949ce1

updated to remove min-height

31d6afb

updates following comments

916f8e0

updates

b88a2cf

chrispymm approved these changes Feb 28, 2025

View reviewed changes

colinrotherham reviewed Feb 28, 2025

View reviewed changes

added modifier

2e11ea5

colinrotherham reviewed Feb 28, 2025

View reviewed changes

jbarnardmoj approved these changes Feb 28, 2025

View reviewed changes

colinrotherham reviewed Feb 28, 2025

View reviewed changes

updates

4cab5b7

css updates

7e55ca7

colinrotherham approved these changes Feb 28, 2025

View reviewed changes

ehtabrizi merged commit b9b1a37 into main Feb 28, 2025
10 checks passed

ehtabrizi deleted the 1082-build-home-page branch February 28, 2025 15:27

github-actions bot removed the preview:active label Feb 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: build home page #1160

docs: build home page #1160

ehtabrizi commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

jbarnardmoj left a comment

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 14, 2025

chrispymm Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

colinrotherham Feb 28, 2025

colinrotherham Feb 28, 2025

colinrotherham Feb 28, 2025

colinrotherham Feb 28, 2025

github-actions bot commented Feb 28, 2025

colinrotherham Feb 28, 2025

colinrotherham Feb 28, 2025

ehtabrizi Feb 28, 2025

colinrotherham Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

	<p class="govuk-!-margin-bottom-0">
	<p class="govuk-body govuk-!-margin-bottom-0">

docs: build home page #1160

docs: build home page #1160

Conversation

ehtabrizi commented Feb 12, 2025

Issue or RFC endorsed by the maintainers

Description of the change

Alternative designs

Possible drawbacks

Verification process

Release notes

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

jbarnardmoj left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 14, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 28, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 28, 2025

github-actions bot commented Feb 28, 2025