feat: poc generated image

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';
 

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

@@ -0,0 +1,50 @@
+/**
+ * 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 Link, {type Props as LinkProps} from '@docusaurus/Link';
+import type {Props} from '@theme/Blog/Components/Author/GeneratedImage';
+
+function MaybeLink(props: LinkProps): JSX.Element {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+
+export default function GeneratedImage({
+  name,
+  link,
+  className,
+}: Props): JSX.Element {
+  return (
+    <MaybeLink href={link} className="avatar__photo-link">
+      <svg
+        className={clsx('avatar__photo', className)}
+        viewBox="0 0 72 72"
+        xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="greyGradient" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" style={{stopColor: '#ccc', stopOpacity: 1}} />
+            <stop offset="100%" style={{stopColor: '#777', stopOpacity: 1}} />
+          </linearGradient>
+        </defs>
+        <circle cx="36" cy="36" r="36" fill="url(#greyGradient)" />
+        <text
+          x="50%"
+          y="50%"
+          textAnchor="middle"
+          alignmentBaseline="central"
+          fontSize="2rem"
+          fill="#fff">
+          {name[0]?.toLocaleUpperCase()}
+        </text>
+      </svg>
+    </MaybeLink>
+  );
+}

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,14 +66,20 @@ 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)}
             src={imageURL}
             alt={name}
           />
         </MaybeLink>
+      ) : (
+        <GeneratedImage
+          name={name!}
+          link={link}
+          className={clsx(styles.authorImage)}
+        />
       )}
 
       {(name || title) && (

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

@@ -7,6 +7,7 @@
 
 .authorImage {
   --ifm-avatar-photo-size: 3.6rem;
+  background: grey;
 }
 
 .author-as-h1 .authorImage {

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