rspress-plugin-map 0.1.0

package/README.md

@@ -0,0 +1,124 @@
+# rspress-plugin-map
+
+Rspress v2 插件，用于在文章中插入交互式地图，支持 Google 地图、高德地图、百度地图、Geoq 地图和 OpenStreetMap。
+
+## 特性
+
+- 支持多种地图类型：混合地图（可切换多个图层）、Google 地图、高德地图、百度地图、Geoq 地图、OpenStreetMap
+- 支持标记点和提示文本
+- 支持自定义地图容器宽高、缩放等级、经纬度等参数
+- 使用 HTML 标签方式调用，简单易用
+
+## 安装
+
+```bash
+npm install rspress-plugin-map --save
+```
+
+## 配置
+
+在 `rspress.config.ts` 中添加插件配置：
+
+```typescript
+import { defineConfig } from 'rspress/config';
+import pluginMap from 'rspress-plugin-map';
+
+export default defineConfig({
+  plugins: [
+    pluginMap()
+  ]
+});
+```
+
+## 使用
+
+在 Markdown 文件中使用 `<rspress-map>` 标签插入地图：
+
+### 基本用法
+
+```html
+<rspress-map></rspress-map>
+```
+
+### 自定义参数
+
+所有参数都是可选的，未指定时使用默认值：
+
+```html
+<rspress-map 
+  type="hybrid" 
+  lat="39.9042" 
+  lng="116.4074" 
+  zoom="12" 
+  width="100%" 
+  height="500px" 
+  marker="true" 
+  marker-text="北京市"
+></rspress-map>
+```
+
+### 参数说明
+
+| 参数 | 说明 | 默认值 | 可选值 |
+|------|------|--------|--------|
+| type | 地图类型 | hybrid | hybrid, google, gaode, baidu, geoq, openstreet |
+| lat | 纬度 | 39.9042 | 数值 |
+| lng | 经度 | 116.4074 | 数值 |
+| zoom | 缩放等级 | 10 | 1-18 |
+| width | 容器宽度 | 100% | CSS 尺寸值 |
+| height | 容器高度 | 400px | CSS 尺寸值 |
+| marker | 是否显示标记点 | true | true, false |
+| marker-text | 标记点提示文本 | "" | 字符串 |
+
+### 地图类型说明
+
+- **hybrid**: 混合地图，支持切换 Google、高德、百度、Geoq、OpenStreetMap 等多个图层
+- **google**: Google 地图
+- **gaode**: 高德地图
+- **baidu**: 百度地图
+- **geoq**: Geoq 地图
+- **openstreet**: OpenStreetMap
+
+## 注意事项
+
+1. 插件会自动加载所需的地图脚本，无需手动引入。
+
+2. 混合地图使用 Leaflet 实现，依赖 `leaflet` 和 `leaflet.chinatmsproviders` 库。
+
+## 示例
+
+### 混合地图
+
+```html
+<rspress-map type="hybrid" lat="39.9042" lng="116.4074" zoom="12" marker-text="北京市"></rspress-map>
+```
+
+### Google 地图
+
+```html
+<rspress-map type="google" lat="39.9042" lng="116.4074" zoom="12" marker-text="北京市"></rspress-map>
+```
+
+### 高德地图
+
+```html
+<rspress-map type="gaode" lat="39.9042" lng="116.4074" zoom="12" marker-text="北京市"></rspress-map>
+```
+
+### 百度地图
+
+```html
+<rspress-map type="baidu" lat="39.9042" lng="116.4074" zoom="12" marker-text="北京市"></rspress-map>
+```
+
+### Geoq 地图
+
+```html
+<rspress-map type="geoq" lat="39.9042" lng="116.4074" zoom="12" marker-text="北京市"></rspress-map>
+```
+
+### OpenStreetMap
+
+```html
+<rspress-map type="openstreet" lat="39.9042" lng="116.4074" zoom="12" marker-text="北京市"></rspress-map>
+```

package/dist/components/RspressMap.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface RspressMapProps {
+    type?: 'hybrid' | 'google' | 'gaode' | 'baidu' | 'geoq' | 'openstreet' | string;
+    lat?: string | number;
+    lng?: string | number;
+    zoom?: string | number;
+    width?: string;
+    height?: string;
+    marker?: boolean | string;
+    markerText?: string;
+    layerType?: number | string;
+}
+declare global {
+    interface Window {
+        L: any;
+    }
+}
+export declare const RspressMap: React.FC<RspressMapProps>;
+export default RspressMap;

package/dist/components/RspressMap.js

