@ansidev-oss/vitepress-theme-ansidev 1.0.10 → 1.0.11

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import type { SharingComponentProps } from '..'
+import SharingButton from './SharingButton.vue'
+
+const defaultConfigs = {
+  wrapperCssClass: 'pl-4 py-4',
+  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'],
+  buttonSize: 18,
+  iconSize: 20,
+  iconStyle: 'solid',
+  displayMode: 'both',
+}
+
+const props = defineProps<SharingComponentProps>()
+
+const { theme } = useData()
+const pluginConfig = computed(() => theme.value.sharing || false)
+
+const wrapperCssClass = computed(() =>
+  pluginConfig.value && typeof pluginConfig.value.wrapperCssClass === 'string'
+    ? pluginConfig.value.wrapperCssClass
+    : defaultConfigs.wrapperCssClass,
+)
+const title = computed(() =>
+  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,
+)
+const buttonCssClass = computed(() =>
+  pluginConfig.value && typeof pluginConfig.value.buttonCssClass === 'string'
+    ? pluginConfig.value.buttonCssClass
+    : defaultConfigs.buttonCssClass,
+)
+const networks = computed(() =>
+  pluginConfig.value && Array.isArray(pluginConfig.value.networks)
+    ? pluginConfig.value.networks
+    : defaultConfigs.networks,
+)
+const buttonSize = computed(() =>
+  pluginConfig.value && Number.isInteger(pluginConfig.value.buttonSize) && pluginConfig.value.buttonSize > 0
+    ? pluginConfig.value.buttonSize
+    : defaultConfigs.buttonSize,
+)
+const iconSize = computed(() =>
+  pluginConfig.value && Number.isInteger(pluginConfig.value.iconSize) && pluginConfig.value.iconSize > 0
+    ? pluginConfig.value.iconSize
+    : defaultConfigs.iconSize,
+)
+const iconStyle = computed(() =>
+  pluginConfig.value && typeof pluginConfig.value.iconStyle === 'string'
+    ? pluginConfig.value.iconStyle
+    : defaultConfigs.iconStyle,
+)
+const displayMode = computed(() =>
+  pluginConfig.value && typeof pluginConfig.value.displayMode === 'string'
+    ? pluginConfig.value.displayMode
+    : defaultConfigs.displayMode,
+)
+</script>
+
+<template>
+  <div :class="wrapperCssClass">
+    <p :class="titleCssClass">
+      {{ title }}
+    </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" />
+      </template>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { SharingButtonComponentProps, useUrlQueryParamsBuilder } from '..'
+
+const props = withDefaults(defineProps<SharingButtonComponentProps>(), {
+  iconSize: 32,
+  displayMode: 'icon',
+})
+
+const provider = computed(() => {
+  switch (props.network) {
+    case 'email':
+      return {
+        name: 'E-mail',
+        shareBaseURL: 'mailto:',
+        icon: 'bi:envelope-fill',
+        params: { subject: props.text, body: props.url },
+        allowedParams: ['subject', 'body'],
+      }
+    case 'facebook':
+      return {
+        name: 'Facebook',
+        shareBaseURL: 'https://facebook.com/sharer/sharer.php',
+        icon: 'bi:facebook',
+        params: { u: props.url },
+        allowedParams: ['u', 'display', 'redirect_uri'],
+      }
+    case 'linkedin':
+      return {
+        name: 'LinkedIn',
+        shareBaseURL: 'https://www.linkedin.com/sharing/share-offsite',
+        icon: 'bi:linkedin',
+        params: { url: props.url },
+        allowedParams: ['url'],
+      }
+    case 'pinterest':
+      return {
+        name: 'Pinterest',
+        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'],
+      }
+    case 'reddit':
+      return {
+        name: 'Reddit',
+        shareBaseURL: 'https://www.reddit.com/submit',
+        icon: 'bi:reddit',
+        params: { title: props.text, url: props.url },
+        allowedParams: ['title', 'url'],
+      }
+    case 'telegram':
+      return {
+        name: 'Telegram',
+        shareBaseURL: 'https://telegram.me/share/url',
+        icon: 'bi:telegram',
+        params: { text: props.text, url: props.url },
+        allowedParams: ['text', 'url'],
+      }
+    // case 'tumblr':
+    //   return {
+    //     name: 'Tumblr',
+    //     shareBaseURL: 'https://www.tumblr.com/widgets/share/tool',
+    //     icon: 'bi:tumblr',
+    //     params: { posttype: 'link', title: props.text, url: props.url },
+    //     allowedParams: ['posttype', 'tags', 'title', 'content', 'caption', 'show-via', 'canonicalUrl'],
+    //   }
+    case 'twitter':
+      return {
+        name: 'Twitter',
+        shareBaseURL: 'https://twitter.com/intent/tweet',
+        icon: 'bi:twitter',
+        params: { text: props.text, url: props.url },
+        allowedParams: ['text', 'url', 'hashtag', 'via'],
+      }
+    // case 'vk':
+    //   return {
+    //     name: 'VK',
+    //     shareBaseURL: 'https://vk.com/share.php',
+    //     icon: 'vk-icon',
+    //     params: { title: props.text, url: props.url },
+    //     allowedParams: ['title', 'url'],
+    //   }
+    case 'whatsapp':
+      return {
+        name: 'WhatsApp',
+        shareBaseURL: 'whatsapp://send',
+        icon: 'bi:whatsapp',
+        params: { text: props.url },
+        allowedParams: ['text'],
+      }
+    default:
+      return {}
+  }
+})
+
+const networkName = computed(() => provider.value.name)
+const networkIcon = computed(() => provider.value.icon)
+
+const shareURL = computed(() => {
+  const url = provider.value.shareBaseURL
+  const urlQueryParams = useUrlQueryParamsBuilder(provider.value.params)
+  return `${url}${urlQueryParams}`
+})
+</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>
+</template>

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

