Add people-rows ArchieML component (#4235)

* The new component allows us to have rows of people in two columns
* Add socials to person block

db/gdocTests.test.ts

@@ -294,6 +294,7 @@ level: 2
                     url: "mailto:[email protected]",
                     text: "Edouard's email",
                     type: SocialLinkType.Email,
+                    parseErrors: [],
                 },
             ],
             parseErrors: [],

db/model/Gdoc/GdocBase.ts

@@ -555,6 +555,7 @@ export class GdocBase implements OwidGdocBaseInterface {
                         "missing-data",
                         "numbered-list",
                         "people",
+                        "people-rows",
                         "person",
                         "pull-quote",
                         "sdg-grid",

db/model/Gdoc/enrichedToMarkdown.ts

@@ -162,6 +162,11 @@ ${items}
                 .map((item) => enrichedBlockToMarkdown(item, exportComponents))
                 .join("\n")
         )
+        .with({ type: "people-rows" }, (b): string | undefined =>
+            b.people
+                .map((item) => enrichedBlockToMarkdown(item, exportComponents))
+                .join("\n")
+        )
         .with({ type: "person" }, (b): string | undefined => {
             const items = [
                 b.image &&

db/model/Gdoc/enrichedToRaw.ts

@@ -45,6 +45,7 @@ import {
     RawBlockLatestDataInsights,
     RawBlockSocials,
     RawBlockPeople,
+    RawBlockPeopleRows,
     RawBlockPerson,
 } from "@ourworldindata/types"
 import { spanToHtmlString } from "./gdocUtils.js"
@@ -191,6 +192,18 @@ export function enrichedBlockToRawBlock(
                 value: b.items.map(enrichedBlockToRawBlock) as RawBlockPerson[],
             })
         )
+        .with(
+            { type: "people-rows" },
+            (b): RawBlockPeopleRows => ({
+                type: b.type,
+                value: {
+                    columns: b.columns,
+                    people: b.people.map(
+                        enrichedBlockToRawBlock
+                    ) as RawBlockPerson[],
+                },
+            })
+        )
         .with(
             { type: "person" },
             (b): RawBlockPerson => ({
@@ -549,7 +562,11 @@ export function enrichedBlockToRawBlock(
         .with({ type: "socials" }, (b): RawBlockSocials => {
             return {
                 type: "socials",
-                value: b.links,
+                value: b.links.map(({ url, text, type }) => ({
+                    url,
+                    text,
+                    type,
+                })),
             }
         })
         .exhaustive()

db/model/Gdoc/exampleEnrichedBlocks.ts

@@ -190,6 +190,12 @@ export const enrichedBlockExamples: Record<
         items: [enrichedBlockPerson, enrichedBlockPerson],
         parseErrors: [],
     },
+    "people-rows": {
+        type: "people-rows",
+        columns: "2",
+        people: [enrichedBlockPerson, enrichedBlockPerson],
+        parseErrors: [],
+    },
     person: enrichedBlockPerson,
     "pull-quote": {
         type: "pull-quote",
@@ -672,18 +678,20 @@ export const enrichedBlockExamples: Record<
                 url: "https://twitter.com/OurWorldInData",
                 text: "@OurWorldInData",
                 type: SocialLinkType.X,
+                parseErrors: [],
             },
             {
                 url: "https://facebook.com/OurWorldInData",
                 text: "OurWorldInData",
                 type: SocialLinkType.Facebook,
+                parseErrors: [],
             },
             {
                 url: "https://ourworldindata.org",
                 text: "ourworldindata.org",
+                parseErrors: [],
             },
         ],
-
         parseErrors: [],
     },
 }

db/model/Gdoc/gdocUtils.ts

@@ -237,6 +237,7 @@ export function extractFilenamesFromBlock(
                     "missing-data",
                     "numbered-list",
                     "people",
+                    "people-rows",
                     "pill-row",
                     "pull-quote",
                     "recirc",

db/model/Gdoc/rawToArchie.ts

@@ -44,6 +44,7 @@ import {
     RawBlockLatestDataInsights,
     RawBlockSocials,
     RawBlockPeople,
+    RawBlockPeopleRows,
     RawBlockPerson,
 } from "@ourworldindata/types"
 import { isArray } from "@ourworldindata/utils"
@@ -227,6 +228,21 @@ function* rawBlockPeopleToArchieMLString(
     yield "[]"
 }
 
+function* rawBlockPeopleRowsToArchieMLString(
+    block: RawBlockPeopleRows
+): Generator<string, void, undefined> {
+    yield "{.people-rows}"
+    yield* propertyToArchieMLString("columns", block.value)
+    yield "[.+people]"
+    if (typeof block.value.people !== "string") {
+        for (const person of block.value.people) {
+            yield* OwidRawGdocBlockToArchieMLStringGenerator(person)
+        }
+    }
+    yield "[]"
+    yield "{}"
+}
+
 function* rawBlockPersonToArchieMLString(
     block: RawBlockPerson
 ): Generator<string, void, undefined> {
@@ -803,6 +819,7 @@ export function* OwidRawGdocBlockToArchieMLStringGenerator(
         .with({ type: "list" }, rawBlockListToArchieMLString)
         .with({ type: "numbered-list" }, rawBlockNumberedListToArchieMLString)
         .with({ type: "people" }, rawBlockPeopleToArchieMLString)
+        .with({ type: "people-rows" }, rawBlockPeopleRowsToArchieMLString)
         .with({ type: "person" }, rawBlockPersonToArchieMLString)
         .with({ type: "pull-quote" }, rawBlockPullQuoteToArchieMLString)
         .with(

db/model/Gdoc/rawToEnriched.ts

@@ -114,6 +114,7 @@ import {
     EnrichedBlockHomepageIntro,
     RawBlockHomepageIntro,
     EnrichedBlockHomepageIntroPost,
+    RawSocialLink,
     RawBlockSocials,
     EnrichedBlockSocials,
     EnrichedSocialLink,
@@ -124,6 +125,8 @@ import {
     EnrichedBlockPeople,
     RawBlockPerson,
     EnrichedBlockPerson,
+    RawBlockPeopleRows,
+    EnrichedBlockPeopleRows,
 } from "@ourworldindata/types"
 import {
     traverseEnrichedSpan,
@@ -171,6 +174,7 @@ export function parseRawBlocksToEnrichedBlocks(
         .with({ type: "list" }, parseList)
         .with({ type: "numbered-list" }, parseNumberedList)
         .with({ type: "people" }, parsePeople)
+        .with({ type: "people-rows" }, parsePeopleRows)
         .with({ type: "person" }, parsePerson)
         .with({ type: "pull-quote" }, parsePullQuote)
         .with(
@@ -808,12 +812,23 @@ const parsePerson = (raw: RawBlockPerson): EnrichedBlockPerson => {
         return createError({ message: "Person must have a name" })
     }
 
+    console.log("value", raw.value)
     return {
         type: "person",
         image: raw.value.image,
         name: raw.value.name,
         title: raw.value.title,
         text: raw.value.text.map(parseText),
+        socials: raw.value.socials?.map(parseSocialLink),
+        parseErrors: [],
+    }
+}
+
+const parsePeopleRows = (raw: RawBlockPeopleRows): EnrichedBlockPeopleRows => {
+    return {
+        type: "people-rows",
+        columns: raw.value.columns,
+        people: raw.value.people.map(parsePerson),
         parseErrors: [],
     }
 }
@@ -2310,6 +2325,44 @@ function parseHomepageIntro(
     }
 }
 
+export const parseSocialLink = (raw: RawSocialLink): EnrichedSocialLink => {
+    const createError = (error: ParseError): EnrichedSocialLink => ({
+        url: "",
+        text: "",
+        type: undefined,
+        parseErrors: [error],
+    })
+
+    const url = extractUrl(raw.url)
+    if (!url) {
+        return createError({
+            message: "Link is missing a url",
+        })
+    }
+    if (!raw.text) {
+        return createError({
+            message: "Link is missing text",
+        })
+    }
+    if (raw.type && Object.values(SocialLinkType).indexOf(raw.type) === -1) {
+        return createError({
+            message: `Link type must be one of ${Object.values(
+                SocialLinkType
+            ).join(", ")}`,
+        })
+    }
+
+    return {
+        url:
+            raw.type === "email" && !url.startsWith("mailto:")
+                ? `mailto:${url}`
+                : url,
+        text: raw.text,
+        type: raw.type,
+        parseErrors: [],
+    }
+}
+
 export const parseSocials = (raw: RawBlockSocials): EnrichedBlockSocials => {
     const createError = (error: ParseError): EnrichedBlockSocials => ({
         type: "socials",
@@ -2328,44 +2381,9 @@ export const parseSocials = (raw: RawBlockSocials): EnrichedBlockSocials => {
         })
     }
 
-    const links: EnrichedSocialLink[] = []
-
-    for (const link of raw.value) {
-        const url = extractUrl(link.url)
-        if (!url) {
-            return createError({
-                message: "Link is missing a url",
-            })
-        }
-        if (!link.text) {
-            return createError({
-                message: "Link is missing text",
-            })
-        }
-        if (
-            link.type &&
-            Object.values(SocialLinkType).indexOf(link.type) === -1
-        ) {
-            return createError({
-                message: `Link type must be one of ${Object.values(
-                    SocialLinkType
-                ).join(", ")}`,
-            })
-        }
-
-        links.push({
-            url:
-                link.type === "email" && !url.startsWith("mailto:")
-                    ? `mailto:${url}`
-                    : url,
-            text: link.text,
-            type: link.type,
-        })
-    }
-
     return {
         type: "socials",
-        links,
+        links: raw.value.map(parseSocialLink),
         parseErrors: [],
     }
 }

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

@@ -245,6 +245,14 @@ export type EnrichedBlockNumberedList = {
     items: EnrichedBlockText[]
 } & EnrichedBlockWithParseErrors
 
+export type RawBlockPeopleRows = {
+    type: "people-rows"
+    value: {
+        columns: "2"
+        people: RawBlockPerson[]
+    }
+}
+
 export type RawBlockPeople = {
     type: "people"
     value: RawBlockPerson[] | ArchieMLUnexpectedNonObjectValue
@@ -257,9 +265,16 @@ export type RawBlockPerson = {
         name: string
         title?: string
         text: RawBlockText[]
+        socials?: RawSocialLink[]
     }
 }
 
+export type EnrichedBlockPeopleRows = {
+    type: "people-rows"
+    columns: "2"
+    people: EnrichedBlockPerson[]
+} & EnrichedBlockWithParseErrors
+
 export type EnrichedBlockPeople = {
     type: "people"
     items: EnrichedBlockPerson[]
@@ -271,6 +286,7 @@ export type EnrichedBlockPerson = {
     name: string
     title?: string
     text: EnrichedBlockText[]
+    socials?: EnrichedSocialLink[]
 } & EnrichedBlockWithParseErrors
 
 export type RawBlockPullQuote = {
@@ -897,7 +913,7 @@ export type EnrichedSocialLink = {
     text: string
     url: string
     type?: SocialLinkType
-}
+} & EnrichedBlockWithParseErrors
 
 export type EnrichedBlockSocials = {
     type: "socials"
@@ -916,6 +932,7 @@ export type OwidRawGdocBlock =
     | RawBlockVideo
     | RawBlockList
     | RawBlockPeople
+    | RawBlockPeopleRows
     | RawBlockPerson
     | RawBlockPullQuote
     | RawBlockRecirc
@@ -964,6 +981,7 @@ export type OwidEnrichedGdocBlock =
     | EnrichedBlockVideo
     | EnrichedBlockList
     | EnrichedBlockPeople
+    | EnrichedBlockPeopleRows
     | EnrichedBlockPerson
     | EnrichedBlockPullQuote
     | EnrichedBlockRecirc

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

@@ -185,6 +185,7 @@ export {
     type RawBlockMissingData,
     type RawBlockNumberedList,
     type RawBlockPeople,
+    type RawBlockPeopleRows,
     type RawBlockPerson,
     type RawBlockPosition,
     type RawBlockProminentLink,
@@ -240,6 +241,7 @@ export {
     type EnrichedBlockMissingData,
     type EnrichedBlockNumberedList,
     type EnrichedBlockPeople,
+    type EnrichedBlockPeopleRows,
     type EnrichedBlockPerson,
     type EnrichedBlockProminentLink,
     type EnrichedBlockPullQuote,

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

@@ -1687,6 +1687,12 @@ export function traverseEnrichedBlock(
                 traverseEnrichedBlock(item, callback, spanCallback)
             }
         })
+        .with({ type: "people-rows" }, (peopleRows) => {
+            callback(peopleRows)
+            for (const person of peopleRows.people) {
+                traverseEnrichedBlock(person, callback, spanCallback)
+            }
+        })
         .with({ type: "person" }, (person) => {
             callback(person)
             for (const node of person.text) {