feat: title i18n

sexyoung · Aug 28, 2023 · 5c429a0 · 5c429a0
1 parent 4502ed6
commit 5c429a0
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 13 deletions.
diff --git a/app/routes/($lang)._index.tsx b/app/routes/($lang)._index.tsx
@@ -1,4 +1,4 @@
-import type { LinksFunction } from "@remix-run/node";
+import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import stylesheet from "~/styles/home.css";
@@ -13,6 +13,7 @@ import endometriosis1 from "~/images/endometriosis-1.png";
 import endometriosis2 from "~/images/endometriosis-2.png";
 import endometriosis3 from "~/images/endometriosis-3.png";
 import endometriosis4 from "~/images/endometriosis-4.png";
+import { getTitle } from "~/utils";
 
 const endometriosis = [
   endometriosis0,
@@ -26,7 +27,24 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-// export let handle = { i18n: "home" };
+export const meta: V2_MetaFunction = (x) => {
+  const { menu, greeting } = getTitle(x.params?.lang || "en");
+  return [
+    { title: menu.home },
+    {
+      property: "og:type",
+      content: "website",
+    },
+    {
+      property: "og:title",
+      content: menu.home,
+    },
+    {
+      name: "description",
+      content: greeting,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("home");

diff --git a/app/routes/($lang).assessment.tsx b/app/routes/($lang).assessment.tsx
@@ -3,12 +3,30 @@ import { useTranslation } from "react-i18next";
 import stylesheet from "~/styles/assessment.css";
 
 import usCDC from "~/images/us-cdc.png";
+import { getTitle } from "~/utils";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-export const meta: V2_MetaFunction = () => [{ title: "專業評估" }];
+export const meta: V2_MetaFunction = (x) => {
+  const { menu, greeting } = getTitle(x.params?.lang || "en");
+  return [
+    { title: menu.assessment },
+    {
+      property: "og:type",
+      content: "website",
+    },
+    {
+      property: "og:title",
+      content: menu.assessment,
+    },
+    {
+      name: "description",
+      content: greeting,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("assessment");

diff --git a/app/routes/($lang).choice.tsx b/app/routes/($lang).choice.tsx
@@ -14,12 +14,30 @@ import choice1 from "~/images/choice1.png";
 import choice2 from "~/images/choice2.png";
 import choice3 from "~/images/choice3.png";
 import choice4 from "~/images/choice4.png";
+import { getTitle } from "~/utils";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-export const meta: V2_MetaFunction = () => [{ title: "選擇障礙專區" }];
+export const meta: V2_MetaFunction = (x) => {
+  const { menu, greeting } = getTitle(x.params?.lang || "en");
+  return [
+    { title: menu.choice },
+    {
+      property: "og:type",
+      content: "website",
+    },
+    {
+      property: "og:title",
+      content: menu.choice,
+    },
+    {
+      name: "description",
+      content: greeting,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("choice");

diff --git a/app/routes/($lang).contact.tsx b/app/routes/($lang).contact.tsx
@@ -3,12 +3,30 @@ import stylesheet from "~/styles/contact.css";
 
 import people from "~/images/361068627_1015588909782458_8471306656182809679_n.png";
 import { useTranslation } from "react-i18next";
+import { getTitle } from "~/utils";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-export const meta: V2_MetaFunction = () => [{ title: "關於我們" }];
+export const meta: V2_MetaFunction = (x) => {
+  const { menu, greeting } = getTitle(x.params?.lang || "en");
+  return [
+    { title: menu.contact },
+    {
+      property: "og:type",
+      content: "website",
+    },
+    {
+      property: "og:title",
+      content: menu.contact,
+    },
+    {
+      name: "description",
+      content: greeting,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("contact");

diff --git a/app/routes/($lang).curing.tsx b/app/routes/($lang).curing.tsx
@@ -5,12 +5,30 @@ import curingData from "~/data/curing.json";
 import type { CuringDataType } from "~/components/CuringSubPage";
 import CuringSubPage from "~/components/CuringSubPage";
 import { useTranslation } from "react-i18next";
+import { getTitle } from "~/utils";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-export const meta: V2_MetaFunction = () => [{ title: "CP 值專區" }];
+export const meta: V2_MetaFunction = (x) => {
+  const { menu, greeting } = getTitle(x.params?.lang || "en");
+  return [
+    { title: menu.curing },
+    {
+      property: "og:type",
+      content: "website",
+    },
+    {
+      property: "og:title",
+      content: menu.curing,
+    },
+    {
+      name: "description",
+      content: greeting,
+    },
+  ];
+};
 
 export default function () {
   let { t, ready } = useTranslation("curing");

diff --git a/app/routes/($lang).plan.tsx b/app/routes/($lang).plan.tsx
@@ -2,12 +2,30 @@ import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
 import { useTranslation } from "react-i18next";
 
 import stylesheet from "~/styles/plan.css";
+import { getTitle } from "~/utils";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-export const meta: V2_MetaFunction = () => [{ title: "計畫自由選" }];
+export const meta: V2_MetaFunction = (x) => {
+  const { menu, greeting } = getTitle(x.params?.lang || "en");
+  return [
+    { title: menu.plan },
+    {
+      property: "og:type",
+      content: "website",
+    },
+    {
+      property: "og:title",
+      content: menu.plan,
+    },
+    {
+      name: "description",
+      content: greeting,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("plan");

diff --git a/app/utils.ts b/app/utils.ts
@@ -3,6 +3,12 @@ import { useMemo } from "react";
 
 import type { User } from "~/models/user.server";
 
+import en from "../public/locales/en/common.json";
+import zh from "../public/locales/zh-TW/common.json";
+import ja from "../public/locales/ja-JP/common.json";
+import vi from "../public/locales/vi-VN/common.json";
+import id from "../public/locales/id-ID/common.json";
+
 const DEFAULT_REDIRECT = "/";
 
 /**
@@ -74,4 +80,24 @@ export const setToday = () => {
   const tomorrow = new Date();
   tomorrow.setHours(24, 0, 0, 0);
   document.cookie = "status=stillToday; expires=" + tomorrow.toString();
-};
+};
+
+export const getTitle = (lang: string) => {
+  return {
+    "en": en,
+    "zh-TW": zh,
+    "ja-JP": ja,
+    "vi-VN": vi,
+    "id-ID": id,
+  }[lang] as {
+    greeting: string;
+    menu: {
+      home: string;
+      plan: string;
+      choice: string;
+      curing: string;
+      assessment: string;
+      contact: string;
+    };
+  };
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -1,5 +1,5 @@
 {
-  "greeting": "Hello",
+  "greeting": "Endometriosis A to Z",
   "menu": {
     "home": "Home",
     "plan": "Mix-and-Match Plans",

diff --git a/public/locales/id-ID/common.json b/public/locales/id-ID/common.json
@@ -1,5 +1,5 @@
 {
-  "greeting": "Hello",
+  "greeting": "Selamat datang di tanya jawab tentang penyakit endometriosis",
   "menu": {
     "home": "Beranda",
     "plan": "Bebas memilih program",

diff --git a/public/locales/ja-JP/common.json b/public/locales/ja-JP/common.json
@@ -1,5 +1,5 @@
 {
-  "greeting": "こんにちは",
+  "greeting": "子宮内膜症の専門医",
   "menu": {
     "home": "Home",
     "plan": "治療プランの選択",

diff --git a/public/locales/vi-VN/common.json b/public/locales/vi-VN/common.json
@@ -1,5 +1,5 @@
 {
-  "greeting": "Hello",
+  "greeting": "Hoan nghênh đến với những chuyện lớn nhỏ về Bệnh lạc nội mạc tử cung",
   "menu": {
     "home": "Trang đầu",
     "plan": "Tự do lựa chọn kế hoạch",

diff --git a/public/locales/zh-TW/common.json b/public/locales/zh-TW/common.json
@@ -1,5 +1,5 @@
 {
-  "greeting": "哈囉",
+  "greeting": "子宮內膜異位症大小事",
   "menu": {
     "home": "首頁",
     "plan": "計畫自由選",