@@ -0,0 +1,76 @@
+export declare interface SharingPluginConfig {
+  networks?: string[]
+  displayMode?: string
+  buttonSize?: number
+  iconSize?: number
+  iconStyle?: string
+}
+
+export type SharingButtonComponentProps = {
+  /**
+   * URL to share
+   * @type string
+   */
+  url: string
+  /**
+   * Share text
+   * @type string
+   */
+  text: string
+  /**
+   * Social network
+   * @type string
+   */
+  network: string
+  /**
+   * Button size
+   * @type number
+   */
+  buttonSize: number
+  /**
+   * Icon style
+   * @type string
+   */
+  iconStyle: string
+  /**
+   * Icon size
+   * @type number
+   * @default 32
+   */
+  iconSize?: number
+  /**
+   * Display mode
+   * @type string
+   * @default icon
+   */
+  displayMode?: string
+}
+
+export type SharingComponentProps = {
+  /**
+   * URL to share
+   * @type string
+   */
+  url: string
+  /**
+   * Share text
+   * @type string
+   */
+  text: 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 ''
+
+  const s = paramKeys
+    .filter((key) => params[key] !== undefined)
+    .map((key: string) => `${esc(key)}=${esc(params[key] as string)}`)
+    .join('&')
+
+  return `?${s}`
+}

package/src/client/plugins/swetrix/components/Swetrix.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import * as Swetrix from 'swetrix'
+import { onMounted } from 'vue'
+import { SwetrixOptions } from '..'
+
+// biome-ignore lint/suspicious/noExplicitAny: ignore check for this line
+declare const dataLayer: any[]
+// biome-ignore lint/suspicious/noExplicitAny: ignore check for this line
+declare const gtag: (...args: any[]) => void
+declare global {
+  interface Window {
+    dataLayer?: typeof dataLayer
+    gtag?: typeof gtag
+  }
+}
+
+const props = defineProps<{
+  swetrix: SwetrixOptions
+}>()
+
+const pluginOptions = props.swetrix
+
+let isInitialized = false
+
+function init() {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  if (!isInitialized) {
+    isInitialized = true
+    Swetrix.init(pluginOptions.id, pluginOptions.options)
+    Swetrix.trackViews()
+    Swetrix.trackErrors()
+  }
+}
+
+if (pluginOptions?.id) {
+  onMounted(init)
+}
+</script>
+
+<template />

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

@@ -0,0 +1,11 @@
+import type * as Swetrix from 'swetrix'
+
+export interface SwetrixOptions {
+  /**
+   * The Swetrix ID.
+   *
+   * @default process.env.VITE_SWETRIX_ID
+   */
+  id: string
+  options?: Swetrix.LibOptions
+}

