From 1a3042697a1793ef0c61ff1d3cb5b3ebe7b4ccf0 Mon Sep 17 00:00:00 2001
From: ozakione <29860391+OzakIOne@users.noreply.github.com>
Date: Tue, 20 Aug 2024 21:22:49 +0200
Subject: [PATCH] feat: poc generated image

---
 .../src/theme-classic.d.ts                    | 10 +++
 .../Author/GeneratedImage/index.tsx           | 65 +++++++++++++++++++
 .../Author/GeneratedImage/styles.module.css   | 11 ++++
 .../theme/Blog/Components/Author/index.tsx    |  9 ++-
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx
 create mode 100644 packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css

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..ce6d8a0893c5
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/index.tsx
@@ -0,0 +1,65 @@
+/**
+ * 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';
+import styles from './styles.module.css';
+
+const hashString = (str: string) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    hash = (hash + str.charCodeAt(i) * (i + 1)) % 1000;
+  }
+  return hash;
+};
+
+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 {
+  const gradientId = `grad-${link}`;
+
+  const hashName = hashString(name);
+  const primaryColor = `hsl(${hashName % 360}, 95%, 50%)`;
+  const secondaryColor = `hsl(${(hashName + 120) % 360}, 95%, 50%)`;
+
+  return (
+    <MaybeLink href={link} className="avatar__photo-link">
+      <svg
+        className={clsx('avatar__photo-link', styles.authorSvg, className)}
+        viewBox="0 0 72 72"
+        xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stopColor={primaryColor} />
+            <stop offset="100%" stopColor={secondaryColor} />
+          </linearGradient>
+        </defs>
+        <circle cx="36" cy="36" r="36" fill={`url(#${gradientId})`} />
+        <text
+          x="50%"
+          y="50%"
+          textAnchor="middle"
+          alignmentBaseline="central"
+          fontSize="2rem"
+          fill="#fff">
+          {name![0]?.toLocaleUpperCase()}
+        </text>
+      </svg>
+    </MaybeLink>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css
new file mode 100644
index 000000000000..f7910281aa10
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.authorSvg {
+  width: var(--ifm-avatar-photo-size);
+  height: var(--ifm-avatar-photo-size);
+}
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 5861b3da8091..1a1153d00963 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 ? (
         <MaybeLink href={link} className="avatar__photo-link">
           <img
             className={clsx('avatar__photo', styles.authorImage)}
@@ -73,6 +74,12 @@ export default function BlogAuthor({
             alt={name}
           />
         </MaybeLink>
+      ) : (
+        <GeneratedImage
+          name={name!}
+          link={link}
+          className={clsx(styles.authorImage)}
+        />
       )}
 
       {(name || title) && (