How Craft CMS manages the tool’s content

Here is the link to the 3D tool: https://sternenhimmel-der-menschheit.de/explore

It was planned since the beginning that Heavens of Mankind would need a CMS to allow any member of the team to edit its content. Some parts were quite straightforward (adding new articles…) while others were more complex.

Using the CMS for the article's content

Heavens of Mankind has a lot of informative content on the stars. Specific stories about particular ethnic groups can be found in the article section and the tool. Adding those articles to the CMS was done quite early on, in the project, and was a straightforward process (a few fields correspond to the individual needs of the page: the overview image of the night sky, the current culture, and rich text, with the possibility to add images with a few formatting options). Adding this content to the tool, was a lot more complex, but necessary, as only developers would be able to update it otherwise.

Having the content in the tool coming from the CMS is difficult because it offers different features: it's possible to click on some part of the text to control the camera in the 3D scene.

Whoever edits the content needs to be able to add those interactive elements directly in the text editor. It needs to communicate where the interactive text should start, and where it should finish as well as give information on what the new camera position should be. This is done by specifying the ID of the constellation the camera should show. Since using it should be easy, requiring the editor to add a custom HTML element, was also not an option.

Thankfully, amezmo gives the possibility to create categories and then link to those. I used this technique to create a custom link, which contains the constellation ID.

Links to those categories can be added directly, in the rich-text editor (the only requirement is knowing the constellation's name). It then gets processed while building the website. TypeScript identifies which links should stay in the article (because they should be used as regular links) and which ones should be removed (for the article page) or transformed into an object (for the tool) thanks to a regular expression.

const germanCharacters = "ääööüüß"

export const possibleCharacters = {
  slug: `[${germanCharacters}a-z0-9\\/\\-]+`,
  normalText: `[${germanCharacters}\\[\\]_a-z0-9\\(\\)\\-\\–"'\`‚‘’“”\\/., \\])]+`,
  linkBeggining: `<a href="https:\\/\\/[a-z0-9.]*`,
  linkEnd: `<\\/a>`,
  internalLink: "amezmo.co",
}

const cmsCameraTargetKeyword = "camera-target-id"

export const isolateCameraTargetId = {
  beggining: `${possibleCharacters.linkBeggining}\\/${cmsCameraTargetKeyword}\\/`,
  middle: `[a-z\\-]+`,
  end: `">`,
}


export const isolateCameraTargetText = {
  beggining: `${isolateCameraTargetId.beggining}${isolateCameraTargetId.middle}${isolateCameraTargetId.end}`,
  middle: `[${germanCharacters}_a-z0-9\\-–"'\`‚‘’“”\\/., \\])]+`,
  end: `<\\/a>`,
}

export const isolateCameraTargetTextLinkBeggining = `${isolateCameraTargetId.beggining}${isolateCameraTargetId.middle}${isolateCameraTargetId.end}`

The data for the camera positions is in a JSON file located on the front end (all of them have a constellation ID). The naming convention for the constellation’s IDs had to be modified to use with the CMS. Before using the CMS, I could separate them based on the current culture, which means there was no incident when different constellations had the same ID. However, they are not separated that way in the CMS. To reproduce this isolation per culture, the constellation ID is now written cultureNameConstellationName.

The search tool

These categories are also used for the search tool. To choose which constellations are shown and in which order, a list is created for each culture. The user can also drag and drop those categories to modify their order. The hidden constellations (which only appear when the user clicks a certain element in the “story”) and some that are not in the 3D scene (only in the 2D version) will not be shown.

Editing the constellations in the search tool can be time-consuming, especially in some cultures, which have a lot of constellations. It was built this way to give more control to the content editor over which constellations should be in, and in which order (since it was not clear if they should have a specific order or not).

The cultures

The cultures are also present in the tool as categories. This helps to ensure that their naming is consistent throughout the website. They are also used to display a citation and an image shown for the go-back button, in the tool.

What the CMS can not control

The camera targets

Various parts of the Tool’s content can still not be updated with the CMS. The first one is the camera targets (which specify to which position the camera should animate, to show a constellation). Those will not be added, first because it’s not possible to create them unless you have access to the front-end part of the code, and second because processing them with Node.js makes it possible to add tests to make sure they will not cause any issues (if the vector of the camera position and the camera up are parallel, it will cause issues).

The labels

It's not possible to edit the labels of the 3D scene either, even though this means some content will be duplicated (the constellation labels are both used in the search tool and in the 3D scene). I left it this way because they have a high level of customization (size, color, alignment, line break...) along with some features added with Node.js (if the label is orange, it will color the star it is linked to, if its position is not close enough to any star, it will return the average position taken from an array of star...) and as this list of special requirements keeps growing, it seemed that adding it to the CMS might not be worth it.

The star colors

The stars can be white, orange, or red. To modify their color, all that's needed is to add their HR number to a list. This information will then be processed: if the HR number is in the list of red stars, it will be colored red (even if it's also in the list of orange stars) otherwise it will be orange if it's in the list of orange stars or if its label is orange and there's no additional property specifying that the star should not be colored.

The constellations

The constellations are created in a custom tool, which is not included in the website. They are made from 2D illustrations, transformed into 3D meshes, and then transformed so that the 3D mesh position will match the position of the stars in the same way that the 2D illustration does.

Ludivine Constanti's Blog