feat(author): add featured work

site/gdocs/components/ResearchAndWriting.tsx

@@ -4,11 +4,13 @@ import {
     EnrichedBlockResearchAndWriting,
     EnrichedBlockResearchAndWritingLink,
     RESEARCH_AND_WRITING_ID,
+    slugify,
 } from "@ourworldindata/utils"
 import { useLinkedDocument } from "../utils.js"
 import { formatAuthors } from "../../clientFormatting.js"
 import Image from "./Image.js"
 import { DocumentContext } from "../OwidGdoc.js"
+import { RESEARCH_AND_WRITING_DEFAULT_HEADING } from "@ourworldindata/types"
 
 type ResearchAndWritingProps = {
     className?: string
@@ -89,15 +91,18 @@ function ResearchAndWritingLinkContainer(
 }
 
 export function ResearchAndWriting(props: ResearchAndWritingProps) {
-    const { primary, secondary, more, rows, className } = props
+    const { heading, primary, secondary, more, rows, className } = props
+
+    const slug = heading ? slugify(heading) : RESEARCH_AND_WRITING_ID
+
     return (
         <div className={cx(className, "grid")}>
             <h1
                 className="article-block__heading span-cols-12 h1-semibold"
-                id={RESEARCH_AND_WRITING_ID}
+                id={slug}
             >
-                Research & Writing
-                <a className="deep-link" href={`#${RESEARCH_AND_WRITING_ID}`} />
+                {heading || RESEARCH_AND_WRITING_DEFAULT_HEADING}
+                <a className="deep-link" href={`#${slug}`} />
             </h1>
             <div className="span-cols-12 research-and-writing-row">
                 <div className="grid research-and-writing-row__link-container">

site/gdocs/pages/Author.scss

@@ -51,3 +51,7 @@
         margin-right: 8px;
     }
 }
+
+.author-work {
+    background-color: $blue-5;
+}

site/gdocs/pages/Author.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import {
+    OwidEnrichedGdocBlock,
     OwidGdocAuthorContent,
     OwidGdocAuthorInterface,
 } from "@ourworldindata/types"
@@ -55,10 +56,19 @@ const AuthorHeader = (gdoc: OwidGdocAuthorInterface) => {
     )
 }
 
+export const AuthorWork = ({ blocks }: { blocks: OwidEnrichedGdocBlock[] }) => {
+    return (
+        <div className="author-work grid grid-cols-12-full-width span-cols-14">
+            <ArticleBlocks blocks={blocks} />
+        </div>
+    )
+}
+
 export const Author = (gdoc: OwidGdocAuthorInterface): JSX.Element => {
     return (
         <div className="grid grid-cols-12-full-width">
             <AuthorHeader {...gdoc} />
+            <AuthorWork blocks={gdoc.content.body} />
         </div>
     )
 }