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

package/src/client/components/PostItem.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { computed, type PropType } from 'vue'
 import { usePostDate } from '../composables'
 import type { Post } from '../types'
@@ -7,8 +7,8 @@ import TermLink from './TermLink.vue'
 const props = defineProps({
   post: {
     type: Object as PropType<Post>,
-    required: true,
-  },
+    required: true
+  }
 })
 
 const postDate = computed(() => usePostDate(props.post.date))
@@ -16,18 +16,28 @@ const postDate = computed(() => usePostDate(props.post.date))
 
 <template>
   <div class="flex p-4 component-border">
-    <div class="text-center" style="min-width: 80px;">
+    <div class="text-center" style="min-width: 80px">
       <div class="text-6xl font-bold">{{ postDate?.day }}</div>
       <div>{{ postDate?.month }}, {{ postDate?.year }}</div>
     </div>
     <div class="pl-8">
       <div class="flex flex-wrap mb-3">
-        <a class="text-2xl font-bold leading-8 tracking-tight" :href="post?.url" :title="post.title">{{ post.title }}</a>
+        <a
+          class="text-2xl font-bold leading-8 tracking-tight"
+          :href="post?.url"
+          :title="post.title"
+          >{{ post.title }}</a
+        >
       </div>
       <div class="flex flex-wrap mb-3">
-        <TermLink v-for="category in post.categories" :key="category" :text="category" basePath="/categories/" />
+        <TermLink
+          v-for="category in post.categories"
+          :key="category"
+          :text="category"
+          basePath="/categories/"
+        />
       </div>
-      <p>{{ post?.excerpt }}</p>
+      <div v-html="post?.excerpt" />
     </div>
   </div>
 </template>

