April 2025

Speaker 0: Hello, everyone. Happy April. I'm Beth, and I'm gonna be taking you through the change log. I hope you're all having a great start to the month. If you are new here or you've been here before, welcome.

Welcome. Thank you so much for spending your time with us. About what we've got going on. If you've got any questions, do let us know in chat if you're live or in Discord later. And with that, I'm gonna send you over to Carmen with the product updates for the month.

Speaker 1: Thank you, Beth. And hey, everyone. Carmen here to tell you about what we've shipped in Directus in the last month or so with 11.6 o and eleven point six point one. And not only have we added numerous small improvements and bug fixes, we've got two highlights that I'd love to draw to your attention today. So first, I wanted to bring your attention to a potential breaking change.

In the latest version of Directus, we've introduced a fix for flows. This is going to affect how action hooks pass on final payloads. Now, in the past, there was a bug that original payloads would be provided in the action hook. However, moving forward, this behavior has been rectified so that the final payload, that is after the filter hook and preset changes, is now passed down to the action hook. Next, and something we feel is quite exciting, is we've added the visual editor module beta.

Florian is going to join the change log later on to tell you more about that. Next, let's hear about extensions from Mike.

Speaker 2: Hi. I'm Mike, and I'm here to talk you through the extensions for this changelog. These are from the Director's Labs. Director's Labs is a GitHub org where we publish new extensions with additional functionality or experiments for you to try in your projects. This extension is the Elasticsearch operation.

As you can see here, we have a create and delete flow. We also have an elastic instance with no indices currently. So firstly, in the create flow, we have an action which is on every create items in the collection posts, then it's gonna forward to our Elasticsearch operation. Here, you'll notice we've configured the remote Elasticsearch instance with the API key. I will be deleting those afterwards just in case.

You can also define the collection dynamically, so the index created within Elasticsearch will be dynamically created. So each collection can have its own. You can have them prefix, suffix, or you can have a shared index for multiple collections. In this instance, we haven't we're using the create action so that it's going to add additional documents to the index with our key and the constructed data we wanna send over. This allows us to define what information we do or do not want to share from any given item to the index.

So just to test, we are going to go and add another document. So here we're gonna go, hello world new search in Elasticsearch. What is Elasticsearch and what's the data sent? I'm gonna just put it as published because I can. And again adding a image from our library.

Let's pick the Fusion Lead Director's logo actually, and save. So we have now saved our item. We're gonna go over to our index, our post index with one new document. If we go in, we can then see that we have our document with its title and its content, but because we didn't send over the hero image, it doesn't contain it. And we can also do the same with delete.

So we delete the item from here. There we go. We have deleted the item, and that should delete from our index, which is brilliant. We can also update and document within the index as and when it happens. This is the Algolia operation.

As you can see here, currently we have no indexes within Algolia. If we go over to our directors instance, currently looking at the flow for search indexes and we're going to be doing one for the creation of a item within the index. With this, we've got our event hook, which is an action on any time we create a update within the post collection. We could increase that to all other collections as with any other. And if we go inside of our creation, we can see we provide it with the application ID and the API key for Algolia.

We can also define the index itself either dynamically as a collection. We can prefix, suffix, or have a step set index for all information being sent over to Algolia, say, as a centralized index. We also get to do an upsert as well as a patch update, delete, retrieve, and a search operation. In this case, we're going to be doing post creation rather than an upsert just for simplicity. And in this instance, we have our post collection with a title, content, and hero image, but we're only sending over the two item types.

If we create a new post, so this is an item for Algolia. Algolia is very powerful for search within a site. We save this, and it should send over to Algolia. And we can now see that we have our posts index, and we sent over the information as is from our instance. This also means it's within any of the Algo linear interfaces we decide to put on the front end.

Now we also have our delete flow, and within this case, we are setting the same information, but we can delete multiple items at once. So it has to be the keys rather than key as the attribute for the object ID, just how our Golia references the information. I'm going to clear changes, discard changes, go back, Delete our object. So we go over to our index, refresh it, And we should have an index, but with no records available. This is the open search operation.

