✨ add link to data insight titles on index page

owid · Jan 16, 2025 · 59953a4 · 59953a4
1 parent e21c07a
commit 59953a4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx
@@ -134,6 +134,7 @@ export const DataInsightsIndexPageContent = (
                         <DataInsightBody
                             key={dataInsight.id}
                             anchor={id}
+                            shouldLinkTitle
                             {...dataInsight}
                         />
                     )

diff --git a/site/gdocs/pages/DataInsight.scss b/site/gdocs/pages/DataInsight.scss
@@ -43,6 +43,13 @@
     padding: 24px;
     margin-bottom: 30px;
 
+    .data-insight-heading-link {
+        color: $blue-90;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
     h1 {
         margin-top: 0;
         margin-bottom: 8px;
@@ -86,6 +93,9 @@
     display: flex;
     align-items: center;
     gap: 8px;
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 .data-insight-blocks {

diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx
@@ -101,8 +101,10 @@ export const DataInsightBody = (
     props: OwidGdocDataInsightInterface & {
         anchor?: string
         publishedAt: Date | string | null
+        shouldLinkTitle?: boolean
     }
 ) => {
+    const shouldLinkTitle = props.shouldLinkTitle
     const publishedAt = props.publishedAt ? new Date(props.publishedAt) : null
     return (
         <div className="grid grid-cols-12-full-width span-cols-14">
@@ -124,7 +126,20 @@ export const DataInsightBody = (
                         day: "2-digit",
                     }}
                 />
-                <h1 className="display-3-semibold">{props.content.title}</h1>
+                {shouldLinkTitle ? (
+                    <a
+                        href={`${BAKED_BASE_URL}/data-insights/${props.slug}`}
+                        className="data-insight-heading-link"
+                    >
+                        <h1 className="display-3-semibold">
+                            {props.content.title}
+                        </h1>
+                    </a>
+                ) : (
+                    <h1 className="display-3-semibold">
+                        {props.content.title}
+                    </h1>
+                )}
                 <div className="data-insight-authors body-3-medium">
                     {props.content.authors.map((author, index) => (
                         <LinkedAuthor