[render] Improve link decoration

Xennis · Jun 10, 2024 · d26d1e5 · d26d1e5
1 parent 95fcd4b
commit d26d1e5
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/examples/nextjs/src/app/[slug]/page.tsx b/examples/nextjs/src/app/[slug]/page.tsx
@@ -42,11 +42,11 @@ export default async function SlugPage({ params }: { params: { slug: string } })
           }
         },
         htmlComponents: {
-          // Example customization: Render links in a different style and use the Link component of Next.js
+          // Example customization: Use the Link component of Next.js for links.
           a: (props) => {
             return (
               <Link
-                className="border-b-2 border-teal-500 font-semibold hover:border-b-0"
+                className="break-words underline decoration-[--fg-color-2] underline-offset-2 hover:no-underline"
                 href={props.href ?? "#"}
                 {...props}
               >

diff --git a/packages/render/src/components/html/a.tsx b/packages/render/src/components/html/a.tsx
@@ -4,9 +4,8 @@ export const A = ({ className, ...props }: React.ComponentPropsWithoutRef<"a">)
   return (
     // ref: .notion-link
     <a
-      style={{ transition: "border-color 100ms ease-in,opacity 100ms ease-in" }}
       className={cn(
-        "break-words text-inherit underline decoration-[--fg-color-2] opacity-70 hover:decoration-[--fg-color-6] hover:opacity-100",
+        "break-words underline decoration-[--fg-color-2] underline-offset-2 hover:no-underline",
         className ?? "",
       )}
       {...props}

diff --git a/packages/render/src/components/page-title.tsx b/packages/render/src/components/page-title.tsx
@@ -7,13 +7,15 @@ export const PageTitle = ({ icon, children }: { icon: IconResponse; children: Re
   }
   return (
     // ref: .notion-page-title
-    <span className="inline-flex max-w-full items-center leading-[1.3] transition-[background] delay-[0s] duration-[120ms] ease-[ease-in]">
+    <span className="inline-flex max-w-full items-center">
       {/* ref: .notion-page-title-icon */}
       {/* note: plus ref .notion-page-icon-inline for margins */}
-      <Icon icon={icon} width={20} className="me-1.5 ms-0.5 flex shrink-0 items-center justify-center rounded-[3px]" />
+      <Icon icon={icon} width={18} className="me-1.5 ms-0.5 flex shrink-0 justify-center rounded" />
       {/* ref: .notion-page-title-text */}
       {/* note: In case of links no border is applied, but otherwise it is. See ref above and `.notion-link .notion-page-title-text` */}
-      <span className="relative top-px overflow-hidden text-ellipsis whitespace-nowrap leading-[1.3]">{children}</span>
+      <span className="overflow-hidden text-ellipsis whitespace-nowrap underline decoration-[--fg-color-2] underline-offset-2 hover:no-underline">
+        {children}
+      </span>
     </span>
   )
 }
diff --git a/packages/render/src/components/text.tsx b/packages/render/src/components/text.tsx
@@ -62,7 +62,8 @@ const RichText = ({ value, options }: { value: RichTextItemResponse; options: Re
         const resolvedLink = uuid !== null ? options.resolveLinkFn(uuid) : null
         return (
           <options.htmlComponents.a href={resolvedLink?.href ?? "#"}>
-            <PageTitle icon={resolvedLink?.icon ?? null}>{text}</PageTitle>
+            {/* No PageTitle here. It's a regular link. */}
+            {text}
           </options.htmlComponents.a>
         )
       }