fix(i18n): zh-hans not working

1. https://nft-develop.matters.news/ (zh-han traditional is working) 2. https://nft-develop.matters.news/en/ (english is working) 3. https://nft-develop.matters.news/zh-hans/ (not working if directly access) [NFT Page] - I18N & Language Switching #23 [NFT Page] - I18N & Language Switching 5pt feature request #9
thematters · Oct 24, 2021 · c5eeaa2 · c5eeaa2
1 parent 7a3ff69
commit c5eeaa2
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 70 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -11,7 +11,7 @@ module.exports = {
       resolve: `gatsby-theme-i18n`,
       options: {
         defaultLang: `zh-hant`,
-        locales: process.env.LOCALES || `zh-hant zh-hans en`,
+        locales: process.env.LOCALES || `zh-hant zh en`,
         configPath: require.resolve(`./i18n/config.json`),
       },
     },

diff --git a/i18n/config.json b/i18n/config.json
@@ -3,21 +3,18 @@
     "code": "zh-hant",
     "hrefLang": "zh-Hant",
     "name": "Chinese",
-    "localName": "中文繁體",
-    "dateFormat": "YYYY/MM/DD"
+    "localName": "繁體"
   },
   {
-    "code": "zh-hans",
+    "code": "zh",
     "hrefLang": "zh-Hans",
     "name": "Chinese",
-    "localName": "中文简体",
-    "dateFormat": "YYYY/MM/DD"
+    "localName": "简体"
   },
   {
     "code": "en",
     "hrefLang": "en",
     "name": "English",
-    "localName": "English",
-    "dateFormat": "MM/DD/YYYY"
+    "localName": "EN"
   }
 ]
diff --git a/src/components/Layout/Header/LanguageSwitch/index.tsx b/src/components/Layout/Header/LanguageSwitch/index.tsx
@@ -6,45 +6,33 @@ import { IconArrowDown, IconWorld } from "~/components"
 
 import * as styles from "./styles.module.css"
 
