@ansidev-oss/vitepress-theme-ansidev 1.0.6

package/src/client/components/RouterLink.vue

@@ -0,0 +1,19 @@
+<script setup lang='ts'>
+import { useRouter } from 'vitepress'
+
+defineProps({
+  to: {
+    type: String,
+    required: true,
+    default: '#',
+  },
+})
+
+const router = useRouter()
+</script>
+
+<template>
+  <a :href="to" @click="router.go(to)" v-bind="$attrs">
+    <slot />
+  </a>
+</template>

package/src/client/components/StatusBadge.vue

@@ -0,0 +1,56 @@
+<script setup lang='ts'>
+defineProps({
+  backgroundColor: {
+    type: String,
+    required: false,
+    default: 'bg-blue-100',
+  },
+  darkBackgroundColor: {
+    type: String,
+    required: false,
+    default: 'dark:bg-blue-800',
+  },
+  textColor: {
+    type: String,
+    required: false,
+    default: 'text-blue-800',
+  },
+  darkTextColor: {
+    type: String,
+    required: false,
+    default: 'dark:text-blue-100',
+  },
+  fontSize: {
+    type: String,
+    required: false,
+    default: 'text-base',
+  },
+  fontWeight: {
+    type: String,
+    required: false,
+    default: 'font-normal',
+  },
+  rounded: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+})
+</script>
+
+<template>
+  <span
+    class="px-2.5 py-0.5"
+    :class="[
+      backgroundColor,
+      darkBackgroundColor,
+      textColor,
+      darkTextColor,
+      fontSize,
+      fontWeight,
+      rounded ? 'rounded' : '',
+    ]"
+  >
+    <slot />
+  </span>
+</template>

package/src/client/components/TermBadge.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Link from './Link.vue'
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+  href: {
+    type: String,
+    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">
+    {{ 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">
+      {{ count }}
+    </span>
+  </Link>
+</template>

package/src/client/components/TermLink.vue

@@ -0,0 +1,25 @@
+<script setup lang='ts'>
+import { computed } from 'vue'
+import { useSlug } from '../composables'
+import RouterLink from './RouterLink.vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  basePath: {
+    type: String,
+    required: true,
+  },
+})
+
+const slug = computed(() => useSlug(props.text))
+const link = computed(() => `${props.basePath}${slug.value}`)
+</script>
+
+<template>
+  <RouterLink :to="link" class="mr-2 text-sm font-medium uppercase link-alt">
+    {{ text }}
+  </RouterLink>
+</template>

package/src/client/composables/date.ts

@@ -0,0 +1,12 @@
+import type { PostDate } from '../types'
+
+export const usePostDate: (raw: Date) => PostDate = (raw: Date) => {
+  const date = raw instanceof Date ? raw : new Date(raw as string)
+  date.setUTCHours(12)
+  return {
+    time: +date,
+    day: date.toLocaleDateString('en-US', { day: 'numeric' }),
+    month: date.toLocaleDateString('en-US', { month: 'short' }),
+    year: date.toLocaleDateString('en-US', { year: 'numeric' }),
+  }
+}

package/src/client/composables/index.ts

@@ -0,0 +1,4 @@
+export * from './date'
+export * from './project'
+export * from './rank'
+export * from './slug'

package/src/client/composables/locale.ts

@@ -0,0 +1,7 @@
+import type { WritableComputedRef } from 'vue'
+import type { Locale } from 'vue-i18n'
+
+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

@@ -0,0 +1,30 @@
+export const useProjectStatusStyle = (developmentStatus: string) => {
+  switch (developmentStatus) {
+    case 'active':
+      return {
+        fontSize: 'text-sm',
+        backgroundColor: 'bg-green-100',
+        darkBackgroundColor: 'dark:bg-green-800',
+        textColor: 'text-green-800',
+        darkTextColor: 'dark:text-green-100',
+      }
+    case 'inactive':
+      return {
+        fontSize: 'text-sm',
+        backgroundColor: 'bg-yellow-100',
+        darkBackgroundColor: 'dark:bg-yellow-800',
+        textColor: 'text-yellow-800',
+        darkTextColor: 'dark:text-yellow-100',
+      }
+    case 'unmaintained':
+      return {
+        fontSize: 'text-sm',
+        backgroundColor: 'bg-red-100',
+        darkBackgroundColor: 'dark:bg-red-800',
+        textColor: 'text-red-800',
+        darkTextColor: 'dark:text-red-100',
+      }
+    default:
+      return {}
+  }
+}

package/src/client/composables/rank.ts

