Add a way of marking articles as deprecated

adminSiteClient/gdocsDeploy.ts

@@ -86,6 +86,7 @@ export const checkIsLightningUpdate = (
         "atom-excerpt": false, // requires updating the atom feed / blog roll
         "atom-title": false, // requires updating the atom feed / blog roll
         "featured-image": false, // requires updating references to this article
+        "deprecation-notice": false, // requires updating references to this article
         authors: false, // requires updating references to this article
         excerpt: false, // requires updating references to this article
         faqs: false, // requires updating datapages

adminSiteClient/gdocsValidation.ts

@@ -53,6 +53,22 @@ function validateContentType(gdoc: OwidGdoc, errors: OwidGdocErrorMessage[]) {
     }
 }
 
+function validateDeprecationNotice(
+    gdoc: OwidGdoc,
+    errors: OwidGdocErrorMessage[]
+) {
+    if (
+        "deprecation-notice" in gdoc.content &&
+        gdoc.content.type !== OwidGdocType.Article
+    ) {
+        errors.push({
+            property: "deprecation-notice",
+            type: OwidGdocErrorMessageType.Error,
+            message: "Deprecation notice is only supported in articles.",
+        })
+    }
+}
+
 function validateBody(gdoc: OwidGdoc, errors: OwidGdocErrorMessage[]) {
     if (!gdoc.content.body) {
         errors.push(getMissingContentPropertyError("body"))
@@ -236,6 +252,7 @@ export const getErrors = (gdoc: OwidGdoc): OwidGdocErrorMessage[] => {
     validateBody(gdoc, errors)
     validatePublishedAt(gdoc, errors)
     validateContentType(gdoc, errors)
+    validateDeprecationNotice(gdoc, errors)
 
     if (checkIsGdocPost(gdoc)) {
         validateRefs(gdoc, errors)

baker/algolia/algoliaUtils.tsx

@@ -157,6 +157,16 @@ async function generateWordpressRecords(
     return records
 }
 
+function getGdocThumbnailUrl(gdoc: OwidGdocPostInterface): string {
+    if (gdoc.content["deprecation-notice"]) {
+        return "/archived-thumbnail.jpg"
+    }
+    if (gdoc.content["featured-image"]) {
+        return getThumbnailPath(gdoc.content["featured-image"])
+    }
+    return "/default-thumbnail.jpg"
+}
+
 function generateGdocRecords(
     gdocs: OwidGdocPostInterface[],
     pageviews: Record<string, RawPageview>
@@ -199,10 +209,7 @@ function generateGdocRecords(
         const chunks = generateChunksFromHtmlText(renderedPostContent)
         const postTypeAndImportance = getPostTypeAndImportance(gdoc)
         let i = 0
-
-        const thumbnailUrl = gdoc.content["featured-image"]
-            ? getThumbnailPath(gdoc.content["featured-image"])
-            : "/default-thumbnail.jpg"
+        const thumbnailUrl = getGdocThumbnailUrl(gdoc)
 
         for (const chunk of chunks) {
             const record = {

db/model/Gdoc/GdocBase.ts

@@ -866,6 +866,7 @@ export async function getMinimalGdocPostsByIds(
         excerpt: string
         type: string
         "featured-image": string
+        isDeprecated: 0 | 1
     }>(
         knex,
         `-- sql
@@ -879,7 +880,8 @@ export async function getMinimalGdocPostsByIds(
                 content ->> '$.subtitle' as subtitle,
                 content ->> '$.excerpt' as excerpt,
                 type,
-                content ->> '$."featured-image"' as "featured-image"
+                content ->> '$."featured-image"' as "featured-image",
+                (content ->> '$."deprecation-notice"' IS NOT NULL) as isDeprecated
             FROM posts_gdocs
             WHERE id in (:ids)`,
         { ids }
@@ -895,7 +897,9 @@ export async function getMinimalGdocPostsByIds(
             subtitle: row.subtitle,
             excerpt: row.excerpt,
             type: row.type as OwidGdocType,
-            "featured-image": row["featured-image"],
+            "featured-image": row.isDeprecated
+                ? "/archived-thumbnail.jpg"
+                : row["featured-image"],
         } satisfies OwidGdocMinimalPostInterface
     })
 }

db/model/Gdoc/GdocFactory.ts

@@ -197,6 +197,7 @@ export async function getAllMinimalGdocBaseObjects(
         excerpt: string
         type: string
         "featured-image": string
+        isDeprecated: 0 | 1
     }>(
         knex,
         `-- sql
@@ -210,7 +211,8 @@ export async function getAllMinimalGdocBaseObjects(
                 content ->> '$.subtitle' as subtitle,
                 content ->> '$.excerpt' as excerpt,
                 type,
-                content ->> '$."featured-image"' as "featured-image"
+                content ->> '$."featured-image"' as "featured-image",
+                (content ->> '$."deprecation-notice"' IS NOT NULL) as isDeprecated
             FROM posts_gdocs
             WHERE published = 1
             AND publishedAt <= NOW()`,
@@ -227,7 +229,9 @@ export async function getAllMinimalGdocBaseObjects(
             subtitle: row.subtitle,
             excerpt: row.excerpt,
             type: row.type as OwidGdocType,
-            "featured-image": row["featured-image"],
+            "featured-image": row.isDeprecated
+                ? "/archived-thumbnail.jpg"
+                : row["featured-image"],
         } satisfies OwidGdocMinimalPostInterface
     })
 }

db/model/Gdoc/GdocPost.ts

@@ -68,6 +68,11 @@ export class GdocPost extends GdocBase implements OwidGdocPostInterface {
             enrichedBlocks.push(...refBlocks)
         }
 
+        const deprecationNotice = gdoc.content["deprecation-notice"]
+        if (deprecationNotice) {
+            enrichedBlocks.push(...deprecationNotice)
+        }
+
         return enrichedBlocks
     }
 

db/model/Gdoc/archieToEnriched.ts

@@ -24,7 +24,11 @@ import {
     isEmpty,
 } from "@ourworldindata/utils"
 import { convertHeadingTextToId } from "@ourworldindata/components"
-import { parseRawBlocksToEnrichedBlocks, parseRefs } from "./rawToEnriched.js"
+import {
+    parseRawBlocksToEnrichedBlocks,
+    parseRefs,
+    parseText,
+} from "./rawToEnriched.js"
 import urlSlug from "url-slug"
 import { extractUrl, parseAuthors, spansToSimpleString } from "./gdocUtils.js"
 import { htmlToSimpleTextBlock } from "./htmlToEnriched.js"
@@ -316,6 +320,10 @@ export const archieToEnriched = (
 
     // Parse elements of the ArchieML into enrichedBlocks
     parsed.body = compact(parsed.body.map(parseRawBlocksToEnrichedBlocks))
+    const deprecationNotice = parsed["deprecation-notice"]
+    if (deprecationNotice) {
+        parsed["deprecation-notice"] = compact(deprecationNotice.map(parseText))
+    }
 
     const parsedRefs = parseRefs({
         refs: [...(parsed.refs ?? []), ...rawInlineRefs],

db/model/Post.ts

@@ -307,6 +307,16 @@ export const getBlogIndex = memoize(
     }
 )
 
+function getGdocThumbnail(gdoc: OwidGdocPostInterface): string {
+    let thumbnailPath = "/default-thumbnail.jpg"
+    if (gdoc.content["deprecation-notice"]) {
+        thumbnailPath = "/archived-thumbnail.jpg"
+    } else if (gdoc.content["featured-image"]) {
+        thumbnailPath = `${IMAGES_DIRECTORY}${gdoc.content["featured-image"]}`
+    }
+    return `${BAKED_BASE_URL}${thumbnailPath}`
+}
+
 export const mapGdocsToWordpressPosts = (
     gdocs: OwidGdocPostInterface[]
 ): IndexPost[] => {
@@ -318,9 +328,7 @@ export const mapGdocsToWordpressPosts = (
         modifiedDate: gdoc.updatedAt as Date,
         authors: gdoc.content.authors,
         excerpt: gdoc.content["atom-excerpt"] || gdoc.content.excerpt,
-        imageUrl: gdoc.content["featured-image"]
-            ? `${BAKED_BASE_URL}${IMAGES_DIRECTORY}${gdoc.content["featured-image"]}`
-            : `${BAKED_BASE_URL}/default-thumbnail.jpg`,
+        imageUrl: getGdocThumbnail(gdoc),
     }))
 }
 
@@ -619,6 +627,7 @@ export const getLatestWorkByAuthor = async (
             pg.content->>'$.subtitle' AS subtitle,
             pg.content->>'$.authors' AS authors,
             pg.content->>'$."featured-image"' AS "featured-image",
+            (pg.content->>'$."deprecation-notice"' IS NOT NULL) AS isDeprecated,
             pg.publishedAt
         FROM
             posts_gdocs pg

packages/@ourworldindata/components/src/styles/variables.scss

@@ -147,6 +147,7 @@ $xxlg: 1536px;
  */
 
 $zindex-input: 1;
+$zindex-deprecation-notice: 10;
 $zindex-global-entity-select: 11;
 $zindex-footnote: 15;
 $zindex-sidebar: 20;

packages/@ourworldindata/types/src/domainTypes/Author.ts

@@ -5,6 +5,7 @@ export interface DbRawLatestWork {
     subtitle: string | null
     authors: string
     "featured-image": string | null
+    isDeprecated: 0 | 1
     publishedAt: string | null
 }
 
@@ -24,5 +25,8 @@ export const parseLatestWork = (
     return {
         ...latestWork,
         authors: JSON.parse(latestWork.authors),
+        "featured-image": latestWork.isDeprecated
+            ? "/archived-thumbnail.jpg"
+            : latestWork["featured-image"],
     }
 }

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

@@ -285,6 +285,7 @@ export interface OwidGdocPostContent {
     excerpt?: string
     refs?: { definitions: RefDictionary; errors: OwidGdocErrorMessage[] }
     summary?: EnrichedBlockText[]
+    "deprecation-notice"?: EnrichedBlockText[]
     "hide-citation"?: boolean
     toc?: TocHeadingWithTitleSupertitle[]
     "cover-image"?: string

site/Head.tsx

@@ -63,7 +63,7 @@ export const Head = (props: {
         <head>
             <meta
                 name="viewport"
-                content="width=device-width, initial-scale=1"
+                content="width=device-width, initial-scale=1, minimum-scale=1"
             />
             <title>{fullPageTitle}</title>
             <meta name="description" content={pageDesc} />

site/gdocs/OwidGdocPage.tsx

@@ -89,18 +89,23 @@ export default function OwidGdocPage({
     const isDataInsight = gdoc.content.type === OwidGdocType.DataInsight
     const isAuthor = gdoc.content.type === OwidGdocType.Author
 
+    let imageUrl
+    if (
+        gdoc.content.type === OwidGdocType.Article &&
+        gdoc.content["deprecation-notice"]
+    ) {
+        imageUrl = `${baseUrl}/archived-thumbnail.jpg`
+    } else if (featuredImageFilename) {
+        imageUrl = `${baseUrl}${IMAGES_DIRECTORY}${featuredImageFilename}`
+    }
+
     return (
         <Html>
             <Head
                 pageTitle={pageTitle}
                 pageDesc={pageDesc}
                 canonicalUrl={canonicalUrl}
-                imageUrl={
-                    // uriEncoding is taken care of inside the Head component
-                    featuredImageFilename
-                        ? `${baseUrl}${IMAGES_DIRECTORY}${featuredImageFilename}`
-                        : undefined
-                }
+                imageUrl={imageUrl} // uriEncoding is taken care of inside the Head component
                 atom={isDataInsight ? DATA_INSIGHT_ATOM_FEED_PROPS : undefined}
                 baseUrl={baseUrl}
             >

site/gdocs/components/OwidGdocHeader.tsx

@@ -18,10 +18,12 @@ function OwidArticleHeader({
     content,
     publishedAt,
     breadcrumbs,
+    isDeprecated,
 }: {
     content: OwidGdocPostContent
     publishedAt: Date | null
     breadcrumbs?: BreadcrumbItem[]
+    isDeprecated?: boolean
 }) {
     const coverStyle = content["cover-color"]
         ? { backgroundColor: `var(--${content["cover-color"]})` }
@@ -75,7 +77,13 @@ function OwidArticleHeader({
                     </h2>
                 ) : null}
                 <div className="centered-article-header__meta-container col-start-2 span-cols-6 span-md-cols-10 col-md-start-2 grid grid-cols-2 ">
-                    <div className="span-cols-1 span-sm-cols-2">
+                    <div
+                        className={
+                            isDeprecated
+                                ? "span-cols-2"
+                                : "span-cols-1 span-sm-cols-2"
+                        }
+                    >
                         {content.authors.length > 0 && (
                             <div className="centered-article-header__byline">
                                 <Byline names={content.authors} />
@@ -86,25 +94,27 @@ function OwidArticleHeader({
                                 (publishedAt && formatDate(publishedAt))}
                         </div>
                     </div>
-                    <div className="span-cols-1 span-sm-cols-2">
-                        {!content["hide-citation"] && (
+                    {!isDeprecated && (
+                        <div className="span-cols-1 span-sm-cols-2">
+                            {!content["hide-citation"] && (
+                                <a
+                                    href="#article-citation"
+                                    className="body-1-regular display-block"
+                                >
+                                    <FontAwesomeIcon icon={faBook} />
+                                    Cite this article
+                                </a>
+                            )}
+
                             <a
-                                href="#article-citation"
-                                className="body-1-regular display-block"
+                                href="#article-licence"
+                                className="body-3-medium display-block"
                             >
-                                <FontAwesomeIcon icon={faBook} />
-                                Cite this article
+                                <FontAwesomeIcon icon={faCreativeCommons} />
+                                Reuse our work freely
                             </a>
-                        )}
-
-                        <a
-                            href="#article-licence"
-                            className="body-3-medium display-block"
-                        >
-                            <FontAwesomeIcon icon={faCreativeCommons} />
-                            Reuse our work freely
-                        </a>
-                    </div>
+                        </div>
+                    )}
                 </div>
             </header>
         </>
@@ -158,6 +168,7 @@ export function OwidGdocHeader(props: {
     content: OwidGdocPostContent
     publishedAt: Date | null
     breadcrumbs?: BreadcrumbItem[]
+    isDeprecated?: boolean
 }) {
     if (props.content.type === OwidGdocType.Article)
         return <OwidArticleHeader {...props} />

site/gdocs/components/ProminentLink.tsx

@@ -66,6 +66,7 @@ export const ProminentLink = (props: {
     const Thumbnail = ({ thumbnail }: { thumbnail: string }) => {
         if (
             thumbnail.startsWith(BAKED_GRAPHER_EXPORTS_BASE_URL) ||
+            thumbnail.endsWith("archived-thumbnail.jpg") ||
             thumbnail.endsWith("default-thumbnail.jpg")
         ) {
             return <img src={thumbnail} />