chore: release v0.1.0

Author: xiaoluoboding

.gitignore

@@ -0,0 +1,20 @@
+.DS_Store
+node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

HeroPattern.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="hero-pattern" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { SVG_DATAURI } from '@dynamic/svg2datauri'
+
+export default {
+  name: 'HeroPattern',
+  props: {
+    // Pattern Name
+    pattern: { type: String, default: 'line-in-motion' },
+    // Given color is hexadecimal color value
+    fillColor: {
+      type: String,
+      default: () => '#9c92ac',
+      validator (val) {
+        const regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
+        return regex.test(val)
+      }
+    },
+    // Given color is hexadecimal color value
+    backgroundColor: {
+      type: String,
+      default: () => '#dfdbe5',
+      validator (val) {
+        const regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
+        return regex.test(val)
+      }
+    },
+    fillOpacity: {
+      type: String,
+      default: () => '0.4'
+    },
+    repeat: { type: String, default: 'repeat' }
+  },
+  data: () => ({
+    svgDataUri: SVG_DATAURI
+  }),
+  computed: {
+    style () {
+      let svg = {}
+      const idx = this.svgDataUri.findIndex(element => element.name.split('.').shift() === this.pattern)
+      if (idx !== -1) {
+        svg = this.svgDataUri[idx]
+        const drop = (arr, n = 1) => arr.slice(n)
+        const color = drop(Array.from(this.fillColor)).join('')
+        const fillReg = /fill='(\w+|\S+)'/g
+        const fillOpacityReg = /fill-opacity='(\w+|\S+)'/
+
+        const datauri = svg.datauri
+          .replace(fillReg, `fill='%23${color}'`)
+          .replace(fillOpacityReg, `fill-opacity='${this.fillOpacity}'`)
+
+        return {
+          'background-color': this.backgroundColor,
+          'background-image': `url("${datauri}")`,
+          'background-repeat': this.repeat
+        }
+      }
+      return {}
+    }
+  },
+  mounted () {
+    // this.getPattern()
+    // console.log(SVG_DATAURI)
+  },
+  methods: {
+    // async getPattern () {
+    //   const svg = await fs.readFile(path.join(__dirname, './assets/icons/line-in-motion'))
+    //   console.log(svg)
+    //   const uri = svgToMiniDataURI(svg)
+    //   console.log(uri)
+    // },
+    getRandomColor (hexs) {
+      const shuffle = ([...arr]) => {
+        let m = arr.length
+        while (m) {
+          let temp = null
+          const i = Math.floor(Math.random() * m--)
+          temp = arr[m]
+          arr[m] = arr[i]
+          arr[i] = temp
+        }
+        return arr
+      }
+      return shuffle(hexs).join('')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hero-pattern {
+  transition: all 0.5s ease-in-out;
+}
+</style>

README.md

@@ -0,0 +1,69 @@
+# Vuepress Plugin HeroPattern
+
+Register a global `<HeroPattern />` component for VuePress.
+
+This component generate a seemless SVG background pattern.
+
+> This plugin is a adaptor of [hero-pattern](http://www.heropatterns.com/) for VuePress
+
+## See Demo on CodeSandbox
+
+[![Edit vuepress-plugin-hero-pattern](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/musing-surf-twidv?fontsize=14&hidenavigation=1&theme=dark)
+
+## Installation
+
+```bash
+yarn add vuepress-plugin-hero-pattern -S
+or
+npm i vuepress-plugin-hero-pattern -S
+```
+
+## Register the plugin
+
+```js
+...
+module.exports = {
+  ...,
+  plugins: {
+    ['hero-pattern']
+  },
+  ...
+}
+...
+```
+
+## Usage
+
+> Only background image, you must give the width & height of the element
+
+```vue
+<HeroPattern style="width: 240px; height: 80px;" />
+```
+
+> With the custom slot, in the case, you can let the slot element control the pattern's height
+ ÷
+```vue
+<hero-pattern>
+  <div style="padding: 64px; font-size: 2rem; color: white;">
+    All Posts
+  </div>
+</hero-pattern>
+```
+
+## API
+
+| Props | Description | Type | Default |
+| :---: | :---------: | :--: | :-----: |
+| pattern | 87 kinds of patterns that Hero Patterns supported, check [pattern list]() | String | `line-to-motion` |
+| fillColor | Controls the foreground color of the generated image. | String | `#9c92ac` |
+| fillOpacity | Controls the foreground opacity of the generated image. | String | `0.4` |
+| backgroundColor | Controls the background color of the generated image. | String | `#dfdbe5` |
+| repeat | Controls how the background repeated of the generated image. | String | `repeat` |
+
+## Slot
+
+`<HeroPattern />` component provide a custom slot, you can write some element on the generated pattern.
+
+## License
+
+MIT @ [xiaoluoboding](https://github.com/xiaoluoboding)