✨ feat: i18n support for header, subtitle and about pages

.vscode/settings.json

@@ -64,6 +64,7 @@
     "Artículos",
     "astrojs",
     "attributify",
+    "belleza",
     "Beze",
     "blurhash",
     "bmoji",
@@ -96,13 +97,16 @@
     "rashomon",
     "rehype",
     "reimagines",
+    "Retipografía",
     "Retypeset",
+    "Reviviendo",
     "Roundhand",
     "Sentimentalisme",
     "Servetus",
     "Sobre",
     "srcset",
     "STIX",
+    "tipográfica",
     "titlebar",
     "Twikoo",
     "Umami",
@@ -112,8 +116,12 @@
     "waline",
     "walinejs",
     "weibo",
+    "Возрождая",
+    "красоту",
+    "Переверстка",
     "Посты",
     "себе",
-    "Теги"
+    "Теги",
+    "типографики"
   ]
 }

src/components/MainHeader.astro

@@ -1,11 +1,20 @@
 ---
 import themeConfig from '@/config'
+import { ui } from '@/i18n/ui'
 import { getPageInfo } from '@/utils/page'
 
-const { title, subtitle } = themeConfig.site
+const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
-const { titleSpace } = themeConfig.global
+const currentUI = ui[currentLang as keyof typeof ui]
-const { getLocalizedPath } = getPageInfo(Astro.url.pathname)
 
