https://github.com/xiaoluoboding/vuepress-plugin-geopattern

🎆A geopattern adapter for VuePress
https://github.com/xiaoluoboding/vuepress-plugin-geopattern

pattern svg svg-patterns vuepress vuepress-plugin

Last synced: about 2 months ago
JSON representation

🎆A geopattern adapter for VuePress

• Host: GitHub
• URL: https://github.com/xiaoluoboding/vuepress-plugin-geopattern
• Owner: xiaoluoboding
• License: mit
• Created: 2020-03-05T03:27:01.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-28T08:15:17.000Z (over 4 years ago)
• Last Synced: 2024-10-28T15:06:22.886Z (about 2 months ago)
• Topics: pattern, svg, svg-patterns, vuepress, vuepress-plugin
• Language: Vue
• Homepage: https://codesandbox.io/embed/vuepress-plugin-geopattern-twidv?fontsize=14&hidenavigation=1&theme=dark
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VuePress Plugin GeoPattern



  

  

  



Register a global `` component for VuePress.

This component generate a beautiful random geometric pattern & random color background images from a string you given.

> This plugin is a adapter of [geopattern](https://github.com/btmills/geopattern) for VuePress

## See Demo on CodeSandbox

[![Edit vuepress-plugin-geopattern](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vuepress-plugin-geopattern-twidv?fontsize=14&hidenavigation=1&theme=dark)

## Installation

```bash

yarn add vuepress-plugin-geopattern -S

or

npm i vuepress-plugin-geopattern -S

```

## Register the plugin

```js

...

module.exports = {

  ...,

  plugins: {

    ['geopattern']

  },

  ...

}

...

```

## Usage

### Default

> Only background image, you must give the height of the element

```vue

```

### Custom pattern

If you don't provide a seed, the pattern's seed is random.

In VuePress you can use [global computed properties](https://vuepress.vuejs.org/guide/global-computed.html) such as use `this.$page.title` as a seed, generate a geopattern by the page title.

Each page title is different, so you got difference geopattern.

```vue

```

### With the custom slot

> In the case, you can let the slot element control the pattern's height

```vue

  


    All Posts

  


```

## 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 |

| :---: | :---------: | :--: | :-----: |

| seed | Will be used as the seed for generation | String | `vuepress-plugin-geopattern` |

| 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

`` component provide a custom slot, you can write some element on the generated pattern.

## Related VuePress Plugin

* [vuepress-plugin-hero-pattern](https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern) - Hero Patterns is a set of repeatable, seemless SVG background patterns

## License

MIT @ [xiaoluoboding](https://github.com/xiaoluoboding)