Heavy Work in Progress

What a day it’s been. Up until very recently, it didn’t look like I would be able to manage the goal I set out to achieve two weeks ago: writing and publishing this devlog entirely through Mattrbld.

Well, despite it almost driving me mad and the editing experience being far from perfect for the time being, here I am, writing this post in the initial stages of what will eventually be the Content Editor. 🎉 Now let’s just hope I’ll be able to publish it once it’s time. 😅

I’m not going to lie: the past two weeks took a lot out of me. I’m at a stage in the project where things are getting very complicated and there’s hardly anything left to do instead of tackling them. Despite not being able to procrastinate and all the hair-pulling and face-palming tackling these complicated challenges brings with it, I am really excited about how everything is starting to come together into something usable.

Where We Last Left Off

Two weeks ago, I finished most of the basic requirements for actually starting to edit content. Most of the major settings could be configured through the Project Settings route and Mattrbld gained the ability to read and write content files based on their Schemas, as well as the ability to gather a bunch of content items into a common Collection.

That left me with two major points to address:

• Handling media files

• Allowing users to actually edit content in Mattrbld

So these were the two areas I tackled.

What’s Change Since

Media Library Settings

There are two ways for Mattrbld to handle your media files, or more specifically, images: it can either just store them in folders and add their paths to the content where you need them to, or it can store common metadata like alt and title information right with them so it can be managed in one central place. That second mode is what’s called the Advanced Media Library and like many other pieces of data in Mattrbld, it can be completely customised by the user via a Schema. On top of that, Mattrbld will support simple re-writing of media file paths to a different output path – but that’s not implemented just yet.

All this needs some configuration for it to work, so naturally there’s a tab for it in the Project Settings.

Here, users will be able to set the root folder where their media files live, as well as finely tune who is allowed to do what with the same granular permission control we already saw two weeks ago.

Below that are the settings for the advanced media library—if it is enabled, since not all projects might need it.

For the Mattrbld website, I use a few more fields than the standard alt and title fields that are usually found on websites. I also have fields set up for a custom fallback colour that’s shown while the image loads, as well as support for optional captions and a slight border around light images—but you can use any fields you like.

All image files in the media library follow the Schema outlined in this section, which allows the user to add sensible default settings and ensures that developers can be confident that the data they get from Mattrbld follows a specific format.

If an image is then added to a piece of content, it inherits the values set in the media library. Don’t worry though, you can always override these inherited values for that specific content item.

The Media Library

With the configuration out of the way, I could finally implement the actual media library itself, which went surprisingly smoothly. Since the image files are just files within folders, I could use my existing file browser component to display them—but that felt off because media files are meant to be seen.

That’s why I extended the file browser to allow showing image thumbnails. Now images can really shine and content editors should have a much easier time selecting the right images for their content.

Clicking on one of the media files allows inspecting it a bit further, showing a preview and more data (if available). This also gives a glimpse into the content editing experience within Mattrbld, since this detail-pane is also where the fields set up in the settings can be edited.

Fields Editor

The component responsible for editing the fields of a Schema is one of the most complex in Mattrbld. It takes a Schema and translates it into a set of editable fields, basically turning it into a form that follows the rules outlined by the Schema.

After some thinking and experimenting, I chose to create a base field-component that is then used to build other, more specific fields on top of (since all fields share some common traits, as I outlined in a past devlog). So far, I have had only enough time to create the bare minimum of fields to be able to write this post, but considering that it seems like these fields were also among the most complex, creating other ones should only get easier from now on (famous last words… 😅).

I faced two big challenges while creating the fields editor component:

• Internationalisation: since Mattrbld allows for content in multiple languages, many fields don’t just have a single, static type, but two: their native type and an object holding the localised values when internationalisation is active. This makes it difficult to predict how values will interact with each other and how to best display them to the user

• Validation: related to the ambiguity in type, validating fields according to the rules set out in the Schema has proven to be quite complicated. Especially, since it has to happen on two fronts: once while editing the field itself (so at the leaves of the component tree) and once when validating the entire content before saving it (so at the very root of the tree)

I think I came up with a good solution for these challenges by heavily leaning on props and events (the new custom v-models in Vue 3 were a great help and inspiration), as well as copious amounts of guards. Still, the system feels a bit fragile and has grown to a tremendous size already, so I’m sure I’ll have to go back at some point and try to improve and simplify it as much as possible.

That being said, while I certainly was hell-bent on publishing this devlog entirely through Mattrbld, I did my best to avoid any shortcuts along the way (I was even prepared to admit defeat and defer to the next devlog at some point). It was important to me to create a solid foundation upon which I will be able to build the rest of the fields (and potentially new ones in the future).

Edit Content Route

With the basis for the fields editor laid out, I was ready to dedicate the rest of my time to fleshing out the content editor. This is the area users will likely spend the bulk of their time in, so it’s important to get it right and while using it to write this post, I’m already noticing many ways in which it still has to improve.

Despite its rough edges, I am still able to write this post and I cannot deny that I’m a little proud of that. In a way, it is a bit of a milestone for this project, since technically it’s finally able to do what it was created for: editing content.

I still have a long road ahead of me, but I also feel like I can finally take a breather, knowing that, yes, it definitely works. 😅 Once the content editor is done (which will definitely still take a while), I feel like I’ll be one step closer to releasing some sort of public beta test of Mattrbld—but that’s a bridge I’ll cross when I get to it.

For now, this editor is able to handle the following fields:

• Text (both plain and rich)

• Toggles

• Tags

• Images

• Groups

• Colours

• Dates

• Language selectors

• Repeating groups (barely—I interrupted working on that feature because I had to write this post)

• Heading + description and separator fields (which don’t affect the content and are only meant for structuring and providing additional information to content editors while they work)

There are still many more that will need to be built and even the already existing fields will still need to be tweaked and fixed, so everything works as smoothly as possible.

Coming Up

Which brings me to my plans for the next two weeks. As I’ve stated multiple times throughout this post, I’m a bit worn out and long overdue for some time off. With this milestone reached, I feel like I’ll finally be able to take a couple of days and just relax and stay away from coding, at least for the better part of the day.

That doesn’t mean that I won’t continue working on Mattrbld, of course. As I’ve mentioned, I’m planning on fleshing out and improving the content editing experience over the next few weeks, including adding the missing fields and fixing all the bugs and edge-cases I’ve noticed while writing this post.

If through some miracle that will go over much quicker than expected, I’ll probably start working on my next milestone: real-time content previews (because as I’m noticing, it’s very hard to imagine what a full post will look like just from looking at the fields in Mattrbld).

As always, thank you for reading and keeping up with this journey of mine. I apologise if this post came across as a bit whiny—I’m tired, but I’m also happy that what I’ve been working on is finally coming together. 😊 If you have any thoughts, questions, or comments, please don’t hesitate to reach out on Mastodon. I’m looking forward to updating you on my progress once again in two weeks!