+const { title, subtitle } = themeConfig.site
+const headerTitle = title || currentUI.title
+const headerSubtitle = !subtitle
+  ? ''
+  : (subtitle === 'Revive the beauty of typography'
+      ? currentUI.subtitle
+      : subtitle)
+
+const { titleSpace } = themeConfig.global
 const marginBottom = {
     1: 'mb-0.625',
     2: 'mb-1.875',
@@ -13,26 +22,23 @@ const marginBottom = {
   }[titleSpace] || 'mb-3.125'
 ---
 
-<header
+<header class="mb-10.625 lg:fixed">
-  class="mb-10.625"
-  lg="fixed"
->
   <h1 class={`${marginBottom} text-8 c-primary font-bold font-title lg:text-9`}>
     <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-1.25"
-      transition:name="site-title"
+      transition:name={`site-title-${currentLang}`}
       data-disable-transition-on-theme
     >
       <a href={getLocalizedPath('/')}>
-        {title}
+        {headerTitle}
       </a>
     </div>
   </h1>
 
-  {subtitle && (
+  {headerSubtitle && (
     <h2 class="text-3.5 c-secondary font-navbar lg:text-4">
-      {subtitle}
+      {headerSubtitle}
     </h2>
   )}
 </header>

src/components/MobileHeader.astro

@@ -1,11 +1,20 @@
 ---
 import themeConfig from '@/config'
+import { ui } from '@/i18n/ui'
 import { getPageInfo } from '@/utils/page'
 
-const { title, subtitle } = themeConfig.site
+const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
-const { titleSpace } = themeConfig.global
+const currentUI = ui[currentLang as keyof typeof ui]
-const { getLocalizedPath } = getPageInfo(Astro.url.pathname)
 
+const { title, subtitle } = themeConfig.site
+const headerTitle = title || currentUI.title
+const headerSubtitle = !subtitle
+  ? ''
+  : (subtitle === 'Revive the beauty of typography'
+      ? currentUI.subtitle
+      : subtitle)
+
+const { titleSpace } = themeConfig.global
 const marginBottom = {
     1: 'mb-1.625',
     2: 'mb-2.875',
@@ -18,21 +27,21 @@ const marginBottom = {
     <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-1.25"
-      transition:name="site-title"
+      transition:name={`site-title-${currentLang}`}
       data-disable-transition-on-theme
     >
       <a href={getLocalizedPath('/')}>
-        {title}
+        {headerTitle}
       </a>
     </div>
   </h3>
 
-  {subtitle && (
+  {headerSubtitle && (
     <div
       class="text-3.5 opacity-0"
       aria-hidden="true"
     >
-      {subtitle}
+      {headerSubtitle}
     </div>
   )}
 </header>

src/config.ts

@@ -4,9 +4,9 @@ export const themeConfig: ThemeConfig = {
   // SITE INFORMATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   site: {
     // site title
-    title: 'Retypeset',
+    title: '',
     // site subtitle (optional)
-    subtitle: '再现版式之美',
+    subtitle: 'Revive the beauty of typography',
     // site description for SEO
     description: 'Retypeset is a static blog theme based on the Astro framework, inspired by Typography. Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space.',
     // author name
@@ -60,7 +60,7 @@ export const themeConfig: ThemeConfig = {
     // date format for posts
     dateFormat: 'YYYY-MM-DD', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
     // space between title and subtitle
-    titleSpace: 3, // 1, 2, 3
+    titleSpace: 2, // 1, 2, 3
   },
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 

src/content/about/about-en.md

@@ -0,0 +1,5 @@
+---
+lang: en
+---
+
+Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework, inspired by [Typography](https://astro-theme-typography.vercel.app/). Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space.

src/content/about/about-es.md

@@ -0,0 +1,5 @@
+---
+lang: es
+---
+
+Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/), inspirado en [Typography](https://astro-theme-typography.vercel.app/). Retypeset establece un nuevo estándar visual y reimagina la disposición de todas las páginas, ofreciendo una experiencia de lectura similar a la de los libros impresos, reviviendo la belleza de la tipografía. Detalles en cada mirada, elegancia en cada espacio.

src/content/about/about-ja.md

@@ -0,0 +1,5 @@
+---
+lang: ja
+---
+
+Retypeset は [Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマで、[Typography](https://astro-theme-typography.vercel.app/) からインスピレーションを得ています。新しい視覚的標準を確立し、すべてのページのレイアウトを再考することで、紙の本のような読書体験を提供し、タイポグラフィの美しさを蘇らせます。細部へのこだわりと、洗練された空間デザインが特徴です。

src/content/about/about-ru.md

@@ -0,0 +1,5 @@
+---
+lang: ru
+---
+
+Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/) и вдохновленная [Typography](https://astro-theme-typography.vercel.app/). Retypeset устанавливает новый визуальный стандарт и переосмысливает компоновку всех страниц, предлагая опыт чтения, подобный бумажным книгам, возрождая красоту типографики. Детали в каждом взгляде, элегантность в каждом пространстве.

src/content/about/about-zh-tw.md

@@ -0,0 +1,5 @@
+---
+lang: zh-tw
+---
+
+Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態博客主題，設計靈感來自 [Typography](https://astro-theme-typography.vercel.app/)。本主題通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。

src/content/about/about-zh.md

@@ -0,0 +1,5 @@
+---
+lang: zh
+---
+
+Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，设计灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。

src/content/config.ts

@@ -1,3 +1,4 @@
+import { allLocales } from '@/config'
 import { defineCollection, z } from 'astro:content'
 
 const postsCollection = defineCollection({
@@ -13,7 +14,7 @@ const postsCollection = defineCollection({
     draft: z.boolean().optional().default(false),
     pin: z.number().int().min(0).max(99).optional().default(0),
     toc: z.boolean().optional().default(false),
-    lang: z.string().optional().default(''),
+    lang: z.enum(['', ...allLocales]).optional().default(''),
     abbrlink: z.string().optional().default('').refine(
       abbrlink => !abbrlink || /^[a-z0-9\-]*$/.test(abbrlink),
       { message: 'Abbrlink can only contain lowercase letters, numbers and hyphens' },
@@ -21,6 +22,13 @@ const postsCollection = defineCollection({
   }),
 })
 
+const aboutCollection = defineCollection({
+  schema: z.object({
+    lang: z.enum(['', ...allLocales]).optional().default(''),
+  }),
+})
+
 export const collections = {
   posts: postsCollection,
+  about: aboutCollection,
 }

src/i18n/ui.ts

@@ -1,30 +1,42 @@
 export const ui = {
   'zh': {
+    title: '重新编排',
+    subtitle: '再现版式之美',
     posts: '文章',
     tags: '标签',
     about: '关于',
   },
   'zh-tw': {
+    title: '重新編排',
+    subtitle: '再現版式之美',
     posts: '文章',
     tags: '標籤',
     about: '關於',
   },
   'ja': {
+    title: '再組版',
+    subtitle: '印刷の美を甦らせる',
     posts: '記事',
     tags: 'タグ',
     about: '概要',
   },
   'en': {
+    title: 'Retypeset',
+    subtitle: 'Revive the beauty of typography',
     posts: 'Posts',
     tags: 'Tags',
     about: 'About',
   },
   'es': {
+    title: 'Retipografía',
+    subtitle: 'Reviviendo la belleza tipográfica',
     posts: 'Artículos',
     tags: 'Etiquetas',
     about: 'Sobre',
   },
   'ru': {
+    title: 'Переверстка',
+    subtitle: 'Возрождая красоту типографики',
     posts: 'Посты',
     tags: 'Теги',
     about: 'О себе',

src/pages/[...about].astro

@@ -1,6 +1,7 @@
 ---
 import { allLocales, defaultLocale } from '@/config'
 import Layout from '@/layouts/Layout.astro'
+import { getCollection } from 'astro:content'
 
 export async function getStaticPaths() {
   type PathItem = {
@@ -30,17 +31,16 @@ export async function getStaticPaths() {
 }
 
 const { lang } = Astro.props
+
+const allAboutEntries = await getCollection('about')
+const aboutEntry = allAboutEntries.find(entry => entry.data.lang === lang)
+  || allAboutEntries.find(entry => entry.data.lang === '')
+const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null }
 ---
 
 <Layout>
   <div class="uno-decorative-line"></div>
   <div class="heti mt-4.375">
-    {lang === 'en'
+    {Content && <Content />}
-? (
-      <p>Retypeset is a static blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space.</p>
-    )
-: (
-      <p>Retypeset 是一款基于<a href="https://astro.build/">Astro</a>框架的静态博客主题，设计灵感来自<a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。</p>
-    )}
   </div>
 </Layout>