Skip to content

Commit 946e63c

Browse files
authored
Merge pull request #25 from skyzenr/readme_updated
refactor: readme updated
2 parents 3269766 + 3fbe131 commit 946e63c

File tree

3 files changed

+125
-100
lines changed

3 files changed

+125
-100
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ apidocs-templates/*
77
test/smtpconfig.js/*
88
test/config.js/*
99
test/sync_config.js/*
10-
test/report.json/*
10+
test/report.json/*
11+
package-lock.json

README.md

Lines changed: 121 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
[![Contentstack](https://www.contentstack.com/docs/static/images/contentstack.png)](https://www.contentstack.com/)
22
## JavaScript SDK for Contentstack
33

4-
Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).
4+
Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).
55

66
Contentstack provides JavaScript SDK to build application on top of JavaScript. Given below is the detailed guide and helpful resources to get started with our JavaScript SDK.
77

8-
The JavaScript SDK can also be used to create Node.js and React native applications.
8+
The JavaScript SDK can also be used to create Node.js and React native applications.
99

1010
### Prerequisite
1111

@@ -17,40 +17,55 @@ You need Node.js version 4.4.7 or later installed to use the Contentstack JavaSc
1717

1818
To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest) and include it in the <script> tag:
1919

20-
<script type="text/javascript" src="/path/to/contentstack.min.js"></script>;
20+
```html
21+
<script type="text/javascript" src="/path/to/contentstack.min.js"></script>;
22+
```
2123

2224
To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.
2325

24-
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
26+
```javascript
27+
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
28+
```
2529

2630
#### For Node.js
2731

2832
Node.js uses the Javascript SDK to create apps. To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest), OR install it via npm:
2933

30-
npm -i contentstack
34+
```bash
35+
npm -i contentstack
36+
```
3137

3238
To import the SDK in your project, use the following command:
3339

34-
import contentstack from ‘contentstack’
40+
```javascript
41+
import contentstack from ‘contentstack’
42+
```
3543

3644
To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.
3745

38-
const Stack = contentstack.Stack("api_key","access_token","environment_name");
46+
```javascript
47+
const Stack = contentstack.Stack("api_key","access_token","environment_name");
48+
```
3949

4050
#### For React Native
4151

4252
React Native uses the Javascript SDK to create apps. To use the JavaScript SDK, download it from [here](https://contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest), OR install ist via npm:
4353

44-
npm -i contentstack
54+
```bash
55+
npm -i contentstack
56+
```
4557

4658
To import the SDK in your project, use the following command:
4759

48-
import contentstack from `contentstack/react-native`
60+
```javascript
61+
import contentstack from `contentstack/react-native`
62+
```
4963

5064
To initialize the SDK, you will need to specify the API Key, Access Token, and Environment Name of your stack.
5165

52-
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
53-
66+
```javascript
67+
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
68+
```
5469

5570
### Key Concepts for using Contentstack
5671

@@ -64,62 +79,64 @@ Content type lets you define the structure or blueprint of a page or a section o
6479

6580
#### Entry
6681

67-
An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-entries).
82+
An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-entries).
6883

6984
#### Asset
7085

71-
Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about [Assets](https://www.contentstack.com/docs/guide/content-management#working-with-assets).
86+
Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about [Assets](https://www.contentstack.com/docs/guide/content-management#working-with-assets).
7287

7388
#### Environment
7489

75-
A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with [Environments](https://www.contentstack.com/docs/guide/environments).
76-
77-
90+
A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with [Environments](https://www.contentstack.com/docs/guide/environments).
7891

7992
### Contentstack JavaScript SDK: 5-minute Quickstart
8093

81-
#### Initializing your SDK
94+
#### Initializing your SDK
8295

8396
You will need to specify the API key, Access token, and Environment Name of your stack to initialize the SDK:
8497

85-
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
98+
```javascript
99+
const Stack = Contentstack.Stack("api_key", "access_token", "environment_name");
100+
```
86101

87102
Once you have initialized the SDK, you can start getting content in your app.
88103

89-
90-
91104
#### Querying content from your stack
92105

93106
To get a single entry, you need to specify the content type as well as the ID of the entry.
94107

95-
const Query = Stack.ContentType('blog').Entry("blt123something");
96-
97-
Query.fetch()
98-
.then(function success(entry) {
108+
```javascript
109+
const Query = Stack.ContentType('blog').Entry("blt123something");
110+
111+
Query.fetch()
112+
.then(function success(entry) {
99113
console.log(entry.get('title')); // Retrieve field value by providing a field's uid
100114
console.log(entry.toJSON()); // Convert the entry result object to JSON
101-
}, function error(err) {
115+
}, function error(err) {
102116
// err object
103-
});
117+
})
118+
```
104119

105120
To retrieve multiple entries of a content type, you need to specify the content type uid. You can also specify search parameters to filter results.
106121

107-
const Query = Stack.ContentType('blog').Query();
108-
109-
Query
110-
.where("title", "welcome")
111-
.includeContentType()
112-
.includeCount()
113-
.toJSON()
114-
.find()
115-
.then(function success(result) {
116-
// result is array where -
117-
// result[0] =&gt; entry objects
118-
// result[result.length-1] =&gt; entry objects count included only when .includeCount() is queried.
119-
// result[1] =&gt; schema of the content type is included when .includeContentType() is queried.
120-
}, function error(err) {
122+
```javascript
123+
const Query = Stack.ContentType('blog').Query();
124+
125+
Query
126+
.where("title", "welcome")
127+
.includeContentType()
128+
.includeCount()
129+
.toJSON()
130+
.find()
131+
.then(function success(result) {
132+
// result is array where -
133+
// result[0] =&gt; entry objects
134+
// result[result.length-1] =&gt; entry objects count included only when .includeCount() is queried.
135+
// result[1] =&gt; schema of the content type is included when .includeContentType() is queried.
136+
}, function error(err) {
121137
// err object
122-
});
138+
})
139+
```
123140

124141
#### Cache Policies
125142

@@ -129,114 +146,121 @@ You can set a cache policy on a stack and/or query object.
129146

130147
This option allows you to globalize a cache policy. This means the cache policy you set will be applied to all the query objects of the stack.
131148

132-
//Setting a cache policy on a stack
133-
Stack.setCachePolicy(Contentstack.CachePolicy.NETWORK_ELSE_CACHE)
149+
```javascript
150+
//Setting a cache policy on a stack
151+
Stack.setCachePolicy(Contentstack.CachePolicy.NETWORK_ELSE_CACHE)
152+
```
134153

135154
##### Setting a cache policy on a query object
136155

137156
This option allows you to set/override a cache policy on a specific query object.
138157

139-
// setting a cache policy on a queryobject
140-
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)
158+
```javascript
159+
// setting a cache policy on a queryobject
160+
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)
161+
```
141162

142163
### Advanced Queries
143164

144-
You can query for content types, entries, assets and more using our JavaScript API Reference.
165+
You can query for content types, entries, assets and more using our JavaScript API Reference.
145166

146167
[JavaScript API Reference Doc](https://contentstack.com/docs/platforms/javascript-browser/api-reference/)
147168

148169
### Working with Images
149170

150171
We have introduced Image Delivery APIs that let you retrieve images and then manipulate and optimize them for your digital properties. It lets you perform a host of other actions such as crop, trim, resize, rotate, overlay, and so on.
151172

152-
For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, https://images.contentstack.io/v3/assets/blteae40eb499811073/bltc5064f36b5855343/59e0c41ac0eddd140d5a8e3e/download?crop=300,400. There are several more parameters that you can use for your images.
173+
For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, https://images.contentstack.io/v3/assets/blteae40eb499811073/bltc5064f36b5855343/59e0c41ac0eddd140d5a8e3e/download?crop=300,400. There are several more parameters that you can use for your images.
153174

154-
[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).
175+
[Read Image Delivery API documentation](https://www.contentstack.com/docs/apis/image-delivery-api/).
155176

156177
Following are Image Delivery API examples.
157178

158-
// set the quality 100
159-
imageUrl = Stack.imageTransform(imageUrl, {
160-
'quality': 100
161-
})
162-
163-
// set the quality to 100, auto optimization, width and height
164-
imageUrl = Stack.imageTransform(imageUrl, {
165-
'quality': 100,
166-
'auto': 'webp',
167-
'width': 100,
168-
'height': 100
169-
})
179+
```javascript
180+
// set the quality 100
181+
imageUrl = Stack.imageTransform(imageUrl, {
182+
'quality': 100
183+
})
184+
185+
// set the quality to 100, auto optimization, width and height
186+
imageUrl = Stack.imageTransform(imageUrl, {
187+
'quality': 100,
188+
'auto': 'webp',
189+
'width': 100,
190+
'height': 100
191+
})
192+
```
170193

171194
### Using the Sync API with JavaScript SDK
172195

173196
The Sync API takes care of syncing your Contentstack data with your app and ensures that the data is always up-to-date by providing delta updates. Contentstack’s JavaScript SDK supports Sync API, which you can use to build powerful apps. Read through to understand how to use the Sync API with Contentstack JavaScript SDK.
174-
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).
197+
[Read Sync API documentation](https://www.contentstack.com/docs/platforms/javascript-browser#using-the-sync-api-with-javascript-sdk).
175198

176199
##### Initial sync
177200

178201
The Initial Sync process performs a complete sync of your app data. It returns all the published entries and assets of the specified stack in response.
179202

180203
To start the Initial Sync process, use the syncStack method.
181-
182-
let data = Stack.sync({"init": true})
183-
data.then(function(sync_data, err) {
184-
//error for any error description
185-
//sync_data.items: contains sync data
186-
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
187-
//sync_token.syncToken: for performing subsequent sync after initial sync
188-
if (err) throw err
189-
})
190204

191-
The response also contains a sync token, which you need to store, since this token is used to get subsequent delta updates later, as shown in the Subsequent Sync section below.
205+
```javascript
206+
let data = Stack.sync({"init": true})
207+
data.then(function(sync_data, err) {
208+
//error for any error description
209+
//sync_data.items: contains sync data
210+
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
211+
//sync_token.syncToken: for performing subsequent sync after initial sync
212+
if (err) throw err
213+
})
214+
```
192215

193-
You can also fetch custom results in initial sync by using advanced sync queries.
216+
The response also contains a sync token, which you need to store, since this token is used to get subsequent delta updates later, as shown in the Subsequent Sync section below.
194217

218+
You can also fetch custom results in initial sync by using advanced sync queries.
195219

196220
##### Sync pagination
197221

198-
If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.
222+
If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.
199223

200-
201-
let data = Stack.sync({"pagination_token" : "<pagination_token>"})
202-
data.then(function(result, err) {
203-
//error for any error description
204-
//result.items: contains sync data
205-
//result.paginationToken: For fetching the next batch of entries using pagination token
206-
//result.syncToken: For performing subsequent sync after initial sync
207-
if(err) throw err
208-
})
224+
```javascript
225+
let data = Stack.sync({"pagination_token" : "<pagination_token>"})
226+
data.then(function(result, err) {
227+
//error for any error description
228+
//result.items: contains sync data
229+
//result.paginationToken: For fetching the next batch of entries using pagination token
230+
//result.syncToken: For performing subsequent sync after initial sync
231+
if(err) throw err
232+
})
233+
```
209234

210235
##### Subsequent sync
211236

212237
You can use the sync token (that you receive after initial sync) to get the updated content next time. The sync token fetches only the content that was added after your last sync, and the details of the content that was deleted or updated.
213238

214-
215-
let data = Stack.sync({"sync_token" : “<sync_token>”})
216-
data.then(function(sync_data, err) {
217-
//error for any error description
218-
//sync_data.items: contains sync data
219-
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
220-
//sync_token.syncToken: for performing subsequent sync after initial sync
221-
if(err) throw err
222-
})
239+
```javascript
240+
let data = Stack.sync({"sync_token" :<sync_token>”})
241+
data.then(function(sync_data, err) {
242+
//error for any error description
243+
//sync_data.items: contains sync data
244+
//sync_data.paginationToken: for fetching the next batch of entries using pagination token
245+
//sync_token.syncToken: for performing subsequent sync after initial sync
246+
if(err) throw err
247+
})
248+
```
223249

224250
##### Advanced sync queries
225251

226252
You can use advanced sync queries to fetch custom results while performing initial sync.
227253
[Read advanced sync queries documentation](https://www.contentstack.com/docs/guide/synchronization/using-the-sync-api-with-javascript-sdk#advanced-sync-queries)
228254

229-
230-
231255
### Helpful Links
232256

233-
- [Contentstack Website](https://www.contentstack.com)
234-
- [Official Documentation](https://contentstack.com/docs)
235-
- [Content Delivery API Docs](https://contentstack.com/docs/apis/content-delivery-api/)
257+
- [Contentstack Website](https://www.contentstack.com)
258+
- [Official Documentation](https://contentstack.com/docs)
259+
- [Content Delivery API Docs](https://contentstack.com/docs/apis/content-delivery-api/)
236260

237261
### The MIT License (MIT)
238262

239-
Copyright © 2012-2019 [Contentstack](https://www.contentstack.com). All Rights Reserved
263+
Copyright © 2012-2020 [Contentstack](https://www.contentstack.com). All Rights Reserved
240264

241265
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
242266

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@
6363
"babel-runtime": "6.26.0",
6464
"compression-webpack-plugin": "1.0.1",
6565
"es3ify-loader": "0.2.0",
66-
"jsdoc": "^3.5.5",
67-
"jshint": "2.9.5",
66+
"jsdoc": "3.5.5",
67+
"jshint": "2.11.0",
6868
"nodemailer": "^4.3.1",
6969
"request": "^2.83.0",
7070
"string-replace-loader": "1.3.0",

0 commit comments

Comments
 (0)