This is a starter template for the Contentful Studio.
The first thing you'll need is your Contentful CMA Token, and access to the Studio Hackathon Organization.
- Clone the repository
- Run
npm install - Run
npm run setup - Run
npm run dev
Setup will ask you a few questions, and create a space for you as well as update your .env.local file. It may take a few minutes to import the assets.
Since the Studio root needs to be used as a client component there is a separate component that is used to wrap the studio root. This is located in src/app/_studio/studio.tsx. This is the entry point for the studio.
Components used in studio live in src/app/_studio. General components used for layouts and the like are in src/app/_components.
Each studio components is contained in a directory. The component itself lives in the file [ComponentName]Component.tsx. The component's studio definition lives in the same folder under the index.ts file.
The registration for studio components lives in src/lib/register-components.ts.
This project uses Tailwind CSS. You can find the configuration in tailwind.config.js. However the colors are located in studio.config.js. This is so we can use the colors in the studio design tokens as well.
This project uses next-intl to do translations. You can find the manual translation files in the translations directory. The experience builder will pick up which language you are using and send it to Contentful.