From 3f7e9baa2fcefffb08e5ffb520064ac766e0da64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Tue, 7 Jan 2025 15:25:46 +0100
Subject: [PATCH] Make links to author pages more discoverable

- Add underline on hover to person's name
- Link also from the person's image
---
 site/gdocs/components/Person.scss |  4 ++++
 site/gdocs/components/Person.tsx  | 16 ++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
index d6db0c63fe..94dee7d4c7 100644
--- a/site/gdocs/components/Person.scss
+++ b/site/gdocs/components/Person.scss
@@ -45,6 +45,10 @@
 
     a {
         color: inherit;
+
+        &:hover {
+            text-decoration: underline;
+        }
     }
 }
 
diff --git a/site/gdocs/components/Person.tsx b/site/gdocs/components/Person.tsx
index 915e461e1d..b3816d17c0 100644
--- a/site/gdocs/components/Person.tsx
+++ b/site/gdocs/components/Person.tsx
@@ -31,16 +31,20 @@ export default function Person({ person }: { person: EnrichedBlockPerson }) {
         </div>
     )
 
+    const image = person.image ? (
+        <Image
+            className="person-image"
+            filename={person.image}
+            containerType="person"
+            shouldLightbox={false}
+        />
+    ) : null
+
     return (
         <div className="person">
             {person.image && (
                 <div className="person-image-container">
-                    <Image
-                        className="person-image"
-                        filename={person.image}
-                        containerType="person"
-                        shouldLightbox={false}
-                    />
+                    {url ? <a href={url}>{image}</a> : image}
                     {isSmallScreen && header}
                 </div>
             )}