From 3be6bc44d182283c920004e7bc10031ef9b89044 Mon Sep 17 00:00:00 2001 From: Omkar Kamale Date: Fri, 15 Mar 2024 00:07:01 +0530 Subject: [PATCH 1/8] Fix [#12393]: Missing auto-linked headers on glossary page --- .../Glossary/GlossaryDefinition/index.tsx | 43 +++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index 0ca869458c9..91a5fb6d5b0 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,6 +1,6 @@ -import { ComponentProps } from "react" -import { Box, Text } from "@chakra-ui/react" - +import { ComponentProps, useState } from "react" +import { Box, Text, Link, Flex } from "@chakra-ui/react" +import { VscLink } from "react-icons/vsc" import InlineLink from "@/components/Link" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" @@ -24,6 +24,7 @@ const GlossaryDefinition = ({ size = "md", options = { ns: DEFAULT_GLOSSARY_NS }, }: GlossaryDefinitionProps) => { + const [showLink, setShowLink] = useState(false) const headingStyles = size === "sm" ? { fontSize: "md", mt: 0, mb: 2 } @@ -31,15 +32,39 @@ const GlossaryDefinition = ({ const textStyles = size === "sm" ? { mb: 0 } : {} + const linkStyles = { + color: "inherit", + textDecoration: "none", + } + + const linkIconStyles = { + left: "-1.5em", + top: "0.8em", + fontSize: "0.5em", + color: "var(--eth-colors-primary-base)", + display: showLink ? "" : "none", + cursor: "pointer", + } + return ( - + setShowLink(true)} onMouseLeave={() => setShowLink(false)}> - + + + + + + + + + + + Date: Fri, 15 Mar 2024 00:27:50 +0530 Subject: [PATCH 2/8] import sort fix --- src/components/Glossary/GlossaryDefinition/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index 91a5fb6d5b0..2bc8c9fba15 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,6 +1,6 @@ import { ComponentProps, useState } from "react" -import { Box, Text, Link, Flex } from "@chakra-ui/react" import { VscLink } from "react-icons/vsc" +import { Box, Flex, Link, Text } from "@chakra-ui/react" import InlineLink from "@/components/Link" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" From cf2e80dc8921aca0b9f82455e45d45eb2db5d827 Mon Sep 17 00:00:00 2001 From: Omkar Kamale Date: Fri, 15 Mar 2024 00:59:28 +0530 Subject: [PATCH 3/8] Sort Imports --- src/components/Glossary/GlossaryDefinition/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index 2bc8c9fba15..d025c8dbab8 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,11 +1,11 @@ -import { ComponentProps, useState } from "react" -import { VscLink } from "react-icons/vsc" import { Box, Flex, Link, Text } from "@chakra-ui/react" +import { ComponentProps, useState } from "react" + +import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" import InlineLink from "@/components/Link" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" - -import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" +import { VscLink } from "react-icons/vsc" interface GlossaryDefinitionProps { term: string From 13f7900965b7584b98af99498142ffbbb978830b Mon Sep 17 00:00:00 2001 From: Omkar Kamale Date: Sat, 30 Mar 2024 00:57:00 +0530 Subject: [PATCH 4/8] Added IdAnchor from MdComponents --- .../Glossary/GlossaryDefinition/index.tsx | 86 +++++++++++-------- 1 file changed, 48 insertions(+), 38 deletions(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index d025c8dbab8..b9bc3831365 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,11 +1,12 @@ -import { Box, Flex, Link, Text } from "@chakra-ui/react" -import { ComponentProps, useState } from "react" +import { ComponentProps } from "react" +import { CiLink } from "react-icons/ci" +import { Box, type HeadingProps, Icon, Link, Text } from "@chakra-ui/react" -import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" import InlineLink from "@/components/Link" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" -import { VscLink } from "react-icons/vsc" + +import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" interface GlossaryDefinitionProps { term: string @@ -24,46 +25,55 @@ const GlossaryDefinition = ({ size = "md", options = { ns: DEFAULT_GLOSSARY_NS }, }: GlossaryDefinitionProps) => { - const [showLink, setShowLink] = useState(false) - const headingStyles = - size === "sm" - ? { fontSize: "md", mt: 0, mb: 2 } - : { fontSize: { base: "xl", md: "2xl" } } - const textStyles = size === "sm" ? { mb: 0 } : {} - const linkStyles = { - color: "inherit", - textDecoration: "none", + const IdAnchor = ({ id }: { id?: string }) => { + if (!id) return null + return ( + + + + ) } - - const linkIconStyles = { - left: "-1.5em", - top: "0.8em", - fontSize: "0.5em", - color: "var(--eth-colors-primary-base)", - display: showLink ? "" : "none", - cursor: "pointer", + 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) => ( + + + {children} + + ) return ( - setShowLink(true)} onMouseLeave={() => setShowLink(false)}> - - - - - - - - - - - - + + + + Date: Sun, 31 Mar 2024 01:43:22 +0530 Subject: [PATCH 5/8] reverting changes --- .../Glossary/GlossaryDefinition/index.tsx | 64 +++++-------------- 1 file changed, 17 insertions(+), 47 deletions(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index b9bc3831365..58c86fa3ac8 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,13 +1,11 @@ -import { ComponentProps } from "react" -import { CiLink } from "react-icons/ci" -import { Box, type HeadingProps, Icon, Link, Text } from "@chakra-ui/react" +import { Box, Text } from "@chakra-ui/react" +import { ComponentProps } from "react" +import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" import InlineLink from "@/components/Link" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" -import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" - interface GlossaryDefinitionProps { term: string size?: "md" | "sm" @@ -25,57 +23,29 @@ const GlossaryDefinition = ({ size = "md", options = { ns: DEFAULT_GLOSSARY_NS }, }: GlossaryDefinitionProps) => { - const textStyles = size === "sm" ? { mb: 0 } : {} + const headingStyles = + size === "sm" + ? { fontSize: "md", mt: 0, mb: 2 } + : { fontSize: { base: "xl", md: "2xl" } } - const IdAnchor = ({ id }: { id?: string }) => { - if (!id) return null - return ( - - - - ) - } - 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) => ( - - - {children} - - ) + const textStyles = size === "sm" ? { mb: 0 } : {} return ( - + - - - + + {/** + * `as="span"` prevents hydration warnings for strings that contain + * elements that cannot be nested inside `p` tags, like `ul` tags + * (found in some Glossary definition). + * TODO: Develop a better solution to handle this case. + */} + Date: Sun, 31 Mar 2024 01:52:34 +0530 Subject: [PATCH 6/8] Added IdAnchor --- .../Glossary/GlossaryDefinition/index.tsx | 55 +++++++++++++++---- 1 file changed, 45 insertions(+), 10 deletions(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index 58c86fa3ac8..e80a0f0d772 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,11 +1,13 @@ -import { Box, Text } from "@chakra-ui/react" - import { ComponentProps } from "react" -import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" +import { CiLink } from "react-icons/ci" +import { Box, type HeadingProps, Icon, Link, Text } from "@chakra-ui/react" + import InlineLink from "@/components/Link" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" +import { DEFAULT_GLOSSARY_NS } from "@/lib/constants" + interface GlossaryDefinitionProps { term: string size?: "md" | "sm" @@ -23,22 +25,55 @@ 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 IdAnchor = ({ id }: { id?: string }) => { + if (!id) return null + return ( + + + + ) + } + 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) => ( + + + {children} + + ) + return ( - + - + {/** * `as="span"` prevents hydration warnings for strings that contain * elements that cannot be nested inside `p` tags, like `ul` tags From b4f86016cfa5f82daf48a5b1e25c0edd83865371 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 24 May 2024 15:59:10 -0600 Subject: [PATCH 7/8] refactor: use reusable IdAnchor --- .../Glossary/GlossaryDefinition/index.tsx | 21 ++----------------- src/components/MdComponents.tsx | 2 +- 2 files changed, 3 insertions(+), 20 deletions(-) diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index e80a0f0d772..97164dc1cdb 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,8 +1,8 @@ import { ComponentProps } from "react" -import { CiLink } from "react-icons/ci" -import { Box, type HeadingProps, Icon, Link, Text } from "@chakra-ui/react" +import { Box, type HeadingProps, Text } from "@chakra-ui/react" import InlineLink from "@/components/Link" +import { IdAnchor } from "@/components/MdComponents" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" @@ -27,23 +27,6 @@ const GlossaryDefinition = ({ }: GlossaryDefinitionProps) => { const textStyles = size === "sm" ? { mb: 0 } : {} - const IdAnchor = ({ id }: { id?: string }) => { - if (!id) return null - return ( - - - - ) - } const headingPropsForAnchor = (id?: string): HeadingProps => { if (!id) return {} return { diff --git a/src/components/MdComponents.tsx b/src/components/MdComponents.tsx index e8baa592c41..2d62c713dd6 100644 --- a/src/components/MdComponents.tsx +++ b/src/components/MdComponents.tsx @@ -65,7 +65,7 @@ export const commonHeadingProps = (id?: string): HeadingProps => ({ ...headingPropsForAnchor(id), }) -const IdAnchor = ({ id }: { id?: string }) => { +export const IdAnchor = ({ id }: { id?: string }) => { if (!id) return null return ( Date: Fri, 24 May 2024 17:06:03 -0600 Subject: [PATCH 8/8] refactor: extract IdAnchor to new file prevents circular reference issues from inside MdComponents --- .../Glossary/GlossaryDefinition/index.tsx | 2 +- src/components/IdAnchor.tsx | 24 +++++++++++++++++++ src/components/MdComponents.tsx | 23 +----------------- 3 files changed, 26 insertions(+), 23 deletions(-) create mode 100644 src/components/IdAnchor.tsx diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx index 97164dc1cdb..4166449b07e 100644 --- a/src/components/Glossary/GlossaryDefinition/index.tsx +++ b/src/components/Glossary/GlossaryDefinition/index.tsx @@ -1,8 +1,8 @@ import { ComponentProps } from "react" import { Box, type HeadingProps, Text } from "@chakra-ui/react" +import IdAnchor from "@/components/IdAnchor" import InlineLink from "@/components/Link" -import { IdAnchor } from "@/components/MdComponents" import OldHeading from "@/components/OldHeading" import Translation from "@/components/Translation" diff --git a/src/components/IdAnchor.tsx b/src/components/IdAnchor.tsx new file mode 100644 index 00000000000..72569a8bed2 --- /dev/null +++ b/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 ( + + + + ) +} + +export default IdAnchor diff --git a/src/components/MdComponents.tsx b/src/components/MdComponents.tsx index 2d62c713dd6..fe8182f787f 100644 --- a/src/components/MdComponents.tsx +++ b/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), }) -export const IdAnchor = ({ id }: { id?: string }) => { - if (!id) return null - return ( - - - - ) -} - export const Heading1 = ({ children, ...rest }: HeadingProps) => ( {children}