Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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/build/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>",
    "baseDomain": "https://your-proxy-for-preview-endpoint.com" // default is "https://preview-deliver.kontent.ai"
}

Setup

  1. Deploy the code to a secure public host
  2. Follow the instructions in the Kentico Kontent documentation to add the element to a content model.
    • The Hosted code URL is where you deployed to in step 1
    • No JSON parameters are necessary

Deploying

Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your GitHub account as well.

Deploy to Netlify

Development

You can use following to set up the development environment

Prerequisites:

  • Node.js
  • git
git clone https://github.com/Simply007/gatsby-preview-custom-element
cd gatsby-preview-custom-element
npm install
npm run start

To build for production, run:

npm run build

then deploy the contents of the dist folder.

Thanks

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

About

Custom element allows to subscribe for Gatsby preview functionality

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published