Add author image to blog posts

[joaoGabriel55]

Description

Instead of the initials of each author, now use the GitHub image for each author

Validation

Related Issues

Related to #6573

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npx turbo format to ensure the code follows the style guide.
• [x] I have run npx turbo test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Apr 1, 2024 5:17pm

[ovflowd]

Blog Posts do not have any username at the moment, so this isn't really fixing any issue unfortunately.

We should probably open an issue to keep track of the problem and actually come with a long-term solution.

Unfortunately, not all blog authors have a GitHub account... And we have blog posts from back 2011.

Here's a full list of all blog authors and usernames when available: https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml

Feel free to make a script to replace the existing names to usernames on all blog posts, and then update the script that creates release blog posts to use username instead of name ;)

Then this solution is viable. But we still need their names, so 🤷 if you're feeling like spending time into this, go ahead! It's appreciated

[AugustinMauroy]

We should probably open an issue to keep track of the problem and actually come with a long-term solution.

Could you do it ?

Here's a full list of all blog authors and usernames when available: https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml

I thinks it's will easier to follow you proposal. But use JSON instead of yaml it's can be link to next.json.mjs.

[ovflowd]

We should probably open an issue to keep track of the problem and actually come with a long-term solution.

Could you do it ?

Here's a full list of all blog authors and usernames when available: nodejs/nodejs.dev@main/src/data/blog/authors.yaml

I thinks it's will easier to follow you proposal. But use JSON instead of yaml it's can be link to next.json.mjs.

Not everything needs to be done by me 🙈

[joaoGabriel55]

Blog Posts do not have any username at the moment, so this isn't really fixing any issue unfortunately.

We should probably open an issue to keep track of the problem and actually come with a long-term solution.

Unfortunately, not all blog authors have a GitHub account... And we have blog posts from back 2011.

Here's a full list of all blog authors and usernames when available: https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml

Feel free to make a script to replace the existing names to usernames on all blog posts, and then update the script that creates release blog posts to use username instead of name ;)

Then this solution is viable. But we still need their names, so 🤷 if you're feeling like spending time into this, go ahead! It's appreciated

Maybe we could still use the avatar with initial letters if the blog post does not have a username field otherwise we can use this new approach.

[AugustinMauroy]

basically, there is https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml which is a list that transfers the string that is in authors FrontMatter into a link. All you need to do is put it in JSON instead of YAML.

[joaoGabriel55]

That would be my proposal:

export const mapAuthorToCardAuthors = (author: string, username?: string) => {
  const authors = author.split(/, | and |;| by /i);
  const usernames = username?.split(/, | and |;| by /i) || [];

  return authors.map((fullName, index) => {
    let src = `https://ui-avatars.com/api/?name=${fullName}`;

    if (username) src = getGitHubAvatarUrl(usernames[index]);

    return { fullName, src };
  });
};

[joaoGabriel55]

basically, there is https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml which is a list that transfers the string that is in authors FrontMatter into a link. All you need to do is put it in JSON instead of YAML.

I see

[joaoGabriel55]

basically, there is https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml which is a list that transfers the string that is in authors FrontMatter into a link. All you need to do is put it in JSON instead of YAML.

So just to confirm @AugustinMauroy, in the blogUtils.ts we will need to map the fullname of the author with the author name in the new JSON file generated by the authors.yaml file, right?

[AugustinMauroy]

Oh cool ! note:

• "the node.js project" have 404 GitHub image
• "Brian Muenzenmeyer" is missing on json https://github.com/bmuenzenmeyer
• "Marco Ippolito" is missing on json https://github.com/marco-ippolito
• "Ulises Gascón" is missing on json https://github.com/UlisesGascon
• "Juan José Arboleda" is on JSON but there are also "Juan José" on frontMatter so you should do something to merge it
• "Claudio Wunder" is missing on json https://github.com/ovflowd
• "Matt Cowley" is missing on json https://github.com/MattIPv4
• "ryandahl" isn't working

[joaoGabriel55]

Oh cool ! note:

• "the node.js project" have 404 GitHub image
• "Brian Muenzenmeyer" is missing on json https://github.com/bmuenzenmeyer
• "Marco Ippolito" is missing on json https://github.com/marco-ippolito
• "Ulises Gascón" is missing on json https://github.com/UlisesGascon
• "Juan José Arboleda" is on JSON but there are also "Juan José" on frontMatter so you should do something to merge it
• "Claudio Wunder" is missing on json https://github.com/ovflowd
• "Matt Cowley" is missing on json https://github.com/MattIPv4
• "ryandahl" isn't working

Is the Ryan Dahl who has the GitHub username 'ry' the same person as 'ryandahl'?

[ovflowd]

Oh cool ! note:

• "the node.js project" have 404 GitHub image

• "Brian Muenzenmeyer" is missing on json https://github.com/bmuenzenmeyer

• "Marco Ippolito" is missing on json https://github.com/marco-ippolito

• "Ulises Gascón" is missing on json https://github.com/UlisesGascon

• "Juan José Arboleda" is on JSON but there are also "Juan José" on frontMatter so you should do something to merge it

• "Claudio Wunder" is missing on json https://github.com/ovflowd

• "Matt Cowley" is missing on json https://github.com/MattIPv4

• "ryandahl" isn't working

Is the Ryan Dahl who has the GitHub username 'ry' the same person as 'ryandahl'?

Yes!

[github-actions[bot]]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 96	🟢 100	🟢 91	🔗
/en/about	🟢 99	🟢 96	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 95	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 95	🟢 96	🟢 91	🔗
/en/blog	🟢 100	🟢 96	🟢 100	🟢 92	🔗

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	89.81% (582/648)	75.21% (176/234)	91.4% (117/128)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
128	0 :zzz:	0 :x:	0 :fire:	5.767s :stopwatch: