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

package/dist/client/types/index.d.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 {
     /**
      * The site URL.
@@ -8,11 +11,21 @@ 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;
     title: string;

package/dist/node/composables/index.d.ts

@@ -0,0 +1,3 @@
+export * from './markdown';
+export * from './route';
+export * from './slug';

package/dist/node/composables/markdown.d.ts

@@ -0,0 +1,2 @@
+import type { Frontmatter, Pattern } from './types';
+export declare const useMarkdownFrontmatter: (pattern: Pattern, excerptSeparator?: string) => Array<Frontmatter>;

package/dist/node/composables/route.d.ts

@@ -0,0 +1,15 @@
+import type { Pattern } from './types';
+export declare const useMarkdownFrontmatterRoute: (pattern: Pattern, frontmatterKey: string, excerptSeparator?: string) => {
+    paths(): {
+        params: {
+            slug: string;
+        };
+    }[];
+};
+export declare const useArchiveRoute: (pattern: Pattern, excerptSeparator?: string) => {
+    paths(): {
+        params: {
+            slug: string;
+        };
+    }[];
+};

package/dist/node/composables/slug.d.ts

@@ -0,0 +1,7 @@
+import type { Pattern, StringOrFrontmatterToString } from './types';
+export declare const useSlugFromMarkdownFrontMatter: (pattern: Pattern, frontmatterKeyOrMappingFn: StringOrFrontmatterToString, excerptSeparator?: string) => {
+    params: {
+        slug: string;
+    };
+}[];
+export { useSlug, useSlugFilter } from '../../shared/composables';

package/dist/node/composables/types.d.ts

@@ -0,0 +1,7 @@
+export type Pattern = string | string[];
+export type Frontmatter = Record<string, unknown> & {
+    date?: string;
+    excerpt?: string;
+};
+export type FrontmatterToString = (frontmatter: Frontmatter) => string;
+export type StringOrFrontmatterToString = string | FrontmatterToString;

package/dist/node/composables.d.mts

@@ -18,12 +18,14 @@ declare const useArchiveRoute: (pattern: Pattern, excerptSeparator?: string) =>
   paths(): any;
 };
 //#endregion
-//#region src/node/composables/slug.d.ts
+//#region src/shared/composables/useSlug.d.ts
 declare const useSlug: (str: string) => string;
 declare const useSlugFilter: (slug: string) => (str: string) => boolean;
+//#endregion
+//#region src/node/composables/slug.d.ts
 declare const useSlugFromMarkdownFrontMatter: (pattern: Pattern, frontmatterKeyOrMappingFn: StringOrFrontmatterToString, excerptSeparator?: string) => {
   params: {
-    slug: string;
+    slug: any;
   };
 }[];
 //#endregion

package/dist/node/composables.mjs

@@ -18,11 +18,14 @@ const useMarkdownFrontmatter = (pattern, excerptSeparator = "---") => {
 };
 
 //#endregion
-//#region src/node/composables/slug.ts
+//#region src/shared/composables/useSlug.ts
 const useSlug = (str) => {
 	return str.replace(/#/, "-sharp-").replace(/\./, "-dot-").replace(/-$/, "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 };
 const useSlugFilter = (slug) => (str) => useSlug(str) === slug;
+
+//#endregion
+//#region src/node/composables/slug.ts
 const useSlugFromMarkdownFrontMatter = (pattern, frontmatterKeyOrMappingFn, excerptSeparator = "---") => {
 	const frontMatters = useMarkdownFrontmatter(pattern, excerptSeparator);
 	const _frontmatterMappingFn = typeof frontmatterKeyOrMappingFn === "string" ? (frontMatter) => frontMatter[frontmatterKeyOrMappingFn] : frontmatterKeyOrMappingFn;

package/dist/node/config.d.mts

@@ -1,8 +1,91 @@
+import { UserConfig } from "vitepress";
+import { DefaultTheme } from "vitepress/theme";
+import * as Swetrix from "swetrix";
+
+//#region src/client/plugins/donation/index.d.ts
+declare interface DonationPluginConfig {
+  buymeacoffee?: string;
+  kofi?: string;
+  paypal?: string;
+  custom?: {
+    [key: string]: CustomDonationConfig;
+  };
+}
+declare interface CustomDonationBaseConfig {
+  donationBaseUrl: string;
+  donationButtonImage: string;
+  donationButtonStyle?: Record<string, string>;
+}
+declare interface CustomDonationConfig extends CustomDonationBaseConfig {
+  donationId: string;
+}
+//#endregion
+//#region src/client/plugins/google-analytics/index.d.ts
+interface GoogleAnalyticsOptions {
+  /**
+   * The Google Analytics ID.
+   *
+   * @default process.env.VITE_GA_ID
+   */
+  id: string;
+}
+//#endregion
+//#region src/client/plugins/medium-zoom/index.d.ts
+declare module 'medium-zoom' {
+  interface Zoom {
+    refresh: (selector?: string) => void;
+  }
+}
+type MediumZoomPluginConfig = {
+  selector: string;
+  zoomOptions?: string;
+  delay?: number;
+};
+//#endregion
+//#region src/client/plugins/sharing/index.d.ts
+declare interface SharingPluginConfig {
+  networks?: string[];
+  displayMode?: string;
+  buttonSize?: number;
+  iconSize?: number;
+  iconStyle?: string;
+}
+//#endregion
+//#region src/client/plugins/swetrix/index.d.ts
+interface SwetrixOptions {
+  /**
+   * The Swetrix ID.
+   *
+   * @default process.env.VITE_SWETRIX_ID
+   */
+  id: string;
+  options?: Swetrix.LibOptions;
+}
+//#endregion
+//#region src/client/types/index.d.ts
+interface ThemeConfig extends DefaultTheme.Config {
+  /**
+   * The site URL.
+   *
+   * @default process.env.VITE_BASE_URL
+   */
+  siteURL?: string;
+  donation?: DonationPluginConfig;
+  googleAnalytics?: GoogleAnalyticsOptions;
+  mediumZoom?: MediumZoomPluginConfig;
+  sharing?: SharingPluginConfig;
+  swetrix?: SwetrixOptions;
+  /**
+   * The footer configuration.
+   */
+  themeFooter?: DefaultTheme.Footer;
+}
+//#endregion
 //#region src/node/config.d.ts
 /**
  * @type {import('vitepress').UserConfig}
  */
