Overview

This weekend I customized my Sanity.io + Gatsby blog CMS to include p5.js Web Editor embeds and CodePen embeds. You can virtually embed anything with an iframe!

Why am I doing this?

• To store URL data as structured content and render them in frontend
• Storing URLs is more structured than storing iframe code.

Useful links

I studied these articles below to customize my blog:

• Integrating Codepen
• Integrating Youtube(video)

Steps

/studio

1. make p5editor.js component inside /schemas

source code

• fields (the url) → need to chop URL
• add initializer for URL to prevent CMS crush
• add preview: change the iframe html tag into react component
• optional: add validation rule in fields: [name: .., type: .., ..]
  • validation: Rule => Rule.error('You have to fill out the URL.').required()

2. import component in schema/schema.js

• add type in types: schemaTypes.concat([...])
• → the component becomes a global variable

3. add type in bodyPortableText.js

• { type: 'p5editor' }

4. make sure you installed the right dependencies in /studio (if you are using one)

/web

1. make p5editor.js component in /src/components

• same as in /studio, preview becomes the component
• pass node instead of value

2. import component in serializers.js and add type

• types: { ...., p5editor: p5Editor}

3. make sure you installed the right dependencies in /web (if you are using one)

Troubleshooting

1. try installing the right dependencies in both /studio and /web

2. "build fail with exit code 2 in netlify"

• change netlify build command: npm run build-web → npm-run build (this worked for me)
• npm install or npm update (this didn't work for me)

3. Deploy succeeds but studio CMS editor crushes

• add validation rule in components inside of /studio
• add initializer for fields in component such as url (e.g. const { url='' } = value)