Homepage: Add hero section for random featured site

[ryelle]

Fixes WordPress/wporg-main-2022#135. This adds a random site to the header as a "hero". The site is chosen from the "sticky posts" to avoid creating a second Featured category (the current category "Featured" is used for the homepage grid). The same approach was used in the first redesign iteration, see #37.

The Hero section displays a heading & blurb for Showcase, then the featured site's meta: author, domain, and category (should this be tags?).

Has all 3 meta fields	Missing "author"

The responsive styles are a work in progress, this will depend on how the spacing conversation goes I think. Currently the hero breaks into one column at 1179px, because that's when the image starts to look too squished. At 480px, the spacing and border are definitely too big, but that also depends on the outcome of the spacing issue.

1080px	1000px	480px

To test

• Check out branch and build
• Add some sticky posts
• View the homepage
• It should show one of the sites you made sticky
• The site info should show, and the desktop-sized image should be a link to the site detail page
• Reload (maybe a few times if only a few sticky), the featured site should change randomly

Due to the override we're using to fix this issue, if you don't have any sticky posts, it will show any random site.

[adamwoodnz]

Also comparing with the design at monitor size (2560w), the dots look a bit small, and the title a little high in relation to the screenshot. The metadata boxes are possibly a little short too.

Design	Browser

[adamwoodnz]

Looking good, a few comments inline

[jasmussen]

Nice PR, lots to like here. I'd appreciate an eye by @fcoveram for a sanity check on the metrics, especially the max-width. here, 1920 from the mockups:

In this case the dots actually scale a bit up compared to the 1320 view:

At a glance, hard to test, the stroke in the mobile view looks a bit thick. It may be a trick of my eyes, and might not be something to fix here. But an option is to look at vw scaling strokes, like so: https://codepen.io/joen/pen/GRwXPop

[ryelle]

I fixed the code issues, and have pulled out the following issues from above (paraphrased). A lot is waiting on the spacing conversation.

Showcase title is lower on large screens

This will depend on the new spacing values, I believe I grabbed the midsized-screen value to work with for now. On the meeting last week we decided that would work until the new spacing values were finalized. WordPress/wporg-parent-2021#105

Dots are larger on large screens

Ah, I missed this on the design. I tried a version with clamp, it's mostly a guess to see if that would work, but it's roughly there. Maybe once this is pushed to staging a designer can take a look & use inspector to figure out the right values? Also to note, the spacing above the screenshot is a little awkward combined with the scaling dots, but when the spacing values are worked out this should scale too.

Meta fields should have more padding in general and even more padding on large screens

Currently this uses the same block as the single site meta list, so it was just inheriting the default spacing. I've updated the spacing when used without a label (like in the hero), but haven't address the scaling based on screen size (again, waiting on the spacing convo).

Stroke should scale with viewport size

Okay, I've grabbed the clamp from that codepen and added it.

Latest screenshots:

Width	Screenshot
1920
1320
960
600
480

[StevenDufresne]

Nice! This is looking good. A few descrepancies I've noticed:

• Link color
• Link decoration
• On Mobile the "Showcase" title should be hidden and the subnav visible (maybe this comes later).

Thoughts

Apologies for the late feedback, seeing this live has brought this out, but I was confused as to what the details in the "box" were especially because i don't know who/what "Conde Nast" is, haven't seen the meta detail box anywhere yet and the leading text, "Star-studded sites built with WordPress", seems to introduce the meta details but doesn't. Based on how it's written I would expect to see a list of sites.

@marko-srb Did we consider adding labels next to fields for the homepage? Too verbose?

Before	After

Also, would we consider dropping the meta details on mobile? Would that be a bad idea? The image is what pops, but instead I get a list of information that seems secondary and I am very unlikely to click on.

What I see	What I want to see

[jasmussen]

At a glance, looks good! I'd appreciate a sanity check by @fcoveram

Probably nothing to block this PR, we can always follow up.

[ryelle]

@StevenDufresne @marko-srb For what it's worth, this is using the same block as the site details meta box, it just hides the labels. I could just untoggle that:

[marko-srb]

Just a thing,

There's no 'author' as metadata on the landing. The first row is actually just the name of the site in full.
So that field should be always present.

We made it through several pushbacks on the home having 3 metadata points:

1. Name (must have)
2. UIR (must have)
3. Tags (must have)

Sorry if this wasn't clear enough...

[marko-srb]

For the labels thing.

I'd say we go without them on Home page. If we consider the name, url and tags, I am not sure we really need labels? Maybe it gets confusing sometimes, but I guess the name of the site is first what you see, and in most cases you see the same name on the site screenshot on the right (or initials) — at least that's the case for 6 sites I narrowed in showcase hero section for landing...

If we go with a label though, it should say 'site name' not 'author', as we would avoid having less than those 3 data there on hero section... [ref is previous comment]

[marko-srb]

@StevenDufresne @marko-srb For what it's worth, this is using the same block as the site details meta box, it just hides the labels. I could just untoggle that:

Issue with that is, it can become a bit problematic in layout area, due to hero section attempt to have everything left aligned. But if you pursue this, please do test it, it may look better than I think and it is a quick test...

[ryelle]

There's no 'author' as metadata on the landing. The first row is actually just the name of the site in full.

Ah, okay. I made an incorrect assumption. In the future, could you annotate that sort of thing in the mockups (either in figma or when posting in github)? That would help.

If we consider the name, url and tags, I am not sure we really need labels?

I think that's fair, we can go without labels for now and if it seems unclear when merged, update it then 👍🏻

[ryelle]

Updated to swap out the "author" for site title:

[jasmussen]

Nice, thanks for the update.

In general, links in the metadata boxes are not underlined, and on the homepage they have a different link color:

We can keep the external link icon as you have it for now, though there's a separate conversation on whether this should be the ↗ unicode icon instead, standardizing this on external links. CC: @fcoveram

[fcoveram]

External link icon

Agree with @jasmussen on replacing the external icon with the unicode symbol.

Thumbnail on mobile

I'm not sure what is the last version of hero section on mobile, but worth mention that in design the image is set to be full-width and reach the main container. See the red guidelines in the image below. Sorry the low contrast of the marks.

[ryelle]

In general, links in the metadata boxes are not underlined, and on the homepage they have a different link color:

Done ✅

We can keep the external link icon as you have it for now, though there's a separate conversation on whether this should be the ↗ unicode icon instead, standardizing this on external links.

I've updated this in the parent theme, so it should use the arrow now.

I'm not sure what is the last version of hero section on mobile, but worth mention that in design the image is set to be full-width and reach the main container.

Okay, I've updated the spacing here too so it's edge-to-edge, but I'd like to merge this to get it onto the staging site so that you can see it action.

[jasmussen]

Go for it!