data-page-key-info

owid · Oct 20, 2023 · 5aaa83c · 5aaa83c
1 parent c4fa5c2
commit 5aaa83c
Showing 1 changed file with 54 additions and 20 deletions.
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
@@ -14,6 +14,7 @@ import {
     slugify,
     markdownToEnrichedTextBlock,
     DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
+    EnrichedBlockList,
 } from "@ourworldindata/utils"
 import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js"
 import StickyNav from "./blocks/StickyNav.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"