package/src/client/components/PostList.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import type { PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { Post } from '../types'
@@ -8,15 +8,18 @@ defineProps({
   posts: {
     type: Object as PropType<Post[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 
 const { t } = useI18n()
 </script>
 
 <template>
-  <div v-if="posts.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+  <div
+    v-if="posts.length > 0"
+    class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4"
+  >
     <PostItem v-for="post of posts" :key="post?.url" :post="post" />
   </div>
   <p v-if="posts.length === 0">{{ t('no_post') }}</p>

package/src/client/components/ProjectCard.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { computed, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useProjectStatusStyle } from '../composables'
@@ -11,28 +11,46 @@ import TermLink from './TermLink.vue'
 const props = defineProps({
   project: {
     type: Object as PropType<Project>,
-    required: true,
-  },
+    required: true
+  }
 })
 
 const { t } = useI18n()
-const projectStatusStyles = computed(() => useProjectStatusStyle(props.project.developmentStatus))
+const projectStatusStyles = computed(() =>
+  useProjectStatusStyle(props.project.developmentStatus)
+)
 </script>
 
 <template>
   <div class="flex flex-col p-4 component-border">
     <div class="flex flex-row justify-between items-center mb-4">
-      <a :href="project.url" class="text-2xl font-bold leading-8 tracking-tight">
+      <a
+        :href="project.url"
+        class="text-2xl font-bold leading-8 tracking-tight"
+      >
         {{ project.title }}
       </a>
       <div class="flex flex-row">
-        <a v-if="project.showcaseUrl" class="mx-1 text-gray-500 transition hover:text-gray-600" target="_blank"
-          rel="noopener noreferrer" :href="project.showcaseUrl">
+        <a
+          v-if="project.showcaseUrl"
+          class="mx-1 text-gray-500 hover:text-gray-600"
+          target="_blank"
+          rel="noopener noreferrer"
+          :href="project.showcaseUrl"
+        >
           <span class="sr-only">external-link</span>
-          <Icon icon="bi:box-arrow-up-right" class="text-dark dark:text-white ml-2" />
+          <Icon
+            icon="bi:box-arrow-up-right"
+            class="text-dark dark:text-white ml-2"
+          />
         </a>
-        <a v-if="project.repositoryUrl" class="mx-1 text-gray-500 transition hover:text-gray-600" target="_blank"
-          rel="noopener noreferrer" :href="project.repositoryUrl">
+        <a
+          v-if="project.repositoryUrl"
+          class="mx-1 text-gray-500 hover:text-gray-600"
+          target="_blank"
+          rel="noopener noreferrer"
+          :href="project.repositoryUrl"
+        >
           <span class="sr-only">github</span>
           <Icon icon="bi:github" class="text-dark dark:text-white ml-2" />
         </a>
@@ -43,18 +61,28 @@ const projectStatusStyles = computed(() => useProjectStatusStyle(props.project.d
       <div class="flex flex-col justify-between">
         <div v-if="project.license" class="mb-3">
           {{ t('license') }}:
-          <Link v-if="project.licenseUrl" :href="project.licenseUrl" class="link-alt">
-          {{ project.license }}
+          <Link
+            v-if="project.licenseUrl"
+            :href="project.licenseUrl"
+            class="link-alt"
+          >
+            {{ project.license }}
           </Link>
           <span v-else>{{ project.license }}</span>
         </div>
         <div class="mb-3">
-          {{ t('development_status.title') }}: <StatusBadge v-bind="projectStatusStyles">
+          {{ t('development_status.title') }}:
+          <StatusBadge v-bind="projectStatusStyles">
             {{ $t(`development_status.${project.developmentStatus}`) }}
           </StatusBadge>
         </div>
         <div class="flex flex-wrap mb-3">
-          <TermLink v-for="tech in project.techs" :key="tech" :text="tech" basePath="/projects?tech=" />
+          <TermLink
+            v-for="tech in project.techs"
+            :key="tech"
+            :text="tech"
+            basePath="/projects?tech="
+          />
         </div>
         <PostDate :date="project.date" text-size="sm" />
       </div>

package/src/client/components/ProjectList.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import type { PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { Project } from '../types'
@@ -8,16 +8,23 @@ defineProps({
   projects: {
     type: Object as PropType<Project[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 
 const { t } = useI18n()
 </script>
 
 <template>
-  <div v-if="projects.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
-    <ProjectCard v-for="project of projects" :key="project?.url" :project="project" />
+  <div
+    v-if="projects.length > 0"
+    class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4"
+  >
+    <ProjectCard
+      v-for="project of projects"
+      :key="project?.url"
+      :project="project"
+    />
   </div>
   <p v-if="projects.length === 0">{{ t('no_post') }}</p>
 </template>

package/src/client/components/RouterLink.vue

@@ -1,12 +1,12 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { useRouter } from 'vitepress'
 
 defineProps({
   to: {
     type: String,
     required: true,
-    default: '#',
-  },
+    default: '#'
+  }
 })
 
 const router = useRouter()

package/src/client/components/SharingWidget.vue

@@ -7,7 +7,9 @@ const route = useRoute()
 const { theme, frontmatter, page } = useData()
 
 const Sharing = theme.value.sharing
-  ? defineAsyncComponent(() => import('../plugins/sharing/components/Sharing.vue'))
+  ? defineAsyncComponent(
+      () => import('../plugins/sharing/components/Sharing.vue')
+    )
   : () => null
 
 const postURL = new URL(route.path, theme.value.siteURL).href

package/src/client/components/StatusBadge.vue

@@ -1,40 +1,40 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 defineProps({
   backgroundColor: {
     type: String,
     required: false,
-    default: 'bg-blue-100',
+    default: 'bg-blue-100'
   },
   darkBackgroundColor: {
     type: String,
     required: false,
-    default: 'dark:bg-blue-800',
+    default: 'dark:bg-blue-800'
   },
   textColor: {
     type: String,
     required: false,
-    default: 'text-blue-800',
+    default: 'text-blue-800'
   },
   darkTextColor: {
     type: String,
     required: false,
-    default: 'dark:text-blue-100',
+    default: 'dark:text-blue-100'
   },
   fontSize: {
     type: String,
     required: false,
-    default: 'text-base',
+    default: 'text-base'
   },
   fontWeight: {
     type: String,
     required: false,
-    default: 'font-normal',
+    default: 'font-normal'
   },
   rounded: {
     type: Boolean,
     required: false,
-    default: true,
-  },
+    default: true
+  }
 })
 </script>
 
@@ -48,7 +48,7 @@ defineProps({
       darkTextColor,
       fontSize,
       fontWeight,
-      rounded ? 'rounded' : '',
+      rounded ? 'rounded' : ''
     ]"
   >
     <slot />

package/src/client/components/TermBadge.vue

@@ -4,25 +4,29 @@ import Link from './Link.vue'
 defineProps({
   title: {
     type: String,
-    required: true,
+    required: true
   },
   count: {
     type: Number,
-    required: true,
+    required: true
   },
   href: {
     type: String,
-    required: true,
-  },
+    required: true
+  }
 })
 </script>
 
 <template>
-  <Link :key="title" :href="href"
-    class="inline-flex items-center mt-2 mb-2 mr-2 px-5 py-2.5 text-sm font-medium text-center text-white component-border">
+  <Link
+    :key="title"
+    :href="href"
+    class="inline-flex items-center mt-2 mb-2 mr-2 px-5 py-2.5 text-sm font-medium text-center text-white component-border"
+  >
     {{ title }}
     <span
-      class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-gray-900 dark:text-white bg-gray-300 dark:bg-gray-700 p-2.5 rounded">
+      class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-gray-900 dark:text-white bg-gray-300 dark:bg-gray-700 p-2.5 rounded"
+    >
       {{ count }}
     </span>
   </Link>

package/src/client/components/TermLink.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useSlug } from '../composables'
 import RouterLink from './RouterLink.vue'
@@ -6,12 +6,12 @@ import RouterLink from './RouterLink.vue'
 const props = defineProps({
   text: {
     type: String,
-    required: true,
+    required: true
   },
   basePath: {
     type: String,
-    required: true,
-  },
+    required: true
+  }
 })
 
 const slug = computed(() => useSlug(props.text))

package/src/client/composables/date.ts

@@ -7,6 +7,6 @@ export const usePostDate: (raw: Date) => PostDate = (raw: Date) => {
     time: +date,
     day: date.toLocaleDateString('en-US', { day: 'numeric' }),
     month: date.toLocaleDateString('en-US', { month: 'short' }),
-    year: date.toLocaleDateString('en-US', { year: 'numeric' }),
+    year: date.toLocaleDateString('en-US', { year: 'numeric' })
   }
 }

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,56 @@
+import { describe, expect, it, vi } from 'vite-plus/test'
+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,65 @@
+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/composables/locale.ts

@@ -1,7 +1,10 @@
 import type { WritableComputedRef } from 'vue'
 import type { Locale } from 'vue-i18n'
 
-export const switchLocale = (availableLocales: string[], locale: WritableComputedRef<Locale>) => {
+export const switchLocale = (
+  availableLocales: string[],
+  locale: WritableComputedRef<Locale>
+) => {
   const locales = availableLocales
   locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
 }

package/src/client/composables/project.ts

@@ -6,7 +6,7 @@ export const useProjectStatusStyle = (developmentStatus: string) => {
         backgroundColor: 'bg-green-100',
         darkBackgroundColor: 'dark:bg-green-800',
         textColor: 'text-green-800',
-        darkTextColor: 'dark:text-green-100',
+        darkTextColor: 'dark:text-green-100'
       }
     case 'inactive':
       return {
@@ -14,7 +14,7 @@ export const useProjectStatusStyle = (developmentStatus: string) => {
         backgroundColor: 'bg-yellow-100',
         darkBackgroundColor: 'dark:bg-yellow-800',
         textColor: 'text-yellow-800',
-        darkTextColor: 'dark:text-yellow-100',
+        darkTextColor: 'dark:text-yellow-100'
       }
     case 'unmaintained':
       return {
@@ -22,7 +22,7 @@ export const useProjectStatusStyle = (developmentStatus: string) => {
         backgroundColor: 'bg-red-100',
         darkBackgroundColor: 'dark:bg-red-800',
         textColor: 'text-red-800',
-        darkTextColor: 'dark:text-red-100',
+        darkTextColor: 'dark:text-red-100'
       }
     default:
       return {}

package/src/client/composables/rank.ts

@@ -4,10 +4,13 @@ export const useRank = <T extends string>(arr: T[]): Record<T, number> => {
       acc[item] = (acc[item] || 0) + 1 // Increment the count if the key exists, otherwise initialize to 1
       return acc
     },
-    {} as Record<T, number>,
+    {} as Record<T, number>
   )
 
   const entries = Object.entries(rank) as [T, number][]
 
-  return Object.fromEntries(entries.sort(([, a], [, b]) => b - a)) as Record<T, number>
+  return Object.fromEntries(entries.sort(([, a], [, b]) => b - a)) as Record<
+    T,
+    number
+  >
 }

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/layouts/Layout.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { useData, useRoute } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { onMounted, watch } from 'vue'
@@ -30,7 +30,7 @@ watch(
     if (newPath !== oldPath) {
       initMediumZoom()
     }
-  },
+  }
 )
 </script>
 

package/src/client/pages/ArchivesPage.vue

@@ -9,26 +9,31 @@ const props = defineProps({
   posts: {
     type: Object as PropType<Post[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 
 const { t } = useI18n()
 
 const totalPostsByYears = computed(() =>
-  useRank(props.posts.flatMap((post) => new Date(post.date).getFullYear().toString())),
+  useRank(
+    props.posts.flatMap((post) => new Date(post.date).getFullYear().toString())
+  )
 )
 const sortedYearDesc = computed(() =>
   Object.keys(totalPostsByYears.value)
     .map((str) => Number(str))
-    .reverse(),
+    .reverse()
 )
 </script>
 
 <template>
   <Page :title="t('archives')">
     <div class="flex flex-wrap pt-4">
-      <div v-if="Object.keys(sortedYearDesc).length === 0" class="mt-2 mb-2 mr-5">
+      <div
+        v-if="Object.keys(sortedYearDesc).length === 0"
+        class="mt-2 mb-2 mr-5"
+      >
         {{ t('no_archive') }}
       </div>
       <TermBadge

package/src/client/pages/CategoriesPage.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { computed, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import TermBadge from '../components/TermBadge.vue'
@@ -9,13 +9,15 @@ const props = defineProps({
   posts: {
     type: Object as PropType<Post[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 
 const { t } = useI18n()
 
-const categories = computed(() => useRank(props.posts.flatMap((post) => post.categories)))
+const categories = computed(() =>
+  useRank(props.posts.flatMap((post) => post.categories))
+)
 </script>
 
 <template>
@@ -24,7 +26,13 @@ const categories = computed(() => useRank(props.posts.flatMap((post) => post.cat
       <div v-if="Object.keys(categories).length === 0" class="mt-2 mb-2 mr-5">
         {{ t('no_category') }}
       </div>
-      <TermBadge v-for="(count, category) in categories" :key="category" :title="category" :count="count" :href="`/categories/${useSlug(category)}`" />
+      <TermBadge
+        v-for="(count, category) in categories"
+        :key="category"
+        :title="category"
+        :count="count"
+        :href="`/categories/${useSlug(category)}`"
+      />
     </div>
   </Page>
 </template>