From 978136dabe70ca0735f2777966cc13ee8963cc7b Mon Sep 17 00:00:00 2001 From: Matthieu Bergel Date: Thu, 23 May 2024 08:06:39 +0000 Subject: [PATCH] fix(byline): hydration discrepancy causing error in link target fix(byline): hydration issues --- site/gdocs/components/Byline.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/site/gdocs/components/Byline.tsx b/site/gdocs/components/Byline.tsx index 1256ba40bb9..c08223713bb 100644 --- a/site/gdocs/components/Byline.tsx +++ b/site/gdocs/components/Byline.tsx @@ -6,7 +6,7 @@ import { useLinkedAuthor } from "../utils.js" export const Byline = ({ names }: { names: string[] }) => { return ( <> - By:{" "} + {"By: "} {names.map((name, idx) => ( @@ -23,7 +23,12 @@ export const Byline = ({ names }: { names: string[] }) => { const LinkedAuthor = ({ name }: { name: string }) => { const author = useLinkedAuthor(name) - if (!author.slug) return <>{author.title} + // Somehow, using a fragment here messes up the hydration process and causes + // some links to be applied to the wrong authors, but only if the first + // author is unlinked (which probably gets tangled with the "By: " text + // above). Additional markup, here in the form of a span, works more + // reliably. + if (!author.slug) return {author.title} const path = getCanonicalUrl("", { slug: author.slug,