vitepress-plugin-back2top 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 sugar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# vitepress-plugin-back2top
+
+[English](https://github.com/ATQQ/sugar-blog/blob/master/packages/vitepress-plugin-back2top/README-en.md) | 简体中文
+
+VitePress 回到顶部插件，为页面添加一个回到顶部的按钮。
+
+![示例](https://github.com/ATQQ/sugar-blog/blob/master/packages/vitepress-plugin-back2top/image.png?raw=true)
+
+## 安装
+
+```bash
+pnpm add vitepress-plugin-back2top
+```
+
+## 使用
+
+在 `.vitepress/config.ts` 中引入插件：
+
+```ts
+import { defineConfig } from 'vitepress'
+import { back2topPlugin } from 'vitepress-plugin-back2top'
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      back2topPlugin({
+        // ...配置项
+      })
+    ]
+  }
+})
+```
+
+## Frontmatter 配置
+
+你也可以在单篇文章的 `frontmatter` 中动态覆盖或关闭回到顶部配置：
+
+```yaml
+---
+# 关闭回到顶部
+backToTop: false
+---
+
+---
+# 覆盖回到顶部配置
+backToTop:
+  top: 100
+  icon: <svg>...</svg>
+---
+```
+
+## 选项
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| top | 距离顶部多少距离出现 | `number` | `450` |
+| icon | 自定义 SVG 图标代码 | `string` | - |
+
+## 类型定义
+
+```ts
+export interface BackToTopPluginOptions {
+  /**
+   * 距离顶部多少距离出现
+   * @default 450
+   */
+  top?: number
+
+  /**
+   * 设置展示图标，svg
+   * @recommend https://iconbuddy.app/search?q=fire
+   */
+  icon?: string
+}
+```

package/dist/components/BackToTop.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+import { useData } from 'vitepress'
+
+// @ts-expect-error
+import pluginOptions from 'virtual:back2top-plugin-options'
+import Icon from './Icon.vue'
+
+function handleBackRoTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+const $vpDoc = typeof document !== 'undefined' ? document.querySelector('.vp-doc') || document.body : null
+const el = ref<any>($vpDoc)
+const { width } = useElementSize(el)
+const docWidth = computed(() => `${width.value}px`)
+
+onMounted(() => {
+  const vpDoc = document.querySelector('.vp-doc')
+  if (vpDoc) {
+    el.value = vpDoc
+  }
+})
+
+const { frontmatter } = useData()
+
+const backToTopConfig = computed(() => {
+  // If explicitly disabled in frontmatter
+  if (frontmatter.value.backToTop === false) {
+    return false
+  }
+
+  const fmConfig = frontmatter.value.backToTop
+  if (typeof fmConfig === 'object') {
+    return { ...pluginOptions, ...fmConfig }
+  }
+
+  return pluginOptions
+})
+
+const { y } = useScroll(typeof window !== 'undefined' ? window : null)
+const defaultTriggerHeight = 450
+const triggerTop = computed(() => backToTopConfig.value?.top ?? defaultTriggerHeight)
+
+const show = computed(() => backToTopConfig.value && width.value && y.value > triggerTop.value)
+
+const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
+</script>
+
+<template>
+  <div v-show="show" class="back-to-top">
+    <span class="icon-wrapper" @click="handleBackRoTop">
+      <Icon :size="20" :icon="iconSVGStr">
+        <svg width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="currentColor"
+            d="m20 22l-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72zM7.86 20.45L4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2"
+          />
+        </svg>
+      </Icon>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.back-to-top {
+  position: fixed;
+  width: v-bind(docWidth);
+  text-align: right;
+  bottom: 80px;
+  font-size: 16px;
+  transition: all 0.3s ease-in-out;
+  opacity: 0.6;
+  display: flex;
+  justify-content: right;
+  z-index: 200;
+}
+.back-to-top:hover {
+  opacity: 1;
+}
+.back-to-top .icon-wrapper {
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  right: -80px;
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--box-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.back-to-top .icon-wrapper:hover {
+  box-shadow: var(--box-shadow-hover);
+}
+
+@media screen and (max-width: 1200px) {
+  .back-to-top .icon-wrapper {
+    border-radius: 50%;
+    position: static;
+  }
+}
+</style>

package/dist/components/Icon.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  size?: string | number
+  icon?: string
+}>()
+
+const size = computed(() => props.size && (typeof props.size === 'number' ? `${props.size}px` : props.size))
+</script>
+
+<template>
+  <i v-if="props.icon" class="sugar-theme-icon" :style="{ fontSize: size }" v-html="props.icon" />
+  <i v-else class="sugar-theme-icon" :style="{ fontSize: size }">
+    <slot />
+  </i>
+</template>
+
+<style lang="css" scoped>
+.sugar-theme-icon {
+    --color: inherit;
+    align-items: center;
+    display: inline-flex;
+    height: 1em;
+    justify-content: center;
+    line-height: 1em;
+    position: relative;
+    width: 1em;
+    fill: currentColor;
+    color: var(--color);
+    font-size: inherit;
+}
+</style>

package/dist/components/style.css

@@ -0,0 +1,15 @@
+/* TODO：按实际情况添加不同模式的变量 */
+html .demo {
+    --box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+html.dark .demo {
+    --box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.6);
+}
+
+.parent-demo{
+    text-align: center;
+}
+.parent-demo h1{
+    color: red;
+}

package/dist/components/util.d.ts

@@ -0,0 +1,3 @@
+export declare function parseStringStyle(cssText: string): Record<string, string | number>;
+export declare function useDebounceFn<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: any[]) => void;
+export declare const inBrowser: boolean;

package/dist/components/util.js

@@ -0,0 +1,23 @@
+const listDelimiterRE = /;(?![^(]*\))/g;
+const propertyDelimiterRE = /:([^]+)/;
+const styleCommentRE = /\/\*[^]*?\*\//g;
+export function parseStringStyle(cssText) {
+    const ret = {};
+    cssText.replace(styleCommentRE, '').split(listDelimiterRE).forEach((item) => {
+        if (item) {
+            const tmp = item.split(propertyDelimiterRE);
+            tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
+        }
+    });
+    return ret;
+}
+export function useDebounceFn(fn, delay) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn(...args);
+        }, delay);
+    };
+}
+export const inBrowser = typeof document !== 'undefined';

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import { PluginOption } from 'vite';
+
+interface BackToTopPluginOptions {
+    /**
+     * 距离顶部多少距离出现
+     * @default 450
+     */
+    top?: number;
+    /**
+     * 设置展示图标，svg
+     * @recommend https://iconbuddy.app/search?q=fire
+     */
+    icon?: string;
+}
+
+declare function back2topPlugin(options?: BackToTopPluginOptions): PluginOption;
+
+export { BackToTopPluginOptions, back2topPlugin };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { PluginOption } from 'vite';
+
+interface BackToTopPluginOptions {
+    /**
+     * 距离顶部多少距离出现
+     * @default 450
+     */
+    top?: number;
+    /**
+     * 设置展示图标，svg
+     * @recommend https://iconbuddy.app/search?q=fire
+     */
+    icon?: string;
+}
+
+declare function back2topPlugin(options?: BackToTopPluginOptions): PluginOption;
+
+export { BackToTopPluginOptions, back2topPlugin };

