feat(Hero): create multiple hero components for new DS #11132

TylerAPfledderer · 2023-09-12T03:12:07Z

Description

Adds a new set of Hero components per DS.

Homepage Hero and story
Hub Hero and story
Content Hero and story
MDX hero and story
Content Hero with Big Number stats not included (to be added in a future PR)
New hero illustration implemented for the Home Page and Learning Hub only

Related Issue

Closes #10753

Part of Implementation of DS v1 #9548

gatsby-cloud · 2023-09-12T04:08:29Z

✅ ethereum-org-website-dev deploy preview ready

Deploy preview
Build logs · 33m build time

TylerAPfledderer · 2023-09-12T14:50:11Z

@nloureiro any update with Hub hero illustrations?

nloureiro · 2023-09-12T14:53:48Z

@nloureiro any update with Hub hero illustrations?

for the new illustration? we might still be one week from getting the first one.

are these new illustrations blocking you from any developments?

TylerAPfledderer · 2023-09-12T18:51:32Z

@nloureiro not a blocker here. I was thinking of just keeping this in draft until they become available. Also keeping it in draft because there is also another primitive component from the DS still missing for this (Big Numbers component for content hero)

If you don't want to wait on the illustrations, then maybe when ready can mark the Hero components as "offline" so they are not used for prod until all assets are available?

nloureiro · 2023-09-13T09:28:28Z

Oh, the big numbers. I'll be sure to look into it.

regarding the rest, I wanted to have everything ready and tested before we have the illustrations.
Can this be removed from the draft and have a developer preview to test on different browsers and resolutions?

I sense we need some design adjustments, and I wanted to do it on the browser.

Thank you for your help :)

TylerAPfledderer · 2023-09-14T16:51:37Z

@nloureiro I went ahead and switched to "Ready for Review" :)

https://63b7ea99632763723c7f4d6b-dgtmjvennt.chromatic.com/?path=/story/organisms-layouts-hero--home-hero

nloureiro · 2023-09-15T11:19:15Z

@nloureiro I went ahead and switched to "Ready for Review" :)

https://63b7ea99632763723c7f4d6b-dgtmjvennt.chromatic.com/?path=/story/organisms-layouts-hero--home-hero

Looks great! I approve it on Chromatic, I wonder if that leads to an approval here on the PR itself.

One last thing that I wanted to test is on an actual page.
Can this be on the learning hub page on the developer preview?

Thank you

TylerAPfledderer · 2023-09-15T13:18:27Z

@nloureiro I went ahead and switched to "Ready for Review" :)

https://63b7ea99632763723c7f4d6b-dgtmjvennt.chromatic.com/?path=/story/organisms-layouts-hero--home-hero

Looks great! I approve it on Chromatic, I wonder if that leads to an approval here on the PR itself.

One last thing that I wanted to test is on an actual page.
Can this be on the learning hub page on the developer preview?

Thank you

@nloureiro the approval you made was through the "UI Review" check on here, which did update. "UI Tests" remains pending.

I can update the learning page using the Eth2 Illustration

nloureiro · 2023-09-15T13:23:57Z

@nloureiro I went ahead and switched to "Ready for Review" :)
https://63b7ea99632763723c7f4d6b-dgtmjvennt.chromatic.com/?path=/story/organisms-layouts-hero--home-hero

Looks great! I approve it on Chromatic, I wonder if that leads to an approval here on the PR itself.
One last thing that I wanted to test is on an actual page.
Can this be on the learning hub page on the developer preview?
Thank you

@nloureiro the approval you made was through the "UI Review" check on here, which did update. "UI Tests" remains pending.

I can update the learning page using the Eth2 Illustration

got, just approve it

Yes, great, we can use the Eth2 illustrations for testing purposes. Thank you!!!

TylerAPfledderer · 2023-09-18T04:12:04Z

@nloureiro updated the Learning Hub Page

pettinarip

Good job @TylerAPfledderer

Is this ready for review? as I see in the comments that you changed it bc you needed the preview deploy for testing purposes. You are also probably waiting for #11133 to be merged (will be soon).

pettinarip · 2023-09-19T16:53:42Z

docs/ds-implementation.md

+└── ComponentA/
+├── index.tsx
+├── ComponentA.stories.tsx
+└── // Any other files as applicable (utils, child components, useHook, etc.)


I guess this autoformat was triggered when dev was merged to update the branch. Lets revert this changes as this format is wrong.

