Merge branch 'dev'

.env.example

@@ -1,3 +1,2 @@
 DATABASE_URL="file:./data.db?connection_limit=1"
 SESSION_SECRET="super-duper-s3cret"
-GA_TRACKING_ID="G-X9CKGG9VVR"

app/components/CuringSubPage.tsx

@@ -2,20 +2,49 @@ import type { LinksFunction } from "@remix-run/node";
 import stylesheet from "~/styles/curing.css";
 // import { StarCheck, StarUnCheck } from "./icons";
 import cp1 from "~/images/cp1.png";
+import cp2 from "~/images/cp2.png";
+import cp3 from "~/images/cp3.png";
 import cp5 from "~/images/cp5.png";
 import cp6 from "~/images/cp6.png";
 import cp7 from "~/images/cp7.png";
 import cp8 from "~/images/cp8.png";
 import cp9 from "~/images/cp9.png";
 
+import titleCuring1 from "~/images/curing-1.png";
+import titleCuring2 from "~/images/curing-2.png";
+import titleCuring3 from "~/images/curing-3.png";
+import titleCuring4 from "~/images/curing-4.png";
+import titleCuring5 from "~/images/curing-5.png";
+import titleCuring6 from "~/images/curing-6.png";
+import titleCuring7 from "~/images/curing-7.png";
+import titleCuring8 from "~/images/curing-8.png";
+import titleCuring9 from "~/images/curing-9.png";
+
+import { useTranslation } from "react-i18next";
+
+const titleImage = [
+  titleCuring1,
+  titleCuring2,
+  titleCuring3,
+  titleCuring4,
+  titleCuring5,
+  titleCuring6,
+  titleCuring7,
+  titleCuring8,
+  titleCuring9,
+];
+
 const image = {
   cp1,
+  cp2,
+  cp3,
   cp5,
   cp6,
   cp7,
   cp8,
   cp9,
 };