package/src/client/types/index.ts

@@ -1,6 +1,9 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import type { DonationPluginConfig } from '../plugins/donation'
 import type { GoogleAnalyticsOptions } from '../plugins/google-analytics'
+import type { MediumZoomPluginConfig } from '../plugins/medium-zoom'
+import type { SharingPluginConfig } from '../plugins/sharing'
+import type { SwetrixOptions } from '../plugins/swetrix'
 
 export interface ThemeConfig extends DefaultTheme.Config {
   /**
@@ -9,12 +12,22 @@ export interface ThemeConfig extends DefaultTheme.Config {
    * @default process.env.VITE_BASE_URL
    */
   siteURL?: string
-  googleAnalytics?: GoogleAnalyticsOptions
   donation?: DonationPluginConfig
+  googleAnalytics?: GoogleAnalyticsOptions
+  mediumZoom?: MediumZoomPluginConfig
+  sharing?: SharingPluginConfig
+  swetrix?: SwetrixOptions
+  /**
+   * The footer configuration.
+   */
+  themeFooter?: DefaultTheme.Footer
 }
 
 export type { DonationPluginConfig } from '../plugins/donation'
 export type { GoogleAnalyticsOptions } from '../plugins/google-analytics'
+export type { MediumZoomPluginConfig } from '../plugins/medium-zoom'
+export type { SharingPluginConfig } from '../plugins/sharing'
+export type { SwetrixOptions } from '../plugins/swetrix'
 
 export interface Post {
   type: string

package/src/node/composables/slug.ts

@@ -1,19 +1,7 @@
+import { useSlug } from '../../shared/composables'
 import { useMarkdownFrontmatter } from './markdown'
 import type { Frontmatter, FrontmatterToString, Pattern, StringOrFrontmatterToString } from './types'
 
-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
-
 export const useSlugFromMarkdownFrontMatter = (
   pattern: Pattern,
   frontmatterKeyOrMappingFn: StringOrFrontmatterToString,
@@ -38,3 +26,5 @@ export const useSlugFromMarkdownFrontMatter = (
   // console.log(slugs)
   return slugs
 }
+
+export { useSlug, useSlugFilter } from '../../shared/composables'

package/src/node/config.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
-import { fileURLToPath, URL } from 'node:url'
-import { loadEnv } from 'vitepress'
+import type { UserConfig } from 'vitepress'
+import { loadEnv, mergeConfig } from 'vitepress'
+import type { ThemeConfig } from '../client/types'
 
 process.env.VITE_EXTRA_EXTENSIONS = 'rss'
 globalThis.__VUE_PROD_DEVTOOLS__ = process.env.NODE_ENV === 'development'
@@ -17,12 +18,12 @@ const siteURL = env.VITE_BASE_URL
  */
 
 // for local-linked development
-const deps = ['vitepress-theme-ansidev']
+const deps = ['@ansidev-oss/vitepress-theme-ansidev']
 
 /**
  * @type {import('vitepress').UserConfig}
  */
-const config = {
+const baseConfig = {
   themeConfig: {
     siteURL,
     googleAnalytics: {
@@ -65,15 +66,23 @@ const config = {
         },
       },
     },
-    resolve: {
-      alias: [
-        {
-          find: /^.*\/VPFooter\.vue$/,
-          replacement: fileURLToPath(new URL('./components/EmptyFooter.vue', import.meta.url)),
-        },
-      ],
-    },
   },
 }
 
-export default config
+/**
+ * Helper function to define theme configuration with proper typing
+ * Note: TailwindCSS plugin should be added in vite.config.ts, not here
+ */
+export function defineWithDefaultThemeConfig(config: UserConfig<ThemeConfig> = {}): UserConfig<ThemeConfig> {
+  // Rename 'footer' to 'themeFooter' to avoid conflict with VitePress built-in footer config
+  if (config.themeConfig?.footer) {
+    config.themeConfig = {
+      ...config.themeConfig,
+      themeFooter: config.themeConfig.footer,
+    }
+    delete config.themeConfig.footer
+  }
+  return mergeConfig(baseConfig, config) as UserConfig<ThemeConfig>
+}
+
+export default baseConfig

package/src/shared/composables/index.ts

@@ -0,0 +1 @@
+export * from './useSlug'