From 9b540711f534bf94d0810946195611b6d3a7ee53 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Thu, 19 Oct 2023 15:29:14 +0200 Subject: [PATCH] data-page-better-citations --- .../@ourworldindata/utils/src/owidTypes.ts | 1 + site/DataPageV2.tsx | 1 + site/DataPageV2Content.tsx | 69 ++++++++++++------- site/ExpandableToggle.scss | 2 +- 4 files changed, 49 insertions(+), 24 deletions(-) diff --git a/packages/@ourworldindata/utils/src/owidTypes.ts b/packages/@ourworldindata/utils/src/owidTypes.ts index a2a88d4d904..79209f4e81f 100644 --- a/packages/@ourworldindata/utils/src/owidTypes.ts +++ b/packages/@ourworldindata/utils/src/owidTypes.ts @@ -1602,6 +1602,7 @@ export interface DataPageV2ContentFields { faqEntries: FaqEntryData | undefined // TODO: add gdocs for FAQs isPreviewing?: boolean + canonicalUrl: string } export interface UserCountryInformation { diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx index 07124b73367..2c2d3a16afa 100644 --- a/site/DataPageV2.tsx +++ b/site/DataPageV2.tsx @@ -146,6 +146,7 @@ export const DataPageV2 = (props: { grapherConfig={grapherConfig} isPreviewing={isPreviewing} faqEntries={faqEntries} + canonicalUrl={canonicalUrl} /> diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx index dfef972ec5e..9f6dcecbdc5 100644 --- a/site/DataPageV2Content.tsx +++ b/site/DataPageV2Content.tsx @@ -14,6 +14,10 @@ import { slugify, DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID, EnrichedBlockList, + uniq, + pick, + capitalize, + getWindowUrl, } from "@ourworldindata/utils" import { markdownToEnrichedTextBlock } from "@ourworldindata/components" import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js" @@ -92,6 +96,7 @@ export const DataPageV2Content = ({ grapherConfig, isPreviewing = false, faqEntries, + canonicalUrl, }: DataPageV2ContentFields & { grapherConfig: GrapherInterface }) => { @@ -145,26 +150,44 @@ export const DataPageV2Content = ({ // TODO: this is missing the attribution field ATM and // so assembles something only roughly similar to the citation described // by Joe. Also, we need the dataset title. - const producers = datapageData.origins.map((o) => o.producer).join("; ") + const origins = uniq( + datapageData.origins.map((item) => + pick(item, [ + "producer", + "descriptionSnapshot", + "dateAccessed", + "urlMain", + "description", + "citationFull", + ]) + ) + ) + const producers = uniq(datapageData.origins.map((o) => o.producer)).join( + "; " + ) + const attributionLong = datapageData.attribution ?? producers + // const attributionShort = + // datapageData.attributionShort ?? + // uniq( + // datapageData.origins.map((o) => o.attributionShort ?? o.producer) + // ).join("; ") const processedAdapted = datapageData.owidProcessingLevel === "minor" ? `minor` : `major` const lastUpdated = dayjs(datapageData.lastUpdated, ["YYYY", "YYYY-MM-DD"]) const yearOfUpdate = lastUpdated.year() - const citationShort = `${producers} — with ${processedAdapted} processing by Our World In Data (${yearOfUpdate})` - const originsLong = datapageData.origins - .map((o) => `${o.producer}, ${o.title ?? o.titleSnapshot}`) - .join("; ") - const dateAccessed = - datapageData.origins && - datapageData.origins.length && - datapageData.origins[0].dateAccessed - ? dayjs(datapageData.origins[0].dateAccessed).format("MMMM D, YYYY") - : "" - const urlAccessed = - datapageData.origins && - datapageData.origins.length && - datapageData.origins[0].urlDownload - const citationLong = `${citationShort}. ${datapageData.title}. ${originsLong}, ${processedAdapted} by Our World In Data. Retrieved ${dateAccessed} from ${urlAccessed}` + const citationShort = `${attributionLong} — with ${processedAdapted} processing by Our World In Data (${yearOfUpdate})` + const originsLong = uniq( + datapageData.origins.map( + (o) => `${o.producer}, ${o.title ?? o.titleSnapshot}` + ) + ).join("; ") + const today = dayjs().format("MMMM D, YYYY") + const currentYear = dayjs().year() + const citationLong = `${citationShort}. ${ + datapageData.title + }. ${originsLong}. ${capitalize( + processedAdapted + )} processing by Our World In Data. Retrieved ${today} from ${canonicalUrl}` const { linkedDocuments = {}, @@ -204,7 +227,7 @@ export const DataPageV2Content = ({ const dateRange = getDateRange(datapageData.dateRange) - const citationDatapage = `Our World In Data (${yearOfUpdate}). Data Page: ${datapageData.title} – ${producers}. Retrieved from {url} [online resource]` + const citationDatapage = `Our World In Data (${currentYear}). Data Page: ${datapageData.title} – ${producers}. Retrieved from ${canonicalUrl} [online resource]` return ( Sources and processing - {datapageData.origins.length > 0 && ( + {origins.length > 0 && (

This data is based on the following sources

- {datapageData.origins.map( + {origins.map( ( source, idx: number, @@ -597,7 +620,7 @@ export const DataPageV2Content = ({ /> )} {(source.dateAccessed || - source.urlDownload) && ( + source.urlMain) && (
)} - {source.urlDownload && ( + {source.urlMain && (
Retrieved @@ -627,13 +650,13 @@ export const DataPageV2Content = ({ diff --git a/site/ExpandableToggle.scss b/site/ExpandableToggle.scss index 568150f2585..c83d9ea151a 100644 --- a/site/ExpandableToggle.scss +++ b/site/ExpandableToggle.scss @@ -53,7 +53,7 @@ } .ExpandableToggle__content--teaser { - height: 48px; + height: 96px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent); }