refactor review

facebook · Aug 26, 2024 · ee4a5f8 · ee4a5f8
1 parent 1686134
commit ee4a5f8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 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
@@ -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
@@ -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
@@ -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;
 }