Fix prominent link URL (#4499)

- When previewing, link to the baked site. This is necessary for
  previews to work correctly in admin in prod, where relative URL isn't
  sufficient, because admin is on a different domain then the main site.
- Don't add hash and query string to gdoc URLs. Gdocs can have params
  like `?tab=t.0` and similar internal hashes that we shouldn't add to
  our own URLs.

  It seems the support for query strings and hashes was added on purpose
  but there are only a couple gdocs with link with seemingly custom
  query param `?usp=sharing`, so it seems fine to remove that support
  for now. When we'll need it, we should add a way to specify the query
  params separately from the URL (or filter out the known godcs query
  params, which seems too fragile).

  We also use `url` instead of `slug` for the piece of data where we
  construct the whole URL instead of only a slug, which can differ e.g.
  for data insights.

site/gdocs/components/HomepageIntro.tsx

@@ -35,7 +35,7 @@ function FeaturedWorkTile({
     const { isPreviewing } = useContext(DocumentContext)
     const linkedDocumentFeaturedImage = linkedDocument?.["featured-image"]
     const thumbnailFilename = filename ?? linkedDocumentFeaturedImage
-    const href = linkedDocument ? `/${linkedDocument.slug}` : url
+    const href = linkedDocument?.url ?? url
 
     if (isPreviewing) {
         if (errorMessage) {

site/gdocs/components/LinkedA.tsx

@@ -26,9 +26,9 @@ export default function LinkedA({ span }: { span: SpanLink }) {
             </a>
         )
     }
-    if (linkedDocument && linkedDocument.published && linkedDocument.slug) {
+    if (linkedDocument && linkedDocument.published && linkedDocument.url) {
         return (
-            <a href={`/${linkedDocument.slug}`} className="span-link">
+            <a href={linkedDocument.url} className="span-link">
                 <SpanElements spans={span.children} />
             </a>
         )

site/gdocs/components/Person.tsx

@@ -1,7 +1,6 @@
 import { useMediaQuery } from "usehooks-ts"
 
-import { getCanonicalUrl } from "@ourworldindata/components"
-import { EnrichedBlockPerson, OwidGdocType } from "@ourworldindata/types"
+import { EnrichedBlockPerson } from "@ourworldindata/types"
 import { SMALL_BREAKPOINT_MEDIA_QUERY } from "../../SiteConstants.js"
 import { useLinkedDocument } from "../utils.js"
 import { ArticleBlocks } from "./ArticleBlocks.js"
@@ -11,14 +10,7 @@ import { Socials } from "./Socials.js"
 export default function Person({ person }: { person: EnrichedBlockPerson }) {
     const { linkedDocument } = useLinkedDocument(person.url ?? "")
     const isSmallScreen = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY)
-
-    const slug = linkedDocument?.slug
-    const url = slug
-        ? getCanonicalUrl("", {
-              slug,
-              content: { type: OwidGdocType.Author },
-          })
-        : undefined
+    const url = linkedDocument?.url
 
     const heading = <h3 className="person-heading">{person.name}</h3>
 

site/gdocs/components/PillRow.tsx

@@ -6,7 +6,7 @@ import { DocumentContext } from "../DocumentContext.js"
 function Pill(props: { text?: string; url: string }) {
     const { linkedDocument, errorMessage } = useLinkedDocument(props.url)
     const { isPreviewing } = useContext(DocumentContext)
-    const url = linkedDocument ? `/${linkedDocument.slug}` : props.url
+    const url = linkedDocument?.url ?? props.url
     const text = props.text ?? linkedDocument?.title
 
     if (isPreviewing) {

site/gdocs/components/ProminentLink.tsx

@@ -12,6 +12,7 @@ import { GRAPHER_DYNAMIC_THUMBNAIL_URL } from "../../../settings/clientSettings.
 import {
     ARCHVED_THUMBNAIL_FILENAME,
     DEFAULT_THUMBNAIL_FILENAME,
+    OwidGdocLinkType,
 } from "@ourworldindata/types"
 
 const Thumbnail = ({ thumbnail }: { thumbnail: string }) => {
@@ -63,17 +64,17 @@ export const ProminentLink = (props: {
     let title: string | undefined = props.title
     let description: string | undefined = props.description
     let thumbnail: string | undefined = props.thumbnail
-    if (linkType === "gdoc") {
-        href = `/${linkedDocument?.slug}`
-        title ??= linkedDocument?.title
-        description ??= linkedDocument?.excerpt
-        thumbnail ??= linkedDocument?.["featured-image"]
-    } else if (linkType === "grapher") {
+    if (linkedDocument) {
+        href = linkedDocument.url
+        title ??= linkedDocument.title
+        description ??= linkedDocument.excerpt
+        thumbnail ??= linkedDocument["featured-image"]
+    } else if (linkType === OwidGdocLinkType.Grapher) {
         href = `${linkedChart?.resolvedUrl}`
         title ??= linkedChart?.title
         thumbnail ??= linkedChart?.thumbnail
         description ??= "See the data in our interactive visualization"
-    } else if (linkType === "explorer") {
+    } else if (linkType === OwidGdocLinkType.Explorer) {
         href = `${linkedChart?.resolvedUrl}`
         title ??= `${linkedChart?.title} Data Explorer`
         thumbnail ??= linkedChart?.thumbnail

site/gdocs/components/Recirc.tsx

@@ -10,7 +10,7 @@ function RecircItem({ url }: { url: string }) {
     return (
         <aside className="recirc-article-container">
             <h3 className="h3-bold">
-                <a href={`/${linkedDocument.slug}`}>{linkedDocument.title}</a>
+                <a href={linkedDocument.url}>{linkedDocument.title}</a>
             </h3>
             {linkedDocument.authors ? (
                 <div className="body-3-medium-italic">

site/gdocs/components/ResearchAndWriting.tsx

@@ -69,7 +69,7 @@ function ResearchAndWritingLink(
     }
 
     if (linkedDocument) {
-        url = `/${linkedDocument.slug}`
+        url = linkedDocument.url
         title = linkedDocument.title || title
         authors = linkedDocument.authors || authors
         subtitle = linkedDocument.excerpt || subtitle

site/gdocs/components/TopicPageIntro.tsx

@@ -21,7 +21,7 @@ function TopicPageRelatedTopic({
         return <li>{errorMessage}</li>
     }
     const topicText = linkedDocument?.title || text
-    const topicUrl = linkedDocument?.slug ? `/${linkedDocument?.slug}` : url
+    const topicUrl = linkedDocument?.url ?? url
     return (
         <li>
             <a href={topicUrl}>{topicText}</a>

site/gdocs/utils.ts

@@ -1,17 +1,21 @@
 import { useContext } from "react"
 
-import { getLinkType, getUrlTarget } from "@ourworldindata/components"
+import {
+    getCanonicalUrl,
+    getLinkType,
+    getUrlTarget,
+} from "@ourworldindata/components"
 import {
     ImageMetadata,
     LinkedChart,
     OwidGdocPostContent,
     OwidGdocMinimalPostInterface,
-    OwidGdocType,
     LinkedIndicator,
     CategoryWithEntries,
     EntryMeta,
     SubNavId,
     OwidGdocDataInsightContent,
+    OwidGdocLinkType,
 } from "@ourworldindata/types"
 import {
     formatAuthors,
@@ -20,6 +24,7 @@ import {
 } from "@ourworldindata/utils"
 import { AttachmentsContext } from "./AttachmentsContext.js"
 import { SiteNavigationStatic, SubnavItem, subnavs } from "../SiteConstants.js"
+import { BAKED_BASE_URL } from "../../settings/clientSettings.js"
 
 export const breadcrumbColorForCoverColor = (
     coverColor: OwidGdocPostContent["cover-color"]
@@ -59,20 +64,19 @@ export const useLinkedAuthor = (
     return author
 }
 
+type LinkedDocument = OwidGdocMinimalPostInterface & { url: string }
+
 export const useLinkedDocument = (
     url: string
-): { linkedDocument?: OwidGdocMinimalPostInterface; errorMessage?: string } => {
+): { linkedDocument?: LinkedDocument; errorMessage?: string } => {
     const { linkedDocuments } = useContext(AttachmentsContext)
     let errorMessage: string | undefined = undefined
     let linkedDocument: OwidGdocMinimalPostInterface | undefined = undefined
     const linkType = getLinkType(url)
-    if (linkType !== "gdoc") {
+    if (linkType !== OwidGdocLinkType.Gdoc) {
         return { linkedDocument }
     }
 
-    const urlObj = Url.fromURL(url)
-    const queryString = urlObj.queryStr
-    const hash = urlObj.hash
     const urlTarget = getUrlTarget(url)
     linkedDocument = linkedDocuments?.[urlTarget] as
         | OwidGdocMinimalPostInterface
@@ -85,13 +89,13 @@ export const useLinkedDocument = (
         errorMessage = `Article with slug "${linkedDocument.slug}" isn't published.`
     }
 
-    //todo replace with getCanonicalUrl
-    const subdirectory =
-        linkedDocument.type === OwidGdocType.DataInsight ? "data-insights/" : ""
     return {
         linkedDocument: {
             ...linkedDocument,
-            slug: `${subdirectory}${linkedDocument.slug}${queryString}${hash}`,
+            url: getCanonicalUrl(BAKED_BASE_URL, {
+                slug: linkedDocument.slug,
+                content: { type: linkedDocument.type },
+            }),
         },
         errorMessage,
     }