From 587f6d9ba2466586e0c94566da455e37448f0188 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Tue, 17 Dec 2024 15:12:51 +0100
Subject: [PATCH] Add optional url to person block

---
 db/model/Gdoc/GdocBase.ts                     | 12 ++++++++++-
 db/model/Gdoc/rawToEnriched.ts                |  1 +
 .../types/src/gdocTypes/ArchieMlComponents.ts |  2 ++
 site/gdocs/components/Person.scss             |  4 ++++
 site/gdocs/components/Person.tsx              | 21 +++++++++++++++----
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/db/model/Gdoc/GdocBase.ts b/db/model/Gdoc/GdocBase.ts
index 5e7a0fb7a33..e2f847524e5 100644
--- a/db/model/Gdoc/GdocBase.ts
+++ b/db/model/Gdoc/GdocBase.ts
@@ -312,6 +312,17 @@ export class GdocBase implements OwidGdocBaseInterface {
         block: OwidEnrichedGdocBlock
     ): DbInsertPostGdocLink[] | void {
         const links: DbInsertPostGdocLink[] = match(block)
+            .with({ type: "person" }, (block) => {
+                if (!block.url) return []
+                return [
+                    createLinkFromUrl({
+                        url: block.url,
+                        source: this,
+                        componentType: block.type,
+                        text: block.name,
+                    }),
+                ]
+            })
             .with({ type: "prominent-link" }, (block) => [
                 createLinkFromUrl({
                     url: block.url,
@@ -559,7 +570,6 @@ export class GdocBase implements OwidGdocBaseInterface {
                         "numbered-list",
                         "people",
                         "people-rows",
-                        "person",
                         "pull-quote",
                         "sdg-grid",
                         "sdg-toc",
diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
index 2585f2e5994..f4b1fab499f 100644
--- a/db/model/Gdoc/rawToEnriched.ts
+++ b/db/model/Gdoc/rawToEnriched.ts
@@ -847,6 +847,7 @@ const parsePerson = (raw: RawBlockPerson): EnrichedBlockPerson => {
         image: raw.value.image,
         name: raw.value.name,
         title: raw.value.title,
+        url: extractUrl(raw.value.url),
         text: raw.value.text.map(parseText),
         socials: raw.value.socials?.map(parseSocialLink),
         parseErrors: [],
diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
index 082af863238..cbb50d10c51 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
@@ -284,6 +284,7 @@ export type RawBlockPerson = {
         image?: string
         name: string
         title?: string
+        url?: string
         text: RawBlockText[]
         socials?: RawSocialLink[]
     }
@@ -305,6 +306,7 @@ export type EnrichedBlockPerson = {
     image?: string
     name: string
     title?: string
+    url?: string
     text: EnrichedBlockText[]
     socials?: EnrichedSocialLink[]
 } & EnrichedBlockWithParseErrors
diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
index 26ad65283a4..deeb99874ec 100644
--- a/site/gdocs/components/Person.scss
+++ b/site/gdocs/components/Person.scss
@@ -39,6 +39,10 @@
     flex-direction: column;
     gap: 2px;
     margin-bottom: 8px;
+
+    a {
+        color: inherit;
+    }
 }
 
 .person-heading {
diff --git a/site/gdocs/components/Person.tsx b/site/gdocs/components/Person.tsx
index e3c9f93dbc9..205081f311e 100644
--- a/site/gdocs/components/Person.tsx
+++ b/site/gdocs/components/Person.tsx
@@ -1,18 +1,31 @@
 import * as React from "react"
+import { useMediaQuery } from "usehooks-ts"
 
-import { EnrichedBlockPerson } from "@ourworldindata/types"
+import { getCanonicalUrl } from "@ourworldindata/components"
+import { EnrichedBlockPerson, OwidGdocType } from "@ourworldindata/types"
+import { SMALL_BREAKPOINT_MEDIA_QUERY } from "../../SiteConstants.js"
+import { useLinkedDocument } from "../utils.js"
 import { ArticleBlocks } from "./ArticleBlocks.js"
 import Image from "./Image.js"
-import { useMediaQuery } from "usehooks-ts"
-import { SMALL_BREAKPOINT_MEDIA_QUERY } from "../../SiteConstants.js"
 import { Socials } from "./Socials.js"
 
 export default function Person({ person }: { person: EnrichedBlockPerson }) {
+    const { linkedDocument } = useLinkedDocument(person.url ?? "")
     const isSmallScreen = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY)
 
+    const slug = linkedDocument?.slug
+    const url = slug
+        ? getCanonicalUrl("", {
+              slug,
+              content: { type: OwidGdocType.Author },
+          })
+        : undefined
+
+    const heading = <h3 className="person-heading h2-bold">{person.name}</h3>
+
     const header = (
         <div className="person-header">
-            <h3 className="person-heading h2-bold">{person.name}</h3>
+            {url ? <a href={url}>{heading}</a> : heading}
             {person.title && (
                 <span className="person-title">{person.title}</span>
             )}