Merge pull request #8592 from ethereum/i18n-parse-html-json

i18n lib change - use htmr to parse html inside json files #8585

package.json

@@ -54,6 +54,7 @@
     "gatsby-transformer-json": "^4.11.0",
     "gatsby-transformer-remark": "^3.0.0",
     "gatsby-transformer-sharp": "^4.21.0",
+    "htmr": "^1.0.2",
     "i18next": "^21.9.2",
     "is-relative-url": "^3.0.0",
     "lodash": "^4.17.21",

src/components/FeedbackCard.tsx

@@ -1,7 +1,6 @@
 // Library imports
 import React, { ReactNode, useState } from "react"
 import { Flex, FlexProps, Heading, Icon } from "@chakra-ui/react"
-import { useTranslation } from "gatsby-plugin-react-i18next"
 // Component imports
 import Button from "./Button"
 import Translation from "./Translation"
@@ -22,7 +21,6 @@ const FeedbackCard: React.FC<IProps> = ({
   isArticle = false,
   ...props
 }) => {
-  const { t } = useTranslation()
   const [feedbackSubmitted, setFeedbackSubmitted] = useState(false)
   const surveyUrl = useSurvey(feedbackSubmitted)
 
@@ -73,13 +71,10 @@ const FeedbackCard: React.FC<IProps> = ({
           {getTitle(feedbackSubmitted)}
         </Heading>
         {feedbackSubmitted && (
-          <p
-            dangerouslySetInnerHTML={{
-              __html: `${t("feedback-widget-thank-you-subtitle")} ${t(
-                "feedback-widget-thank-you-subtitle-ext"
-              )}`,
-            }}
-          />
+          <p>
+            <Translation id="feedback-widget-thank-you-subtitle" />{" "}
+            <Translation id="feedback-widget-thank-you-subtitle-ext" />
+          </p>
         )}
         <Flex gap={4}>
           {!feedbackSubmitted ? (

src/components/Staking/StakingHierarchy.tsx

@@ -1,7 +1,6 @@
 // Libraries
 import React from "react"
 import styled from "@emotion/styled"
-import { useTranslation } from "gatsby-plugin-react-i18next"
 
 // Components
 import ButtonLink from "../ButtonLink"
@@ -255,8 +254,6 @@ const Line = styled.aside`
 export interface IProps {}
 
 const StakingHierarchy: React.FC<IProps> = () => {
-  const { t } = useTranslation()
-
   return (
     <Container>
       <Section number={1}>
@@ -290,11 +287,9 @@ const StakingHierarchy: React.FC<IProps> = () => {
           <SoloGlyph />
         </Glyph>
         <Content>
-          <p
-            dangerouslySetInnerHTML={{
-              __html: t("page-staking-hierarchy-solo-p1"),
-            }}
-          />
+          <p>
+            <Translation id="page-staking-hierarchy-solo-p1" />
+          </p>
           <p>
             <Translation id="page-staking-hierarchy-solo-p2" />
           </p>
@@ -446,11 +441,9 @@ const StakingHierarchy: React.FC<IProps> = () => {
           <p>
             <Translation id="page-staking-hierarchy-cex-p2" />
           </p>
-          <p
-            dangerouslySetInnerHTML={{
-              __html: t("page-staking-hierarchy-cex-p3"),
-            }}
-          />
+          <p>
+            <Translation id="page-staking-hierarchy-cex-p3" />
+          </p>
         </Content>
       </Section>
     </Container>

src/components/Staking/StakingHowSoloWorks.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import styled from "@emotion/styled"
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
-import { useTranslation } from "gatsby-plugin-react-i18next"
 
 import OrderedList from "../OrderedList"
 import Translation from "../Translation"
@@ -23,7 +22,6 @@ const Image = styled(GatsbyImage)``
 export interface IProps {}
 
 const StakingHowSoloWorks: React.FC<IProps> = () => {
-  const { t } = useTranslation()
   const { image } = useStaticQuery(graphql`
     {
       image: file(relativePath: { eq: "hackathon_transparent.png" }) {
@@ -40,11 +38,9 @@ const StakingHowSoloWorks: React.FC<IProps> = () => {
   `)
 
   const items = [
-    <p
-      dangerouslySetInnerHTML={{
-        __html: t("page-staking-how-solo-works-item-1"),
-      }}
-    />,
+    <p>
+      <Translation id="page-staking-how-solo-works-item-1" />
+    </p>,
     <p>
       <Translation id="page-staking-how-solo-works-item-2" />
     </p>,

src/components/Translation.tsx

@@ -1,12 +1,29 @@
 import React from "react"
-import { Trans } from "gatsby-plugin-react-i18next"
+import { useTranslation } from "gatsby-plugin-react-i18next"
+import htmr from "htmr"
 
-interface Props extends React.ComponentProps<typeof Trans> {
+import Link from "./Link"
+
+interface Props {
   id: string
 }
 
-// Wrapper on <FormattedHTMLMessage /> to always fallback to English
-// Use this component for any user-facing string
-const Translation = ({ id, ...rest }: Props) => <Trans i18nKey={id} {...rest} />
+// Custom components mapping to be used by `htmr` when parsing the translation
+// text
+const transform = {
+  a: Link,
+}
+
+// Renders the translation string for the given translation key `id`. It
+// fallback to English if it doesn't find the given key in the current language
+const Translation = ({ id }: Props) => {
+  const { t } = useTranslation()
+
+  const translatedText = t(id)
+
+  // Use `htmr` to parse html content in the translation text
+  // @ts-ignore
+  return <>{htmr(translatedText, { transform })}</>
+}
 
 export default Translation

src/pages-conditional/what-is-ethereum.tsx

@@ -649,21 +649,17 @@ const WhatIsEthereumPage = ({
                   <p>
                     <Translation id="page-what-is-ethereum-slide-2-desc-1" />
                   </p>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: t("page-what-is-ethereum-slide-2-desc-2"),
-                    }}
-                  />
+                  <p>
+                    <Translation id="page-what-is-ethereum-slide-2-desc-2" />
+                  </p>
                 </EmblaSlide>
                 <EmblaSlide>
                   <h3>
                     <Translation id="page-what-is-ethereum-slide-3-title" />
                   </h3>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: t("page-what-is-ethereum-slide-3-desc-1"),
-                    }}
-                  />
+                  <p>
+                    <Translation id="page-what-is-ethereum-slide-3-desc-1" />
+                  </p>
                 </EmblaSlide>
                 <EmblaSlide>
                   <h3>

src/pages/layer-2.tsx

@@ -552,28 +552,22 @@ const Layer2Page = ({ data }: PageProps<Queries.Layer2PageQuery>) => {
             <h2>
               <Translation id="layer-2-why-do-we-need-layer-2-title" />
             </h2>
-            <p
-              dangerouslySetInnerHTML={{
-                __html: t("layer-2-why-do-we-need-layer-2-1"),
-              }}
-            />
-            <p
-              dangerouslySetInnerHTML={{
-                __html: t("layer-2-why-do-we-need-layer-2-2"),
-              }}
-            />
+            <p>
+              <Translation id="layer-2-why-do-we-need-layer-2-1" />
+            </p>
+            <p>
+              <Translation id="layer-2-why-do-we-need-layer-2-2" />
+            </p>
 
             <h3>
               <Translation id="layer-2-why-do-we-need-layer-2-scalability" />
             </h3>
             <p>
               <Translation id="layer-2-why-do-we-need-layer-2-scalability-1" />
             </p>
-            <p
-              dangerouslySetInnerHTML={{
-                __html: t("layer-2-why-do-we-need-layer-2-scalability-2"),
-              }}
-            />
+            <p>
+              <Translation id="layer-2-why-do-we-need-layer-2-scalability-2" />
+            </p>
             <Link to="/upgrades/vision/">
               <Translation id="layer-2-why-do-we-need-layer-2-scalability-3" />
             </Link>
@@ -609,7 +603,9 @@ const Layer2Page = ({ data }: PageProps<Queries.Layer2PageQuery>) => {
             <h3>
               <Translation id="layer-2-rollups-title" />
             </h3>
-            <p dangerouslySetInnerHTML={{ __html: t("layer-2-rollups-1") }} />
+            <p>
+              <Translation id="layer-2-rollups-1" />
+            </p>
             <p>
               <Translation id="layer-2-rollups-2" />
             </p>
@@ -677,9 +673,9 @@ const Layer2Page = ({ data }: PageProps<Queries.Layer2PageQuery>) => {
         <p>
           <Translation id="layer-2-use-layer-2-1" />
         </p>
-        <p
-          dangerouslySetInnerHTML={{ __html: t("layer-2-contract-accounts") }}
-        />
+        <p>
+          <Translation id="layer-2-contract-accounts" />
+        </p>
         <h3>
           <Translation id="layer-2-use-layer-2-generalized-title" />
         </h3>
@@ -847,16 +843,12 @@ const Layer2Page = ({ data }: PageProps<Queries.Layer2PageQuery>) => {
           <p>
             <Translation id="layer-2-faq-question-4-description-1" />
           </p>
-          <p
-            dangerouslySetInnerHTML={{
-              __html: t("layer-2-faq-question-4-description-2"),
-            }}
-          />
-          <p
-            dangerouslySetInnerHTML={{
-              __html: t("layer-2-faq-question-4-description-3"),
-            }}
-          />
+          <p>
+            <Translation id="layer-2-faq-question-4-description-2" />
+          </p>
+          <p>
+            <Translation id="layer-2-faq-question-4-description-3" />
+          </p>
           <p>
             <Link to="/bridges/">
               <Translation id="layer-2-more-on-bridges" />
@@ -870,11 +862,9 @@ const Layer2Page = ({ data }: PageProps<Queries.Layer2PageQuery>) => {
               <Translation id="layer-2-faq-question-5-view-listing-policy" />
             </Link>
           </p>
-          <p
-            dangerouslySetInnerHTML={{
-              __html: t("layer-2-faq-question-5-description-2"),
-            }}
-          />
+          <p>
+            <Translation id="layer-2-faq-question-5-description-2" />
+          </p>
         </ExpandableCard>
       </PaddedContent>
 

src/pages/run-a-node.tsx

@@ -943,11 +943,9 @@ const RunANodePage = ({ data }: PageProps<Queries.RunANodePageQuery>) => {
           <StyledEmoji text=":cut_of_meat:" size={2} />
           <Translation id="page-run-a-node-staking-plans-title" />
         </h3>
-        <p
-          dangerouslySetInnerHTML={{
-            __html: t("page-run-a-node-staking-plans-description"),
-          }}
-        />
+        <p>
+          <Translation id="page-run-a-node-staking-plans-description" />
+        </p>
         <p>
           <Translation id="page-run-a-node-staking-plans-ethstaker-link-description" />{" "}
           -{" "}

src/pages/staking/index.tsx

@@ -470,13 +470,9 @@ const StakingPage = ({
                   <li>
                     <Translation id="page-staking-section-comparison-solo-requirements-li2" />
                   </li>
-                  <li
-                    dangerouslySetInnerHTML={{
-                      __html: t(
-                        "page-staking-section-comparison-solo-requirements-li3"
-                      ),
-                    }}
-                  />
+                  <li>
+                    <Translation id="page-staking-section-comparison-solo-requirements-li3" />
+                  </li>
                 </ul>
               </div>
               <div style={{ gridArea: "solo-cta" }}>
@@ -632,11 +628,9 @@ const StakingPage = ({
               <p>
                 <Translation id="page-staking-faq-3-answer-p1" />
               </p>
-              <p
-                dangerouslySetInnerHTML={{
-                  __html: t("page-staking-faq-3-answer-p2"),
-                }}
-              />
+              <p>
+                <Translation id="page-staking-faq-3-answer-p2" />
+              </p>
             </ExpandableCard>
           </Content>
           <Content>

src/pages/upgrades/vision.tsx

@@ -218,11 +218,9 @@ const VisionPage = ({
           <p>
             <Translation id="page-upgrades-vision-scalability-desc" />
           </p>
-          <p
-            dangerouslySetInnerHTML={{
-              __html: t("page-upgrades-vision-scalability-desc-3"),
-            }}
-          />
+          <p>
+            <Translation id="page-upgrades-vision-scalability-desc-3" />
+          </p>
           <p>
             <Translation id="page-upgrades-vision-scalability-desc-4" />{" "}
             <Link to="/upgrades/sharding/">

yarn.lock

@@ -10798,7 +10798,7 @@ htmlparser2@^4.1.0:
     domutils "^2.0.0"
     entities "^2.0.0"
 
-htmlparser2@^6.1.0:
+htmlparser2@^6.0.0, htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -10808,6 +10808,14 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+htmr@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/htmr/-/htmr-1.0.2.tgz#6e1feb8e4a62bae69774a95ca00702a32ac96b16"
+  integrity sha512-7T9babEHZwECQ2/ouxNPow1uGcKbj/BcbslPGPRxBKIOLNiIrFKq6ELzor7mc4HiexZzdb3izQQLl16bhPR9jw==
+  dependencies:
+    html-entities "^2.1.0"
+    htmlparser2 "^6.0.0"
+
 http-cache-semantics@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"