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

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.

Related VuePress Plugin

• vuepress-plugin-hero-pattern - Hero Patterns is a set of repeatable, seemless SVG background patterns

License

MIT @ xiaoluoboding