Display author avatars in the blog (#1915)

* feat: allow blogs to have multiple authors

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.

* feat: allow linking to author GitHub profiles

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.

* feat: add GitHub profile images to author lines

This adds a small profile image to author lines that have a GitHub.

* feat: add author URLs to the feeds

* fix: space the authors a little more

The authors looked a little bunched up, a left margin on each of them
reads a little better.

Co-Authored-By: Wes Todd <wesleytodd@users.noreply.github.com>

* fix: improve readability of the feed entry Liquid

Co-Authored-By: Sebastian Beltran <bjohansebas@users.noreply.github.com>

* feat: add author image for the technical committee

Co-Authored-By: Sebastian Beltran <bjohansebas@users.noreply.github.com>

* fix: set a width and height on author images

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 <ShubhamOulkar@users.noreply.github.com>

---------

Co-authored-by: Wes Todd <wesleytodd@users.noreply.github.com>
Co-authored-by: Sebastian Beltran <bjohansebas@users.noreply.github.com>
Co-authored-by: Shubham Oulkar <ShubhamOulkar@users.noreply.github.com>

_includes/blog/authors.html

@@ -0,0 +1,21 @@
+{%- assign authors = include.authors -%}
+{% if authors %}
+  <div class="blog-authors">
+    By
+    {% for author in authors %}
+
+      {%- assign label = author.github | prepend: '@' -%}
+      {%- if author.name -%}
+        {%- assign label = author.name -%}
+      {%- endif -%}
+
+      {% if label and author.github %}
+        <a href="https://github.com/{{author.github}}" rel="author" class="blog-author-link">
+          <img src="https://github.com/{{author.github}}.png?size=64" alt="" class="blog-author-avatar" />
+          <span class="blog-author-link-label">{{label}}</span></a>{% unless forloop.last %}, {% endunless %}
+      {% elsif label %}
+        {{label}}{% unless forloop.last %}, {% endunless %}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endif %}

_includes/feed-entry.xml

@@ -3,11 +3,18 @@
   <id>{{ site.url }}{{ entry.url }}</id>
   <link href="{{ site.url }}{{ entry.url }}" rel="alternate" type="text/html" />
   <title type="text">{{ entry.title }}</title>
-  {%- if entry.author %}
+  {%- for author in entry.authors %}
-  <author>
+    <author>
-    <name>{{ entry.author }}</name>
+        {% if author.name %}
-  </author>
+          <name>{{ author.name }}</name>
-  {%- endif %}
+        {% elsif author.github %}
+          <name>@{{ author.github }}</name>
+        {% endif %}
+        {% if author.github %}
+          <uri>https://github.com/{{ author.github }}</uri>
+        {% endif %}
+    </author>
+  {%- endfor %}
   <published>{{ entry.date | date_to_xmlschema }}</published>
   <updated>{{ entry.last_modified_at | default: post.date | date_to_xmlschema }}</updated>
   {%- for tag in post.tags %}

_includes/head.html

@@ -40,9 +40,11 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="description" content="{{page.description}}">
     <meta property="og:url" content="https://expressjs.com{{page.url}}">
-    {% if page.author %}
+    {% if page.authors %}
-    <meta property="og:type" content="article">
+        <meta property="og:type" content="article">
-    <meta property="og:article:author" content="{{page.author}}">
+        {%- for author in page.authors %}
+            <meta property="og:article:author" content="{{author.name}}">
+        {%- endfor %}
     {% else %}
     <meta property="og:type" content="website">
     {% endif %}

_layouts/post.html

@@ -21,9 +21,7 @@
           <h2>{{page.sub_title}}</h2>
           {% endif %}
           <div class="blog-details">
-            {% if page.author %}
+            {% include blog/authors.html authors=page.authors %}
-            <div class="blog-author">By {{page.author}}</div>
-            {% endif %}
             <div class="blog-date">{{page.date| date: "%d %b %Y" }}</div>
           </div>
         {{ content }}

_posts/2024-07-16-welcome-post.md

@@ -2,7 +2,11 @@
 title: Welcome to The Express Blog!
 description: Introducing the new Express blog — a primary platform for announcements, updates, and communication from the Express technical committee.
 tags: site-admin
-author: Rand McKinney and Chris Del
+authors:
+  - name: Rand McKinney
+    github: crandmck
+  - name: Chris Del
+    github: chrisdel101
 ---
 
 Welcome to the new Express blog!  The blog is meant to be a primary means of communication for the Express technical committee (TC).  While we currently have other channels such as X, LinkedIn, and of course GitHub, there's no authoritative "soapbox" for announcements and general communication.

_posts/2024-09-29-security-releases.md

@@ -2,7 +2,9 @@
 title: September 2024 Security Releases
 description: Security releases for Express, body-parser, send, serve-static, and path-to-regexp have been published. We recommend that all users upgrade as soon as possible.
 tags: security vulnerabilities
-author: Ulises Gascón
+authors:
+  - name: Ulises Gascón
+    github: UlisesGascon
 ---
 
 Recently, the Express team has been made aware of a number of security vulnerabilities in the Express project.  We have released a number of patches to address these vulnerabilities.  

_posts/2024-10-01-HeroDevs-partnership-announcement.md

