Tutorial: Nested Content in Content Island

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• Defining the model
• Adding content
• Using the API: A Simple Vanilla TypeScript Example
• Applying Nested Collections in a Real Astro Project

Defining the model

When defining data structures in Content Island, we have a series of basic types available: text, number, boolean, date, etc. But there are times when it's useful to be able to link an object or lists of objects that we have previously created.

Let's imagine we want to create a portal to display online courses. A low-fidelity mockup might look like this:

What entities will we need to create?

• An entity for the courses.
• An entity for the course lessons.

What is the situation here? A course will contain one or more lessons.

You can try it live/online here: Open in StackBlitz.

You can also clone the repo with the full demo here: Clone full demo repository

Let’s get to work. I'm going to create a project that will be called:

collection-example

• We generate an API token.

• We choose English as the project language.

And now let’s model this in Content Island.

• First, I’ll create the lessons collection. For this, I’ll add the following fields:

  • title (short text): Lesson title.

  • slug (short text): The URL segment that will identify the course in a friendly way.

  • content (long text): The lesson description.

  • video (short text): YouTube URL of the lesson video (Content Island also allows you to directly upload the video and publish it on a CDN, but for simplicity, we’ve chosen a YouTube video).

• Now I’ll create the course entity (training). For this, I’ll add the following fields:

  • title (short text): Course title.

  • slug (short text): The URL segment that will identify the course in a friendly way.

  • thumbnail (media): Image representing the course.

  • overview (long text): Course description.

  • lessons (collection): The lessons that belong to this course <-- be careful, if we set this as required, we must first create the lessons collection.

We now have the data model created. Let's proceed to create a course and some lessons.