@ansidev-oss/vitepress-theme-ansidev 1.0.11 → 1.1.0

package/dist/node/composables.d.mts

@@ -1,4 +1,3 @@
-//#region src/node/composables/types.d.ts
 type Pattern = string | string[];
 type Frontmatter = Record<string, unknown> & {
   date?: string;
@@ -6,27 +5,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

@@ -2,11 +2,11 @@ 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/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 +16,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 +32,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 +43,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, 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,17 +35,17 @@ type MediumZoomPluginConfig = {
   zoomOptions?: string;
   delay?: number;
 };
-//#endregion
-//#region src/client/plugins/sharing/index.d.ts
 declare interface SharingPluginConfig {
+  wrapperCssClass?: string;
+  titleCssClass?: string;
+  buttonCssClass?: string;
+  title?: string;
   networks?: string[];
   displayMode?: string;
   buttonSize?: number;
   iconSize?: number;
   iconStyle?: string;
 }
-//#endregion
-//#region src/client/plugins/swetrix/index.d.ts
 interface SwetrixOptions {
   /**
    * The Swetrix ID.
@@ -61,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.
@@ -80,8 +72,6 @@ interface ThemeConfig extends DefaultTheme.Config {
    */
   themeFooter?: DefaultTheme.Footer;
 }
-//#endregion
-//#region src/node/config.d.ts
 /**
  * @type {import('vitepress').UserConfig}
  */
@@ -123,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.11",
+  "version": "1.1.0",
   "description": "The VitePress theme for ansidev's blog",
   "type": "module",
   "main": "dist/node/index.js",
@@ -49,39 +49,50 @@
     "vue-i18n": "^11.2.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.2",
+    "@biomejs/biome": "2.6.3",
     "@iconify/vue": "^5.0.0",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.3",
+    "@tailwindcss/postcss": "^4.2.0",
+    "@types/node": "^25.3.0",
     "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.5.1",
     "autoprefixer": "^10.4.24",
-    "concurrently": "^9.2.1",
-    "glob": "^13.0.5",
+    "concurrently": "^10.0.0",
+    "glob": "^13.0.6",
     "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",
-    "rollup-plugin-copy": "^3.5.0",
     "swetrix": "^4.1.0",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.0",
     "ts-node": "^10.9.2",
-    "tsdown": "^0.20.3",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "tsdown": "^0.23.0",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.0",
     "vitepress": "^2.0.0-alpha.16",
+    "vitest": "^5.0.5",
     "vue": "^3.5.28",
-    "vue-tsc": "^3.2.4"
+    "vue-tsc": "^3.2.5"
   },
   "peerDependencies": {
     "@iconify/vue": "^5.0.0",
+    "glob": "^13.0.6",
+    "gray-matter": "^4.0.3",
     "medium-zoom": "^1.1.0",
     "swetrix": "^4.1.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
     "vitepress": "^2.0.0-alpha.16",
     "vue": "^3.5.28"
   },
