@ansidev-oss/vitepress-theme-ansidev 1.0.12 → 1.2.0

package/dist/client/types/index.d.ts

@@ -34,6 +34,10 @@ export interface Post {
     twitter: string;
     url?: string;
     date: Date;
+    /**
+     * Excerpt rendered as HTML and normalized by the theme's `useExcerptHtml` helper.
+     * Undefined when the post contains no excerpt separator.
+     */
     excerpt: string | undefined;
     categories: string[];
     tags: string[];
@@ -49,6 +53,10 @@ export interface Project {
     url: string;
     showcaseUrl: string;
     repositoryUrl: string;
+    /**
+     * Excerpt rendered as HTML and normalized by the theme's `useExcerptHtml` helper.
+     * Undefined when the project contains no excerpt separator.
+     */
     excerpt: string | undefined;
     license: string;
     licenseUrl: string;

package/dist/node/composables.d.mts

@@ -1,4 +1,12 @@
-//#region src/node/composables/types.d.ts
+/**
+ * Normalizes a post/project excerpt into safe HTML suitable for v-html.
+ *
+ * Excerpts may originate raw (gray-matter) or pre-rendered (createContentLoader).
+ * Raw input is rendered with markdown-it with html disabled, so inline markdown
+ * (links, emphasis, inline code) works and source HTML is escaped (no injection).
+ * Excess `undefined`/empty input yields undefined.
+ */
+export declare const useExcerptHtml: (excerpt?: string) => string | undefined;
 type Pattern = string | string[];
 type Frontmatter = Record<string, unknown> & {
   date?: string;
@@ -6,27 +14,18 @@ type Frontmatter = Record<string, unknown> & {
 };
 type FrontmatterToString = (frontmatter: Frontmatter) => string;
 type StringOrFrontmatterToString = string | FrontmatterToString;
-//#endregion
-//#region src/node/composables/markdown.d.ts
-declare const useMarkdownFrontmatter: (pattern: Pattern, excerptSeparator?: string) => Array<Frontmatter>;
-//#endregion
-//#region src/node/composables/route.d.ts
-declare const useMarkdownFrontmatterRoute: (pattern: Pattern, frontmatterKey: string, excerptSeparator?: string) => {
+export declare const useMarkdownFrontmatter: (pattern: Pattern, excerptSeparator?: string) => Array<Frontmatter>;
+export declare const useMarkdownFrontmatterRoute: (pattern: Pattern, frontmatterKey: string, excerptSeparator?: string) => {
   paths(): any;
 };
-declare const useArchiveRoute: (pattern: Pattern, excerptSeparator?: string) => {
+export declare const useArchiveRoute: (pattern: Pattern, excerptSeparator?: string) => {
   paths(): any;
 };
-//#endregion
-//#region src/shared/composables/useSlug.d.ts
-declare const useSlug: (str: string) => string;
-declare const useSlugFilter: (slug: string) => (str: string) => boolean;
-//#endregion
-//#region src/node/composables/slug.d.ts
-declare const useSlugFromMarkdownFrontMatter: (pattern: Pattern, frontmatterKeyOrMappingFn: StringOrFrontmatterToString, excerptSeparator?: string) => {
+export declare const useSlug: (str: string) => string;
+export declare const useSlugFilter: (slug: string) => (str: string) => boolean;
+export declare const useSlugFromMarkdownFrontMatter: (pattern: Pattern, frontmatterKeyOrMappingFn: StringOrFrontmatterToString, excerptSeparator?: string) => {
   params: {
     slug: any;
   };
 }[];
-//#endregion
-export { useArchiveRoute, useMarkdownFrontmatter, useMarkdownFrontmatterRoute, useSlug, useSlugFilter, useSlugFromMarkdownFrontMatter };
+export {};

package/dist/node/composables.mjs

@@ -1,12 +1,44 @@
+import MarkdownItLib from "markdown-it";
 import fs from "node:fs";
 import { resolve } from "node:path";
 import { globSync } from "glob";
 import matter from "gray-matter";
-
-//#region src/node/composables/markdown.ts
+// src/node/composables/excerpt.ts
+const markdown = new MarkdownItLib({
+	html: false,
+	linkify: true,
+	breaks: false
+});
+const BLOCK_HTML_RE = /^<(?:p|div|ul|ol|dl|h[1-6]|blockquote|pre|table)(?:\s[^>]*)?>/;
+const DANGEROUS_ELEMENT_RE = /<(?:script|style|iframe|object|embed)\b[^>]*>[\s\S]*?<\/(?:script|style|iframe|object|embed)>|<(?:script|style|iframe|object|embed)\b[^>]*\/?>(?:<\/(?:script|style|iframe|object|embed)>)?/gi;
+const EVENT_ATTR_RE = /\s+on[a-z]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?/gi;
+const JS_URL_RE = /\s(?:href|src)\s*=\s*("|')\s*javascript:[^"']*\1/gi;
+const sanitizeHtml = (html) => html.replace(DANGEROUS_ELEMENT_RE, "").replace(EVENT_ATTR_RE, "").replace(JS_URL_RE, "");
+const stripSingleParagraphWrapper = (html) => {
+	if (!html.startsWith("<p>") || !html.endsWith("</p>")) return html;
+	const inner = html.slice(3, -4);
+	if (inner.includes("</p>")) return html;
+	return inner;
+};
+/**
+* Normalizes a post/project excerpt into safe HTML suitable for v-html.
+*
+* Excerpts may originate raw (gray-matter) or pre-rendered (createContentLoader).
+* Raw input is rendered with markdown-it with html disabled, so inline markdown
+* (links, emphasis, inline code) works and source HTML is escaped (no injection).
+* Excess `undefined`/empty input yields undefined.
+*/
+const useExcerptHtml = (excerpt) => {
+	const trimmed = excerpt?.trim();
+	if (!trimmed) return void 0;
+	const html = BLOCK_HTML_RE.test(trimmed) ? sanitizeHtml(trimmed) : markdown.render(trimmed).trim();
+	return stripSingleParagraphWrapper(html).trim() || void 0;
+};
+// src/node/composables/markdown.ts
 const useMarkdownFrontmatter = (pattern, excerptSeparator = "---") => {
 	return globSync(pattern, { ignore: ["node_modules/**", ".git/**"] }).map((file) => {
-		const { data, excerpt } = matter(fs.readFileSync(resolve(file), "utf-8"), {
+		const src = fs.readFileSync(resolve(file), "utf-8");
+		const { data, excerpt } = matter(src, {
 			excerpt: true,
 			excerpt_separator: excerptSeparator
 		});
@@ -16,16 +48,12 @@ const useMarkdownFrontmatter = (pattern, excerptSeparator = "---") => {
 		};
 	});
 };
-
-//#endregion
-//#region src/shared/composables/useSlug.ts
+// src/shared/composables/useSlug.ts
 const useSlug = (str) => {
 	return str.replace(/#/, "-sharp-").replace(/\./, "-dot-").replace(/-$/, "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 };
 const useSlugFilter = (slug) => (str) => useSlug(str) === slug;
-
-//#endregion
-//#region src/node/composables/slug.ts
+// src/node/composables/slug.ts
 const useSlugFromMarkdownFrontMatter = (pattern, frontmatterKeyOrMappingFn, excerptSeparator = "---") => {
 	const frontMatters = useMarkdownFrontmatter(pattern, excerptSeparator);
 	const _frontmatterMappingFn = typeof frontmatterKeyOrMappingFn === "string" ? (frontMatter) => frontMatter[frontmatterKeyOrMappingFn] : frontmatterKeyOrMappingFn;
@@ -36,9 +64,7 @@ const useSlugFromMarkdownFrontMatter = (pattern, frontmatterKeyOrMappingFn, exce
 		return { params: { slug } };
 	});
 };
-
-//#endregion
-//#region src/node/composables/route.ts
+// src/node/composables/route.ts
 const useMarkdownFrontmatterRoute = (pattern, frontmatterKey, excerptSeparator = "---") => {
 	return { paths() {
 		return useSlugFromMarkdownFrontMatter(pattern, frontmatterKey, excerptSeparator);
@@ -49,6 +75,4 @@ const useArchiveRoute = (pattern, excerptSeparator = "---") => {
 		return useSlugFromMarkdownFrontMatter(pattern, (frontmatter) => new Date(frontmatter.date).getFullYear().toString(), excerptSeparator);
 	} };
 };
-
-//#endregion
-export { useArchiveRoute, useMarkdownFrontmatter, useMarkdownFrontmatterRoute, useSlug, useSlugFilter, useSlugFromMarkdownFrontMatter };
+export { useArchiveRoute, useExcerptHtml, useMarkdownFrontmatter, useMarkdownFrontmatterRoute, useSlug, useSlugFilter, useSlugFromMarkdownFrontMatter };

package/dist/node/config.d.mts

@@ -1,8 +1,6 @@
 import { UserConfig } from "vitepress";
 import { DefaultTheme } from "vitepress/theme";
 import * as Swetrix from "swetrix";
-
-//#region src/client/plugins/donation/index.d.ts
 declare interface DonationPluginConfig {
   buymeacoffee?: string;
   kofi?: string;
@@ -19,8 +17,6 @@ declare interface CustomDonationBaseConfig {
 declare interface CustomDonationConfig extends CustomDonationBaseConfig {
   donationId: string;
 }
-//#endregion
-//#region src/client/plugins/google-analytics/index.d.ts
 interface GoogleAnalyticsOptions {
   /**
    * The Google Analytics ID.
@@ -29,8 +25,6 @@ interface GoogleAnalyticsOptions {
    */
   id: string;
 }
-//#endregion
-//#region src/client/plugins/medium-zoom/index.d.ts
 declare module 'medium-zoom' {
   interface Zoom {
     refresh: (selector?: string) => void;
@@ -41,8 +35,6 @@ type MediumZoomPluginConfig = {
   zoomOptions?: string;
   delay?: number;
 };
-//#endregion
-//#region src/client/plugins/sharing/index.d.ts
 declare interface SharingPluginConfig {
   wrapperCssClass?: string;
   titleCssClass?: string;
@@ -54,8 +46,6 @@ declare interface SharingPluginConfig {
   iconSize?: number;
   iconStyle?: string;
 }
-//#endregion
-//#region src/client/plugins/swetrix/index.d.ts
 interface SwetrixOptions {
   /**
    * The Swetrix ID.
@@ -65,8 +55,6 @@ interface SwetrixOptions {
   id: string;
   options?: Swetrix.LibOptions;
 }
-//#endregion
-//#region src/client/types/index.d.ts
 interface ThemeConfig extends DefaultTheme.Config {
   /**
    * The site URL.
@@ -84,8 +72,6 @@ interface ThemeConfig extends DefaultTheme.Config {
    */
   themeFooter?: DefaultTheme.Footer;
 }
-//#endregion
-//#region src/node/config.d.ts
 /**
  * @type {import('vitepress').UserConfig}
  */
@@ -127,6 +113,5 @@ declare const baseConfig: {
  * Helper function to define theme configuration with proper typing
  * Note: TailwindCSS plugin should be added in vite.config.ts, not here
  */
-declare function defineWithDefaultThemeConfig(config?: UserConfig<ThemeConfig>): UserConfig<ThemeConfig>;
-//#endregion
-export { baseConfig as default, defineWithDefaultThemeConfig };
+export declare function defineWithDefaultThemeConfig(config?: UserConfig<ThemeConfig>): UserConfig<ThemeConfig>;
+export { baseConfig as default };

package/dist/node/config.mjs

@@ -1,6 +1,5 @@
 import { loadEnv, mergeConfig } from "vitepress";
-
-//#region src/node/config.ts
+// src/node/config.ts
 process.env.VITE_EXTRA_EXTENSIONS = "rss";
 globalThis.__VUE_PROD_DEVTOOLS__ = process.env.NODE_ENV === "development";
 const env = loadEnv(process.env.NODE_ENV || "development", process.cwd(), "VITE_");
@@ -21,7 +20,13 @@ const baseConfig = {
 		googleAnalytics: { id: env.VITE_GA_ID },
 		search: {
 			provider: "local",
-			options: { async _render(src, env, md) {
+			options: { 
+			/**
+			* @param {string} src
+			* @param {import('vitepress').MarkdownEnv} env
+			* @param {import('markdown-it')} md
+			*/
+async _render(src, env, md) {
 				const html = await md.renderAsync(src, env);
 				if (env.frontmatter?.search === false) return "";
 				let renderedHtml = "";
@@ -51,6 +56,4 @@ function defineWithDefaultThemeConfig(config = {}) {
 	}
 	return mergeConfig(baseConfig, config);
 }
-
-//#endregion
-export { baseConfig as default, defineWithDefaultThemeConfig };
+export { baseConfig as default, defineWithDefaultThemeConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansidev-oss/vitepress-theme-ansidev",
-  "version": "1.0.12",
+  "version": "1.2.0",
   "description": "The VitePress theme for ansidev's blog",
   "type": "module",
   "main": "dist/node/index.js",
@@ -27,7 +27,10 @@
       "import": "./dist/client/index.js",
       "types": "./dist/client/index.d.ts"
     },
-    "./styles.css": "./dist/client/styles.css",
+    "./styles.css": {
+      "import": "./dist/client/styles.css",
+      "types": "./styles.d.ts"
+    },
     "./config": {
       "import": "./dist/node/config.mjs",
       "types": "./dist/node/config.d.ts"
@@ -39,42 +42,44 @@
   },
   "files": [
     "dist",
+    "!dist/.pack",
     "src",
     "README.md",
     "LICENSE"
   ],
   "dependencies": {
     "@tailwindcss/vite": "^4.2.0",
-    "@vueuse/core": "^14.2.1",
+    "@vueuse/core": "^15.0.0",
+    "markdown-it": "^15.0.3",
     "vue-i18n": "^11.2.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.4",
     "@iconify/vue": "^5.0.0",
     "@tailwindcss/postcss": "^4.2.0",
-    "@types/node": "^25.3.0",
+    "@types/markdown-it": "^14.2.0",
+    "@types/node": "^26.0.0",
     "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.5.1",
     "autoprefixer": "^10.4.24",
-    "concurrently": "^9.2.1",
-    "glob": "^13.0.6",
+    "glob": "^14.0.0",
     "gray-matter": "^4.0.3",
+    "happy-dom": "^21.0.4",
     "medium-zoom": "^1.1.0",
     "postcss": "^8.5.6",
-    "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
     "swetrix": "^4.1.0",
     "tailwindcss": "^4.2.0",
     "ts-node": "^10.9.2",
-    "tsdown": "^0.20.3",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "typescript": "^6.0.0",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
     "vitepress": "^2.0.0-alpha.16",
     "vue": "^3.5.28",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.5",
+    "vite-plus": "1.4.0"
   },
   "peerDependencies": {
     "@iconify/vue": "^5.0.0",
-    "glob": "^13.0.6",
+    "glob": "^13.0.6 || ^14.0.0",
     "gray-matter": "^4.0.3",
     "medium-zoom": "^1.1.0",
     "swetrix": "^4.1.0",
@@ -83,16 +88,17 @@
     "vitepress": "^2.0.0-alpha.16",
     "vue": "^3.5.28"
   },
+  "engines": {
+    "node": ">=26.2.0",
+    "pnpm": ">=11.3.0"
+  },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint:check": "biome check",
-    "lint": "biome check --write",
-    "dev:client": "vite build --watch",
-    "dev:node": "tsdown --watch",
-    "dev": "concurrently --kill-others \"pnpm dev:client\" \"pnpm dev:node\"",
+    "test": "vp test run",
+    "lint:check": "vp check",
+    "lint": "vp check --fix",
     "clean": "rimraf dist",
-    "build:client": "vite build && tsc --emitDeclarationOnly",
-    "build:node": "tsdown",
-    "build": "pnpm clean && concurrently \"pnpm build:client\" \"pnpm build:node\""
+    "build": "vp run build:all",
+    "dev": "vp build --watch & vp pack --watch --on-success \"node ../../scripts/publish-node.mjs && node ../../scripts/touch-demo.mjs\" & wait"
   }
 }

package/src/client/components/DonationWidget.vue

@@ -8,15 +8,21 @@ const props = defineProps<{
   direction?: 'horizontal' | 'vertical'
 }>()
 
-const directionCssClass = props.direction === 'vertical' ? 'space-y-4' : 'space-x-4'
+const directionCssClass =
+  props.direction === 'vertical' ? 'space-y-4' : 'space-x-4'
 
 const Donation = theme.value.donation
-  ? defineAsyncComponent(() => import('../plugins/donation/components/Donation.vue'))
+  ? defineAsyncComponent(
+      () => import('../plugins/donation/components/Donation.vue')
+    )
   : () => null
 </script>
 
 <template>
-  <div class="flex flex-wrap py-4 items-center justify-center" :class="directionCssClass">
+  <div
+    class="flex flex-wrap py-4 items-center justify-center"
+    :class="directionCssClass"
+  >
     <Donation :donation="theme.donation" />
   </div>
 </template>

package/src/client/components/Footer.vue

@@ -9,16 +9,23 @@ const { hasSidebar, hasAside } = useLayout()
 
 const copyright = computed(() => {
   return typeof theme.value.themeFooter.copyright === 'string'
-    ? theme.value.themeFooter.copyright.replace(/#\{present\}/g, new Date().getFullYear().toString())
+    ? theme.value.themeFooter.copyright.replace(
+        /#\{present\}/g,
+        new Date().getFullYear().toString()
+      )
     : theme.value.themeFooter.copyright
 })
 
 const GoogleAnalytics = theme.value.googleAnalytics
-  ? defineAsyncComponent(() => import('../plugins/google-analytics/components/GoogleAnalytics.vue'))
+  ? defineAsyncComponent(
+      () => import('../plugins/google-analytics/components/GoogleAnalytics.vue')
+    )
   : () => null
 
 const Swetrix = theme.value.swetrix
-  ? defineAsyncComponent(() => import('../plugins/swetrix/components/Swetrix.vue'))
+  ? defineAsyncComponent(
+      () => import('../plugins/swetrix/components/Swetrix.vue')
+    )
   : () => null
 </script>
 
@@ -58,7 +65,7 @@ const Swetrix = theme.value.swetrix
 .VPFooter :deep(a) {
   text-decoration-line: underline;
   text-underline-offset: 2px;
-  transition: color 0.25s;
+  transition: none;
 }
 
 .VPFooter :deep(a:hover) {

package/src/client/components/Link.vue

@@ -1,17 +1,17 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import RouterLink from './RouterLink.vue'
 
 const props = defineProps({
   href: {
     type: String,
     required: true,
-    default: '#',
+    default: '#'
   },
   disableRouterLink: {
     type: Boolean,
     required: false,
-    default: false,
-  },
+    default: false
+  }
 })
 
 const isInternalLink = props.href?.startsWith('/') && !props.disableRouterLink
@@ -25,7 +25,13 @@ const isAnchorLink = props.href?.startsWith('#')
   <a v-else-if="disableRouterLink" target="_self" :href="href" v-bind="$attrs">
     <slot />
   </a>
-  <a v-else target="_blank" rel="noopener noreferrer" :href="href" v-bind="$attrs">
+  <a
+    v-else
+    target="_blank"
+    rel="noopener noreferrer"
+    :href="href"
+    v-bind="$attrs"
+  >
     <slot />
   </a>
 </template>

package/src/client/components/LocaleSwitcher.vue

@@ -6,8 +6,8 @@ defineProps({
   size: {
     type: Number,
     required: false,
-    default: 20,
-  },
+    default: 20
+  }
 })
 
 const { t, availableLocales, locale } = useI18n()
@@ -33,7 +33,7 @@ const toggleLocale = () => switchLocale(availableLocales, locale)
   width: 1px;
   height: 24px;
   background-color: var(--vp-c-divider);
-  content: "";
+  content: '';
 }
 
 .VPLocaleSwitcher {
@@ -43,12 +43,12 @@ const toggleLocale = () => switchLocale(availableLocales, locale)
   width: 36px;
   height: 36px;
   color: var(--vp-c-text-2);
-  transition: color 0.5s;
+  transition: none;
 }
 
 .VPLocaleSwitcher:hover {
   color: var(--vp-c-text-1);
-  transition: color 0.25s;
+  transition: none;
 }
 
 .VPLocaleSwitcher > :deep(svg) {

package/src/client/components/PostDate.test.ts

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vite-plus/test'
+import { createI18n } from 'vue-i18n'
+import PostDate from './PostDate.vue'
+
+const data = vi.hoisted(() => ({
+  frontmatter: { value: {} as Record<string, unknown> },
+  lang: { value: 'en-US' }
+}))
+vi.mock('vitepress', () => ({ useData: () => data }))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { posted_on: 'Posted on' } }
+})
+
+const render = (date?: Date | string) =>
+  mount(PostDate, { props: { date }, global: { plugins: [i18n] } })
+const datetimeOf = (date?: Date | string) =>
+  render(date).get('time').attributes('datetime')
+
+describe('PostDate locale', () => {
+  afterEach(() => {
+    data.frontmatter.value = {}
+    data.lang.value = 'en-US'
+  })
+
+  const textOf = () => render('2023-04-05T06:07:08.000Z').get('time').text()
+
+  it('formats in English for en-US', () => {
+    expect(textOf()).toBe('April 5, 2023')
+  })
+
+  it('formats in Vietnamese when frontmatter lang is vi', () => {
+    data.frontmatter.value = { lang: 'vi' }
+    expect(textOf()).toBe('5 tháng 4, 2023')
+  })
+
+  it('falls back to the site lang without frontmatter lang', () => {
+    data.lang.value = 'vi'
+    expect(textOf()).toBe('5 tháng 4, 2023')
+  })
+
+  it('falls back to English for an invalid lang tag', () => {
+    data.frontmatter.value = { lang: 'not_a_lang!' }
+    expect(textOf()).toBe('April 5, 2023')
+  })
+})
+
+describe('PostDate datetime', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+    data.frontmatter.value = {}
+    data.lang.value = 'en-US'
+  })
+
+  it('matches the date prop when given a Date', () => {
+    const date = new Date('2023-04-05T06:07:08.000Z')
+    expect(datetimeOf(date)).toBe(date.toISOString())
+  })
+
+  it('matches the date prop when given a string', () => {
+    expect(datetimeOf('2023-04-05T06:07:08.000Z')).toBe(
+      '2023-04-05T06:07:08.000Z'
+    )
+    expect(datetimeOf('2023-04-05')).toBe(new Date('2023-04-05').toISOString())
+  })
+
+  it('does not depend on render time', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2030-01-01T00:00:00.000Z'))
+    expect(datetimeOf('2023-04-05T06:07:08.000Z')).toBe(
+      '2023-04-05T06:07:08.000Z'
+    )
+  })
+
+  it('omits datetime and does not throw for a missing or invalid date', () => {
+    expect(datetimeOf(undefined)).toBeUndefined()
+    expect(datetimeOf('not a date')).toBeUndefined()
+  })
+})

package/src/client/components/PostDate.vue

@@ -1,6 +1,7 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { usePageLang } from '../composables/lang'
 
 const props = defineProps({
   /**
@@ -9,25 +10,40 @@ const props = defineProps({
   date: [Date, String],
   textSize: {
     type: String,
-    default: null,
-  },
+    default: null
+  }
 })
 
 const { t } = useI18n()
+const pageLang = usePageLang()
+
+const formatDate = (date: Date, locale: string) => {
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'UTC'
+  }
+  try {
+    return date.toLocaleDateString(locale, options)
+  } catch {
+    // Invalid lang tag: fall back to English.
+    return date.toLocaleDateString('en-US', options)
+  }
+}
+
 const dateObject = computed(() => {
-  const date = props.date instanceof Date ? props.date : new Date(props.date as string)
+  const date =
+    props.date instanceof Date ? props.date : new Date(props.date as string)
+
+  const isValid = !Number.isNaN(+date)
 
   return {
     time: +date,
-    string: date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    }),
+    iso: isValid ? date.toISOString() : undefined,
+    string: formatDate(date, pageLang.value)
   }
 })
-
-const getDateTime = () => new Date().toISOString()
 </script>
 
 <template>
@@ -35,8 +51,11 @@ const getDateTime = () => new Date().toISOString()
     <dt class="sr-only">
       {{ t('posted_on') }}
     </dt>
-    <dd class="font-medium leading-6" :class="[textSize ? `text-${textSize}` : 'text-base']">
-      <time :datetime="getDateTime()">{{ dateObject.string }}</time>
+    <dd
+      class="font-medium leading-6"
+      :class="[textSize ? `text-${textSize}` : 'text-base']"
+    >
+      <time :datetime="dateObject.iso">{{ dateObject.string }}</time>
     </dd>
   </dl>
 </template>