This project was bootstrapped with Create Contentful App.

Adapt Essentials: Advanced Descriptions

A simple tool to help your developers make life easier for the content editors!

This application is designed to provide extensive descriptions about your content types with the help of images and longer help texts.

Why?

Quite often developers implement custom logic behind the scenes that changes the way a content type is being rendered on the website. For a content editor without any development experience, that can lead to confusion and multiple trial and error testing before achieving the desired result.

The solution is to provide additional visual information for your content types so that editors know what kind of variations they can build.

How to use it?

Create description

Once you've installed the application, in the configuration screen simply press Create a description and a modal will show up asking you to choose which content type would you like to create a description for.

By default, a description will have a single text field. Text fields are supported by markdown and you can see how it will look by pressing Preview text. If a text field is not enough, you have the options to add image fields too.

⚠️ Once you are done adding descriptions for your content types, don't forget to hit Save in the top right corner!

Configure content type

The next and final step is to enable the application for your content types. Simply hit the Open configuration button for each content type you've added descriptions for and enable the application in your Sidebar or Entry editors sections.

ℹ️ We recommend using the Entry editors view since it has more space available for displaying your descriptions.

Sidebar	Entry editors

Final result

After you've configured everything correctly, go to an entry of your configured content type and you should see your descriptions in the Entry editor or the Sidebar! In the screenshot below, we have them configured in both places.

Bug reports

If you've found any bugs, please open an issue here: https://github.com/adaptdk/adapt-essentials-sidebar-descriptions/issues

Feature requests

If you think the application is missing any features, please open an issue here: https://github.com/adaptdk/adapt-essentials-sidebar-descriptions/issues

Privacy Policy

---

Development

Execute create-contentful-app with npm, npx or yarn to bootstrap the example:

# npx
npx create-contentful-app --example vite-react

# npm
npm init contentful-app --example vite-react

# Yarn
yarn create contentful-app --example vite-react

Available Scripts

In the project directory, you can run:

npm start

Creates or updates your app definition in Contentful, and runs the app in development mode. Open your app to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

npm run upload

Uploads the dist folder to Contentful and creates a bundle that is automatically activated. The command guides you through the deployment process and asks for all required arguments. Read here for more information about the deployment process.

npm run upload-ci

Similar to npm run upload it will upload your app to contentful and activate it. The only difference is that with this command all required arguments are read from the environment variables, for example when you add the upload command to your CI pipeline.

For this command to work, the following environment variables must be set:

• CONTENTFUL_ORG_ID - The ID of your organization
• CONTENTFUL_APP_DEF_ID - The ID of the app to which to add the bundle
• CONTENTFUL_ACCESS_TOKEN - A personal access token

Libraries to use

To make your app look and feel like Contentful use the following libraries:

• Forma 36 – Contentful's design system
• Contentful Field Editors – Contentful's field editor React components

Using the contentful-management SDK

In the default create contentful app output, a contentful management client is passed into each location. This can be used to interact with Contentful's management API. For example

// Use the client
cma.locale.getMany({}).then((locales) => console.log(locales));

Visit the contentful-management documentation to find out more.

Learn More

Read more and check out the video on how to use the CLI.