-declare const config: {
+declare const baseConfig: {
   themeConfig: {
     siteURL: string;
     googleAnalytics: {
@@ -34,13 +117,12 @@ declare const config: {
         };
       };
     };
-    resolve: {
-      alias: {
-        find: RegExp;
-        replacement: string;
-      }[];
-    };
   };
 };
+/**
+ * Helper function to define theme configuration with proper typing
+ * Note: TailwindCSS plugin should be added in vite.config.ts, not here
+ */
+declare function defineWithDefaultThemeConfig(config?: UserConfig<ThemeConfig>): UserConfig<ThemeConfig>;
 //#endregion
-export { config as default };
+export { baseConfig as default, defineWithDefaultThemeConfig };

package/dist/node/config.d.ts

@@ -0,0 +1,45 @@
+import type { UserConfig } from 'vitepress';
+import type { ThemeConfig } from '../client/types';
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+declare const baseConfig: {
+    themeConfig: {
+        siteURL: string;
+        googleAnalytics: {
+            id: string;
+        };
+        search: {
+            provider: string;
+            options: {
+                /**
+                 * @param {string} src
+                 * @param {import('vitepress').MarkdownEnv} env
+                 * @param {import('markdown-it')} md
+                 */
+                _render(src: any, env: any, md: any): Promise<string>;
+            };
+        };
+    };
+    vite: {
+        ssr: {
+            noExternal: string[];
+        };
+        optimizeDeps: {
+            exclude: string[];
+        };
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: string;
+                };
+            };
+        };
+    };
+};
+/**
+ * Helper function to define theme configuration with proper typing
+ * Note: TailwindCSS plugin should be added in vite.config.ts, not here
+ */
+export declare function defineWithDefaultThemeConfig(config?: UserConfig<ThemeConfig>): UserConfig<ThemeConfig>;
+export default baseConfig;

package/dist/node/config.mjs

@@ -1,5 +1,4 @@
-import { URL, fileURLToPath } from "node:url";
-import { loadEnv } from "vitepress";
+import { loadEnv, mergeConfig } from "vitepress";
 
 //#region src/node/config.ts
 process.env.VITE_EXTRA_EXTENSIONS = "rss";
@@ -12,11 +11,11 @@ const siteURL = env.VITE_BASE_URL;
 *
 * It runs in Node.js.
 */
-const deps = ["vitepress-theme-ansidev"];
+const deps = ["@ansidev-oss/vitepress-theme-ansidev"];
 /**
 * @type {import('vitepress').UserConfig}
 */
