From 45124c8f298818d8b76ae31bd1ffab597c6252e4 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 14 Nov 2022 12:24:52 -0300 Subject: [PATCH 1/2] use htmr to parse html inside json files --- package.json | 1 + src/components/FeedbackCard.tsx | 13 ++--- src/components/Staking/StakingHierarchy.tsx | 19 ++---- .../Staking/StakingHowSoloWorks.tsx | 10 +--- src/components/Translation.tsx | 20 ++++++- src/pages-conditional/what-is-ethereum.tsx | 16 ++--- src/pages/layer-2.tsx | 58 ++++++++----------- src/pages/run-a-node.tsx | 8 +-- src/pages/staking/index.tsx | 18 ++---- src/pages/upgrades/vision.tsx | 8 +-- yarn.lock | 10 +++- 11 files changed, 82 insertions(+), 99 deletions(-) diff --git a/package.json b/package.json index 04d2f63f72c..2fb86933586 100644 --- a/package.json +++ b/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", diff --git a/src/components/FeedbackCard.tsx b/src/components/FeedbackCard.tsx index 2dda3cfdd68..d0d8d97c63b 100644 --- a/src/components/FeedbackCard.tsx +++ b/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 = ({ isArticle = false, ...props }) => { - const { t } = useTranslation() const [feedbackSubmitted, setFeedbackSubmitted] = useState(false) const surveyUrl = useSurvey(feedbackSubmitted) @@ -73,13 +71,10 @@ const FeedbackCard: React.FC = ({ {getTitle(feedbackSubmitted)} {feedbackSubmitted && ( -

+

+ {" "} + +

)} {!feedbackSubmitted ? ( diff --git a/src/components/Staking/StakingHierarchy.tsx b/src/components/Staking/StakingHierarchy.tsx index 01718b12d44..df86fa3572c 100644 --- a/src/components/Staking/StakingHierarchy.tsx +++ b/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 = () => { - const { t } = useTranslation() - return (
@@ -290,11 +287,9 @@ const StakingHierarchy: React.FC = () => { -

+

+ +

@@ -446,11 +441,9 @@ const StakingHierarchy: React.FC = () => {

-

+

+ +

diff --git a/src/components/Staking/StakingHowSoloWorks.tsx b/src/components/Staking/StakingHowSoloWorks.tsx index 9a137961e03..01f544bb57c 100644 --- a/src/components/Staking/StakingHowSoloWorks.tsx +++ b/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 = () => { - const { t } = useTranslation() const { image } = useStaticQuery(graphql` { image: file(relativePath: { eq: "hackathon_transparent.png" }) { @@ -40,11 +38,9 @@ const StakingHowSoloWorks: React.FC = () => { `) const items = [ -

, +

+ +

,

, diff --git a/src/components/Translation.tsx b/src/components/Translation.tsx index 9e3a2d9be91..1665af2cc52 100644 --- a/src/components/Translation.tsx +++ b/src/components/Translation.tsx @@ -1,12 +1,26 @@ 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 { +import Link from "./Link" + +interface Props { id: string } +const transform = { + a: Link, +} + // Wrapper on to always fallback to English // Use this component for any user-facing string -const Translation = ({ id, ...rest }: Props) => +const Translation = ({ id, ...rest }: Props) => { + const { t } = useTranslation() + + const translatedText = t(id) + + // @ts-ignore + return <>{htmr(translatedText, { transform })} +} export default Translation diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx index 570aef344a8..5af68f305f0 100644 --- a/src/pages-conditional/what-is-ethereum.tsx +++ b/src/pages-conditional/what-is-ethereum.tsx @@ -649,21 +649,17 @@ const WhatIsEthereumPage = ({

-

+

+ +

-

+

+ +

diff --git a/src/pages/layer-2.tsx b/src/pages/layer-2.tsx index 65e7e6d264c..4a8c94dde24 100644 --- a/src/pages/layer-2.tsx +++ b/src/pages/layer-2.tsx @@ -552,16 +552,12 @@ const Layer2Page = ({ data }: PageProps) => {

-

-

+

+ +

+

+ +

@@ -569,11 +565,9 @@ const Layer2Page = ({ data }: PageProps) => {

-

+

+ +

@@ -609,7 +603,9 @@ const Layer2Page = ({ data }: PageProps) => {

-

+

+ +

@@ -677,9 +673,9 @@ const Layer2Page = ({ data }: PageProps) => {

-

+

+ +

@@ -847,16 +843,12 @@ const Layer2Page = ({ data }: PageProps) => {

-

-

+

+ +

+

+ +

@@ -870,11 +862,9 @@ const Layer2Page = ({ data }: PageProps) => {

-

+

+ +

diff --git a/src/pages/run-a-node.tsx b/src/pages/run-a-node.tsx index b1edff62b9e..8b2318bee13 100644 --- a/src/pages/run-a-node.tsx +++ b/src/pages/run-a-node.tsx @@ -943,11 +943,9 @@ const RunANodePage = ({ data }: PageProps) => {

-

+

+ +

{" "} -{" "} diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx index 00604b4fbe7..979228251fe 100644 --- a/src/pages/staking/index.tsx +++ b/src/pages/staking/index.tsx @@ -470,13 +470,9 @@ const StakingPage = ({

    • -
  • +
  • + +
    • @@ -632,11 +628,9 @@ const StakingPage = ({

    -

    +

    + +

    diff --git a/src/pages/upgrades/vision.tsx b/src/pages/upgrades/vision.tsx index 54a4fc37be0..45bb6b22483 100644 --- a/src/pages/upgrades/vision.tsx +++ b/src/pages/upgrades/vision.tsx @@ -218,11 +218,9 @@ const VisionPage = ({

    -

    +

    + +

    {" "} diff --git a/yarn.lock b/yarn.lock index 04caded673e..3628a71af33 100644 --- a/yarn.lock +++ b/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" From 1becc653b6ef398956c8ebbbffeb25cb3c6bbfe4 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 23 Nov 2022 12:11:18 -0300 Subject: [PATCH 2/2] update Translation comments --- src/components/Translation.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Translation.tsx b/src/components/Translation.tsx index 1665af2cc52..3e389f29820 100644 --- a/src/components/Translation.tsx +++ b/src/components/Translation.tsx @@ -8,17 +8,20 @@ interface Props { id: string } +// Custom components mapping to be used by `htmr` when parsing the translation +// text const transform = { a: Link, } -// Wrapper on to always fallback to English -// Use this component for any user-facing string -const Translation = ({ id, ...rest }: Props) => { +// 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 })} }