Creating a basic data model

Atomic data is strictly typed meaning we need to define the data model first. To do this well make an ontology.

NOTE:
Youll likely have some stuff in your atomic data browser sidebar that you wont see in these screenshots. This is because I created a new drive for the purpose of this guide (you can visit the drive yourself to see what the end result will look like here)

To create an ontology click on the plus icon in the top left of the page. From the list of classes pick Ontology.

A dialog will pop up prompting you to pick a name. Im going to call it my-portfolio but you can choose something else like epic-pencil-sharpening-enjoyers-blog (try to keep it short though because the CLI will use this when generating the typescript types).

Click Create, you should now see the new ontology. Click Edit to start editing.

Lets start by creating a class with the name homepage. For now, well give our homepage the required properties: name, heading, sub-heading, body-text and header-image.

For the name property, we can use the existing atomic property name.

NOTE:
If a class has a title or name that describes the instance, e.g. books and movies have a title and a person has a name, you should always use the existing name property. This makes it more easy to share data between applications and implementations.

Click on the + icon under Requires and type name. The existing name property should be the first option in the list (If its not in the list you might have to start Atomic Server with the --initialize flag once to make sure all pre-existing resources are known to the server). The name property will serve as the name of our homepage resource and well use it as the html title of the website.

Once you click on name youll see that the property is added to the list but is greyed out, this is because it is an external resource not defined in the ontology and you do not have edit rights for it. Because you do have read rights though you can still add it to the list.

The next few props dont already exist so well have to create them.

Click the + button again and type: heading. An option with Create: heading should be visible. Click it and give it a description like Heading text displayed in the header. The datatype should be STRING which is selected by default.

Do the same for subheading.

Next, create a property called body-text but change the datatype to MARKDOWN.

The last property well add is header-image. The datatype should be Resource, this means it will reference another resource. Since we want this to always be a file and not some other random class we are going to give it a classtype. To do this click on the configure button next to the datatype selector. A dialog should appear with additional settings for the property. In the Classtype field search for file. An option with the text file - A single binary file should appear, select it and close the dialog.

Your ontology should look something like this now []

Alright, our model is done for now, lets create the actual homepage resource and then well move on to generating types and fetching the data in the frontend.