Crash course into Astro and Storyblok

Hi, everyone. Officially, a great day. And thank you so much for joining my workshop. I hope, yeah, you're excited, as I am. This is part of the React Day Berlin. I'm not in Berlin, technically, in the conference. But if you're interested in, I know that they have very cool talks and the conference going on. And I guess they also have the virtual talks, too. Make sure to check it out.

Anyway, today we gather for crash course into Astro Storyblok. So I'm going to get started with sharing one. I would say, like, not exactly a cheat sheet, but could be a cheat sheet. So during this workshop, I'm going to be using this notion page and I'm going to share my screen to show you what I'm talking about. It's a notion page. But it has a bunch of information that you want to know while you join this workshop. And also, there are lots of sources. Don't worry about, you know, that I go fast for now. Because that's something we are going to talk and see anyway.

And here is the workshop content. So I'm going to be quite often sharing this screen, the one I sent you the link just right now. If you just joined and cannot see, let's say, the past conversation, please feel free to write in your question. And also, not to forget. So since we are doing the online, mostly it's going to be like me sharing my screen and showing you how you also can, you know, like, follow together with me. And if you, let's say, like, go a little bit behind, no problem. That's why I have this notion note for the workshop, because, let me go a little bit down. So here, from here is going to be the hands on. But here I have, like, a couple of shortcuts, that you also can have a look at it. And then in, I would say, like, every single, like, part I have, let me go down a bit here. Yeah, this here, like a little note, like every single part in the end, I have something you can actually, like, fork from the workshop repo, so that you wouldn't be, you know, like, left behind. And you can just, you know, like, fork the right branch, where you were actually working on with me, and then just swap certain keys, which I'm going to also explain to you. So that's one another house rule I wanted to show you, actually, and tell you. And this is the workshop repo, which I'm also going to share with you now. So, I hope you can see that. Yeah, I would say, like, when you have access to here, I would recommend you to open this notion page for this workshop, so that, you know, like, you have all the source code that you can just copy and paste, then you wouldn't have any typos. And to get started, first of all, the purpose of this workshop, just very quickly, is about diving into, you know, the intro of Astra. So, if you're totally new to Astra, that's also totally fine, but not just, you know, diving into the Astra world, we are also going to combine with the headless CMS, which is going to be a story block this time. So, with this workshop, you will be able to get the two knowledges at once. So, that's why, like, we have the, I would say, like, outlines or a table of content for this workshop here, and we are going to use the atomic design, and that's why I chose this headless CMS in this case. And then, yeah, we are going to see the example of the Astra and story block application with Hands-On, not just having a look at it. We are going to build together. So, in the end of this, we are going to build the blog. Let's say, yeah, the blog application, which you can also deploy later on. But in this workshop, let's say from the timeframe we have, we are not going into the deployment. But if you're interested in, there is the source, actually, the Hands-On tutorial, which is provided from the story block side. So, you can, you know, have a look at it after the workshop and deploy it. All right. So, that's the intro. And the sources, I'm going to skip it, because we're going to cover anyway together in the workshop. But to align with, let's say, like, your levels of the knowledge, I want to make sure first where we can start from, because there will be different starting point, depending on the workshop audience. So, you can participate to write your answer, yes or no, from the questions that I'm going to ask you. So, I think I'm going to start from here, like how much you have the knowledge about the headless CMS? Do you know or have heard about any headless CMS? Headless content management system. You can respond to me yes or no in the chat. And depending on that, I'm going to start from something very beginning, what is headless CMS, or we can move on to the next question. Jumpstart. Okay. I see no from Anna. Khan also says no. Okay. Patricia also says no. Okay. I see a few yes. Yes. Yes. Okay. Okay. Mm-hmm. Knowing it, but didn't try. Okay. Good. I see a good mixture of it.

So, to be more fair for everyone, I think I'm going to quickly cover about what is headless CMS. So, the very easy explanation would be like the head part and the body part, which would, let's say, like, can be translated into the front-end side and the back-end side. These are not in one place. So, I like monolithic content management system like WordPress, Drupal, actually headless CMS architecture is that you split the front-end side and back-end side. So, from the security perspective, it's also quite safer because, you know, like if you want to attack some malicious purposes, stuff like that, then you need to attack several places instead of just, you know, attacking one. So, in this way, that's also like better. And the good part is that in the monolithic world, you have to stick to the certain technology like PHP, things like that. But with the headless CMS, because you interact, you know, to fetch the data through APIs. And I mean, the front-end side is completely, you know, agnostic from the back-end side, so that you can actually choose any kind of, most of all, the front-end technologies. That's why you can, you know, like use headless CMS with Astro, like today's workshop. So, yeah, that's actually something that I can tell very quickly.

Okay. So, the next question, we covered this part. And I would say, like, do you know JAMstack? You can say yes or no in the chat. And depending on that, I will decide to go to this part or this part. Okay. Okay. I see, yeah. Mostly no so far. Yes, just heard about it. I see a few yes. Okay. Then I'm also going to quickly cover about that. And yeah. Oh, by the way, I forgot to tell you, but these are actually the links that you can watch later. So, if you don't understand, let's say, like, what I explained quickly, then you can always, you know, come to those links. These are videos very quickly that you can watch it, too. The video unavailable. Oh, is it unavailable? Let me quickly check. Oh, no. That's too bad. Okay. Sorry about that. I created this content actually not so long time ago. At the time it was working. But, anyway, I'm going to find a better one for you after the workshop. But, anyway, the JAMstack is, first of all, like, JAMstack's JAM, first of all, stands for the JavaScript and the A stands for the API and the M stands for the markup. And then, like, the thing is that you interact with the APIs to fetch the data. So, it's not going to be, like, you know, like, in the monolith world that you need to interact with directly with the databases. And you probably might have seen some of the cases or have heard of the cases that non developer users also have access to those database. And then, they do their best to modify some stuff. But then, like, it's getting to be too hard to, let's say, fix if something goes wrong. So, yeah. And to prevent that, the headless CMS uses, let's say, API first approach. And that's what the JAMstack, I would say, like, would fit the best. Or actually, it goes in the same direction. So, I could explain you or show you, like, more resources. But the point of this workshop is not dig into, like, lots of, let's say, logics or the theory about the JAMstack. So, I think I'm gonna finish around what is JAMstack at this point. But you're gonna see how I'm going to interact, let's say, to fetch the data, retrieve, and then render it in the end through the APIs. So, I think we covered this part.

And this question, the last question, I want to ask you would be, do you know Storyblok? That's actually the headless CMS we are gonna use. My guess is lots of no. Yes, I see no, no, no. Oh, I have heard of it. Nice. Okay. Okay. Good. I like that everyone is responding so quick. Thank you so much. And yeah, I'm happy to show you, actually. So, I think, what should I do? Yeah, I think I'm gonna directly show you, like, yeah, this website. So, you can already open up this website to go to the Storyblok site. And anyway, from here, I would ask you to create an account. So, while you're listening, what is Storyblok, you can already, you know, like, get access to this URL that I sent you. And then if you don't have an account, you can hit this try for free. Creating accounts are for free. And then if you already have an account and forgot, stuff like that, you can, you know, get access to log in. And while you're creating your Storyblok account or figuring out if you already have an account or not, then I'm gonna explain you what is Storyblok.

Let me see. Thank you. I see people are still joining in. Welcome, everyone. You didn't miss much of the stuff. And anyway, it's recorded. So, feel free to rewatch it.

So, the Storyblok is also headless EMS. Yes, but the reason why I'm using it is because it has the real-time visual editor already built in. So, if you want to allow your content editors to have a look at the preview while they're editing, then they can have a look at very quickly what's going on. And they can, you know, like, change the order of the components in real life without hitting the save button or publishing, let's say, the content that they're working. So, you can easily, you know, like, enable this feature by following mostly, like, three steps. It would be like, I mean, the process to enable that would be depending on the front-end technologies of your choice. But actually, it would be most of all the time the same. So, I would say, like, in a very quick way to explain the Storyblok, would be like the headless EMS with the real-time visual editing feature integrated in it.