@@ -2,7 +2,9 @@
 title: Express Never Ending Support Launched by HeroDevs and Express.js
 description: The Express.js team is pleased to announce a partnership with HeroDevs to launch Express Never-Ending Support (NES), providing long-term support for applications built with legacy Express. This collaboration ensures that developers relying on older versions of the framework will continue to receive critical security and compatibility updates, allowing them to maintain and scale their applications securely, even after the framework's official end-of-life.
 tags: partnerships announcements
-author: Express Technical Committee
+authors:
+  - name: Express Technical Committee
+    github: expressjs
 ---
 
 The Express.js team is pleased to announce a partnership with HeroDevs to launch [Express Never-Ending Support (NES)](https://www.herodevs.com/support/express-nes), providing long-term support for applications built with legacy Express. This collaboration ensures that developers relying on older versions of the framework will continue to receive critical security and compatibility updates, allowing them to maintain and scale their applications securely, even after the framework's official end-of-life.

_posts/2024-10-15-v5-release.md

@@ -1,7 +1,11 @@
 ---
 title: "Introducing Express v5: A New Era for the Node.js Framework"
 tags: releases
-author: Wes Todd and the Express Technical Committee
+authors:
+  - name: Wes Todd
+    github: wesleytodd
+  - name: Express Technical Committee
+    github: expressjs
 description: Announcing the release of Express version 5
 ---
 

_posts/2024-10-22-security-audit-milestone-achievement.md

@@ -1,7 +1,9 @@
 ---
 title: "Express.js Security Audit: A Milestone Achievement"
 tags: security audit releases
-author: Express Technical Committee
+authors:
+  - name: Express Technical Committee
+    github: expressjs
 description: Celebrating the successful completion of the Express.js security audit conducted by Ada Logics and facilitated by OSTIF.
 ---
 

_posts/2025-01-09-rewind-2024-triumphs-and-2025-vision.md

@@ -1,7 +1,9 @@
 ---
 title: "A New Chapter for Express.js: Triumphs of 2024 and an ambitious 2025"
 tags: news rewind 2024
-author: Express Technical Committee
+authors:
+  - name: Express Technical Committee
+    github: expressjs
 description: Explore the transformative journey of Express.js in 2024, marked by governance improvements, the long-awaited release of Express 5.0, and heightened security measures. Look into the ambitious plans for 2025, including performance optimizations, scoped packages, and a bold roadmap for sustained growth in the Node.js ecosystem.
 ---
 

_posts/2025-03-31-v5-1-latest-release.md

@@ -1,7 +1,9 @@
 ---
 title: "Express@5.1.0: Now the Default on npm with LTS Timeline"
 tags: news release
-author: Express Technical Committee
+authors:
+  - name: Express Technical Committee
+    github: expressjs
 description: Express 5.1.0 is now the default on npm, and we're introducing an official LTS schedule for the v4 and v5 release lines.
 ---
 

_posts/2025-05-16-express-cleanup-legacy-packages.md

@@ -1,7 +1,9 @@
 ---
 title: "Spring Cleaning in Express.js: Deprecations and the Path Ahead"
 tags: news
-author: Express Technical Committee
+authors:
+  - name: Express Technical Committee
+    github: expressjs
 description: As part of a broader effort to modernize and streamline Express.js, we’ve deprecated several outdated packages including csurf, connect-multiparty, and path-match. Learn why we made these changes and what it means for the future of the framework.
 ---
 

_posts/2025-05-19-security-releases.md

@@ -2,7 +2,9 @@
 title: May 2025 Security Releases
 description: Security release for Multer has been published. We recommend that all users upgrade as soon as possible.
 tags: security vulnerabilities
-author: Ulises Gascón
+authors:
+  - name: Ulises Gascón
+    github: UlisesGascon
 ---
 
 The Express team has released a new major version of [Multer](https://www.npmjs.com/package/multer) addressing two high-severity security vulnerabilities. This update improves the reliability and security of handling file uploads in Express applications.

css/style.css

@@ -1487,9 +1487,24 @@ h2 a {
   max-width: 100%;
   margin: auto;
 }
-.blog-author {
+.blog-authors {
   font-style: italic;
 }
+.blog-author-link {
+  color: inherit;
+  margin-left: 0.5ch;
+  text-decoration: none;
+}
+.blog-author-link-label {
+  text-decoration: underline;
+}
+.blog-author-avatar {
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+  width: 1.5em;
+  height: 1.5em;
+}
 .blog-date {
   font-weight: bold;
   font-size: 85%;

en/blog/posts.md

@@ -17,7 +17,7 @@ Want to write a post? See the submission [guidelines.](/en/blog/write-post.html)
         <a href="{{ post.url }}"> {{ post.title }}</a>
       </div>
       <div class="blog-details">
-        <div>By {{ post.author }}</div> 
+        {% include blog/authors.html authors=post.authors %}
         <div >{{ post.date | date:"%b %d, %Y" }}</div> 
       </div>   
       <div class="blog-excerpt"> {{post.excerpt | truncate: 240 | markdownify }} </div>

en/blog/write-post.md

@@ -33,9 +33,14 @@ Create a new file in the `_posts` directory named using following the format: `Y
     sub_title: <your-optional-sub-title>
     description: <description-of-your-post>
     tags: <white-space-separated-topics>
-    author: <your-name>
+    authors:
+      - name: <your-name>
+        github: <github-username>
     ---
     ```
+
+    The `github` property of an author is optional. Including your username only (not your full profile URL) will ensure that your blog post links out to it.
+
 2. ### Add your content
     Finally, start writing your content below the front matter.  Use standard markdown formatting.