package/dist/index.js

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  back2topPlugin: () => back2topPlugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_javascript_stringify = require("javascript-stringify");
+
+// src/util.ts
+var import_node_path = __toESM(require("path"));
+var import_node_url = require("url");
+var import_meta = {};
+function isESM() {
+  return typeof __filename === "undefined" || typeof __dirname === "undefined";
+}
+function getDirname() {
+  return isESM() ? import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)) : __dirname;
+}
+
+// src/index.ts
+var componentName = "BackToTop";
+var componentFile = `${componentName}.vue`;
+var aliasComponentFile = `${getDirname()}/components/${componentFile}`;
+var virtualModuleId = "virtual:back2top-plugin-options";
+var resolvedVirtualModuleId = `\0${virtualModuleId}`;
+var slots = ["doc-after"];
+function back2topPlugin(options) {
+  const componentOptions = {
+    ...options
+  };
+  const pluginOps = {
+    name: "vitepress-plugin-back2top",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            [`./${componentFile}`]: aliasComponentFile
+          }
+        }
+      };
+    },
+    transform(code, id) {
+      if (id.endsWith("vitepress/dist/client/theme-default/Layout.vue")) {
+        let transformResult = code;
+        for (const element of slots) {
+          const slotPosition = `<slot name="${element}" />`;
+          transformResult = transformResult.replace(slotPosition, `${slotPosition}<ClientOnly><${componentName} /></ClientOnly>`);
+        }
+        const setupPosition = '<script setup lang="ts">';
+        transformResult = transformResult.replace(setupPosition, `${setupPosition}
+import ${componentName} from './${componentName}.vue'`);
+        return transformResult;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${(0, import_javascript_stringify.stringify)(componentOptions)}`;
+      }
+    }
+  };
+  return pluginOps;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  back2topPlugin
+});

package/dist/index.mjs

@@ -0,0 +1,65 @@
+// src/index.ts
+import { stringify } from "javascript-stringify";
+
+// src/util.ts
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+function isESM() {
+  return typeof __filename === "undefined" || typeof __dirname === "undefined";
+}
+function getDirname() {
+  return isESM() ? path.dirname(fileURLToPath(import.meta.url)) : __dirname;
+}
+
+// src/index.ts
+var componentName = "BackToTop";
+var componentFile = `${componentName}.vue`;
+var aliasComponentFile = `${getDirname()}/components/${componentFile}`;
+var virtualModuleId = "virtual:back2top-plugin-options";
+var resolvedVirtualModuleId = `\0${virtualModuleId}`;
+var slots = ["doc-after"];
+function back2topPlugin(options) {
+  const componentOptions = {
+    ...options
+  };
+  const pluginOps = {
+    name: "vitepress-plugin-back2top",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            [`./${componentFile}`]: aliasComponentFile
+          }
+        }
+      };
+    },
+    transform(code, id) {
+      if (id.endsWith("vitepress/dist/client/theme-default/Layout.vue")) {
+        let transformResult = code;
+        for (const element of slots) {
+          const slotPosition = `<slot name="${element}" />`;
+          transformResult = transformResult.replace(slotPosition, `${slotPosition}<ClientOnly><${componentName} /></ClientOnly>`);
+        }
+        const setupPosition = '<script setup lang="ts">';
+        transformResult = transformResult.replace(setupPosition, `${setupPosition}
+import ${componentName} from './${componentName}.vue'`);
+        return transformResult;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${stringify(componentOptions)}`;
+      }
+    }
+  };
+  return pluginOps;
+}
+export {
+  back2topPlugin
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "vitepress-plugin-back2top",
+  "version": "0.1.0",
+  "description": "vitepress plugin back to top",
+  "author": "sugar",
+  "license": "MIT",
+  "homepage": "https://github.com/ATQQ/sugar-blog/tree/master/packages/vitepress-plugin-back2top",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ATQQ/sugar-blog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ATQQ/sugar-blog/issues"
+  },
+  "keywords": [
+    "vitepress",
+    "plugin",
+    "back2top"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1 || ^2"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.1.0",
+    "javascript-stringify": "^2.1.0"
+  },
+  "devDependencies": {
+    "chokidar": "^3.6.0",
+    "fs-extra": "^11.1.1",
+    "tinyglobby": "^0.2.6",
+    "tsup": " ^7.2.0",
+    "typescript": "^5.5.4",
+    "vite": "^5",
+    "vitepress": "2.0.0-alpha.16",
+    "vue": "^3.5.24"
+  },
+  "scripts": {
+    "dev": "pnpm run /^dev:.*/",
+    "dev:plugin": "npx tsup src/index.ts --dts --watch --format esm,cjs --external vitepress",
+    "dev:component": "tsc --sourcemap -w --preserveWatchOutput -p src/components",
+    "dev:watch": "node scripts/watchAndCopy.mjs",
+    "build": "pnpm run /^build:.*/",
+    "build:plugin": "npx tsup src/index.ts --dts --format esm,cjs --external vitepress --silent",
+    "build:component": "tsc -p src/components && node scripts/copyComponents.mjs"
+  }
+}