🎉 Homepage redesign

.bundlewatch.config.json

@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/assets/common.mjs",
-            "maxSize": "2MB"
+            "maxSize": "2.3MB"
         },
         {
             "path": "./dist/assets/owid.mjs",

adminSiteClient/GdocsIndexPage.tsx

@@ -5,6 +5,7 @@ import { Modal, SearchField } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
 import {
     faCirclePlus,
+    faHouse,
     faLightbulb,
     faNewspaper,
     faPuzzlePiece,
@@ -37,6 +38,7 @@ const iconGdocTypeMap = {
     [OwidGdocType.TopicPage]: <FontAwesomeIcon icon={faLightbulb} />,
     [OwidGdocType.LinearTopicPage]: <FontAwesomeIcon icon={faLightbulb} />,
     [OwidGdocType.DataInsight]: <FontAwesomeIcon icon={faThList} />,
+    [OwidGdocType.Homepage]: <FontAwesomeIcon icon={faHouse} />,
 }
 
 @observer
@@ -113,6 +115,7 @@ export class GdocsIndexPage extends React.Component<GdocsMatchProps> {
         [OwidGdocType.TopicPage]: false,
         [OwidGdocType.LinearTopicPage]: false,
         [OwidGdocType.DataInsight]: false,
+        [OwidGdocType.Homepage]: false,
     }
 
     @observable search = { value: "" }

adminSiteClient/GdocsPreviewPage.tsx

@@ -7,7 +7,11 @@ import React, {
 } from "react"
 import { AdminLayout } from "./AdminLayout.js"
 import { GdocsMatchProps } from "./GdocsIndexPage.js"
-import { GdocPostSettings, GdocInsightSettings } from "./GdocsSettingsForms.js"
+import {
+    GdocPostSettings,
+    GdocInsightSettings,
+    GdocHomepageSettings,
+} from "./GdocsSettingsForms.js"
 import { AdminAppContext } from "./AdminAppContext.js"
 import {
     checkIsPlainObjectWithGuard,
@@ -326,6 +330,19 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
                                 />
                             )
                         )
+                        .with(
+                            {
+                                content: {
+                                    type: OwidGdocType.Homepage,
+                                },
+                            },
+                            (gdoc) => (
+                                <GdocHomepageSettings
+                                    gdoc={gdoc}
+                                    errors={errors}
+                                />
+                            )
+                        )
                         .with(P.any, () => (
                             <div>
                                 Unknown gdoc type. Add a <strong>type</strong>{" "}

adminSiteClient/GdocsSettingsContentField.tsx

@@ -7,6 +7,7 @@ import {
     OwidGdocDataInsightInterface,
     OwidGdocErrorMessageProperty,
     get,
+    OwidGdocHomepageInterface,
 } from "@ourworldindata/utils"
 import { GdocsEditLink } from "./GdocsEditLink.js"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
@@ -21,7 +22,10 @@ export const GdocsSettingsContentField = ({
     errors,
     description,
 }: {
-    gdoc: OwidGdocPostInterface | OwidGdocDataInsightInterface
+    gdoc:
+        | OwidGdocPostInterface
+        | OwidGdocDataInsightInterface
+        | OwidGdocHomepageInterface
     property: OwidGdocErrorMessageProperty
     render?: (props: {
         name: string

adminSiteClient/GdocsSettingsForms.tsx

@@ -4,6 +4,7 @@ import {
     OwidGdocErrorMessage,
     OwidGdocDataInsightInterface,
     OwidGdoc,
+    OwidGdocHomepageInterface,
 } from "@ourworldindata/utils"
 import { EXCERPT_MAX_LENGTH } from "./gdocsValidation.js"
 import { GdocsSlug } from "./GdocsSlug.js"
@@ -202,3 +203,23 @@ export const GdocInsightSettings = ({
         </form>
     )
 }
+
+export const GdocHomepageSettings = ({
+    gdoc,
+    errors,
+}: {
+    gdoc: OwidGdocHomepageInterface
+    errors?: OwidGdocErrorMessage[]
+}) => {
+    if (!gdoc || !errors) return null
+    return (
+        <div className="GdocsSettingsForm">
+            <GdocCommonErrors errors={errors} errorsToFilter={[]} />
+            <div className="form-group">
+                <h3 className="form-section-heading">Homepage settings</h3>
+                <p>The homepage has no custom authors, slug, title, etc.</p>
+                <p>Just hit publish when you'd like to update the page!</p>
+            </div>
+        </div>
+    )
+}

adminSiteClient/gdocsDeploy.ts

@@ -5,6 +5,7 @@ import {
     OwidGdocPostContent,
     OwidGdocDataInsightContent,
     OwidGdocType,
+    OwidGdocHomepageContent,
 } from "@ourworldindata/types"
 import { GDOC_DIFF_OMITTABLE_PROPERTIES } from "./GdocsDiff.js"
 import { GDOCS_DETAILS_ON_DEMAND_ID } from "../settings/clientSettings.js"
@@ -105,13 +106,23 @@ export const checkIsLightningUpdate = (
         body: false, // requires rebaking the feed
         type: false, // shouldn't be changed, but would require rebaking the feed if it was
     }
+    const homepageLightningPropContentConfigMap: Record<
+        keyof OwidGdocHomepageContent,
+        boolean
+    > = {
+        body: true,
+        title: false, // shouldn't be changed, but won't be used in the baked page anyway
+        authors: false, // shouldn't be set, but defaults to "Our World in Data" because it's assumed to exist in the DB
+        type: false, // should never be changed
+    }
 
     const contentPropsMap: Record<OwidGdocType, Record<string, boolean>> = {
         [OwidGdocType.Article]: postlightningPropContentConfigMap,
         [OwidGdocType.Fragment]: postlightningPropContentConfigMap,
         [OwidGdocType.LinearTopicPage]: postlightningPropContentConfigMap,
         [OwidGdocType.TopicPage]: postlightningPropContentConfigMap,
         [OwidGdocType.DataInsight]: dataInsightLightningPropContentConfigMap,
+        [OwidGdocType.Homepage]: homepageLightningPropContentConfigMap,
     }
 
     const getLightningPropKeys = (configMap: Record<string, boolean>) =>

baker/SiteBaker.tsx

@@ -685,8 +685,7 @@ export class SiteBaker {
 
     private async bakeDataInsights() {
         if (!this.bakeSteps.has("dataInsights")) return
-        const latestDataInsights =
-            await GdocDataInsight.loadLatestDataInsights()
+        const latestDataInsights = await db.getLatestDataInsights()
         const publishedDataInsights =
             await GdocDataInsight.getPublishedDataInsights()
 

baker/siteRenderers.tsx

@@ -76,6 +76,7 @@ import {
     KEY_INSIGHTS_CLASS_NAME,
 } from "../site/blocks/KeyInsights.js"
 import { formatUrls, KEY_INSIGHTS_H2_CLASSNAME } from "../site/formatting.js"
+import * as db from "../db/db.js"
 
 import { GrapherProgrammaticInterface } from "@ourworldindata/grapher"
 import { ExplorerProgram } from "../explorer/ExplorerProgram.js"
@@ -242,7 +243,23 @@ export const renderPost = async (
     )
 }
 
+// This function is temporarily forked until we have fully transitioned to a gdocs homepage,
+// whereupon we'll strip out the old front page code.
 export const renderFrontPage = async () => {
+    // Annoying, MySQL+TypeORM doesn't support JSONB, so I'm using raw SQL to confirm if there's a published homepage
+    const gdocHomepageResult = await db.knexRawFirst<{ id: string }>(
+        `SELECT id FROM posts_gdocs WHERE content->>"$.type" = "${OwidGdocType.Homepage}" AND published = TRUE`,
+        db.knexInstance()
+    )
+
+    if (gdocHomepageResult) {
+        const gdocHomepage = await GdocFactory.load(gdocHomepageResult.id)
+        if (gdocHomepage) {
+            await gdocHomepage.loadState()
+            return renderGdoc(gdocHomepage)
+        }
+    }
+
     const posts = await getBlogIndex()
 
     const NUM_FEATURED_POSTS = 6

db/db.ts

@@ -11,7 +11,11 @@ import {
 } from "../settings/serverSettings.js"
 import { registerExitHandler } from "./cleanup.js"
 import { keyBy } from "@ourworldindata/utils"
-import { DbChartTagJoin } from "@ourworldindata/types"
+import {
+    DbChartTagJoin,
+    MinimalDataInsightInterface,
+    OwidGdocType,
+} from "@ourworldindata/types"
 let typeormDataSource: DataSource
 
 export const getConnection = async (
@@ -204,3 +208,63 @@ export const getPublishedExplorersBySlug = async (
         return keyBy(processed, "slug")
     })
 }
+
+export const getLatestDataInsights = (
+    limit = 5
+): Promise<MinimalDataInsightInterface[]> => {
+    return knexRaw(
+        `
+        SELECT
+            content->>'$.title' AS title,
+            publishedAt,
+            ROW_NUMBER() OVER (ORDER BY publishedAt DESC) - 1 AS \`index\`
+        FROM posts_gdocs
+        WHERE content->>'$.type' = '${OwidGdocType.DataInsight}'
+            AND published = TRUE
+            AND publishedAt < NOW()
+        ORDER BY publishedAt DESC
+        LIMIT ?
+        `,
+        knexInstance(),
+        [limit]
+    ).then((results) =>
+        results.map((record: any) => ({
+            ...record,
+            index: Number(record.index),
+        }))
+    ) as Promise<MinimalDataInsightInterface[]>
+}
+
+export const getPublishedDataInsightCount = (): Promise<number> => {
+    return knexRawFirst<{ count: number }>(
+        `SELECT COUNT(*) AS count
+        FROM posts_gdocs
+        WHERE content->>'$.type' = '${OwidGdocType.DataInsight}'
+            AND published = TRUE
+            AND publishedAt < NOW()`,
+        knexInstance()
+    ).then((res) => res?.count ?? 0)
+}
+
+export const getTotalNumberOfCharts = (): Promise<number> => {
+    return knexRawFirst<{ count: number }>(
+        `
+        SELECT COUNT(*) AS count
+        FROM charts
+        WHERE publishedAt IS NOT NULL`,
+        knexInstance()
+    ).then((res) => res?.count ?? 0)
+}
+
+export const getTotalNumberOfTopics = (): Promise<number> => {
+    return knexRawFirst<{ count: number }>(
+        `
+        SELECT COUNT(DISTINCT(tagId)) AS count
+        FROM chart_tags
+        WHERE chartId IN (
+        SELECT id
+        FROM charts
+        WHERE publishedAt IS NOT NULL)`,
+        knexInstance()
+    ).then((res) => res?.count ?? 0)
+}

db/model/Gdoc/GdocBase.ts

@@ -194,6 +194,13 @@ export class GdocBase extends BaseEntity implements OwidGdocBaseInterface {
                                 }
                             })
                         }
+                        if (item.type === "homepage-intro") {
+                            item.featuredWork.forEach((featuredWork) => {
+                                if (featuredWork.filename) {
+                                    filenames.add(featuredWork.filename)
+                                }
+                            })
+                        }
                     }
                     return item
                 })
@@ -528,6 +535,29 @@ export class GdocBase extends BaseEntity implements OwidGdocBaseInterface {
                     }),
                 ]
             })
