Merge pull request #3302 from owid/fix-first-rw

fix(r&w): tablet styles for first featured article
owid · Mar 8, 2024 · 46de67d · 46de67d
2 parents 1b0fc90 + 62fb2cb
commit 46de67d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 28 deletions.
diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx
@@ -51,7 +51,6 @@ import {
     OwidGdocErrorMessageType,
     ImageMetadata,
     OwidGdoc,
-    OwidGdocType,
     DATA_INSIGHTS_INDEX_PAGE_SIZE,
     OwidGdocMinimalPostInterface,
     excludeUndefined,
@@ -104,6 +103,7 @@ import {
     getVariableOfDatapageIfApplicable,
 } from "../db/model/Variable.js"
 import { Knex } from "knex"
+import { getBakePath } from "@ourworldindata/components"
 
 type PrefetchedAttachments = {
     linkedDocuments: Record<string, OwidGdocMinimalPostInterface>
@@ -238,13 +238,9 @@ export class SiteBaker {
     }
 
     // Bake an individual post/page
-    private async bakeOwidGdoc(post: OwidGdoc) {
-        const html = renderGdoc(post)
-        const dir =
-            post.content.type === OwidGdocType.DataInsight
-                ? "data-insights/"
-                : ""
-        const outPath = path.join(this.bakedSiteDir, `${dir}${post.slug}.html`)
+    private async bakeOwidGdoc(gdoc: OwidGdoc) {
+        const html = renderGdoc(gdoc)
+        const outPath = `${getBakePath(this.bakedSiteDir, gdoc)}.html`
         await fs.mkdirp(path.dirname(outPath))
         await this.stageWrite(outPath, html)
     }

diff --git a/packages/@ourworldindata/components/src/GdocsUtils.ts b/packages/@ourworldindata/components/src/GdocsUtils.ts
@@ -45,13 +45,13 @@ export function convertHeadingTextToId(headingText: Span[]): string {
     return urlSlug(spansToUnformattedPlainText(headingText))
 }
 
-export function getCanonicalUrl(baseUrl: string, gdoc: OwidGdoc): string {
+function _getPrefixedPath(prefix: string, gdoc: OwidGdoc): string {
     return match(gdoc)
         .with(
             {
                 content: { type: OwidGdocType.Homepage },
             },
-            () => baseUrl
+            () => prefix
         )
         .with(
             {
@@ -64,13 +64,13 @@ export function getCanonicalUrl(baseUrl: string, gdoc: OwidGdoc): string {
                     ),
                 },
             },
-            () => `${baseUrl}/${gdoc.slug}`
+            () => `${prefix}/${gdoc.slug}`
         )
         .with(
             {
                 content: { type: OwidGdocType.DataInsight },
             },
-            () => `${baseUrl}/data-insights/${gdoc.slug}`
+            () => `${prefix}/data-insights/${gdoc.slug}`
         )
         .with(
             {
@@ -81,6 +81,14 @@ export function getCanonicalUrl(baseUrl: string, gdoc: OwidGdoc): string {
         .exhaustive()
 }
 
+export const getBakePath = (bakedSiteDir: string, gdoc: OwidGdoc): string => {
+    return _getPrefixedPath(bakedSiteDir, gdoc)
+}
+
+export const getCanonicalUrl = (baseUrl: string, gdoc: OwidGdoc): string => {
+    return _getPrefixedPath(baseUrl, gdoc)
+}
+
 export function getPageTitle(gdoc: OwidGdoc) {
     return match(gdoc)
         .with(

diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
@@ -14,6 +14,7 @@ export {
     getUrlTarget,
     checkIsInternalLink,
     convertHeadingTextToId,
+    getBakePath,
     getCanonicalUrl,
     getPageTitle,
 } from "./GdocsUtils.js"

diff --git a/site/gdocs/components/ResearchAndWriting.scss b/site/gdocs/components/ResearchAndWriting.scss
@@ -68,16 +68,36 @@ $rw-margin-bottom-grid-cell: 4px;
 }
 
 .research-and-writing-link__title {
+    @include h3-bold;
     margin-top: 0;
     margin-bottom: $rw-margin-bottom-grid-cell;
 }
 
+.research-and-writing-link__title--large {
+    @include md-up {
+        @include h2-bold;
+        // Resetting the margins to the base style, as they are overridden by the mixin
+        margin-top: 0;
+        margin-bottom: $rw-margin-bottom-grid-cell;
+    }
+}
+
 .research-and-writing-link__description {
+    @include body-3-medium;
     color: $blue-90;
     margin-bottom: $rw-margin-bottom-grid-cell;
     margin-top: 0;
 }
 
+.research-and-writing-link__description--large {
+    @include md-up {
+        @include body-2-regular;
+        // Resetting the margins to the base style, as they are overridden by the mixin
+        margin-bottom: $rw-margin-bottom-grid-cell;
+        margin-top: 0;
+    }
+}
+
 .research-and-writing-link__authors {
     color: $blue-60;
     margin-bottom: $rw-margin-bottom-grid-cell;

diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
@@ -49,17 +49,6 @@ function ResearchAndWritingLink(
         filename = linkedDocument["featured-image"] || filename
     }
 
-    const heading = React.createElement(
-        isSmall ? "h3" : "h2",
-        {
-            className: cx(
-                "research-and-writing-link__title",
-                isSmall ? "h3-bold" : "h2-bold"
-            ),
-        },
-        title
-    )
-
     return (
         <a
             href={url}
@@ -76,13 +65,19 @@ function ResearchAndWritingLink(
                     />
                 </figure>
             ) : null}
-            {heading}
+            <h3
+                className={cx("research-and-writing-link__title", {
+                    "research-and-writing-link__title--large": !isSmall,
+                })}
+            >
+                {title}
+            </h3>
             {subtitle && !shouldHideSubtitle ? (
                 <p
-                    className={cx(
-                        "research-and-writing-link__description",
-                        isSmall ? "body-3-medium" : "body-2-regular"
-                    )}
+                    className={cx("research-and-writing-link__description", {
+                        "research-and-writing-link__description--large":
+                            !isSmall,
+                    })}
                 >
                     {subtitle}
                 </p>