diff --git a/adminSiteServer/mockSiteRouter.ts b/adminSiteServer/mockSiteRouter.ts index 19001c2bd5..19ff08dc4f 100644 --- a/adminSiteServer/mockSiteRouter.ts +++ b/adminSiteServer/mockSiteRouter.ts @@ -527,6 +527,7 @@ async function getTombstoneAttachments( linkedDocuments, linkedIndicators: {}, relatedCharts: [], + tags: [], } } diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx index 03bc0932af..9b781813b7 100644 --- a/baker/SiteBaker.tsx +++ b/baker/SiteBaker.tsx @@ -254,6 +254,7 @@ export class SiteBaker { ...attachments, linkedCharts: {}, relatedCharts: [], + tags: [], }) const outPath = path.join( this.bakedSiteDir, diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx index 9fe5c4322f..565aee5b05 100644 --- a/baker/siteRenderers.tsx +++ b/baker/siteRenderers.tsx @@ -414,6 +414,8 @@ ${dataInsights homepageMetadata: get(post, "homepageMetadata", {}), latestWorkLinks: get(post, "latestWorkLinks", []), linkedChartViews: get(post, "linkedChartViews", {}), + // lodash doesn't use fallback when value is null + tags: post.tags ?? [], }} > diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx index f2507b869b..b6ca2fd688 100644 --- a/site/DataInsightsIndexPageContent.tsx +++ b/site/DataInsightsIndexPageContent.tsx @@ -114,6 +114,7 @@ export const DataInsightsIndexPageContent = ( linkedIndicators: {}, // not needed for data insights relatedCharts: [], // not needed for the index page latestDataInsights: [], // not needed for the index page + tags: [], // not needed for the index page }} >
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx index da663ea0f2..bc94615fc0 100644 --- a/site/DataPageV2Content.tsx +++ b/site/DataPageV2Content.tsx @@ -93,6 +93,7 @@ export const DataPageV2Content = ({ linkedCharts: {}, linkedIndicators: {}, relatedCharts: [], + tags: [], }} > diff --git a/site/gdocs/AttachmentsContext.tsx b/site/gdocs/AttachmentsContext.tsx index ec1b767fe1..89e3f061f4 100644 --- a/site/gdocs/AttachmentsContext.tsx +++ b/site/gdocs/AttachmentsContext.tsx @@ -10,6 +10,7 @@ import { OwidGdocHomepageMetadata, DbEnrichedLatestWork, ChartViewInfo, + MinimalTag, } from "@ourworldindata/types" export type Attachments = { @@ -24,6 +25,7 @@ export type Attachments = { homepageMetadata?: OwidGdocHomepageMetadata latestWorkLinks?: DbEnrichedLatestWork[] linkedChartViews?: Record + tags: MinimalTag[] } export const AttachmentsContext = createContext({ @@ -37,4 +39,5 @@ export const AttachmentsContext = createContext({ homepageMetadata: {}, latestWorkLinks: [], linkedChartViews: {}, + tags: [], }) diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx index 8c3162a618..49a7fdbeb4 100644 --- a/site/gdocs/OwidGdoc.tsx +++ b/site/gdocs/OwidGdoc.tsx @@ -94,6 +94,8 @@ export function OwidGdoc({ homepageMetadata: get(props, "homepageMetadata", {}), latestWorkLinks: get(props, "latestWorkLinks", []), linkedChartViews: get(props, "linkedChartViews", {}), + // lodash doesn't use fallback when value is null + tags: props.tags ?? [], }} > diff --git a/site/gdocs/components/AllCharts.scss b/site/gdocs/components/AllCharts.scss index 20aa22fc90..b72825c469 100644 --- a/site/gdocs/components/AllCharts.scss +++ b/site/gdocs/components/AllCharts.scss @@ -1,6 +1,27 @@ .article-block__all-charts { h1.h1-semibold { - margin-bottom: 40px; + margin: 0; + flex: 1 1 0%; + } + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + margin-bottom: 40px; + + .owid-btn { + align-self: start; + @include sm-only { + order: 3; + margin-top: 24px; + width: 100%; + } + } + + .related-charts { + flex-basis: 100%; + margin-top: 40px; } figure[data-grapher-src]:not(.grapherPreview) { diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx index 84ba561622..eb20515031 100644 --- a/site/gdocs/components/AllCharts.tsx +++ b/site/gdocs/components/AllCharts.tsx @@ -1,4 +1,5 @@ import { useContext } from "react" +import urljoin from "url-join" import cx from "classnames" import { EnrichedBlockAllCharts, @@ -9,6 +10,8 @@ import { } from "@ourworldindata/utils" import { AttachmentsContext } from "../AttachmentsContext.js" import { RelatedCharts } from "../../blocks/RelatedCharts.js" +import { BAKED_BASE_URL } from "../../../settings/clientSettings.js" +import { Button } from "@ourworldindata/components" type AllChartsProps = EnrichedBlockAllCharts & { className?: string @@ -42,9 +45,14 @@ function sortRelatedCharts( export function AllCharts(props: AllChartsProps) { const { heading, top, className } = props - const { relatedCharts } = useContext(AttachmentsContext) + const { relatedCharts, tags } = useContext(AttachmentsContext) const topSlugs = top.map((item) => Url.fromURL(item.url).slug as string) + const firstTag = tags[0] + const firstTagDataCatalogQueryString = firstTag + ? `?topics=${firstTag.name}` + : "" + const sortedRelatedCharts = sortRelatedCharts(relatedCharts, topSlugs) return (
@@ -52,13 +60,20 @@ export function AllCharts(props: AllChartsProps) { className="article-block__heading h1-semibold" id={ALL_CHARTS_ID} > - {heading} + + {firstTag ? `Key Charts on ${firstTag.name}` : heading} + +