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

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/lang.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 import { nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 import { matchLocale, usePageLocale } from './lang'
@@ -25,7 +25,11 @@ describe('matchLocale', () => {
 
 describe('usePageLocale', () => {
   const setup = () => {
-    const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {}, vi: {} } })
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: {}, vi: {} }
+    })
     usePageLocale(i18n)
     return i18n
   }

package/src/client/composables/lang.ts

@@ -9,7 +9,9 @@ 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
+    return typeof pageLang === 'string' && pageLang.trim()
+      ? pageLang.trim()
+      : lang.value
   })
 }
 
@@ -25,7 +27,7 @@ export const useHtmlLang = (): void => {
       () => {
         document.documentElement.lang = pageLang.value
       },
-      { flush: 'post' },
+      { flush: 'post' }
     )
   })
 }
@@ -33,7 +35,10 @@ export const useHtmlLang = (): void => {
 /**
  * Picks the available locale matching `lang` exactly or by base language (`vi-VN` -> `vi`).
  */
-export const matchLocale = (lang: string, availableLocales: readonly Locale[]): Locale | undefined => {
+export const matchLocale = (
+  lang: string,
+  availableLocales: readonly Locale[]
+): Locale | undefined => {
   const normalized = lang.toLowerCase()
   return (
     availableLocales.find((l) => l.toLowerCase() === normalized) ??
@@ -45,7 +50,9 @@ export const matchLocale = (lang: string, availableLocales: readonly Locale[]):
  * 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 => {
+export const usePageLocale = (i18n: {
+  global: { locale: { value: Locale }; availableLocales: Locale[] }
+}): void => {
   const pageLang = usePageLang()
   watch(
     pageLang,
@@ -53,6 +60,6 @@ export const usePageLocale = (i18n: { global: { locale: { value: Locale }; avail
       const matched = matchLocale(lang, i18n.global.availableLocales)
       if (matched) i18n.global.locale.value = matched
     },
-    { immediate: true },
+    { 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

@@ -33,7 +33,7 @@ const theme: Theme = {
   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>

package/src/client/pages/HomePage.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'
@@ -7,8 +7,8 @@ defineProps({
   posts: {
     type: Object as PropType<Post[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 const { t } = useI18n()
 </script>

package/src/client/pages/Page.vue

@@ -1,20 +1,22 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 defineProps({
   title: {
     type: String,
     required: true,
-    default: '',
-  },
+    default: ''
+  }
 })
 </script>
 
 <template>
-  <div class="pt-6 pb-8 space-y-2 md:space-y-5">
-    <h1
-      class="mb-6 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
-    >
-      {{ title }}
-    </h1>
-  </div>
-  <slot />
+  <main class="main">
+    <div class="pt-6 pb-8 space-y-2 md:space-y-5">
+      <h1
+        class="mb-6 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
+      >
+        {{ title }}
+      </h1>
+    </div>
+    <slot />
+  </main>
 </template>

package/src/client/pages/PostsPage.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import type { PropType } from 'vue'
 import PostList from '../components/PostList.vue'
 import type { Post } from '../types'
@@ -6,13 +6,13 @@ import type { Post } from '../types'
 defineProps({
   title: {
     type: String,
-    required: true,
+    required: true
   },
   posts: {
     type: Object as PropType<Post[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 </script>
 

package/src/client/pages/ProjectsPage.vue

@@ -10,31 +10,34 @@ const props = defineProps({
   projectPage: {
     type: String,
     required: false,
-    default: '/projects.html',
+    default: '/projects.html'
   },
   projects: {
     type: Object as PropType<Project[]>,
     required: true,
-    default: [],
+    default: []
   },
   technology: {
     type: String,
-    required: false,
-  },
+    required: false
+  }
 })
 
 const { t } = useI18n()
 const tech = props.technology
 const hasTechParam = typeof tech === 'string' && tech.length > 0
-const byTech: (project: Project) => boolean = (project) => !hasTechParam || project.techs.some(useSlugFilter(tech))
+const byTech: (project: Project) => boolean = (project) =>
+  !hasTechParam || project.techs.some(useSlugFilter(tech))
 const projectsByTech = computed(() => props.projects.filter(byTech))
 const technologies = computed(() => {
-  const uniqueTechnologies = [...new Set(props.projects.flatMap((project) => project.techs))]
+  const uniqueTechnologies = [
+    ...new Set(props.projects.flatMap((project) => project.techs))
+  ]
   return uniqueTechnologies
     .map((name) => ({
       name,
       slug: useSlug(name),
-      selected: hasTechParam && useSlug(name) === tech,
+      selected: hasTechParam && useSlug(name) === tech
     }))
     .sort((a, b) => (b.selected === a.selected ? 0 : b.selected ? 1 : -1))
 })

package/src/client/pages/TagsPage.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,8 +9,8 @@ const props = defineProps({
   posts: {
     type: Object as PropType<Post[]>,
     required: true,
-    default: [],
-  },
+    default: []
+  }
 })
 
 const { t } = useI18n()
@@ -24,7 +24,13 @@ const tags = computed(() => useRank(props.posts.flatMap((post) => post.tags)))
       <div v-if="Object.keys(tags).length === 0" class="mt-2 mb-2 mr-5">
         {{ t('no_tag') }}
       </div>
-      <TermBadge v-for="(count, tag) in tags" :key="tag" :title="tag" :count="count" :href="`/tags/${useSlug(tag)}`" />
+      <TermBadge
+        v-for="(count, tag) in tags"
+        :key="tag"
+        :title="tag"
+        :count="count"
+        :href="`/tags/${useSlug(tag)}`"
+      />
     </div>
   </Page>
 </template>

package/src/client/plugins/donation/components/Donation.vue

@@ -17,15 +17,17 @@ const computedDonationConfig = computed(() => {
     if (donationPlatform === 'custom') {
       continue
     }
-    const donationId: string = donationConfigs[donationPlatform as keyof typeof donationConfigs] as string
+    const donationId: string = donationConfigs[
+      donationPlatform as keyof typeof donationConfigs
+    ] as string
     donationConfig[donationPlatform] = {
       ...supportedDonationPlatforms[donationPlatform],
-      donationId,
+      donationId
     }
   }
   return {
     ...donationConfig,
-    ...donationConfigs.custom,
+    ...donationConfigs.custom
   }
 })
 </script>

package/src/client/plugins/donation/components/DonationButton.vue

@@ -8,7 +8,9 @@ interface DonationButtonProps extends CustomDonationConfig {
 
 const props = defineProps<DonationButtonProps>()
 
-const donationUrl = computed(() => new URL(props.donationId, props.donationBaseUrl).toString())
+const donationUrl = computed(() =>
+  new URL(props.donationId, props.donationBaseUrl).toString()
+)
 </script>
 
 <template>

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

@@ -22,21 +22,24 @@ export const supportedDonationPlatforms: {
 } = {
   buymeacoffee: {
     donationBaseUrl: 'https://buymeacoffee.com',
-    donationButtonImage: 'https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png',
+    donationButtonImage:
+      'https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png',
     donationButtonStyle: {
       height: '60px !important',
-      width: '217px !important',
-    },
+      width: '217px !important'
+    }
   },
   kofi: {
     donationBaseUrl: 'https://ko-fi.com',
-    donationButtonImage: 'https://storage.ko-fi.com/cdn/brandasset/kofi_bg_tag_white.png',
+    donationButtonImage:
+      'https://storage.ko-fi.com/cdn/brandasset/kofi_bg_tag_white.png',
     donationButtonStyle: {
-      height: '60px !important',
-    },
+      height: '60px !important'
+    }
   },
   paypal: {
     donationBaseUrl: 'https://paypal.me',
-    donationButtonImage: 'https://paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
-  },
+    donationButtonImage:
+      'https://paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif'
+  }
 }

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

@@ -8,6 +8,6 @@ export default createI18n({
   locale: 'en',
   messages: {
     en,
-    vi,
-  },
+    vi
+  }
 })

package/src/client/plugins/sharing/components/Sharing.vue

@@ -9,11 +9,22 @@ const defaultConfigs = {
   titleCssClass: 'text-sm/[32px] font-semibold mb-2',
   buttonCssClass: 'flex flex-wrap space-x-1',
   title: 'Share',
-  networks: ['email', 'facebook', 'twitter', 'telegram', 'reddit', 'linkedin', 'whatsapp', 'pinterest', 'tumblr', 'vk'],
+  networks: [
+    'email',
+    'facebook',
+    'twitter',
+    'telegram',
+    'reddit',
+    'linkedin',
+    'whatsapp',
+    'pinterest',
+    'tumblr',
+    'vk'
+  ],
   buttonSize: 18,
   iconSize: 20,
   iconStyle: 'solid',
-  displayMode: 'both',
+  displayMode: 'both'
 }
 
 const props = defineProps<SharingComponentProps>()
@@ -24,45 +35,51 @@ const pluginConfig = computed(() => theme.value.sharing || false)
 const wrapperCssClass = computed(() =>
   pluginConfig.value && typeof pluginConfig.value.wrapperCssClass === 'string'
     ? pluginConfig.value.wrapperCssClass
-    : defaultConfigs.wrapperCssClass,
+    : defaultConfigs.wrapperCssClass
 )
 const title = computed(() =>
-  pluginConfig.value && typeof pluginConfig.value.title === 'string' ? pluginConfig.value.title : defaultConfigs.title,
+  pluginConfig.value && typeof pluginConfig.value.title === 'string'
+    ? pluginConfig.value.title
+    : defaultConfigs.title
 )
 const titleCssClass = computed(() =>
   pluginConfig.value && typeof pluginConfig.value.titleCssClass === 'string'
     ? pluginConfig.value.titleCssClass
-    : defaultConfigs.titleCssClass,
+    : defaultConfigs.titleCssClass
 )
 const buttonCssClass = computed(() =>
   pluginConfig.value && typeof pluginConfig.value.buttonCssClass === 'string'
     ? pluginConfig.value.buttonCssClass
-    : defaultConfigs.buttonCssClass,
+    : defaultConfigs.buttonCssClass
 )
 const networks = computed(() =>
   pluginConfig.value && Array.isArray(pluginConfig.value.networks)
     ? pluginConfig.value.networks
-    : defaultConfigs.networks,
+    : defaultConfigs.networks
 )
 const buttonSize = computed(() =>
-  pluginConfig.value && Number.isInteger(pluginConfig.value.buttonSize) && pluginConfig.value.buttonSize > 0
+  pluginConfig.value &&
+  Number.isInteger(pluginConfig.value.buttonSize) &&
+  pluginConfig.value.buttonSize > 0
     ? pluginConfig.value.buttonSize
-    : defaultConfigs.buttonSize,
+    : defaultConfigs.buttonSize
 )
 const iconSize = computed(() =>
-  pluginConfig.value && Number.isInteger(pluginConfig.value.iconSize) && pluginConfig.value.iconSize > 0
+  pluginConfig.value &&
+  Number.isInteger(pluginConfig.value.iconSize) &&
+  pluginConfig.value.iconSize > 0
     ? pluginConfig.value.iconSize
-    : defaultConfigs.iconSize,
+    : defaultConfigs.iconSize
 )
 const iconStyle = computed(() =>
   pluginConfig.value && typeof pluginConfig.value.iconStyle === 'string'
     ? pluginConfig.value.iconStyle
-    : defaultConfigs.iconStyle,
+    : defaultConfigs.iconStyle
 )
 const displayMode = computed(() =>
   pluginConfig.value && typeof pluginConfig.value.displayMode === 'string'
     ? pluginConfig.value.displayMode
-    : defaultConfigs.displayMode,
+    : defaultConfigs.displayMode
 )
 </script>
 
@@ -73,8 +90,15 @@ const displayMode = computed(() =>
     </p>
     <div :class="buttonCssClass">
       <template v-for="network in networks" :key="network">
-        <SharingButton :url="props.url" :text="props.text" :network="network" :button-size="buttonSize"
-          :icon-size="iconSize" :icon-style="iconStyle" :display-mode="displayMode" />
+        <SharingButton
+          :url="props.url"
+          :text="props.text"
+          :network="network"
+          :button-size="buttonSize"
+          :icon-size="iconSize"
+          :icon-style="iconStyle"
+          :display-mode="displayMode"
+        />
       </template>
     </div>
   </div>