data-page-better-slugify

site/DataPageV2Content.tsx

@@ -74,6 +74,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,
@@ -230,7 +243,9 @@ export const DataPageV2Content = ({
                                         {datapageData.topicTagsLinks?.map(
                                             (topic: any) => (
                                                 <a
-                                                    href={`/${slugify(topic)}`}
+                                                    href={`/${slugify_topic(
+                                                        topic
+                                                    )}`}
                                                     key={topic}
                                                 >
                                                     {topic}