Add people ArchieML component

db/model/Gdoc/GdocBase.ts

@@ -554,6 +554,8 @@ export class GdocBase implements OwidGdocBaseInterface {
                         "list",
                         "missing-data",
                         "numbered-list",
+                        "people",
+                        "person",
                         "pull-quote",
                         "sdg-grid",
                         "sdg-toc",

db/model/Gdoc/enrichedToMarkdown.ts

@@ -6,6 +6,7 @@ import { getLinkType } from "@ourworldindata/components"
 import {
     OwidEnrichedGdocBlock,
     Span,
+    compact,
     excludeNullish,
     isArray,
 } from "@ourworldindata/utils"
@@ -156,6 +157,25 @@ ${items}
         .with({ type: "list" }, (b): string | undefined =>
             b.items.map((item) => `* ${spansToMarkdown(item.value)}`).join("\n")
         )
+        .with({ type: "people" }, (b): string | undefined =>
+            b.items
+                .map((item) => enrichedBlockToMarkdown(item, exportComponents))
+                .join("\n")
+        )
+        .with({ type: "person" }, (b): string | undefined => {
+            const items = [
+                b.image &&
+                    markdownComponent(
+                        "Image",
+                        { filename: b.image, alt: b.name },
+                        exportComponents
+                    ),
+                `### ${b.name}`,
+                b.title,
+                enrichedBlocksToMarkdown(b.text, exportComponents),
+            ]
+            return compact(items).join("\n")
+        })
         .with(
             { type: "pull-quote" },
             (b): string | undefined => `> ${spansToMarkdown(b.text)}`

db/model/Gdoc/enrichedToRaw.ts

@@ -44,6 +44,8 @@ import {
     RawBlockHomepageIntro,
     RawBlockLatestDataInsights,
     RawBlockSocials,
+    RawBlockPeople,
+    RawBlockPerson,
 } from "@ourworldindata/types"
 import { spanToHtmlString } from "./gdocUtils.js"
 import { match, P } from "ts-pattern"
@@ -182,6 +184,25 @@ export function enrichedBlockToRawBlock(
                 value: b.items.map((item) => spansToHtmlText(item.value)),
             })
         )
