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 git@github.com: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
- Select any content type under the Content Model content type list. See screenshot.
- Click Add field button. See screenshot.
- Select JSON Object as the field type. See screenshot.
- Fill in Name and Field ID and click Create and configure. See screenshot.
- Select Appearance tab. See screenshot.
- Select Spotify search
- 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.