And one more thing, what I want to say is that Storyblok uses the methodology called atomic design. So, I would quickly, like, show you this image, or it could be let's say an image to show you like what is atomic design. So, atomic design is it's not about the design. It's more of like how you can organize the components in a most systematic and minimalistic way. So, instead of, let's say, like you have the page A. I would say, like, you have the contact page and you have another different contact page, but asking your users to contact to somewhere else. And these, let's say, two contact pages, actually share a lot of similar components. But if you want to just change the bottom line of where you want to, you know, like submit stuff like that. Just let's say one input is different, then you don't need to actually, you know, like create two different page templates for those two different contact pages. But instead, you can actually like create some parts of the components. And then by combining, you know, like these different smaller parts of the component, then you can consist of very similar page template. But you can modify very easily by swapping one input. So, that's how the atomic design would work. And in more details, I would recommend you to have a look at and read the article. And they also have an ebook, if I'm correct. That's a longer version and more detailed version of it. But it's really worth reading it. And I learned a lot, you know, like how to organize things in a very minimalistic way and to reuse a lot. So, that's how actually Storyblok uses in a route to organize the component.

All right. So, I think we covered, yeah, this flowchart. So, we can move on. And what is Astro? This is something I also want you to actually take a look at their documentation. And also, yeah, join their Discord because I'm also an Astro user. And when I have, let's say, like something new features that I have tried on and want to, you know, like ask some questions, they're very open to it. And one of the things that I recommend you, you know, like trying out Astro is that their community is really amazing, very open. So, when you get stuck, you can always ask questions on their Discord. And Astro itself is that I would say, like, you don't need to feel like that you need to learn a new framework. It is a framework. Yes. But if you, let's say, came from the background of using another framework, let's say, for example, like Next.js or Svelte or, you know, Vue even Next, then you can actually like combine those technologies to use with Astro. So, the, how do I say, like the blueprint of your application will be, you know, like built by the Astro side. But let's say, if you want to write or if you want to, you know, like work on with your favorite technologies of the syntax, then you can actually like create those components in your favorite technologies to combine. Because Astro has, let's say, the Component Islands theory or the way of thinking it. And there are actually lots of great articles that I can recommend you to take a look at it. I think I'm going to quickly, like, get this up for you. One sec. Because I didn't, I don't think I added the source in the In the Notion node, but this article is something additional that I can recommend to get to know more deeper about what is Astro and you can learn a lot of different, let's say, approaches what Astro, you know, like is telling people. So, there are lots of, you know, like tips that they do to serve, let's say, like the fast content. So, when you come from like different way of serving the content on the pages, such as like SSG, stuff like that, then SSG is also fast, yes. But you can see quite different that when you consider about, you know, like shipping more JS or less JS, which is faster, and Astro is, you know, like only more for like less JS to ship when it's possible. And only when you need and you load it. And this also makes a huge difference too. Yeah. Thank you, Ricardo. Yes, that's the Astro Discord you can join.

All right. So, I don't think people want to see me just explaining things in this workshop, because it's a workshop. I also want you to, you know, get hands-on with me and people would expect me to, you know, like show you hands-on part, so let's get to it. And this is actually like based on the tutorial we have, and I'm going to actually like show you this. So, I'm going to send you one of the sources that I have listed up, and I'm going to display what I mean by that. So, the link I sent you right now in the chat is this tutorial. So, this tutorial is maintained by Storybook team, and then we have the Ultimate Tutorial series, and we have part one to part seven. So, this is what I mean to say, like if you want to deploy your Astro blog app in the end of this workshop, then you can have a look at here. And what we are going to cover in this workshop will be like from part one to part four, and ideally, if we have enough time, then we are going to get to the partial part five, I would say.

So, that's what I'm going to cover. So, even if you get lost during the workshop, no worries, you have hands-on tutorial in a written format, so you can read it with your own time.

All right. So, I want to make sure if everyone or the one who wants to follow exactly what I'm going to show you, like in hands-on in this workshop, already created the Storyblok account, maybe you can show me thumbs up or write down yes in the chat quickly, so then I can see that if I'm good to go.

Okay. Okay. Good. Good. Thank you. Nice. All right. Awesome. If you still need time, I would say you can re-watch this workshop, like recording, and for now you can focus on watching it too, and that's totally fine. And you can reach me out later on on Twitter or Discord. I'm on Discord on Storyblok, so you can easily ask questions too.

All right. So, if you have created the account and when you logged in to the Storyblok, this is the kind of the page that you're going to see that. So, you have the spaces, if you have already. If you don't have, then you don't see any, but this looks like something what you're going to see now. So, let me close this, and then what I'm going to ask you to do is to click this add space green button. So, in here we have two options. Make sure to choose the left hand side of the new space option, and we can give a name to this, you know, like space. Space is actually an environment that you can think you can work on or maybe I would say like a repository if that's easier for you to imagine.

Okay. So, I can give a name to react. Say Berlin, and hit the create space. And from what I see, you know, all of you are mostly attending from the Central European time zone. I would say like select the server location to EU, and hit the create space green button. And after that, it's going to generate. Let me see. Could be that my internet connection is not good today. Do you also see the same issue in your environment, or can you create a space? Let me know in the chat.

Okay. Okay. It works. Nice. Nice. Let me reload it. Maybe I failed something. Okay. Okay. It worked. Nice. Thank you, everyone. Yes, I like this part. You know, like everyone can help me, you know, like to make the workshop get going. Okay. Thank you. Nice. So, I believe everyone created the space, and this would be the first page that you can see with a quick start. So, that's what I want you to see now and follow the steps. So, we created the space, and what we're going to do is get a local copy. So, here is the command that you can copy and paste with this copy code. And it includes the random alphabet and the numbers. This is actually a preview API key token, which would be a very important value to interact with, let's say, the API to get the data through our content delivery API into your source code. So, what I want you to do is just copy this code, and then you can open up your terminal or anything that you use for command line tools, and then in the place where you prefer to have, just paste it, what you copied from the quick start, and then you can paste sorry, not paste, execute what you copied. And you should see this big Storyblok logo and from here, you can select the framework, and let's stick to Astra today. So, I'm going to choose the Astra, and hit Enter. You can, you know, move with the arrow key.

Okay, I think I went with Astra, and then you can select your package manager. I'm gonna go with MPM. So, if you prefer BUN, feel free to go. And again, the region is most of all you are based in EU, so EU. And you can give a name to this, I would say, project. So, I'm gonna say React Day Berlin. And it's gonna generate the demo. So, I hope everyone is seeing the similar screen. Let me know if you got error, then I'll try my best to solve it with you. But unless we can move on to take a look at what is inside in here. And it says that you can already go to the directory that you just generated in here, and then install the necessary packages, and then you can already run the local host, I would say.

So, I would say I'm gonna actually go to the directory I just created, and then open up with the VS Code. It doesn't have to be just VS Code. Just use whatever the text editor that you feel comfortable.

Let me see the chat. What will happen if I select EU on dashboard, but US in CLI. Then I would say that you might get into trouble to see the, first of all, the fetching the data. And maybe you might have issue with real-time visual editing features, too. It's the best to, you know, like, sync with both regions that you're going to choose on the Storyblok application side to generate the space. And then, let's say, like, from the CLI command that you're using it. But if you're interested in trying out, feel free to do, and let me know. But in this workshop, I would say stick to the both same regions. Okay. Yeah. All right.

