Contributor Profile Links In Liveblog Blocks

[JamieB-gu]

Articles have bylines that include the names of one or more people who have contributed to the article. The name of each contributor in these byline is also a link to a contributor's profile page (if it exists).

Sometimes individual liveblog blocks also contain bylines specifically for that block. We'd like to start including links to profile pages for each contributor in the block bylines, like we do for the main byline.

Where is the rendering code?

The component that renders block bylines (for both AR and DCR) is BlockByline:

dotcom-rendering/common-rendering/src/components/liveBlockContainer.tsx

Lines 68 to 76 in 9310d9a

	const BlockByline = ({
	name,
	imageUrl,
	format,
	}: {
	name: string;
	format: ArticleFormat;
	imageUrl?: string;
	}) => {

We'll probably want to add the profile link as a prop to this component.

How do we currently get the contributor data?

The contributor data is currently extracted by taking the list of contributors in the block data and joining it with the contributor tags for the article. In AR this is done here:

dotcom-rendering/apps-rendering/src/liveBlock.ts

Lines 66 to 69 in 9310d9a

	contributors: tagsToContributors(
	contributorTags(block.contributors, tags),
	context,
	),

In DCR it looks like frontend is providing this data.

How will we get the profile link?

Contributor tags in the CAPI response already include a link to a contributor's profile page. We'll need to update the contributor data model we use in AR and DCR to include the profile link, and extract it from the tag along with the other data, as described above.