From 2abd2d92ff5d54ec9bb981487aeea6762c2542d4 Mon Sep 17 00:00:00 2001 From: tolking Date: Sat, 21 Sep 2019 17:01:29 +0800 Subject: [PATCH] first commit --- .gitignore | 7 ++++ .npmignore | 19 +++++++++ .travis.yml | 19 +++++++++ LICENSE | 20 +++++++++ README.md | 49 ++++++++++++++++++++++ docs/.vuepress/config.js | 66 ++++++++++++++++++++++++++++++ docs/.vuepress/public/favicon.ico | Bin 0 -> 16958 bytes docs/README.md | 47 +++++++++++++++++++++ docs/preview.md | 52 +++++++++++++++++++++++ docs/zh/README.md | 47 +++++++++++++++++++++ enhanceAppFile.js | 28 +++++++++++++ index.js | 28 +++++++++++++ package.json | 36 ++++++++++++++++ 13 files changed, 418 insertions(+) create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 LICENSE create mode 100644 README.md create mode 100644 docs/.vuepress/config.js create mode 100644 docs/.vuepress/public/favicon.ico create mode 100644 docs/README.md create mode 100644 docs/preview.md create mode 100644 docs/zh/README.md create mode 100644 enhanceAppFile.js create mode 100644 index.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1ceeb1a --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log +package-lock.json +yarn.lock +yarn-error.log \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..3fc7ca4 --- /dev/null +++ b/.npmignore @@ -0,0 +1,19 @@ +.DS_Store +.npmignore +.gitignore +.editorconfig +.eslintrc.js +.prettierrc + +node_modules/ +test/ +dist/ +docs/ +examples/ +npm-debug.log +yarn-error.log +yarn.lock +package-lock.json + +*.test.js +.travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..5549f74 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,19 @@ +language: node_js +node_js: + - lts/* +install: + - yarn +cache: + directories: + - node_modules +script: + - yarn build +deploy: + committer_from_gh: true + provider: pages + skip-cleanup: true + local_dir: dist + github-token: $GITHUB_TOKEN + keep-history: true + on: + branch: master \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5bde15f --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright 2019 tolking + +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 new file mode 100644 index 0000000..3aaec76 --- /dev/null +++ b/README.md @@ -0,0 +1,49 @@ +# vuepress-plugin-img-lazy + +> a vuepress plugin to better supporting image lazy loading + +base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js) + +[Live Demo and Documentation](https://tolking.github.io/vuepress-plugin-img-lazy/preview.html) + +--- + +## Installation + +``` sh +yarn add vuepress-plugin-img-lazy +# or +npm i vuepress-plugin-img-lazy +``` + +## Usage + +``` js +module.exports = { + plugins: [ + 'img-lazy' + ] +} +``` + +``` md +![img](img.jpg) + +![img](img.jpg =500x300) + + +``` + +## Options + +### useLoading +- Type: `Boolben` +- Default: `true` + +Use the native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr) for the web + +### selector +- Type: `string` +- Default: `lazy` + +Default class name for image diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js new file mode 100644 index 0000000..a57b4d0 --- /dev/null +++ b/docs/.vuepress/config.js @@ -0,0 +1,66 @@ +module.exports = { + base: '/vuepress-plugin-img-lazy/', + title: 'vuepress-plugin-img-lazy', + description: 'a vuepress plugin to better supporting image lazy loading', + dest: 'dist/', + evergreen: true, + cache: false, + theme: 'default-prefers-color-scheme', + locales: { + '/': { + lang: 'en-US', + title: 'vuepress-plugin-img-lazy', + description: 'a vuepress plugin to better supporting image lazy loading' + }, + '/zh/': { + lang: 'zh-CN', + title: 'vuepress-plugin-img-lazy', + description: '为 vuepress 的默认主题增加 prefers-color-scheme' + } + }, + themeConfig: { + repo: 'tolking/vuepress-plugin-img-lazy', + docsDir: 'examples', + editLinks: true, + locales: { + '/': { + selectText: 'Languages', + label: 'English', + editLinkText: 'Edit this page on GitHub', + lastUpdated: 'Last Updated', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + sidebar: [ + '/', + '/preview' + ] + }, + '/zh/': { + selectText: '选择语言', + label: '简体中文', + editLinkText: '在 GitHub 上编辑此页', + lastUpdated: '最后更新时间', + serviceWorker: { + updatePopup: { + message: "发现新内容可用.", + buttonText: "刷新" + } + }, + sidebar: [ + '/zh/', + '/preview' + ] + } + } + }, + plugins: [ + [require.resolve('../../index.js'), { + useLoading: true, + selector: 'lazy' + }] + ] +} diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..42d5d5314021e135ac94de1966988da8a3dd4e95 GIT binary patch literal 16958 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 literal 0 HcmV?d00001 diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..ffc545c --- /dev/null +++ b/docs/README.md @@ -0,0 +1,47 @@ +## Introduction + +> a vuepress plugin to better supporting image lazy loading + +base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js) + +--- + +## Installation + +``` sh +yarn add vuepress-plugin-img-lazy +# or +npm i vuepress-plugin-img-lazy +``` + +## Usage + +``` js +module.exports = { + plugins: [ + 'img-lazy' + ] +} +``` + +``` md +![img](img.jpg) + +![img](img.jpg =500x300) + + +``` + +## Options + +### useLoading +- Type: `Boolben` +- Default: `true` + +Use the native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr) for the web + +### selector +- Type: `string` +- Default: `lazy` + +Default class name for image diff --git a/docs/preview.md b/docs/preview.md new file mode 100644 index 0000000..74df39b --- /dev/null +++ b/docs/preview.md @@ -0,0 +1,52 @@ +## Preview + +![img](https://picsum.photos/536/354?random=1 =536x354) +![img](https://picsum.photos/536/354?random=2 =536x354) +![img](https://picsum.photos/536/354?random=3 =536x354) +![img](https://picsum.photos/536/354?random=4 =536x354) +![img](https://picsum.photos/536/354?random=5 =536x354) +![img](https://picsum.photos/536/354?random=6 =536x354) +![img](https://picsum.photos/536/354?random=7 =536x354) +![img](https://picsum.photos/536/354?random=8 =536x354) +![img](https://picsum.photos/536/354?random=9 =536x354) +![img](https://picsum.photos/536/354?random=10 =536x354) +![img](https://picsum.photos/536/354?random=11 =536x354) +![img](https://picsum.photos/536/354?random=12 =536x354) +![img](https://picsum.photos/536/354?random=13 =536x354) +![img](https://picsum.photos/536/354?random=14 =536x354) +![img](https://picsum.photos/536/354?random=15 =536x354) +![img](https://picsum.photos/536/354?random=16 =536x354) +![img](https://picsum.photos/536/354?random=17 =536x354) +![img](https://picsum.photos/536/354?random=18 =536x354) +![img](https://picsum.photos/536/354?random=19 =536x354) +![img](https://picsum.photos/536/354?random=20 =536x354) +![img](https://picsum.photos/536/354?random=21 =536x354) +![img](https://picsum.photos/536/354?random=22 =536x354) +![img](https://picsum.photos/536/354?random=23 =536x354) +![img](https://picsum.photos/536/354?random=24 =536x354) +![img](https://picsum.photos/536/354?random=25 =536x354) +![img](https://picsum.photos/536/354?random=26 =536x354) +![img](https://picsum.photos/536/354?random=27 =536x354) +![img](https://picsum.photos/536/354?random=28 =536x354) +![img](https://picsum.photos/536/354?random=29 =536x354) +![img](https://picsum.photos/536/354?random=30 =536x354) +![img](https://picsum.photos/536/354?random=31 =536x354) +![img](https://picsum.photos/536/354?random=32 =536x354) +![img](https://picsum.photos/536/354?random=33 =536x354) +![img](https://picsum.photos/536/354?random=34 =536x354) +![img](https://picsum.photos/536/354?random=35 =536x354) +![img](https://picsum.photos/536/354?random=36 =536x354) +![img](https://picsum.photos/536/354?random=37 =536x354) +![img](https://picsum.photos/536/354?random=38 =536x354) +![img](https://picsum.photos/536/354?random=39 =536x354) +![img](https://picsum.photos/536/354?random=40 =536x354) +![img](https://picsum.photos/536/354?random=41 =536x354) +![img](https://picsum.photos/536/354?random=42 =536x354) +![img](https://picsum.photos/536/354?random=43 =536x354) +![img](https://picsum.photos/536/354?random=44 =536x354) +![img](https://picsum.photos/536/354?random=45 =536x354) +![img](https://picsum.photos/536/354?random=46 =536x354) +![img](https://picsum.photos/536/354?random=47 =536x354) +![img](https://picsum.photos/536/354?random=48 =536x354) +![img](https://picsum.photos/536/354?random=49 =536x354) +![img](https://picsum.photos/536/354?random=50 =536x354) diff --git a/docs/zh/README.md b/docs/zh/README.md new file mode 100644 index 0000000..2ce7971 --- /dev/null +++ b/docs/zh/README.md @@ -0,0 +1,47 @@ +## 介绍 + +> a vuepress plugin to better supporting image lazy loading + +基于 [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy)、 [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)、 [lozad](https://github.com/ApoorvSaxena/lozad.js) + +--- + +## 安装 + +``` sh +yarn add vuepress-plugin-img-lazy +# or +npm i vuepress-plugin-img-lazy +``` + +## 使用 + +``` js +module.exports = { + plugins: [ + 'img-lazy' + ] +} +``` + +``` md +![img](img.jpg) + +![img](img.jpg =500x300) + + +``` + +## 配置 + +### useLoading +- Type: `Boolben` +- Default: `true` + +是否使用基于 [原生 web](https://caniuse.com/#feat=loading-lazy-attr) 的懒加载 + +### selector +- Type: `string` +- Default: `lazy` + +默认的懒加载类名 diff --git a/enhanceAppFile.js b/enhanceAppFile.js new file mode 100644 index 0000000..dd43404 --- /dev/null +++ b/enhanceAppFile.js @@ -0,0 +1,28 @@ +import config from '@dynamic/imgLazy' + +export default ({ Vue }) => { + Vue.mixin({ + data() { + return { + $imgLazyObserver: {} + } + }, + + computed: { + $supLoading() { + return config.useLoading && "loading" in HTMLImageElement.prototype + } + }, + + mounted() { + if (this.$supLoading) { + const lazyEls = document.querySelectorAll('.' + config.selector) + lazyEls.forEach(lazyEl => lazyEl.setAttribute("src", lazyEl.getAttribute("data-src"))) + } else { + const lozad = require('lozad') + this.$imgLazyObserver = lozad('.' + config.selector) + this.$imgLazyObserver.observe() + } + } + }) +} diff --git a/index.js b/index.js new file mode 100644 index 0000000..a6c4671 --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +const { path } = require('@vuepress/shared-utils') + +module.exports = (options, ctx) => { + const { + useLoading = true, + selector = 'lazy' + } = options + + return { + name: 'vuepress-plugin-img-lazy', + + extendMarkdown: md => { + md.use(require('markdown-it-img-lazy'), { useLoading, selector }) + md.use(require('markdown-it-imsize')) + }, + + async clientDynamicModules () { + return [ + { + name: 'imgLazy.js', + content: `export default ${JSON.stringify({ useLoading, selector })}` + } + ] + }, + + enhanceAppFiles: path.resolve(__dirname, 'enhanceAppFile.js') + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..ff7abbf --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "vuepress-plugin-img-lazy", + "version": "1.0.0", + "main": "index.js", + "description": "a vuepress plugin to better supporting image lazy loading", + "author": "tolking ", + "license": "MIT", + "repository": "https://github.com/tolking/vuepress-plugin-img-lazy", + "bugs": { + "url": "https://github.com/tolking/vuepress-plugin-img-lazy/issues" + }, + "homepage": "https://github.com/tolking/vuepress-plugin-img-lazy", + "doc": "https://ououe.com/lib/vuepress-plugin-img-lazy.html", + "scripts": { + "dev": "vuepress dev docs", + "serve": "vuepress dev docs", + "build": "vuepress build docs" + }, + "keywords": [ + "vuepress", + "vuepress-plugin", + "lazy", + "img", + "loading", + "data-src" + ], + "dependencies": { + "lozad": "^1.9.0", + "markdown-it-img-lazy": "^1.0.0", + "markdown-it-imsize": "^2.0.1" + }, + "devDependencies": { + "vuepress": "^1.1.0", + "vuepress-theme-default-prefers-color-scheme": "^1.0.2" + } +}