Skip to content

i18n

Jump to bottom
satnaing edited this page Jun 6, 2026 · 1 revision

i18n

AstroPaper has a lightweight i18n layer for UI strings and date formatting. It does not support multi-language content routing — it handles the locale-aware display of dates and the UI labels built into the theme.

Table of Contents

Locale and Timezone Configuration

Set the locale and timezone in astro-paper.config.ts:

site: {
  lang: "en",              // HTML lang attribute, e.g. "en", "ja", "ar"
  timezone: "Asia/Bangkok", // IANA timezone string
  dir: "ltr",              // "ltr", "rtl", or "auto"
},
  • lang sets the <html lang="..."> attribute and is passed to the date formatter.
  • timezone controls how post dates are interpreted and displayed. Use an IANA timezone name (e.g. "America/New_York", "Europe/London", "UTC").
  • dir sets <html dir="...">. Use "rtl" for Arabic, Hebrew, etc.

Per-Post Timezone

A post can override the global timezone for its date display:

---
title: My Post
pubDatetime: 2025-06-01T10:00:00
timezone: "America/Los_Angeles"
---

This only affects how the post's date is displayed — it does not change the post's ordering.

UI String Translations

UI strings (nav labels, button text, ARIA labels, page titles) are defined in src/i18n/lang/. Currently only English is included (src/i18n/lang/en.ts).

The useTranslations(locale) function returns the string map for the given locale, falling back to English if the locale is not found.

Available string keys

{
  nav: { home, posts, tags, about, archives, search },
  post: {
    publishedAt, updatedAt, sharePostIntro, sharePostOn,
    sharePostViaEmail, tagLabel, backToTop, goBack, editPage,
    previousPost, nextPost,
  },
  pagination: { prev, next, page },
  home: { socialLinks, featured, recentPosts, allPosts },
  footer: { copyright, allRightsReserved },
  pages: {
    tagTitle, tagDesc, tagsTitle, tagsDesc,
    postsTitle, postsDesc, archivesTitle, archivesDesc,
    searchTitle, searchDesc,
  },
  a11y: {
    skipToContent, openMenu, closeMenu, toggleTheme,
    searchPlaceholder, noResults, goToPreviousPage, goToNextPage,
  },
  notFound: { title, message, goHome },
}

Adding a New Language

  1. Create src/i18n/lang/[locale].ts (e.g. src/i18n/lang/ja.ts) and export an object matching the UIStrings type:
import type { UIStrings } from "../types";

export default {
  nav: {
    home: "ホーム",
    posts: "記事",
    tags: "タグ",
    about: "概要",
    archives: "アーカイブ",
    search: "検索",
  },
  // ... all other keys
} satisfies UIStrings;

  1. The file is auto-discovered by src/i18n/index.ts via import.meta.glob. No manual registration is required.

  2. Pass the locale to useTranslations in the relevant components/pages, or set site.lang to the locale key.

Note: AstroPaper does not support multi-locale routing (separate URL paths per language). The i18n module is for UI string localization only.

Date Formatting

Dates are formatted using Day.js with locale and timezone applied from the site or post configuration.

The formatting logic is in src/i18n/format.ts. The output format is DD MMM YYYY (e.g. 01 Jun 2025) by default.

The Datetime component in src/components/Datetime.astro displays both pubDatetime and modDatetime. If modDatetime is set and differs from pubDatetime, the "Updated" date is shown.

AstroPaper

Getting Started

Writing Content

Features & Reference

Deployment

Links

Clone this wiki locally