Much like with the other operations, this allows us to trigger a response like any other flow. So we have our event hook here where an action, a create item from the collections post, it is going to send over to OpenSearch with this host based upon the collection as the index and using the key for the item as the item ID for managing update creation reads on the open search side. So we will quickly just discard changes. Open search. Open search powers.

The AWS search functionality. And we're gonna sit may as well, just for the sake of it, publish, save. And if we check open discover the dashboard for OpenSearch, even with the index post, we haven't got anything currently. Reload it, and we should have our object here with our content. OpenSearch powers the AWS search functionality of search title.

I've then got a matching flow for deleting. So if we delete, it then takes the keys for all the objects that are being manipulated and sends that over as a delete type action. Evola. No more content. This is our new GitHub operation.

It's designed for operating with GitHub actions and GitHub workflows. As you can see here, we have a trigger with the action for creating, updating, and I will actually open it up to see. We are multiple different types. Any form of change to items within it. We're monitoring the post collection as well as the director's collections for if we add any new collections to it.

We obviously if we wanted, detect changes within those collections, we'll want to add these collections here. And the actual GitHub operation itself, we are providing it with the owner and repository, a fine grained access token from within the developer settings of the repo in GitHub. We're providing with a event type so that it's associated with a very specific workflow. As you can see on the right hand side, my workflow has the repository dispatch type, which is how it triggers from Webhooks, and a matching content build key so that when the hook is, triggered from Directus, it triggers the correct workflow. Yeah.

Otherwise, it's a very simple flow for me just to show it off. And if we save this actually, we don't need to save because it's already saved. Clear changes. If we go back to our page and we and we see here, I have plenty of them running from just me testing. But if I create a new one, a new page, and we do, does this trigger GitHub actions, and we save it, we should momentarily get a new GitHub action, which will start.

So I'm just gonna refresh to see it. There we go. Here is our latest one. It is queued up, and it's running the build state. We're laid off.

This one doesn't work because I'm running a very outdated version of Next. Js on this project, but we have triggered the correct response. Thanks very much for checking out these extensions. If you have any other questions about these extensions that we've shipped, extensions in general, or how to build them, or if you're having problems with, anything you're trying to build yourself, please feel free to come to the Discord and you can find help in the extensions channel.

Speaker 1: Let's talk about content. Now in the last month, we've introduced eight new tutorials for working with Directus using different web frameworks. You'll be able to find our tutorials on building dynamic forms and building real time chat applications using Directus in combination with Astro, Next. Js, Nuxt, and SvelteKit. We're always adding more tutorials, so keep an eye out.

Speaker 0: Amazing. And I've put the link to each of the extensions mentioned in the directors TV live chat. They're also, once again, just in case you missed it, in the DirectorsLabsorg in the extensions repo on GitHub. So amazing. Thank you so much to Carmen and Mike for taking us through those updates.

As Carmen mentioned, next up, we have Florian going more into detail about the very exciting visual editor.

Speaker 3: Hey, everyone. I'm Florian, a front end engineer at Directus. I'm here to talk to you about the visual editor which came out in beta with the 11 dot six dot zero release. This new module allows you to visually edit the content of your website directly in place. Now you can edit without ever leaving the visual of what you're working on.

You can work right in it. Here's a demo as I talk you through the details. Once the visual editor is enabled and a URL is provided, it will appear in the module bar. The visual editor behaves similarly to live preview in that it renders content in an iframe, but with a few important differences. Users can navigate through the website freely and edit any linked element on a page without navigating to the applicable collection.

Clicking an edit button next to an editable element opens an editor in either a drawer, a modal, or a popover. This editing mode as well as the number and the selection of fields that appear in such an editor can be set using the vision editing library, which web developers need to implement in their website. The library sets up the connection between your website and your director's instance. The studio module is then used to render your website within director studio, make changes in place, and then render those changes as they are made. This is Visual Editor, and it's just the beginning.

We have big plans for it. If you'd like to give feedback, you can share it in the discord or the visual editing repository.

