Skip to content
Custom element allows to subscribe for Gatsby preview functionality
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
LICENSE
README.md
gatsby-preview-custom-element.gif
gatsby-preview.css
gatsby-preview.js
index.pug

README.md

Kentico Kontent Gatsby Preview Custom Element

Gatsby preview custom element is watching content changes. When the change is performed it sends the notification to the GatsbyJs and notify editor that the preview environment is ready to be previewed.

Gatsby preview custom element

Usage

If you want to use the Gatsby preview custom element in your project in Kentico Kontent, follow these steps:

  • In Kentico Kontent open Content types tab
  • Open / create a content model to which you want to add the Gatsby preview custom element
  • Add Custom element content element
  • Open configuration of the content element
  • Use following URL as Hosted code URL (HTTPS): https://Simply007.github.io/gatsby-preview-custom-element/dist/preview-element.html
  • Provide the following JSON parameters for the custom element to connect it to the appropriate elements
{
    "previewApiKey": "<YOUR PREVIEW API KEY>",
    "previewUrlPattern": "https://gatby-test-kc-preview/{lang}/{urlslug}",
    "urlSlugElement": "url_pattern",
    "gatsbyWebHookUrl": "https://webhook.gatsbyjs.com/hooks/data_source/<GUID>"
}

Installation

Gatsby preview custom element is in repository: https://github.com/Simply007/gatsby-preview-custom-element

If you want to adjust the implementation, first download Kentico Kontent Custom Elements Devkit. This repository should be positioned within /client/custom-elements folder. For further instructions on devkit implementation, please refer to Custom Element Devkit README.

Get started

You could use following commands to set up the development environment

Prerequisites:

  • Node.js
  • git
git clone https://github.com/Kentico/custom-element-devkit.git
cd custom-element-devkit
git clone https://github.com/Simply007/gatsby-preview-custom-element.git ./client/custom-elements/gatsby-preview-custom-element
npm install --save lodash.debounce
npm start -- -hw

Browse: https://localhost:3000/custom-elements/gatsby-preview-custom-element

Thanks

Thanks to Martin Hejtmánek and his Preview availability custom element

You can’t perform that action at this time.