@@ -0,0 +1,13 @@
+export const useRank = <T extends string>(arr: T[]): Record<T, number> => {
+  const rank: Record<T, number> = arr.reduce(
+    (acc: Record<T, number>, item: T) => {
+      acc[item] = (acc[item] || 0) + 1 // Increment the count if the key exists, otherwise initialize to 1
+      return acc
+    },
+    {} 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>
+}

package/src/client/composables/slug.ts

@@ -0,0 +1,12 @@
+export const useSlug = (str: string) => {
+  const s = str.replace(/#/, '-sharp-').replace(/\./, '-dot-').replace(/-$/, '')
+  return s
+    .toLowerCase()
+    .normalize('NFD') // Decompose Unicode characters
+    .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
+    .replace(/đ/g, 'd') // Handle Vietnamese "đ"
+    .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with dashes
+    .replace(/^-+|-+$/g, '') // Remove leading or trailing dashes
+}
+
+export const useSlugFilter = (slug: string) => (str: string) => useSlug(str) === slug

package/src/client/index.ts

@@ -0,0 +1,43 @@
+import { Icon } from '@iconify/vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './layouts/Layout.vue'
+import ArchivesPage from './pages/ArchivesPage.vue'
+import CategoriesPage from './pages/CategoriesPage.vue'
+import HomePage from './pages/HomePage.vue'
+import Page from './pages/Page.vue'
+import PostsPage from './pages/PostsPage.vue'
+import ProjectsPage from './pages/ProjectsPage.vue'
+import TagsPage from './pages/TagsPage.vue'
+import i18n from './plugins/i18n'
+import './styles/index.css'
+import type { EnhanceAppContext } from 'vitepress'
+
+export type * from './types'
+
+const theme: Theme = {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.component('Icon', Icon)
+    app.component('Page', Page)
+    app.component('PostsPage', PostsPage)
+    app.component('HomePage', HomePage)
+    app.component('ProjectsPage', ProjectsPage)
+    app.component('CategoriesPage', CategoriesPage)
+    app.component('TagsPage', TagsPage)
+    app.component('ArchivesPage', ArchivesPage)
+    app.use(i18n)
+  },
+} satisfies Theme
+
+export type {
+  DonationPluginConfig,
+  GoogleAnalyticsOptions,
+  Post,
+  PostDate,
+  Project,
+  ThemeConfig,
+} from './types'
+
+export default theme

package/src/client/layouts/Layout.vue

@@ -0,0 +1,25 @@
+<script setup lang='ts'>
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Footer from '../components/Footer.vue'
+import LocaleSwitcher from '../components/LocaleSwitcher.vue'
+
+const { Layout: DefaultLayout } = DefaultTheme
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <DefaultLayout>
+    <template #doc-before>
+      <div class="vp-doc">
+        <h1>{{ frontmatter.title }}</h1>
+      </div>
+    </template>
+    <template #nav-bar-content-after>
+      <LocaleSwitcher />
+    </template>
+    <template #layout-bottom>
+      <Footer />
+    </template>
+  </DefaultLayout>
+</template>

package/src/client/pages/ArchivesPage.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import TermBadge from '../components/TermBadge.vue'
+import { useRank } from '../composables'
+import type { Post } from '../types'
+
+const props = defineProps({
+  posts: {
+    type: Object as PropType<Post[]>,
+    required: true,
+    default: [],
+  },
+})
+
+const { t } = useI18n()
+
+const totalPostsByYears = computed(() =>
+  useRank(props.posts.flatMap((post) => new Date(post.date).getFullYear().toString())),
+)
+const sortedYearDesc = computed(() =>
+  Object.keys(totalPostsByYears.value)
+    .map((str) => Number(str))
+    .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">
+        {{ t('no_archive') }}
+      </div>
+      <TermBadge
+        v-for="year in sortedYearDesc"
+        :key="year"
+        :title="`${year}`"
+        :count="totalPostsByYears[year]"
+        :href="`/archives/${year}`"
+      />
+    </div>
+  </Page>
+</template>

package/src/client/pages/CategoriesPage.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import TermBadge from '../components/TermBadge.vue'
+import { useRank, useSlug } from '../composables'
+import type { Post } from '../types'
+
+const props = defineProps({
+  posts: {
+    type: Object as PropType<Post[]>,
+    required: true,
+    default: [],
+  },
+})
+
+const { t } = useI18n()
+
+const categories = computed(() => useRank(props.posts.flatMap((post) => post.categories)))
+</script>
+
+<template>
+  <Page :title="t('categories')">
+    <div class="flex flex-wrap pt-4">
+      <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)}`" />
+    </div>
+  </Page>
+</template>

package/src/client/pages/HomePage.vue

@@ -0,0 +1,18 @@
+<script setup lang='ts'>
+import type { PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Post } from '../types'
+
+defineProps({
+  posts: {
+    type: Object as PropType<Post[]>,
+    required: true,
+    default: [],
+  },
+})
+const { t } = useI18n()
+</script>
+
+<template>
+  <PostsPage :title="posts.length > 0 ? t('all_posts') : ''" :posts="posts" />
+</template>

package/src/client/pages/Page.vue

@@ -0,0 +1,20 @@
+<script setup lang='ts'>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+    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 />
+</template>

package/src/client/pages/PostsPage.vue

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

package/src/client/pages/ProjectsPage.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ProjectList from '../components/ProjectList.vue'
+import { useSlug, useSlugFilter } from '../composables'
+import type { Project } from '../types'
+
+const props = defineProps({
+  projectPage: {
+    type: String,
+    required: false,
+    default: '/projects.html',
+  },
+  projects: {
+    type: Object as PropType<Project[]>,
+    required: true,
+    default: [],
+  },
+  technology: {
+    type: String,
+    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 projectsByTech = computed(() => props.projects.filter(byTech))
+const technologies = computed(() => {
+  const uniqueTechnologies = [...new Set(props.projects.flatMap((project) => project.techs))]
+  return uniqueTechnologies
+    .map((name) => ({
+      name,
+      slug: useSlug(name),
+      selected: hasTechParam && useSlug(name) === tech,
+    }))
+    .sort((a, b) => (b.selected === a.selected ? 0 : b.selected ? 1 : -1))
+})
+</script>
+
+<template>
+  <Page :title="t('my_projects')">
+    <div>
+      <p>
+        <span class="mr-2">Technologies</span>
+        <a v-if="hasTechParam" :href="projectPage">Reset</a>
+      </p>
+      <p class="flex flex-row flex-wrap">
+        <a
+          v-for="technology in technologies"
+          :class="[
+            'border rounded-md m-1 p-1',
+            technology.selected ? 'bg-primary text-white! border-primary' : ''
+          ]"
+          :href="`/projects-by-tech/${technology.slug}`"
+        >
+          {{ technology.name }}
+        </a>
+      </p>
+    </div>
+    <ProjectList :projects="projectsByTech" />
+  </Page>
+</template>

package/src/client/pages/TagsPage.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import TermBadge from '../components/TermBadge.vue'
+import { useRank, useSlug } from '../composables'
+import type { Post } from '../types'
+
+const props = defineProps({
+  posts: {
+    type: Object as PropType<Post[]>,
+    required: true,
+    default: [],
+  },
+})
+
+const { t } = useI18n()
+
+const tags = computed(() => useRank(props.posts.flatMap((post) => post.tags)))
+</script>
+
+<template>
+  <Page :title="t('tags')">
+    <div class="flex flex-wrap pt-4">
+      <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)}`" />
+    </div>
+  </Page>
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CustomDonationConfig, DonationPluginConfig } from '..'
+import { supportedDonationPlatforms } from '..'
+import DonationButton from './DonationButton.vue'
+
+const props = defineProps<{
+  donation: DonationPluginConfig
+}>()
+
+const donationConfigs = props.donation
+
+const computedDonationConfig = computed(() => {
+  const donationConfig: { [key: string]: CustomDonationConfig } = {}
+
+  for (const donationPlatform in donationConfigs) {
+    if (donationPlatform === 'custom') {
+      continue
+    }
+    const donationId: string = donationConfigs[donationPlatform as keyof typeof donationConfigs] as string
+    donationConfig[donationPlatform] = {
+      ...supportedDonationPlatforms[donationPlatform],
+      donationId,
+    }
+  }
+  return {
+    ...donationConfig,
+    ...donationConfigs.custom,
+  }
+})
+</script>
+
+<template>
+  <template
+    v-for="(donationConfig, donationPlatform) in computedDonationConfig"
+    :key="donationConfig?.name"
+  >
+    <DonationButton
+      v-bind="donationConfig"
+      :donation-platform="donationPlatform as string"
+    />
+  </template>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CustomDonationConfig } from '..'
+
+interface DonationButtonProps extends CustomDonationConfig {
+  donationPlatform: string
+}
+
+const props = defineProps<DonationButtonProps>()
+
+const donationUrl = computed(() => new URL(props.donationId, props.donationBaseUrl).toString())
+</script>
+
+<template>
+  <a :href="donationUrl" target="_blank">
+    <img
+      :src="donationButtonImage"
+      :alt="donationPlatform"
+      :style="donationButtonStyle"
+    />
+  </a>
+</template>

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