+
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
@@ -35,25 +64,27 @@ export type CuringDataType = {
   // price: string;
   // convenience: string;
   sideEffect: Array<string>;
-  image: keyof typeof image;
 };
 
 type CuringSubPageProps = {
+  index: number;
   data: CuringDataType;
 };
 
 const CuringSubPage = (props: CuringSubPageProps) => {
-  const { data } = props;
+  const { data, index } = props;
+  let { t } = useTranslation("curing");
 
   return (
     <div className="cp-container">
       <div className="cp-left-block">
-        <div
-          className="cp-title"
-          style={{
-            backgroundImage: `url(${image[data.image]})`,
-          }}
-        >
+        <div className="cp-title">
+          <div
+            className="mx-auto h-[100px] w-[180px] bg-contain bg-center bg-no-repeat lg:h-[auto]"
+            style={{
+              backgroundImage: `url(${titleImage[index]})`,
+            }}
+          />
           <div className="cp-title-text">
             <div className="cp-main-title">{data.title}</div>
             <div className="cp-main-titleS">{data.titleS}</div>
@@ -76,8 +107,18 @@ const CuringSubPage = (props: CuringSubPageProps) => {
           </div>
         </div>
         <div className="cp-short">
-          <div className="cp-short-text">微專業短評</div>
-          <div className="cp-short-divider" />
+          {t("cpShortText") && (
+            <div className="cp-short-text">{t("cpShortText")}</div>
+          )}
+          {t("cpShortTextS") && (
+            <div className="cp-short-textS">{t("cpShortTextS")}</div>
+          )}
+          <div
+            className="cp-short-divider"
+            style={{
+              backgroundImage: `url(${image.cp2})`,
+            }}
+          />
         </div>
         <div
           className="cp-short-content"
@@ -155,11 +196,16 @@ const CuringSubPage = (props: CuringSubPageProps) => {
             </td>
           </tr>
         </table> */}
-        <div className="cp-effect-divider" />
+        <div
+          className="cp-effect-divider"
+          style={{
+            backgroundImage: `url(${image.cp3})`,
+          }}
+        />
         <table>
           <tbody>
             <tr>
-              <th>副作用</th>
+              <th>{t("sideEffect")}</th>
             </tr>
             <tr>
               <td>

app/components/footer.tsx

@@ -1,4 +1,4 @@
-// import logo from "~/images/logo.png";
+import { useTranslation } from "react-i18next";
 import Links from "./links";
 
 type FooterProps = {
@@ -7,21 +7,17 @@ type FooterProps = {
 };
 
 export default function Footer({ lang, openLang }: FooterProps) {
+  let { t } = useTranslation("common");
   return (
     <div className="mt-10 bg-slate-100">
       <footer className="container mx-auto py-5 text-center text-[#9b8e8e]">
-        {/* <img
-          src={logo}
-          className="mx-auto block h-[auto] w-[120px] lg:mr-5 lg:inline-block"
-          alt="Home"
-        /> */}
         <ul className="my-5 inline-block [&>*]:mx-2 [&>*]:my-2 sm:[&>*]:block md:[&>*]:inline-block">
           <Links {...{ lang }} openLang={openLang} />
         </ul>
         <div className="flex-1 px-4">
-          本網站是由台大醫院雲林分院所贊助，網站作者群無財務衝突關係
+          {t("footer.declaration")}
           <br />
-          2023/08/01 © 版權所有、翻印必究。
+          {t("footer.copyright")}
         </div>
       </footer>
     </div>

app/components/icons.tsx

@@ -20,7 +20,7 @@ export const StarUnCheck = () => {
 export const ArrowAltCircleDown = () => {
   return (
     <div className="mx-auto my-[10px] h-[50px] w-[50px]">
-      <FontAwesomeIcon icon={faCircleArrowDown} color="#B1C951" />
+      <FontAwesomeIcon icon={faCircleArrowDown} color="#B1C951" size="3x" />
     </div>
   );
 };

app/components/modal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Link } from "@remix-run/react";
 import { useEffect } from "react";
 import { setToday } from "~/utils";
@@ -9,6 +10,7 @@ type ModalProps = {
 };
 
 export default function Modal({ onClose, personLink, proLink }: ModalProps) {
+  const { t } = useTranslation("common");
   useEffect(() => {
     document.body.classList.add("overflow-hidden");
     setToday();
@@ -55,12 +57,10 @@ export default function Modal({ onClose, personLink, proLink }: ModalProps) {
                     className="text-base font-semibold leading-6 text-gray-900"
                     id="modal-title"
                   >
-                    只要幾秒，表達您對醫療環境的看法！
+                    {t("shareYourComments")}
                   </h3>
                   <div className="mt-2">
-                    <p className="text-sm text-gray-500">
-                      完成這個簡單的調查並與我們分享您對整個醫療環境的評論！
-                    </p>
+                    <p className="text-sm text-gray-500">{t("thankText")}</p>
                   </div>
                 </div>
               </div>
@@ -70,13 +70,13 @@ export default function Modal({ onClose, personLink, proLink }: ModalProps) {
                 to={personLink}
                 className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
               >
-                個人表單
+                {t("personalForm")}
               </Link>
               <Link
                 to={proLink}
                 className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
               >
-                醫療人員表單
+                {t("proForm")}
               </Link>
             </div>
           </div>

app/root.tsx

@@ -194,20 +194,18 @@ export default function App() {
         <Outlet />
         <div className="mt-10 text-center text-[#9b8e8e]">
           <img src={icon5} className="mx-auto w-20" alt="icon" />
-          <h2 className="text-2xl lg:text-4xl">我們需要您寶貴的意見</h2>
+          <h2 className="text-2xl lg:text-4xl">{t("yourOpinion")}</h2>
           <div className="my-4 px-4">
-            只要幾秒，表達您對醫療環境的看法！
+            {t("shareYourComments")}
             <br />
-            完成這個簡單的調查並與我們分享
-            <span className="block md:inline" />
-            您對整個醫療環境的評論！
+            {t("thankText")}
           </div>
           <div className="flex justify-center gap-4">
             <Link to={t("formLink.personal")} className="link-btn">
-              個人表單
+              {t("personalForm")}
             </Link>
             <Link to={t("formLink.pro")} className="link-btn">
-              醫療人員表單
+              {t("proForm")}
             </Link>
           </div>
         </div>

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,9 @@ 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 logo from "~/images/logo.png";
+
+import { getTitle } from "~/utils";
 
 const endometriosis = [
   endometriosis0,
@@ -26,7 +29,28 @@ 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,
+    },
+    {
+      name: "og:image",
+      content: logo,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("home");

app/routes/($lang).assessment.tsx

@@ -2,13 +2,38 @@ import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
 import { useTranslation } from "react-i18next";
 import stylesheet from "~/styles/assessment.css";
 
+import logo from "~/images/logo.png";
 import usCDC from "~/images/us-cdc.png";
+import sr from "~/images/sr.png";
+import iota from "~/images/iota.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,
+    },
+    {
+      name: "og:image",
+      content: logo,
+    },
+  ];
+};
 
 export default function () {
   let { t } = useTranslation("assessment");
@@ -32,13 +57,17 @@ export default function () {
         >
           {t("click2Eng")}
         </a>
-
         <div className="title">{t("recommended")}</div>
         <ul className="text-left [&>*+*]:mt-4">
           <li>{t("WCBPs")}</li>
           <li>{t("Premenopause")}</li>
           <li>{t("Postmenopause")}</li>
         </ul>
+        <div className="mt-10 text-left">
+          <img src={iota} alt="IOTA" className="mx-auto mb-4" />
+          {t("IOTA")}
+        </div>
+        <img src={sr} alt="SR" />
       </div>
     </div>
   );