Merge pull request #12455 from checkomkar/fix/issue-12393

Add auto-linked headers on glossary page [Fixes #12393]

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps } from "react"
-import { Box, Text } from "@chakra-ui/react"
+import { Box, type HeadingProps, Text } from "@chakra-ui/react"
 
+import IdAnchor from "@/components/IdAnchor"
 import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
@@ -24,22 +25,38 @@ const GlossaryDefinition = ({
   size = "md",
   options = { ns: DEFAULT_GLOSSARY_NS },
 }: GlossaryDefinitionProps) => {
-  const headingStyles =
-    size === "sm"
-      ? { fontSize: "md", mt: 0, mb: 2 }
-      : { fontSize: { base: "xl", md: "2xl" } }
-
   const textStyles = size === "sm" ? { mb: 0 } : {}
 
+  const headingPropsForAnchor = (id?: string): HeadingProps => {
+    if (!id) return {}
+    return {
+      scrollMarginTop: 28,
+      id,
+      "data-group": true,
+      position: "relative",
+    } as HeadingProps
+  }
+  const commonHeadingProps = (id?: string): HeadingProps => ({
+    fontWeight: 700,
+    lineHeight: 1.4,
+    ...headingPropsForAnchor(id),
+  })
+  const Heading3 = ({ id, children, ...rest }: HeadingProps) => (
+    <OldHeading as="h3" {...commonHeadingProps(id)} fontSize="2xl" {...rest}>
+      <IdAnchor id={id} />
+      {children}
+    </OldHeading>
+  )
+
   return (
     <Box textAlign="start">
-      <OldHeading as="h3" lineHeight={1.4} id={term} {...headingStyles}>
+      <Heading3 id={term}>
         <Translation
           id={term + "-term"}
           options={options}
           transform={components}
         />
-      </OldHeading>
+      </Heading3>
       {/**
        * `as="span"` prevents hydration warnings for strings that contain
        * elements that cannot be nested inside `p` tags, like `ul` tags

src/components/IdAnchor.tsx

@@ -0,0 +1,24 @@
+import { CiLink } from "react-icons/ci"
+import { Icon } from "@chakra-ui/react"
+
+import Link from "@/components/Link"
+
+const IdAnchor = ({ id }: { id?: string }) => {
+  if (!id) return null
+  return (
+    <Link
+      href={"#" + id}
+      position="absolute"
+      insetInlineEnd="100%"
+      aria-label={id.replaceAll("-", " ") + " permalink"}
+      opacity={0}
+      _groupHover={{ opacity: 1 }}
+      _focus={{ opacity: 1 }}
+      transition="opacity 0.1s ease-in-out"
+    >
+      <Icon as={CiLink} fontSize="xl" me="1" />
+    </Link>
+  )
+}
+
+export default IdAnchor

src/components/MdComponents.tsx

@@ -1,16 +1,13 @@
 import { ComponentProps } from "react"
-import { CiLink } from "react-icons/ci"
 import {
   Badge,
   Box,
   type BoxProps,
-  calc,
   chakra,
   Divider as ChakraDivider,
   Flex,
   type FlexProps,
   type HeadingProps,
-  Icon,
   ListItem,
   OrderedList,
   Text,
@@ -25,7 +22,6 @@ import ButtonDropdown, {
 } from "@/components/ButtonDropdown"
 import { ButtonLink } from "@/components/Buttons"
 import Contributors from "@/components/Contributors"
-import Link from "@/components/Link"
 import MarkdownImage from "@/components/MarkdownImage"
 import OldHeading from "@/components/OldHeading"
 import { mdxTableComponents } from "@/components/Table"
@@ -40,6 +36,7 @@ import DocLink from "./DocLink"
 import Emoji from "./Emoji"
 import ExpandableCard from "./ExpandableCard"
 import FeaturedText from "./FeaturedText"
+import IdAnchor from "./IdAnchor"
 import InfoBanner from "./InfoBanner"
 import IssuesList from "./IssuesList"
 import LocaleDateTime from "./LocaleDateTime"
@@ -65,24 +62,6 @@ export const commonHeadingProps = (id?: string): HeadingProps => ({
   ...headingPropsForAnchor(id),
 })
 
-const IdAnchor = ({ id }: { id?: string }) => {
-  if (!id) return null
-  return (
-    <Link
-      href={"#" + id}
-      position="absolute"
-      insetInlineEnd="100%"
-      aria-label={id.replaceAll("-", " ") + " permalink"}
-      opacity={0}
-      _groupHover={{ opacity: 1 }}
-      _focus={{ opacity: 1 }}
-      transition="opacity 0.1s ease-in-out"
-    >
-      <Icon as={CiLink} fontSize="xl" me="1" />
-    </Link>
-  )
-}
-
 export const Heading1 = ({ children, ...rest }: HeadingProps) => (
   <OldHeading as="h1" {...commonHeadingProps()} fontSize="2.5rem" {...rest}>
     {children}