Spotify search Contentful UI Extension

Auto-complete Spotify search as Contentful UI Extension.

Features

• Auto-complete Spotify (track) search
• Preview for selected Spotify entry in a pop-up window
• Support for single Spotify entry per Contentful field

Installation

git clone [email protected]:tuunanen/cf-ui-ext-spotify.git
cd cf-ui-ext-spotify
npm install

Configure

Create a configuration file with your credentials for Contentful.

cp env.example .env

Open .env in a editor of your liking and add your Contentful space ID, and management token. Learn how to obtain a token.

Load environment variables

source .env

Build

npm run build

Files processed by the build task will be located under dist directory.

Create

npm run create

Create task will register the extension in your space on Contentful.

Update

npm run update

Update task will upload the extension to your space on Contentful.

How to add Spotify search field to content type

1. Select any content type under the Content Model content type list. See screenshot.
2. Click Add field button. See screenshot.
3. Select JSON Object as the field type. See screenshot.
4. Fill in Name and Field ID and click Create and configure. See screenshot.
5. Select Appearance tab. See screenshot.
6. Select Spotify search
7. Hit Save

Development

npm run dev

Development task starts a development server at http://localhost:8000, and tells the Contentful App to load the extension from there instead of loading it from the API.

If you now open an entry that uses the extension in your browser it will use the code from your local machine. Please note that you need to enable insecure content since the Contentful App is served through HTTPS but your extension is not. Learn how to enable insecure content in Firefox and Chrome.

Changelog

Please see changelog.

License

Copyright © tuunanen

Licensed under the MIT license.