# gatsby-plugin-preview

Adds Preview UI to Gatsby sites that have `preview` enabled.

## Install

```properties
npm install --save @gatsby-cloud-pkg/gatsby-plugin-preview

# or

yarn add @gatsby-cloud-pkg/gatsby-plugin-preview
```

```js
// In your gatsby-config.js
plugins: [`@gatsby-cloud-pkg/gatsby-plugin-preview`]
```

<br />

## How to use

Once installed you will be greeted by the `Preview UI` floating bar.

<img src="https://images.ctfassets.net/vkdbses00qqt/3Lal7yUggwz62fKFfvRMT9/9530dee38e108e0b75a5d56745a83cf8/Screenshot_2022-04-01_at_6.01.55_PM.png" alt="Preview UI">

<br />

You can interact with the different buttons in the bar. The info button will display different messages and actions depending on the status of the build for the page your currently on.

### Default Status

<img src="https://images.ctfassets.net/vkdbses00qqt/1u21fWGPcW8cxLDSOCTNYP/b76449d6e57552c9b08d9899ade438e0/Screenshot_2022-04-01_at_5.58.06_PM.png" width="350" alt="Preview UI Status" />

<br />

### Page Updated Status

<img src="https://images.ctfassets.net/vkdbses00qqt/5zaAFaS5Fb5OE6XQYTlWZ2/0326d640d3e831311d1d42074da09b5b/Screenshot_2022-04-01_at_5.58.29_PM.png" alt="Preview UI Page Updated" width="450" />