Speaker 0: Amazing. Thank you so much to Florian for taking the time to show us more around it. And it is super exciting, we've already seen some love but if you do have things as Florian said that you'd like to give feedback we're here to hear it, we are here to that's such a loop in my brain, we're here to hear it so yeah do let us know if you are intending to use it and if you've got any questions, of course. Now for this month's changelog director's TV episode, we are going into the archive with a joy of theming with Bry Ross who, I cannot stress enough, is definitely definitely not Brian in a wig. So enjoy.

Speaker 4: Hi, friends. Welcome back to the show. I'm your host, Brian Ross. And today, we're gonna take an extra special trip back to the nineties with you, our friends and friends. Alright.

So we're gonna be painting a beautiful Central Perk Coffee Company theme. Alright. So let's dive into our theme. First, gonna pull up our project settings and we're going to adjust those. Just a quick little project name and description.

Your friend's coffee shop. What could be more beautiful for a project descriptor? Alright. So we're gonna paste the URL in there, and we can see that project settings, our name, and descriptor up there at the top. I like to pronounce it descriptor.

Makes it sound like Thor. Very powerful. But the effect that themes can have are are very powerful, especially on your users. Alright. So let's pull up our color and we're just gonna for our project color, we're gonna grab that green from the Central Perk logo.

Now that's a good project color. Next, let's add a public foreground and public background. So we'll just look for Central Perk and see if we can just grab a good looking image from from all of our friends here. We're just gonna spread that across the entire background and for the public foreground, we'll just use the same logo. I think that should still look really nice on the login page, don't you?

Yeah. Great. Now all these techniques that you see me using, you can use these yourself. There's nothing holding you back. You've got the tools.

Just take the first step. Alright. So we're gonna paint in that first note, that public note. We've got our favicon and now we're ready to start theming. Alright, so I really like this walnut light walnut brown this almond beige color.

Let's use that for our modules background so we'll just paint that in there at the top. One thing I do see though, I want I want this to match all the way up and down. So I'm just gonna paint a couple strokes there. We're just gonna look for our background color. I see that's the project color.

We need to fix that, so we're going to go into our custom CSS and just add a little dot module dash bar dash logo class. Make that background transparent. Now you see it. Now you don't. Boom.

Looks great. Alright, so now for our icons in that module bar. What I want to do, I don't want to be heavy handed. I'm still going to use light strokes for this, but I am going to try and pick up a, like, a darker brown. I'm almost thinking they've got one here on the website, but, I just don't see it.

Alright. Let's just try a black and see how that works. So we'll just go paint in a black. It's it's too much contrast. It doesn't give me those warm feelings of a of a coffee shop that I'm looking for.

So let's pull this brown from this wood image. Now one of the other tools that I use, ColorSlurp, terrible name, great product though. Being able to just copy those hex codes for for everything all you see on your screen. Great tool. Stores all those hex codes as well, and then you can quickly bang those in your keyboard.

Alright. So next, what we wanna do is we want to control our list, our sidebar here. So let's add a background to this. And for this I'm going to use a little tool that I like. We're going to look for the Essential Perk couch color.

Because if you remember inside this coffee shop there's a big couch that just takes up all the area. So we're going to lift this orange couch and make it our background. Is it weird? Maybe a little bit, but for you folks who didn't live through

Speaker 0: the

Speaker 4: nineties, they were a weird time as well. So let's let's lean into it and and embrace the journey, see where this theme takes us. A little unorthodox mixing colors like this, but with your tools at your side and joy in your heart, you can make any theme work. That looks good. So now we've got a nice separation there.

Let's resolve the icons here. So again, having those set to the project color of green might not be the best idea. So I'm just going to take that detail brush and paint in some foreground Just a white foreground Let's go in and let's try to make this look like a cloth texture as much as we can So I'm just gonna use a little pattern monster here. We're gonna find a pattern. Just gonna keep keep looking through our patterns until we find something that we like.

