# VuePress Plugin GeoPattern

Register a global <GeoPattern /> 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 for VuePress

# See Demo on CodeSandbox

Edit vuepress-plugin-geopattern

# Installation

yarn add vuepress-plugin-geopattern -S
or
npm i vuepress-plugin-geopattern -S

# Register the plugin

...
module.exports = {
  ...,
  plugins: {
    ['geopattern']
  },
  ...
}
...

# Usage

# Default

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

<GeoPattern style="height: 160px;" />

# Custom pattern

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

In VuePress you can use global computed properties 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.

<GeoPattern
  style="height: 160px;"
  seed="$page.title"
  :colorHexs="['F', '4', 'A']"
/>

# With the custom slot

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

<geo-pattern>
  <div style="padding: 64px; font-size: 2rem; color: white;">
    All Posts
  </div>
</geo-pattern>

# 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

<GeoPattern /> component provide a custom slot, you can write some element on the generated pattern.

# License

MIT @ xiaoluoboding

Made with ❤️ by Ahmad Mostafa - @z3by