Add code ArchieML component

Reuses the existing CodeSnippet component.

db/model/Gdoc/GdocBase.ts

@@ -544,6 +544,7 @@ export class GdocBase implements OwidGdocBaseInterface {
                         "aside",
                         "blockquote",
                         "callout",
+                        "code",
                         "donors",
                         "expandable-paragraph",
                         "entry-summary",

db/model/Gdoc/enrichedToMarkdown.ts

@@ -127,6 +127,11 @@ ${items}
                 exportComponents
             )
         )
+        .with({ type: "code" }, (b): string | undefined => {
+            return (
+                "```\n" + b.text.map((text) => text.value).join("\n") + "\n```"
+            )
+        })
         .with({ type: "donors" }, (_): string | undefined =>
             markdownComponent("DonorList", {}, exportComponents)
         )

db/model/Gdoc/enrichedToRaw.ts

@@ -48,6 +48,7 @@ import {
     RawBlockPeople,
     RawBlockPeopleRows,
     RawBlockPerson,
+    RawBlockCode,
 } from "@ourworldindata/types"
 import { spanToHtmlString } from "./gdocUtils.js"
 import { match, P } from "ts-pattern"
@@ -122,6 +123,13 @@ export function enrichedBlockToRawBlock(
                 },
             })
         )