So, did I open it up correctly? I hope I did. Let me quickly see that. Yes. I think I'm on the visual editor with the directory I just created it, and I hope you're also, like, aligned with me. So, we need to actually install the npm package. Sorry. It's a bit mess of my terminal. Anyway. And let me know if the screen or the fonts I'm displaying here is too small, then I'm happy to rescale. So, here I'm going to install the package. And then after that, I should be able to, you know, like, run the npm run dev. Don't worry about some warnings. You see that it's not going to impact on what you're going to work on together. So, here's the dev. So, I'm going to run npm run dev to start running the local host. And the reason why I used this quick, let's say, create story block CLI option is because it will already configure the necessary components, like the basic minimalistic components to see already being rendered. We can interact with, you know, the data that are coming from our content delivery API, and then the API key token to preview those contents are already set. So, I can actually like show you to prove first of all if the local host is running or not. So, yeah, you might see this screen, which is important. I'm going to show you this. And if you see the same screen with me, don't get panicked. This is all normal. What you can do is click advanced, and then proceed to local host, which even says unsafe, but it is okay. It's actually in the HTTPS, I would say, like, to review the browser. So, you can already see it's running in the local host, and you see a couple of components that you're going to have a look at on the story block. Let me know if you fail so far in this step. Then I'll try my best to help you out. But otherwise, then we can move on. But feel free to write down the questions again on the chat. And I'm actually seeing in the other second monitor to check if it's fine with everyone or not. Yes, we can get a recording of this webinar. I guess that's the point we are recording it. I'm not sure how long it's going to take. But with this question, probably, Lara can answer you later on. Okay. So, to complete, let's say, the process that everything is working, and we can move on to the next step. Let's go back to the story block UI, which you see with the quick start and those two steps that we went so far. So, we are going to go to this content on the left-hand side of the sidebar, and this is going to be the, I would say, the entry point to, you know, like, jump into the real-time visual editor. So, by default, you only have one page. And by the way, at Storyblok, we call pages as story and stories. It's something similar to, let's say, our product name. And it has the reason, yes, because you don't just, you know, like, build with Storyblok only for the Web and the Web applications. You can actually, you know, like, store the content and, you know, like, fetch it, render it to many different kinds of, I would say, applications. So, you can also build a mobile app with Storyblok. You can also build a VR, AR, you know, like, applications and many more things. That's why, like, we don't call these, you know, like, elements as just pages, but instead, we call them stories to tell story. So, long story, but we can just click this home story. And then, right now, what we need to do is configure the preview URL. So, on the left-hand side and a little bit up, there is a place where you see the current preview, which is not correct. That's why we see this welcome to the visual editor, and that's not actually what we want to see. So, click this change URL, and then when you do that, it's going to show you a model to add the new preview URL. So, after clicking this change URL, and then click this green button says add or change preview URLs. So, and then after that, it's going to actually display you a visual editor on the settings. So, technically, you can also go from on the left-hand side of the settings from the dashboard, and then if you navigate yourself to the visual editor here, then you can get to the same place. Alright. No URL.

Okay. Let me quickly double check with you. When you go to content, home story, and what kind of screen you see, you don't see this one, like empty, or what do you see? Usually, you should be able to see the same screen, actually. Or, do you happen to see a space, video background? Ah, okay. Now I see. Great. Great. So, okay. Good. Thanks for asking. Change URL. Add to the visual editor preview. So, here at the location, this is what we see right now, but we don't want that. So, what I'm going to do is I'm going to copy and paste this Astro's default local host URL, and then paste it into here so that we don't need to see that previous welcome to the visual editor screen, and don't forget to hit the save button. Now, I hit the save button, so I'm able to save the content. So, we can go back to the content on the left-hand side of the sidebar, home story, and then now we see 404. Don't worry about it. It's expected, and I'm happy that we see as I expected. So, when you see this 404, it is because we don't have any path configured to the home. So, to fix this, you can do that from the Storyblok applications UI. So, on the upper side of the, I would say, header, and there is one of the navigation says entry configuration. So, when you click this entry configuration icon, then you see a model says entry configuration. So, when you scroll all the way to the bottom, then you see the real path, and this is actually what you can modify the path of the preview page. So, we want to use this home story as a very root. So, what we can do is fill out with one single forward slash, and that's it, but don't forget to hit the save and close button. So, click this green huge save and close button after you fill out this real path with the forward slash, just a single forward slash, and then it's going to remove the unnecessary home, which actually comes from the name of this story. So, I hope you can see this Hello World with the feature one to feature three, and hope that you can see those dotted line wrappers. I kind of try to zoom in. Okay, if you don't see the same screen with me, feel free to write down that you don't see that, tell me what do you see now. So, I'm happy to debug with you. This is the point of, you know, doing the live online workshop. Cool, nice, nice, it works. Good, good, good, I guess. Meanwhile, while I see and read, you know, how people are following with me, then I can slowly start to move on to the next step. So, we actually followed only a few steps, and we didn't configure anything, you know, like in the code wise, actually, but for some reason, it has already, you know, like the necessary configurations, and the very minimalistic real-time visual editor with the, not the minimalistic real-time visual editor, sorry, the minimalistic content in here with the full real-time visual editor feature is enabled. So, what I mean by that to say is like wherever you click the component, oh, okay, I think the internet connection today with me is so bad today, sorry about that, whenever you click the content, or there could be some other issue, it should actually like bring me to this headline, because I click this Hello World, and it should jump in here. Let me check if it works. One, two, three, four. Something is not correct. I'm going to reload the new version of the app. It's a little bit unfortunate. You should actually see one, two, three, four written in live, but I hope you get the point. It should work as I said real-time, but when you hit the save button, then of course the content would be saved. So, I didn't hit the publish button, but I still can see, you know, the current preview with what I have configured, you know, the content so far. Sorry about something it's not working correctly, but I know it's because we actually launched something on the weekend. So, around let's say like the demo part. So, sorry about that, but I hope you get the point. Okay, I see the message, new message, on the top. Okay, on the top beside the logo they mentioned there are new updates. Ah, yes, yes, yes, yes. And then when did you make the change to remove the home path? Ah, okay, I made a change to remove the home in the end of the URL by clicking this entry configuration. And then when you scroll down all the way to the bottom, there's the real path and it should be empty by default. But you can fill out this single forward slash and hit the save and close. Then you should see the same screen, but without one, two, three, this is something I added a few seconds ago. So, changing the headline doesn't apply life changes. Yes, save button is required. Yes, thank you. Yeah, actually, yeah, what requires those is something what is happening to me. And that's something I would say like, you should actually like see the click event is being listened and I can jump into this headline here. But today I think something is not working. But let's not waste our time because the rest of the things are working. So, I hope you are here at the same, let's say, the steps as I am here. And let's quickly go back to our Notion note to review where we are actually. So, we already finished here. By the way, if you need, let's say, if you want to see, you know, like a few seconds ago, a few minutes ago, a screen that I was sharing. Actually, most of all the screens are, you know, like displayed in here, so you can have a look at quickly on your end if I went too fast. And here, yeah, we saw that. Yes, let's check it out actually. Our package. Oh, sorry, package.json to be sure if all the dependencies are in the correct, let's say, dependencies.

