Refactor: ♻️ multilingual structure

i18n/ja/code.json

@@ -416,7 +416,7 @@
   "homepage.featuredItemsHeading": {
     "message": "パーソナライゼーションにより"
   },
-  "homepage.featuredItemsJAHeading": {
+  "homepage.featuredItemsExtraHeading": {
     "message": "関連性の高いコンテンツと広告配信を可能に"
   },
   "homepage.featuredItemsSubheading": {

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<React.ComponentProps<"svg">>;
@@ -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 (
     <section className={clsx("bg-lavender text-white", styles.features)}>
       <div className="container">
         <SectionHeader
           heading={componentData.heading}
-          jaHeading={isJapanese ? componentData.jaHeading : ""}
+          extraHeading={
+            isNonEmptyString(componentData.extraHeading)
+              ? componentData.extraHeading
+              : ""
+          }
           subheading={componentData.subheading}
-          extraClass={`${isJapanese ? styles.headerJa : styles.header}`}
+          extraClass={`${styles.header} ${
+            currentLocale in styles ? styles[currentLocale] : ""
+          }`}
         />
         <div className={clsx(styles.featuredList)}>
           {FeatureList.map((props, idx) => (

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;
+    }
   }
 }

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 (
     <header className={clsx("bg-11-o-clock text-white", styles.homepageHero)}>
       <div
@@ -18,7 +22,12 @@ export default function HomepageHero(): JSX.Element {
         <div className="row">
           <div className={`col ${isJapanese ? "col--12" : "col--10"}`}>
             <h1
-              className={`${isJapanese ? styles.heroHeadingJa : "type-alpha"}`}
+              className={clsx(
+                styles.heroHeading,
+                `${
+                  currentLocale in styles ? styles[currentLocale] : "type-alpha"
+                }`
+              )}
             >
               <Translate id="homepage.heroTitle">
                 An open-source identity solution built for the open internet

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;
+    }
   }
 }

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<LottieRefCurrentProps>(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 {
     <div className={styles.card}>
       <Link className={clsx("text-11-o-clock", styles.cardLink)} to={url}>
         <div className={styles.cardTitle}>
-          <h3 className={`${isJapanese ? styles.cardHeaderJa : "type-delta"}`}>
+          <h3
+            className={clsx(
+              styles.cardHeader,
+              `${
+                currentLocale in styles ? styles[currentLocale] : "type-delta"
+              }`
+            )}
+          >
             <span>{heading}</span> <RightArrow />
           </h3>
         </div>

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;
+    }
   }
 }

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 (
     <header
@@ -31,7 +31,9 @@ export default function SectionHeader({
       )}
       <h2 className={clsx("type-beta col col--8")}>
         {heading}{" "}
-        {jaHeading && <span className={styles.jaHeading}>{jaHeading}</span>}
+        {extraHeading && (
+          <span className={styles.extraHeading}>{extraHeading}</span>
+        )}
       </h2>
 
       <p className={clsx("type-paragraph-large col col--4", styles.copy)}>

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;

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,
+  },
+};

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",

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 = {

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;

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";
 }

src/utils/useGetCurrentLocale.ts

@@ -0,0 +1,6 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export function useGetCurrentLocale() {
+  const { i18n } = useDocusaurusContext();
+  return i18n.currentLocale;
+}