Add canonical link to tanstack/query page

app/routes/query.$version.docs.$.tsx

@@ -5,6 +5,7 @@ import { seo } from '~/utils/seo'
 import { redirect, useLoaderData, useParams } from '@remix-run/react'
 import { loadDocs } from '~/utils/docs'
 import { Doc } from '~/components/Doc'
+import { mergeMeta } from '~/utils/mergeMeta'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': docsPath, version } = context.params
@@ -29,12 +30,12 @@ export const loader = async (context: LoaderFunctionArgs) => {
   })
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = mergeMeta(({ data }) => {
   return seo({
     title: `${data?.title} | TanStack Query Docs`,
     description: data?.description,
   })
-}
+})
 
 export const ErrorBoundary = DefaultErrorBoundary
 

app/routes/query.$version.docs.framework.$framework.$.tsx

@@ -5,6 +5,7 @@ import { seo } from '~/utils/seo'
 import { useLoaderData, useParams } from '@remix-run/react'
 import { Doc } from '~/components/Doc'
 import { loadDocs } from '~/utils/docs'
+import { mergeMeta } from '~/utils/mergeMeta'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { '*': docsPath, framework, version } = context.params
@@ -19,12 +20,12 @@ export const loader = async (context: LoaderFunctionArgs) => {
   })
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = mergeMeta(({ data }) => {
   return seo({
     title: `${data?.title} | TanStack Query Docs`,
     description: data?.description,
   })
-}
+})
 
 export const ErrorBoundary = DefaultErrorBoundary
 

app/routes/query.$version.docs.framework.$framework.examples.$.tsx

@@ -7,14 +7,15 @@ import { repo, getBranch } from '~/projects/query'
 import { seo } from '~/utils/seo'
 import { capitalize, slugToTitle } from '~/utils/utils'
 import { FaExternalLinkAlt } from 'react-icons/fa'
+import { mergeMeta } from '~/utils/mergeMeta'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { version, framework, '*': name } = context.params
 
   return json({ version, framework, name })
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = mergeMeta(({ data }) => {
   return seo({
     title: `${capitalize(data.framework)} Query ${slugToTitle(
       data.name
@@ -23,7 +24,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
       data.name
     )} in ${capitalize(data.framework)} Query`,
   })
-}
+})
 
 export default function RouteExamples() {
   const { version, framework, name } = useLoaderData<typeof loader>()

app/routes/query.$version.tsx

@@ -3,7 +3,7 @@ import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
 import { availableVersions, latestVersion } from '~/projects/query'
 import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
 import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
-import type { LoaderFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
@@ -20,6 +20,14 @@ export const loader = async (context: LoaderFunctionArgs) => {
   })
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [{
+    tagName: "link",
+    rel: "canonical",
+    href: data?.redirectUrl,
+  }]
+}  
+
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteVersionParam() {

app/utils/mergeMeta.ts

@@ -0,0 +1,39 @@
+// https://gist.github.com/ryanflorence/ec1849c6d690cfbffcb408ecd633e069
+import type { MetaFunction } from "@remix-run/node";
+
+export const mergeMeta = (
+  overrideFn: MetaFunction,
+  appendFn?: MetaFunction,
+): MetaFunction => {
+  return arg => {
+    // get meta from parent routes
+    let mergedMeta = arg.matches.reduce((acc, match) => {
+      return acc.concat(match.meta || []);
+    }, [] as ReturnType<MetaFunction>);
+
+    // replace any parent meta with the same name or property with the override
+    let overrides = overrideFn(arg);
+    for (let override of overrides) {
+      let index = mergedMeta.findIndex(
+        meta =>
+          ("name" in meta &&
+            "name" in override &&
+            meta.name === override.name) ||
+          ("property" in meta &&
+            "property" in override &&
+            meta.property === override.property) ||
+          ("title" in meta && "title" in override),
+      );
+      if (index !== -1) {
+        mergedMeta.splice(index, 1, override);
+      }
+    }
+
+    // append any additional meta
+    if (appendFn) {
+      mergedMeta = mergedMeta.concat(appendFn(arg));
+    }
+
+    return mergedMeta;
+  };
+};