So, let's open up our VS Code. This is cheat sheet, sorry. This is the same screen I had to share with you. So, here at the package.json you can have a look at if the astro SDK from Storyblok is on depth dependencies, but it's on actually the depth dependencies. And in fact, the rest of them are also in the depth dependencies. What I want you to do is actually to update this depth dependencies to dependencies, and then hit the npm install, then it should be fine. So, here is actually the instructions. So, let's do that together in your VS Code. And then here I'm actually going to update this depth dependencies to just dependencies, and then I'm going to hit the save button. Sorry, I need to quit while I was running it. And before you're going to execute npm install, I want you to make sure if the Storyblok Astro SDK's version is 3.0.1 minimum, because if you have 3.0.0 or something lower, then you might run into a minor issue, and I don't want you to experience that. So, make sure that you have 3.0.1, and I guess everyone should have that as we follow the same steps together. So, after you make sure with that, you can run npm install or npm i, and then hit the enter to execute, and now the dependencies are updated into the correct dependencies, I would say. So, we are done in here. We also configured already the preview URL, we also solved this issue, we have the content being rendered, and this is actually a quick note for 4.04 when you see that. Yes, we need to configure the preview API key token to be stored at the environment variable. But again, if you want to just quickly discover how Astro and Storyblok would work, you can actually skip this part. This is more for optional, if you want to start working on for the production-ready application. So, if so, then you need to use the environment variable. With Astro, I would say it's not that difficult, but you can configure that actually from the astroconfig.mjs, and I'm actually going to show you, and this is where actually you see your preview API key token is being, you know, stored. So, if you don't use the environment variable, then that's the way you're going to do that. This is not going to be production-ready, obviously, but if you want to store the environment variable, I would say, like, here, this key would be the, I would say, the place where you need to set the correct environment variable name. But I'm not going to go too deeper, but the point is, like, as you used already our CLI to generate the Storyblok, I would say, application with Astro, then you already have everything configured, and if you go down, here are the components, dynamic components, I would say. So, these are all dynamic. That's why, like, when I made the change of the content on the teaser, let me go back here, teaser, like, from Hello World to 1, 2, 3, 4, then you saw the change is dynamic when I hit the save button. So, that's how it's already configured in here, and you just need to, you know, like, have a look at how things are being configured, how the components are being called, and you know, like, fetching the data, et cetera, then the rest of the part should be pretty much easy. So, quick explanation to that, and I would say, let's go back to the Notion cheat sheet, and I see that some people join, like, from the middle of the call, so I would say, oh, thank you. Yes, yes, yes, thank you so much. Is that correct to pronounce your name, KL? I hope so. Thank you so much for helping me. Yes. Next up, we are going to import the component schema, because we only have two hours, and time is really precious, and time is money, so I wanted to have exactly the same component schema as mine with more accurate way, and in a shortcut way. So, the thing is, we are going to use the Storyblok CLI, which we used already, but it's more going to be the real CLI. Actually, the command we executed to generate the new Storyblok app is something called createStoryBlock. It's part of the CLI, too, but this is going to be, like, a more official one. So, that, if you haven't yet executed before from this Storyblok CLI, then you can actually, like, follow what you see on my screen right now. So, we are going to install the Storyblok CLI. I have already installed, so I'm not going to see the same, let's say, screen with yours, but you can execute, first, like, in your terminal or any command line tools by saying, at the most root of your local machine, you can execute npm install Storyblok-G to install globally, and then after that, you can execute Storyblok login. You need to log in, actually. If you already have used the Storyblok CLI, I would recommend you to log out first because you might see some error, because after a certain time, it's going to log out, you know, like, for a data security reason, and it would ask you to log in again. So, if you remember that in the past that you might have used a Storyblok CLI, I would say, like, Storyblok log out, and then Storyblok login again, but for most of all of you, I would say, like, if you're first time using Storyblok CLI, just execute this Storyblok, sorry, npm install, and then execute Storyblok login. Then you should be able to see this same screen. I'm going to actually, like, make it full screen so you can see better. So, you can, you know, like, select a way to log in. Mostly, I would say, like, email would be quite convenient because you can, you know, get the authentication code, and then you can, you know, like, log in through the terminal. And then let me check the chat. I got the message. Login successfully. Token has been added. Yes, yes, I would say it seems like you succeeded, Ricardo. So, we can keep moving on for the next step. I think everyone can follow, like, what I'm going to explain the next steps. So, after you install the Storyblok CLI, let me check the time, after you install the Storyblok CLI, and then login to use the Storyblok CLI, then I want you to download this JSON file, which I already created the JSON file for you to have the exact same component schema, so that you do not need to watch me, you know, like, telling you that, okay, you need to create this component with exactly the same name, and then configure that, that, that, that some kind of, that is going to be, like, yeah, very long process to do that, and I'm quite sure that even me, myself including, I'm going to make a mistake. So, to avoid having some issues for now seeing exactly the same, I would say, the workshop content, you can go to this Notion page, for those of you who just joined right now, and then you can come down to, you know, like, this part to install the Storyblok CLI, and then click this, oh, sorry, click this file, and then I'm going to maximise it. Then you can actually, like, download this component file. And the point we are going to use this Storyblok CLI is that, not export, actually, like, importing, you know, like, this component schema JSON file into your Storyblok so that you would have every necessary components ready, because right now I can quickly show you don't need to go and see it, but I can quickly show you. So, at the block library, this is where you can see all the necessary components, but we only have four components, which is not enough for this workshop. I want you to have more than just four, you know, components, and all the configurations are already listed up in this component schema file. So, what we are going to do is, you can just copy and paste from the Notion page, and here I'm going to actually copy that, and then there is the command called push components. That is actually the important command we are going to use that. And then here at this, you know, how should I call this? At this kind of variable name, you can swap this into your JSON file path. So, if you installed or downloaded this JSON file into the most root, then that would be your path of the JSON file, and after that you can add this hyphen, hyphen space and then your target space ID, which I'm going to tell you where you can get it. So, let's first of all, like, copy and paste, and while I do that, then I can show you. Actually, I'm going to make my screen a little bit cleaner and let me go back to the root. So, I went back to the root directory, because that would work better and easier. So, what I'm going to do is paste what I have copied from the Notion node for this workshop, and what I'm going to swap first is here, the component schema JSON file path. So, what I'm going to do is that let me, let me, okay, I'm actually at the, I actually have this at the desktop. So, I am going to drag that. You can also use the same trick. If you downloaded, no, after you downloaded this component schema file into wherever in your local machine, then you can drag and drop of this file, JSON file on the terminal, and then it's going to fill out the path, and then here at the space, we would need a target space ID, so this is something we can get from the story block, you know, like a screen.

So, I'm going to go back to our story block UI. So, what I want you to see is that actually getting out was from the visual editor. Oh, sorry. React. React day. And then continue with trial. What I want you to go is this settings on the left-hand side of the dashboard. So, in here at the space, in general, there is already a space ID, so you can copy just this number. I noticed that when you click this copy here, sometimes it includes this chart, but please do not include this chart or make sure that it's not included, so I'm going to copy that, or alternatively, on the URL, actually, there is a space ID that you can get in, so in either ways, you can, you know, like get the space ID, so I'm going to actually swap this, your target space ID with the value I got, so just the numbers again, and then I'm going to actually, like, push the components to, yeah. Okay, because probably I didn't log out. If you have seen a similar case or a similar error, then I would recommend you to log out for the story block logout, then I'm going to do a story, log in, and then with email, yes. Didn't make any mistakes, I guess. Okay, I should quickly check it out. One sec. In you, yeah, okay. I should see that now, the authentication code. Okay, if you are being a little bit behind from what I was showing you, some of the steps, then now it's time to catch it up. Okay, so I think I can go back to execute what I wanted to run, so I'm going to rerun this and see what's going to happen. Yes, everything seems to be fine and it worked successfully, and you can see what kind of components are being pushed to this space that we are working on. So, let's go to actually the story block UI and go to, I would say, the block library on the left-hand side of the dashboard, so when you click here, you see more than four components. And some of the components, let's say, this article could be something interesting, you see more than just the short text, right? And it's also configured already with the image, title teaser, rich text content, and you also see config with something unique components, which I can also explain. And this is something based on the atomic design theory. So, the point is, like, up until here, if you have the same numbers of the components after executing the story block CLI to push components, then you are following so far. Let me know if you see anything different on your screen or if something is not working, otherwise, then I think we can go to the next step. Okay. You can write down if it works or something is not working, and depending on that, then I try to help to work everything with you. Okay. Oh, and by the way, while waiting the reactions from the people or from you, I would say that if you're interested in what you can do with the story block CLI, here is the link to the documentation we have. And it's quite fun, actually. And you can also write your own Node script to execute many things. For example, like, let's say, like, downloading all the assets that you uploaded into the story block assets, asset management, and then into your local, you know, machine or other way around, if you want to do that, this kind of, you know, stuff. If you have, like, some ideas, then it's very fun to work with. And okay. So, here would be, like, showing you, yeah, the components where you can actually, like, register all of them. This is actually just to show. So, we already covered that. We can move on. Okay. We already saw the real time editing feature. Maybe I can quickly explain how the real time editing feature is implemented. Because that's something I skipped to show you. So, not in the astro config. Not in the oh, this is a different screen. My bad. So, this is what I wanted to show you. Sorry about that. This is something, Rebecca, I was not going to show you. So, what I mean by that is at the source, story block. Okay. So, under the directory of the source and the story block, this is where all the dynamic components are living. And I would go with something easy one. So, here at the line 7, I guess, in your environment 2, you see an API called Story Block Editable. This is an API that you can actually import and just call from the story block astro SDK you just installed. And yeah, what you can do with this story block editable is that by setting the right props to fetch the correct dynamic components data, then you would be able to make the wrapped inside of the components to be dynamic. So, here at the headline where we saw actually the hello world with 1, 2, 3, 4 being added, that's actually what I was, you know, like making the live editing, you know, like content modifications. And yeah, I would say the trick behind is because of this API. I'm not going to dig too deeper like to show like how our SDKs are actually defining this API. But the point is like you need to, you can use this, you know, like Story Block Editable into dynamic, you know, like components file. And the point is that you can wrap the components where you want to make it dynamic. So, here what we want to make dynamic is the headline from the teaser component. And that's how I'm doing it. And, of course, you can nest components as I was showing you or telling you the point of using story block is that based on the atomic design concept to use the reusable and nestable components. And the thing is I can actually show you here. So, oh, I'm not running anything. Let me run. I think it's in here. I should be already running it. Yeah, here. So, the point is this is the teaser and this is the headline, right? And that's what we enable the real time visual editing with using a special function called Story Block Editable. And to see, let's say, how do I say? Oh, no, I was explaining, sorry, sorry for going like many directions.

