bidirectional real-time content management and delivery
This application was produced during a hackathon. It's a quick Proof of Concept created in 8h. It's not ready to be used in production.
- there's no server side rendering. It won't work without JavaScript enabled and load times will most likely suffer
- entry changes are populated with the real-time sync faster than they end up in the CDA. A page refreshed right after syncing may still show the previous version. To mitigate this problem we could use
localStorage
to cache versions received with the sync channel - failed update are not reverted from the state of the app. You can provide a value that won't pass validations and will be rejected by the CMA, but it'll stay as is in the front-end
Never ever give your CMA token away to applications you don't trust. Contentful Gazette will store your CMA token in-memory only until the browser tab is closed. You can verify what we do with your token by studying the code of src/contentful.js.
- create a new space in Contentful
- create a content type with ID
article
consisting of 3 fields:title
,lead
,content
(see below) - create a Content Delivery API key (or use the default one)
- write some articles :)
- update src/config.json with your space ID and the CDA key
- install dependencies with
npm install
- start dev server by running
npm run build-dev
- push it to GitHub Pages using
npm run deploy-gh
- create a PubNub application with a key set
- for your space create a webhook for entry publication events calling PubNub (see below)
- update src/config.json with your PubNub subscribe key
- click on the
edit this website
ribbon on the top left corner of gazette and paste your Content Management API token - click in any of the textfields and change a value
- open gazette in a different tab or look at the entries in the Contentful web app to see you changes get synchronized
{
"name": "article",
"description": "Contentful Gazette article",
"displayField": "title",
"fields": [
{
"name": "title",
"id": "title",
"type": "Symbol",
"localized": false,
"required": false,
"disabled": false,
"omitted": false,
"validations": []
},
{
"name": "lead",
"id": "lead",
"type": "Symbol",
"localized": false,
"required": false,
"disabled": false,
"omitted": false,
"validations": []
},
{
"name": "content",
"id": "content",
"type": "Text",
"localized": false,
"required": false,
"disabled": false,
"omitted": false,
"validations": []
}
],
"sys": {/* redacted */}
}
First you have to compose your publish URL. Refer the PubNub documentation:
https://pubsub.pubnub.com/publish/{pub_key}/{sub_key}/0/articles/0?store=1
Then this URL should be used for as a Contentful webhook. Please note it should be triggerd only on entry publication.
This project won the 2017 Winter Hackathon at Contentful.
Contributors: