version 0.0.1

vuepress · Feb 25, 2019 · 8d3c9f1 · 8d3c9f1
commit 8d3c9f1
Show file tree

Hide file tree

Showing 20 changed files with 8,519 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+
+node_modules/
+dist/
+lib/
+**/@vssue/*/types/
+!.vuepress/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+
+  env: {
+    node: true,
+  },
+
+  parser: '@typescript-eslint/parser',
+
+  extends: [
+    '@vue/standard',
+    '@vue/typescript',
+  ],
+
+  rules: {
+    'comma-dangle': ['error', 'always-multiline'],
+  },
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,14 @@
+# @see https://git-scm.com/docs/gitattributes
+# @see https://help.github.com/articles/dealing-with-line-endings
+
+* text=auto
+
+*.txt text eol=crlf
+
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.ico binary
+*.tff binary
+*.woff binary
+*.woff2 binary
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+.temp
+.DS_Store
+node_modules
+
+# Log files
+*.log
+
+# Editor directories and files
+.vscode
+
+docs-dist/
+lib/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,17 @@
+.circleci/
+.temp/
+.vscode/
+docs/
+docs-dist/
+src/
+.editorconfig
+.eslint*
+.gitattributes
+.gitignore
+.travis.yml
+tsconfig.json
+yarn.lock
+
+npm-debug.log
+yarn-debug.log
+yarn-error.log
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+message="version %s"
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,22 @@
+language: node_js
+node_js: stable
+branches:
+  only:
+    - master
+
+# S: Build Lifecycle
+install:
+  - yarn
+
+script:
+  - yarn docs:build
+
+after_success:
+  - cd ./docs-dist
+  - git init
+  - git config user.name "${GH_USER_NAME}"
+  - git config user.email "{GH_USER_EMAIL}"
+  - git add .
+  - git commit -m "Build docs $(date +%Y%m%d%H%M)"
+  - git push --force --quiet "https://${GH_TOKEN}@${GH_REPO}" master:gh-pages
+# E: Build LifeCycle
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2019 meteorlxy & contributors
+
+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.
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,3 @@
+# vuepress-plugin-smooth-scroll
+
+A Plugin for [Vuepress](https://vuepress.vuejs.org/) to make the `scrollBehavior` of `vue-router` smooth.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  title: 'vuepress-plugin-smooth-scroll',
+
+  plugins: [
+    require.resolve('../../lib'),
+  ],
+}
diff --git a/docs/Readme.md b/docs/Readme.md
@@ -0,0 +1,106 @@
+---
+sidebar: auto
+---
+
+# vuepress-plugin-smooth-scroll
+
+## Introduction
+
+A simple plugin to make Vuepress scroll smoothly.
+
+It simply does two things:
+
+- Use `window.scrollTo({ behavior: 'smooth' })` for [scrollBehavior](https://router.vuejs.org/api/#scrollbehavior)
+  - [Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)
+  - [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Browser_Compatibility)
+  - [smoothscroll-ployfill](https://github.com/iamdustan/smoothscroll)
+- Add `scroll-behavior: smooth;` to the `<html>` element
+  - [Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
+  - [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Browser_compatibility)
+
+::: tip
+- The first one only works with `<RouterLink to="#anchor">`
+- The second one works with both `<RouterLink to="#anchor">` and `<a href="#anchor">`
+
+You may notice that the browser compatibility of this two features are quite different, so we currently use both of them.
+
+For better browser compatibility, we suggest to use `<RouterLink to="#anchor">` if possible.
+:::
+
+::: warning
+This plugin may not work well with `@vuepress/plugin-active-header-links`, which is used in the default theme of Vuepress.
+
+The problem is that, `@vuepress/plugin-active-header-links` watches the `scroll` event to set the active sidebar link, and `vuepress-plugin-smooth-scroll` will trigger the `scroll` event for sure.
+
+Click the sidebar of this page and you will see what the problem is.
+
+If you are using your own theme without `@vuepress/plugin-active-header-links`, you can have a try on this plugin.
+:::
+
+## Usage
+
+### Installation
+
+Install `vuepress-plugin-smooth-scroll` via NPM:
+
+```bash
+npm install vuepress-plugin-smooth-scroll
+```
+
+### Use the plugin
+
+> See [Vuepress Offical Docs](https://vuepress.vuejs.org/plugin/using-a-plugin.html) for how to use a plugin in detail
+
+
+```js
+// .vuepress/config.js
+
+module.exports = {
+  plugins: {
+    'vuepress-plugin-smooth-scroll': true,
+  },
+}
+```
+
+## Demo
+
+- Click the links in the sidebar 
+- Click the header anchors
+
+```
+
+
+This
+
+
+
+is
+
+
+
+used
+
+
+
+to
+
+
+
+make
+
+
+
+the
+
+
+
+page
+
+
+
+longer
+
+
+```
+
+### End of the page
diff --git a/package.json b/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "vuepress-plugin-smooth-scroll",
+  "version": "0.0.1",
+  "description": "Vuepress plugin for smooth scrolling",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meteorlxy/vuepress-plugin-smooth-scroll.git"
+  },
+  "keywords": [
+    "vuepress",
+    "plugin",
+    "smooth",
+    "scroll"
+  ],
+  "author": "meteorlxy <meteor.lxy@foxmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/meteorlxy/vuepress-plugin-smooth-scroll/issues"
+  },
+  "homepage": "https://github.com/meteorlxy/vuepress-plugin-smooth-scroll#readme",
+  "scripts": {
+    "build": "rimraf lib types && tsc -p tsconfig.json",
+    "docs:dev": "vuepress dev docs --temp .temp",
+    "docs:build": "vuepress build docs --dest docs-dist",
+    "lint": "eslint --ext .ts src/",
+    "postinstall": "yarn build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@types/node": "^11.9.5",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-typescript": "^4.0.0",
+    "eslint": "^5.14.1",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.4",
+    "rimraf": "^2.6.3",
+    "typescript": "^3.3.3333",
+    "vuepress": "^1.0.0-alpha.39"
+  },
+  "dependencies": {
+    "smoothscroll-polyfill": "^0.4.3"
+  }
+}
diff --git a/src/enhanceApp.ts b/src/enhanceApp.ts
@@ -0,0 +1,48 @@
+import { Route } from 'vue-router'
+import smoothscroll from 'smoothscroll-polyfill'
+import '../styles/index.styl'
+
+export default ({ Vue, router }) => {
+  smoothscroll.polyfill()
+
+  router.options.scrollBehavior = (to: Route, from: Route, savedPosition: { x: number, y: number} | null) => {
+    if (savedPosition) {
+      return window.scrollTo({
+        top: savedPosition.y,
+        behavior: 'smooth',
+      })
+    } else if (to.hash) {
+      if (Vue.$vuepress.$get('disableScrollBehavior')) {
+        return false
+      }
+
+      const targetElement = document.querySelector(to.hash)
+
+      if (targetElement) {
+        return window.scrollTo({
+          top: getElementPosition(targetElement).y,
+          behavior: 'smooth',
+        })
+      }
+
+      return false
+    } else {
+      return window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+}
+
+// fork from vue-router@3.0.2
+// src/util/scroll.js
+function getElementPosition (el: Element) {
+  const docEl = document.documentElement
+  const docRect = docEl.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  return {
+    x: elRect.left - docRect.left,
+    y: elRect.top - docRect.top,
+  }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  name: 'vuepress-plugin-smooth-scroll',
+
+  enhanceAppFiles: [
+    path.resolve(__dirname, 'enhanceApp.js'),
+  ],
+}
diff --git a/styles/index.styl b/styles/index.styl
@@ -0,0 +1,2 @@
+html
+  scroll-behavior smooth
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "declarationDir": "./types",
+    "target": "es2015",
+    "module": "es2015",
+    "lib": ["es2017", "es2018", "dom", "dom.iterable"],
+    "newLine": "lf",
+    "declaration": true,
+    "sourceMap": true,
+    "noEmitOnError": true,
+    "importHelpers": true,
+    "downlevelIteration": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": [
+    "./src"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "node_modules"
+  ]
+}
diff --git a/types/enhanceApp.d.ts b/types/enhanceApp.d.ts
@@ -0,0 +1,6 @@
+import '../styles/index.styl'
+declare const _default: ({ Vue, router }: {
+    Vue: any;
+    router: any;
+}) => void
+export default _default
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -0,0 +1 @@
+declare const path: any