@@ -0,0 +1,170 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RspressMap = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const loadScript = (src) => {
+    return new Promise((resolve, reject) => {
+        if (typeof window !== 'undefined' && document.querySelector(`script[src="${src}"]`)) {
+            // Already added, wait for it to load if it hasn't mapped to window yet
+            let attempts = 0;
+            const check = () => {
+                if (window.L && src.includes('leaflet@'))
+                    return resolve();
+                if (window.L && window.L.tileLayer && window.L.tileLayer.chinaProvider && src.includes('ChineseTmsProviders'))
+                    return resolve();
+                attempts++;
+                if (attempts > 50)
+                    return reject(new Error(`Timeout loading ${src}`)); // 5 seconds
+                setTimeout(check, 100);
+            };
+            check();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = () => resolve();
+        script.onerror = (e) => reject(e);
+        document.head.appendChild(script);
+    });
+};
+const loadCss = (href) => {
+    if (typeof window !== 'undefined' && document.querySelector(`link[href="${href}"]`))
+        return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+};
+const RspressMap = (props) => {
+    const { type = 'gaode', lat = 39.9042, lng = 116.4074, zoom = 10, width = '100%', height = '400px', marker = true, markerText = '', layerType } = props;
+    const mapRef = (0, react_1.useRef)(null);
+    const leafletMapRef = (0, react_1.useRef)(null);
+    const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
+    const id = (0, react_1.useRef)(`map-${Math.random().toString(36).substr(2, 9)}`);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const initLeaflet = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                loadCss('//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.css');
+                yield loadScript('//unpkg.com/hexo-tag-map/lib/leaflet@1.7.1.js');
+                yield loadScript('//unpkg.com/hexo-tag-map/lib/leaflet.ChineseTmsProviders@1.0.4.js');
+                setIsLoaded(true);
+            }
+            catch (error) {
+                console.error('Failed to load map scripts:', error);
+            }
+        });
+        if (window.L && window.L.tileLayer && window.L.tileLayer.chinaProvider) {
+            setIsLoaded(true);
+        }
+        else {
+            initLeaflet();
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!isLoaded || !mapRef.current)
+            return;
+        const latNum = Number(lat);
+        const lngNum = Number(lng);
+        const zoomNum = Number(zoom);
+        const showMarker = marker === true || marker === 'true';
+        const L = window.L;
+        // Cleanup previous map instance if it exists
+        if (leafletMapRef.current) {
+            leafletMapRef.current.remove();
+            leafletMapRef.current = null;
+        }
+        // Setup providers based on hexo-tag-map config
+        const normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', { maxZoom: 20, minZoom: 1, attribution: '高德地图' });
+        const imgm = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', { maxZoom: 20, minZoom: 1, attribution: '高德地图' });
+        const imga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', { maxZoom: 20, minZoom: 1, attribution: '高德地图' });
+        const googleNormal = L.tileLayer.chinaProvider('Google.Normal.Map', { maxZoom: 21, minZoom: 1, attribution: 'Google Maps' });
+        const googleSatellite = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: 21, minZoom: 1, attribution: 'Google Maps' });
+        const googleRoute = L.tileLayer.chinaProvider('Google.Satellite.Annotion', { maxZoom: 21, minZoom: 1, attribution: 'Google Maps' });
+        const geoqNormal = L.tileLayer.chinaProvider('Geoq.Normal.Map', { maxZoom: 21, minZoom: 1, attribution: 'GeoQ' });
+        const normalGaode = L.layerGroup([normalm]);
+        const imageGaode = L.layerGroup([imgm, imga]);
+        // Define base layers control
+        const baseLayers = {
+            "高德地图": normalGaode,
+            "智图地图": geoqNormal,
+            "谷歌地图": googleNormal,
+            "高德卫星地图": imgm,
+            "谷歌卫星地图": googleSatellite,
+            "高德卫星标注": imageGaode,
+            "谷歌卫星标注": googleRoute
+        };
+        let defaultLayer = normalGaode;
+        // Follow hexo-tag-map layer logic if layerType (tuceng) is specifically provided
+        if (layerType !== undefined) {
+            const layerNum = Number(layerType);
+            if (layerNum === 2)
+                defaultLayer = geoqNormal;
+            else if (layerNum === 3)
+                defaultLayer = googleNormal;
+            else if (layerNum === 4)
+                defaultLayer = imgm;
+            else if (layerNum === 5)
+                defaultLayer = googleSatellite;
+            else if (layerNum === 6)
+                defaultLayer = imageGaode;
+            else if (layerNum === 7)
+                defaultLayer = googleRoute;
+        }
+        else {
+            // Select the default layer based on type if no layerType is provided
+            if (type === 'google')
+                defaultLayer = googleNormal;
+            else if (type === 'hybrid')
+                defaultLayer = imageGaode;
+            else if (type === 'geoq')
+                defaultLayer = geoqNormal;
+            else if (type === 'baidu')
+                defaultLayer = geoqNormal; // Fallback since Baidu uses different coords traditionally, mapping it to GeoQ or Gaode is safer for standard WGS84 coords
+        }
+        const map = L.map(mapRef.current, {
+            center: [latNum, lngNum],
+            zoom: zoomNum,
+            layers: [defaultLayer],
+            zoomControl: false // hexo-tag-map disables default to add custom one
+        });
+        L.control.layers(baseLayers, null).addTo(map);
+        L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小' }).addTo(map);
+        if (showMarker) {
+            const m = L.marker([latNum, lngNum]).addTo(map);
+            if (markerText) {
+                m.bindPopup(markerText).openPopup();
+            }
+        }
+        leafletMapRef.current = map;
+        return () => {
+            if (leafletMapRef.current) {
+                leafletMapRef.current.remove();
+                leafletMapRef.current = null;
+            }
+        };
+    }, [isLoaded, lat, lng, zoom, type, marker, markerText, layerType]);
+    const heightValue = height || '400px';
+    const widthValue = width || '100%';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "map-box", style: { margin: '0.8rem 0 1.6rem 0' }, children: (0, jsx_runtime_1.jsx)("div", { id: id.current, ref: mapRef, style: {
+                maxWidth: widthValue,
+                height: heightValue,
+                display: 'block',
+                margin: '0 auto',
+                zIndex: 1,
+                borderRadius: '5px'
+            } }) }));
+};
+exports.RspressMap = RspressMap;
+exports.default = exports.RspressMap;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import type { RspressPlugin } from '@rspress/core';
+/**
+ * Rspress map plugin options
+ */
+export interface MapPluginOptions {
+}
+/**
+ * Rspress plugin for embedding interactive maps
+ */
+export declare function pluginMap(options?: MapPluginOptions): RspressPlugin;
+export default pluginMap;