I was explaining to you how you can actually also make nested components to be dynamic. And here's another example. There is a grid component that works as a parent to hold the three feature children components. So, here inside of the feature component, there are name and image. So, image, I didn't set anything. That's why you don't see that. But in a feature, you should be able to see, you know, like the changes in here. Dynamic. And now you see three exclamation marks being added. And regardless of like where it's being nested or even without being nested, you can make pretty much like every component to be dynamic. And the logic is the same. Wrap the component that you want to make to be interactive and to edit real time with the Story Block Editable. And I will show you actually the grid components part because teaser is not being really nested. Technically, it's nested, but from let's say like this home story-wise, it's not really being nested, I would say. And this is the grid as a parent component to nest the child children components inside. And what you see is that, of course, you want to probably drag and drop and change the orders of these feature one to feature three inside of the grid component. That's why you also wrap, you know, the children components, which is going to be inside of the grid component with Story Block Editable. And here, what you are seeing in here is that we are mapping actually all the children components. So if you're going to, you know, like add hundreds more of feature components or any other nested components, any other different nested components inside of this grid component, it should render no matter what. Because we are mapping as many as we store those components inside of the grid. So you don't need to do that manually. Instead, you handle programmatically. So to render, let's say, the rest of the children components, you can use another new API called Story Block Component, which is a component, actually. And yeah, that's what you can actually do that with this. So you don't wrap anything because we don't know how many components we want to render, how many components are actually, you know, being nested inside of the grid. Instead, you call this Story Block Component, and then this, I would say, component, this component actually already handles to catch all the dynamic components inside of, you know, the grid and then the rest of the part, which you can see from the feature, you see a very similar structure from what we already saw from the teaser component. Because this is the most child of the component, which we don't have anything to nest inside. So we just need to wrap, you know, the content, what we want to, you know, like, render it and also modify the content. And then that's all. But maybe like, as a developer, you wish to have something, JSON format to see, you know, like, all these relationships with the name of the props and the data. And with that, I would say, you have this already feature on the Storyblok UI. So instead of clicking around, going inside and checking out the name of these field types, so this name, image, everything, all of them are called field types. So to check the relationship of the component names and the field types, you can go to this down arrow, green button. And then from here, you can see two different types of the JSON files. So I didn't hit the publish button. When you see this gray, and also when you hover here, if it says draft, then you should see draft JSON. If you already published, then you should have a look at publish JSON, which is going to be a little bit cleaner. So because for the draft version of the JSON, we need to have the info, what are the editable components and what or not? So I'm going to click the draft JSON. I'm going to maximize a bit. So in here, there is a name of the story. And then I'm going to search actually feature. So yes, there it is. So this feature component with feature 1 and 3 exclamation mark, which I made a modification, is also in Android, let's say the path or the route of the name after the columns. And then there is the body and there is the content. And then there is the story. So everything starts from the story content, and inside of the content, there is a body. And that's what we are actually mapping all the dynamic components. So you don't need to modify that to render all these components manually. Instead, you can render all these components dynamically and programmatically. So that's what you can see. And then I would say, let's quickly check where we reach to this workshop. So far, I showed you how the story block editable would work, and also story block component. This you can read it if you're interested in or if you miss some of the steps and you don't see something the same screen as mine, then you can always go to the part 1 branch of the GitHub repository that I shared with you in the beginning. So let me do that again for those of you who joined a few minutes after this workshop. So go to this workshop repo. And then when you switch to part 1, you have everything, same configuration as you are seeing on my screen. And you just need to switch or swap, this one, sorry. You just need to swap, let's say, on the astro.config.mjs file, this preview API key token to be yours. So that's the only thing you need to do. So if you miss some of the steps from the part 1, that's what you can do to catch it up. Thanks.

Before we move on to the part 2, I see that it's already an hour past, so let's make a quick coffee break, or bathroom break, and let's get continued. So actually we already completed the part 1. So, oh okay, let me see... Okay, the push command did not work. Okay, I logged out and logged in. And what else you see on your screen? Okay, area reference area header is not defined. Headers is not defined.

And what else you see on your screen? Okay, area reference area header is not defined. Headers is not defined. That's what you saw on the terminal or the command line interface, right? Okay, which is a bit weird. Headers, headers, headers. Of course we don't have the headers. You don't need to follow in this process right now. I'm just trying to figure it out what Nikita is facing the issue right now. Headers. I don't think we have some headers. No, no, no, we don't have. Or maybe... could you check the... I would say the path of the JSON file is correct first? It's not fine... yeah... Header is not defined. From what it sounds like... it sounds a bit... I would say... Technically you can actually see the same screen with mine at this point because we are not using all the components we imported. I would say how about whenever we try to use the new components whenever we try to use the new components, then I'm going to show you. In fact, I think you can see that, yeah, like this on the screenshot. So, try to look around on this notion. I would say workshop cheat sheet. And I remember I did my best to display, you know, as many screenshots for the components. So, you can follow these. And if you have questions, then write it down. Then we try to, you know, like help with your solution. Okay, thanks. All right. So... where are we? Part two. Yes, yes, yes. So... part two. Yes, part two would be quite easy. In fact, it's just like there. And there's already part three. So, what we are going to do is import the header component into the base layout. Let's see that... import the header components. Okay, let me quickly... actually... show you. So, this is already a working project. What I mean to say that is header component into the base layout. So, this is the base layout aster file. You should have that by default. If not, let me know. I think you have that. Let me quickly check what I was working on. Layout. Yes, by default, you have that. Let me... Yes, and what I want you to do is... I'm going to show you... Show you... Better. One second. I'm a bit lost what I was doing here. Index. Okay. So, what I want you to do is inside of... inside of the pages directory, there is index.astro. When you open it up here, double check if the base layout is being imported. If not, I would say you can actually have a look at at the part two. And then, go to the right directory by following the directory I was showing you here. Source, pages, index.astro, and you should have this base layout imported. And let me quickly have a look at what I mean to say in here for header component. Okay. I should probably...

The core... I don't have it. Okay. Probably I mean to say just make sure the base layout is imported. And then the next step we want to do is renaming this index.astro to use square brackets with the spread operator and use the slug. So, I would say, like, you can copy and paste in here, but if you're going to see some errors, try to... try not to copy and paste, because I saw in the previous time when I hosted this workshop, when you copy and paste the text from the notion, it actually didn't follow the exact, let's say, the operators and the formats and the fonts. So, this caused a little bit of the error. So, if you see any kind of errors, then try to type it as it's displayed in here. I would say, like, it's usually no problem doing that, but if you have an issue then try to modify this part.

