✨ correctly handle all blockquote citation states

owid · Nov 2, 2023 · c6bb9d7 · c6bb9d7
1 parent d2a2867
commit c6bb9d7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
@@ -316,7 +316,10 @@ const parseBlockquote = (raw: RawBlockBlockquote): EnrichedBlockBlockquote => {
         parseErrors: [error],
     })
 
-    if (typeof raw.value.citation !== "string") {
+    if (
+        typeof raw.value.citation !== "undefined" &&
+        typeof raw.value.citation !== "string"
+    ) {
         return createError({
             message: "Citation is not a string",
         })

diff --git a/site/gdocs/ArticleBlock.tsx b/site/gdocs/ArticleBlock.tsx
@@ -588,12 +588,17 @@ export default function ArticleBlock({
             />
         ))
         .with({ type: "blockquote" }, (block) => {
+            // If the citation exists and is a URL, it uses the cite attribute
+            // If the citation exists and is not a URL, it uses the footer
+            // Otherwise, we show nothing for cases where the citation is written in the surrounding text
             const isCitationAUrl = Boolean(
                 block.citation && block.citation.startsWith("http")
             )
+            const shouldShowCitationInFooter = block.citation && !isCitationAUrl
             const blockquoteProps = isCitationAUrl
                 ? { cite: block.citation }
                 : {}
+
             return (
                 <blockquote
                     className={cx(getLayout("blockquote", containerType))}
@@ -607,11 +612,11 @@ export default function ArticleBlock({
                         />
                     ))}
 
-                    {isCitationAUrl ? null : (
+                    {shouldShowCitationInFooter ? (
                         <footer>
-                            <cite>{block.citation}</cite>
+                            – <cite>{block.citation}</cite>
                         </footer>
-                    )}
+                    ) : null}
                 </blockquote>
             )
         })

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
@@ -72,12 +72,19 @@ $banner-height: 200px;
 
 .article-block__blockquote {
     margin-top: 0;
+    color: $blue-60;
     p {
         font-style: italic;
         &:last-of-type {
-            margin-bottom: 4px;
+            margin-bottom: 0px;
         }
     }
+    a {
+        color: $blue-60;
+    }
+    footer {
+        margin-top: 8px;
+    }
     cite {
         font-style: normal;
     }