@rspress/plugin-medium-zoom 1.42.0 → 1.42.1-canary-20240226

package/dist/index.d.ts

@@ -159,6 +159,14 @@ declare interface EditLink {
     text?: string;
 }
 
+declare interface Feature {
+    icon: string;
+    title: string;
+    details: string;
+    span?: number;
+    link?: string;
+}
+
 /**
  * The config of filter component
  */
@@ -172,6 +180,23 @@ declare interface Footer {
     message?: string;
 }
 
+declare interface FrontMatterMeta {
+    title?: string;
+    description?: string;
+    overview?: boolean;
+    pageType?: PageType;
+    features?: Feature[];
+    hero?: Hero;
+    sidebar?: boolean;
+    outline?: boolean;
+    lineNumbers?: boolean;
+    overviewHeaders?: number[];
+    titleSuffix?: string;
+    head?: [string, Record<string, string>][];
+    context?: string;
+    [key: string]: unknown;
+}
+
 declare interface Header {
     id: string;
     text: string;
@@ -179,6 +204,30 @@ declare interface Header {
     charIndex: number;
 }
 
+declare interface Hero {
+    name: string;
+    text: string;
+    tagline: string;
+    image?: {
+        src: string | {
+            dark: string;
+            light: string;
+        };
+        alt: string;
+        /**
+         * `srcset` and `sizes` are attributes of `<img>` tag. Please refer to https://mdn.io/srcset for the usage.
+         * When the value is an array, rspress will join array members with commas.
+         **/
+        sizes?: string | string[];
+        srcset?: string | string[];
+    };
+    actions: {
+        text: string;
+        link: string;
+        theme: 'brand' | 'alt';
+    }[];
+}
+
 declare interface Locale {
     lang: string;
     label: string;
@@ -310,20 +359,22 @@ declare interface Options {
  * "_foo" is the private field that won't be written to search-index.json file
  * and should not be used in the runtime (usePageData).
  */
-declare type PageIndexInfo = {
+declare interface PageIndexInfo {
     id: number;
     title: string;
     routePath: string;
     toc: Header[];
     content: string;
     _html: string;
-    frontmatter: Record<string, unknown>;
+    frontmatter: FrontMatterMeta;
     lang: string;
     version: string;
     domain: string;
     _filepath: string;
     _relativePath: string;
-};
+}
+
+declare type PageType = 'home' | 'doc' | 'custom' | '404' | 'blank';
 
 /**
  * The plugin is used to add medium-zoom to the doc site.
@@ -421,9 +472,7 @@ declare interface RspressPlugin {
     /**
      * Extend every page's data
      */
-    extendPageData?: (pageData: PageIndexInfo & {
-        [key: string]: unknown;
-    }, isProd: boolean) => void | Promise<void>;
+    extendPageData?: (pageData: PageIndexInfo, isProd: boolean) => void | Promise<void>;
     /**
      * Add custom route
      */
@@ -646,15 +695,15 @@ declare interface UserConfig<ThemeConfig = DefaultThemeConfig> {
         /**
          * Whether to enable language parity checking
          */
-        enabled: boolean;
+        enabled?: boolean;
         /**
          * Directories to include in the parity check
          */
-        include: string[];
+        include?: string[];
         /**
          * Directories to exclude from the parity check
          */
-        exclude: string[];
+        exclude?: string[];
     };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-medium-zoom",
-  "version": "1.42.0",
+  "version": "1.42.1-canary-20240226",
   "description": "A plugin for rspress to zoom images in docs.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -20,22 +20,21 @@
   "module": "./dist/node/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "medium-zoom": "1.1.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.49.2",
-    "@modern-js/tsconfig": "2.64.0",
-    "@rslib/core": "0.4.1",
+    "@rslib/core": "0.5.2",
     "@types/node": "^18.11.17",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "react": "^18.3.1",
     "typescript": "^5.5.3",
-    "@rspress/shared": "1.42.0"
+    "@rspress/shared": "1.42.1-canary-20240226",
+    "@rspress/config": "1.0.0"
   },
   "peerDependencies": {
     "@rspress/runtime": "^1.42.0"
@@ -48,7 +47,6 @@
     "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
-  "jsnext:source": "./src/index.ts",
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build -w",

package/src/components/MediumZoom.css

@@ -1,5 +0,0 @@
-/* https://github.com/francoischalifour/medium-zoom#debugging */
-.medium-zoom-overlay,
-.medium-zoom-image--opened {
-  z-index: 999;
-}

package/src/components/MediumZoom.tsx

@@ -1,29 +0,0 @@
-import { useLocation } from '@rspress/runtime';
-import mediumZoom, { type Zoom, type ZoomOptions } from 'medium-zoom';
-import { useEffect } from 'react';
-import './MediumZoom.css';
-
-interface Props {
-  selector?: string;
-  options?: ZoomOptions;
-}
-
-export default function MediumZoom(props: Props) {
-  const { pathname } = useLocation();
-  const { selector = '.rspress-doc img', options = {} } = props;
-
-  useEffect(() => {
-    let zoom: Zoom | undefined;
-    const timeout = setTimeout(() => {
-      const images = document.querySelectorAll(selector);
-      zoom = mediumZoom(images, { ...options, background: 'var(--rp-c-bg)' });
-    }, 100);
-    return () => {
-      clearTimeout(timeout);
-      zoom?.detach();
-      zoom?.close();
-    };
-  }, [pathname]);
-
-  return null;
-}

package/src/env.d.ts

@@ -1 +0,0 @@
-/// <reference types='@rslib/core/types' />

package/src/index.ts

@@ -1,25 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { type RspressPlugin, normalizePosixPath } from '@rspress/shared';
-import type { ZoomOptions } from 'medium-zoom';
-
-interface Options {
-  selector?: string;
-  options?: ZoomOptions;
-}
-
-/**
- * The plugin is used to add medium-zoom to the doc site.
- */
-export function pluginMediumZoom(options: Options = {}): RspressPlugin {
-  const __dirname = normalizePosixPath(
-    path.dirname(fileURLToPath(import.meta.url)),
-  );
-
-  return {
-    name: '@rspress/plugin-medium-zoom',
-    globalUIComponents: [
-      [path.posix.join(__dirname, '../src/components/MediumZoom.tsx'), options],
-    ],
-  };
-}