robinandeer / contentful-suggest-category-ui-extension

Contentful UI Extension for automatically suggesting category based on text input.

Suggest Category Contentful UI Extension

Example UI extension for Contentful that shows you how to integrate a third party API.

You can find the presentation files under /presentation.

Prerequisites

You will need:

1. A Contentful account and space with at least a content type with a "description" text field and a "category" symbol field.

2. A free API key for Dandelion.

Install

With the repo cloned/downloaded, you should start by running the following commands:

npm install
npm run login
npm run configure
npm start

How to use the repo

You can check out the commits to follow along step-by-step.

0. Bootstrap

   The initial commit shows you the boilerplate code generated by the create-contentful-extension CLI. The choices made for the setup were "Field extension" type, "Symbol" field type, and "JavaScript" for the language.

1. Forma 36 components

   This commit adds the React components needed for the custom UI extension. A text input to show the suggested category and a button for updating the category.

2. External change handlers

   Updates the change handlers for keeping the "category" and "description" fields up-to-date. This is important e.g. when multiple people edit the same entry simultaneously.

3. Style tweaks & CSS variables

   Tweaks the spacing between the components. This uses the pre-defined CSS variables imported from the @contentful/forma-36-tokens library.

4. Integrate API

   Adds axios as a new dependency to make HTTP requests. Adds an installation parameter to pass the Dandelion API token to the UI extension. Integrates the Dandelion API to automatically predict the category based on the text in the "description" field.