+        .with(
+            { type: "people" },
+            (b): RawBlockPeople => ({
+                type: b.type,
+                value: b.items.map(enrichedBlockToRawBlock) as RawBlockPerson[],
+            })
+        )
+        .with(
+            { type: "person" },
+            (b): RawBlockPerson => ({
+                type: "person",
+                value: {
+                    image: b.image,
+                    name: b.name,
+                    title: b.title,
+                    text: b.text.map(enrichedBlockToRawBlock) as RawBlockText[],
+                },
+            })
+        )
         .with(
             { type: "pull-quote" },
             (b): RawBlockPullQuote => ({

db/model/Gdoc/exampleEnrichedBlocks.ts

@@ -1,6 +1,7 @@
 import {
     BlockImageSize,
     EnrichedBlockChart,
+    EnrichedBlockPerson,
     EnrichedBlockText,
     HorizontalAlign,
     OwidEnrichedGdocBlock,
@@ -48,6 +49,14 @@ const enrichedChart: EnrichedBlockChart = {
     parseErrors: [],
 }
 
+const enrichedBlockPerson: EnrichedBlockPerson = {
+    type: "person",
+    image: "example.png",
+    name: "Max Roser",
+    text: [enrichedBlockText],
+    parseErrors: [],
+}
+
 export const enrichedBlockExamples: Record<
     OwidEnrichedGdocBlock["type"],
     OwidEnrichedGdocBlock
@@ -176,6 +185,12 @@ export const enrichedBlockExamples: Record<
         items: [enrichedBlockText],
         parseErrors: [],
     },
+    people: {
+        type: "people",
+        items: [enrichedBlockPerson, enrichedBlockPerson],
+        parseErrors: [],
+    },
+    person: enrichedBlockPerson,
     "pull-quote": {
         type: "pull-quote",
         text: [spanSimpleText],

db/model/Gdoc/gdocUtils.ts

@@ -174,6 +174,9 @@ export function extractFilenamesFromBlock(
             if (item.filename) filenames.add(item.filename)
             if (item.smallFilename) filenames.add(item.smallFilename)
         })
+        .with({ type: "person" }, (item) => {
+            if (item.image) filenames.add(item.image)
+        })
         .with({ type: "prominent-link" }, (item) => {
             if (item.thumbnail) filenames.add(item.thumbnail)
         })
@@ -233,6 +236,7 @@ export function extractFilenamesFromBlock(
                     "list",
                     "missing-data",
                     "numbered-list",
+                    "people",
                     "pill-row",
                     "pull-quote",
                     "recirc",

db/model/Gdoc/rawToArchie.ts

@@ -43,6 +43,8 @@ import {
     RawBlockHomepageSearch,
     RawBlockLatestDataInsights,
     RawBlockSocials,
+    RawBlockPeople,
+    RawBlockPerson,
 } from "@ourworldindata/types"
 import { isArray } from "@ourworldindata/utils"
 import { match } from "ts-pattern"
@@ -213,6 +215,33 @@ function* rawBlockNumberedListToArchieMLString(
     yield* listToArchieMLString(block.value, "numbered-list")
 }
 
+function* rawBlockPeopleToArchieMLString(
+    block: RawBlockPeople
+): Generator<string, void, undefined> {
+    yield "[.+people]"
+    if (typeof block.value !== "string") {
+        for (const b of block.value) {
+            yield* OwidRawGdocBlockToArchieMLStringGenerator(b)
+        }
+    }
+    yield "[]"
+}
+
+function* rawBlockPersonToArchieMLString(
+    block: RawBlockPerson
+): Generator<string, void, undefined> {
+    yield "{.person}"
+    yield* propertyToArchieMLString("image", block.value)
+    yield* propertyToArchieMLString("name", block.value)
+    yield* propertyToArchieMLString("title", block.value)
+    yield "[.+text]"
+    for (const b of block.value.text) {
+        yield* OwidRawGdocBlockToArchieMLStringGenerator(b)
+    }
+    yield "[]"
+    yield "{}"
+}
+
 function* rawBlockPullQuoteToArchieMLString(
     block: RawBlockPullQuote
 ): Generator<string, void, undefined> {
@@ -773,6 +802,8 @@ export function* OwidRawGdocBlockToArchieMLStringGenerator(
         .with({ type: "video" }, rawBlockVideoToArchieMLString)
         .with({ type: "list" }, rawBlockListToArchieMLString)
         .with({ type: "numbered-list" }, rawBlockNumberedListToArchieMLString)
+        .with({ type: "people" }, rawBlockPeopleToArchieMLString)
+        .with({ type: "person" }, rawBlockPersonToArchieMLString)
         .with({ type: "pull-quote" }, rawBlockPullQuoteToArchieMLString)
         .with(
             { type: "horizontal-rule" },

db/model/Gdoc/rawToEnriched.ts

@@ -120,6 +120,10 @@ import {
     SocialLinkType,
     RawBlockLatestWork,
     EnrichedBlockLatestWork,
+    RawBlockPeople,
+    EnrichedBlockPeople,
+    RawBlockPerson,
+    EnrichedBlockPerson,
 } from "@ourworldindata/types"
 import {
     traverseEnrichedSpan,
@@ -166,6 +170,8 @@ export function parseRawBlocksToEnrichedBlocks(
         .with({ type: "video" }, parseVideo)
         .with({ type: "list" }, parseList)
         .with({ type: "numbered-list" }, parseNumberedList)
+        .with({ type: "people" }, parsePeople)
+        .with({ type: "person" }, parsePerson)
         .with({ type: "pull-quote" }, parsePullQuote)
         .with(
             { type: "horizontal-rule" },
@@ -790,6 +796,50 @@ const parseList = (raw: RawBlockList): EnrichedBlockList => {
 //     return { errors, texts }
 // }
 
+const parsePerson = (raw: RawBlockPerson): EnrichedBlockPerson => {
+    const createError = (error: ParseError): EnrichedBlockPerson => ({
+        type: "person",
+        name: "",
+        text: [],
+        parseErrors: [error],
+    })
+
+    if (!raw.value?.name) {
+        return createError({ message: "Person must have a name" })
+    }
+
+    return {
+        type: "person",
+        image: raw.value.image,
+        name: raw.value.name,
+        title: raw.value.title,
+        text: raw.value.text.map(parseText),
+        parseErrors: [],
+    }
+}
+
+const parsePeople = (raw: RawBlockPeople): EnrichedBlockPeople => {
+    const createError = (
+        error: ParseError,
+        items: EnrichedBlockPerson[] = []
+    ): EnrichedBlockPeople => ({
+        type: "people",
+        items,
+        parseErrors: [error],
+    })
+
+    if (typeof raw.value === "string")
+        return createError({
+            message: "Value is a string, not a list of {.person} blocks",
+        })
+
+    return {
+        type: "people",
+        items: raw.value.map(parsePerson),
+        parseErrors: [],
+    }
+}
+
 const parsePullQuote = (raw: RawBlockPullQuote): EnrichedBlockPullQuote => {
     const createError = (
         error: ParseError,

packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts

@@ -245,6 +245,34 @@ export type EnrichedBlockNumberedList = {
     items: EnrichedBlockText[]
 } & EnrichedBlockWithParseErrors
 
+export type RawBlockPeople = {
+    type: "people"
+    value: RawBlockPerson[] | ArchieMLUnexpectedNonObjectValue
+}
+
+export type RawBlockPerson = {
+    type: "person"
+    value: {
+        image?: string
+        name: string
+        title?: string
+        text: RawBlockText[]
+    }
+}
+
+export type EnrichedBlockPeople = {
+    type: "people"
+    items: EnrichedBlockPerson[]
+} & EnrichedBlockWithParseErrors
+
+export type EnrichedBlockPerson = {
+    type: "person"
+    image?: string
+    name: string
+    title?: string
+    text: EnrichedBlockText[]
+} & EnrichedBlockWithParseErrors
+
 export type RawBlockPullQuote = {
     type: "pull-quote"
     value: OwidRawGdocBlock[] | ArchieMLUnexpectedNonObjectValue
@@ -887,6 +915,8 @@ export type OwidRawGdocBlock =
     | RawBlockImage
     | RawBlockVideo
     | RawBlockList
+    | RawBlockPeople
+    | RawBlockPerson
     | RawBlockPullQuote
     | RawBlockRecirc
     | RawBlockResearchAndWriting
@@ -933,6 +963,8 @@ export type OwidEnrichedGdocBlock =
     | EnrichedBlockImage
     | EnrichedBlockVideo
     | EnrichedBlockList
+    | EnrichedBlockPeople
+    | EnrichedBlockPerson
     | EnrichedBlockPullQuote
     | EnrichedBlockRecirc
     | EnrichedBlockResearchAndWriting

packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts

@@ -205,7 +205,7 @@ export interface OwidGdocAuthorInterface extends OwidGdocBaseInterface {
 export interface OwidGdocAboutContent {
     type: OwidGdocType.AboutPage
     title: string
-    excerpt: string
+    excerpt?: string
     "featured-image"?: string
     authors: string[]
     body: OwidEnrichedGdocBlock[]

packages/@ourworldindata/types/src/index.ts

@@ -184,6 +184,8 @@ export {
     type RawBlockList,
     type RawBlockMissingData,
     type RawBlockNumberedList,
+    type RawBlockPeople,
+    type RawBlockPerson,
     type RawBlockPosition,
     type RawBlockProminentLink,
     type RawBlockPullQuote,
@@ -237,6 +239,8 @@ export {
     type EnrichedBlockList,
     type EnrichedBlockMissingData,
     type EnrichedBlockNumberedList,
+    type EnrichedBlockPeople,
+    type EnrichedBlockPerson,
     type EnrichedBlockProminentLink,
     type EnrichedBlockPullQuote,
     type EnrichedBlockRecirc,

packages/@ourworldindata/utils/src/Util.ts

@@ -1664,6 +1664,18 @@ export function traverseEnrichedBlock(
                 )
             }
         )
+        .with({ type: "people" }, (people) => {
+            callback(people)
+            for (const item of people.items) {
+                traverseEnrichedBlock(item, callback, spanCallback)
+            }
+        })
+        .with({ type: "person" }, (person) => {
+            callback(person)
+            for (const node of person.text) {
+                traverseEnrichedBlock(node, callback, spanCallback)
+            }
+        })
         .with(
             {
                 type: P.union(

site/gdocs/OwidGdoc.tsx

@@ -9,6 +9,7 @@ import {
     RelatedChart,
     OwidGdocType,
     OwidGdoc as OwidGdocInterface,
+    OwidGdocAboutInterface,
     OwidGdocMinimalPostInterface,
     OwidGdocHomepageMetadata,
     DbEnrichedLatestWork,
@@ -87,7 +88,7 @@ export function OwidGdoc({
             (props) => <GdocPost {...props} />
         )
         .with({ content: { type: OwidGdocType.AboutPage } }, (props) => (
-            <AboutPage {...props} />
+            <AboutPage {...(props as OwidGdocAboutInterface)} />
         ))
         .with({ content: { type: OwidGdocType.DataInsight } }, (props) => (
             <DataInsightPage {...props} />