New data insight feed and detail page

packages/@ourworldindata/components/src/styles/mixins.scss

@@ -211,13 +211,16 @@
 
 @mixin topic-chip {
     a {
+        display: flex;
+        align-items: center;
         background-color: $blue-10;
         border-radius: 50px;
-        padding: 8.5px 16px;
+        padding: 8px 16px;
         white-space: nowrap;
         @include body-3-medium;
         color: $blue-90;
         transition: background-color 150ms;
+        height: 32px;
 
         &:hover {
             background-color: $blue-20;

packages/@ourworldindata/components/src/styles/typography.scss

@@ -355,6 +355,18 @@ body {
     @include body-2-semibold;
 }
 
+@mixin body-3-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+}
+
+.body-3-regular {
+    @include body-3-regular;
+}
+
 @mixin body-3-medium {
     font-family: $sans-serif-font-stack;
     font-size: 0.875rem;

site/DataInsightsIndexPage.tsx

@@ -30,7 +30,7 @@ export const DataInsightsIndexPage = (props: DataInsightsIndexPageProps) => {
                 canonicalUrl={`${baseUrl}/data-insights`}
                 pageTitle="Daily Data Insights"
                 baseUrl={baseUrl}
-                pageDesc="Bite-sized insights on how the world is changing, written by our team"
+                pageDesc="Bite-sized insights on how the world is changing, published daily"
                 imageUrl={`${baseUrl}/data-insights-thumbnail.png`}
                 atom={DATA_INSIGHT_ATOM_FEED_PROPS}
             ></Head>

site/DataInsightsIndexPageContent.tsx

@@ -121,7 +121,7 @@ export const DataInsightsIndexPageContent = (
                     </h2>
                     <p className="span-cols-8 col-start-4 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12 body-1-regular">
                         Bite-sized insights on how the world is changing,
-                        written by our team.
+                        published daily.
                     </p>
                 </header>
                 {dataInsights.map((dataInsight, index) => {

site/gdocs/components/DataInsightDateline.scss

@@ -0,0 +1,13 @@
+.data-insight-dateline {
+    margin-bottom: 4px;
+    margin-top: 0;
+    color: $blue-60;
+
+    &--is-today {
+        color: $vermillion;
+    }
+}
+
+.data-insight-dateline__icon {
+    margin-right: 4px;
+}

site/gdocs/components/DataInsightDateline.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import cx from "classnames"
+import { faCalendarDay } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+
+import { dayjs } from "@ourworldindata/utils"
+
+export default function DataInsightDateline({
+    className,
+    publishedAt,
+    formatOptions = {
+        month: "long",
+        day: "2-digit",
+    },
+    highlightToday,
+}: {
+    className?: string
+    publishedAt: Date | null
+    formatOptions?: Intl.DateTimeFormatOptions
+    highlightToday?: boolean
+}) {
+    const date = dayjs(publishedAt)
+    let highlightClassName
+    let formattedDate
+    if (publishedAt) {
+        if (date.isToday()) {
+            formattedDate = "Today"
+            if (highlightToday) {
+                highlightClassName = "data-insight-dateline--is-today"
+            }
+        } else if (date.isYesterday()) {
+            formattedDate = "Yesterday"
+        } else {
+            formattedDate = publishedAt.toLocaleDateString(
+                "en-US",
+                formatOptions
+            )
+        }
+    } else {
+        formattedDate = "Unpublished"
+    }
+    return (
+        <p
+            className={cx(
+                "data-insight-dateline",
+                className,
+                highlightClassName
+            )}
+        >
+            <FontAwesomeIcon
+                className="data-insight-dateline__icon"
+                icon={faCalendarDay}
+            />
+            {formattedDate}
+        </p>
+    )
+}

site/gdocs/components/LatestDataInsights.scss

@@ -126,13 +126,7 @@ html:not(.js) .latest-data-insights__card,
 }
 
 .latest-data-insights__card-dateline {
-    margin-bottom: 4px;
-    margin-top: 0;
-    color: $blue-60;
-
-    &--is-today {
-        color: $vermillion;
-    }
+    @include h5-black-caps;
 
     @include md-down {
         @include h6-black-caps;

site/gdocs/components/LatestDataInsights.tsx

@@ -11,7 +11,6 @@ import { useMediaQuery } from "react-responsive"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faArrowRight,
-    faCalendarDay,
     faChevronRight,
     faChevronLeft,
 } from "@fortawesome/free-solid-svg-icons"
@@ -25,11 +24,11 @@ import {
     EnrichedBlockImage,
     OwidEnrichedGdocBlock,
     OwidGdocDataInsightInterface,
-    dayjs,
 } from "@ourworldindata/utils"
 import { dataInsightIndexToIdMap } from "../pages/DataInsight.js"
 import Image from "./Image.js"
 import { ArticleBlocks } from "./ArticleBlocks.js"
+import DataInsightDateline from "./DataInsightDateline.js"
 
 export interface LatestDataInsight extends OwidGdocDataInsightInterface {
     index?: number
@@ -178,7 +177,13 @@ const DataInsightCard = memo(function DataInsightCard({
                 />
             )}
             <div className="latest-data-insights__card-right">
-                {publishedAt && <Dateline publishedAt={publishedAt} />}
+                {publishedAt && (
+                    <DataInsightDateline
+                        className="latest-data-insights__card-dateline"
+                        publishedAt={publishedAt}
+                        highlightToday={true}
+                    />
+                )}
                 <h3 className="latest-data-insights__card-title">{title}</h3>
                 <div className="latest-data-insights__card-body">
                     <ArticleBlocks
@@ -200,36 +205,6 @@ const DataInsightCard = memo(function DataInsightCard({
     )
 })
 
-function Dateline({ publishedAt }: { publishedAt: Date }) {
-    const date = dayjs(publishedAt)
-    let formattedDate
-    let className
-    if (date.isToday()) {
-        formattedDate = "Today"
-        className = "latest-data-insights__card-dateline--is-today"
-    } else if (date.isYesterday()) {
-        formattedDate = "Yesterday"
-    } else {
-        formattedDate = publishedAt.toLocaleDateString("en-US", {
-            month: "long",
-            day: "2-digit",
-        })
-    }
-    return (
-        <p
-            className={cx(
-                "latest-data-insights__card-dateline h5-black-caps",
-                className
-            )}
-        >
-            <FontAwesomeIcon icon={faCalendarDay} />
-            <span className="latest-data-insights__card-date">
-                {formattedDate}
-            </span>
-        </p>
-    )
-}
-
 function useDotButton(emblaApi: EmblaCarouselType | undefined): {
     selectedIndex: number
     scrollSnaps: number[]