feat: i18n, page title

(cherry picked from commit 0d9fc72bee009c591400055725680a6a0f5a9c83)

src/components/Navbar.astro

@@ -2,7 +2,22 @@
 import Button from "./control/Button.astro";
 import { Icon } from 'astro-icon/components';
 import DisplaySetting from "./widget/DisplaySetting.astro";
+import {getConfig} from "../utils/config-utils";
+import I18nKey from "../i18n/i18nKey";
+import {i18n} from "../i18n/translation";
 const className = Astro.props.class;
+
+function isI18nKey(key: string): key is I18nKey {
+    return Object.values(I18nKey).includes(key);
+}
+
+function getLinkName(name: string) {
+    if (isI18nKey(name)) {
+        return i18n(name);
+    }
+    return name;
+}
+
 ---
 <div class:list={[
     className,
@@ -10,13 +25,13 @@ const className = Astro.props.class;
     <a href="/"><Button height="52px" class="px-5 font-bold rounded-lg" light>
         <div class="flex flex-row text-[var(--primary)] items-center text-md">
             <Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
-            <div class="top-2"></div>Vivia Preview
+            {getConfig().title}
         </div>
     </Button></a>
     <div>
-        <a href="/"><Button light class="font-bold px-5 rounded-lg">Home</Button></a>
-        <a href="/archive"><Button light class="font-bold px-5 rounded-lg">Archive</Button></a>
-        <a href="/about"><Button light class="font-bold px-5 rounded-lg">About</Button></a>
+        {Object.keys(getConfig().menu).map((key) => {
+            return <a href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg">{getLinkName(key)}</Button></a>
+        })}
     </div>
     <div class="flex">
         <div>

src/components/PostMetadata.astro

@@ -1,6 +1,8 @@
 ---
 import {formatDateToYYYYMMDD} from "../utils/date-utils";
 import { Icon } from 'astro-icon/components';
+import {i18n} from "../i18n/translation";
+import I18nKey from "../i18n/i18nKey";
 
 interface Props {
     class: string;
@@ -38,7 +40,7 @@ const className = Astro.props.class;
                     {category}
                 </a>
             </div>)}
-            {!categories && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">Uncategorized</div>}
+            {!categories && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">{i18n(I18nKey.uncategorized)}</div>}
         </div>
     </div>
 
@@ -49,7 +51,7 @@ const className = Astro.props.class;
             <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
         </div>
         <div class="flex flex-row">
-            {tags.map(tag => <div
+            {tags && tags.map(tag => <div
                     class="with-divider"
             >
                 <a href=`/archive/tag/${tag}`
@@ -58,6 +60,7 @@ const className = Astro.props.class;
                     {tag}
                 </a>
             </div>)}
+            {!tags && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
         </div>
     </div>
 </div>

src/components/TitleCardNew.astro

@@ -19,6 +19,8 @@ import ImageBox from "./misc/ImageBox.astro";
 import ButtonTag from "./control/ButtonTag.astro";
 import { Icon } from 'astro-icon/components';
 import Button from "./control/Button.astro";
+import {i18n} from "../i18n/translation";
+import I18nKey from "../i18n/i18nKey";
 
 // tags = ['Foo', 'Bar', 'Baz', 'Qux', 'Quux'];
 
@@ -51,9 +53,9 @@ const { remarkPluginFrontmatter } = await entry.render();
         </div>
 
         <div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
-            <div>{remarkPluginFrontmatter.words} words</div>
+            <div>{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
             <div>|</div>
-            <div>{remarkPluginFrontmatter.minutes} minutes</div>
+            <div>{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
         </div>
 
     </div>

src/components/widget/DisplaySetting.astro

@@ -1,5 +1,7 @@
 ---
 import {getConfig} from "../../utils/config-utils";
+import {i18n} from "../../i18n/translation";
+import I18nKey from "../../i18n/i18nKey";
 const hueSet: number[] = [0, 30, 60, 180, 250, 270, 300, 330, 345];
 
 const enableBanner = getConfig().banner.enable;
@@ -13,7 +15,7 @@ const enableBanner = getConfig().banner.enable;
             before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
             before:absolute before:left-[-12px] before:top-[5.5px]"
         >
-            Primary Color
+            {i18n(I18nKey.primaryColor)}
         </div>
         <div id="hueValue" class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center font-bold transition text-sm items-center text-[var(--btn-content)]">
             {0}

src/components/widget/RecentPost.astro

@@ -2,6 +2,8 @@
 import WidgetLayout from "./WidgetLayout.astro";
 import ButtonLink from "../control/ButtonLink.astro";
 import {getPostUrlBySlug, getSortedPosts} from "../../utils/content-utils";
+import {i18n} from "../../i18n/translation";
+import I18nKey from "../../i18n/i18nKey";
 
 let posts = await getSortedPosts()
 
@@ -11,7 +13,7 @@ posts = posts.slice(0, LIMIT)
 
 // console.log(posts)
 ---
-<WidgetLayout name="Recent Posts">
+<WidgetLayout name={i18n(I18nKey.recentPosts)}>
     {posts.map(post =>
         <ButtonLink url={getPostUrlBySlug(post.slug)}>{post.data.title}</ButtonLink>
     )}

src/components/widget/Tag.astro

@@ -3,11 +3,13 @@
 import WidgetLayout from "./WidgetLayout.astro";
 import ButtonTag from "../control/ButtonTag.astro";
 import {getTagList} from "../../utils/content-utils";
+import {i18n} from "../../i18n/translation";
+import I18nKey from "../../i18n/i18nKey";
 
 const tags = await getTagList();
 
 ---
-<WidgetLayout name="Tags">
+<WidgetLayout name={i18n(I18nKey.tags)}>
     <div class="flex gap-2 flex-wrap">
         {tags.map(t => (
             <ButtonTag href={`/archive/tag/${t.name}`}>