+            .with({ type: "pill-row" }, (pillRow) => {
+                return pillRow.pills.map((pill) =>
+                    Link.createFromUrl({
+                        url: pill.url,
+                        source: this,
+                        componentType: pillRow.type,
+                        text: pill.text,
+                    })
+                )
+            })
+            .with({ type: "homepage-intro" }, (homepageIntro) => {
+                return homepageIntro.featuredWork.map((featuredWork) =>
+                    Link.createFromUrl({
+                        url: featuredWork.url,
+                        source: this,
+                        componentType: homepageIntro.type,
+                        text:
+                            featuredWork.title ||
+                            featuredWork.description ||
+                            "",
+                    })
+                )
+            })
             .with(
                 {
                     // no urls directly on any of these blocks
@@ -557,7 +587,9 @@ export class GdocBase extends BaseEntity implements OwidGdocBaseInterface {
                         "sticky-left",
                         "sticky-right",
                         "table",
-                        "text"
+                        "text",
+                        "homepage-search",
+                        "latest-data-insights"
                     ),
                 },
                 () => []

db/model/Gdoc/GdocDataInsight.ts

@@ -10,7 +10,7 @@ import {
     OwidGdocMinimalPostInterface,
 } from "@ourworldindata/utils"
 import { GdocBase } from "./GdocBase.js"
-import { getConnection } from "../../../db/db.js"
+import * as db from "../../../db/db.js"
 
 @Entity("posts_gdocs")
 export class GdocDataInsight
@@ -45,30 +45,7 @@ export class GdocDataInsight
     }
 
     _loadSubclassAttachments = async (): Promise<void> => {
-        this.latestDataInsights = await GdocDataInsight.loadLatestDataInsights()
-    }
-
-    static async loadLatestDataInsights(): Promise<
-        MinimalDataInsightInterface[]
-    > {
-        const c = await getConnection()
-        return (
-            await c.query(`
-        SELECT
-            content->>'$.title' AS title,
-            publishedAt,
-            ROW_NUMBER() OVER (ORDER BY publishedAt DESC) - 1 AS \`index\`
-        FROM posts_gdocs
-        WHERE content->>'$.type' = '${OwidGdocType.DataInsight}'
-            AND published = TRUE
-            AND publishedAt < NOW()
-        ORDER BY publishedAt DESC
-        LIMIT 5
-        `)
-        ).map((record: any) => ({
-            ...record,
-            index: Number(record.index),
-        })) as MinimalDataInsightInterface[]
+        this.latestDataInsights = await db.getLatestDataInsights()
     }
 
     static async getPublishedDataInsights(
@@ -93,24 +70,12 @@ export class GdocDataInsight
         })
     }
 
-    static async getPublishedDataInsightCount(): Promise<number> {
-        const c = await getConnection()
-        const query = `
-            SELECT COUNT(*) AS count
-            FROM posts_gdocs
-            WHERE content->>'$.type' = '${OwidGdocType.DataInsight}'
-                AND published = TRUE
-                AND publishedAt < NOW()
-        `
-        return (await c.query(query))[0].count
-    }
-
     /**
      * Returns the number of pages that will exist on the data insights index page
      * based on the number of published data insights and DATA_INSIGHTS_INDEX_PAGE_SIZE
      */
     static async getTotalPageCount(): Promise<number> {
-        const count = await GdocDataInsight.getPublishedDataInsightCount()
+        const count = await db.getPublishedDataInsightCount()
         return Math.ceil(count / DATA_INSIGHTS_INDEX_PAGE_SIZE)
     }
 }