{"id":15505813,"url":"https://github.com/simply007/gatsby-preview-custom-element","last_synced_at":"2026-01-20T20:33:46.126Z","repository":{"id":39163659,"uuid":"188033292","full_name":"Simply007/gatsby-preview-custom-element","owner":"Simply007","description":"Custom element allows to subscribe for Gatsby preview functionality","archived":false,"fork":false,"pushed_at":"2023-01-06T02:59:06.000Z","size":2240,"stargazers_count":2,"open_issues_count":24,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T15:53:07.125Z","etag":null,"topics":["custom-element","gatsby","kentico-kontent","kontent-ai","kontent-ai-integration"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Simply007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-22T12:23:27.000Z","updated_at":"2022-12-01T10:04:28.000Z","dependencies_parsed_at":"2023-02-05T04:16:10.571Z","dependency_job_id":null,"html_url":"https://github.com/Simply007/gatsby-preview-custom-element","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Simply007/gatsby-preview-custom-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fgatsby-preview-custom-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fgatsby-preview-custom-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fgatsby-preview-custom-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fgatsby-preview-custom-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Simply007","download_url":"https://codeload.github.com/Simply007/gatsby-preview-custom-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fgatsby-preview-custom-element/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28612973,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-element","gatsby","kentico-kontent","kontent-ai","kontent-ai-integration"],"created_at":"2024-10-02T09:24:36.141Z","updated_at":"2026-01-20T20:33:46.109Z","avatar_url":"https://github.com/Simply007.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kentico Kontent Gatsby Preview Custom Element\n\nGatsby preview custom element is watching content changes.\nWhen the change is performed it sends the notification to the GatsbyJs and notify editor that the preview environment is ready to be previewed.\n\n![Gatsby preview custom element](gatsby-preview-custom-element.gif)\n\n## Usage\n\nIf you want to use the Gatsby preview custom element in your project in Kentico Kontent, follow these steps:\n\n* In Kentico Kontent open Content types tab\n* Open / create a content model to which you want to add the Gatsby preview custom element\n* Add **Custom element** content element\n* Open configuration of the content element\n* Use following URL as Hosted code URL (HTTPS): https://Simply007.github.io/gatsby-preview-custom-element/build/preview-element.html\n* Provide the following JSON parameters for the custom element to connect it to the appropriate elements\n\n```jsonc\n{\n    \"previewApiKey\": \"\u003cYOUR PREVIEW API KEY\u003e\",\n    \"previewUrlPattern\": \"https://gatby-test-kc-preview/{lang}/{urlslug}\",\n    \"urlSlugElement\": \"url_pattern\",\n    \"gatsbyWebHookUrl\": \"https://webhook.gatsbyjs.com/hooks/data_source/\u003cGUID\u003e\",\n    \"baseDomain\": \"https://your-proxy-for-preview-endpoint.com\" // default is \"https://preview-deliver.kontent.ai\"\n}\n```\n\n## Setup\n\n1. Deploy the code to a secure public host\n    * See [deploying section](#Deploying) for a really quick option\n1. Follow the instructions in the [Kentico Kontent documentation](https://docs.kontent.ai/tutorials/develop-apps/integrate/integrating-your-own-content-editing-features#a-3--displaying-a-custom-element-in-kentico-kontent) to add the element to a content model.\n    * The `Hosted code URL` is where you deployed to in step 1\n    * No JSON parameters are necessary\n\n## Deploying\n\nNetlify 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.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Simply007/gatsby-preview-custom-element)\n\n### Development\n\nYou can use following to set up the development environment\n\nPrerequisites:\n\n* Node.js\n* git\n\n```console\ngit clone https://github.com/Simply007/gatsby-preview-custom-element\ncd gatsby-preview-custom-element\nnpm install\nnpm run start\n```\n\nTo build for production, run:\n\n```console\nnpm run build\n```\n\nthen deploy the contents of the `dist` folder.\n\n## Thanks\n\nThanks to [Martin Hejtmánek](https://github.com/kenticomartinh) and his [Preview availability custom element](https://github.com/kenticomartinh/custom-element-samples/tree/master/PreviewAvailability)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimply007%2Fgatsby-preview-custom-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimply007%2Fgatsby-preview-custom-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimply007%2Fgatsby-preview-custom-element/lists"}