diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index e0d5f47a8e13..0799f01369a8 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -209,6 +209,16 @@ declare module '@theme/Blog/Components/Author/Socials' {
export default function BlogAuthorSocials(props: Props): JSX.Element;
}
+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 {BlogPaginatedMetadata} from '@docusaurus/plugin-content-blog';
diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx
new file mode 100644
index 000000000000..9c2076840ab2
--- /dev/null
+++ b/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 (
+
+ {name[0]?.toLocaleUpperCase()}
+
+ );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx
index 301a7b77905b..a56217920203 100644
--- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/index.tsx
+++ b/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): JSX.Element {
@@ -65,7 +66,7 @@ export default function BlogAuthor({
className,
styles[`author-as-${as}`],
)}>
- {imageURL && (
+ {imageURL ? (
+ ) : (
+
+
+
)}
{(name || title) && (
diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css
index a23a2b3ba80e..a2f928b1e066 100644
--- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css
+++ b/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;
}
diff --git a/website/_dogfooding/_blog tests/authors.yml b/website/_dogfooding/_blog tests/authors.yml
index 040b9899ee19..5c84012b8c8b 100644
--- a/website/_dogfooding/_blog tests/authors.yml
+++ b/website/_dogfooding/_blog tests/authors.yml
@@ -9,3 +9,11 @@ slorber:
ozaki:
name: ozaki
page: {permalink: '/custom/ozaki/permalink'}
+
+john:
+ name: John Doe
+ page: true
+
+bob:
+ name: Bob Smith
+ page: true