+        .with(
+            { type: "code" },
+            (b): RawBlockCode => ({
+                type: b.type,
+                value: b.text,
+            })
+        )
         .with(
             { type: "donors" },
             (b): RawBlockDonorList => ({

db/model/Gdoc/exampleEnrichedBlocks.ts

@@ -92,6 +92,16 @@ export const enrichedBlockExamples: Record<
         caption: boldLinkExampleText,
         parseErrors: [],
     },
+    code: {
+        type: "code",
+        text: [
+            {
+                type: "text",
+                value: '<iframe src="https://ourworldindata.org/grapher/children-per-woman-un?region=Africa&tab=map" loading="lazy" style="width: 100%; height: 600px; border: 0px none;" allow="web-share; clipboard-write"></iframe>',
+            },
+        ],
+        parseErrors: [],
+    },
     donors: {
         type: "donors",
         value: {},

db/model/Gdoc/gdocUtils.ts

@@ -222,6 +222,7 @@ export function extractFilenamesFromBlock(
                     "callout",
                     "chart-story",
                     "chart",
+                    "code",
                     "donors",
                     "entry-summary",
                     "expandable-paragraph",

db/model/Gdoc/rawToArchie.ts

@@ -47,6 +47,7 @@ import {
     RawBlockPeople,
     RawBlockPeopleRows,
     RawBlockPerson,
+    RawBlockCode,
 } from "@ourworldindata/types"
 import { isArray } from "@ourworldindata/utils"
 import { match } from "ts-pattern"
@@ -127,6 +128,16 @@ function* rawBlockChartToArchieMLString(
     yield "{}"
 }
 
+function* rawBlockCodeToArchieMLString(
+    block: RawBlockCode
+): Generator<string, void, undefined> {
+    yield "[.+code]"
+    for (const text of block.value) {
+        yield* OwidRawGdocBlockToArchieMLStringGenerator(text)
+    }
+    yield "[]"
+}
+
 function* rawBlockDonorListToArchieMLString(
     _block: RawBlockDonorList
 ): Generator<string, void, undefined> {
@@ -819,6 +830,7 @@ export function* OwidRawGdocBlockToArchieMLStringGenerator(
         .with({ type: "all-charts" }, rawBlockAllChartsToArchieMLString)
         .with({ type: "aside" }, rawBlockAsideToArchieMLString)
         .with({ type: "chart" }, rawBlockChartToArchieMLString)
+        .with({ type: "code" }, rawBlockCodeToArchieMLString)
         .with({ type: "donors" }, rawBlockDonorListToArchieMLString)
         .with({ type: "scroller" }, rawBlockScrollerToArchieMLString)
         .with({ type: "callout" }, rawBlockCalloutToArchieMLString)

db/model/Gdoc/rawToEnriched.ts

@@ -129,6 +129,8 @@ import {
     EnrichedBlockPerson,
     RawBlockPeopleRows,
     EnrichedBlockPeopleRows,
+    RawBlockCode,
+    EnrichedBlockCode,
 } from "@ourworldindata/types"
 import {
     traverseEnrichedSpan,
@@ -142,6 +144,7 @@ import {
     isArray,
     partition,
     compact,
+    toAsciiQuotes,
 } from "@ourworldindata/utils"
 import { checkIsInternalLink, getLinkType } from "@ourworldindata/components"
 import {
@@ -169,6 +172,7 @@ export function parseRawBlocksToEnrichedBlocks(
         .with({ type: "blockquote" }, parseBlockquote)
         .with({ type: "callout" }, parseCallout)
         .with({ type: "chart" }, parseChart)
+        .with({ type: "code" }, parseCode)
         .with({ type: "donors" }, parseDonorList)
         .with({ type: "scroller" }, parseScroller)
         .with({ type: "chart-story" }, parseChartStory)
@@ -492,6 +496,17 @@ const parseChart = (raw: RawBlockChart): EnrichedBlockChart => {
     }
 }
 
+const parseCode = (raw: RawBlockCode): EnrichedBlockCode => {
+    return {
+        type: "code",
+        text: raw.value.map((text) => ({
+            type: "text",
+            value: toAsciiQuotes(text.value),
+        })),
+        parseErrors: [],
+    }
+}
+
 const parseDonorList = (raw: RawBlockDonorList): EnrichedBlockDonorList => {
     return {
         type: "donors",

packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx

@@ -8,11 +8,13 @@ import cx from "classnames"
 import { SimpleMarkdownText } from "../SimpleMarkdownText"
 
 export const CodeSnippet = ({
+    className,
     code,
     theme = "dark",
     isTruncated = false,
     useMarkdown = false,
 }: {
+    className?: string
     code: string
     theme?: "dark" | "light"
     isTruncated?: boolean
@@ -40,7 +42,12 @@ export const CodeSnippet = ({
     }
 
     return (
-        <div className={`wp-code-snippet wp-code-snippet--${theme}`}>
+        <div
+            className={cx(
+                `wp-code-snippet wp-code-snippet--${theme}`,
+                className
+            )}
+        >
             <pre className="wp-block-code">
                 <code
                     className={cx("wp-code-snippet__code", {

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

@@ -86,6 +86,16 @@ export type EnrichedBlockChart = {
     tabs?: ChartTabKeyword[]
 } & EnrichedBlockWithParseErrors
 
+export type RawBlockCode = {
+    type: "code"
+    value: RawBlockText[]
+}
+
+export type EnrichedBlockCode = {
+    type: "code"
+    text: RawBlockText[]
+} & EnrichedBlockWithParseErrors
+
 export type RawBlockDonorList = {
     type: "donors"
     value?: Record<string, never> // dummy value to unify block shapes
@@ -935,6 +945,7 @@ export type OwidRawGdocBlock =
     | RawBlockAside
     | RawBlockCallout
     | RawBlockChart
+    | RawBlockCode
     | RawBlockDonorList
     | RawBlockScroller
     | RawBlockChartStory
@@ -985,6 +996,7 @@ export type OwidEnrichedGdocBlock =
     | EnrichedBlockAside
     | EnrichedBlockCallout
     | EnrichedBlockChart
+    | EnrichedBlockCode
     | EnrichedBlockDonorList
     | EnrichedBlockScroller
     | EnrichedBlockChartStory

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

@@ -170,6 +170,7 @@ export {
     type RawBlockChart,
     type RawBlockChartStory,
     type RawBlockChartValue,
+    type RawBlockCode,
     type RawBlockExpandableParagraph,
     type RawBlockExplorerTiles,
     type RawBlockGraySection,
@@ -226,6 +227,7 @@ export {
     type EnrichedBlockCallout,
     type EnrichedBlockChart,
     type EnrichedBlockChartStory,
+    type EnrichedBlockCode,
     type EnrichedBlockDonorList,
     type EnrichedBlockExpandableParagraph,
     type EnrichedBlockExplorerTiles,

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

@@ -1708,6 +1708,7 @@ export function traverseEnrichedBlock(
                 type: P.union(
                     "chart-story",
                     "chart",
+                    "code",
                     "donors",
                     "horizontal-rule",
                     "html",

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

@@ -293,7 +293,7 @@ export { Url, setWindowUrl, getWindowUrl } from "./urls/Url.js"
 
 export { type UrlMigration, performUrlMigrations } from "./urls/UrlMigration.js"
 
-export { camelCaseProperties, titleCase } from "./string.js"
+export { camelCaseProperties, titleCase, toAsciiQuotes } from "./string.js"
 
 export { serializeJSONForHTML, deserializeJSONFromHTML } from "./serializers.js"
 

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

@@ -31,3 +31,7 @@ export const titleCase = (str: string): string => {
         })
         .join(" ")
 }
+
+export function toAsciiQuotes(str: string): string {
+    return str.replace(/[“”]/g, '"').replace(/[‘’]/g, "'")
+}

site/gdocs/components/ArticleBlock.tsx

@@ -17,7 +17,7 @@ import {
     TocHeadingWithTitleSupertitle,
     Url,
 } from "@ourworldindata/utils"
-import { convertHeadingTextToId } from "@ourworldindata/components"
+import { CodeSnippet, convertHeadingTextToId } from "@ourworldindata/components"
 import SDGGrid from "./SDGGrid.js"
 import { BlockErrorBoundary, BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { match } from "ts-pattern"
@@ -245,6 +245,12 @@ export default function ArticleBlock({
                 />
             )
         })
+        .with({ type: "code" }, (block) => (
+            <CodeSnippet
+                className={getLayout("code-snippet", containerType)}
+                code={block.text.map((text) => text.value).join("\n")}
+            />
+        ))
         .with({ type: "donors" }, (_block) => (
             <Donors className={getLayout("donors", containerType)} />
         ))

site/gdocs/pages/AboutPage.scss

@@ -97,14 +97,18 @@
         margin-bottom: 24px;
     }
 
-    .article-block__image {
-        margin: 0 0 24px;
-    }
-
     .article-block__chart {
         margin-bottom: 24px;
     }
 
+    .article-block__code-snippet {
+        margin-bottom: 16px;
+    }
+
+    .article-block__image {
+        margin: 0 0 24px;
+    }
+
     .article-block__prominent-link {
         margin-bottom: 24px;
     }