From 014d419e8444655ef4899f57896bd4e49431dee7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= Date: Tue, 26 Nov 2024 11:35:02 +0100 Subject: [PATCH] Add new about page template --- .../types/src/gdocTypes/Gdoc.ts | 17 +++++ packages/@ourworldindata/types/src/index.ts | 2 + site/gdocs/OwidGdoc.tsx | 7 +- site/gdocs/components/OwidGdocHeader.tsx | 5 +- site/gdocs/pages/AboutPage.scss | 74 +++++++++++++++++++ site/gdocs/pages/AboutPage.tsx | 52 +++++++++++++ site/owid.scss | 1 + 7 files changed, 152 insertions(+), 6 deletions(-) create mode 100644 site/gdocs/pages/AboutPage.scss create mode 100644 site/gdocs/pages/AboutPage.tsx diff --git a/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts b/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts index 0d8a7c64cb0..378f3c33299 100644 --- a/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts +++ b/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 diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts index 562dd93191d..1d5808c615f 100644 --- a/packages/@ourworldindata/types/src/index.ts +++ b/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, diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx index 122455fef22..e21685689c7 100644 --- a/site/gdocs/OwidGdoc.tsx +++ b/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) => ) + .with({ content: { type: OwidGdocType.AboutPage } }, (props) => ( + + )) .with({ content: { type: OwidGdocType.DataInsight } }, (props) => ( )) diff --git a/site/gdocs/components/OwidGdocHeader.tsx b/site/gdocs/components/OwidGdocHeader.tsx index c97ba5a92ac..413f5eeabd4 100644 --- a/site/gdocs/components/OwidGdocHeader.tsx +++ b/site/gdocs/components/OwidGdocHeader.tsx @@ -174,10 +174,7 @@ export function OwidGdocHeader(props: { return if (props.content.type === OwidGdocType.TopicPage) return - if ( - props.content.type === OwidGdocType.LinearTopicPage || - props.content.type === OwidGdocType.AboutPage - ) + if (props.content.type === OwidGdocType.LinearTopicPage) return // Defaulting to ArticleHeader, but will require the value to be set for all docs going forward return diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss new file mode 100644 index 00000000000..4dfb8fe079a --- /dev/null +++ b/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; + } + } +} diff --git a/site/gdocs/pages/AboutPage.tsx b/site/gdocs/pages/AboutPage.tsx new file mode 100644 index 00000000000..a5f91ed4868 --- /dev/null +++ b/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 ( +
+

+ About +

+ +
+ +
+
+ ) +} + +function AboutNav({ slug }: { slug: string }) { + return ( + + ) +} diff --git a/site/owid.scss b/site/owid.scss index f80ce84450d..7bd853d8c22 100644 --- a/site/owid.scss +++ b/site/owid.scss @@ -119,6 +119,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";