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} + ) : ( + + + )} {(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