Merge pull request #94 from meetqy/93-add-i18n-english

93 add i18n english

src/app/[lang]/components/menu/content.tsx

@@ -37,7 +37,7 @@ export function Content({
   dict: Dictionary;
   lang: Locale;
 }) {
-  const pathname = usePathname().replace(/(zh-Hans|zh-Hant)\/?/, "");
+  const pathname = usePathname().replace(`/${lang}`, "");
 
   const { data: poemCount } = api.poem.count.useQuery();
   const { data: authorCount } = api.author.count.useQuery();
@@ -73,7 +73,7 @@ export function Content({
             href: `/${lang}`,
           },
           {
-            title: dict.menu.auhtor,
+            title: dict.menu.author,
             label: <span className="font-mono">{authorCount}</span>,
             icon: UserRound,
             variant: /^(\/author)/.test(pathname) ? "default" : "ghost",
@@ -93,13 +93,6 @@ export function Content({
             variant: /^(\/tag)/.test(pathname) ? "default" : "ghost",
             href: `/${lang}/tag`,
           },
-          // {
-          //   title: dict.menu.print,
-          //   icon: Printer,
-          //   label: <ArrowRight className="h-4 w-4 text-destructive" />,
-          //   variant: /^(\/print)/.test(pathname) ? "default" : "ghost",
-          //   href: `/tools/print`,
-          // },
         ]}
       />
 
@@ -138,7 +131,7 @@ export function Content({
       <p className="px-4 text-f50 text-muted-foreground">
         {dict.menu.language}
       </p>
-      <div className="my-4 px-4">
+      <div className="my-4 px-4 text-f50">
         <Select
           value={lang}
           onValueChange={(value) => {
@@ -152,6 +145,9 @@ export function Content({
           <SelectContent>
             <SelectItem value="zh-Hans">中文简体</SelectItem>
             <SelectItem value="zh-Hant">中文繁体</SelectItem>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="ko">한국어</SelectItem>
+            <SelectItem value="ja">日本語</SelectItem>
           </SelectContent>
         </Select>
       </div>

src/app/[lang]/feedback/page.tsx

@@ -1,5 +1,5 @@
 import { HeaderMain } from "~/components/ui/header";
-import { getDictionary, getLangText, type Locale } from "~/dictionaries";
+import { getDictionary, type Locale } from "~/dictionaries";
 import Twikoo from "../poem/[id]/components/twikoo";
 
 export default async function FeedbackPage({
@@ -22,15 +22,7 @@ export default async function FeedbackPage({
           <header>
             <h1 className="prose-h1">{dict.menu.feedback}</h1>
             <p className="prose-p text-secondary-foreground">
-              {getLangText(
-                {
-                  "zh-Hans":
-                    "可以在此处查看网站的更新日志、未来规划，以及对新增功能的讨论。同时，也可以在此留下您的建议和意见。",
-                  "zh-Hant":
-                    "可以在此處查看網站的更新日誌、未來規劃，以及對新增功能的討論。同時，也可以在此留下您的建議和意見。",
-                },
-                params.lang,
-              )}
+              {dict.feedback_desc}
             </p>
           </header>
 

src/app/[lang]/layout.tsx

@@ -9,7 +9,7 @@ import {
 } from "~/dictionaries";
 import { type Metadata } from "next/types";
 import { MyHost } from "~/utils";
-import { Language } from "~/dictionaries/language";
+import { Language } from "~/components/language";
 
 const Search = dynamic(() => import("./components/search"), { ssr: false });
 const ModeToggle = dynamic(() => import("~/components/mode-toggle"), {

src/app/[lang]/poem/[id]/components/twikoo/index.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import { type Locale } from "~/dictionaries";
 
 export default function Twikoo({ lang }: { lang: Locale }) {
-  const pathname = usePathname().replace(/(zh-Hans|zh-Hant)\/?/, "");
+  const pathname = usePathname().replace(`/${lang}`, "");
 
   useEffect(() => {
     // 通过 CDN 引入 twikoo js 文件
@@ -18,11 +18,15 @@ export default function Twikoo({ lang }: { lang: Locale }) {
     const loadSecondScript = () => {
       // 执行 twikoo.init() 函数
       const initScript = document.createElement("script");
+      let _lang: string = lang;
+      lang === "zh-Hans" && (_lang = "zh-cn");
+      lang === "zh-Hant" && (_lang = "zh-tw");
+
       initScript.innerHTML = `
             twikoo.init({
               envId: "https://twikoo.aspoem.com/.netlify/functions/twikoo",
               el: '#twikoo-comment',
-              lang: "${lang === "zh-Hans" ? "zh-cn" : "zh-tw"}",
+              lang: "${_lang}",
               path: "${pathname}",
             });
           `;

src/components/ui/select.tsx

@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

src/dictionaries/en.json

@@ -0,0 +1,77 @@
+{
+  "title": "Learn Poems Website",
+  "description": "aspoem.com is a modern poetry learning website that offers a comprehensive site search feature, allowing you to quickly search for regulated verse, quatrains, and works by various poets. We have also optimized the display of pinyin annotations, annotations, and vernacular Chinese, making poetry easier to read. Additionally, we provide a poetry printing tool to assist you in better studying ancient poetry. Come and experience the charm of our website!",
+  "point_keywords": [
+    "poetry learning",
+    "learning ancient poetry",
+    "Three Hundred Tang Poems",
+    "Three Hundred Song Lyrics",
+    "Complete Works of Li Bai",
+    "Complete Works of Du Fu"
+  ],
+  "keywords": [
+    "poetry learning",
+    "learning ancient poetry",
+    "Three Hundred Tang Poems",
+    "Three Hundred Song Lyrics",
+    "Complete Works of Li Bai",
+    "Complete Works of Du Fu",
+    "ancient poetry",
+    "poetry",
+    "poet statistics",
+    "poetry search",
+    "poetry pinyin",
+    "poetry annotations",
+    "poetry translation",
+    "pinyin"
+  ],
+  "menu": {
+    "poem": "Poems",
+    "author": "Poets",
+    "ci_pai_ming": "Ci Pai Ming",
+    "tag": "Tags",
+    "contact": "Contact",
+    "theme": "Theme",
+    "language": "Language",
+    "feedback": "Feedback",
+    "print": "Print"
+  },
+  "feedback_desc": "You can check the website's update log, future plans, and discussions on new features here. At the same time, you can also leave your suggestions and opinions here.",
+  "home": {
+    "poem": "Recommended",
+    "all_poems": "All Poems"
+  },
+  "poem": {
+    "title": "Poems",
+    "pinyin": "Pinyin",
+    "pinyin_show": "Show Pinyin",
+    "pinyin_hide": "Hide Pinyin",
+    "translation": "Translation",
+    "tools": "Tools",
+    "more": "More Explore",
+    "comment": "Comment",
+    "comment_desc1": "Different ages, growth environments, and experiences will have different views.",
+    "comment_desc2": "Therefore, there is no standard answer, just like it yourself! Welcome to leave your thoughts!👏🏻👏🏻👏🏻",
+    "report_error": "Report Error",
+    "report_error_desc": "If you find an error, you can also leave a message below to correct it!"
+  },
+  "poem_list": {
+    "title": "Poem List",
+    "empty": "No related poems found",
+    "tab_new": "Newest"
+  },
+  "author": {
+    "title": "Poets"
+  },
+  "author_detail": {
+    "title": "Poets"
+  },
+  "search": {
+    "placeholder": "Search for poems, poets, etc.",
+    "empty": "No search results found"
+  },
+  "pagination": {
+    "prev": "Previous",
+    "next": "Next"
+  }
+}

src/dictionaries/index.ts

@@ -1,18 +1,41 @@
 import "server-only";
 
-export const locales = ["zh-Hans", "zh-Hant"] as const;
-
 export const defaultLocale = "zh-Hans";
-
+export const locales = ["zh-Hans", "zh-Hant", "en", "ja", "ko"] as const;
 const dictionaries = {
   "zh-Hant": () => import("./zh-Hant.json").then((module) => module.default),
   "zh-Hans": () => import("./zh-Hans.json").then((module) => module.default),
+  en: () => import("./en.json").then((module) => module.default),
+  ja: () => import("./ja.json").then((module) => module.default),
+  ko: () => import("./ko.json").then((module) => module.default),
 };
 
-export type Locale = keyof typeof dictionaries;
+export type Locale = (typeof locales)[number];
+
+/**
+ * 生成多语言 meta hreflang 标签
+ */
+export const getMetaDataAlternates = (suffix: string, lang: Locale) => {
+  const languages: Record<string, string> = {};
+
+  for (const locale of locales) {
+    languages[locale] = `/${locale}${suffix}`;
+  }
+
+  return {
+    languages,
+    canonical: `/${lang}${suffix}`,
+  };
+};
 
 export const getDictionary = async (locale: Locale = "zh-Hans") => {
-  return dictionaries[locale]();
+  const zhHans = await dictionaries["zh-Hans"]();
+  const result = await dictionaries[locale]();
+
+  return {
+    ...zhHans,
+    ...result,
+  };
 };
 
 export type Dictionary = Awaited<ReturnType<typeof getDictionary>>;
@@ -21,13 +44,3 @@ export const getLangText = (obj: { [key in Locale]: string }, lang: Locale) =>
   obj[lang];
 
 export const getLangUrl = (url: string, lang: Locale) => `/${lang}${url}`;
-
-export const getMetaDataAlternates = (suffix: string, lang: Locale) => {
-  return {
-    languages: {
-      "zh-Hans": `/zh-Hans${suffix}`,
-      "zh-Hant": `/zh-Hant${suffix}`,
-    },
-    canonical: `/${lang}${suffix}`,
-  };
-};

src/dictionaries/ja.json

@@ -0,0 +1,78 @@
+{
+  "title": "近代詩学習ウェブサイト",
+  "description": "aspoem.comは、近代詩学習のためのモダンなウェブサイトであり、サイト全体の検索機能を提供しています。この機能を利用することで、律詩や絶句、詩人たちの作品をより迅速に検索することができます。また、私たちは拼音の表示方法、注釈や白話文の展示方法などを最適化し、詩をより読みやすくしています。さらに、古代詩学の学習をサポートする詩学印刷ツールも提供しています。ぜひ、私たちのウェブサイトの魅力を体験してください！",
+  "point_keywords": [
+    "詩学習",
+    "古詩学習",
+    "唐詩300首",
+    "宋詞300首",
+    "李白詩集",
+    "杜甫詩集"
+  ],
+  "keywords": [
+    "詩学習",
+    "古詩学習",
+    "唐詩300首",
+    "宋詞300首",
+    "李白詩集",
+    "杜甫詩集",
+    "古詩",
+    "詩",
+    "詩人統計",
+    "詩検索",
+    "詩の拼音",
+    "詩の注釈",
+    "詩の翻訳",
+    "ピンイン"
+  ],
+  "menu": {
+    "poem": "詩",
+    "author": "詩人",
+    "ci_pai_ming": "詞牌名",
+    "tag": "タグ",
+    "contact": "連絡先",
+    "theme": "テーマ",
+    "language": "言語",
+    "feedback": "フィードバック",
+    "print": "印刷"
+  },
+  "feedback_desc": "ここでは、ウェブサイトの更新履歴や将来の計画、新機能に関するディスカッションを確認することができます。また、提案や意見を残すこともできます。",
+  "home": {
+    "poem": "おすすめ",
+    "all_poems": "すべての詩"
+  },
+  "poem": {
+    "title": "詩",
+    "pinyin": "拼音",
+    "pinyin_show": "拼音を表示",
+    "pinyin_hide": "拼音を非表示",
+    "translation": "翻訳",
+    "tools": "ツール",
+    "more": "さらに探索",
+    "comment": "コメント",
+    "comment_desc1": "異なる年齢、成長環境、経験には、異なる視点があります。",
+    "comment_desc2": "従って、標準答えは存在せず、自分が好きなものを選ぶだけでいいです！ぜひ、思いを残してください！👏🏻👏🏻👏🏻",
+    "report_error": "エラー報告",
+    "report_error_desc": "もし間違いを見つけた場合は、下にコメントして指摘してください！"
+  },
+  "poem_list": {
+    "title": "詩のリスト",
+    "empty": "関連する詩が見つかりませんでした",
+    "tab_new": "最新",
+    "tab_improve": "改善待ち"
+  },
+  "author": {
+    "title": "詩人"
+  },
+  "author_detail": {
+    "title": "詩人詳細"
+  },
+  "search": {
+    "placeholder": "詩人、詩、名言を検索",
+    "empty": "関連する詩が見つかりませんでした"
+  },
+  "pagination": {
+    "prev": "前へ",
+    "next": "次へ"
+  }
+}