Skip to content

Commit

Permalink
Better automatic links to topic pages (#2802)
Browse files Browse the repository at this point in the history
At the right top of topic pages we show tags if they are given in the ETL. The tags are rendered as little pills and should link to the topic page that we have for this tag. Unfortunately, at this point we don't have the "authoritative links" stored with the tags and no association between tags and their topic pages so we slugify the text and 🤞. 

This PR improves the slugify function for this particular use case. It's not bullet proof but it makes sure that the system works for a few more of the important tags. Some remain broken until we store the links properly.
  • Loading branch information
danyx23 authored Oct 24, 2023
2 parents 64c7ba0 + 889873e commit c9053be
Showing 1 changed file with 16 additions and 1 deletion.
17 changes: 16 additions & 1 deletion site/DataPageV2Content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,19 @@ const getDateRange = (dateRange: string): string | null => {
return null
}

const slugify_topic = (topic: string) => {
// This is a heuristic to map from free form tag texts to topic page URLs. We'll
// have to switch to explicitly stored URLs or explicit links between tags and topic pages
// soon but for the time being this makes sure that "CO2 & Greenhouse Gas Emissions" can be automatically
// linked to /co2-and-greenhouse-gas-emissions
// Note that the heuristic fails for a few cases like "HIV/AIDS" or "Mpox (Monkeypox)"
const replaced = topic
.replace("&", "-and-")
.replace("'", "")
.replace("+", "")
return slugify(replaced)
}

export const DataPageV2Content = ({
datapageData,
grapherConfig,
Expand Down Expand Up @@ -228,7 +241,9 @@ export const DataPageV2Content = ({
{datapageData.topicTagsLinks?.map(
(topic: any) => (
<a
href={`/${slugify(topic)}`}
href={`/${slugify_topic(
topic
)}`}
key={topic}
>
{topic}
Expand Down

0 comments on commit c9053be

Please sign in to comment.