package/dist/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginMap = pluginMap;
+const path_1 = __importDefault(require("path"));
+const remark_rspress_map_1 = require("./remark-rspress-map");
+const rehype_rspress_map_1 = require("./rehype-rspress-map");
+/**
+ * Rspress plugin for embedding interactive maps
+ */
+function pluginMap(options = {}) {
+    return {
+        name: 'rspress-plugin-map',
+        // Register the RspressMap component as a global component available in MDX
+        markdown: {
+            globalComponents: [
+                path_1.default.join(__dirname, 'components', 'RspressMap.js')
+            ],
+            // Use remark plugin to transform <rspress-map> HTML tags to MDX JSX components
+            remarkPlugins: [remark_rspress_map_1.remarkRspressMap],
+            // Also use rehype plugin as fallback for any remaining HTML elements
+            rehypePlugins: [rehype_rspress_map_1.rehypeRspressMap]
+        },
+        // Add runtime module to handle component mapping
+        addRuntimeModules() {
+            return {
+                'virtual:rspress-map-runtime': `
+          // Runtime module for rspress-map component
+          // This ensures the component is available globally
+          export { default as RspressMap } from '${path_1.default.join(__dirname, 'components', 'RspressMap.js')}';
+        `
+            };
+        }
+    };
+}
+exports.default = pluginMap;

package/dist/rehype-rspress-map.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from 'unified';
+import type { Root } from 'hast';
+/**
+ * Rehype plugin to transform <rspress-map> tags to React components
+ */
+export declare const rehypeRspressMap: Plugin<[], Root>;
+export default rehypeRspressMap;

package/dist/rehype-rspress-map.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rehypeRspressMap = void 0;
+const unist_util_visit_1 = require("unist-util-visit");
+/**
+ * Rehype plugin to transform <rspress-map> tags to React components
+ */
+const rehypeRspressMap = () => {
+    return (tree) => {
+        (0, unist_util_visit_1.visit)(tree, 'element', (node) => {
+            if (node.tagName === 'rspress-map') {
+                // Transform to MDX JSX element
+                const mdxNode = {
+                    type: 'mdxJsxFlowElement',
+                    name: 'RspressMap',
+                    attributes: [],
+                    children: node.children || []
+                };
+                // Convert HTML attributes to JSX attributes
+                if (node.properties) {
+                    for (const [key, value] of Object.entries(node.properties)) {
+                        // Convert kebab-case to camelCase for React props
+                        // marker-text -> markerText
+                        const jsxKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                        const attr = {
+                            type: 'mdxJsxAttribute',
+                            name: jsxKey
+                        };
+                        // Set value based on type
+                        // For MDX, string values should be wrapped in quotes
+                        if (typeof value === 'string') {
+                            attr.value = { type: 'mdxJsxAttributeValueExpression', value: JSON.stringify(value) };
+                        }
+                        else if (typeof value === 'boolean') {
+                            attr.value = { type: 'mdxJsxAttributeValueExpression', value: String(value) };
+                        }
+                        else {
+                            attr.value = { type: 'mdxJsxAttributeValueExpression', value: JSON.stringify(value) };
+                        }
+                        mdxNode.attributes.push(attr);
+                    }
+                }
+                // Replace the node
+                Object.assign(node, mdxNode);
+            }
+        });
+    };
+};
+exports.rehypeRspressMap = rehypeRspressMap;
+exports.default = exports.rehypeRspressMap;

