Skip to content

Display author avatars in the blog #1915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 29, 2025

Conversation

rowanmanning
Copy link
Contributor

This resolves #1758 by adding author images to blog posts, both on the post page and in the list view. It's not overly designed - I went for a simple solution for now that can be expanded on later if the site is refreshed (as suggested in #1787).

This required some foundational work to ensure that:

  • We support multiple authors on a post with different metadata. I also updated all existing posts to ensure that the metadata is in place
  • Moving the author list to an include so that we don't have to repeat a load of Liquid logic in two places on the site

I outlined this work in more detail in this comment on the original issue.

Screenshots

Overview page with single author:

Screenshot 2025-05-27 at 15 49 14

Overview page with one author with an avatar and one without:

Screenshot 2025-05-27 at 15 49 14

Overview page with two authors:

Screenshot 2025-05-27 at 15 49 23

Light mode:

Screenshot 2025-05-27 at 15 49 33

Blog post page:

Screenshot 2025-05-27 at 15 49 47

@rowanmanning rowanmanning requested review from a team as code owners May 27, 2025 14:55
Copy link

netlify bot commented May 27, 2025

Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit 3eb6944
🔍 Latest deploy log https://app.netlify.com/projects/expressjscom-preview/deploys/68381bb64f21e800085cab42
😎 Deploy Preview https://deploy-preview-1915--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

authors:
- name: Wes Todd
github: wesleytodd
- name: Express Technical Committee
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use the GitHub username for the TC, so it doesn't end up without a photo.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find a GitHub user for the technical committee specifically, I added expressjs and it looks like this:

Screenshot 2025-05-28 at 09 42 06

Is this what you meant? If not I can revert. One doubt I had is that we're kind of spamming the blog page with lots of the same image and link out to the GitHub org. Maybe this is fine?

Copy link
Member

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Accessibility improvements

Copy link
Member

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
Please resolve merge conflict

rowanmanning and others added 8 commits May 29, 2025 09:30
This requires us to update the `author` front-matter, requiring it to be
an array of objects instead of a single string. This paves the way for
us to include further author metadata.

For now we only add "name" which expects a string.
This adds the ability for authors to add their GitHub username to the
blog posts they author. If they provide this then their name will be
linked to their GitHub profile page.
This adds a small profile image to author lines that have a GitHub.
The authors looked a little bunched up, a left margin on each of them
reads a little better.

Co-Authored-By: Wes Todd <[email protected]>
This ensures we still display a circle if, for some reason, the image
that we get isn't a perfect square.

Co-Authored-By: Shubham Oulkar <[email protected]>
Copy link
Member

@bjohansebas bjohansebas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@bjohansebas bjohansebas merged commit d1f904a into expressjs:gh-pages May 29, 2025
9 checks passed
@bjohansebas
Copy link
Member

thanks @rowanmanning!

@rowanmanning rowanmanning deleted the authors branch May 29, 2025 15:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show the author's image in the blog
4 participants