feat: 进一步完善国际化

Author: coderz-w

src/app/(app)/list/AnimatedPostItem.tsx

@@ -10,9 +10,10 @@ import type { PostItem as PostItemType } from '@/core';
 interface AnimatedPostItemProps {
   item: PostItemType;
   index: number;
+  locale: Record<string, string>;
 }
 
-const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index }) => {
+const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index, locale }) => {
   return (
     <m.li
       initial={{ y: 50, opacity: 0.01 }}
@@ -28,7 +29,7 @@ const AnimatedPostItem: React.FC<AnimatedPostItemProps> = ({ item, index }) => {
       }}
       key={item.path}
     >
-      <PostItem data={item} />
+      <PostItem locale={locale} data={item} />
     </m.li>
   );
 };

src/app/(app)/list/page.tsx

@@ -5,6 +5,8 @@ import AnimatedPostItem from './AnimatedPostItem';
 
 import { NormalContainer } from '@/components/layout/container/Normal';
 import { getPostData } from '@/core';
+import { getUserLocale } from '@/lib/getLocale';
+import localeValues from '@/locale';
 
 export const metadata: Metadata = {
   title: '文稿',
@@ -13,12 +15,14 @@ export const metadata: Metadata = {
 
 const ArticleList: React.FC = async () => {
   const { postDataList } = await getPostData();
+  const lang = getUserLocale();
+  const listLocale = localeValues[lang].list;
 
   return (
     <NormalContainer>
       <ul>
         {postDataList.map((item, index) => (
-          <AnimatedPostItem key={item.path} item={item} index={index} />
+          <AnimatedPostItem locale={listLocale} key={item.path} item={item} index={index} />
         ))}
       </ul>
     </NormalContainer>

src/app/(app)/notes/[nid]/page.tsx

@@ -4,19 +4,21 @@ import { Metadata } from 'next';
 
 import {
   NoteTitle,
-  NoteDateMeta,
   IndentArticleContainer,
   NoteMarkdown,
   PaperLayout,
   PageTransition,
 } from './pageExtra';
 
+import dayjs from '@/lib/dayjs';
+import { MdiClockOutline } from '@/components/icons/clock';
 import { type PostItem as PostItemType, getPostData } from '@/core';
 import { LayoutRightSidePortal } from '@/providers/shared/LayoutRightSideProvider';
 import { ArticleRightAside } from '@/components/modules/shared/ArticleRightAside';
 import { Signature } from '@/components/modules/shared/signature';
 import Gisus from '@/components/modules/comment/Giscus';
 import { getUserLocale } from '@/lib/getLocale';
+import localeValues from '@/locale';
 
 const { postDataMap } = await getPostData();
 
@@ -72,26 +74,64 @@ export default async function Page({ params }: { params: Record<string, any> })
   );
 }
 
-const PageInner = ({ postData }: PageInnerProps) => (
-  <>
-    <div>
-      <NoteTitle title={postData.title} />
-      <span className="flex flex-wrap items-center text-sm text-neutral-content/60">
-        <NoteDateMeta
-          createdAt={postData.createdAt!}
-          updatedAt={postData.updatedAt!}
-          modified={postData.modified}
-        />
-      </span>
-    </div>
-    <IndentArticleContainer>
-      <NoteMarkdown text={postData.text} />
-      <div className="signature-animated my-2 flex w-full justify-end" data-hide-print="true">
-        <Signature />
+const PageInner = ({ postData }: PageInnerProps) => {
+  const lang = getUserLocale();
+  const notesLocale = localeValues[lang].notes;
+
+  return (
+    <>
+      <div>
+        <NoteTitle title={postData.title} />
+        <span className="flex flex-wrap items-center text-sm text-neutral-content/60">
+          <NoteDateMeta
+            createdAt={postData.createdAt!}
+            updatedAt={postData.updatedAt!}
+            modified={postData.modified}
+          />
+        </span>
       </div>
-      <LayoutRightSidePortal>
-        <ArticleRightAside></ArticleRightAside>
-      </LayoutRightSidePortal>
-    </IndentArticleContainer>
-  </>
-);
+      <IndentArticleContainer>
+        <NoteMarkdown text={postData.text} />
+        <div className="signature-animated my-2 flex w-full justify-end" data-hide-print="true">
+          <Signature />
+        </div>
+        <LayoutRightSidePortal>
+          <ArticleRightAside locale={notesLocale} />
+        </LayoutRightSidePortal>
+      </IndentArticleContainer>
+    </>
+  );
+};
+
+const NoteDateMeta = ({
+  createdAt,
+  updatedAt,
+  modified,
+}: {
+  createdAt: Date;
+  updatedAt: Date;
+  modified: boolean;
+}) => {
+  const lang = getUserLocale();
+  const notesLocale = localeValues[lang].notes;
+
+  const isZh = lang === 'zh';
+  const formatDate = (date: Date) =>
+    isZh
+      ? dayjs(date).format('YYYY 年 M 月 D 日')
+      : dayjs(date).locale('en').format('MMMM D, YYYY');
+
+  return (
+    <span className="inline-flex items-center space-x-1">
+      <MdiClockOutline />
+      <time className="font-semibold text-sm font-mono">
+        {formatDate(createdAt)}
+        {modified && (
+          <>
+            &nbsp;&nbsp;{notesLocale['Updated on']} {formatDate(updatedAt)}
+          </>
+        )}
+      </time>
+    </span>
+  );
+};

src/app/(app)/notes/[nid]/pageExtra.tsx

@@ -4,8 +4,6 @@ import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { m } from 'framer-motion';
 import { useShallow } from 'zustand/react/shallow';
 
-import dayjs from '@/lib/dayjs';
-import { MdiClockOutline } from '@/components/icons/clock';
 import { cn } from '@/lib/helper';
 import { MainMarkdown } from '@/components/ui/markdown';
 import { useMainArticleStore } from '@/store/mainArticleStore';
@@ -22,26 +20,6 @@ export const NoteTitle = ({ title }: { title: string }) => {
   );
 };
 
-export const NoteDateMeta = ({
-  createdAt,
-  updatedAt,
-  modified,
-}: {
-  createdAt: Date;
-  updatedAt: Date;
-  modified: boolean;
-}) => {
-  return (
-    <span className="inline-flex items-center space-x-1">
-      <MdiClockOutline />
-      <time className=" font-semibold text-sm font-mono">
-        {createdAt && dayjs(createdAt).format('YYYY 年 M 月 D 日')}
-        {modified && <>&nbsp;&nbsp;编辑于 {dayjs(updatedAt).format('YYYY 年 M 月 D 日')}</>}
-      </time>
-    </span>
-  );
-};
-
 export const IndentArticleContainer = (props: PropsWithChildren) => {
   return (
     <article className={cn('prose relative', 'with-indent with-serif', ' min-w-full')}>

src/components/modules/list/PostItem.tsx

@@ -8,7 +8,10 @@ import { MdiClockOutline } from '@/components/icons/clock';
 import { FeHash } from '@/components/icons/fa-hash';
 import type { PostItem as PostItemType } from '@/core';
 
-export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data }) {
+export const PostItem = memo<{ data: PostItemType; locale: any }>(function PostItem({
+  data,
+  locale,
+}) {
   const postLink = `/notes/${data.path}`;
 
   return (
@@ -24,7 +27,7 @@ export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data })
         <span className=" flex min-w-0 items-center space-x-1 text-sm">
           <MdiClockOutline />
           {data.createdAt ? dayjs(data.createdAt).format('YYYY 年 M 月 D 日') : '1999 年 9 月 9 日'}
-          {data.modified && <>&nbsp;&nbsp;(已编辑)</>}
+          {data.modified && <>&nbsp;&nbsp;{locale.Edited}</>}
         </span>
         <span className="flex min-w-0 items-center space-x-1 text-sm">
           <FeHash className="translate-y-[0.5px]" />

src/components/modules/shared/ArticleRightAside.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import { PropsWithChildren } from 'react';
 
 import { TocAside } from '../toc/TocAside';
 import { ReadIndicator } from './ReadIndicator';
 
-export const ArticleRightAside = ({ children }: PropsWithChildren) => {
+export const ArticleRightAside = ({ children, locale }: any) => {
   return (
     <aside className="sticky top-[120px] mt-[120px] h-[calc(100vh-6rem-4.5rem-150px-120px)]">
       <div className="relative h-full">
         <TocAside
           as="div"
           className="static ml-4"
           treeClassName="absolute h-full min-h-[120px] flex flex-col"
-          accessory={<ReadIndicator />}
+          accessory={<ReadIndicator locale={locale} />}
         />
       </div>
       {!!children &&

src/components/modules/shared/ReadIndicator.tsx

@@ -8,7 +8,7 @@ import { cn } from '@/lib/helper';
 import { springScrollToTop } from '@/lib/scroller';
 import { useMainArticleStore } from '@/store/mainArticleStore';
 
-export const ReadIndicator = () => {
+export const ReadIndicator = ({ locale }: { locale: Record<string, string> }) => {
   const { Element } = useMainArticleStore();
   const [readPercent, setReadPercent] = useState(0);
 
@@ -40,22 +40,24 @@ export const ReadIndicator = () => {
         <MaterialSymbolsProgressActivity progress={readPercent} />
         {readPercent}%<br />
       </div>
-      <BackToTop readPercent={useDeferredValue(readPercent)} />
+      <BackToTop locale={locale} readPercent={useDeferredValue(readPercent)} />
     </div>
   );
 };
 
-const BackToTop = memo(({ readPercent }: { readPercent: number }) => {
-  return (
-    <MotionButtonBase
-      onClick={springScrollToTop}
-      className={cn(
-        'mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100',
-        readPercent > 10 ? '' : 'pointer-events-none opacity-0',
-      )}
-    >
-      <i className="i-mingcute-arrow-up-circle-line" />
-      <span className="whitespace-nowrap">back</span>
-    </MotionButtonBase>
-  );
-});
+const BackToTop = memo(
+  ({ readPercent, locale }: { readPercent: number; locale: Record<string, string> }) => {
+    return (
+      <MotionButtonBase
+        onClick={springScrollToTop}
+        className={cn(
+          'mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100',
+          readPercent > 10 ? '' : 'pointer-events-none opacity-0',
+        )}
+      >
+        <i className="i-mingcute-arrow-up-circle-line" />
+        <span className="whitespace-nowrap">{locale['Back to Top']}</span>
+      </MotionButtonBase>
+    );
+  },
+);

src/locale/index.ts

@@ -22,6 +22,14 @@ const localeValues = {
     projects: {
       projects: '项目',
     },
+    notes: {
+      'Updated on': '编辑于',
+      'Back to Top': '回到顶部',
+    },
+    list: {
+      Edited: '已编辑',
+      lang: 'zh',
+    },
   },
   en: {
     lang: 'en',
@@ -46,6 +54,14 @@ const localeValues = {
     projects: {
       projects: 'projects',
     },
+    notes: {
+      'Updated on': 'Updated on',
+      'Back to Top': 'Back to Top',
+    },
+    list: {
+      Edited: 'Edited',
+      lang: 'en',
+    },
   },
 };