-const config = {
+const baseConfig = {
 	themeConfig: {
 		siteURL,
 		googleAnalytics: { id: env.VITE_GA_ID },
@@ -35,13 +34,23 @@ const config = {
 	vite: {
 		ssr: { noExternal: deps },
 		optimizeDeps: { exclude: deps },
-		css: { preprocessorOptions: { scss: { api: "modern-compiler" } } },
-		resolve: { alias: [{
-			find: /^.*\/VPFooter\.vue$/,
-			replacement: fileURLToPath(new URL("./components/EmptyFooter.vue", import.meta.url))
-		}] }
+		css: { preprocessorOptions: { scss: { api: "modern-compiler" } } }
 	}
 };
+/**
+* Helper function to define theme configuration with proper typing
+* Note: TailwindCSS plugin should be added in vite.config.ts, not here
+*/
+function defineWithDefaultThemeConfig(config = {}) {
+	if (config.themeConfig?.footer) {
+		config.themeConfig = {
+			...config.themeConfig,
+			themeFooter: config.themeConfig.footer
+		};
+		delete config.themeConfig.footer;
+	}
+	return mergeConfig(baseConfig, config);
+}
 
 //#endregion
-export { config as default };
+export { baseConfig as default, defineWithDefaultThemeConfig };

package/dist/shared/composables/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansidev-oss/vitepress-theme-ansidev",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "The VitePress theme for ansidev's blog",
   "type": "module",
   "main": "dist/node/index.js",
@@ -55,12 +55,15 @@
     "@types/node": "^25.2.3",
     "@vitejs/plugin-vue": "^6.0.4",
     "autoprefixer": "^10.4.24",
+    "concurrently": "^9.2.1",
     "glob": "^13.0.5",
     "gray-matter": "^4.0.3",
+    "medium-zoom": "^1.1.0",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
     "rollup-plugin-copy": "^3.5.0",
+    "swetrix": "^4.1.0",
     "tailwindcss": "^4.1.18",
     "ts-node": "^10.9.2",
     "tsdown": "^0.20.3",
@@ -71,6 +74,9 @@
     "vue-tsc": "^3.2.4"
   },
   "peerDependencies": {
+    "@iconify/vue": "^5.0.0",
+    "medium-zoom": "^1.1.0",
+    "swetrix": "^4.1.0",
     "vitepress": "^2.0.0-alpha.16",
     "vue": "^3.5.28"
   },
@@ -78,10 +84,12 @@
     "typecheck": "tsc --noEmit",
     "lint:check": "biome check",
     "lint": "biome check --write",
-    "dev": "vite build --watch",
+    "dev:client": "vite build --watch",
+    "dev:node": "tsdown --watch",
+    "dev": "concurrently --kill-others \"pnpm dev:client\" \"pnpm dev:node\"",
     "clean": "rimraf dist",
     "build:client": "vite build && tsc --emitDeclarationOnly",
     "build:node": "tsdown",
-    "build": "pnpm clean && pnpm build:client && pnpm build:node"
+    "build": "pnpm clean && concurrently \"pnpm build:client\" \"pnpm build:node\""
   }
 }

package/src/client/components/DonationWidget.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { defineAsyncComponent } from 'vue'
+
+const { theme } = useData()
+
+const props = defineProps<{
+  direction?: 'horizontal' | 'vertical'
+}>()
+
+const directionCssClass = props.direction === 'vertical' ? 'space-y-4' : 'space-x-4'
+
+const Donation = theme.value.donation
+  ? defineAsyncComponent(() => import('../plugins/donation/components/Donation.vue'))
+  : () => null
+</script>
+
+<template>
+  <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

@@ -2,44 +2,44 @@
 import { useData } from 'vitepress'
 import { useLayout } from 'vitepress/theme'
 import { computed, defineAsyncComponent } from 'vue'
+import DonationWidget from './DonationWidget.vue'
 
 const { theme, frontmatter } = useData()
