chore: release v0.1.0

Author: xiaoluoboding

GeoPattern.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="geo-pattern" :style="style">
+    <slot />
+  </div>
+</template>
+
+<script>
+import gp from 'geopattern'
+
+export default {
+  name: 'GeoPattern',
+  props: {
+    // Given array elements is hexadecimal color value [0-F]
+    colorHexs: { type: Array, default: () => ['3', '9', 'C'] },
+    // Controls the relative background color of the generated image.
+    baseColor: { type: String, default: '#933c3c' }
+  },
+  computed: {
+    // Will be used as the seed for generation
+    seed () {
+      return this.$page && this.$page.title + new Date().toString()
+    },
+    style () {
+      return {
+        'background-image': this.getPattern()
+      }
+    }
+  },
+  methods: {
+    getPattern () {
+      return gp.generate(this.seed, {
+        color: this.getRandomColor(this.colorHexs),
+        baseColor: this.baseColor
+      }).toDataUrl()
+    },
+    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>
+.geo-pattern {
+  transition: all 0.5s ease-in-out;
+}
+</style>

README.md

@@ -0,0 +1,68 @@
+# Vuepress Plugin GeoPattern
+
+Register a global `<GeoPattern />` component for VuePress.
+
+This component generate a beautiful random  geometric pattern & random color images from a string you given.
+
+> This plugin is a adaptor of [geopattern](https://github.com/btmills/geopattern)
+
+## See Demo on CodeSandbox
+
+[![Edit vuepress-plugin-geopattern](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fast-pine-42vz4?fontsize=14&hidenavigation=1&theme=dark)
+
+## Installation
+
+```bash
+yarn add vuepress-plugin-geopattern -S
+or
+npm i vuepress-plugin-disqus -S
+```
+
+## Register the plugin
+
+```js
+...
+module.exports = {
+  ...,
+  plugins: {
+    ['geopattern']
+  },
+  ...
+}
+...
+```
+
+## Usage
+
+> Only background image, you must give the height of the element
+
+```vue
+<GeoPattern style="height: 80px;" />
+```
+
+> With the custom slot, in the case, you can let the slot element control the pattern's height
+
+```vue
+<GeoPattern>
+  <div class="posts-header">
+    All Posts
+  </div>
+</GeoPattern>
+```
+
+## API
+
+> colorHexs is a new props for this component, I believe that three hexadecimal color value[0-F] can generate beautiful colors in random way.
+
+| Props | Description | Type | Default |
+| :---: | :---------: | :--: | :-----: |
+| colorHexs | Given array elements is hexadecimal color value [0-F] | Array | `['3', '9' 'C' ]` |
+| baseColor | Controls the relative background color of the generated image. | String | `933c3c` |
+
+## Slot
+
+`<GeoPattern />` component provide a custom slot, you can write some element on the generated pattern.
+
+## License
+
+MIT

enhanceAppFile.js

@@ -0,0 +1,5 @@
+import GeoPattern from './GeoPattern.vue'
+
+export default ({ Vue }) => {
+  Vue.component('GeoPattern', GeoPattern)
+}

index.js

@@ -0,0 +1,14 @@
+const path = require('path')
+
+module.exports = {
+  enhanceAppFiles: [
+    path.resolve(__dirname, 'enhanceAppFile.js')
+  ],
+
+  chainWebpack (config, isServer) {
+    // to make geopattern work
+    if (!isServer) {
+      config.node.set('Buffer', false)
+    }
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "vuepress-plugin-geopattern",
+  "version": "0.1.0",
+  "description": "Generate beautiful random geometric pattern background images.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xiaoluoboding/vuepress-plugin-geopattern.git"
+  },
+  "keywords": [
+    "vuepress",
+    "plugin",
+    "pattern"
+  ],
+  "author": "xiaoluoboding",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xiaoluoboding/vuepress-plugin-geopattern/issues"
+  },
+  "homepage": "https://github.com/xiaoluoboding/vuepress-plugin-geopattern#readme"
+}