Backend

For the content management system (CMS), we are using Strapi .
The CMS is accessible at https://api.melt.karls.computer.

Using the CMS

🌍 Context

The CMS is hosted on this server which is provided by Greenhost. For now, I have dedicated 2GB of storage for this. If you would like more storage, please let me know.

There are two types of users on Strapi: admin and author/editor. As admin, I can create content types, update the infrastructure, change the API, and create and delete users. As author/editor, you can upload files, create content, edit it, publish it, unpublish it and delete it.

You will recieve a link from me that will direct you to a page where you can authenticate your user. Please store your credentials.

🖥️ Environment

Once authenticated, you will be presented with the content management environment. On the top right, there are the buttons to log out and change the interface language. On the left side, there is a navigation menu with all the collections and single types (more info below). The rest of the interface is the editing area. It changes based on the part of the navigation that you are in.

📄 Single Types

In Strapi, Single Types are only one entry.

In this project, the 5 "quadrants" of the website are each handled by a single type:

                     ┌──────────┐
                     │meditation  │
                     │            │
                     │            │
                     │            │
        ┌──────────┼──────────┼──────────┐
        │ice         │map         │lecture     │
        │            │            │            │
        │            │            │            │
        │            │            │            │
        └──────────┼──────────┼──────────┘
                     │colophon    │
                     │            │
                     │            │
                     │            │
                     └──────────┘

In each of these entries, you will have at least the following 4 fields:

• — Title: This is the title of the quadrant. It may or may not be visible on the website itself but is an important field.
• — slug: The slug is, in general, the most important field in any entry on the CMS. Slugs are what the website will construct unique URLs with. In the case of the quadrants, the slug is autogenerated based on the Title field (changing the title will change the slug too).
• — Position: The position where the quadrant falls in the above structure. Please do not use the same position for two different quadrants.
• — FallbackMessage: This is the field we can use to place text on the website for quadrants that are not yet finalized when the website goes public, for instance in the Meditation quadrant.

Each of the quadrants will have some of their own unique fields:

• — There are Video and Caption fields for the Ice and Lecture quadrants. These will carry the video and subtitle files of the respective quadrants.
• — Some quadrants have a Description field. We can use these as we like.
• — The Colophon will have a so-called "Dyanmic Zone" named Body. In this zone, you can choose to add as many Rich Text fields or Media Galleries as you'd like, and re-order them too. The order will reflect on the website.
• — The Map and Meditation quadrants are very likely to grow with more fields as we continue to develop the project.

🗄️ Collections

In Strapi, Collections contain many entries. When viewing a collection, you can view, filter, sort, search, create, edit, publish, unpublish or delete an entry.

Any data-type in the project that can be enumerated is handled as a collection:

TimeSnippets

These are the time snippets that go in the Map quadrant. The fields Keyword, slug, Audio, and Captions are mostly self-explanatory. More complex fields:

• — X and Y: These fields represent the coordinates of the time snippet on the map. I have to still figure out what units / coordinate system to use.
• — Shape: This is an SVG image file from which a path is extracted and eventually used to shape the keyword on the Map. The current uploaded images are from an old project and are circular, but any curvy path will do.
• — Description: This is an open feild for now, we can use it for any text-based information we'd like to add to the time snippets.
• — Anchor: This field (kinda hidden on the right side) is a relational one: It represents the list of entries in the "Anchors" collection (see below). You can pick only one Anchor to link a time snippet to, but Anchors can have many time snippets.

Anchors

These are the anchors on the map to which the time snippets attach themselves. When an anchor is "activated" its related time snippets would become visible/audible. The fields Name, slug, X, and Y are similar to the fields in the Time Snippets collection.

• — Animation: This is the image or video file that visually represents the anchor on the map. Should also not be too big, as it will continue looping.
• — Snippets: This field is hidden to the right, this is where the Time Snippets are linked to the Anchors as explained above. Many snippets can belong to one anchor.

This data-type is still in development but we can think together what other fields to include.

✏️ Editing

All entries have different fields. Most of them are self-explanatory.

Some fields support rich text and are edited in Markdown. There is a built-in editor for rich text fields that will provide all the formatting options as buttons. When you select text and click the 'Bold' button, it will create the syntax that will make that text bold. To see how a rich text is going to be formatted on the website, you can click the Switch to Preview button on the upper right corner of the rich text editors.

Markdown cheat sheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet/.

When you want to include an image in a rich text, you can click the image icon on the editor and either choose a previously uploaded image, or upload a new one. This will paste a URL to the image in the text. You can see this in action on the entries that are already there.

Please upload as many files as you like. The upload limit is set to 400mb per file at the moment.

Please note the following about links: all aboslute links (starting with "http...") will open in a new tab when clicked in the website. All relative links (starting with "/...") will use the website's custom router to scroll to the different part of the canvas.

So if you want to link from one part of the website to another, and you are using the rich text editor, please use relative links based on the slugs from other fields, and format them as follows:

[Internal Link](/slug)                    <!-- internal link template -->
[Go to Meditation!](/meditation)          <!-- internal link example  -->
[External Link](https://domain.org)       <!-- external link template -->
[Visit our site!](http://meltionary.com/) <!-- external link example  -->

Development

(for karl)

Local

First,

npm install

Then,

npm run develop

Here, you can make changes to the API, add and remove extensions, change user roles, etc... Please note, removing a property from an object could delete all the entries from the database for that object.

Then stage, commit and push your changes to the remote server.

Remote

Strapi is running on http://localhost:1342 and proxied to https://api.melt.karls.computer.

The initial set up starts with the build command:

NODE_ENV=production npm run build

Then,

pm2 start "NODE_ENV=production npm run start" --name "API.MELT"

We are using pm2 to manage the service.

If changes have been made and pushed to the server, re-build the admin interface if necessary, and then restart the process:

pm2 restart API.MELT