From 3b5378a6ca00625f924778463e3090252ae5b767 Mon Sep 17 00:00:00 2001 From: Nadeem Patwekar Date: Wed, 26 Mar 2025 18:20:13 +0530 Subject: [PATCH] docs: update readme with typescript sdk code snippets --- README.md | 172 +++++++++++++++++++++++++++++------------------------- 1 file changed, 93 insertions(+), 79 deletions(-) diff --git a/README.md b/README.md index 26d3197..8bcfd98 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,6 @@ To get started with JavaScript, you will need the following: - Node.js 10 or later ## SDK Installation and Setup -> Note: If you are using JavaScript Contentstack SDK, you don’t need to run the command as ‘@contentstack/utils’ is already imported in the SDK. Use the following command to install Contentstack JavaScript Utils SDK: ```sh @@ -87,50 +86,62 @@ Contentstack Utils SDK lets you interact with the Content Delivery APIs and retr ### Fetch Embedded Item(s) from a Single Entry #### Render HTML RTE Embedded object To get an embedded item of a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use the `includeEmbeddedItems` and `Contentstack.Utils.render` functions as shown below: -```js -import * as Contentstack from 'contentstack' -const stack = Contentstack.Stack({ - api_key: '', - delivery_token: '', - environment: ''}) - -stack.ContentType('') - .Entry('') - .toJSON() - .includeEmbeddedItems() // include embedded items - .fetch() - .then(entry => { - Contentstack.Utils.render({ entry, renderOption }) - }) +```ts +import contentstack, { StackConfig } from '@contentstack/delivery-sdk'; + +const params: StackConfig = { + apiKey: , + deliveryToken: , + environment: , +} +const Stack = contentstack.stack(params); + +const result = await Stack + .contentType('') + .entry('') + .includeEmbeddedItems() + .fetch(); + +Contentstack.Utils.render({ + entry: result, + renderOption +}) ``` If you have multiple RTE fields in an entry and want to fetch the embedded items from a particular RTE field, you need to provide a path of those RTE fields. Refer to the example code below: -```js +```ts //code to render embedded item from an RTE field and from another RTE field nested within a group field -Contentstack.Utils.render({ entry, path: ["rte_fieldUid", "group.rteFieldUID"], renderOption }) +Contentstack.Utils.render({ + entry: result, + path: ["rte_fieldUid", "group.rteFieldUID"], + renderOption +}) ``` #### Render Supercharged RTE contents To get a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHTML` function as shown below: -```js -import * as Contentstack from 'contentstack' -const stack = Contentstack.Stack({ - api_key: '', - delivery_token: '', - environment: ''}) - -stack.ContentType('') - .Entry('') - .toJSON() - .fetch() - .then(entry => { - Contentstack.Utils.jsonToHTML({ - entry, - path: ["rte_fieldUid", "group.rteFieldUID"], - renderOption - }) - }) +```ts +import contentstack, { StackConfig } from '@contentstack/delivery-sdk'; + +const params: StackConfig = { + apiKey: , + deliveryToken: , + environment: , +} +const Stack = contentstack.stack(params); + +const result = await Stack + .contentType('') + .entry('') + .includeEmbeddedItems() + .fetch(); + +Contentstack.Utils.jsonToHTML({ + entry: result, + paths: ["rte_fieldUid", "group.rteFieldUID"], + renderOption +}) ``` > Node: Supercharged RTE also supports Embedded items to get all embedded items while fetching entry use `includeEmbeddedItems` function. @@ -138,53 +149,56 @@ stack.ContentType('') #### Render HTML RTE Embedded object To get embedded items from multiple entries, you need to provide the content type UID. You can also use the path variable in case the entries have multiple RTE fields. -```js -import Contentstack from 'contentstack' -const stack = Contentstack.Stack({ - api_key: '', - delivery_token: '', - environment: ''}) - -stack.ContentType('') - .Query() - .toJSON() - .where('title', '') - .includeEmbeddedItems() // include embedded items - .find() - .then(result => { - result.forEach(entry => { - Contentstack.Utils.render({ - entry, - path: ['rte', 'group.rteFieldUID'], - renderOption - }) - }) - }) +```ts +import contentstack, { StackConfig } from '@contentstack/delivery-sdk' + +const params: StackConfig = { + apiKey: , + deliveryToken: , + environment: , +} +const Stack = contentstack.stack(params); + +const result = await Stack + .contentType('') + .entry() + .includeEmbeddedItems() + .find(); + +result.entries.forEach(entry => { + Contentstack.Utils.render({ + entry, + paths: ["rte_fieldUid", "group.rteFieldUID"], + renderOption + }) +}) ``` #### Render Supercharged RTE contents To get a multiple entries, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHTML` function as shown below: -```js -import * as Contentstack from 'contentstack' -const stack = Contentstack.Stack({ - api_key: '', - delivery_token: '', - environment: ''}) - -stack.ContentType('') - .Query() - .toJSON() - .where('title', '') - .find() - .then(result => { - result.forEach(entry => { - Contentstack.Utils.jsonToHTML({ - entry, - path: ["rte_fieldUid", "group.rteFieldUID"], - renderOption - }) - }) - }) +```ts +import contentstack, { StackConfig } from '@contentstack/delivery-sdk'; + +const params: StackConfig = { + apiKey: , + deliveryToken: , + environment: , +} +const Stack = contentstack.stack(params); + +const result = await Stack + .contentType('') + .entry() + .includeEmbeddedItems() + .find(); + +result.entries.forEach(entry => { + Contentstack.Utils.jsonToHTML({ + entry, + paths: ["rte_fieldUid", "group.rteFieldUID"], + renderOption + }) +}) ``` > Node: Supercharged RTE also supports Embedded items to get all embedded items while fetching entry use `includeEmbeddedItems` function.