From a0784ed5d20a397b2a33fd3ee67f3cb31a6006a1 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 21:48:19 +0000
Subject: [PATCH 01/17] =?UTF-8?q?=F0=9F=8E=89=20add=20sidebar=20toc=20for?=
 =?UTF-8?q?=20gdocs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteClient/gdocsDeploy.ts                |  1 +
 db/model/Gdoc/archieToEnriched.ts             |  5 ++-
 .../@ourworldindata/utils/src/owidTypes.ts    |  1 +
 site/css/grid.scss                            |  1 +
 site/gdocs/OwidGdoc.tsx                       |  8 ++++
 site/gdocs/centered-article.scss              | 40 +++++++++++++++++++
 6 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/adminSiteClient/gdocsDeploy.ts b/adminSiteClient/gdocsDeploy.ts
index 990703d748a..5c21b68e21e 100644
--- a/adminSiteClient/gdocsDeploy.ts
+++ b/adminSiteClient/gdocsDeploy.ts
@@ -60,6 +60,7 @@ export const checkIsLightningUpdate = (
         "cover-color": true,
         "cover-image": true,
         "hide-citation": true,
+        "sidebar-toc": true,
         body: true,
         dateline: true,
         details: true,
diff --git a/db/model/Gdoc/archieToEnriched.ts b/db/model/Gdoc/archieToEnriched.ts
index e9cd4ce04c4..009aecfcfe6 100644
--- a/db/model/Gdoc/archieToEnriched.ts
+++ b/db/model/Gdoc/archieToEnriched.ts
@@ -131,8 +131,9 @@ function generateToc(
             if (child.type === "heading") {
                 const { level, text, supertitle } = child
                 const titleString = spansToSimpleString(text)
-                const supertitleString =
-                    supertitle && spansToSimpleString(supertitle)
+                const supertitleString = supertitle
+                    ? spansToSimpleString(supertitle)
+                    : ""
                 if (titleString && (level === 2 || level === 3)) {
                     toc.push({
                         title: titleString,
diff --git a/packages/@ourworldindata/utils/src/owidTypes.ts b/packages/@ourworldindata/utils/src/owidTypes.ts
index ffc0dc249c1..32feba1f6cc 100644
--- a/packages/@ourworldindata/utils/src/owidTypes.ts
+++ b/packages/@ourworldindata/utils/src/owidTypes.ts
@@ -1414,6 +1414,7 @@ export interface OwidGdocContent {
     "featured-image"?: string
     "atom-title"?: string
     "atom-excerpt"?: string
+    "sidebar-toc"?: boolean
     "cover-color"?:
         | "sdg-color-1"
         | "sdg-color-2"
diff --git a/site/css/grid.scss b/site/css/grid.scss
index 98c90e484c6..a8227b71ced 100644
--- a/site/css/grid.scss
+++ b/site/css/grid.scss
@@ -56,6 +56,7 @@ $grid-responsive: (lg, md, sm);
     gap: 0 var(--grid-gap);
     grid-template-columns: repeat(12, 1fr);
     grid-auto-rows: min-content;
+    align-items: start;
 }
 
 // Use this when you want a full-page-width grid container
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
index 8687373f8ad..4f7e51cfd02 100644
--- a/site/gdocs/OwidGdoc.tsx
+++ b/site/gdocs/OwidGdoc.tsx
@@ -21,6 +21,7 @@ import { DebugProvider } from "./DebugContext.js"
 import { OwidGdocHeader } from "./OwidGdocHeader.js"
 import StickyNav from "../blocks/StickyNav.js"
 import { getShortPageCitation } from "./utils.js"
+import { TableOfContents } from "../TableOfContents.js"
 export const AttachmentsContext = createContext<{
     linkedCharts: Record<string, LinkedChart>
     linkedDocuments: Record<string, OwidGdocInterface>
@@ -70,6 +71,7 @@ export function OwidGdoc({
         publishedAt
     )
     const citationText = `${shortPageCitation} Published online at OurWorldInData.org. Retrieved from: '${`${BAKED_BASE_URL}/${slug}`}' [Online Resource]`
+    const hasSidebarToc = content["sidebar-toc"]
 
     const bibtex = `@article{owid-${slug.replace(/\//g, "-")},
     author = {${formatAuthors({
@@ -119,6 +121,12 @@ export function OwidGdoc({
                         publishedAt={publishedAt}
                         breadcrumbs={breadcrumbs ?? undefined}
                     />
+                    {hasSidebarToc && content.toc ? (
+                        <TableOfContents
+                            headings={content.toc}
+                            pageTitle={content.title || ""}
+                        />
+                    ) : null}
                     {content.type === "topic-page" && stickyNavLinks?.length ? (
                         <nav className="sticky-nav sticky-nav--dark span-cols-14 grid grid-cols-12-full-width">
                             <StickyNav
diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index 2e6d1c48d29..b18a0dd38bf 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -23,6 +23,46 @@
             color: $vermillion !important;
         }
     }
+
+    .toc-wrapper {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        margin-top: -48px;
+        .entry-sidebar {
+            height: 100vh;
+            position: absolute;
+            transition: margin 300ms ease;
+            width: calc(50vw - 330px);
+            margin-left: calc(-50vw + 330px);
+            .toggle-toc {
+                margin-left: 0;
+                transform: translateX(calc(100% + 16px));
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                padding: 16px 0;
+                pointer-events: none;
+                display: unset;
+                transition: transform 300ms ease;
+                button {
+                    @include popover-box-button;
+                    z-index: 20;
+                    position: sticky;
+                    top: 16px;
+                    pointer-events: auto;
+                    white-space: nowrap;
+                }
+            }
+            &.entry-sidebar--is-open {
+                margin-left: 0;
+                .toggle-toc {
+                    transform: translateX(-16px);
+                }
+            }
+        }
+    }
 }
 
 $banner-height: 200px;

From a4d3ed39c6b1699fc6413f1e6243f59dac27a719 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 22:59:40 +0000
Subject: [PATCH 02/17] =?UTF-8?q?=E2=9C=A8=20reduce=20gdoc=20sidebar=20max?=
 =?UTF-8?q?-width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/centered-article.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index b18a0dd38bf..634837af792 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -33,8 +33,8 @@
             height: 100vh;
             position: absolute;
             transition: margin 300ms ease;
-            width: calc(50vw - 330px);
-            margin-left: calc(-50vw + 330px);
+            width: 400px;
+            margin-left: -400px;
             .toggle-toc {
                 margin-left: 0;
                 transform: translateX(calc(100% + 16px));

From c4830d7db277de9eb8c0dfb9be10958afd6ce176 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 23:10:46 +0000
Subject: [PATCH 03/17] =?UTF-8?q?=F0=9F=94=A8=20disconnect=20intersection?=
 =?UTF-8?q?=20observer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/TableOfContents.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx
index fc833735944..d5e0511796f 100644
--- a/site/TableOfContents.tsx
+++ b/site/TableOfContents.tsx
@@ -115,7 +115,10 @@ export const TableOfContents = ({
             contentHeadings.forEach((contentHeading) => {
                 observer.observe(contentHeading)
             })
+
+            return () => observer.disconnect()
         }
+        return
     }, [headings, hideSubheadings])
 
     return (

From 696d80d6d87bed9d2016e13fc481245856a605ab Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 23:10:57 +0000
Subject: [PATCH 04/17] =?UTF-8?q?=E2=9C=A8=20gdocs=20sidebar=20mobile=20wi?=
 =?UTF-8?q?dth?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/centered-article.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index 634837af792..a8b4cb0d453 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -35,6 +35,10 @@
             transition: margin 300ms ease;
             width: 400px;
             margin-left: -400px;
+            @include sm-only {
+                width: 100vw;
+                margin-left: -100vw;
+            }
             .toggle-toc {
                 margin-left: 0;
                 transform: translateX(calc(100% + 16px));

From 55b7fd40a9098f6a4f302984d39cea72d40cc45d Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 23:20:43 +0000
Subject: [PATCH 05/17] =?UTF-8?q?=E2=9C=A8=20set=20sidebar-toc:=20true=20i?=
 =?UTF-8?q?n=20migrateWpPostsToArchie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/migrateWpPostsToArchieMl.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/db/migrateWpPostsToArchieMl.ts b/db/migrateWpPostsToArchieMl.ts
index 3527df446a3..971ab366371 100644
--- a/db/migrateWpPostsToArchieMl.ts
+++ b/db/migrateWpPostsToArchieMl.ts
@@ -170,6 +170,7 @@ const migrate = async (): Promise<void> => {
                     // 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,
+                    "sidebar-toc": true,
                 },
                 relatedCharts,
                 published: false,

From f760aa8b28a5dac0974941ef7ca49211d13936a0 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 23:33:36 +0000
Subject: [PATCH 06/17] =?UTF-8?q?=E2=9C=A8=20fork=20toc=20logic=20dependin?=
 =?UTF-8?q?g=20on=20whether=20it's=20for=20the=20sidebar=20or=20sdg-toc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/model/Gdoc/archieToEnriched.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/db/model/Gdoc/archieToEnriched.ts b/db/model/Gdoc/archieToEnriched.ts
index 009aecfcfe6..d656f72c1be 100644
--- a/db/model/Gdoc/archieToEnriched.ts
+++ b/db/model/Gdoc/archieToEnriched.ts
@@ -121,11 +121,13 @@ function generateStickyNav(
 }
 
 function generateToc(
-    body: OwidEnrichedGdocBlock[]
+    body: OwidEnrichedGdocBlock[],
+    // For linear topic pages, we record h1s & h2s
+    // For the sdg-toc, we record h2s & h3s (as it was developed before we decided to use h1s as our top level heading)
+    { primary, secondary }: { primary: number; secondary: number }
 ): TocHeadingWithTitleSupertitle[] {
     const toc: TocHeadingWithTitleSupertitle[] = []
 
-    // track h2s and h3s for the SDG table of contents
     body.forEach((block) =>
         traverseEnrichedBlocks(block, (child) => {
             if (child.type === "heading") {
@@ -134,13 +136,13 @@ function generateToc(
                 const supertitleString = supertitle
                     ? spansToSimpleString(supertitle)
                     : ""
-                if (titleString && (level === 2 || level === 3)) {
+                if (titleString && (level === primary || level === secondary)) {
                     toc.push({
                         title: titleString,
                         supertitle: supertitleString,
                         text: titleString,
                         slug: urlSlug(`${supertitleString} ${titleString}`),
-                        isSubheading: level === 3,
+                        isSubheading: level === secondary,
                     })
                 }
             }
@@ -256,7 +258,13 @@ export const archieToEnriched = (text: string): OwidGdocContent => {
     // Parse elements of the ArchieML into enrichedBlocks
     parsed.body = compact(parsed.body.map(parseRawBlocksToEnrichedBlocks))
 
-    parsed.toc = generateToc(parsed.body)
+    // the sdg-toc was based on h2s and h3s, but linear topic pages are using h1s and h2s
+    // It would be nice to standardise this but it would require a migration, updating CSS, updating Gdocs, etc.
+    const isTocForSidebar = parsed["sidebar-toc"] === "true"
+    const headingLevels = isTocForSidebar
+        ? { primary: 1, secondary: 2 }
+        : { primary: 2, secondary: 3 }
+    parsed.toc = generateToc(parsed.body, headingLevels)
 
     const parsedRefs = parseRefs({
         refs: [...(parsed.refs ?? []), ...rawInlineRefs],

From 9ae7422c8a94300cc36e3d205c8dd2245d8ef189 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 23:44:17 +0000
Subject: [PATCH 07/17] =?UTF-8?q?=F0=9F=90=9B=20include=20sidebar-toc=20wh?=
 =?UTF-8?q?en=20generating=20gdoc=20front-matter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/model/Gdoc/archieToGdoc.ts | 1 +
 db/model/Gdoc/rawToArchie.ts  | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/db/model/Gdoc/archieToGdoc.ts b/db/model/Gdoc/archieToGdoc.ts
index 8af069e48c5..cc61fe8e8c1 100644
--- a/db/model/Gdoc/archieToGdoc.ts
+++ b/db/model/Gdoc/archieToGdoc.ts
@@ -49,6 +49,7 @@ function* owidArticleToArchieMLStringGenerator(
         }
         yield "[]"
     }
+    yield* propertyToArchieMLString("sidebar-toc", article)
     // TODO: inline refs
     yieldMultiBlockPropertyIfDefined("summary", article, article.summary)
     yield* propertyToArchieMLString("hide-citation", article)
diff --git a/db/model/Gdoc/rawToArchie.ts b/db/model/Gdoc/rawToArchie.ts
index 0619718d1fc..651bd49db76 100644
--- a/db/model/Gdoc/rawToArchie.ts
+++ b/db/model/Gdoc/rawToArchie.ts
@@ -39,8 +39,9 @@ import {
 import { match } from "ts-pattern"
 
 export function appendDotEndIfMultiline(
-    line: string | null | undefined
+    line: string | boolean | null | undefined
 ): string {
+    if (typeof line === "boolean") return line ? "true" : "false"
     if (line && line.includes("\n")) return line + "\n:end"
     return line ?? ""
 }

From edda1fcf1c6cb348aa7dc3e5288cb026f0b2a769 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Fri, 27 Oct 2023 23:47:39 +0000
Subject: [PATCH 08/17] =?UTF-8?q?=F0=9F=94=A8=20remove=20change=20to=20.gr?=
 =?UTF-8?q?id=20class=20that=20is=20no=20longer=20necessary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/css/grid.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/css/grid.scss b/site/css/grid.scss
index a8227b71ced..98c90e484c6 100644
--- a/site/css/grid.scss
+++ b/site/css/grid.scss
@@ -56,7 +56,6 @@ $grid-responsive: (lg, md, sm);
     gap: 0 var(--grid-gap);
     grid-template-columns: repeat(12, 1fr);
     grid-auto-rows: min-content;
-    align-items: start;
 }
 
 // Use this when you want a full-page-width grid container

From 013e4f3f04cb35c4e7ce00748b67d1c80ff03cbb Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Sat, 28 Oct 2023 00:37:05 +0000
Subject: [PATCH 09/17] =?UTF-8?q?=E2=9C=A8=20gdoc=20sidebar=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/centered-article.scss | 68 ++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index a8b4cb0d453..5563a3f6b85 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -35,10 +35,47 @@
             transition: margin 300ms ease;
             width: 400px;
             margin-left: -400px;
+            box-shadow: none;
             @include sm-only {
                 width: 100vw;
                 margin-left: -100vw;
             }
+            @include sm-up {
+                ul {
+                    margin-left: 32px;
+                }
+            }
+
+            li {
+                &.section {
+                    margin-top: 24px;
+                }
+                a {
+                    padding-left: 16px;
+                }
+            }
+            li.section a,
+            li.subsection a {
+                border-width: 6px;
+                padding-right: 32px;
+                margin-left: 0;
+                color: $blue-90;
+
+                &:hover {
+                    background: none;
+                    text-decoration: underline;
+                }
+            }
+
+            li.subsection a {
+                color: $blue-60;
+                margin-left: 16px;
+            }
+
+            li.active a {
+                border-left-color: $vermillion;
+                background: unset;
+            }
             .toggle-toc {
                 margin-left: 0;
                 transform: translateX(calc(100% + 16px));
@@ -57,12 +94,43 @@
                     top: 16px;
                     pointer-events: auto;
                     white-space: nowrap;
+                    box-shadow: none;
+                    background: #fff;
+                    border: 1px solid $blue-20;
+                    line-height: 1.25;
+                    padding: 6px;
+                    border-radius: 4px;
+
+                    &:hover {
+                        background: #fff;
+                        svg {
+                            color: $blue-100;
+                        }
+                    }
+                    svg {
+                        margin-right: 0;
+                        color: $blue-90;
+                        height: 12px;
+                    }
+
+                    span {
+                        color: $blue-90;
+                        margin-left: 5px;
+                        position: relative;
+                        top: 1px;
+                    }
                 }
             }
             &.entry-sidebar--is-open {
                 margin-left: 0;
                 .toggle-toc {
                     transform: translateX(-16px);
+                    button {
+                        border: none;
+                        span {
+                            display: none;
+                        }
+                    }
                 }
             }
         }

From 9919f7e1aafdad531141d64fb1b9799a9e36fa32 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Sat, 28 Oct 2023 00:41:04 +0000
Subject: [PATCH 10/17] =?UTF-8?q?=E2=9C=A8=20correct=20colour=20for=20side?=
 =?UTF-8?q?bar=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/centered-article.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index 5563a3f6b85..ae7f4f8d0c2 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -52,6 +52,7 @@
                 }
                 a {
                     padding-left: 16px;
+                    color: $blue-90;
                 }
             }
             li.section a,
@@ -59,7 +60,6 @@
                 border-width: 6px;
                 padding-right: 32px;
                 margin-left: 0;
-                color: $blue-90;
 
                 &:hover {
                     background: none;

From a306481146937ec359d2da1c8711f5a74120adfd Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Sat, 28 Oct 2023 01:10:37 +0000
Subject: [PATCH 11/17] =?UTF-8?q?=F0=9F=90=9B=20partial=20fix=20for=20glit?=
 =?UTF-8?q?chy=20sidebar=20behaviour?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/TableOfContents.tsx | 19 ++++++++++++++++---
 site/gdocs/OwidGdoc.tsx  |  1 +
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx
index d5e0511796f..af43510eec8 100644
--- a/site/TableOfContents.tsx
+++ b/site/TableOfContents.tsx
@@ -12,6 +12,10 @@ interface TableOfContentsData {
     headings: TocHeading[]
     pageTitle: string
     hideSubheadings?: boolean
+    headingLevels?: {
+        primary: number
+        secondary: number
+    }
 }
 
 const isRecordTopViewport = (record: IntersectionObserverEntry) => {
@@ -34,9 +38,16 @@ export const TableOfContents = ({
     headings,
     pageTitle,
     hideSubheadings,
+    // Original WP articles used a hierarchy of h2 and h3 headings
+    // New Gdoc articles use a hierarchy of h1 and h2 headings
+    headingLevels = {
+        primary: 2,
+        secondary: 3,
+    },
 }: TableOfContentsData) => {
     const [isOpen, setIsOpen] = useState(false)
     const [activeHeading, setActiveHeading] = useState("")
+    const { primary, secondary } = headingLevels
     const tocRef = useRef<HTMLElement>(null)
 
     const toggleIsOpen = () => {
@@ -108,9 +119,11 @@ export const TableOfContents = ({
 
             let contentHeadings = null
             if (hideSubheadings) {
-                contentHeadings = document.querySelectorAll("h2")
+                contentHeadings = document.querySelectorAll(`h${secondary}`)
             } else {
-                contentHeadings = document.querySelectorAll("h2, h3")
+                contentHeadings = document.querySelectorAll(
+                    `h${primary}, h${secondary}`
+                )
             }
             contentHeadings.forEach((contentHeading) => {
                 observer.observe(contentHeading)
@@ -119,7 +132,7 @@ export const TableOfContents = ({
             return () => observer.disconnect()
         }
         return
-    }, [headings, hideSubheadings])
+    }, [headings, hideSubheadings, primary, secondary])
 
     return (
         <div className={TOC_WRAPPER_CLASSNAME}>
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
index 4f7e51cfd02..8e60cd2489e 100644
--- a/site/gdocs/OwidGdoc.tsx
+++ b/site/gdocs/OwidGdoc.tsx
@@ -124,6 +124,7 @@ export function OwidGdoc({
                     {hasSidebarToc && content.toc ? (
                         <TableOfContents
                             headings={content.toc}
+                            headingLevels={{ primary: 1, secondary: 2 }}
                             pageTitle={content.title || ""}
                         />
                     ) : null}

From 2f7def26c2417d0e1d7e4e619da1e20938f17e26 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Sat, 28 Oct 2023 13:35:32 +0000
Subject: [PATCH 12/17] =?UTF-8?q?=E2=9C=A8=20Add=20sidebar=20entry=20for?=
 =?UTF-8?q?=20all=20charts=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/model/Gdoc/archieToEnriched.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/db/model/Gdoc/archieToEnriched.ts b/db/model/Gdoc/archieToEnriched.ts
index d656f72c1be..db6c554dcff 100644
--- a/db/model/Gdoc/archieToEnriched.ts
+++ b/db/model/Gdoc/archieToEnriched.ts
@@ -146,6 +146,14 @@ function generateToc(
                     })
                 }
             }
+            if (child.type === "all-charts") {
+                toc.push({
+                    title: child.heading,
+                    text: child.heading,
+                    slug: ALL_CHARTS_ID,
+                    isSubheading: false,
+                })
+            }
         })
     )
 

From 1b88d9997392e8370d7ae05a1cf3db8d1b1404fc Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Sun, 29 Oct 2023 15:35:26 -0400
Subject: [PATCH 13/17] =?UTF-8?q?=F0=9F=90=9B=20increase=20sidebar=20toc?=
 =?UTF-8?q?=20z=20index=20above=20explorer=20chrome?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 baker/SiteBaker.tsx              | 1 +
 site/gdocs/centered-article.scss | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
index 5dcf3c4bd64..d73fa5fcddb 100644
--- a/baker/SiteBaker.tsx
+++ b/baker/SiteBaker.tsx
@@ -308,6 +308,7 @@ export class SiteBaker {
 
     // Bake all GDoc posts
     async bakeGDocPosts() {
+        await db.getConnection()
         if (!this.bakeSteps.has("gdocPosts")) return
         const publishedGdocs = await Gdoc.getPublishedGdocs()
 
diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index ae7f4f8d0c2..a24c64dcfae 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -27,7 +27,8 @@
     .toc-wrapper {
         position: sticky;
         top: 0;
-        z-index: 2;
+        // Above explorer chrome
+        z-index: 3;
         margin-top: -48px;
         .entry-sidebar {
             height: 100vh;

From 112cd1149d7b6c61a58640fe76e4336c24a2bb47 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Wed, 1 Nov 2023 12:03:35 -0400
Subject: [PATCH 14/17] =?UTF-8?q?=F0=9F=90=9B=20only=20add=20sidebar-toc?=
 =?UTF-8?q?=20for=20entries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/migrateWpPostsToArchieMl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/db/migrateWpPostsToArchieMl.ts b/db/migrateWpPostsToArchieMl.ts
index 971ab366371..d38a1d3b707 100644
--- a/db/migrateWpPostsToArchieMl.ts
+++ b/db/migrateWpPostsToArchieMl.ts
@@ -170,7 +170,7 @@ const migrate = async (): Promise<void> => {
                     // 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,
-                    "sidebar-toc": true,
+                    "sidebar-toc": isEntry,
                 },
                 relatedCharts,
                 published: false,

From 7aaf4bba96fbaadf23878812a8644ade8a8433ad Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Wed, 1 Nov 2023 12:58:55 -0400
Subject: [PATCH 15/17] =?UTF-8?q?=E2=9C=A8=20sidebar=20working=20with=20gd?=
 =?UTF-8?q?ocs=20endnotes,=20licence,=20citation=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/model/Gdoc/archieToEnriched.ts | 38 +++++++++++++++++++++++--------
 site/TableOfContents.tsx          |  9 ++++++--
 site/gdocs/centered-article.scss  |  3 ++-
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/db/model/Gdoc/archieToEnriched.ts b/db/model/Gdoc/archieToEnriched.ts
index db6c554dcff..d52dc1d2079 100644
--- a/db/model/Gdoc/archieToEnriched.ts
+++ b/db/model/Gdoc/archieToEnriched.ts
@@ -122,10 +122,12 @@ function generateStickyNav(
 
 function generateToc(
     body: OwidEnrichedGdocBlock[],
+    isTocForSidebar: boolean = false
+): TocHeadingWithTitleSupertitle[] {
     // For linear topic pages, we record h1s & h2s
     // For the sdg-toc, we record h2s & h3s (as it was developed before we decided to use h1s as our top level heading)
-    { primary, secondary }: { primary: number; secondary: number }
-): TocHeadingWithTitleSupertitle[] {
+    // It would be nice to standardise this but it would require a migration, updating CSS, updating Gdocs, etc.
+    const [primary, secondary] = isTocForSidebar ? [1, 2] : [2, 3]
     const toc: TocHeadingWithTitleSupertitle[] = []
 
     body.forEach((block) =>
@@ -146,7 +148,7 @@ function generateToc(
                     })
                 }
             }
-            if (child.type === "all-charts") {
+            if (isTocForSidebar && child.type === "all-charts") {
                 toc.push({
                     title: child.heading,
                     text: child.heading,
@@ -157,6 +159,29 @@ function generateToc(
         })
     )
 
+    if (isTocForSidebar) {
+        toc.push(
+            {
+                title: "Endnotes",
+                text: "Endnotes",
+                slug: "article-endnotes",
+                isSubheading: false,
+            },
+            {
+                title: "Citation",
+                text: "Citation",
+                slug: "article-citation",
+                isSubheading: false,
+            },
+            {
+                title: "Licence",
+                text: "Licence",
+                slug: "article-licence",
+                isSubheading: false,
+            }
+        )
+    }
+
     return toc
 }
 
@@ -266,13 +291,8 @@ export const archieToEnriched = (text: string): OwidGdocContent => {
     // Parse elements of the ArchieML into enrichedBlocks
     parsed.body = compact(parsed.body.map(parseRawBlocksToEnrichedBlocks))
 
-    // the sdg-toc was based on h2s and h3s, but linear topic pages are using h1s and h2s
-    // It would be nice to standardise this but it would require a migration, updating CSS, updating Gdocs, etc.
     const isTocForSidebar = parsed["sidebar-toc"] === "true"
-    const headingLevels = isTocForSidebar
-        ? { primary: 1, secondary: 2 }
-        : { primary: 2, secondary: 3 }
-    parsed.toc = generateToc(parsed.body, headingLevels)
+    parsed.toc = generateToc(parsed.body, isTocForSidebar)
 
     const parsedRefs = parseRefs({
         refs: [...(parsed.refs ?? []), ...rawInlineRefs],
diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx
index af43510eec8..2511c13b0d8 100644
--- a/site/TableOfContents.tsx
+++ b/site/TableOfContents.tsx
@@ -118,11 +118,16 @@ export const TableOfContents = ({
             )
 
             let contentHeadings = null
+            // In Gdocs articles, these sections are ID'd via unique elements
+            const appendixDivs =
+                ", h3#article-endnotes, section#article-citation, section#article-licence"
             if (hideSubheadings) {
-                contentHeadings = document.querySelectorAll(`h${secondary}`)
+                contentHeadings = document.querySelectorAll(
+                    `h${secondary} ${appendixDivs}`
+                )
             } else {
                 contentHeadings = document.querySelectorAll(
-                    `h${primary}, h${secondary}`
+                    `h${primary}, h${secondary} ${appendixDivs}`
                 )
             }
             contentHeadings.forEach((contentHeading) => {
diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index a24c64dcfae..e9c8964218c 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -27,6 +27,7 @@
     .toc-wrapper {
         position: sticky;
         top: 0;
+        height: 0;
         // Above explorer chrome
         z-index: 3;
         margin-top: -48px;
@@ -58,7 +59,7 @@
             }
             li.section a,
             li.subsection a {
-                border-width: 6px;
+                border-width: 4px;
                 padding-right: 32px;
                 margin-left: 0;
 

From 71b46ec5518f7614163c68695b0d661df879f361 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Wed, 1 Nov 2023 15:32:59 -0400
Subject: [PATCH 16/17] =?UTF-8?q?=E2=9C=A8=20sidebar=20css=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/centered-article.scss | 43 +++++++++++++++++---------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index e9c8964218c..b26e1d88b0c 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -49,35 +49,38 @@
             }
 
             li {
+                &:first-child {
+                    margin-top: 36px;
+                }
+
                 &.section {
-                    margin-top: 24px;
+                    margin-top: 20px;
+                }
+                &.subsection a {
+                    color: $blue-60;
+                    margin-left: 16px;
+                    line-height: 1.125em;
+                }
+                &.active a {
+                    border-left-color: $vermillion;
+                    background: unset;
+                    font-weight: bold;
                 }
                 a {
                     padding-left: 16px;
                     color: $blue-90;
-                }
-            }
-            li.section a,
-            li.subsection a {
-                border-width: 4px;
-                padding-right: 32px;
-                margin-left: 0;
+                    border-width: 4px;
+                    padding-right: 32px;
+                    margin-left: 0;
+                    font-weight: 400;
 
-                &:hover {
-                    background: none;
-                    text-decoration: underline;
+                    &:hover {
+                        background: none;
+                        text-decoration: underline;
+                    }
                 }
             }
 
-            li.subsection a {
-                color: $blue-60;
-                margin-left: 16px;
-            }
-
-            li.active a {
-                border-left-color: $vermillion;
-                background: unset;
-            }
             .toggle-toc {
                 margin-left: 0;
                 transform: translateX(calc(100% + 16px));

From 3baee548c86db3feadd5cf0f0b87e1a8979bd181 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Wed, 1 Nov 2023 19:54:30 +0000
Subject: [PATCH 17/17] =?UTF-8?q?=E2=9C=A8=20sidebar=20ux=20changes=20for?=
 =?UTF-8?q?=20desktop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/TableOfContents.tsx | 16 ++++++++++++++--
 site/hooks.ts            |  2 ++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx
index 2511c13b0d8..1b283bb4f83 100644
--- a/site/TableOfContents.tsx
+++ b/site/TableOfContents.tsx
@@ -53,9 +53,21 @@ export const TableOfContents = ({
     const toggleIsOpen = () => {
         setIsOpen(!isOpen)
     }
+    // The Gdocs sidebar can't rely on the same CSS logic that old-style entries use, so we need to
+    // explicitly trigger these toggles based on screen width
+    const toggleIsOpenOnMobile = () => {
+        if (window.innerWidth < 1536) {
+            toggleIsOpen()
+        }
+    }
 
     useTriggerWhenClickOutside(tocRef, isOpen, setIsOpen)
 
+    // Open the sidebar on desktop by default when mounting
+    useEffect(() => {
+        setIsOpen(window.innerWidth >= 1536)
+    }, [])
+
     useEffect(() => {
         if ("IntersectionObserver" in window) {
             const previousHeadings = headings.map((heading, i) => ({
@@ -152,7 +164,7 @@ export const TableOfContents = ({
                         <li>
                             <a
                                 onClick={() => {
-                                    toggleIsOpen()
+                                    toggleIsOpenOnMobile()
                                     setActiveHeading("")
                                 }}
                                 href="#"
@@ -180,7 +192,7 @@ export const TableOfContents = ({
                                     }
                                 >
                                     <a
-                                        onClick={toggleIsOpen}
+                                        onClick={toggleIsOpenOnMobile}
                                         href={`#${heading.slug}`}
                                         data-track-note="toc_link"
                                     >
diff --git a/site/hooks.ts b/site/hooks.ts
index 275e8af2bcb..471853695a8 100644
--- a/site/hooks.ts
+++ b/site/hooks.ts
@@ -9,6 +9,8 @@ export const useTriggerWhenClickOutside = (
 ) => {
     useEffect(() => {
         if (!active) return
+        // Don't toggle if viewport width is xxlg or larger
+        if (window.innerWidth >= 1536) return
         const handleClick = (e: MouseEvent) => {
             if (container && !container.current?.contains(e.target as Node)) {
                 trigger(false)