feat: author description

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

@@ -256,16 +256,7 @@ describe('blog plugin', () => {
           permalink: '/blog/tags/global-tag-permalink (en)',
         },
       ],
-      pageAuthors: [
-        {
-          email: '[email protected]',
-          name: 'Sébastien Lorber (translated)',
-          permalink: '/blog/authors/slorber',
-          title: 'Docusaurus maintainer (translated)',
-          key: 'slorber',
-          url: undefined,
-        },
-      ],
+      pageAuthors: [],
       prevItem: {
         permalink: '/blog/date-matter',
         title: 'date-matter',

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

@@ -27,6 +27,7 @@ const AuthorsMapSchema = Joi.object<AuthorsMap>()
       email: Joi.string(),
       generateAuthorPage: Joi.bool(),
       permalink: Joi.string(),
+      description: Joi.string(),
     })
       .rename('image_url', 'imageURL')
       .or('name', 'imageURL')

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

@@ -164,13 +164,8 @@ export function getBlogPageAuthors({
       isUnlisted: (item: BlogPost) => item.metadata.unlisted,
     });
     return {
-      name: author.name,
-      url: author.url,
-      title: author.title,
-      email: author.email,
-      key: author.key,
+      ...author,
       items: authorVisibility.listedItems.map((item: BlogPost) => item.id),
-      permalink: author.permalink,
       pages: author.permalink
         ? paginateBlogPosts({
             blogPosts: authorVisibility.listedItems,
@@ -376,11 +371,9 @@ async function processBlogSourceFile(
   });
 
   const authors = getBlogPostAuthors({authorsMap, frontMatter, baseUrl});
-  const authorsBaseRoutePath = normalizeUrl([
-    baseUrl,
-    routeBasePath,
-    options.authorsPageBasePath,
-  ]);
+  const authorsBaseRoutePath = options.authorsPageBasePath
+    ? normalizeUrl([baseUrl, routeBasePath, options.authorsPageBasePath])
+    : '';
 
   const pageAuthors = normalizeFrontMatterPageAuthors(
     authorsBaseRoutePath,

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

@@ -53,13 +53,8 @@ export function toPageAuthorsProp({
   return Object.values(blogPageAuthors)
     .filter((author) => !author.unlisted)
     .map((author) => ({
-      name: author.name,
-      permalink: author.permalink,
+      ...author,
       count: author.items.length,
-      url: author.url,
-      email: author.email,
-      title: author.title,
-      key: author.key,
     }));
 }
 
@@ -71,14 +66,8 @@ export function toPageAuthorProp({
   author: BlogPageAuthor;
 }): AuthorModule {
   return {
-    name: author.name,
-    permalink: author.permalink,
+    ...author,
     allAuthorsPath: blogAuthorsListPath,
     count: author.items.length,
-    unlisted: author.unlisted,
-    url: author.url,
-    email: author.email,
-    title: author.title,
-    key: author.key,
   };
 }

packages/docusaurus-theme-classic/src/theme/BlogAuthorPage/Author/index.tsx

@@ -12,14 +12,26 @@ import type {Props} from '@theme/BlogAuthorPage/Author';
 
 import styles from './styles.module.css';
 
-export default function Author({permalink, name, count}: Props): JSX.Element {
+export default function Author({
+  permalink,
+  name,
+  count,
+  imageURL,
+}: Props): JSX.Element {
   return (
     <Link
       href={permalink}
       className={clsx(
         styles.author,
         count ? styles.authorWithCount : styles.authorRegular,
       )}>
+      {imageURL && (
+        <img
+          className={clsx('avatar__photo', styles.authorImage)}
+          src={imageURL}
+          alt={name}
+        />
+      )}
       {name}
       {count && <span>{count}</span>}
     </Link>

packages/docusaurus-theme-classic/src/theme/BlogAuthorPage/Author/styles.module.css

@@ -68,3 +68,8 @@
   padding: 0.1rem 0.4rem;
   margin-left: 0.3rem;
 }
+
+.authorImage {
+  width: 1.5rem;
+  height: 1.5rem;
+}

packages/docusaurus-theme-classic/src/theme/BlogAuthorPage/BlogAuthorsPostsPage/index.tsx

@@ -76,17 +76,12 @@ function BlogAuthorsPostsPageContent({
       <header className="margin-bottom--xl">
         <Heading as="h1">{title}</Heading>
         <ul>
-          {author.title && <li>{author.title}</li>}
-          {author.email && (
-            <li>
-              <Link href={`mailto:${author.email}`}>{author.email}</Link>
-            </li>
-          )}
           {author.url && (
             <li>
               <Link href={author.url}>Personal website</Link>
             </li>
           )}
+          {author.description && <li>{author.description}</li>}
         </ul>
         <Link href={author.allAuthorsPath}>
           <Translate

packages/docusaurus-theme-common/src/utils/authorsUtils.ts

@@ -10,9 +10,9 @@ import type {AuthorsListItem} from '@docusaurus/utils';
 
 export const translateAuthorsPageTitle = (): string =>
   translate({
-    id: 'theme.tags.tagsPageTitle',
-    message: 'Tags',
-    description: 'The title of the tag list page',
+    id: 'theme.authors.authorsPageTitle',
+    message: 'Authors',
+    description: 'The title of the author list page',
   });
 
 export type AuthorLetterEntry = {

packages/docusaurus-theme-translations/locales/base/theme-common.json

@@ -139,6 +139,7 @@
   "theme.tags.tagsPageTitle": "Tags",
   "theme.tags.tagsPageTitle___DESCRIPTION": "The title of the tag list page",
   "theme.authors.authorsPageLink": "View All Authors",
+  "theme.authors.authorsPageTitle": "Authors",
   "theme.blog.authorTitle": "{nPosts} contributed by \"{authorName}\"",
   "theme.unlistedContent.message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
   "theme.unlistedContent.message___DESCRIPTION": "The unlisted content banner message",

packages/docusaurus-utils/src/authors.ts

@@ -35,6 +35,8 @@ export type Author = {
   // TODO add description
   generateAuthorPage?: boolean;
   permalink?: string;
+  description?: string;
+
   /**
    * Unknown keys are allowed, so that we can pass custom fields to authors,
    * e.g., `twitter`.
@@ -48,7 +50,9 @@ export type PageAuthor = {
   /** Permalink to this author's page, without the `/authors/` base path. */
   permalink: string;
 
+  imageURL: string | undefined;
   key: string | undefined;
+  description: string | undefined;
   title: string | undefined;
   email: string | undefined;
   url: string | undefined;
@@ -93,6 +97,8 @@ function normalizeFrontMatterAuthor(
       title: undefined,
       email: undefined,
       key: authorString,
+      description: undefined,
+      imageURL: undefined,
     };
   }
 
@@ -111,6 +117,8 @@ function normalizeFrontMatterAuthor(
     title: author.title,
     email: author.email,
     key: author.key,
+    description: author.description,
+    imageURL: author.imageURL,
   };
 }
 
@@ -136,12 +144,14 @@ export function normalizeFrontMatterPageAuthors(
       name: author.name || (author.key as string),
       url: author.url,
       title: author.title,
+      description: author.description,
       email: author.email,
       // TODO investigate if the user put a key in file what will happen
       key: author.key as string,
       permalink: author.permalink
         ? author.permalink
         : _.kebabCase(author.key as string),
+      imageURL: author.imageURL,
     }));
 
   const authors = pageAuthors.map((author) =>

website/blog/authors.yml

@@ -25,6 +25,9 @@ slorber:
   github: slorber
   email: [email protected]
   generateAuthorPage: true
+  description: >
+    A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.
+
 
 yangshun:
   name: Yangshun Tay