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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansidev-oss/vitepress-theme-ansidev",
-  "version": "1.1.0",
+  "version": "1.3.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,49 +42,46 @@
   },
   "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.6.3",
     "@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": "^10.0.0",
-    "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.23.0",
     "typescript": "^6.0.0",
-    "vite": "^8.0.0",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
     "vitepress": "^2.0.0-alpha.16",
-    "vitest": "^5.0.5",
     "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",
-    "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "vitepress": "^2.0.0-alpha.16",
     "vue": "^3.5.28"
@@ -92,15 +92,11 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "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

@@ -1,19 +1,24 @@
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+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' } }))
+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' } },
+  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')
+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(() => {
@@ -56,14 +61,18 @@ describe('PostDate datetime', () => {
   })
 
   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-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')
+    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', () => {

package/src/client/components/PostDate.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePageLang } from '../composables/lang'
@@ -10,15 +10,20 @@ 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' }
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'UTC'
+  }
   try {
     return date.toLocaleDateString(locale, options)
   } catch {
@@ -28,14 +33,15 @@ const formatDate = (date: Date, locale: string) => {
 }
 
 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,
     iso: isValid ? date.toISOString() : undefined,
-    string: formatDate(date, pageLang.value),
+    string: formatDate(date, pageLang.value)
   }
 })
 </script>
@@ -45,7 +51,10 @@ const dateObject = computed(() => {
     <dt class="sr-only">
       {{ t('posted_on') }}
     </dt>
-    <dd class="font-medium leading-6" :class="[textSize ? `text-${textSize}` : 'text-base']">
+    <dd
+      class="font-medium leading-6"
+      :class="[textSize ? `text-${textSize}` : 'text-base']"
+    >
       <time :datetime="dateObject.iso">{{ dateObject.string }}</time>
     </dd>
   </dl>

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 v-html="post?.excerpt" />
+      <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 />