@arc-core-components/content-source_story-feed_tag-v4

In conjunction with the ans-feed schema, returns a list of stories with a particular tag.

Usage no npm install needed!

<script type="module">
  import arcCoreComponentsContentSourceStoryFeedTagV4 from 'https://cdn.skypack.dev/@arc-core-components/content-source_story-feed_tag-v4';
</script>

README

Content Source: Story Feed, Tag v4 endpoint

This the Arc Core Component representing a content source that hooks into the Content API portion of the Arc Suite and returns a feed of published stories with a particular tag.

The most important part is the pattern, which defines the endpoint that PageBuilder Fusion uses to look up content.

This Core Component takes advantage of PageBuilder Fusion's ability to use CONTENT_BASE to define the credentials for a Content API, ensuring that no private secrets are exposed.

Pattern:

/content/v4/search/published?q=canonical_website:${website}+AND+taxonomy.tags.slug:${tagSlug}&size=${feedSize}&from=${feedOffset}&sort=display_date:desc&website=${website}

Parameters:

This content source takes three parameters:

  • tagSlug - the slug of the tag you would like to return stories from
  • feedSize - the number of stories you would like returned in the feed
  • feedOffset - the number of stories you want to be offset from the start of the feed

Getting started

This Core Component must be used within a Fusion project.

  1. Add this schema as a dependency of the repo. npm install @arc-core-components/content-source_story-feed_tag-v4
  2. Create a file of your desired content source name within the /content/sources folder. For this content source, the suggested name is story-feed-tag-v4.js
  3. This is the name you should use when referencing this content source in any content config within a custom field.
  4. Paste the following into story-feed-tag.js:
import source from "@arc-core-components/content-source_story-feed_tag-v4";

export default source;

What does this content source return?

This will return a feed of stories with a single tag.

Using this content source with a schema

This content source can be used with the ans-feed schema. This schema is defined as a Core Component here.

Testing & Linting

We are using Jest and XO for testing and linting.

We are using Husky to run a pre-push hook, preventing un-linted or code that fails tests from making it into the repo.

To test: npm test

To lint: npm run lint - This will also fix any simple linter errors automatically.

To push without testing or linting: git push --no-verify - This can often be helpful if you just need to push a branch for demonstration purposes or for help.