Just just browse those patterns. Do we find a pattern that we like? This adjoined diamond pattern reminds me of my grandmother's couch and her kitchen floor at the same time. Amazing. Alright, so let's use that same orange base color and we're just going to dial back the opacity here and then also on the other overlay, let's just switch that from white to black.

And, again, we're gonna dial in that opacity. Now I think this is a subtle effect that kinda gives a texture that reminds us of the nineties, or at the very least, your grandmother's house. What wonderful memories I'm sure you have there. Alright. So we're just gonna paint the rest of that in and, okay.

We'll dial back that opacity a little bit just to give this a little more subtle effect. And now I'm gonna pull out that palette knife, and we're just gonna paste this in. We're gonna pull up that CSS. We're gonna copy the URL portion so we've got our data URI. We're just going to paste that into the background and just bring that all the way down.

Alright. So now we've got this orange symbolic couch in the middle of our theme. Alright. So if we go into our background, we want to add a subtle background, that stark contrast between the white and the orange. There's opportunity there.

So we're just gonna dial that in a little bit. Again, we're gonna use our color mix. Just paint that in. We're going to blend that almond with 80% white and we get this soft beige. Just invites you in like a warm cup of coffee in the morning.

Now the last thing that we want to do is dial in our fonts. We're just going to pull this up. We've got a custom font here that looks like a scribble. I quite like this effect. So we're just going to go in to our font face, add that there, and then we're just going to paint this on.

Paint in a little font family. We're going to call it friends. We're going to call it friends. Yeah, that's nice. Alright.

Use a light touch. Very important. You want to have a handy hand heavy hand in this. Alright. So then we're gonna go into our fonts under display, and we're just gonna go friends.

Just gonna add friends in there. Now we can see that at the top and just adjust it a little bit. There we go. Voila. And now we have our coffee shop theme.

We have our friends and the couch in the middle, and everything is right, Just like it was in the nineteen nineties. Alright. Let's take a look at our public sign in page. And voila. We have our Central Perk theme.

That's it for this episode of The Joy of Theming. Thank you for joining me. It's through your support that we can continue teaching techniques to help everyone theme. Each of us has a perfect theme inside of us. It's time to let yours out.

We'll see you.

Speaker 0: We want to take a moment towards the end of the changelog for thanking our amazing community contributors who give their time to improve the director's project. Since last month, there have been five contributors. A huge thank you to Subtire Lou for updating utility sort type signature to allow the use of both string and number. Thank you to Collier for adding an implicit for one to many and many to any relations Thank you to Jacob for improving invalid asset transformation parameter value error handling and adding an omit key option to get config from env Thank you to Son for updating the translation key input field overflow And thank you to Dan for adding the ability to map OAuth claim groups to directors roles Thank you again and you can see their specific pull requests inside of the full release notes on GitHub. Lastly, we also want to take the time to thank our GitHub Sponsors of March who financially contribute to Directus's development a huge thank you to Wayfam, Entel, Mike, Fergus, Omar, Marcus a special thank you to Mission Control for coming on board as an advocate level Peter, Utomic, Steven, Robson, Nonlinear, Andreas, John, Jamaleddin, Burb, Adam, Jason, Birka, Vincent, CK, Valentino, Jens, Wayne and Yannis.

Thank you again the money we are given from our GitHub sponsors goes straight back to community members who build tooling and extensions for the Director's ecosystem So thank you again for being part of that. Alright. I am such a fan of Bry Ross. And if you also enjoyed that as much as I did, there are lots of other episodes with different themes such as Pampers, American Express. We've got the Simpsons, Home Depot.

Some say there is nothing, no theme that Bry Ross cannot do. He's a true artist. And, yes, if you haven't been checking out directorstv, directors I 0 Directors.i0/tv, do check it out. There are tons of episodes, across lots of different, topics. If you've not checked it out, there is a lot for you to catch up on so do, I recommend going and seeing it too.

Thank you so much for joining us. You have reached the end. If you are still here with us, thank you for spending the time with us. We appreciate you. Hopefully, we'll see you next month and have a great month in between.

Bye everyone.