From 141f81c8677099c4628e3138d947743b60c2b6f0 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Tue, 17 Oct 2023 16:55:57 +0200
Subject: [PATCH 1/2] data-page-key-info

---
 site/DataPageV2Content.tsx | 74 +++++++++++++++++++++++++++-----------
 1 file changed, 54 insertions(+), 20 deletions(-)

diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 4e1e282d803..0fac9219524 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -13,6 +13,7 @@ import {
     excludeNullish,
     slugify,
     DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+    EnrichedBlockList,
 } from "@ourworldindata/utils"
 import { markdownToEnrichedTextBlock } from "@ourworldindata/components"
 import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js"
@@ -123,6 +124,36 @@ export const DataPageV2Content = ({
         relatedCharts = [],
     } = faqEntries ?? {}
 
+    // TODO: convert the key info points to a gdoc like list; show descriptionShort if no key info
+    const keyInfoBlocks = datapageData?.descriptionKey
+        ? excludeNullish(
+              datapageData.descriptionKey.flatMap(markdownToEnrichedTextBlock)
+          )
+        : undefined
+    const keyInfoBlocksAsList = keyInfoBlocks
+        ? ({
+              type: "list",
+              items: keyInfoBlocks,
+              parseErrors: [],
+          } satisfies EnrichedBlockList)
+        : undefined
+
+    const keyInfo = keyInfoBlocksAsList ? (
+        <ArticleBlocks
+            blocks={[keyInfoBlocksAsList]}
+            containerType="datapage"
+        />
+    ) : null
+
+    const aboutThisData = datapageData?.descriptionShort ? (
+        <ArticleBlocks
+            blocks={[
+                markdownToEnrichedTextBlock(datapageData.descriptionShort),
+            ]}
+            containerType="datapage"
+        />
+    ) : null
+
     const citationDatapage = `Our World In Data (${yearOfUpdate}). Data Page: ${datapageData.title} – ${producers}. Retrieved from {url} [online resource]`
     return (
         <AttachmentsContext.Provider
@@ -192,26 +223,29 @@ export const DataPageV2Content = ({
                                 {(datapageData?.descriptionKey ||
                                     datapageData.descriptionShort) && (
                                     <div className="key-info__curated">
-                                        <h2 className="key-info__title">
-                                            {datapageData?.descriptionKey &&
-                                            datapageData?.descriptionKey
-                                                .length > 0
-                                                ? "What you should know about this indicator"
-                                                : "About this data"}
-                                        </h2>
-                                        <div className="key-info__content">
-                                            {datapageData?.descriptionKey ? (
-                                                <ArticleBlocks
-                                                    blocks={excludeNullish(
-                                                        datapageData.descriptionKey.flatMap(
-                                                            markdownToEnrichedTextBlock
-                                                        )
-                                                    )}
-                                                    containerType="datapage"
-                                                />
-                                            ) : null}
-                                        </div>
-                                        {datapageData?.faqs.length > 0 && (
+                                        {aboutThisData ? (
+                                            <>
+                                                <h2 className="key-info__title">
+                                                    About this data
+                                                </h2>
+                                                <div className="key-info__content">
+                                                    {aboutThisData}
+                                                </div>
+                                            </>
+                                        ) : null}
+                                        {keyInfo ? (
+                                            <>
+                                                <h2 className="key-info__title">
+                                                    What you should know about
+                                                    this indicator
+                                                </h2>
+                                                <div className="key-info__content">
+                                                    {keyInfo}
+                                                </div>
+                                            </>
+                                        ) : null}
+
+                                        {!!faqEntries?.faqs.length && (
                                             <a
                                                 className="key-info__learn-more"
                                                 href="#faqs"

From 5665a6d03acc229d5c0fe657eb8c885b07e8a106 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Mon, 23 Oct 2023 10:34:41 +0200
Subject: [PATCH 2/2] :honeybee: remove obsolete comment

---
 site/DataPageV2Content.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 0fac9219524..289585757f3 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -124,7 +124,6 @@ export const DataPageV2Content = ({
         relatedCharts = [],
     } = faqEntries ?? {}
 
-    // TODO: convert the key info points to a gdoc like list; show descriptionShort if no key info
     const keyInfoBlocks = datapageData?.descriptionKey
         ? excludeNullish(
               datapageData.descriptionKey.flatMap(markdownToEnrichedTextBlock)