Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@craftercms/content
Advanced tools
Changelog
4.1.3
Readme
This package contains services for retrieving content and navigation using APIs offered by Crafter CMS.
All of Crafter CMS packages can be used either via npm or in plain html/javascript via regular script imports.
yarn
or npm
yarn add @craftercms/content
npm install @craftercms/content
craftercms
. You can access all craftercms' packages and functions under this root.content
package depends on rxjs
, @craftercms/utils
, @craftercms/classes
; make sure to import those too before the content
script.Tip: Once you've imported the scripts, type craftercms
on your browser's dev tools console to inspect the package(s)
<div id="myFeature"></div>
<script src="https://unpkg.com/rxjs"></script>
<script src="https://unpkg.com/@craftercms/utils"></script>
<script src="https://unpkg.com/@craftercms/classes"></script>
<script src="https://unpkg.com/@craftercms/content"></script>
<script>
(function ({ content }, { operators }) {
content.getItem(
'/site/website/index.xml',
{ baseUrl: 'http://localhost:8080', site: 'editorial' }
).pipe(
operators.map(content.parseDescriptor)
).subscribe((model) => {
const elem = document.querySelector('#myFeature');
Object.entries(model).forEach(([fieldId, value]) => {
if (fieldId !== 'craftercms') {
const el = document.createElement('div');
el.innerText = `${fieldId}: ${value}`;
elem.appendChild(el);
}
});
});
})(craftercms, rxjs);
</script>
You may pre-configure content services to a certain configuration to then you may omit the config param on subsequent calls to services
import { Item } from '@craftercms/models';
import { getItem } from '@craftercms/content';
import { crafterConf } from '@craftercms/classes';
// Configure crafter services "globally". Your config will be cached.
// All content services use the specified configuration on subsequent calls.
crafterConf.configure({
baseUrl: 'http://authoring.company.com',
site: 'editorial'
});
// Second param "config" will use "http://authoring.company.com" as
// crafter base url and "editorial" as the site to query
getItem('/site/website/index.xml').subscribe((item: Item) => {
console.log(item);
});
The examples below assume usage in the style of using via npm. If you're using the bundles,
directly importing as a script in the browser, these functions will be under the global variable
named craftercms.content
(i.e. window.craftercms.content
).
Parse a Descriptor, Item or a GraphQL response into a Content Instance. It could also be a collection of any of these types.
parseDescriptor(response: Descriptor | Item | GraphQLResponse | Descriptor[] | Item[] | GraphQLResponse)
Parameters | |
---|---|
response | The response of a getItem, getDescriptor or GraphQL fetch call |
parseDescriptor
util to parse the response for you. You may use it to parse getItem, getDescriptor or GraphQL responses. import { map } from 'rxjs/operators';
import { ContentInstance } from '@craftercms/models';
import { getChildren, getItem, parseDescriptor } from '@craftercms/content';
getItem('/site/website/index.xml', { site: 'editorial' }).pipe(
map(parseDescriptor)
).subscribe((content: ContentInstance) => {
console.log(content);
});
getChildren('/site/website', { site: 'editorial' }).pipe(
map(parseDescriptor)
).subscribe((content: ContentInstance[]) => {
console.log(content);
});
Inspects and parses elasticsearch hits and pre-parses objects before they can be sent to parseDescriptor @see https://github.com/craftercms/craftercms/issues/4057
import { createQuery, search } from '@craftercms/search';
import { parseDescriptor, preParseSearchResults } from '@craftercms/content';
search(
createQuery({
query: {
bool: {
filter: [/*...*/]
}
}
}),
{ baseUrl: 'http://localhost:8080', site: 'editorial' }
).pipe(
map(({ hits, ...rest }) => ({
...rest,
hits: hits.map(({ _source }) => parseDescriptor(
preParseSearchResults(_source)
))
}))
).subscribe((results) => {
// Do stuff with results...
});
Get an Item from the content store.
getItem(path: string, config?: CrafterConfig)
Parameters | |
---|---|
path | The item’s path in the content store |
config | Crafter configuration. Optional. Default value in here. |
Item - from the content store
import { Item } from '@craftercms/models';
import { getItem } from '@craftercms/content';
getItem('/site/website/index.xml', { site: 'editorial' }).subscribe((item: Item) => {
console.log(item);
});
parseDescriptor
util to parse the response for you. import { map } from 'rxjs/operators';
import { ContentInstance } from '@craftercms/models';
import { getItem, parseDescriptor } from '@craftercms/content';
getItem('/site/website/index.xml', { site: 'editorial' }).pipe(
map(parseDescriptor)
).subscribe((content: ContentInstance) => {
console.log(content);
});
Get the descriptor data of an Item in the content store.
getDescriptor(path: string, config?: CrafterConfig)
Parameters | |
---|---|
path | The item’s path in the content store |
config | Crafter configuration. Optional. Default value in here. |
Descriptor - from the content store
import { map } from 'rxjs/operators';
import { getDescriptor, parseDescriptor } from '@craftercms/content';
import { Descriptor, ContentInstance } from '@craftercms/models';
// Example 1: Supplying config inline, Descriptor response...
getDescriptor('/site/website/index.xml', { site: 'editorial' }).subscribe((descriptor: Descriptor) => {
console.log(descriptor);
});
// Example 2:
// - Omit config (must have configured earlier @see Usage section above)
// - Parse the response
getDescriptor('/site/website/index.xml').pipe(
map(parseDescriptor) // Optional. Use for a cleaner parsed response.
).subscribe((content: ContentInstance) => {
console.log(content);
});
Get the list of Items directly under a folder in the content store.
getChildren(path: string, config?: CrafterConfig)
Parameters | |
---|---|
path | The folder’s path |
config | Crafter configuration. Optional. Default value in here. |
Item[] - List of Items from the content store
import { getChildren } from '@craftercms/content';
// Example 1: Supplying config inline
getChildren('/site/website', { site: 'editorial' }).subscribe((children) => {
console.log(children);
});
// Example 2: Omits the config param (must have been previously configured, see Usage section above)
getChildren('/site/website').subscribe((children) => {
console.log(children);
});
Get the complete Item hierarchy under the specified folder in the content store.
getTree(path: string, depth: number, config: CrafterConfig)
Parameters | |
---|---|
path | The folder’s path |
depth | Amount of levels to include. Optional. Default is 1 |
config | Crafter configuration. Optional. Default value in here. |
Item - from the content store
import { getTree } from '@craftercms/content';
// This call will get 3 levels of the tree under the specified folder
// Example 1: Config supplied inline
getTree('/site/website', 3, { site: 'editorial' }).subscribe((tree) => {
console.log(tree);
});
// Example 2: Services pre-configured (see "Usage" section above), config param omitted.
getTree('/site/website', 3).subscribe((tree) => {
console.log(tree);
});
Returns the navigation tree with the specified depth for the specified store URL.
getNavTree(path: string, depth: number, currentPageUrl: string, config: CrafterConfig)
Parameters | |
---|---|
path | The folder’s path |
depth | Amount of levels to include. Optional. Default is 1 |
currentPageUrl | The URL of the current page. Optional. Default is '' |
config | Crafter configuration. Optional. Default value in here. |
NavigationItem - from the content store
import { getTree } from '@craftercms/content';
// Example 1: Config supplied inline
getTree('/site/website', 3, { site: 'editorial' }).subscribe((tree) => {
console.log(tree);
});
// Example 2: Services pre-configured (see "Usage" section above), config param omitted.
getTree('/site/website', 3).subscribe((tree) => {
console.log(tree);
});
Returns the navigation items that form the breadcrumb for the specified store URL.
getNavBreadcrumb(path: string, root: string, config: CrafterConfig)
Parameters | |
---|---|
path | The folder’s path |
root | the root URL, basically the starting point of the breadcrumb. Optional. Default is '' |
config | Crafter configuration. Optional. Default value in here. |
NavigationItem[] - List of NavigationItem from the content store
import { getNavBreadcrumb } from '@craftercms/content';
// Example 1: Config supplied inline
getNavBreadcrumb('/site/website').subscribe((navBreadcrumb) => {
console.log(navBreadcrumb);
});
// Example 2: Services pre-configured (see "Usage" section above), config param omitted.
getNavBreadcrumb('/site/website').subscribe((navBreadcrumb) => {
console.log(navBreadcrumb);
});
Transforms a URL, based on the current site’s configuration.
transform(transformerName: string, path: string, config: CrafterConfig)
Parameters | |
---|---|
transformerName | Name of the transformer to apply |
path | URL that will be transformed |
config | Crafter configuration. Optional. Default value in here. |
string - URL transformed according to transformer applied.
import { urlTransform } from '@craftercms/content';
// Example 1: Config supplied inline
urlTransform('storeUrlToRenderUrl', '/site/website/style/index.xml', { site: 'editorial' }).subscribe((webUrl) => {
console.log(webUrl); // "/style"
});
// Example 2: Services pre-configured (see "Usage" section above), config param omitted.
urlTransform('storeUrlToRenderUrl', '/site/website/style/index.xml').subscribe((webUrl) => {
console.log(webUrl); // "/style"
});
import { transform } from '@craftercms/content';
// Assuming that you already set the configuration (as explained above)
// Example 1: Config supplied inline
transform('renderUrlToStoreUrl', '/technology', { site: 'editorial' }).subscribe((path) => {
console.log(path); // "/site/website/technology/index.xml"
});
// Example 2: Services pre-configured (see "Usage" section above), config param omitted.
transform('renderUrlToStoreUrl', '/technology').subscribe((path) => {
console.log(path); // "/site/website/technology/index.xml"
})
FAQs
Crafter CMS services for content and navigation retrieval
The npm package @craftercms/content receives a total of 108 weekly downloads. As such, @craftercms/content popularity was classified as not popular.
We found that @craftercms/content demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.