From ee4a5f8c09662fd4918a14b9da8467a35bab2ca1 Mon Sep 17 00:00:00 2001
From: ozakione <29860391+OzakIOne@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:13:41 +0200
Subject: [PATCH] refactor review

---
 .../Author/GeneratedImage/index.tsx           | 40 ++-----------------
 .../theme/Blog/Components/Author/index.tsx    | 12 +++---
 .../Blog/Components/Author/styles.module.css  | 23 ++++++++++-
 3 files changed, 33 insertions(+), 42 deletions(-)

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
index fea99c75ad8c..9c2076840ab2 100644
--- 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
@@ -7,44 +7,12 @@
 
 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 {
+export default function GeneratedImage({name, 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>
+    <div className={clsx('avatar__photo', className)}>
+      {name[0]?.toLocaleUpperCase()}
+    </div>
   );
 }
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 93665396a7e7..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
@@ -75,11 +75,13 @@ export default function BlogAuthor({
           />
         </MaybeLink>
       ) : (
-        <GeneratedImage
-          name={name!}
-          link={link}
-          className={clsx(styles.authorImage)}
-        />
+        <MaybeLink href={link} className="avatar__photo-link">
+          <GeneratedImage
+            name={name!}
+            link={link}
+            className={clsx(styles.authorImage, styles.authorGeneratedImage)}
+          />
+        </MaybeLink>
       )}
 
       {(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 3d0fc01ec619..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,13 +7,34 @@
 
 .authorImage {
   --ifm-avatar-photo-size: 3.6rem;
-  background: grey;
+  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;
 }