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

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>

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

@@ -5,7 +5,7 @@ import { SharingButtonComponentProps, useUrlQueryParamsBuilder } from '..'
 
 const props = withDefaults(defineProps<SharingButtonComponentProps>(), {
   iconSize: 32,
-  displayMode: 'icon',
+  displayMode: 'icon'
 })
 
 const provider = computed(() => {
@@ -16,7 +16,7 @@ const provider = computed(() => {
         shareBaseURL: 'mailto:',
         icon: 'bi:envelope-fill',
         params: { subject: props.text, body: props.url },
-        allowedParams: ['subject', 'body'],
+        allowedParams: ['subject', 'body']
       }
     case 'facebook':
       return {
@@ -24,7 +24,7 @@ const provider = computed(() => {
         shareBaseURL: 'https://facebook.com/sharer/sharer.php',
         icon: 'bi:facebook',
         params: { u: props.url },
-        allowedParams: ['u', 'display', 'redirect_uri'],
+        allowedParams: ['u', 'display', 'redirect_uri']
       }
     case 'linkedin':
       return {
@@ -32,7 +32,7 @@ const provider = computed(() => {
         shareBaseURL: 'https://www.linkedin.com/sharing/share-offsite',
         icon: 'bi:linkedin',
         params: { url: props.url },
-        allowedParams: ['url'],
+        allowedParams: ['url']
       }
     case 'pinterest':
       return {
@@ -40,7 +40,15 @@ const provider = computed(() => {
         shareBaseURL: 'https://pinterest.com/pin/create/button',
         icon: 'bi:pinterest',
         params: { posttype: 'link', title: props.text, url: props.url },
-        allowedParams: ['posttype', 'tags', 'title', 'content', 'caption', 'show-via', 'canonicalUrl'],
+        allowedParams: [
+          'posttype',
+          'tags',
+          'title',
+          'content',
+          'caption',
+          'show-via',
+          'canonicalUrl'
+        ]
       }
     case 'reddit':
       return {
@@ -48,7 +56,7 @@ const provider = computed(() => {
         shareBaseURL: 'https://www.reddit.com/submit',
         icon: 'bi:reddit',
         params: { title: props.text, url: props.url },
-        allowedParams: ['title', 'url'],
+        allowedParams: ['title', 'url']
       }
     case 'telegram':
       return {
@@ -56,7 +64,7 @@ const provider = computed(() => {
         shareBaseURL: 'https://telegram.me/share/url',
         icon: 'bi:telegram',
         params: { text: props.text, url: props.url },
-        allowedParams: ['text', 'url'],
+        allowedParams: ['text', 'url']
       }
     // case 'tumblr':
     //   return {
@@ -72,7 +80,7 @@ const provider = computed(() => {
         shareBaseURL: 'https://twitter.com/intent/tweet',
         icon: 'bi:twitter',
         params: { text: props.text, url: props.url },
-        allowedParams: ['text', 'url', 'hashtag', 'via'],
+        allowedParams: ['text', 'url', 'hashtag', 'via']
       }
     // case 'vk':
     //   return {
@@ -88,7 +96,7 @@ const provider = computed(() => {
         shareBaseURL: 'whatsapp://send',
         icon: 'bi:whatsapp',
         params: { text: props.url },
-        allowedParams: ['text'],
+        allowedParams: ['text']
       }
     default:
       return {}
@@ -106,10 +114,22 @@ const shareURL = computed(() => {
 </script>
 
 <template>
-  <a :href="shareURL" target="_blank" rel="noopener" :aria-label="networkName"
-    style="padding-left: 0.25rem; padding-right: 0.25rem;">
-    <Icon v-if="['icon', 'both'].includes(props.displayMode)" :icon="networkIcon" :width="iconSize" :height="iconSize"
-      class="fill-current text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400" />
-    <template v-if="['text', 'both'].includes(props.displayMode)">&nbsp;{{ networkName }}</template>
+  <a
+    :href="shareURL"
+    target="_blank"
+    rel="noopener"
+    :aria-label="networkName"
+    style="padding-left: 0.25rem; padding-right: 0.25rem"
+  >
+    <Icon
+      v-if="['icon', 'both'].includes(props.displayMode)"
+      :icon="networkIcon"
+      :width="iconSize"
+      :height="iconSize"
+      class="fill-current text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400"
+    />
+    <template v-if="['text', 'both'].includes(props.displayMode)"
+      >&nbsp;{{ networkName }}</template
+    >
   </a>
 </template>

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

@@ -63,13 +63,17 @@ export type SharingComponentProps = {
   text: string
 }
 
-export const useUrlQueryParamsBuilder = (params: Record<string, string | undefined> | undefined): string => {
+export const useUrlQueryParamsBuilder = (
+  params: Record<string, string | undefined> | undefined
+): string => {
   if (!params) {
     return ''
   }
   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;
+}