Reworking page titles and hero elements

[SayakMukhopadhyay]

As part of our progress with #41171 I noticed how in the absence of any announcement, the hero banner below the navbar behaves. The hero banner is not part of Docsy and I feel like it could be removed since it repeats information. Below are some screenshots to illustrate my point.

Home page, large and small screens, with the hero banner in cyan

In the home page, the hero banner doesn't look out of place so I don't have any qualms about that.

Documentation main page, with the hero banner in cyan

In the documentation main page, we see the "Documentation" title both in the hero banner as well as in the body after the breadcrumbs. I feel the title in the body should be enough and the one in the banner can be removed.

List page in documentation

In one of the list pages in the documentation, we don't see a header in the body at all. I think we can do either:

• Remove the hero banner title and use a title in the body
• Make the hero banner title "Documentation" with the title in the body reflecting the section.

Single page in documentation

Now a single page in documentation doesn't have a title in the hero banner at all, only in the body. This is the opposite of the list page. Either we can keep it as it is or use the second point from above.

Blog page

As for the blogs page, both the blog list page and singular blog pages have the hero banner with the title being "Kubernetes Blog". This is true for other pages too.

I think an update is necessary to bring all the pages into single UX. Just not sure which option to choose.

1. Remove the hero banner altogether
2. Remove the hero banner from the larger screens and keep it for smaller screens
3. Put the title of the first section or the title of the page on the hero banner
4. Something else?

[k8s-ci-robot]

This issue is currently awaiting triage.

SIG Docs takes a lead on issue triage for this website, but any Kubernetes member can accept issues by applying the triage/accepted label.

The triage/accepted label can be added by org members by writing /triage accepted in a comment.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[SayakMukhopadhyay]

/area web-development

[lmktfy]

My suggestion

Overall, let's make the layout code feel like Docsy but (for now) not change the overall visual theme. In other words, someone who half remembers how the Kubernetes website looks shouldn't instantly think the theme has changed, but it's fine if a particular page has a different word in the heading, or if the area used for the “hero” text appears / disappears.

Extra credit if it's easy to align even more with Docsy (maybe we have a site param that controls whether the page title is shown as an element - <h1> - inside the main content area). But fine to make a change without that extra credit part.

It's good if each change makes the docs part of the site more self-consistent.