diff --git a/i18n/ja/code.json b/i18n/ja/code.json index df66096c1..9ad89c29b 100644 --- a/i18n/ja/code.json +++ b/i18n/ja/code.json @@ -416,7 +416,7 @@ "homepage.featuredItemsHeading": { "message": "パーソナライゼーションにより" }, - "homepage.featuredItemsJAHeading": { + "homepage.featuredItemsExtraHeading": { "message": "関連性の高いコンテンツと広告配信を可能に" }, "homepage.featuredItemsSubheading": { diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index ad8389c26..e7a686952 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -8,7 +8,8 @@ import SectionHeader from "@site/src/components/SectionHeader"; import * as emailAnimation from "./email.json"; import * as crossDeviceAnimation from "./crossDevice.json"; import * as personLockAnimation from "./personLock.json"; -import { useIsJapanese } from "@site/src/utils/isJapanese"; +import { useGetCurrentLocale } from "@site/src/utils/useGetCurrentLocale"; +import { isNonEmptyString } from "@site/src/utils"; type FeatureItem = { Svg: React.ComponentType>; @@ -21,9 +22,9 @@ const componentData = { id: "homepage.featuredItemsHeading", message: "Enable personalization and relevance on content and advertising", }), - jaHeading: translate({ - id: "homepage.featuredItemsJAHeading", - message: "Enable personalization and relevance on content and advertising", + extraHeading: translate({ + id: "homepage.featuredItemsExtraHeading", + message: "", }), subheading: translate({ id: "homepage.featuredItemsSubheading", @@ -90,15 +91,22 @@ function Feature({ Svg, description, lottieAnimation }: FeatureItem) { } export default function HomepageFeatures(): JSX.Element { - const isJapanese = useIsJapanese(); + const currentLocale = useGetCurrentLocale(); + return (
{FeatureList.map((props, idx) => ( diff --git a/src/components/HomepageFeatures/styles.module.scss b/src/components/HomepageFeatures/styles.module.scss index c3f85e4bb..37908716e 100644 --- a/src/components/HomepageFeatures/styles.module.scss +++ b/src/components/HomepageFeatures/styles.module.scss @@ -103,14 +103,10 @@ .header { margin-bottom: 3.125rem; -} - -/** Japanese Styles **/ -.headerJa { - margin-bottom: 3.125rem; - - h2 { - font-size: 4.2vw; + &.ja { + h2 { + font-size: 4.2vw; + } } } diff --git a/src/components/HomepageHero/index.tsx b/src/components/HomepageHero/index.tsx index 1d2a77136..dcda4f215 100644 --- a/src/components/HomepageHero/index.tsx +++ b/src/components/HomepageHero/index.tsx @@ -4,8 +4,12 @@ import Translate from "@docusaurus/Translate"; import HeroBg from "./HeroBgAnimation"; import styles from "./styles.module.scss"; import { useIsJapanese } from "@site/src/utils/isJapanese"; +import { useGetCurrentLocale } from "@site/src/utils/useGetCurrentLocale"; + export default function HomepageHero(): JSX.Element { const isJapanese = useIsJapanese(); + const currentLocale = useGetCurrentLocale(); + return (

An open-source identity solution built for the open internet diff --git a/src/components/HomepageHero/styles.module.scss b/src/components/HomepageHero/styles.module.scss index 454102b54..1836aa37a 100644 --- a/src/components/HomepageHero/styles.module.scss +++ b/src/components/HomepageHero/styles.module.scss @@ -92,18 +92,15 @@ /*** Japanese Styles **/ -.heroHeadingJa { - font-size: 3rem; - font-weight: 600; - line-height: 1; - letter-spacing: -0.03em; +.heroHeading { + &.ja { + font-size: 3rem; + font-weight: 600; + line-height: 1; + letter-spacing: -0.03em; - // @include lg { - // font-size: 5.85rem; - // } - - @media only screen and (min-width: 996px) { - // font-size: 5.85rem; - font-size: 4.4vw; + @media only screen and (min-width: 996px) { + font-size: 4.4vw; + } } } diff --git a/src/components/HomepagePartnersSegment/index.tsx b/src/components/HomepagePartnersSegment/index.tsx index 4f85c856f..bb1c9c895 100644 --- a/src/components/HomepagePartnersSegment/index.tsx +++ b/src/components/HomepagePartnersSegment/index.tsx @@ -9,7 +9,7 @@ import RightArrow from "@site/static/img/right-arrow-icon.svg"; import SectionHeader from "@site/src/components/SectionHeader"; import { useIsMobile } from "@site/src/utils/isMobile"; import { usePrefersReducedMotion } from "@site/src/utils/usePrefersReducesMotion"; -import { useIsJapanese } from "@site/src/utils/isJapanese"; +import { useGetCurrentLocale } from "@site/src/utils/useGetCurrentLocale"; // @ts-ignore - Lottie animation data import chartIconAnimation from "./chartIconData.json"; @@ -36,6 +36,7 @@ const PartnerList: PartnerItem[] = [ }), url: "/docs/overviews/overview-publishers", Svg: require("@site/static/img/documents-icon.svg").default, + //@ts-ignore animationData: documentsAnimation, description: translate({ id: "homepage.partnersPublishersDescription", @@ -50,6 +51,7 @@ const PartnerList: PartnerItem[] = [ }), url: "/docs/overviews/overview-advertisers", Svg: require("@site/static/img/chart-icon.svg").default, + //@ts-ignore animationData: chartIconAnimation, description: translate({ id: "homepage.partnersAdvertisersDescription", @@ -64,6 +66,7 @@ const PartnerList: PartnerItem[] = [ }), url: "/docs/overviews/overview-dsps", Svg: require("@site/static/img/flowchart-icon.svg").default, + //@ts-ignore animationData: flowchartAnimation, description: translate({ id: "homepage.partnersDspsDescription", @@ -78,6 +81,7 @@ const PartnerList: PartnerItem[] = [ }), url: "/docs/overviews/overview-data-providers", Svg: require("@site/static/img/cloud-upload-icon.svg").default, + //@ts-ignore animationData: uploadAnimation, description: translate({ id: "homepage.partnersDataProvidersDescription", @@ -109,8 +113,7 @@ function Partner({ partnerItem, playAnimation }: PartnerProps): JSX.Element { const { heading, Svg, animationData, url, description } = partnerItem; const lottieRef = React.useRef(null); const isMobile = useIsMobile(); - - const isJapanese = useIsJapanese(); + const currentLocale = useGetCurrentLocale(); React.useEffect(() => { if (!isMobile) { @@ -126,7 +129,14 @@ function Partner({ partnerItem, playAnimation }: PartnerProps): JSX.Element {
-

+

{heading}

diff --git a/src/components/HomepagePartnersSegment/styles.module.scss b/src/components/HomepagePartnersSegment/styles.module.scss index 9869e1706..0a836528f 100644 --- a/src/components/HomepagePartnersSegment/styles.module.scss +++ b/src/components/HomepagePartnersSegment/styles.module.scss @@ -132,13 +132,15 @@ /*** JA specific styles ****/ -.cardHeaderJa { - font-weight: 600; - line-height: 1.13; - letter-spacing: -0.02em; - font-size: 1.5rem; +.cardHeader { + &.ja { + font-weight: 600; + line-height: 1.13; + letter-spacing: -0.02em; + font-size: 1.5rem; - @media only screen and (min-width: 996px) { - font-size: 1.8rem; + @media only screen and (min-width: 996px) { + font-size: 1.8rem; + } } } diff --git a/src/components/SectionHeader/index.tsx b/src/components/SectionHeader/index.tsx index f4ea50fd3..6de9d9a9c 100644 --- a/src/components/SectionHeader/index.tsx +++ b/src/components/SectionHeader/index.tsx @@ -7,14 +7,14 @@ export type SectionHeaderProps = { subheading: string; eyebrow?: string; extraClass?: string; - jaHeading?: string; + extraHeading?: string; }; export default function SectionHeader({ heading, subheading, eyebrow, extraClass, - jaHeading, + extraHeading, }: SectionHeaderProps): JSX.Element { return (
{heading}{" "} - {jaHeading && {jaHeading}} + {extraHeading && ( + {extraHeading} + )}

diff --git a/src/components/SectionHeader/styles.module.scss b/src/components/SectionHeader/styles.module.scss index 8bc87e329..444b70160 100644 --- a/src/components/SectionHeader/styles.module.scss +++ b/src/components/SectionHeader/styles.module.scss @@ -18,7 +18,7 @@ } } -.jaHeading { +.extraHeading { display: block; @media only screen and (min-width: 996px) { font-size: 3vw !important; diff --git a/src/data/languageData.ts b/src/data/languageData.ts new file mode 100644 index 000000000..e7095a42a --- /dev/null +++ b/src/data/languageData.ts @@ -0,0 +1,14 @@ +export type LanguageThemeType = { + [key in "en" | "ja"]: { + formId: number; + }; +}; + +export const languageData: LanguageThemeType = { + en: { + formId: 2753, + }, + ja: { + formId: 3688, + }, +}; diff --git a/src/data/partners.ts b/src/data/partners.ts index 508bd8d4c..f82506b4b 100644 --- a/src/data/partners.ts +++ b/src/data/partners.ts @@ -1,12 +1,12 @@ -export type PartnersDataType = { +export interface PartnersDataType { name: string; logo: string; type: ("Publishers" | "Data" | "DSP" | "CDP")[]; featured?: boolean; order?: number; -}[]; +} -export const partnersData: PartnersDataType = [ +export const partnersData: PartnersDataType[] = [ { name: "4 GTV TV", logo: "4GTV.tv-logo_2022-07-12-203714_dakq.png", diff --git a/src/pages/partners.tsx b/src/pages/partners.tsx index 0e8f11fff..737a52248 100644 --- a/src/pages/partners.tsx +++ b/src/pages/partners.tsx @@ -10,7 +10,7 @@ import { pushGtmEvent } from "@site/src/utils/pushGtmEvent"; type PartnerSection = { title: string; - partners: PartnersDataType; + partners: PartnersDataType[]; }; const componentData = { diff --git a/src/pages/request-access.tsx b/src/pages/request-access.tsx index fdcb4b05f..f307b108e 100644 --- a/src/pages/request-access.tsx +++ b/src/pages/request-access.tsx @@ -1,7 +1,6 @@ //TS and Marketo is not a good time so ignoring in eslint import React from "react"; import { translate } from "@docusaurus/Translate"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; import PageHeader from "@site/src/components/PageHeader"; import styles from "./request-access.module.scss"; @@ -10,6 +9,8 @@ import { capitalizeFirstLetter, identifyClosestSiblingInput, } from "@site/src/utils"; +import { languageData } from "@site/src/data/languageData"; +import { useGetCurrentLocale } from "@site/src/utils/useGetCurrentLocale"; const componentData = { title: translate({ @@ -42,7 +43,8 @@ declare global { } export default function RequestDemo(): JSX.Element { - const { i18n } = useDocusaurusContext(); + const currentLocale = useGetCurrentLocale(); + const formId = languageData[currentLocale].formId || 2753; //default is english React.useEffect(() => { const pageViewData = { @@ -58,8 +60,6 @@ export default function RequestDemo(): JSX.Element { const formRef = React.useRef(null); - const formId = i18n.currentLocale === "ja" ? 3688 : 2753; - const onChange = React.useCallback((event) => { const target = event.target; const parent = target.parentElement; diff --git a/src/utils/isJapanese.ts b/src/utils/isJapanese.ts index 5127130d2..ffd27878e 100644 --- a/src/utils/isJapanese.ts +++ b/src/utils/isJapanese.ts @@ -1,6 +1,6 @@ -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import { useGetCurrentLocale } from "@site/src/utils/useGetCurrentLocale"; export function useIsJapanese() { - const { i18n } = useDocusaurusContext(); - return i18n.currentLocale === "ja"; + const currentLocale = useGetCurrentLocale(); + return currentLocale === "ja"; } diff --git a/src/utils/useGetCurrentLocale.ts b/src/utils/useGetCurrentLocale.ts new file mode 100644 index 000000000..4f51fca24 --- /dev/null +++ b/src/utils/useGetCurrentLocale.ts @@ -0,0 +1,6 @@ +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; + +export function useGetCurrentLocale() { + const { i18n } = useDocusaurusContext(); + return i18n.currentLocale; +}