-const LanguageSwitch = () => {
+const LanguageSwitch = ({ originalPath }) => {
   const { locale, config } = useLocalization()
-  const langPrefix = `/${locale}`
-  const configMap = new Map(config.map(lang => [lang.code, lang]))
+  const currentLangIndex = config.findIndex(lang => lang.code === locale)
+  if (currentLangIndex === -1) return <></>
+  const currentLang = config[currentLangIndex]
+  const others = [
+    ...config.slice(currentLangIndex + 1),
+    ...config.slice(0, currentLangIndex),
+  ] // rotated
 
   return (
-    <Location>
-      {({ location }) => {
-        let strippedPath = location.pathname
-        // need to strip the lang prefix: from like `/en/about` to `/about`
-        // why not provide a helper in gatsby-theme-i18n?
-        if (strippedPath.startsWith(langPrefix))
-          strippedPath = strippedPath.substring(langPrefix.length)
-        if (strippedPath === "") strippedPath = "/"
-
-        return (
-          <section className={styles.switches}>
-            <button>
-              <IconWorld />
-              <span>{configMap.get(locale).localName}</span>
-              <IconArrowDown />
-            </button>
-            <ul>
-              {config
-                .filter(
-                  lang => lang.code in { "zh-hant": 1, "zh-hans": 1, en: 1 }
-                )
-                .map(lang => (
-                  <li key={lang.code}>
-                    <LocalizedLink language={lang.code} to={strippedPath}>
-                      {lang.localName}
-                    </LocalizedLink>
-                  </li>
-                ))}
-            </ul>
-          </section>
-        )
-      }}
-    </Location>
+    <section className={styles.switches}>
+      <button>
+        <IconWorld />
+        <span>{currentLang.localName}</span>
+        <IconArrowDown />
+      </button>
+      <ul>
+        {others.map(lang => (
+          <li key={lang.code}>
+            <LocalizedLink language={lang.code} to={originalPath}>
+              {lang.localName}
+            </LocalizedLink>
+          </li>
+        ))}
+      </ul>
+    </section>
   )
 }
 

diff --git a/src/components/Layout/Header/LanguageSwitch/styles.module.css b/src/components/Layout/Header/LanguageSwitch/styles.module.css
@@ -1,23 +1,29 @@
-
 .switches {
+  --width-margin-x: 0.25rem;
+
+  margin-right: var(--width-margin-x);
+  margin-left: var(--width-margin-x);
   font-size: smaller;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
 
   & button span {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
+    margin-right: var(--width-margin-x);
+    margin-left: var(--width-margin-x);
   }
 
   & ul {
     position: absolute;
     display: none;
+
     & li {
       padding-left: 1.25rem;
+
+      & a:hover {
+        color: #bbc;
+      }
     }
   }
 
   &:hover ul {
     display: block;
   }
-}
+}
diff --git a/src/components/Layout/Header/Socials/styles.module.css b/src/components/Layout/Header/Socials/styles.module.css
@@ -1,7 +1,8 @@
 .socials {
   @mixin inline-flex-center-all;
-  font-size: 0;
+
   display: none;
+  font-size: 0;
 
   & > * + * {
     padding-left: var(--spacing-tight);

diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
@@ -7,7 +7,7 @@ import LanguageSwitch from "./LanguageSwitch"
 import Socials from "./Socials"
 import * as styles from "./styles.module.css"
 
-const Header = () => {
+const Header = ({ originalPath }) => {
   const { locale } = useLocalization()
 
   return (
@@ -19,15 +19,15 @@ const Header = () => {
       </Link>
 
       <section className={styles.buttons}>
-        <LanguageSwitch />
+        <LanguageSwitch {...{ originalPath }} />
 
         <Socials />
 
         <div>
           <Button color="primary" spacingX="1.25rem" spacingY=".5rem">
             {locale === "en"
               ? "Pre-order"
-              : locale === "zh-hans"
+              : locale === "zh"
               ? "参与预购"
               : "參與預購"}
           </Button>
@@ -37,7 +37,7 @@ const Header = () => {
           <Button color="primary" spacingX="1.25rem" spacingY=".5rem">
             {locale === "en"
               ? "Register into the Airdrop"
-              : locale === "zh-hans"
+              : locale === "zh"
               ? "参与空投"
               : "參與空投"}
           </Button>

diff --git a/src/components/Layout/Header/styles.module.css b/src/components/Layout/Header/styles.module.css
@@ -3,11 +3,11 @@
 
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 1;
   padding: var(--spacing-loose) var(--spacing-base);
   color: var(--color-white);
-  z-index: 1;
 
   @media (--md-up) {
     padding: var(--spacing-loose) var(--spacing-xxx-loose);
@@ -21,11 +21,11 @@
     display: initial;
     font-family: var(--font-bitmap);
     color: var(--color-matters-green);
-    background: -webkit-linear-gradient(
+    background: linear-gradient(
       var(--color-gradient-green-start),
       var(--color-gradient-green-end)
     );
-    -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 }

diff --git a/src/views/Homepage/Hero/index.tsx b/src/views/Homepage/Hero/index.tsx
@@ -24,13 +24,13 @@ const Hero = () => {
                   ? "The Matterverse, a revolution orginated from the galaxy, a long expedition to far far away"
                   : locale === "ja"
                   ? "マット宇宙、銀河宇宙からの革命、家から離れる旅"
-                  : locale === "zh-hans"
+                  : locale === "zh"
                   ? "马特宇宙，来源于银河宇宙的一次革命，一次离乡的征途"
                   : "馬特宇宙，來源於銀河宇宙的一次革命，一次離鄉的征途"}
               </h3>
 
               <p className={styles.intro}>
-                {locale === "zh-hans"
+                {locale === "zh"
                   ? "CryptoMatties 是 Matters 发行的通向马特宇宙的 1500 个远航者 NFT Avatar，是马特宇宙的远航者标志。 Avatar 的拥有者将会踏上马特宇宙，开始新世界的探索征途。"
                   : "CryptoMatties 是 Matters 發行的通向馬特宇宙的 1500 個遠航者 NFT Avatar，是馬特宇宙的遠航者標誌。 Avatar 的擁有者將會踏上馬特宇宙，開始新世界的探索征途。"}
               </p>
@@ -44,7 +44,7 @@ const Hero = () => {
                 >
                   {locale === "en"
                     ? "Watch the Prequel Storyline"
-                    : locale === "zh-hans"
+                    : locale === "zh"
                     ? "查看前传故事"
                     : "查看前傳故事"}
                 </Button>

diff --git a/src/views/Homepage/Hero/styles.module.css b/src/views/Homepage/Hero/styles.module.css
@@ -1,14 +1,14 @@
 .hero {
   @mixin flex-center-all;
-  color: var(--color-white);
+
   height: 100vh;
+  color: var(--color-white);
   text-align: center;
 }
 
 .content {
-  margin: 0 auto;
-
   max-width: 40.5rem;
+  margin: 0 auto;
 }
 
 .title {
@@ -43,8 +43,8 @@
 }
 
 .cta {
-  margin: var(--spacing-xx-loose) auto 0;
   width: 100%;
+  margin: var(--spacing-xx-loose) auto 0;
 
   @media (--sm-up) {
     width: 22.5rem;

diff --git a/src/views/Homepage/index.tsx b/src/views/Homepage/index.tsx
@@ -16,21 +16,24 @@ type DataProps = {
   }
 }
 
-const Homepage: React.FC<PageProps<DataProps>> = ({ data, path }) => {
-  const { locale } = useLocalization()
+const Homepage: React.FC<PageProps<DataProps>> = ({
+  pageContext: { locale, originalPath },
+}) => {
+  // const { locale } = useLocalization()
+
   return (
     <>
       <SEO title="CryptoMatties" lang={locale} />
 
-      <Header />
+      <Header {...{ locale, originalPath }} />
       <main>
         <Hero />
         <Roadmap />
         <Benefits />
         <Questions />
       </main>
 
-      <Footer />
+      <Footer {...{ locale, originalPath }} />
     </>
   )
 }