 Hi everyone, thank you so much for joining this lightning talk We'll just get started in a probably about 30 seconds. I know we just have 10 minutes. So We'll start right on the clock So thank you for joining the session. So I'll be giving a quick lightning talk on Drupal plus catch be right and I'll focus on a particular aspect of using Drupal's layout builder. So layout builder is a very powerful tool that was introduced in Drupal 8 core, right? And it's a very handy tool for side builders as well as content creators to be able to Create new landing pages dynamically. It allows you to create Different section of the page you can create different regions dynamically and configure components And it's it's a very commonly used tool when you're using a traditional Drupal site But I don't think a lot of people have tried using the layout builder with Decouple implementation and especially with Something like Gatsby on the front end, which is a static site generator Right, so I'll give you a quick demo of how we've done that. I have Posted a few links here in the chat as well since we just have 10 minutes I've posted a few links in the chat which you can check out later on They there are some more demos in there Which you can watch on YouTube as well as some more information about the easy content Drupal distribution, right? It's an open source distribution that region is maintaining with the focus on providing integration such as the layout builder with decoupled projects and That is what I will use for today's demo. So I have Drupal 8 website here set up using the easy content distribution This is the back end and what I also have here is we have a front-end application hosted on Gatsby cloud So I will show you how I can create a new page on the Drupal back end and Let me get into that right now. So I'm going to go to add content We have a content type here in the sandbox site called landing page. So this is a very basic Content type you can see it has just a couple of fields in the back end and Let's create a page for the demo today and The integration is not just for the layout builder. So, you know, you can also Pub you can you know preview on published content that works here as well But I'm just going to publish it directly since we have limited time. So it follows your Workflow if you have a scheduler enabled it works with scheduling as well So you can schedule this content to be published later on you can even control the URL on your Gatsby site from here. So Let's just say that's the landing page demo So I'm giving a custom URL alias here as well, and I'm gonna hit save and this will bring up the Layout builder interface that Drupal provides, right? So you can see it's completely empty right now and I Click on layout it shows me the interface. So I'll take a pause here because I've just created this page and I'm going to show you how the integration with Gatsby cloud works So if I go to my Gatsby cloud application here, you can see that We just got a new build that was created in about seven seconds, right? So this is completely integrated with incremental Integration in incremental deployment with Gatsby. So only the page that I create or change gets rebuilt in the Gatsby cloud so you can see this new page is available and Before I open that page on Gatsby and show you how the preview works. Let's add some content to this page So using the layout builder, I can add some components. Let's say I want to add a hero media block here Let's just say That's the demo hero Let's quickly select a background image and let's get some more texture Right. So you can see this is a custom block built in Drupal Which is being added by the layout builder. You can have of course different kind of fields on your custom block. This one has a bunch of different configurations like you can Add the CTA here. You can change the positioning of the text. I'm just going to make it center line It also lets you change the background color of the hero. You can control the opacity So Typical site building features that you might expose to your content creators in a Drupal site You can do that and all of these work with Gatsby. So I've added one. Let me add a couple of more. So I think adding a social media should be fairly quick. So I'm going to include a tweet here Let me just grab that Twitter link And then we'll probably add one more component here and then I can show you how the life preview works with Gatsby. So Let's also add a map block So you can see there's Variety of different components that we have here Integrated with our Gatsby site. Okay, so I've made some changes using Drupal's layout builder. I'm going to save this And as soon as I've done this you see a new queue Built is happening on Gatsby. Again, it's going to take a few seconds to Build that page. So this is my Gatsby life site that is being built Also, if I go back so you can see that built was completed in six seconds Also, if I go back to the site, we also have the Gatsby cloud life preview enabled here as well So you can see that also Updated and and how this works is I'm going to show you the difference between the Gatsby life preview versus the Gatsby site So I go back to my easy content back in and within the layout builder itself We have a preview button and if you click on the preview button it shows the mobile version first you can go full screen And we don't want to look at the Drupal right now. So since we have we're talking about Gatsby today I'm going to show you the Gatsby cloud life preview. So you can see this is the page that I just created And I'm able to see an inline in contextual preview of this page Within the Drupal interface. So this is actually a Gatsby page In which we place the hero component the texture center line There's the red background you have the social media And then you have the google map and just to confirm this is a Gatsby page I'm going to copy the url and open it in the new tab as well Just to show you So you can see this is on Gatsby cloud. This is the preview link and like I mentioned This is the life preview and then you have the actual incremental site And I'm going to show you the difference between these two So I'm going to copy the url So this is my actually Gatsby front end site This is what the visitors will see like this is where you configure your domain and you can see The url that you provided is the custom one that we control we are controlling from the Drupal backend So to also show you how the live preview works You know if your editors make some changes to the content So the layout builder as I mentioned you can even add sections. So let's add a two column section here So you can see I've added a two column section. I'm going to drag and drop some blocks here So I'm going to drag the social media on the left I will drag the map block on the right Right again, uh, all these features are provided by layout will drop out of the box I hit save and edit and now you will see The difference between the live preview. So this is the live preview I don't have to refresh this page. So I can open it in With an easy content back in using the layout builder or I can open it in a new tab But you can you'll see that just take a couple of seconds and then automatically it's showing the live preview So I can do these changes in the draft mode before my node is published And once I'm satisfied I can push this and publish this content So the live preview automatically refreshes as you make these changes and you can see here We added a two column layout below the hero And now we have a one column layout followed by two columns and I was able to drag and drop and place our custom blocks and If I go to my front end side, which is what the visitor sees since this is a published node These changes reflect it automatically. I can refresh this And you can see the change was also pushed to the production site on gatsby cloud So This is how you know It's possible. It works really well You can try this out as well easy content. I placed it a link on the Chat window, which takes you to the drooper dot org page of the distribution. That is a Gatsby starter kit that is linked from that page as well So you love to Get your feedback if you have tried something similar or if you have if you're interested in integrating the layout builder with gatsby love to know that from you And we are there on our region boots throughout the day. So if you have any questions if you would like to discuss this Would love to take that conversation over to our booth And I know we're right on time. We'll just last one minute if anybody has a question that they want to squeeze in I would be happy to take that on right now And while you're doing that just quickly we are also running a easy content feedback Sweepstakes at our booth. So please register for this as well Based on what you saw just now or on the youtube videos that I posted above If you have any feedback on easy content, you can just fill out the form and you can register for I think up to a $500 sweepstake competition as well So Yeah, we're right on time. So thank you again everybody who joined the lightning talk And again, if you would like to continue this conversation and share your experience integrating Drupal with gatsby or Anything that you have in mind. We'd love to take that on over in our booth Thank you so much. Have a rest a nice rest of Drupal con. Bye. Bye