From 391f42946367333c3971c719833852a0248662ff Mon Sep 17 00:00:00 2001
From: ozakione <29860391+OzakIOne@users.noreply.github.com>
Date: Thu, 22 Aug 2024 16:46:03 +0200
Subject: [PATCH] refactor

---
 .../Blog/Components/Author/GeneratedImage/index.tsx   | 11 ++++++++---
 .../Author/GeneratedImage/styles.module.css           | 11 -----------
 .../theme/Blog/Components/Author/styles.module.css    |  1 +
 website/_dogfooding/_blog tests/authors.yml           |  8 ++++++++
 4 files changed, 17 insertions(+), 14 deletions(-)
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css

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 35f56b679c48..fea99c75ad8c 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
@@ -9,7 +9,6 @@ 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';
 
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
@@ -26,10 +25,16 @@ export default function GeneratedImage({
   return (
     <MaybeLink href={link} className="avatar__photo-link">
       <svg
-        className={clsx('avatar__photo-link', styles.authorSvg, className)}
+        className={clsx('avatar__photo', className)}
         viewBox="0 0 72 72"
         xmlns="http://www.w3.org/2000/svg">
-        <circle cx="36" cy="36" r="36" fill="grey" />
+        <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%"
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
deleted file mode 100644
index f7910281aa10..000000000000
--- a/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/GeneratedImage/styles.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * 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/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/styles.module.css
index a23a2b3ba80e..3d0fc01ec619 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,6 +7,7 @@
 
 .authorImage {
   --ifm-avatar-photo-size: 3.6rem;
+  background: grey;
 }
 
 .author-as-h1 .authorImage {
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