I'm going to actually, like, go to part two. Yes. So, it should be actually this here. So, you can see the name of the index.astro file is now remade into the square brackets and the spread operator with the slug. And this is how you should see that. And I would say I have added a couple of additional code, and don't worry about it. You can have a shortcut by... I didn't add the link. Okay. You can have a shortcut to this GitHub repo, which you can go to the part two. I'm going to send you the link. And then I'm going to navigate you to the source. There is the pages. And then, yeah. Slug, Astro. And here, you can copy and paste simply from here. So, you have no typos, no unexpected errors, I think. And then paste it into the slug.astro file. So, I want to explain you a few things while you're copying and pasting the code. And if you get the issue, let me know while I explain you.

And here, what I want to explain you is the getStaticPaths. This is actually the API provided from the Astro side, not the Storyblok side. So, the thing is that you can fetch and modify the route with Astro. So, if you want to modify the routes dynamically by using the Astro side of the features, which you should do that, actually, then you need to use this getStaticPaths. And with the combination of the Storyblok link endpoint, then you can actually modify in the best way and the most flexible way. So, that's what you see the getStaticPaths in here. And what you see here at the links is that data is actually fetching all the data you saw from the JSON draft JSON file with me. And then, with there, you can actually use the links API from us. And that's what you can connect to get the links. And then, you are mapping all the links which are existing on this, I would say, like the space. And then, here, we are modifying the parameters inside of the getStaticPaths because that's the point of using this API from Astro. And then, we are saying, if the flag is equivalent to the home string. Sorry, if it's undefined or home string, then we are actually like rendering into the home. I mean, to the route. And here, the rest of the different flags, we are going to let's say, have a look at all these false flags and then render these paths. So, home, the most route of the route would work differently because we modified to remove the home. From the UI, Storyblok UI. That's why we have this conditional operator. But else is not so too complicated. And here is actually like what data is explained in more details. So, the CDN stands for our Storyblok content delivery API. That's only for read. So, you can actually like do other stuff. With this purpose, we have the other API called management API. But this is to actually get the content delivery API from the Storyblok. And then, we define the way, the path to fetch the data that are related to the stories. And also, define the yeah, I think we also define and modify the last configuration of the slugs. Yeah. And here is also something that you might want to keep in your mind when you're going to build a production ready application. So, while you're developing your application, then you can set the version to retrieve the data for draft. That's what you saw the two different JSON files on the screen to see the JSON layout. Sorry, not the layout. JSON structure to see all the components information. And if you set this to publish, then you can see the published version of the content. So, I was explaining quite long around the get static paths and the link endpoint. And now, we can go to testing a new about page by using page content type. So, content type is also a, I would say Storyblok terminology. But you can think this is equivalent to the page template. So, content type stands for page templates. So, there is a page template called page which already exists.

And even, you know, like if you fail to, let's say, like import the component schema, this one already exists by default. So, don't worry about it. So, I would say you need to create about page, right? So, let's create a new about page.

So, I would say, like, probably you can open up the visual editor or stay on the visual editor screen as you can see in here. Because you can do pretty much everything on the visual editor, not just editing the content, but more than that, you can do that. So, when you go to on the left-hand side of the screen, there is a down arrow. So, from here, there is a plus icon says create new content. So, we can click and then select the story. There is actually a folder, which we are also going to use later on. So, we are going to create about page. So, you can fill out the name in here. While you fill out the name of this about page, you saw this slide is being filled out automatically. And that's something your content editors or whoever are going to work on your Storyblok applications also have access and can modify that without asking for help to us. So, we have actually a lot of features on Storyblok that developers can focus on, you know, like their code related tasks instead of being interrupted by the content editors asking you to modify the slugs or create, generate new slugs for their new pages, et cetera.

Anyway, so, this is the content type what I was talking about, which is equivalent to the page template. And from here, you can choose between three different content types if you were able to import the component schema. So, here, you have the page and by default, is also the page. So, as long as you see the same screen, you can hit create and good to go. And now, of course, we see the 404, because we just created this about page. And let's go back to actually the cheat sheet and see where we are at right now. Let me see if people are following. Okay. No new chat. Okay. Let me reload the screen first. And yes, we get the 404 because on the right-hand side, we don't have any components. We are using it. That's why, like, at the body, we see add blog option. So, in here, what I'm going to do is click in this add blog option, and then I'm going to actually, let's say, like, teaser. So, in here at the teaser, there is a headline, and we are going to say about page. Hit the save button. And then see if the contents are being loaded. There's something not working. Let me see. I think we need okay. I think we need also to copy the header. Yes, yes, yes, yes, yes. That could be it. I think I skipped this part. Sorry about that. So, yes. What I missed this part is this one. Thank you. Thank you so much, Keyur. So, under the source directory, I think you need to create this components directory, and then with the right click and then new folder, then you can create that. And inside in here, you can create the header.astro, and don't worry about the code because you can actually copy and paste from our GitHub repo. Let me go back to the root. So, here at the part two, and then source components, then there is header, and then you can copy and paste. So, I would send you the link, actually, where exactly you can come to here and copy and paste. Yeah. And let's see that. Of course, I'm not having this structure. That's why I'm getting an error. Yes, this also has to be renamed. Yeah. Yeah, this should be here.astro. Let's stick to that. I think I was showing mainly the already working project. That's why it didn't work. My bad. Pages, Snug, yes. Here. Yes. And then the header, yes. You can create new folder, components, and inside in here, we can create a new file called headers.astro. I think it was header. Sorry. My bad. Header. And then I can copy and paste.

Let's go to header, copy, and paste. Okay. And, of course, I think we need to include a new header into, let's check it out, astro config. Oh, no, not this one. I think I'm going to find out the header. There. I think I'm going to find out the header. Yes. At the base layout. Yes, that's what I was missing. Okay. So, at the base layout, that's what we needed to import, actually. My bad. I was forgetting it. So, I'm going to copy and paste. You can actually do copy and paste from layout, base layout, astro into part two. So, I'm going to paste that where you can actually copy and paste from here. So, this should be the new base layout. I'm going to actually then paste this as new base layout. So, it should be this. Yeah. Okay. Sorry about the glitch. This could happen if it's live. Let's see if it's going to work. Yes, it works! Thank you so much. I really like attendees are also helping and being interactive. All right. I hope everyone also can see the same page as me. If not, let me know and we will try our best to solve together. Otherwise, I think I would move on to the next step. Let's see what is the new step. Yeah. Okay. That was actually it about the part two. So, we can move on to the part three, which is going to be a dynamic menus. So, on the cheat sheet, as you can see that, we can create a new config astro file in Android's directory of source, story block, and the config. So, I think I'm already going to go to the part three from the GitHub repo. So, let me go to that. So, you can switch to part three and then go to source, story block, and then yes config astro. So, that's it. It's just there. Very simple. But to make it interactive, we would need this file. So, I'm going to create the config file, which is going to be under the directory of source, story block. So, create config. So, a dot astro. And then yep. So, after that, let's check it out, the steps we need to follow. We need to add this new dynamic component, the config component, into the astro config dot mjs file. So, to double check it actually, I'm actually going to show you astro config file from part three. And this is the place I'm going to send you where exactly you can see copy and paste. So, this line 14 is what we needed. So, let's go to I'm going to close config. And just open up astro config file. And where it's being added under the page. So, I'm going to actually add that. Hit the save button. And we have a few more things probably to add. I need to see that. And we also need to oh, sorry. There is a typo. Components. Source, components, header astro. Let's see. Header astro is something is not working. I think I want to check it out, the header first. On the GitHub repo. So, let's check it out together. There is the components.