+  "engines": {
+    "node": ">=26.2.0",
+    "pnpm": ">=11.3.0"
+  },
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
     "lint:check": "biome check",
     "lint": "biome check --write",
     "dev:client": "vite build --watch",

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

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+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'>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { usePageLang } from '../composables/lang'
 
 const props = defineProps({
   /**
@@ -14,20 +15,29 @@ const props = defineProps({
 })
 
 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 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>
@@ -36,7 +46,7 @@ const getDateTime = () => new Date().toISOString()
       {{ t('posted_on') }}
     </dt>
     <dd class="font-medium leading-6" :class="[textSize ? `text-${textSize}` : 'text-base']">
-      <time :datetime="getDateTime()">{{ dateObject.string }}</time>
+      <time :datetime="dateObject.iso">{{ dateObject.string }}</time>
     </dd>
   </dl>
 </template>

package/src/client/components/PostItem.vue

@@ -27,7 +27,7 @@ const postDate = computed(() => usePostDate(props.post.date))
       <div class="flex flex-wrap mb-3">
         <TermLink v-for="category in post.categories" :key="category" :text="category" basePath="/categories/" />
       </div>
-      <p>{{ post?.excerpt }}</p>
+      <p v-html="post?.excerpt" />
     </div>
   </div>
 </template>

package/src/client/composables/index.ts

@@ -1,4 +1,5 @@
 export * from '../../shared/composables'
 export * from './date'
+export * from './lang'
 export * from './project'
 export * from './rank'

package/src/client/composables/lang.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { matchLocale, usePageLocale } from './lang'
+
+const data = { frontmatter: ref<Record<string, unknown>>({}), lang: ref('en') }
+vi.mock('vitepress', () => ({ useData: () => data }))
+
+describe('matchLocale', () => {
+  const available = ['en', 'vi']
+
+  it('matches exactly', () => {
+    expect(matchLocale('vi', available)).toBe('vi')
+  })
+
+  it('matches by base language and is case-insensitive', () => {
+    expect(matchLocale('vi-VN', available)).toBe('vi')
+    expect(matchLocale('EN-us', available)).toBe('en')
+  })
+
+  it('returns undefined when unsupported', () => {
+    expect(matchLocale('fr', available)).toBeUndefined()
+  })
+})
+
+describe('usePageLocale', () => {
+  const setup = () => {
+    const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {}, vi: {} } })
+    usePageLocale(i18n)
+    return i18n
+  }
+
+  it('sets the locale from front matter lang immediately', () => {
+    data.frontmatter.value = { lang: 'vi' }
+    expect(setup().global.locale.value).toBe('vi')
+  })
+
+  it('keeps a manual choice until the page lang changes', async () => {
+    data.frontmatter.value = { lang: 'vi' }
+    const i18n = setup()
+    i18n.global.locale.value = 'en'
+    data.frontmatter.value = { lang: 'vi' }
+    await nextTick()
+    expect(i18n.global.locale.value).toBe('en')
+    data.frontmatter.value = {}
+    await nextTick()
+    expect(i18n.global.locale.value).toBe('en')
+    data.frontmatter.value = { lang: 'vi' }
+    await nextTick()
+    expect(i18n.global.locale.value).toBe('vi')
+  })
+})

package/src/client/composables/lang.ts

@@ -0,0 +1,58 @@
+import { useData } from 'vitepress'
+import { type ComputedRef, computed, onMounted, watch, watchEffect } from 'vue'
+import type { Locale } from 'vue-i18n'
+
+/**
+ * Resolved language of the current page: `frontmatter.lang`, falling back to the site lang.
+ */
+export const usePageLang = (): ComputedRef<string> => {
+  const { frontmatter, lang } = useData()
+  return computed(() => {
+    const pageLang = frontmatter.value.lang
+    return typeof pageLang === 'string' && pageLang.trim() ? pageLang.trim() : lang.value
+  })
+}
+
+/**
+ * Keeps `<html lang>` in sync with the resolved page lang.
+ * VitePress resets it to the site lang on mount, so re-apply it after mount and on navigation.
+ */
+export const useHtmlLang = (): void => {
+  const pageLang = usePageLang()
+  // Registered inside onMounted so it runs after VitePress's own mount-time reset.
+  onMounted(() => {
+    watchEffect(
+      () => {
+        document.documentElement.lang = pageLang.value
+      },
+      { flush: 'post' },
+    )
+  })
+}
+
+/**
+ * Picks the available locale matching `lang` exactly or by base language (`vi-VN` -> `vi`).
+ */
+export const matchLocale = (lang: string, availableLocales: readonly Locale[]): Locale | undefined => {
+  const normalized = lang.toLowerCase()
+  return (
+    availableLocales.find((l) => l.toLowerCase() === normalized) ??
+    availableLocales.find((l) => l.toLowerCase() === normalized.split('-')[0])
+  )
+}
+
+/**
+ * Syncs the vue-i18n locale with the resolved page lang, synchronously so SSR renders the right strings.
+ * A manual `LocaleSwitcher` choice lasts until the page lang changes.
+ */
+export const usePageLocale = (i18n: { global: { locale: { value: Locale }; availableLocales: Locale[] } }): void => {
+  const pageLang = usePageLang()
+  watch(
+    pageLang,
+    (lang) => {
+      const matched = matchLocale(lang, i18n.global.availableLocales)
+      if (matched) i18n.global.locale.value = matched
+    },
+    { immediate: true },
+  )
+}

package/src/client/index.ts

@@ -1,6 +1,7 @@
 import { Icon } from '@iconify/vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import { useHtmlLang, usePageLocale } from './composables/lang'
 import Layout from './layouts/Layout.vue'
 import ArchivesPage from './pages/ArchivesPage.vue'
 import CategoriesPage from './pages/CategoriesPage.vue'
@@ -29,6 +30,10 @@ const theme: Theme = {
     app.component('ArchivesPage', ArchivesPage)
     app.use(i18n)
   },
+  setup() {
+    useHtmlLang()
+    usePageLocale(i18n)
+  },
 } satisfies Theme
 
 export * from './composables'

package/src/client/plugins/sharing/index.ts

@@ -1,4 +1,8 @@
 export declare interface SharingPluginConfig {
+  wrapperCssClass?: string
+  titleCssClass?: string
+  buttonCssClass?: string
+  title?: string
   networks?: string[]
   displayMode?: string
   buttonSize?: number
@@ -65,7 +69,9 @@ export const useUrlQueryParamsBuilder = (params: Record<string, string | undefin
   }
   const esc = encodeURIComponent
   const paramKeys = Object.keys(params)
-  if (paramKeys.length < 1) return ''
+  if (paramKeys.length < 1) {
+    return ''
+  }
 
   const s = paramKeys
     .filter((key) => params[key] !== undefined)

package/src/client/styles/base.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: rgb(59, 130, 246);
+  --color-primary-alt: rgb(29, 78, 216);
+  --color-primary-alt-dark: rgb(147, 197, 253);
+  --color-secondary: rgb(239, 68, 68);
+  --color-secondary-dark: rgb(234, 179, 8);
+}
+
+@utility component-border {
+  @apply border rounded-md border-gray-500 hover:border-secondary dark:hover:border-secondary-dark;
+}
+
+@utility link {
+  @apply no-underline hover:text-secondary dark:hover:text-secondary-dark;
+}
+
+@utility link-alt {
+  @apply text-primary-alt! dark:text-primary-alt-dark! link!;
+}
+
+:root {
+  --vp-c-brand-1: var(--color-primary);
+}
+
+.vp-doc a {
+  @apply link;
+}