feat(content-blog): allow authors list to contain images only (#6416)

* feat(content-blog): allow authors list to contain images only

* adjust styles

* fix

* fix

* mention in docs

* fix wording

packages/docusaurus-plugin-content-blog/src/__tests__/authors.test.ts

@@ -353,15 +353,27 @@ describe('validateAuthorsMap', () => {
     });
   });
 
-  test('reject author without name', () => {
+  test('accept author with only image', () => {
     const authorsMap: AuthorsMap = {
       slorber: {
-        image_url: 'https://github.com/slorber.png',
+        imageURL: 'https://github.com/slorber.png',
+        url: 'https://github.com/slorber',
+      },
+    };
+    expect(validateAuthorsMap(authorsMap)).toEqual(authorsMap);
+  });
+
+  test('reject author without name or image', () => {
+    const authorsMap: AuthorsMap = {
+      slorber: {
+        title: 'foo',
       },
     };
     expect(() =>
       validateAuthorsMap(authorsMap),
-    ).toThrowErrorMatchingInlineSnapshot(`"\\"slorber.name\\" is required"`);
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"\\"slorber\\" must contain at least one of [name, imageURL]"`,
+    );
   });
 
   test('reject undefined author', () => {

packages/docusaurus-plugin-content-blog/src/authors.ts

@@ -20,12 +20,13 @@ export type AuthorsMap = Record<string, Author>;
 const AuthorsMapSchema = Joi.object<AuthorsMap>().pattern(
   Joi.string(),
   Joi.object({
-    name: Joi.string().required(),
+    name: Joi.string(),
     url: URISchema,
     imageURL: URISchema,
     title: Joi.string(),
   })
     .rename('image_url', 'imageURL')
+    .or('name', 'imageURL')
     .unknown()
     .required(),
 );
@@ -63,7 +64,6 @@ function getFrontMatterAuthorLegacy(
   const url = frontMatter.author_url ?? frontMatter.authorURL;
   const imageURL = frontMatter.author_image_url ?? frontMatter.authorImageURL;
 
-  // Shouldn't we require at least an author name?
   if (name || title || url || imageURL) {
     return {
       name,

packages/docusaurus-plugin-content-blog/src/blogFrontMatter.ts

@@ -21,7 +21,7 @@ const BlogPostFrontMatterAuthorSchema = Joi.object({
   url: URISchema,
   imageURL: Joi.string(),
 })
-  .or('key', 'name')
+  .or('key', 'name', 'imageURL')
   .rename('image_url', 'imageURL', {alias: true});
 
 const FrontMatterAuthorErrorMessage =

packages/docusaurus-theme-classic/src/theme/BlogPostAuthors/index.tsx

@@ -21,10 +21,20 @@ export default function BlogPostAuthors({
   if (authorsCount === 0) {
     return null;
   }
+  const imageOnly = authors.every(({name}) => !name);
   return (
-    <div className="row margin-top--md margin-bottom--sm">
+    <div
+      className={clsx(
+        'margin-top--md margin-bottom--sm',
+        imageOnly ? styles.imageOnlyAuthorRow : 'row',
+      )}>
       {authors.map((author, idx) => (
-        <div className={clsx('col col--6', styles.authorCol)} key={idx}>
+        <div
+          className={clsx(
+            !imageOnly && 'col col--6',
+            imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
+          )}
+          key={idx}>
           <BlogPostAuthor
             author={{
               ...author,

packages/docusaurus-theme-classic/src/theme/BlogPostAuthors/styles.module.css

@@ -9,3 +9,14 @@
   max-width: inherit !important;
   flex-grow: 1 !important;
 }
+
+.imageOnlyAuthorRow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.imageOnlyAuthorCol {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}

website/_dogfooding/_blog tests/2022-01-20-image-only-authors.md

@@ -0,0 +1,47 @@
+---
+authors:
+  - image_url: https://github.com/endiliey.png
+    url: https://github.com/endiliey
+  - image_url: https://github.com/lex111.png
+    url: https://github.com/lex111
+  - image_url: https://github.com/slorber.png
+    url: https://github.com/slorber
+  - image_url: https://github.com/yangshun.png
+    url: https://github.com/yangshun
+  - image_url: https://github.com/JoelMarcey.png
+    url: https://github.com/JoelMarcey
+  - image_url: https://github.com/Josh-Cena.png
+    url: https://github.com/Josh-Cena
+  - image_url: https://github.com/deltice.png
+    url: https://github.com/deltice
+  - image_url: https://github.com/SamChou19815.png
+    url: https://github.com/SamChou19815
+  - image_url: https://github.com/ericnakagawa.png
+    url: https://github.com/ericnakagawa
+  - image_url: https://github.com/Simek.png
+    url: https://github.com/Simek
+  - image_url: https://github.com/hramos.png
+    url: https://github.com/hramos
+  - image_url: https://github.com/wgao19.png
+    url: https://github.com/wgao19
+  - image_url: https://github.com/rickyvetter.png
+    url: https://github.com/rickyvetter
+  - image_url: https://github.com/fanny.png
+    url: https://github.com/fanny
+  - image_url: https://github.com/armano2.png
+    url: https://github.com/armano2
+  - image_url: https://github.com/RDIL.png
+    url: https://github.com/RDIL
+  - image_url: https://github.com/teikjun.png
+    url: https://github.com/teikjun
+  - image_url: https://github.com/hong4rc.png
+    url: https://github.com/hong4rc
+  - image_url: https://github.com/anshulrgoyal.png
+    url: https://github.com/anshulrgoyal
+  - image_url: https://github.com/italicize.png
+    url: https://github.com/italicize
+---
+
+# Image-only authors
+
+You can make a compact authors list without author names!

website/docs/blog.mdx

@@ -341,6 +341,8 @@ website/i18n/[locale]/docusaurus-plugin-content-blog/authors.yml
 
 :::
 
+An author, either declared through front matter or through the authors map, needs to have a name or an avatar, or both. If all authors of a post don't have names, Docusaurus will display their avatars compactly. See [this test post](/tests/blog/2022/01/20/image-only-authors) for the effect.
+
 ## Reading time {#reading-time}
 
 Docusaurus generates a reading time estimation for each blog post based on word count. We provide an option to customize this.