 Good afternoon Can I really hear me like this? That's good. Okay. I tend to walk around so just tell me to stay put I hope I realize myself. So welcome. Did you have a good time so far at RuPaul Korn? Good good to hear So this is actually my first RuPaul Korn and I'm already on stage. So I'm a bit nervous. I hope you Can forgive that So I'm here to talk about making RuPaul as easy as Squarespace. It's a very catchy title. I hope Regarding the audience attendance We got that What do you see here is me myself and my two co-founders of the company that I work for We try to keep the hair level about normal between the two of the three of us So, yeah, so about myself There we go first problem There we go. So I'm myself. I'm Philip von Bergen. I live in Switzerland. I've been developing for 15 years or so You can catch me on RuPaul Org and also on Twitter mostly and I'm sorry I'm the CTO and owner of an agency in Switzerland. We're about 25 people ish we have five developers including me and We develop websites of applications for small to medium or even national but, you know, Switzerland still small companies There we go Switzerland that's where I'm from as you can see all the cliches cow Alps watches so well But also a lot of small companies We mostly serve companies in the range of two to hundred people We have some national companies, but even as I said, they're small as well So we were facing a challenge. We decided five years ago to switch from a closed-source system to an open-source system RuPaul and The problem that we face is that our clients couldn't deal with RuPaul the way it was The form-based approach we had existing custom client Christian client base that was used to drag and drop Editing of web pages So we wanted to please them and we also wanted to introduce something new to RuPaul and we decided to build a new model It's called page designer. That's what I'm going to present here today And also talk about all the details behind it One more one more thing that we had in our Preconditions was we wanted to have a low-code approach to maintaining existing websites or small websites So that we we wanted to build that in as well Now I'm in the Netherlands Which is nice and flat by the way So that feels also like a stopover because I we were in the Alps like we had all these mountains to overcome I managed to go to RuPaul come I even got talk and we have a stable ish module ready And it's open source on RuPaul dot org as well And we made also a journey from a closed-source company to an open-source company, which was you know had his own challenges um So what we built um what we built I will show you in a minute in a second actually We built the front end basically for the user to edit its content to Publish pages to basically work Without the complexity of RuPaul And also without the admin UI actually What that looks like you can see I want just to say some more things um Goal was to actually provide a consistent user interface and also to enable the user just to see what he's doing So, um, let's start because that was enough telling Um, what I'm going to show you is a video that I made because 20 minutes is very short So I'm going to show you the video how it's edited how the editing works Um, I did that on this laptop last night Actually, so if there's any checkering mouse movement, that's because of the mousepad Um, and also I will tell you about what's actually behind the whole technology So it's going to be like double input feature right now Um, yeah, so I'll just start and I'll try to keep the microphone because my notes are over there So let's see Does it move? Yeah Okay, as you can see we are still in RuPaul at the moment. I just activated edit mode So you can see the interface changed And what you're going to see is like I'm building a website just with some text And I'm talking about Solid editing so the approach of this module or this idea is to have One page create a page design a page Um, what we're using as a base for the interface is grapestress. Somebody has heard of grapest editor Okay, um, this is an open source module to create HTML templates actually and we repurposed it to create Drupal websites Or Drupal pages. Let's put it away um The elements that you see on the right the rows and stuff that you see there Um, is based on ui patterns. That's a module also a chronic module which allows to Create hmail and ymail based patterns to include them And we also integrated a media library as it just also images that you upload and use here are part of media library on the core So we actually Connect to the media library that you use in the back end and also in the front end It's getting faster than I thought One more thing that distinguishes To other page editors is that all the data that we save so like from the Row to the components to the individual field or entities in Drupal So we don't save log of html. We save the actual entities as a tree So we have a tree page level is the root and we have a tree the whole way down. So each row that we um Sorry each row that we that we put in in there is actually part of the tree also the data that we insert Um, the approach that we use for the different types that we support is a plugin based approach So we have a plugin manager integrated into Drupal or into the module that uses the same Plug-in system that Drupal uses and we try to make the module extendable Um, yeah, right now you see we also integrate. Okay. No, that's just some more fun part What you've seen with the youtube video. We also use the embed module To embed videos as well into into the media library. So we use media core again Um, this is just some some fancy Tweaks that we did we can copy elements which creates copies of the data Not everybody's happy to hear that but that's the approach that we that we use Because our clients Fought that way that if they change the data one and it doesn't change on the other. So we can copy stuff as well Um, by the way, I forgot something about the patterns the patterns are part of the theme So they're not part of the module. So we decoupled that so the theme provides modules that the The patterns that the module uses and displays here And we also try to keep the separation of design and module separate We also integrate with the Drupal block layout and the form so we insert Blocks directly into the page which is very handy, especially when we create headers or footers For for a website because we can reuse the menu blocks that we already have in Drupal So we basically create a menu block insert it at the right place Um, what we also included is what you can see here. We also included some styling properties Those are defined on the pattern itself again Um, but are limited of course to what the module actually can handle We have a way to introduce new CSS properties, but um, we're still working on that So, um, the idea here as you can see is for instance, like in the marketing or in the landing page department to create like visual Anchors here, so we included that which is all but it's all based on the idea that the that an editor doesn't know about um code or html, but only about design Here we see the web form integration Yeah And one thing that follows up next which is kind of a tricky thing for us in in the next few Months is that we have our own layout system So the layout builder is a bit too late for us, but we we try to introduce that as well Just gonna keep the video rolling. It's almost done. Um, we have some other features included like the Like the like the the tablet and smartphone view Which we all which we're gonna see in a minute and also like the idea that we want to support responsive content So you can change the content depending on what Device is accessing the page So I'm just changing the background image here Yeah, it took me less time to explain enough um So maybe some more background about the module itself. So the module itself started off as a first version that is Somewhere under a carpet because I designed the interface and i'm a developer So this version is actually version two. We worked on that three people for a year now about on this version And we started directly in Drupal.org. So every commit every mistake is public Um, but that was a decision that we took because we realized if we don't open source from the beginning, we don't open source That's the thing. So as you can see, so there's a preview function as well um There's Still stuff to integrate. I'm coming back to that as well. Uh, what you can see now is another module It's the page three that we used that is also for our clients very important to see How is the structure of the menu tree directly in the system and navigate we're using that And you also saw I can publish a page directly using that and displayed publicly So there's a simple workflow publishing workflow integrated. It's not integrated with workflow with content moderation yet So that was uh a quick video just to show how it works um, so to repeat to repeat a bit but also to summarize The current state is we got the page designer, which is the base module which has a lot of functionality built in We got some sub modules which are shipped with page designer Um, we have the plugin system. We have the media and block integration We have the web form integration and we have this page tree And we because it's our thing and nobody noticed us on Drupal.org We have about 50 plus installations So for the mostly from us I see some downloads on Drupal.org, but I'm not sure whether they're actually using it. So Yeah, that's the state What's next One of the biggest things that we want to implement and we have time for that. That's good Is revisions because the system is not yet in revision Revisionable in the sense of Drupal. So when you come go back to revision before you edited something We do use revisions, of course for the cost amenities, but it's not integrated into Drupal that you can actually Switch between revisions of a page because that's what's the user thinking of is of using his thinking of a page Um, also what we want to provide is a distribution so to make installation easier Um, that's certainly one of the things That would give us more traction Layout builder is of course big to help it because both on the side that we Want to have the page designer integrated in the layer build but also using the layer builder for our own layouts um, the page designer by the way is Is basically a field that you can insert in a content type And it just opens up Basically the editor it then it inserts the the button to an open edit mode And then you can just insert into that field visually Um, one thing that also gives us more traction is documentation. It's always common last That's the normal thing for developers and we also want to open up the API There's a lot more a lot more stuff that we want to do or could do um, but one thing That i'm asking of you, of course um, it's getting involved because um, as i said, we are free developers. We've worked on that for some time and Even if it's just, you know, just even if it's feedback or ideas or installations and just testing the module seeing how it behaves in different environments because We have our environment and we use it in another environment, but it's not like Tested in a lot of environments. That's one thing that we can use a lot of feedback on Uh, also more use cases. I mean we have our use case We see it happening both mostly for small and medium-sized businesses We have some national businesses as well as clients who use it as well um, but more more More feedback there would be good and of course if you really Into it you can also contribute and pair patch things and also tell us, you know, where we go wrong We built the module while we were learning group also basically I looked the plugin system up for this module So i'm probably gonna have some hacks in there as well. So that would be Also helpful and also just Maybe have the thing that I mostly am interested in is the it's a long-term idea on dupal like dupal is fighting against smaller Uh, different cms's like WordPress. There's a composer um, there's rare spaces wicks and Both with the Gutenberg and the dhx and also our module I would like to combat this problem that we have as a community that people want visual editing and become provided that easily And this is one of One part of the solution. Maybe or not. I'll see But i'm pretty sure that especially the html one html Lobb as a safe to save the data is Not the right approach because that's not using dupal Like it's supposed to be and that's one of the major things that we've decided we want to build our own module using cost amenities Yeah, so before we I tried to make it short And i'm trying to achieve that very good um One more two more things because they told me to do so but I also Do gladly Don't forget the contribution day on first day. So these are the times and topics Also, what do you think Of dupal com end of my session And I actually want to Get some questions discussion going um, you can head over to these two projects or also to website to get the slides um, or catch me on dupal dog or twitter and Yeah, that's I try to keep it short. So we have time to actually interact. So thank you very much Any question any questions? Yeah They don't work with translation in the sense that you basically have to translate the field So the field is just empty on the translated page and then you have to translate The page we have some functionality in there that you can copy the content from one Language to another language or also between sides between nodes. Sorry. I'm always talking about pages because Uh, but you can copy data between nodes and also between languages. So that's already in there. Yeah Um Can you set permissions on certain functionality? Um, we have some permissions in there. So you can decide whether it should work Well, whether users should be able to actually use the page design at all and also we have a distinguished We can distinguish distinguish between certain patterns, but that's in the yaml level That's not on not yet on configurable level, but on the yaml level Yeah I'm also lit. I'm also interested in hearing questions or ideas about the whole idea basically Do we do do we need that? What do you think? Um I guess They're further ahead with the user interface and the functionality The main difference is for me. That's that's the thing is like the cost amenities So you can basically go down to to the individual old text of an image and export that in a structured format Which is for me one of the things that we wanted to have from the from the get go because um a big blob of html I've imported many many web pages like that and I can't you can't use it afterwards So that's one of the parts also like with the api so that we can actually use this to power web apps or apps Like getting the data that we already have displaying it different ways So that's one of the things I can think of. Yeah Thank you We'll we'll hopefully get traction Any other comments Yeah, first of all, I won't say it's really great. Also, um, we are Currently looking at our company to use We can't really decide on layout builder with and bare or paragraphs. So I think it's really relevant this this project Um, and I wanted you you mentioned grape js grapes js. Yeah, that's what you're using Behind the scenes. Yeah, we used grapes js is basically an html editor Which looks and works similar way but produces raw html on css and we high check basically this module to Produce two tweens that are on hooks to actually generate entities on Yeah, we extended it a bit. We haven't yet um the time or the The resources to actually get in contact with grapes to to see how we can collaborate more And the the idea of grapes is actually to produce html. So We don't know whether we can have Common goal there Yeah, thank you. Thank you very much