Merge pull request #2883 from owid/linear-topic-page-type

Adds new Gdoc type: `linear-topic-page`

.bundlewatch.config.json

@@ -6,7 +6,7 @@
         },
         {
             "path": "./dist/assets/owid.mjs",
-            "maxSize": "545 KB"
+            "maxSize": "565 KB"
         }
     ],
     "defaultCompression": "none"

adminSiteClient/GdocsIndexPage.tsx

@@ -33,6 +33,7 @@ const iconGdocTypeMap = {
     [OwidGdocType.Fragment]: <FontAwesomeIcon icon={faPuzzlePiece} />,
     [OwidGdocType.Article]: <FontAwesomeIcon icon={faNewspaper} />,
     [OwidGdocType.TopicPage]: <FontAwesomeIcon icon={faLightbulb} />,
+    [OwidGdocType.LinearTopicPage]: <FontAwesomeIcon icon={faLightbulb} />,
 }
 
 @observer
@@ -49,6 +50,7 @@ class GdocsIndexPageSearch extends React.Component<{
             OwidGdocType.Fragment,
             OwidGdocType.Article,
             OwidGdocType.TopicPage,
+            OwidGdocType.LinearTopicPage,
         ]
         return (
             <div className="d-flex flex-grow-1 flex-wrap">
@@ -105,6 +107,7 @@ export class GdocsIndexPage extends React.Component<GdocsMatchProps> {
         [OwidGdocType.Fragment]: false,
         [OwidGdocType.Article]: false,
         [OwidGdocType.TopicPage]: false,
+        [OwidGdocType.LinearTopicPage]: false,
     }
 
     @observable search = { value: "" }

baker/algolia/indexToAlgolia.tsx

@@ -138,6 +138,8 @@ function generateGdocRecords(
         switch (gdoc.content.type) {
             case OwidGdocType.TopicPage:
                 return { type: "topic", importance: 3 }
+            case OwidGdocType.LinearTopicPage:
+                return { type: "topic", importance: 3 }
             case OwidGdocType.Fragment:
                 // this should not happen because we filter out fragments; but we want to have an exhaustive switch/case so we include it
                 return { type: "other", importance: 0 }

db/migrateWpPostsToArchieMl.ts

@@ -92,11 +92,12 @@ const migrate = async (): Promise<void> => {
         "created_at_in_wordpress",
         "updated_at",
         "featured_image"
-    ).from(db.knexTable(Post.postsTable)) //.where("id", "=", "29766"))
+    ).from(db.knexTable(Post.postsTable)) // .where("id", "=", "58149"))
 
     for (const post of posts) {
         try {
             const isEntry = entries.has(post.slug)
+            console.log("isEntry", isEntry)
             const text = post.content
             let relatedCharts: RelatedChart[] = []
             if (isEntry) {
@@ -125,7 +126,8 @@ const migrate = async (): Promise<void> => {
 
             // Heading levels used to start at 2, in the new layout system they start at 1
             // This function iterates all blocks recursively and adjusts the heading levels inline
-            adjustHeadingLevels(archieMlBodyElements)
+            // If the article is an entry, we also put an <hr /> above and below h1's
+            adjustHeadingLevels(archieMlBodyElements, isEntry)
 
             if (relatedCharts.length) {
                 const indexOfFirstHeading = archieMlBodyElements.findIndex(
@@ -189,7 +191,7 @@ const migrate = async (): Promise<void> => {
                     // TODO: this discards block level elements - those might be needed?
                     refs: undefined,
                     type: isEntry
-                        ? OwidGdocType.TopicPage
+                        ? OwidGdocType.LinearTopicPage
                         : OwidGdocType.Article,
                     // Provide an empty array to prevent the sticky nav from rendering at all
                     // Because if it isn't defined, it tries to automatically populate itself

db/model/Gdoc/htmlToEnriched.ts

@@ -34,6 +34,7 @@ import {
     EnrichedBlockGraySection,
     EnrichedBlockStickyRightContainer,
     EnrichedBlockBlockquote,
+    EnrichedBlockHorizontalRule,
 } from "@ourworldindata/utils"
 import { match, P } from "ts-pattern"
 import {
@@ -393,13 +394,28 @@ export function convertAllWpComponentsToArchieMLBlocks(
     })
 }
 
-export function adjustHeadingLevels(blocks: OwidEnrichedGdocBlock[]): void {
-    for (const block of blocks) {
+export function adjustHeadingLevels(
+    blocks: OwidEnrichedGdocBlock[],
+    isEntry: boolean
+): void {
+    for (let i = 0; i < blocks.length; i++) {
+        const block = blocks[i]
         if (block.type === "heading") {
-            block.level = Math.max(block.level - 1, 1)
-        }
-        if ("children" in block) {
-            adjustHeadingLevels(block.children as OwidEnrichedGdocBlock[])
+            if (isEntry && block.level === 1) {
+                const hr: EnrichedBlockHorizontalRule = {
+                    type: "horizontal-rule",
+                    parseErrors: [],
+                }
+                blocks.splice(i, 0, { ...hr })
+                blocks.splice(i + 2, 0, { ...hr })
+                i += 2
+            }
+            block.level = Math.max(1, block.level - 1)
+        } else if ("children" in block) {
+            adjustHeadingLevels(
+                block.children as OwidEnrichedGdocBlock[],
+                isEntry
+            )
         }
     }
 }
@@ -848,23 +864,7 @@ function cheerioToArchieML(
             .with({ tagName: "details" }, unwrapElementWithContext)
             .with({ tagName: "div" }, (div) => {
                 const className = div.attribs.class || ""
-                // Special handling for a div that we use to mark the "First published on..." notice
-                if (className.includes("blog-info")) {
-                    const children = unwrapElementWithContext(div)
-                    const textChildren = children.content.filter(
-                        (c) => "type" in c && c.type === "text"
-                    ) as EnrichedBlockText[]
-                    const callout: EnrichedBlockCallout = {
-                        type: "callout",
-                        title: "",
-                        text: textChildren,
-                        parseErrors: [],
-                    }
-                    return {
-                        errors: [],
-                        content: [callout],
-                    }
-                } else if (className.includes("pcrm")) {
+                if (className.includes("pcrm")) {
                     // pcrm stands for "preliminary collection of relevant material" which was used to designate entries
                     // that weren't fully polished, but then became a way to create a general-purpose "warning box".
                     const unwrapped = unwrapElementWithContext(element)

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

@@ -1343,6 +1343,7 @@ export enum OwidGdocType {
     Article = "article",
     TopicPage = "topic-page",
     Fragment = "fragment",
+    LinearTopicPage = "linear-topic-page",
 }
 
 export interface OwidGdocInterface {

site/gdocs/OwidGdoc.tsx

@@ -44,6 +44,8 @@ type OwidGdocProps = OwidGdocInterface & {
 const citationDescriptionsByArticleType: Record<OwidGdocType, string> = {
     [OwidGdocType.TopicPage]:
         "Our articles and data visualizations rely on work from many different people and organizations. When citing this topic page, please also cite the underlying data sources. This topic page can be cited as:",
+    [OwidGdocType.LinearTopicPage]:
+        "Our articles and data visualizations rely on work from many different people and organizations. When citing this topic page, please also cite the underlying data sources. This topic page can be cited as:",
     [OwidGdocType.Article]:
         "Our articles and data visualizations rely on work from many different people and organizations. When citing this article, please also cite the underlying data sources. This article can be cited as:",
     // This case should never occur as Fragments aren't baked and can't be viewed by themselves.

site/gdocs/OwidGdocHeader.tsx

@@ -143,6 +143,36 @@ function OwidTopicPageHeader({
     )
 }
 
+function OwidLinearTopicPageHeader({
+    content,
+    authors,
+}: {
+    content: OwidGdocContent
+    authors: string[]
+}) {
+    return (
+        <header className="topic-page-header grid span-cols-14 grid-cols-12-full-width">
+            <h1 className="display-1-semibold col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2">
+                {content.title}
+            </h1>
+            <p className="topic-page-header__subtitle body-1-regular col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2">
+                {content.subtitle}
+            </p>
+            <p className="topic-page-header__byline col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2">
+                {"By "}
+                <a href="/team">
+                    {formatAuthors({
+                        authors,
+                    })}
+                </a>
+            </p>
+            <p className="topic-page-header__dateline body-3-medium-italic col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2">
+                {content.dateline}
+            </p>
+        </header>
+    )
+}
+
 export function OwidGdocHeader(props: {
     content: OwidGdocContent
     authors: string[]
@@ -153,6 +183,8 @@ export function OwidGdocHeader(props: {
         return <OwidArticleHeader {...props} />
     if (props.content.type === OwidGdocType.TopicPage)
         return <OwidTopicPageHeader {...props} />
+    if (props.content.type === OwidGdocType.LinearTopicPage)
+        return <OwidLinearTopicPageHeader {...props} />
     // Defaulting to ArticleHeader, but will require the value to be set for all docs going forward
     return <OwidArticleHeader {...props} />
 }

site/gdocs/topic-page.scss

@@ -2,6 +2,7 @@
 * Topic Page
 **/
 
+// These styles are used both for topic page and linear topic page headers
 .topic-page-header {
     background-color: $blue-10;
     color: $blue-90;
@@ -22,10 +23,17 @@
     p.topic-page-header__byline,
     .topic-page-header__byline a {
         color: $blue-60;
+        margin-bottom: 0;
+        @include sm-only {
+            font-size: 0.875rem;
+        }
+    }
+
+    // Applies to either .topic-page-header__byline or .topic-page-header__dateline, if specified
+    p:last-child {
         margin-bottom: 34px;
         @include sm-only {
             margin-bottom: 16px;
-            font-size: 0.875rem;
         }
     }
 
@@ -213,3 +221,51 @@
 .centered-article-container--topic-page #article-citation h3 {
     text-align: left;
 }
+
+// Linear topic page customizations
+.centered-article-container--linear-topic-page {
+    .article-block__horizontal-rule
+        + h1.article-block__heading.h1-semibold
+        + .article-block__horizontal-rule {
+        // h1's have a bottom margin of 24px, which stacked atop the hr's 48px, is too large.
+        // this shrinks the second hr's margin-top so that it's 48px total, without affecting the
+        // margins of any h1 that might come directly after it.
+        margin-top: 24px;
+    }
+    h1.article-block__heading.h1-semibold {
+        font-size: 2.25rem;
+        a.deep-link {
+            margin-top: 19px;
+        }
+        @include sm-up {
+            font-size: 2.625rem;
+            a.deep-link {
+                margin-top: 23px;
+            }
+        }
+    }
+    h2.article-block__heading.h2-bold {
+        font-size: 1.5rem;
+        a.deep-link {
+            margin-top: 13px;
+        }
+        @include sm-up {
+            font-size: 2rem;
+            a.deep-link {
+                margin-top: 19px;
+            }
+        }
+    }
+    h3.article-block__heading.h3-bold {
+        font-size: 1.25rem;
+        a.deep-link {
+            margin-top: 10px;
+        }
+        @include sm-up {
+            font-size: 1.5rem;
+            a.deep-link {
+                margin-top: 12px;
+            }
+        }
+    }
+}