Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: i18n, page title 

(cherry picked from commit 0d9fc72bee009c591400055725680a6a0f5a9c83)
This commit is contained in:
saicaca 2023-10-06 02:53:47 +08:00
parent 52959f230f
commit 2c4cc28e1f
19 changed files with 209 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Navbar.astro
View File

@ -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>

7
src/components/PostMetadata.astro
View File

@ -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>

6
src/components/TitleCardNew.astro
View File

@ -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>

4
src/components/widget/DisplaySetting.astro
View File

@ -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}

4
src/components/widget/RecentPost.astro
View File

@ -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>
)}

4
src/components/widget/Tag.astro
View File

@ -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}`}>

26
src/i18n/i18nKey.ts Normal file
View File

@ -0,0 +1,26 @@
enum I18nKey {
home = "home",
about = "about",
archive = "archive",
tags = "tags",
categories = "categories",
recentPosts = "recentPosts",
comments = "comments",
untitled = "untitled",
uncategorized = "uncategorized",
noTags = "noTags",
wordCount = "wordCount",
wordsCount = "wordsCount",
minuteCount = "minuteCount",
minutesCount = "minutesCount",
postCount = "postCount",
postsCount = "postsCount",
primaryColor = "primaryColor",
}
export default I18nKey;

27
src/i18n/languages/en.ts Normal file
View File

@ -0,0 +1,27 @@
import type { Translation } from "../translation.ts";
import Key from "../i18nKey.ts";
export const en: Translation = {
[Key.home]: "Home",
[Key.about]: "About",
[Key.archive]: "Archive",
[Key.tags]: "Tags",
[Key.categories]: "Categories",
[Key.recentPosts]: "Recent Posts",
[Key.comments]: "Comments",
[Key.untitled]: "Untitled",
[Key.uncategorized]: "Uncategorized",
[Key.noTags]: "No Tags",
[Key.wordCount]: "word",
[Key.wordsCount]: "words",
[Key.minuteCount]: "minute",
[Key.minutesCount]: "minutes",
[Key.postCount]: "post",
[Key.postsCount]: "posts",
[Key.primaryColor]: "Primary Color",
};

27
src/i18n/languages/zh_CN.ts Normal file
View File

@ -0,0 +1,27 @@
import type { Translation } from "../translation.ts";
import Key from "../i18nKey.ts";
export const zh_CN: Translation = {
[Key.home]: "主页",
[Key.about]: "关于",
[Key.archive]: "归档",
[Key.tags]: "标签",
[Key.categories]: "分类",
[Key.recentPosts]: "最新文章",
[Key.comments]: "评论",
[Key.untitled]: "无标题",
[Key.uncategorized]: "未分类",
[Key.noTags]: "无标签",
[Key.wordCount]: "字",
[Key.wordsCount]: "字",
[Key.minuteCount]: "分钟",
[Key.minutesCount]: "分钟",
[Key.postCount]: "篇文章",
[Key.postsCount]: "篇文章",
[Key.primaryColor]: "主题色",
};

27
src/i18n/languages/zh_TW.ts Normal file
View File

@ -0,0 +1,27 @@
import type { Translation } from "../translation.ts";
import Key from "../i18nKey.ts";
export const zh_TW: Translation = {
[Key.home]: "首頁",
[Key.about]: "關於",
[Key.archive]: "彙整",
[Key.tags]: "標籤",
[Key.categories]: "分類",
[Key.recentPosts]: "最新文章",
[Key.comments]: "評論",
[Key.untitled]: "無標題",
[Key.uncategorized]: "未分類",
[Key.noTags]: "無標籤",
[Key.wordCount]: "字",
[Key.wordsCount]: "字",
[Key.minuteCount]: "分鐘",
[Key.minutesCount]: "分鐘",
[Key.postCount]: "篇文章",
[Key.postsCount]: "篇文章",
[Key.primaryColor]: "主題色",
};

30
src/i18n/translation.ts Normal file
View File

@ -0,0 +1,30 @@
import {en} from "./languages/en.ts";
import {zh_TW} from "./languages/zh_TW.ts";
import {zh_CN} from "./languages/zh_CN.ts";
import type I18nKey from "./i18nKey.ts";
import {getConfig} from "../utils/config-utils.ts";
export type Translation = {
[K in I18nKey]: string;
}
const defaultTranslation = en;
const map: { [key: string]: Translation } = {
"en": en,
"en_us": en,
"en_gb": en,
"en_au": en,
"zh_cn": zh_CN,
"zh_tw": zh_TW,
}
export function getTranslation(lang: string): Translation {
lang = lang.toLowerCase();
return map[lang] || defaultTranslation;
}
export function i18n(key: I18nKey): string {
const lang = getConfig().lang || "en";
return getTranslation(lang)[key];
}

7
src/layouts/Layout.astro
View File

@ -54,6 +54,11 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
// TODO don't use post cover as banner for now
banner = viConf.banner.url;
let pageTitle = getConfig().title;
if (title) {
pageTitle = `${title} - ${pageTitle}`;
}
---
<!DOCTYPE html>
@ -61,6 +66,8 @@ banner = viConf.banner.url;
<head>
<ViewTransitions />
<title>{pageTitle}</title>
<meta charset="UTF-8" />
<meta name="description" content="Astro description">
<meta name="viewport" content="width=device-width" />

4
src/pages/about.astro
View File

@ -3,13 +3,15 @@
import MainGridLayout from "../layouts/MainGridLayout.astro";
import { getEntry } from 'astro:content'
import {i18n} from "../i18n/translation";
import I18nKey from "../i18n/i18nKey";
const aboutPost = await getEntry('spec', 'about')
const { Content } = await aboutPost.render()
---
<MainGridLayout>
<MainGridLayout title={i18n(I18nKey.about)}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-[120px]">
<div class="card-base z-10 px-9 py-6 relative w-full ">
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">

4
src/pages/archive/category/[category].astro
View File

@ -3,6 +3,8 @@
import {getSortedPosts} from "../../../utils/content-utils";
import MainGridLayout from "../../../layouts/MainGridLayout.astro";
import ArchivePanel from "../../../components/ArchivePanel.astro";
import {i18n} from "../../../i18n/translation";
import I18nKey from "../../../i18n/i18nKey";
export async function getStaticPaths() {
@ -30,6 +32,6 @@ const { category } = Astro.params;
---
<MainGridLayout>
<MainGridLayout title={i18n(I18nKey.archive)}>
<ArchivePanel categories={[category]}></ArchivePanel>
</MainGridLayout>

4
src/pages/archive/index.astro
View File

@ -2,9 +2,11 @@
import { getCollection, getEntry } from "astro:content";
import MainGridLayout from "../../layouts/MainGridLayout.astro";
import ArchivePanel from "../../components/ArchivePanel.astro";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
---
<MainGridLayout>
<MainGridLayout title={i18n(I18nKey.archive)}>
<ArchivePanel></ArchivePanel>
</MainGridLayout>

5
src/pages/archive/tag/[tag].astro
View File

@ -3,7 +3,8 @@
import {getSortedPosts} from "../../../utils/content-utils";
import MainGridLayout from "../../../layouts/MainGridLayout.astro";
import ArchivePanel from "../../../components/ArchivePanel.astro";
import {i18n} from "../../../i18n/translation";
import I18nKey from "../../../i18n/i18nKey";
export async function getStaticPaths() {
@ -29,6 +30,6 @@ const { tag } = Astro.params;
---
<MainGridLayout>
<MainGridLayout title={i18n(I18nKey.archive)}>
<ArchivePanel tags={[tag]}></ArchivePanel>
</MainGridLayout>

8
src/pages/posts/[slug].astro
View File

@ -9,6 +9,8 @@ import PostMetadata from "../../components/PostMetadata.astro";
import {getPostUrlBySlug} from "../../utils/content-utils";
import Button from "../../components/control/Button.astro";
import {getConfig} from "../../utils/config-utils";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
export async function getStaticPaths() {
const blogEntries = await getCollection('posts');
@ -25,7 +27,7 @@ const { remarkPluginFrontmatter } = await entry.render();
const enableBanner = getConfig().banner.enable;
---
<MainGridLayout banner={entry.data.cover}>
<MainGridLayout banner={entry.data.cover} title={entry.data.title}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div class:list={["card-base z-10 px-9 py-6 relative w-full ",
{}
@ -36,13 +38,13 @@ const enableBanner = getConfig().banner.enable;
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:notes-rounded"></Icon>
</div>
<div class="text-sm">{remarkPluginFrontmatter.words} words</div>
<div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
</div>
<div class="flex flex-row items-center">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:schedule-outline-rounded"></Icon>
</div>
<div class="text-sm">{remarkPluginFrontmatter.minutes} minutes</div>
<div class="text-sm">{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
</div>
</div>

3
src/utils/config-utils.ts
View File

@ -1,9 +1,12 @@
// @ts-ignore
import _config from '../../vivia.config.yml';
interface ViviaConfig {
title: string;
menu: {
[key: string]: string;
};
lang: string;
appearance: {
hue: number;
};

8
vivia.config.yml
View File

@ -1,6 +1,14 @@
title: Fuwari
menu:
home: /
archive: /archive
about: /about
appearance:
hue: 250
lang: en
banner:
enable: true
url: https://saicaca.github.io/vivia-preview/assets/banner.jpg