Merge pull request #11021 from ethereum/md-links

Markdown links component

Author: pettinarip

src/components/MdLink.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react"
+
+import GlossaryTooltip from "./Glossary/GlossaryTooltip"
+import InlineLink from "./Link"
+
+interface Props {
+  href: string
+  children: ReactNode
+}
+
+/**
+ * Link component to use in markdown templates.
+ *
+ * In case the `href` for the given link points to the glossary page, it
+ * displays the GlossaryTooltip component instead of a Link.
+ *
+ * NOTE: This component exists because we want to keep using the link syntax
+ * inside of our MD files. The native link syntax has a better UX with Crowdin
+ * translations.
+ */
+function MdLink(props: Props) {
+  const regex = new RegExp(/\/glossary\/#(.+)/)
+  const matches = props.href.match(regex)
+
+  // get the `termKey` from the `href`
+  // e.g. in `/glossary/#new-term` => "new-term" is the `termKey`
+  if (matches?.length) {
+    const termKey = matches[1]
+
+    return <GlossaryTooltip termKey={termKey} children={props.children} />
+  }
+
+  return <InlineLink {...props} />
+}
+
+export default MdLink

src/pages-conditional/dapps.tsx

@@ -40,6 +40,7 @@ import PageMetadata from "../components/PageMetadata"
 import ProductList from "../components/ProductList"
 import PageHero from "../components/PageHero"
 import FeedbackCard from "../components/FeedbackCard"
+import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
 
 import { getImage, getSrc } from "../utils/image"
 import { trackCustomEvent } from "../utils/matomo"
@@ -1263,9 +1264,9 @@ const DappsPage = ({
         </StyledH2>
         <Text>
           <Translation id="page-dapps-get-started-subtitle" />{" "}
-          <InlineLink to="/glossary/#transaction-fee">
+          <GlossaryTooltip termKey="transaction-fee">
             <Translation id="transaction-fees" />
-          </InlineLink>
+          </GlossaryTooltip>
         </Text>
         <Row>
           <StepBoxContainer>

src/templates/docs.tsx

@@ -30,7 +30,6 @@ import CrowdinContributors from "../components/FileContributorsCrowdin"
 import GitHubContributors from "../components/FileContributorsGitHub"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
 import InfoBanner from "../components/InfoBanner"
-import InlineLink from "../components/Link"
 import { mdxTableComponents } from "../components/Table"
 import PageMetadata from "../components/PageMetadata"
 import TableOfContents, {
@@ -43,6 +42,7 @@ import DocsNav from "../components/DocsNav"
 import DeveloperDocsLinks from "../components/DeveloperDocsLinks"
 import RollupProductDevDoc from "../components/RollupProductDevDoc"
 import YouTube from "../components/YouTube"
+import MdLink from "../components/MdLink"
 
 import { isLangRightToLeft } from "../utils/translations"
 import { Lang } from "../utils/languages"
@@ -193,7 +193,7 @@ const BackToTop = (props: ChildOnlyProp) => (
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: H1,
   h2: H2,
   h3: H3,

src/templates/roadmap.tsx

@@ -26,7 +26,6 @@ import DocLink from "../components/DocLink"
 import Contributors from "../components/Contributors"
 import InfoBanner from "../components/InfoBanner"
 import UpgradeStatus from "../components/UpgradeStatus"
-import InlineLink from "../components/Link"
 import { mdxTableComponents } from "../components/Table"
 import Logo from "../components/Logo"
 import MeetupList from "../components/MeetupList"
@@ -45,6 +44,7 @@ import Breadcrumbs from "../components/Breadcrumbs"
 import RoadmapActionCard from "../components/Roadmap/RoadmapActionCard"
 import RoadmapImageContent from "../components/Roadmap/RoadmapImageContent"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
+import MdLink from "../components/MdLink"
 import {
   Page,
   InfoColumn,
@@ -118,7 +118,7 @@ const TitleCard = (props: ChildOnlyProp) => (
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: H1,
   h2: H2,
   h3: H3,

src/templates/staking.tsx

@@ -27,7 +27,6 @@ import DocLink from "../components/DocLink"
 import Contributors from "../components/Contributors"
 import InfoBanner from "../components/InfoBanner"
 import UpgradeStatus from "../components/UpgradeStatus"
-import InlineLink from "../components/Link"
 import { mdxTableComponents } from "../components/Table"
 import Logo from "../components/Logo"
 import MeetupList from "../components/MeetupList"
@@ -54,6 +53,7 @@ import WithdrawalCredentials from "../components/Staking/WithdrawalCredentials"
 import WithdrawalsTabComparison from "../components/Staking/WithdrawalsTabComparison"
 import Callout from "../components/Callout"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
+import MdLink from "../components/MdLink"
 
 import { isLangRightToLeft, TranslationKey } from "../utils/translations"
 import { Lang } from "../utils/languages"
@@ -287,7 +287,7 @@ const TableContainer = (props: BoxProps) => (
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: Header1,
   h2: H2,
   h3: H3,

src/templates/static.tsx

@@ -47,6 +47,7 @@ import QuizWidget from "../components/Quiz/QuizWidget"
 import { Item as ItemTableOfContents } from "../components/TableOfContents/utils"
 import GlossaryDefinition from "../components/Glossary/GlossaryDefinition"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
+import MdLink from "../components/MdLink"
 
 import { getLocaleTimestamp } from "../utils/time"
 import { isLangRightToLeft, TranslationKey } from "../utils/translations"
@@ -171,7 +172,7 @@ const CardContainer = (props: ChildOnlyProp) => (
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: Header1,
   h2: Header2,
   h3: Header3,

src/templates/tutorial.tsx

@@ -20,10 +20,8 @@ import ButtonLink from "../components/ButtonLink"
 import Card from "../components/Card"
 import Codeblock from "../components/Codeblock"
 import TutorialMetadata from "../components/TutorialMetadata"
-import FileContributors from "../components/FileContributors"
 import InfoBanner from "../components/InfoBanner"
 import EnvWarningBanner from "../components/EnvWarningBanner"
-import InlineLink from "../components/Link"
 import { mdxTableComponents } from "../components/Table"
 import PageMetadata from "../components/PageMetadata"
 import TableOfContents, {
@@ -36,6 +34,7 @@ import YouTube from "../components/YouTube"
 import PostMergeBanner from "../components/Banners/PostMergeBanner"
 import FeedbackCard from "../components/FeedbackCard"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
+import MdLink from "../components/MdLink"
 
 import { isLangRightToLeft, TranslationKey } from "../utils/translations"
 import { Lang } from "../utils/languages"
@@ -198,7 +197,7 @@ const KBD = (props) => {
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: H1,
   h2: H2,
   h3: H3,

src/templates/upgrade.tsx

@@ -31,7 +31,7 @@ import Card from "../components/Card"
 import Contributors from "../components/Contributors"
 import InfoBanner from "../components/InfoBanner"
 import UpgradeStatus from "../components/UpgradeStatus"
-import InlineLink, { BaseLink } from "../components/Link"
+import { BaseLink } from "../components/Link"
 import { mdxTableComponents } from "../components/Table"
 import BeaconChainActions from "../components/BeaconChainActions"
 import ShardChainsList from "../components/ShardChainsList"
@@ -51,6 +51,7 @@ import MergeInfographic from "../components/MergeInfographic"
 import FeedbackCard from "../components/FeedbackCard"
 import QuizWidget from "../components/Quiz/QuizWidget"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
+import MdLink from "../components/MdLink"
 import {
   MobileButton,
   MobileButtonDropdown,
@@ -208,7 +209,7 @@ const P = (props: TextProps) => (
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: MDXH1,
   h2: H2,
   h3: H3,

src/templates/use-cases.tsx

@@ -52,6 +52,7 @@ import YouTube from "../components/YouTube"
 import FeedbackCard from "../components/FeedbackCard"
 import QuizWidget from "../components/Quiz/QuizWidget"
 import GlossaryTooltip from "../components/Glossary/GlossaryTooltip"
+import MdLink from "../components/MdLink"
 
 import { isLangRightToLeft } from "../utils/translations"
 import { getSummaryPoints } from "../utils/getSummaryPoints"
@@ -109,7 +110,7 @@ export const Paragraph = (props: ChildOnlyProp) => (
 // Note: you must pass components to MDXProvider in order to render them in markdown files
 // https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
 const components = {
-  a: InlineLink,
+  a: MdLink,
   h1: H1,
   h2: H2,
   h3: H3,