@@ -0,0 +1,42 @@
+export declare interface DonationPluginConfig {
+  buymeacoffee?: string
+  kofi?: string
+  paypal?: string
+  custom?: {
+    [key: string]: CustomDonationConfig
+  }
+}
+
+export declare interface CustomDonationBaseConfig {
+  donationBaseUrl: string
+  donationButtonImage: string
+  donationButtonStyle?: Record<string, string>
+}
+
+export declare interface CustomDonationConfig extends CustomDonationBaseConfig {
+  donationId: string
+}
+
+export const supportedDonationPlatforms: {
+  [key: string]: CustomDonationBaseConfig
+} = {
+  buymeacoffee: {
+    donationBaseUrl: 'https://buymeacoffee.com',
+    donationButtonImage: 'https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png',
+    donationButtonStyle: {
+      height: '60px !important',
+      width: '217px !important',
+    },
+  },
+  kofi: {
+    donationBaseUrl: 'https://ko-fi.com',
+    donationButtonImage: 'https://storage.ko-fi.com/cdn/brandasset/kofi_bg_tag_white.png',
+    donationButtonStyle: {
+      height: '60px !important',
+    },
+  },
+  paypal: {
+    donationBaseUrl: 'https://paypal.me',
+    donationButtonImage: 'https://paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
+  },
+}