@pettinarip Darnit. Every time I try to save the changes locally, it wants to fix the formatting. -_-

Yea, I think is because it is coming as a new/modified file when you update the branch with dev (that is caught by prettier). Shouldn't happen in the upcoming PRs you make.

TylerAPfledderer · 2023-09-19T17:06:02Z

Good job @TylerAPfledderer

Is this ready for review? as I see in the comments that you changed it bc you needed the preview deploy for testing purposes. You are also probably waiting for #11133 to be merged (will be soon).

There is GatsbyImage as well as getting the Big Numbers component online too.

I don't see the latter being a blocker if that can be added in a future PR, if currently these heroes are only to be tested in preview and Storybook and not yet deployed to prod.

pettinarip · 2023-09-20T07:06:17Z

Good job @TylerAPfledderer
Is this ready for review? as I see in the comments that you changed it bc you needed the preview deploy for testing purposes. You are also probably waiting for #11133 to be merged (will be soon).

There is GatsbyImage as well as getting the Big Numbers component online too.

I don't see the latter being a blocker if that can be added in a future PR, if currently these heroes are only to be tested in preview and Storybook and not yet deployed to prod.

Got it. FYI #11133 is merged now.

pettinarip

Beautiful!

Looking great @TylerAPfledderer.

I think we should also add a components/Hero/index.ts file to export all the nested hero components, as we are doing in other places, to be consistent and have better autocomplete dx when importing.

pettinarip · 2023-09-20T08:41:48Z

src/components/Hero/CallToAction.tsx

+import * as React from "react"
+import Button, { IProps as ButtonProps } from "../Button"
+import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
+import { ReactNode } from "react"


import order

pettinarip · 2023-09-20T08:45:52Z

src/components/Hero/ContentHero/index.tsx

+           * let the parent handle the spacing.
+           *
+           * This change would be done when the component is applied
+           * to prod.


I'd work this out in a separate PR, of course 😅

pettinarip · 2023-09-20T08:50:05Z

src/components/Hero/ContentHero/index.tsx

+           */}
+          <Breadcrumbs slug={breadcrumbSlug} mb="0" />
+          <Stack spacing="6">
+            <Heading size="2xl">{header}</Heading>


IMO this should be an h1 as there is no other heading in this hero.

pettinarip · 2023-09-20T09:02:46Z

src/components/Hero/MdxHero/index.tsx

