Add new about page template

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

@@ -202,17 +202,32 @@ export interface OwidGdocAuthorInterface extends OwidGdocBaseInterface {
     latestWorkLinks?: DbEnrichedLatestWork[]
 }
 
+export interface OwidGdocAboutContent {
+    type: OwidGdocType.AboutPage
+    title: string
+    excerpt: string
+    "featured-image"?: string
+    authors: string[]
+    body: OwidEnrichedGdocBlock[]
+}
+
+export interface OwidGdocAboutInterface extends OwidGdocBaseInterface {
+    content: OwidGdocAboutContent
+}
+
 export type OwidGdocContent =
     | OwidGdocPostContent
     | OwidGdocDataInsightContent
     | OwidGdocHomepageContent
     | OwidGdocAuthorContent
+    | OwidGdocAboutContent
 
 export type OwidGdoc =
     | OwidGdocPostInterface
     | OwidGdocDataInsightInterface
     | OwidGdocHomepageInterface
     | OwidGdocAuthorInterface
+    | OwidGdocAboutInterface
 
 export enum OwidGdocErrorMessageType {
     Error = "error",
@@ -226,6 +241,8 @@ export type OwidGdocProperty =
     | keyof OwidGdocDataInsightContent
     | keyof OwidGdocAuthorInterface
     | keyof OwidGdocAuthorContent
+    | keyof OwidGdocAboutInterface
+    | keyof OwidGdocAboutContent
 
 export type OwidGdocErrorMessageProperty =
     | OwidGdocProperty

packages/@ourworldindata/types/src/index.ts

@@ -284,6 +284,8 @@ export {
     type OwidGdocErrorMessage,
     OwidGdocErrorMessageType,
     type OwidGdocLinkJSON,
+    type OwidGdocAboutContent,
+    type OwidGdocAboutInterface,
     type OwidGdocAuthorContent,
     type OwidGdocAuthorInterface,
     type OwidGdocBaseInterface,

site/gdocs/OwidGdoc.tsx

@@ -21,6 +21,7 @@ import { DataInsightPage } from "./pages/DataInsight.js"
 import { Fragment } from "./pages/Fragment.js"
 import { Homepage } from "./pages/Homepage.js"
 import { Author } from "./pages/Author.js"
+import AboutPage from "./pages/AboutPage.js"
 
 export type Attachments = {
     linkedAuthors?: LinkedAuthor[]
@@ -79,13 +80,15 @@ export function OwidGdoc({
                     type: P.union(
                         OwidGdocType.Article,
                         OwidGdocType.TopicPage,
-                        OwidGdocType.LinearTopicPage,
-                        OwidGdocType.AboutPage
+                        OwidGdocType.LinearTopicPage
                     ),
                 },
             },
             (props) => <GdocPost {...props} />
         )
+        .with({ content: { type: OwidGdocType.AboutPage } }, (props) => (
+            <AboutPage {...props} />
+        ))
         .with({ content: { type: OwidGdocType.DataInsight } }, (props) => (
             <DataInsightPage {...props} />
         ))

site/gdocs/components/OwidGdocHeader.tsx

@@ -174,10 +174,7 @@ export function OwidGdocHeader(props: {
         return <OwidArticleHeader {...props} />
     if (props.content.type === OwidGdocType.TopicPage)
         return <OwidTopicPageHeader {...props} />
-    if (
-        props.content.type === OwidGdocType.LinearTopicPage ||
-        props.content.type === OwidGdocType.AboutPage
-    )
+    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/pages/AboutPage.scss

@@ -0,0 +1,74 @@
+.about-header {
+    color: $blue-60;
+}
+
+.about-nav {
+    border-bottom: 1px solid $blue-20;
+}
+
+.about-nav-list {
+    display: flex;
+    gap: 8px;
+    list-style: none;
+    padding: 0;
+
+    h2 {
+        margin: 0;
+    }
+}
+
+.about-nav-link {
+    @include body-2-regular;
+    display: block;
+    padding: 16px;
+    color: $blue-60;
+    text-wrap: nowrap;
+
+    &--is-active {
+        @include body-2-semibold;
+        color: $blue-90;
+        border-bottom: 1px solid $vermillion;
+    }
+
+    &:hover {
+        color: $blue-90;
+    }
+}
+
+.about-body {
+    margin-bottom: 80px;
+
+    h2 {
+        @include h1-semibold;
+        color: $blue-60;
+    }
+
+    h2:first-of-type {
+        margin-top: 32px;
+    }
+
+    hr {
+        margin: 40px 0;
+    }
+
+    // Remove some margins since margins don't collapse in display: grid.
+    .article-block__side-by-side {
+        margin: 0;
+    }
+
+    hr + .article-block__side-by-side {
+        h2 {
+            margin-top: 0;
+        }
+
+        *:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .article-block__side-by-side:has(+ hr) {
+        *:last-child {
+            margin-bottom: 0;
+        }
+    }
+}

site/gdocs/pages/AboutPage.tsx

@@ -0,0 +1,52 @@
+import cx from "classnames"
+import * as React from "react"
+
+import { OwidGdocAboutInterface } from "@ourworldindata/types"
+import { ArticleBlocks } from "../components/ArticleBlocks.js"
+
+const NAV_LINKS = [
+    { title: "About Us", href: "/about" },
+    { title: "Organization", href: "/organization" },
+    { title: "Funding", href: "/funding" },
+    { title: "Team", href: "/team" },
+    { title: "Jobs", href: "/jobs" },
+    { title: "FAQs", href: "/faqs" },
+]
+
+export default function AboutPage({ content, slug }: OwidGdocAboutInterface) {
+    return (
+        <main className="grid grid-cols-12-full-width">
+            <h1 className="about-header col-start-2 col-end-limit display-2-semibold">
+                About
+            </h1>
+            <AboutNav slug={slug} />
+            <div className="about-body col-start-2 span-cols-12">
+                <ArticleBlocks blocks={content.body} />
+            </div>
+        </main>
+    )
+}
+
+function AboutNav({ slug }: { slug: string }) {
+    return (
+        <nav className="about-nav grid grid-cols-12-full-width col-start-1 col-end-limit">
+            <ul className="about-nav-list col-start-2">
+                {NAV_LINKS.map(({ title, href }) => (
+                    <li key={href}>
+                        <h2>
+                            <a
+                                className={cx("about-nav-link", {
+                                    "about-nav-link--is-active":
+                                        href === `/${slug}`,
+                                })}
+                                href={href}
+                            >
+                                {title}
+                            </a>
+                        </h2>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    )
+}

site/owid.scss

@@ -118,6 +118,7 @@
 @import "./gdocs/pages/DataInsight.scss";
 @import "./gdocs/pages/Homepage.scss";
 @import "./gdocs/pages/Author.scss";
+@import "./gdocs/pages/AboutPage.scss";
 
 @import "css/donate.scss";
 @import "./ThankYouPage.scss";