387: Hero clickable elements

[rjwtrmn]

Summary of changes:

• Primary tag added to hero, links to /topics/{first tag}, nothing if no article tags set
• Eyebrow text now clickable on L3 pages with default link /topics/{content type}
• Eyebrow text link can be configured by author adding hyperlink in doc
• Author names now clickable, links to /author/{author name}
• Multiple authors behaviour
  • Show all authors, each with own link
  • Hide avatar
  • Wrap onto new line if too long
  • Scrub ", PhD" titles from author names

Fix #387

Test URLs: L3 with Dark Text, one author

• Before: https://main--hlx-test--urfuwo.hlx.live/blog/ext-how-ai-powered-cybersecurity-combats-ai-threats
• After: https://387-hero-clickable-elements--hlx-test--urfuwo.hlx.live/blog/ext-how-ai-powered-cybersecurity-combats-ai-threats

L3 with Light Text, multiple Authors (with PhDs), custom eyebrow link

• Before: https://main--hlx-test--urfuwo.hlx.live/draft/rjwtrmn/hero-blue-white-text
• After: https://387-hero-clickable-elements--hlx-test--urfuwo.hlx.live/draft/rjwtrmn/hero-blue-white-text

L3 with Dark Text, multiple authors

• Before: https://main--hlx-test--urfuwo.hlx.live/blog/the-c-suite-gets-an-ai-upgrade
• After: https://387-hero-clickable-elements--hlx-test--urfuwo.hlx.live/blog/the-c-suite-gets-an-ai-upgrade

L3 with Dark Text, no author

• Before: https://main--hlx-test--urfuwo.hlx.live/resources/the-circular-economy-goes-mainstream
• After: https://387-hero-clickable-elements--hlx-test--urfuwo.hlx.live/resources/the-circular-economy-goes-mainstream

L1 (Unchanged)

• Before: https://main--hlx-test--urfuwo.hlx.live/topics
• After: https://387-hero-clickable-elements--hlx-test--urfuwo.hlx.live/topics

L2 (Unchanged)

• Before: https://main--hlx-test--urfuwo.hlx.live/topics/ai
• After: https://387-hero-clickable-elements--hlx-test--urfuwo.hlx.live/topics/ai

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [14e88ff](https://github.com/urfuwo/hlx-test/commit/14e88ff128e5fd47b3a4ac8c57126b46b1b13db1) :white_check_mark: (latest) * [1f3b1aa](https://github.com/urfuwo/hlx-test/commit/1f3b1aaef8cc546efed0d27a60786e12aee4a357) :white_check_mark: * [c015322](https://github.com/urfuwo/hlx-test/commit/c01532282cb4f7af5b9f474e60c9f29f4264a8cd) :white_check_mark: * [b226d01](https://github.com/urfuwo/hlx-test/commit/b226d011acaa99ba312642095f933d157260a507) :white_check_mark: * [238cce1](https://github.com/urfuwo/hlx-test/commit/238cce1fffb8ce0e2ad872e03c1d462982213336) :white_check_mark: * [cd95b1f](https://github.com/urfuwo/hlx-test/commit/cd95b1f9ac5387bf65da73a9fdbf48cb8fbb6796) :white_check_mark: * [cb7ba4e](https://github.com/urfuwo/hlx-test/commit/cb7ba4e0610e8bea6230f7f8c88a634307a3d5cb) :white_check_mark: * [0f60a1e](https://github.com/urfuwo/hlx-test/commit/0f60a1ee29cb166437800dccb6f691cd6ca344a1) :white_check_mark: * [514944e](https://github.com/urfuwo/hlx-test/commit/514944ef84b34c3fcaa66c48a98cdfb1e1795b0d) :white_check_mark: * [7fc07ff](https://github.com/urfuwo/hlx-test/commit/7fc07ff35210e2211152bcc0fc13a08d04a59ca9) :white_check_mark: * [15d0447](https://github.com/urfuwo/hlx-test/commit/15d044741fdee18324b69d2d402cc718a86073df) :white_check_mark: * [ef34ec9](https://github.com/urfuwo/hlx-test/commit/ef34ec9753a277bd9632d0b2dd7845924baa0731) :white_check_mark: * [eeb4a6c](https://github.com/urfuwo/hlx-test/commit/eeb4a6c233a016e40e4c023eb714670ce3c9aca1) :white_check_mark:

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ext-how-ai-powered-cybersecurity-combats-ai-threats
/blog/the-c-suite-gets-an-ai-upgrade
/draft/rjwtrmn/hero-blue-white-text
/resources/the-circular-economy-goes-mainstream
/topics
/topics/ai

[pahupe]

Though I approved the request. I consistently see Lighthouse score being dropped for /topics page even after re running PSI checks. Can you please check if this is not impacted by this PR. You can create a fake PR with main to check PSI there.

I also noticed this, but when I run these two pages separately in LH, they both score at 99 / 100

[rjwtrmn]

Though I approved the request. I consistently see Lighthouse score being dropped for /topics page even after re running PSI checks. Can you please check if this is not impacted by this PR. You can create a fake PR with main to check PSI there.

@saurabh-khare https://github.com/urfuwo/hlx-test/pull/408 The topics page is failing in PSI checks on main as well

[pahupe]

I can see two major shifts on mobile for page /topics/ai:

• the mobile header > side nav is loaded later and pushes down the hero and subsequent content
• the first picture card actually has an avatar image (Luis), and when that Avatar image is loaded, the layout of the card changes. Both are not related to this PR

[saurabh-khare]

I can see two major shifts on mobile for page /topics/ai:

• the mobile header > side nav is loaded later and pushes down the hero and subsequent content
• the first picture card actually has an avatar image (Luis), and when that Avatar image is loaded, the layout of the card changes. Both are not related to this PR

Lets capture this in a ticket. Let me know if you want me to create a bug for this.