Header astro. Yes, we have added the code to be dynamic. So, we are actually fetching the data again from the content delivery API. And after we configure this, I can show you like what we are using it. So, I think I'm going to actually like share with you the link in here. You can update your code on the header.astro file. Let's copy that. And then go to the header. So, here I'm going to paste it. Maybe I'm going a little bit too fast. But I'm going to go back to explain you this path where you can actually see it. So, checking the cheat sheet for the workshop. And this should be it actually. Let's see like what happened on the visual editor side. And yes, of course. Let's see where it has... I'm going to go back to the home. And see where the error occurred. Not found. This record could not be. Ah! Because I don't have the config story. That is the reason why. So, to be quicker because we are kind of a bit behind of the schedule, I am going to show you the working space so that you can have a look at and configure it quicker. So, this is part three. What I'm going to show you is... One second. I'm configuring things right now. Let's go to part three. Let's go to part three. I'm going to show you the working repo. And what I need to see is the preview API key token. So, part three. I can actually go to here. One second. Copy. You don't need to follow this now. I just want to show you the working environment first and then you can configure quicker. Okay. So, as you can see in here, regardless of the dashboard or wherever you are, more than just home and about, you have to config story too. That's what we actually have to configure. So, let me actually like solve this. Yes. And proceed. Nice. Okay. So, I'm going to go to this here at the down arrow and what you can do is click this create new content and you can choose story again and you can give a name as config. And I would say for the content type, because this is a special content type we want to use it, instead of the page, you can choose the config. If you don't see the config, probably importing the component schema might have failed. If that's the case, I'm going to show you what you can configure. But if you can choose the config, you can hit the create button and then you should have the config story. So, for those of you who, let's say, like can't see the config content type, you can go to the block library on this visual editor screen. And here is what you can actually like probably like imitate to create the same component. So, this content type of the components, it's called content type, means that when you create a new component by clicking this new block, then you can choose this content type block in the middle and then give a name as config. And that's it for now. To create a block, you can hit the add block and then let me show you inside. So, here at the inside, if you just created new this config component, then you don't see anything. But here, what you can do is click the green a, b icon, which stands for the short text. Select this blocks, sorry, the field type. And then after that, you can give a name to be, yeah. You can actually give a name to be the header underscore menu. So, I can do that, the underscore menu. It's going to worry me because I already have one, but I wanted to show you how you can add that. So, after that, you can hit that and then you should be able to have exactly the same configuration so far. And inside in here, when you, after you created this new blocks field type called header menu, what you can do is go all the way to the bottom and then take the checkbox of allow only specific components to be inserted and then select the components. And from here, you will be able to choose, you know, the components and then there should be a menu link which you also need to create one. But I would say, for those of you who weren't able to import the component schema, I would say record this recording later on and then, sorry, watch the recordings later on and try out on your end. And if things are still not working, you can always reach out to me on Twitter or on Discord on Storyblok. Okay. So, I would say that after that, then here, when you create this new config story, then what you can do is click this add block button and then you will be able to, you know, add this menu link automatically which you already imported when you run this Storyblok CLI. I'm going to delete here because I don't need three of them.

So, inside of the menu link, what you can do is that you can actually select the internal link. So, when you click here, you can select from all the stories that you have created. One should be home, as I selected here, and then when you go back to the mouse root, the second menu link should be about like this. So, now you have the dynamic menu component available so that, you know, like your content editors can modify and create that when they need on their own. All of them are dynamic. So, if it's going to be, you know, like another five header menu navigations, it doesn't matter because you can render as you wish and you can, you know, like allow content editors to select any kind of the internal links route dynamically.

So, I hope everyone was able to follow with me. Sorry for being a little bit going faster. If you have some issues, let me know in the chat. If things are working, that's also great. Feel free to let me know. Otherwise, I guess we tried to reach to the part four, which we wanted to aim it, you know, like as an initial goal. Seems like we might run out of time for the part five, but you have this notion note, so you can try out as a homework after this workshop. So, the part four is creating the custom components. And what I want to do is actually we want to interact with the assets because right now what we see is just hello world and about page. And then there's just the config for the dynamic header, which is a bit boring. We cannot call this as a blog. So, we are going to customize the existing components. What we are going to do is go into the feature component, which we already have. Oh, sorry. And then we are going to add the image component first, which we can interact with the astro image component, which is updated in a nice way in the astro three. They already launched the astro four beta. In this workshop, I'm not going to experiment with the astro four beta, but we can try it out with the stable version of the astro three. So, I would say like we can actually add this image component to the existing feature and to show you what you should also have, same as my environment, I'm going to show you what is already configured. So there wouldn't be, no, there wouldn't be mistakes. And then you can actually see how it should be looking. So, what I was going to do, going to the content, I think I'm going to already go to the home. But what I'm going to go is this block library, which looks like a Lego icon. So when you go to this block library, and when you select this feature, instead of just seeing the name field type, which is a short text, we want to add a new asset field type. So what you can do is click in this green AB square icon, and then change this to asset. So after that, you can give a name as image. Don't worry, again, because I already have this image field type with the same name. But in your case, I don't think you should see that. So hit the add button. And then after that, you can click this new image, field type. And what I want you to do is going to all the way to the bottom, scrolling down, and at the file types, I wanted to choose this images checkbox. So take the images checkbox and then hit the Save button. And then you should have exactly the same feature component with me. Okay. So that's actually how you can configure, you know, like the existing components. And let's go to actually, let me quickly switch the preview API key token to display how you should see in the end. So this is, this is part four, right? So access tokens, I'm going to get this one. I'm going to swap this, starting. Yeah, it should work, I guess. And then when I go to home. There was something that's working perfectly because I changed the preview API key token. Oh, okay, that is a bit weird. One second. Yeah, this is part three, that's fine. Okay, my bad. So now I'm at the correct branch, because we are at part four. And let's see. Okay. Now we see what we should see in the end, of course, if you choose the different image assets, then it's not going to look like this, obviously. But the point is, when I go to this astro part, this astro image, which is in the hero component, which you already have from the block library. So what you can do is on the visual editor, there is the I would say block plus button says a block. So click here, search the hero, and then click it. So and then you can add in here, let's say that if the hero is being added to the most bottom, you can drag then drop to the most top. So you have the same look if you want to have the same look. And inside of the hero, you can fill out the content of the headline content of the sub headline and background image. Also, you can fill it out. So this component, this hero component is already imported. When you run the storybox CLI to import the component schema, that's why you already have everything. So what you need to do is I think you see upload image in here. And then when you click it, you can actually like upload the assets, what you want to have, for those of you, let's say don't want to think about what kind of images to install, I have included the links that you can use kind of similar, let's say, look you can create after this workshop, that I borrowed from this Astra official look images, they can you know, easily you know, like, use their press assets to have it, and then upload it in here. And when you upload it, then you can select the image that is going to be displayed. So when you click it, then I think I'm going to do that. And when I hit the save button, I should see the new image, which I need to, of course, configure some of the modifications because it's been stretched and stuff like that. Let me go back to as it was before quickly because this looks better. Yeah.