+
+interface MdxHeroProps {
+  breadcrumbs: BreadcrumbsProps
+  headingTitle: string


To be consistent with the rest

Suggested change

headingTitle: string

title: string

pettinarip · 2023-09-20T09:04:34Z

src/components/Hero/ContentHero/index.tsx

+import { CommonHeroProps } from "../utils"
+
+export interface ContentHeroProps extends CommonHeroProps {
+  breadcrumbSlug: BreadcrumbsProps["slug"]


To be consistent with the MdxHero api, I'd call this breadcrumb and accept any breadcrumb prop.

// and then just <Breadcrumbs {...breadcrumbs} />

nloureiro · 2023-10-17T16:52:41Z

hey @TylerAPfledderer

we have the final image for the learning hub

we can prepare the final version for realise 🚀

TylerAPfledderer · 2023-10-17T22:31:22Z

hey @TylerAPfledderer

we have the final image for the learning hub

we can prepare the final version for realise 🚀

@nloureiro
To clarify, I wouldn't put the hub hero into prod because I have to account for the other hub pages with new images...

Or just keep the updated learning hub page only for prod with the new hero component and this new image?

nloureiro · 2023-10-18T10:16:50Z

hey @TylerAPfledderer
we have the final image for the learning hub
we can prepare the final version for realise 🚀

@nloureiro To clarify, I wouldn't put the hub hero into prod because I have to account for the other hub pages with new images...

Or just keep the updated learning hub page only for prod with the new hero component and this new image?

I'm not sure if I understand, but what I have in mind is to publish just this hero now.
Whenever we have new illustrations we will change the hero to "that" one page on a seperate PR

does it make sense?

TylerAPfledderer · 2023-10-18T13:23:06Z

@nloureiro got it! Will get to updating the image 🤘

pettinarip · 2023-10-18T13:35:29Z

Also, I checked the line-height for the heading. This is a bug(?). The tokens used for the breakpoints of the 2xl heading size are implemented backwards (the larger line-height of the two used is being rendered at the smaller breakpoint instead of the larger breakpoint)

I'm going to create a separate PR to address this, because it looks like they are backwards for other heading sizes in the component theme file

Edit: See #11363

Merged

nloureiro · 2023-10-18T14:02:56Z

@TylerAPfledderer did you fix the spacing bug on mobile?

I think was the only blocker a few weeks ago.

pettinarip

I took another look at this and everything looks good 👍🏼

Once we add that new image I think we are ready to go!

TylerAPfledderer · 2023-10-18T14:29:40Z

@TylerAPfledderer did you fix the spacing bug on mobile?

I think was the only blocker a few weeks ago.

Yep, I can go ahead and make that adjustment here!

TylerAPfledderer · 2023-10-18T15:52:01Z

@nloureiro @pettinarip added the newest image for the learning hub and applied the spacing beneath the hero for that page.
https://ethereumorgwebsitedev01-tylerapfleddererethereumo12683.gatsbyjs.io/en/learn/

After updating the branch with the latest dev the line-height issues should also be fixed via #11363.

Also with the spacing issue in mobile: since it also showing in current prod, I would like to know if the spacing I applied is enough; I could not find a reference to work with.

nloureiro · 2023-10-19T09:21:03Z

@nloureiro @pettinarip added the newest image for the learning hub and applied the spacing beneath the hero for that page. https://ethereumorgwebsitedev01-tylerapfleddererethereumo12683.gatsbyjs.io/en/learn/

After updating the branch with the latest dev the line-height issues should also be fixed via #11363.

Also with the spacing issue in mobile: since it also showing in current prod, I would like to know if the spacing I applied is enough; I could not find a reference to work with.

@TylerAPfledderer can you change the raw image to this one
Learn final layers_1970.png.zip

@konopkja noticed that it is a bit blur(ish) on the browser, and he was right, after comparing it to the original one.

Can it be the compression code that scales down the image and makes it blurry?
The raw on the repo has ~4mb and the .wepb is ~800kb it is still is a bit heavy but acceptable bot this kind of images

Let's try with a new PNG that I exported from Photoshop with more detail on it to see if it still happens

Thank you

TylerAPfledderer · 2023-10-19T21:08:49Z

@nloureiro I added in that updated image file. I do see an improvement.

Currently we have a graphQL query that maxes the image to 1504px wide with max quality for a constrained layout.

nloureiro · 2023-10-19T22:28:28Z

@nloureiro I added in that updated image file. I do see an improvement.

Currently we have a graphQL query that maxes the image to 1504px wide with max quality for a constrained layout.

yes, indeed it looks better!
oh, I did not know about the 1504px > why this size?

and, are adopting to better resolution screens, like 2x and 3x, using this script?

TylerAPfledderer · 2023-10-21T04:20:25Z

@nloureiro I added in that updated image file. I do see an improvement.
Currently we have a graphQL query that maxes the image to 1504px wide with max quality for a constrained layout.

yes, indeed it looks better! oh, I did not know about the 1504px > why this size?

and, are adopting to better resolution screens, like 2x and 3x, using this script?

This was something in place before I touched anything.

1504px is the max width of the container of the page content at large screens, since the image stretches the full width of its container. Gatsby will only generate a image file no larger than 1504px from the original, as well as multiple images down a set of breakpoints so the page loads an appropriate size image based on the screen size. This keeps load times down with file sizes.

Now this will be different for a page like the home page, where the image will always span the width of the screen, meaning that the original image size is the maximum generated and loaded to the page.

Aspect ratio is maintained. I don't think it is altering the image like 3x or 2x resolution.

netlify · 2023-10-24T02:10:14Z

✅ Deploy Preview for ethereumorg ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`21ca922`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65372782af8e6b0008881073
😎 Deploy Preview	https://deploy-preview-11132--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pettinarip

🚢 🚢 🚢 !!

feat(Hero): create multiple hero components for new DS

5dcfcdc

github-actions bot added the review needed 👀 label Sep 12, 2023

Merge remote-tracking branch 'origin/dev' into feat/hero-new-ds

0b4f4e9

github-actions bot added the event 📅 This issue or pull request is related to an event listing label Sep 12, 2023

TylerAPfledderer marked this pull request as ready for review September 14, 2023 16:50

TylerAPfledderer requested review from samajammin, wackerow, corwintines, pettinarip, minimalsm, jmcook1186 and nhsz as code owners September 14, 2023 16:50

TylerAPfledderer added 2 commits September 17, 2023 23:29

fix(Hero/utils): set optional tuple element for buttons

feba0e4

feat(pages/learn): implement HubHero

25c443b

pettinarip reviewed Sep 19, 2023

View reviewed changes

pettinarip reviewed Sep 20, 2023

View reviewed changes

TylerAPfledderer added 2 commits September 20, 2023 12:12

Merge remote-tracking branch 'origin/dev' into feat/hero-new-ds

8e83d10

refactor(Hero): use custom globalized GatsbyImage

cbe229b

pettinarip reviewed Oct 18, 2023

View reviewed changes

Merge remote-tracking branch 'origin/dev' into feat/hero-new-ds

879e611

TylerAPfledderer added 2 commits October 18, 2023 10:39

feat(pages/learn): use new image for learn hub hero

e2556af

fix(pages/learn): add spacing beneath the hero on mobile

888b973

TylerAPfledderer mentioned this pull request Oct 18, 2023

Update layout spacing on home/hub pages #11464

Closed

TylerAPfledderer mentioned this pull request Oct 19, 2023

Fixed paddings of what is etherium page [Fixes #11361] #11364

Merged

chore(learn-hub-hero): supply higher-quality image

36a722b

TylerAPfledderer added 2 commits October 23, 2023 22:06

style(Morpher): update color to body.medium

9b35261

refactor(pages/index): apply new home hero

21ca922

github-actions bot added the content 🖋️ This involves copy additions or edits label Oct 24, 2023

pettinarip approved these changes Oct 24, 2023

View reviewed changes

corwintines merged commit 722f6a2 into ethereum:dev Oct 25, 2023
7 checks passed

This was referenced Oct 25, 2023

Release candidate v7.23.0 #11505

Merged

Deploy v7.23.0 #11509

Merged

TylerAPfledderer deleted the feat/hero-new-ds branch October 25, 2023 16:06

This was referenced Nov 1, 2023

Release candidate v7.23.1 #11554

Merged

Deploy v7.23.1 #11555

Merged

feat(Hero): create multiple hero components for new DS #11132

feat(Hero): create multiple hero components for new DS #11132

Conversation

TylerAPfledderer commented Sep 12, 2023 • edited Loading

Description

Related Issue

gatsby-cloud bot commented Sep 12, 2023 • edited Loading

✅ ethereum-org-website-dev deploy preview ready

TylerAPfledderer commented Sep 12, 2023

nloureiro commented Sep 12, 2023

TylerAPfledderer commented Sep 12, 2023 • edited Loading

nloureiro commented Sep 13, 2023

TylerAPfledderer commented Sep 14, 2023 • edited Loading

nloureiro commented Sep 15, 2023

TylerAPfledderer commented Sep 15, 2023

nloureiro commented Sep 15, 2023

TylerAPfledderer commented Sep 18, 2023

pettinarip left a comment

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

TylerAPfledderer commented Sep 19, 2023

pettinarip commented Sep 20, 2023

pettinarip left a comment

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nloureiro commented Oct 17, 2023

TylerAPfledderer commented Oct 17, 2023

nloureiro commented Oct 18, 2023

TylerAPfledderer commented Oct 18, 2023

pettinarip commented Oct 18, 2023

nloureiro commented Oct 18, 2023

pettinarip left a comment

Choose a reason for hiding this comment

TylerAPfledderer commented Oct 18, 2023

TylerAPfledderer commented Oct 18, 2023

nloureiro commented Oct 19, 2023

TylerAPfledderer commented Oct 19, 2023

nloureiro commented Oct 19, 2023

TylerAPfledderer commented Oct 21, 2023 • edited Loading

netlify bot commented Oct 24, 2023 • edited Loading

✅ Deploy Preview for ethereumorg ready!

pettinarip left a comment

Choose a reason for hiding this comment

TylerAPfledderer commented Sep 12, 2023 •

edited

Loading

gatsby-cloud bot commented Sep 12, 2023 •

edited

Loading

TylerAPfledderer commented Sep 12, 2023 •

edited

Loading

TylerAPfledderer commented Sep 14, 2023 •

edited

Loading

TylerAPfledderer commented Oct 21, 2023 •

edited

Loading

netlify bot commented Oct 24, 2023 •

edited

Loading