From a6fce4563bacac32cb92a6a073fe2489a43e2cdc Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 17 Oct 2023 14:45:14 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20hide=20sticky=20nav=20on=20linea?=
 =?UTF-8?q?r=20topic=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/migrateWpPostsToArchieMl.ts                  | 3 +++
 db/model/Gdoc/archieToEnriched.ts               | 2 ++
 db/model/Gdoc/archieToGdoc.ts                   | 8 ++++++++
 packages/@ourworldindata/utils/src/owidTypes.ts | 2 +-
 site/gdocs/OwidGdoc.tsx                         | 2 +-
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/db/migrateWpPostsToArchieMl.ts b/db/migrateWpPostsToArchieMl.ts
index 1269b944d96..2a49de96ea1 100644
--- a/db/migrateWpPostsToArchieMl.ts
+++ b/db/migrateWpPostsToArchieMl.ts
@@ -171,6 +171,9 @@ const migrate = async (): Promise<void> => {
                     type: isEntry
                         ? OwidGdocType.TopicPage
                         : 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
+                    "sticky-nav": isEntry ? [] : undefined,
                 },
                 relatedCharts,
                 published: false,
diff --git a/db/model/Gdoc/archieToEnriched.ts b/db/model/Gdoc/archieToEnriched.ts
index fc284daf74a..a5bfd24c2ba 100644
--- a/db/model/Gdoc/archieToEnriched.ts
+++ b/db/model/Gdoc/archieToEnriched.ts
@@ -39,6 +39,8 @@ function generateStickyNav(
 ): OwidGdocStickyNavItem[] | undefined {
     if (content.type !== OwidGdocType.TopicPage) return
     // If a sticky nav has been explicitly defined, use that.
+    // We are using this for linear topic pages, as a way to have a document using the topic page template
+    // but without a sticky nav
     if (content["sticky-nav"]) return content["sticky-nav"]
     // These are the default headings that we'll try to find and create sticky nav headings for
     // Even if the id for the heading is "key-insights-on-poverty", we can just do substring matches
diff --git a/db/model/Gdoc/archieToGdoc.ts b/db/model/Gdoc/archieToGdoc.ts
index 3ffc17e5865..8af069e48c5 100644
--- a/db/model/Gdoc/archieToGdoc.ts
+++ b/db/model/Gdoc/archieToGdoc.ts
@@ -41,6 +41,14 @@ function* owidArticleToArchieMLStringGenerator(
     yield* propertyToArchieMLString("dateline", article)
     yield* propertyToArchieMLString("excerpt", article)
     yield* propertyToArchieMLString("type", article)
+    if (article["sticky-nav"]) {
+        yield "[.sticky-nav]"
+        for (const item of article["sticky-nav"]) {
+            yield* propertyToArchieMLString("target", item)
+            yield* propertyToArchieMLString("text", item)
+        }
+        yield "[]"
+    }
     // TODO: inline refs
     yieldMultiBlockPropertyIfDefined("summary", article, article.summary)
     yield* propertyToArchieMLString("hide-citation", article)
diff --git a/packages/@ourworldindata/utils/src/owidTypes.ts b/packages/@ourworldindata/utils/src/owidTypes.ts
index a2a88d4d904..f3b0f6f808c 100644
--- a/packages/@ourworldindata/utils/src/owidTypes.ts
+++ b/packages/@ourworldindata/utils/src/owidTypes.ts
@@ -1343,7 +1343,7 @@ export interface OwidGdocContent {
         | "sdg-color-16"
         | "sdg-color-17"
         | "amber"
-    "sticky-nav"?: []
+    "sticky-nav"?: OwidGdocStickyNavItem[]
     details?: DetailDictionary
     // TODO: having both the unparsed and parsed variant on the same type is pretty crude
     // Consider moving faqs into body or splitting the types and creating
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
index a89a47472f4..34e37aa3001 100644
--- a/site/gdocs/OwidGdoc.tsx
+++ b/site/gdocs/OwidGdoc.tsx
@@ -118,7 +118,7 @@ export function OwidGdoc({
                         publishedAt={publishedAt}
                         breadcrumbs={breadcrumbs ?? undefined}
                     />
-                    {content.type === "topic-page" && stickyNavLinks ? (
+                    {content.type === "topic-page" && stickyNavLinks?.length ? (
                         <nav className="sticky-nav sticky-nav--dark span-cols-14 grid grid-cols-12-full-width">
                             <StickyNav
                                 links={stickyNavLinks}