So we can have the content already been displayed and on the bottom, when I go back to the most root, of course, inside of the grid, there are features as default, but we didn't have any images in the beginning, especially when we are in the part one, part three, part two, part three of this workshop. So at the image, you can upload the image, any image as you like, and then select the assets that you want to display it. And then the way to display, we need to actually update our code on our environment. So let's move on to the part four. And then in here, let me check quickly. Yes, we modified a feature component. And then we also have a new component called hero component. So I think I'm going to stick to the feature component first. So let's go to the source components. Sorry, source story blog, and then a feature. So in here, you can copy and paste, and then update your feature astro file on your end. I'm also going to show you that I don't need this. I don't need this. I don't need this feature. So this is how it should look like. There is an image component, which is an API from astro. And from the astro three, you need to have this, I would say, new astro image component, which is coming from the different path. Before it used to be the different path. And now you should use this path actually. And then what you can do is instead of using the classic, let's say, image element, you can use this image component. And these, let's say, attributes source out with height are mandatory, required. So what I'm doing is that storing, you know, all the path to reach out to the, let's say, like this assets data, where it's stored actually in the story blog assets, digital asset management feature. And then I can render the image in the end. So I'm going to quickly show you where I'm looking at it. So this astros Houston image is what I want to render. I'm already rendering, but to show you the logic, because now you're following me and then try to render in the end. So what you can see is, again, go to this down arrow on the green button, and then go to this draft JSON, because I didn't publish it. And then here what I want to see is image here. So inside of the image, there are still, you know, like a couple of objects key. And then what I want to see is the file name, because this is actually the URL to retrieve our assets. In fact, when I copy and paste of this URL path, I can see that actually, oh sorry, I actually should see that. I could also show you like in the story block asset, the digital asset management feature part. But that's not the point of this workshop for now. The important part is that we need to get this file name. And to get this file name, the path starts from story, content, body, and this is an array object. So we map the rest of the components and inside of the child component, which is the feature component, and that's what we are modifying to add a new component. We just add the rest of the remaining path to store on the feature. Let's say here, over here. So this block prop actually holds all the way from the beginning till let's say to reach out to this body part of the data path. And the rest of the path would be depending on the children components, it would be different. That's why you need to add the rest of the data path to fetch this Houston image asset. And same thing for the out. I didn't add, let's say, the value in the out. That's why you saw empty. But if I add from the story blocks asset management, then I should actually see the text value over there. And these are mandatory. So I set these values, but of course you can change it if you want to. And then by using this Astros image component, then you would be able to have a performance and a modified asset handling. So the next component we need to finish to render everything is that the hero component. So I'm going to go to this part four, the repo. And then there is hero component. So this is where you can actually copy and paste. I'm going to send you the link where you can actually copy and paste. And then after adding those new components, there is one more job we need to do, which we need to add these new components to the Astro config file. So I'm going to go to the Astro config file. And here is the hero. Yeah, that you need to add. So this is what you can update your Astro config file. You should see a hero like this. Also uses the image component. And same way to see the data path from the draft. And here you can see the path I'm getting are slightly different because the name of the field type that I gave the name on the storybook is different. That's why you see slightly different data path. But to fetch the rest of the headlines, I'm going to use the rest of the headline, sub headline. It's also pretty much the same as the way that you got the Houston asset image on the feature component. So I hope you started to see the patterns. And I hope you started to, let's say, understand, like, these reusable and nestable components structure. And then once you have that, let's double check if I followed everything. Yes, yes, yes. Here are the assets that you can use it.

I showed you how you can see the data path and then use Astro image. Yes. Oh, by the way, in this, let's say approach, you need to use the remote asset to fetch those images because all the assets that you uploaded on the story blocks, story block is in a remote environment. So you don't have those assets in your local environment. Right? So if you are looking for the local images to fetch, then you can have a look at on the Astro documentation. But we are using the remote images to fetch. And that's also documented in the Astro. So I think I already showed you this new feature. Yes, it's required. And now you should see that on here on the screen. And you can add the new block, which is called hero. I explained you already in the beginning, but you can see now probably a similar screen with yours. And we added with AppBlocks, the hero component. We already have the code for the hero component. And yes, there is actually an interesting conditional, how should I say, the conditional field type that you can actually like, yeah, field type that you can see that from hero component. Yeah, I'm not going to go too much deeper because it's almost the time we need to wrap up our workshop. But for giving you an idea, if you want to, you know, like enable your content editors to give multiple different choices to change the layout on the fly, you can already, you know, like let's say, like, give them the options from the field type. And the logic is that I can quickly show you, there are multiple different field types that you can choose, right? In the beginning, by default, it's text. But we created the new asset field types to add into the existing feature component. And the logic I used in here is using the single option. And the thing is, like, you can add the, you know, options from the configuration screen. And then here, the left hand side would be the value that your content editors would see on the Storyblok application, the UI. And on the right hand side is that the value you're going to see on the JSON file. So after you, you know, like configure those values and hit the save button, right now I, sorry, I switched to choose the full width. So, and now when I hit the save button, and then have a look at the draft JSON because I didn't publish the content, then I should see the full width, yes, here. And this layout is the data path that we are adding the conditional, let's say, logic in here. This is the hero, what is it called? Layout, yes. So here is the conditional logic that we are adding it. And if the layout, if the starting from the Storyblok content body, and then the layout value is set as constraint, then we are going to use this, I would say, like style. And by the way, we use the Tailwind CSS style, if you have noticed. And then if not, the else, then probably empty. And here, you can actually set this dynamic hero class into the most outer layer of the hero component to set in the class attribute. And then depending on that, you can actually allow your content editor to select the different styling of the layout from the UI. So, I just quickly wanted to show you, let's see where we are now. Load, yes, load hero component, I think we covered this part. And if you missed any, let's say, steps, there's always a GitHub repo with the correct branch, which is the part four in this case. Then you can forget and then just update the preview API token on your end. And I think time is already up. As I said, this part five is optional. But if you, let's say, try out this part after this workshop, then you will be able to complete and have the minimal, let's say, like structure of the block. So, you already have the necessary components. So, just follow and select the right components and update the source code into your local machine. And then you will be able to have this view of the blog article, which I can actually quickly show how it's going to be look like in the end. Sorry for running out of the time, but I hope you still would be able to enjoy that after this workshop. This is the workshop part five. I'm going to change the access token so I can show you. I did and then switch to the part five and I'm going to update this and then rerun. So, you should be able to see what you can see in the end. So, there's a new icon you can see that which you can actually, like, create that from this create new when you are selecting the story. But instead, you can select the folder and then you can give a name, same as before. And then you can, you know, like, decide the slug, how it should be displayed, modify it, and then inside of here, I can show you article three as it should be displayed. Yeah. Like so. So, here at the article component, when I go to the block library to see all the components, you can see this article components which you imported as the component schema JSON file. You have multiple numbers of different field types such as image, title, teaser, content which is a rich text. And here, at image, I have the image which I uploaded. You also can do that from the story block assets. And here is the value of the title. Here's the teaser that you can fill out. And here is the rich text. Rich text is being displayed on here. If you want to, let's say, like, change the text into something, I can do that here, maybe, bold, and then save it here. Yeah. Now, you see the first part of the word is being updated. So, for the blog, let's say, application, it will be more useful for your content editors and the users to have this type of the field types. And to handle the rich text, our story block SDK handles around that part. I can quickly show that here. There is the rich text, render rich text API that is coming from our story block Astrid SDK. All you need to do is set the correct prop to reach to this field type. And then you just need to store at the right JSX scope.

And that's it. Then you would have all these features. Because everything is handled on the most difficult part from our Astrid SDK. You should be good to go.

So, that's how you can see in the end. And by the way, I updated the header navigation, dynamic header navigation to link to instead of just home and about page. Because we want to see the blog articles. So, now we have three blog articles. So, that's why I can actually update this configuration here instead of home and about. So, that's how I did it. And, yeah.

Again, sorry for running out of the time for not being able to do the hands on part for the part five. But, yeah, if you were let's say like, yeah, if you followed already, you know, like, the parts till part four, then it shouldn't be that too difficult. And, yeah, again, you can follow the steps until the end. And if you want to deploy it, there's actually the rest of the ultimate tutorial, which you can get access to here at the table. And the most bottom, there is the link where you can do that. And I would say I hope everyone enjoyed and let me know if you have some questions. Then Storyblok also has a Discord. And you can, you know, like, ask your question on the Storyblok Discord at the Astrid channel. So, you can join, you know, like from here at the Storyblok.com and the resources then go to Access All Guys. And then, yeah, actually on the Hooter, sorry. There's the Discord and you can join and ask the questions. Okay. I think I should end on time. So, with that, I would say thank you so much, everyone, for joining me today. And, yeah, I hope you learned many things together in this two hours of workshop. And recording will be uploaded on the Git Nation, I would say, like, online platform. So, you should be able to watch the recordings later on. And you have access to this Notion note. I'm going to send it late for the last time because this is very important for people who want to test it out after the workshop. So, let me know how it goes on your end. And, yeah.