package/dist/remark-rspress-map.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+/**
+ * Remark plugin to transform <rspress-map> HTML tags to MDX JSX components
+ * This runs before rehype, so we can transform HTML elements in markdown
+ */
+export declare const remarkRspressMap: Plugin<[], Root>;
+export default remarkRspressMap;

package/dist/remark-rspress-map.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remarkRspressMap = void 0;
+const unist_util_visit_1 = require("unist-util-visit");
+/**
+ * Remark plugin to transform <rspress-map> HTML tags to MDX JSX components
+ * This runs before rehype, so we can transform HTML elements in markdown
+ */
+const remarkRspressMap = () => {
+    return (tree) => {
+        (0, unist_util_visit_1.visit)(tree, ['html', 'mdxJsxFlowElement', 'mdxJsxTextElement'], (node, index, parent) => {
+            // Handle HTML nodes
+            if (node.type === 'html') {
+                const htmlContent = node.value;
+                // Debug: log all HTML nodes to see what we're processing
+                if (htmlContent && htmlContent.includes('rspress-map')) {
+                    console.log('[remarkRspressMap] Found literal HTML rspress-map tag:', htmlContent);
+                }
+                // Match <rspress-map> tags - handle both self-closing and with closing tag
+                // Pattern: <rspress-map ... /> or <rspress-map ...></rspress-map>
+                const tagRegex = /<rspress-map\s+([^>]*?)(?:\s*\/>|>)/;
+                const match = htmlContent.match(tagRegex);
+                if (match) {
+                    console.log('[remarkRspressMap] Matched HTML tag, transforming...');
+                    const attrsString = match[1];
+                    const attrs = [];
+                    // Parse attributes: key="value" or key='value'
+                    const attrRegex = /(\w+(?:-\w+)*)\s*=\s*["']([^"']*)["']/g;
+                    let attrMatch;
+                    while ((attrMatch = attrRegex.exec(attrsString)) !== null) {
+                        const key = attrMatch[1];
+                        const value = attrMatch[2];
+                        // Convert kebab-case to camelCase: marker-text -> markerText
+                        const jsxKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                        attrs.push({ name: jsxKey, value });
+                    }
+                    // Create MDX JSX flow element
+                    const mdxNode = {
+                        type: 'mdxJsxFlowElement',
+                        name: 'RspressMap',
+                        attributes: attrs.map(attr => ({
+                            type: 'mdxJsxAttribute',
+                            name: attr.name,
+                            value: attr.value
+                        })),
+                        children: []
+                    };
+                    // Replace the HTML node with the MDX JSX node
+                    if (parent && typeof index === 'number') {
+                        parent.children[index] = mdxNode;
+                    }
+                }
+            }
+            // Handle natively parsed MDX JSX elements
+            else if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') && node.name === 'rspress-map') {
+                console.log('[remarkRspressMap] Matched mdx tag, transforming name to RspressMap...');
+                // Change the element name to match the exported React component
+                node.name = 'RspressMap';
+                // Convert existing attribute names from kebab-case to camelCase
+                if (node.attributes && Array.isArray(node.attributes)) {
+                    node.attributes.forEach((attr) => {
+                        if (attr.type === 'mdxJsxAttribute' && typeof attr.name === 'string') {
+                            attr.name = attr.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                        }
+                    });
+                }
+            }
+        });
+    };
+};
+exports.remarkRspressMap = remarkRspressMap;
+exports.default = exports.remarkRspressMap;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "rspress-plugin-map",
+  "version": "0.1.0",
+  "description": "Rspress plugin for embedding interactive maps",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "rspress",
+    "plugin",
+    "map",
+    "google-maps",
+    "amap",
+    "baidu-maps",
+    "openstreetmap",
+    "leaflet"
+  ],
+  "author": "buyfakett <work@tteam.icu>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@rspress/core": "^2.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rspress/core": "^2.0.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}