Merge ee4a5f8c09 into 7f5d6122d2

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -221,6 +221,16 @@ declare module '@theme/Blog/Components/Author/Socials' {
   export default function BlogAuthorSocials(props: Props): ReactNode;
 }
 
+declare module '@theme/Blog/Components/Author/GeneratedImage' {
+  export interface Props {
+    readonly name: string;
+    readonly link?: string;
+    readonly className?: string;
+  }
+
+  export default function GeneratedImage(props: Props): JSX.Element;
+}
+
 declare module '@theme/BlogListPaginator' {
   import type {ReactNode} from 'react';
   import type {BlogPaginatedMetadata} from '@docusaurus/plugin-content-blog';

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/Blog/Components/Author/GeneratedImage';
+
+export default function GeneratedImage({name, className}: Props): JSX.Element {
+  return (
+    <div className={clsx('avatar__photo', className)}>
+      {name[0]?.toLocaleUpperCase()}
+    </div>
+  );
+}

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx

@@ -11,6 +11,7 @@ import Link, {type Props as LinkProps} from '@docusaurus/Link';
 import AuthorSocials from '@theme/Blog/Components/Author/Socials';
 import type {Props} from '@theme/Blog/Components/Author';
 import Heading from '@theme/Heading';
+import GeneratedImage from '@theme/Blog/Components/Author/GeneratedImage';
 import styles from './styles.module.css';
 
 function MaybeLink(props: LinkProps): ReactNode {
@@ -69,7 +70,7 @@ export default function BlogAuthor({
         className,
         styles[`author-as-${as}`],
       )}>
-      {imageURL && (
+      {imageURL ? (
         <MaybeLink href={link} className="avatar__photo-link">
           <img
             className={clsx('avatar__photo', styles.authorImage)}
@@ -77,6 +78,14 @@ export default function BlogAuthor({
             alt={name}
           />
         </MaybeLink>
+      ) : (
+        <MaybeLink href={link} className="avatar__photo-link">
+          <GeneratedImage
+            name={name!}
+            link={link}
+            className={clsx(styles.authorImage, styles.authorGeneratedImage)}
+          />
+        </MaybeLink>
       )}
 
       {(name || title) && (

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

@@ -7,12 +7,34 @@
 
 .authorImage {
   --ifm-avatar-photo-size: 3.6rem;
+  background: var(--ifm-color-emphasis-200);
 }
 
 .author-as-h1 .authorImage {
   --ifm-avatar-photo-size: 7rem;
 }
 
+.authorGeneratedImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ifm-color-emphasis-0);
+  font-size: 2rem;
+  background: linear-gradient(
+    135deg,
+    var(--ifm-color-emphasis-700) 0%,
+    var(--ifm-color-emphasis-1000) 100%
+  );
+}
+
+[data-theme='dark'] .authorGeneratedImage {
+  background: linear-gradient(
+    135deg,
+    var(--ifm-color-emphasis-800) 0%,
+    var(--ifm-color-emphasis-200) 100%
+  );
+}
+
 .author-as-h2 .authorImage {
   --ifm-avatar-photo-size: 5.4rem;
 }

website/_dogfooding/_blog tests/authors.yml

@@ -11,3 +11,11 @@ slorber:
 ozaki:
   name: ozaki
   page: {permalink: '/custom/ozaki/permalink'}
+
+john:
+  name: John Doe
+  page: true
+
+bob:
+  name: Bob Smith
+  page: true