-const { hasSidebar } = useLayout()
+const { hasSidebar, hasAside } = useLayout()
 
 const copyright = computed(() => {
-  return typeof theme.value.footer.copyright === 'string'
-    ? theme.value.footer.copyright.replace(/#\{present\}/g, new Date().getFullYear().toString())
-    : theme.value.footer.copyright
+  return typeof theme.value.themeFooter.copyright === 'string'
+    ? 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'))
   : () => null
 
-const Donation = theme.value.donation
-  ? defineAsyncComponent(() => import('../plugins/donation/components/Donation.vue'))
+const Swetrix = theme.value.swetrix
+  ? defineAsyncComponent(() => import('../plugins/swetrix/components/Swetrix.vue'))
   : () => null
 </script>
 
 <template>
-  <div class="flex flex-wrap space-x-4 py-4 items-center justify-center">
-    <Donation :donation="theme.donation" />
-  </div>
+  <DonationWidget v-if="!hasAside" direction="horizontal" />
   <footer
-    v-if="theme.footer && frontmatter.footer !== false"
+    v-if="theme.themeFooter && frontmatter.themeFooter !== false"
     class="VPFooter"
     :class="{ 'has-sidebar': hasSidebar }"
   >
     <div class="container">
       <p
-        v-if="theme.footer.message"
+        v-if="theme.themeFooter.message"
         class="message"
-        v-html="theme.footer.message"
+        v-html="theme.themeFooter.message"
       ></p>
       <p v-if="copyright" class="copyright" v-html="copyright"></p>
     </div>
   </footer>
   <GoogleAnalytics :google-analytics="theme.googleAnalytics" />
+  <Swetrix :swetrix="theme.swetrix" />
 </template>
 
 <style scoped>

package/src/client/components/SharingWidget.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { defineAsyncComponent } from 'vue'
+
+const route = useRoute()
+
+const { theme, frontmatter, page } = useData()
+
+const Sharing = theme.value.sharing
+  ? defineAsyncComponent(() => import('../plugins/sharing/components/Sharing.vue'))
+  : () => null
+
+const postURL = new URL(route.path, theme.value.siteURL).href
+const postTitle = frontmatter.value.title || page.value.title
+</script>
+
+<template>
+  <Sharing :url="postURL" :text="postTitle" />
+</template>

package/src/client/composables/index.ts

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

package/src/client/index.ts

@@ -31,13 +31,7 @@ const theme: Theme = {
   },
 } satisfies Theme
 
-export type {
-  DonationPluginConfig,
-  GoogleAnalyticsOptions,
-  Post,
-  PostDate,
-  Project,
-  ThemeConfig,
-} from './types'
+export * from './composables'
+export type * from './types'
 
 export default theme

package/src/client/layouts/Layout.vue

@@ -1,11 +1,37 @@
 <script setup lang='ts'>
-import { useData } from 'vitepress'
+import { useData, useRoute } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import { onMounted, watch } from 'vue'
+import DonationWidget from '../components/DonationWidget.vue'
 import Footer from '../components/Footer.vue'
 import LocaleSwitcher from '../components/LocaleSwitcher.vue'
+import SharingWidget from '../components/SharingWidget.vue'
+import type { MediumZoomPluginConfig } from '../plugins/medium-zoom'
 
 const { Layout: DefaultLayout } = DefaultTheme
-const { frontmatter } = useData()
+const { frontmatter, theme } = useData()
+const route = useRoute()
+let mediumZoomModule = null
+if (theme.value.mediumZoom) {
+  mediumZoomModule = import('../plugins/medium-zoom')
+}
+
+const initMediumZoom = async () => {
+  if (mediumZoomModule) {
+    const { useMediumZoom } = await mediumZoomModule
+    useMediumZoom(theme.value.mediumZoom as MediumZoomPluginConfig)
+  }
+}
+
+onMounted(initMediumZoom)
+watch(
+  () => route.path,
+  (newPath, oldPath) => {
+    if (newPath !== oldPath) {
+      initMediumZoom()
+    }
+  },
+)
 </script>
 
 <template>
@@ -18,8 +44,28 @@ const { frontmatter } = useData()
     <template #nav-bar-content-after>
       <LocaleSwitcher />
     </template>
+    <template #aside-outline-after>
+      <SharingWidget />
+    </template>
+    <template #aside-ads-before>
+      <DonationWidget direction="vertical" />
+    </template>
     <template #layout-bottom>
       <Footer />
     </template>
   </DefaultLayout>
 </template>
+<style lang="css">
+:root {
+  --vp-z-index-aside: 25;
+}
+.VPDoc.has-aside .aside-container {
+  z-index: var(--vp-z-index-aside);
+}
+.medium-zoom--opened .medium-zoom-overlay {
+  z-index: calc(var(--vp-z-index-aside) + 1);
+}
+.medium-zoom-image--opened {
+  z-index: calc(var(--vp-z-index-aside) + 2);
+}
+</style>

package/src/client/plugins/medium-zoom/index.ts

@@ -0,0 +1,30 @@
+import mediumZoom from 'medium-zoom'
+
+declare module 'medium-zoom' {
+  interface Zoom {
+    refresh: (selector?: string) => void
+  }
+}
+
+export type MediumZoomPluginConfig = {
+  selector: string
+  zoomOptions?: string
+  delay?: number
+}
+
+/**
+ * Inject medium zoom instance
+ */
+export const useMediumZoom = (config: MediumZoomPluginConfig): void => {
+  if (!config.selector) {
+    return
+  }
+
+  const zoom = mediumZoom(config.zoomOptions)
+  zoom.refresh = (sel = config.selector) => {
+    zoom.detach()
+    zoom.attach(sel)
+  }
+
+  setTimeout(() => zoom.refresh(config.selector), config.delay || 1000)
+}