Add optional url to person block

owid · Dec 17, 2024 · 587f6d9 · 587f6d9
1 parent 119e14e
commit 587f6d9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
             )}