Crash Course into Remix & Storyblok

And also, first of all, we need to introduce ourselves, who we are. So I shouldn't forget about it. So my name is Arisa. I work at Storyblock and Storyblock is the head of CMS and that's why we host the Crash with Remix and Storyblock workshop today.

Today with me, I have Facundo. So I will let you introduce yourself, Facundo. Sure. Well, hello, everyone. My name is Facundo. I work with Arisa. We are part of the Developer Relations team at Storyblock. What we do at the Developer Relations team is try to help the developers to get the best from the product from Storyblock to help them to integrate Storyblock into their projects and trying to make their work easier creating tutorials, guides, or presenting workshops as this one that we are going to have today.

So not to waste any more time, if everyone is good to go, we are going to first of all show some of the sources that we are going to use. So this is also the source that you can find from right here preview of the final website. So here you can find a GitHub repo link. And that's what I am showing you right now. I'm here let me share it with Zoom. And the Discord. So I would recommend you probably like taking a look at this GitHub repo as well. Feel free to fork it if it feels like more secure way for you. Or if you're free to follow one by one if you want to let's say, like, follow every steps that we are going to show. And after that, I'm going to show you the intro. Of the remix slides, and not to waste anymore time.

So in the beginning, I would say like less than half of the beginning of this workshop would be knowledge base. So we are going to share with you and show you a couple of the slides to provide you the fundamental knowledge. Which is going to be quite useful for the rest of the hands-on part. More than the half of the rest of this workshop would be hands-on. So we are going to show you how you can, first of all, like learning by doing.

So we are going to build together storyblock remix blog application. So in the beginning, first I'm going to share with you the intro to the remix slides. So let's go through it. So, as some of you already have the experience with remix from what you introduced me or have tried out or started to be interested in. We are going to walk you through like very quickly what is remix and what kind of features are already implemented and you can use it.

So here's the little info. The first of all, remix is a full stack. Not just the frontend framework. And it will let you focus on to build the better, way better, I would say in my opinion, the user interface. And also not just the user interface, means like your users who are going to just, who are going to this visit, let's say, like your applications or webs. But remix also really considers a lot about the developer experience as well. We're going to see together during the hands-on, let's say, part of this workshop as well as the knowledge part in here. And it works, you know, like in a very fast, slick and resilient. I would say not just the user experience as I wrote it here. But I need to insist it's a really fast, slick, resilient UX and DX.

So here is like a very, very short version of what is Remix in one slide. So it's actually like the React-based framework. And if you already have the fundamental knowledge about the React, you can already understand how Remix works. Because you can transfer your knowledge from the React into Remix straight away. And it's the full stack. So as some of you have introduced us that you're full stack developers, then probably Remix would be really one of the best ways to pick up. Because if you have the fundamental knowledge of the full stack, and Remix is a full stack framework, then it's the perfect combination. And it serves the content and the pages with the service side rendering. That is something that sometimes I get, you know, like questions, like when I give talks in the conferences, stuff like that. Actually, that's actually one of the things you do not need to consider too much about, like how to differentiate, let's say, prioritized content first, and non-prioritized or at least accessed content in the end, stuff like that. No complications going on. It will serve the content service side with service side rendering. And the Remix uses the webpage API. So by using this, I mean on the Remix side, that's why, you know, Remix can, I would say it has the logic of, first of all, the fetch has the request and the responses, right? So these request and the response from the fetches can be used wherever they're needed in the future. So that's why, you know, compared to the other approach that is maybe familiar for you, probably requesting through the URL, instead of that, by using Webfetch API, it makes the Remix to be quite strong for fast and resilient communications in there. And it's an open source, that is also another important point. So here are the features.

And I would say like, we need to pay attention to, let's say like, how many variations of the routes Remix provides? So first of all, I'm going to show you later on how many variations they have. But in Remix, you can choose the best way to lay out the routes. So first of all, like, it will use the file system hierarchy to handle the URLs. And of course, you might realise that, you might realise that, well, if you use, let's say only the file system hierarchy, then doesn't it mean like, let's say your content editors, or your customers, who are going to maintain the content and even want to have the power or control to structure such kind of, let's say, routes by themselves, might not be able to do that. But this question would be answered later on when we introduce you about the CMS option, and also in the hands-on part. So, as I said before, Remix has this much numbers of routing handling. So if you, for example, use the splat routes, and that's actually one of the approaches that we are going to show you and also play together in this workshop, you will be able to actually create the dynamic logic for whoever is going to maintain the content to change and create nested routes even from the user interface, which means it's going to be provided from the headless CMS UI. So this kind of, this much options you have, so you need to pick the one that will be like best fitting in your cases. So, but I'm here to tell you the intro about the Remix, not to just show you about the routing system. But if you go to the Remix website, and you can actually already see pretty much a good demo in there, and that's what I borrowed the screenshots in here. So in here, like you divide the content with the, let's say like file, like nested system in there. And then like by dividing, like these components, let's say like you got the error in this sales, green, highlighted component over there. But then your left-hand side of the sidebar should be rendered, and not, your users do not experience that whole entire app would crash and just seeing the loading, like spinner. You also can do the similar stuff for the other rest of the components so that your users will have much better experience instead of seeing, crashing entire app just because of one tiny, for example, like this invoice component got collapsed. So we are also going to take a look at together and also play around together in the hands-on part to handle the nested pages and the components. So by combining the Headless CMS in here, you will have more control how to create the layout and the structure for a story, you know, these content instead of, you know, like maintaining in the source code level so that you will have more time on your end to have more coding related tasks instead of maintaining non-coding related tasks over there.

So here there are a couple of, or two of the elements that I wanted to pay attention to, such as Loaders and Actions. We're going to see also in the source code level in more details, but first of all, these are the, I would say Loaders is the function to help working with the server-side rendering. So that is actually the key core part, how you can serve the content with the server-side rendering and it manages the HTTP get request. So it will actually like combine working together with another function or the API that is directly coming from Remyx site, and with the combination, then you will be able to communicate better with the response and the request. And also there is the action function. It means to modify and mutate data. So as I explained in the beginning, Remyx is the full-stack framework. So you will have, or you have already a lot of built-in APIs or the functions that you can just call it and use it in the best place where you want to manage. And error handling, we also mentioned that. So I'm going to skip, but of course we are going to share, or you already have access to the slides from the notion table of content that we shared. So I would recommend you to take a look at it later on. Here is the sources. And before we are going to move on to the next content, which is going to be the intro to the atomic design, are there any quick questions? If so, we are happy to answer. Abgundo, do you have like any questions coming up from the messages? Not that I see. What I see is a lot of messages introducing, I mean the people, thank you very much for sharing all your details, all your story. Arisa and I will really enjoy reading where are you joining from and what do you do and what are you interested into, into Remix, into Sturblocks. So thank you very much for sharing everything.

What I was going to suggest is that, in I mean, so we don't lose the track of your messages and your details if you want to contact us, feel free to write the same messages in the Discord channel that we have for the workshop, or you can contact Arisa or me on Twitter that we are there. So if you want to chat later after the workshop, feel free to do that as the chat from the Zoom call will disappear after the call. But yeah, I mean, again, thank you for sharing all the details and in the case that you have any questions, feel free to ask that in the chat that Arisa or I we will be answering them.

Also, we're gonna make sure to have like quick posts like in after a couple of slides or after a few minutes doing the hands-on part. So don't worry about it, it's not going to be non-break, like non-stop three hour session. You will have couple of breaks to go get your coffees or have a quick break. So don't worry about that. And also we will make sure to take your questions if you have.

All right, if there is no more question, oh, will the recording link be shared? Yes, I believe so, Lara has shared with us an info that she's gonna upload the recording and it's gonna be shared with us. So don't worry about it.

Okay, so I would say like I will ask Facundo to take here this atomic design part. Then after that we're gonna have a quick five minutes Q&A if there will be some of the questions. So I will stop sharing my screen and Facundo you can start to share your screen. Sure, I think that there is someone, ah yeah, there we go. Amazing how you shared the information between you. No, because there was someone asking for the notion link but there we go, amazing. Cool, then I will take the lead now. Let me know if you see my screen. Yeah, I can see that. Amazing, cool. So let's talk a little bit about atomic design, probably if you have worked with design systems or if you were involved on designing or creating components for your organization or your projects, probably you are very familiar with this concept. The idea is to go through some short concepts related to the atomic design principle because we will work with some similar ideas, I would say during the workshop, the hands-on part of the workshop because Starblock works with a component approach that I think that Alisa will mention that better later.

But the idea is to get familiar with this theory with this methodology, atomic design principle is a methodology for creating design systems. The idea or the name comes from the, well, the previous table of elements, I mean, if you are familiar with chemistry, you can see here all the different elements that we can have in a periodic table. The idea is that we can create elements, HTML elements or group of HTML elements that we can reuse in different parts of our pages and in different pages of our website. So as it's called the atomic design principle, we will have the smallest part that we can have and we can reuse in different parts of our projects that is going to be called the atoms which are going to be HTML tags with a certain style.

So as you can see in this slide, we can have a label with a certain text, with a certain format, we can have an input and a button and each one of them will be what we are going to call an atom. These atoms, as you can see again, the periodic table of the elements, this cool image is trying to show you the different HTML tags that we can use on any web page. So you can identify the different atoms that we mentioned or that we are using. And this, I mean, if we group these atoms, if we pick this label, this button and this input that I mentioned before, what we can create is what we call the molecule.

A molecule is the smallest group of atoms. So as you can see here, we're using again, a label, an input and a button to create a small search box. So this is a piece of application or project that we can use on our websites or our web pages to actually add some functionality and use it to search content on our website. If we go to the same table, the same image, we will see that we can identify the different HTML elements or atoms that we included and the group of this HTML elements will be a molecule. So when we have more than one molecule or we want to wrap molecules to create a bigger group of elements, we can talk about organisms.

Organisms are group of molecules as you can see. In the example, we can have a navigation bar, for instance, where we display the logo of our website. We can use this search box that we created before and then we can have other links that are pointing to different pages of our project. If we talk about all these group of elements, or atoms, or molecules, we are talking about an organism. And this, I mean, this is a bigger group of different parts or different smaller groups of our web pages. If we group them, as you can see, we are creating different parts of our pages that we are going to reuse, again in the pages or in the different routes of our website.

Another example would be, for instance, a call-to-action block that we can have on our page with the bottom with the title, with the link to a different page. As you can see, the idea is that you can create these atoms or these small groups of atoms that we can reuse in different parts of your website. And you can keep this synchronicity between the style that you are using for your project. And you will follow the same guidelines for the different pages that you are going to create. We can have templates, too, which are groups of organisms using placeholders.

So what you can see here is the same navigation bar that we had before. We also have a header image or a call-to-action block, or we can have other organisms that we created and that we are maintaining on our project. And when we group all these organisms, what we can do is create a template, which will be, as you can see, the structure of a webpage, right? I mean, this template looks like a webpage without content, without the information. But this template is the structure that we are going to use to create the instances of our pages. We can have pages which are going to be these templates with real content. As you can see, we are replacing the call to actions with, or the images, or the content with actual, real information that we want to display to the users, to the visitors of our website.

So basically, these are the different elements, or the, or how to say, the key points of the atomic design principle. Why we should go for atomic design principle, or why we should follow this approach. As we mentioned before, we can create reusable blocks, reusable molecules, organisms, or atoms in the different parts of our pages and different pages of our website. We can manage, and organize these components in a system. We can create a design system to maintain the different elements that we are going to reuse in the different parts of our pages. What will bring to us, is scalability. Because if we have one centralized place where we are managing all the different elements that we can reuse in the different pages of our website, it will be easier to scale. And also it will be easier to maintain. If we want to apply a change to one of the elements that we are using in all our pages, we just need to go to one place and apply the change that we want there. And that will apply to all the places where we are using these elements.

We are sharing some sources with you. If you go to the slides, you can see a video. On the second link, there's a video that will explain you a little bit more in depth about the atomic design principle with a good explanation. The first link is the, I mean, the creator of the atomic design principle, a blog post that is explained with more details where the idea came from and how to achieve the idea of how to create design systems using the atomic design principle. And the last link is the book that this Brad Frost, the creator of the atomic design principle created in the case that you want to read the actual book.

So that was a quick introduction to the atomic design principle. An idea to have in mind when we work with the Starblocks, you will see that it would make sense because we are going to create reusable components, reusable nestable components that we can group into bigger components and we can reuse in different parts of our pages. Well, Storyblock is a headless content management system.

What we want to present with Arisa is a little introduction to what a headless CMS is. So you get familiar with the concept, the ideas, and you have the possibility of seeing the differences with the traditional or the monolithic content management system. So to talk about that first, we need to define what a CMS is. A content management system is an application that is used to create and manage digital content. So what you are going to have on your projects is an admin interface that will be used to create content. Let's say, create news, create articles, create blog posts, create products with the details of the products, create any type of product that you want to have and an editor creating and marketer creating any type of user. I mean, it doesn't have to be a developer creating the content. The idea is to provide a user-friendly interface to the different types of users that we are going to have on our team to actually create the content that we are going to display on our projects. So with this admin interface we are going to be able to actually create the content. This admin interface will be integrated with the whole platform called Monolithic CMS or traditional CMS. This CMS will integrate the admin interface with a database where we will store the content that we are going to display on our projects. And then we will have a view layer which is going to be the way that we are going to use to present the content that we are creating.

You may be familiar with some of the traditional or the Monolithic CMSs because there are some of them that are well-known in the market and have been used for several years. WordPress is a traditional content management system, Joomla or Drupal, but these content management systems they have a limitation let's say. The problem is that if we go to the same graph that we were seeing before, as you can see, we have altogether on the same place. We have the admin interface to create the content. We have an integration with all the different elements. We have a database where we store the content and we have a view layer. The problem that these content management systems have is that the technology that we are going to use to present the content is defined by the CMS creators, and we have to stick to a certain technology or a certain programming language to actually present the content that we are creating. To give you an example, WordPress, if we use WordPress to create the content and to manage our website, we are going to be limited to use PHP to display that content so whenever we want to display the content that our editors are creating, the only programming language that we will be able to use is PHP because, as in the traditional CMS, all the package or all the different parts of the CMS are together included in the same platform let's say, we have to stick to the decision of the creators of the technology that they decided to use to present the content. But what happens if we want to display the content using a different technology or the different approach? Let's say that we want to create content and we want to display that content not only on websites but we also want to display the content on mobile applications or desktop applications. So if that is the case, there's where the headless content management system concept appears. A headless CMS is a content management system where the content repository is separated or decoupled from the presentation layer. So some years ago, a group of developers came up with the idea on having a content management system with the admin interface to make the work easier for the content editors and marketers, the users to create content. And on the other hand, be able to present that content in different channels offer an omni-channel experience. As you can see, we can have an admin interface where we create the content. This content is also stored and managed in a database. But this database, or the place where we are storing the content that we are creating, we have an API that we can use to connect from different channels and using different technologies. So for instance, we can create websites with different programming languages or framework. We can also use other technologies or platforms like e-commerce platforms. We can also display the content on mobile applications using Android or iOS, or we can also display the content in smart devices like the Amazon Alexa device, for instance, or a smartwatch. We can display the content that we are creating on a star block, using different platforms and channels. So that is mainly the idea behind the Headless content management system. We can have also customer integrations with other platforms, because as we are not limiting the way that we can use to present the content and to use the content, we can integrate this Headless content management system with other platforms too. But the main idea of the Headless CMS is that we can create the content and present that content in the way that we prefer, with the technology that we prefer, in the devices that we want to.

So, what are the main differences between a monolithic and a Headless CMS? That we are decoupling the front-end and the back-end, that will give the flexibility to the developers to use the approach that they prefer and to be able to display the content that is being created, that we are providing first-class DX and UX, I mean, developer experience, because the developers will be able to select the technologies that they want to use for their project and to display the content, and the user experience will be great too, because we are going to use, we are going to provide this admin layer or these tools to create the content that is going to make the work easier for them.

Finally, as I mentioned before, we can provide omni-channel experiences, because the content that we create once in the headless content management system will be able to be displayed in different channels, mobile applications, desktop applications, websites, etc. Today we're going to use Storyblock for our project and the workshop. Well, because Arisa and I work at Storyblock, but not only because of that, because of other cool things and features that Storyblock offers compared to other headless content management systems that you will be able to discover them during this workshop.

But to summarize, the two main differences between Storyblock and other headless content management system that are out in the market are that from the user point of view, we are providing a great user experience because the people that is going to create the content will have a real time visual editor. They will be able to create the content and see how the content that they are creating is going to look like before they publish any type of content, before they release any version of the application. You will see later that, but we will have this real time preview where if you change the content or you create content, you will see how your website is going to look like with that content that you are creating.

And from the development point of view, the cool thing about Storyblock is that it uses a component approach to create, manage and save the content. So we will be able to create different reusable components related to the Atomic Design Principle that we were seeing before. And these components will be able to create the content structure that we are going to use to manage these different components on the different parts of our website. And we will be able to nest these components and reuse them in different parts of our pages and in different pages of our website.

So to give you an example, we will be able to create in Storyblocks a component called Hero with the properties that we want the users and the content editors to set the details and to create the content for them. And on the other hand, we will be able to link these components with the visual representation of them. So to give you an example, we are going to work with Remix today. Remix is a React based framework. So we will be able to create React components that we can link with these Storyblock components so the different properties that we are going to set on Storyblock for these content structures, we will be able to see how they are going to look like on the real-time visual editor using this preview that will use the logic of the front end of our application. As we mentioned before, we will be able to create a front end using the technology that we prefer. Today we're going to use Remix and you will see that you will be able to link the components in a Storyblock so you create and manage the content structures and then the visual representation of that component using React components in this case. So here we have a quick animation where you can see how the visual editor looks like. I mean we will come on the right-hand side panel with the different properties of our components and content structures and then we will come on the left-hand side the real-time visual editor, I mean the preview of the content that we are creating and the logic that we are using to preview this content is connecting to the real front end of your application. Arisha will tell us a little bit more about that later and we will be able to work with that and play with that during this workshop today.

So here we have the same graphic that we saw before but with the details related to StirBlock itself. We will have an admin interface which in this case will be the URL app.stirblock.com I mean, the platform, StirBlock was created using Vue that is the application that we are going to use to create and manage the content. Then StirBlock provides three different types of APIs. The API that we are going to use to consume the content is called the content delivery API which is a REST API. We will have the management API in the case that we want to edit or create content from the outside of a StirBlock application. And then we will have a GraphQL API in the case that we want to use GraphQL on our projects. And then as we mentioned before we are going to have different channels, frameworks, Sorry, programming languages that we can use to present the content that we are creating on a StirBlock in different ways.

StirBlock, I mean, as we at the developer relations team we are trying to make the work easier for the developers to to create the applications using a StirBlock and to connect StirBlock into their projects. One of the things that we do and we create at the developer relations team is our SDKs and libraries that you can use to connect in an easier way to StirBlock. Well, I mean, besides tutorials, guides, we do livestreams, we create videos, we create sample projects, but one of the idea that we have and that we work on is an SDK or different SDKs from the different technologies because, again, StirBlock is headless content management system, so you are able to use any technology that you prefer. As Remix is a react-based framework, we have created a React SDK that will make the work easy for you to integrate StirBlock into your projects, and with some functionalities that are being provided by this StirBlock React Library, we will be able to not only consume the content coming from StirBlock, but we will also be able to display that content and then connect to this real-time visual editing experience. I will show you some examples here.

As you can see, this StirBlock React package that we are going to install that we are going to see later, Arisa will show us how to install and configure that on our projects. Well, we will call the npm install StirBlock React that will provide us all the functionality from the StirBlock SDK. We will have a stirBlock init function that we are going to call at the beginning of our application to create this connection between StirBlock on our project, and we are going to set up some configuration there. Then we will have access to the StirBlock API client that will allow us to query the StirBlock content in an easy way. I mean, we will be able to connect to StirBlock and bring the content in an easy way with different configuration, with different functionality that we will see later. Then we also have access to some React hooks that we are going to use to connect to this Realtime Visual Editor, and then display the content that we are setting on StirBlock in realtime. We will also have a dynamic component or generic StirBlock component that we are going to use to render the content that is coming from StirBlock, no matter which type of component or block we are creating in StirBlock, this will make more sense when we start working on this, so it won't go super deep into this. Then we will also have this StirBlockEditable function that works as a flag for our React components where we can call this StirBlockReact function, sorry, this StirBlockEditable function, and what we are going to say is that we are linking this React components with the components created in StirBlock, and we are going to be able to click on them and edit the different properties inside the Realtime Visual Editor, and we'll be able to see the content changes in realtime.

Okay, so as Facundo showed you an intro to SCMS, and here is one of the examples, again, we use the StirBlock, and we are going to see more in depth of how you can organize and layout the structure. And this is actually not, I would say, like, meaning to be built for developers. It means that you'll be actually free for creating the layout and creating even the new components from the Hotness CMS site. So you also can do that for your customers or content editors if they're in your team, but it doesn't mean that you're the only one need to do all the job. So I'm going to show you how, or what I mean by that to say, so you also probably can understand visually in here. So this is after I created, logged in to the story book, you can obviously go to storyblock.com and then you can create an account if you don't have, and here is the login. But I'm not going to cover that part, instead, after logging in and after creating the space, here is a very, very beginning of what you can create. So I even haven't yet configured like the front end source code with the storybook space, but to give you the most simple example, I thought this would be the best. So here, by default, you actually have couple of components already. So you can see here, in this teaser component, it looks like there is one headline, which is actually one sort of field types. And as you can see, like in the other component, for example, like inside of the grid, there is another nested components. I mean like such as features in here. So if I go to this feature component, then there is another field type. This one has a different name called name to have a name or represent the name of this component or whatever you want to fill out the name value in here. So far, you see only the text values in here, but I'm going to show you how you can change into the different field types such as assets or even numbers or date pickers, et cetera. I showed you how you can discover from this very minimalistic, I would say like hello world version of the story block, but as a developer, you might want to take a look at the veteran overview, how it's going to be looked like in the data layout. And in this case, I'm going to show more details about like what else would be possible, such as like defining component, defining different types of the component in here. But for those of you who have wondered, like can I just see the overview in some easier way for developers, then I would recommend you to have a look at, first of all, go through this down arrow. And then there is draft.json. There is a publish.json as well, but I didn't publish this content. As you can see here in this gray out circle icon, it says draft. So in this case, it makes the most sense to take a look at this draft.json. And I would say that this is more of like the developer-friendly overview map of how you can see the data layout of what kind of components are stored. So for example, what we saw together in the first component called teaser, it's actually in here. So it's stored as an object inside and the parent is the body array. So all the components that we took a look at together, starting from teaser, feature, and gripped, all of them are stored as an array object. So this one object will consist the teaser component content. And in fact, there is the headline saying Hello World. And that's what exactly we saw together as a very, very first component in this starter space. So if I go to the, let's say like down here, there is the feature component, actually the name of the feature, and there is the name field, has the text value of the feature. So if you open up this Draft.JSON, and you can see every kind of relationship between all these components are related together, and you can see the relationship. Which one is apparent and which one are the nested one. So, here in this Draft.JSON, this would be actually kind of very useful source for you when you're going to work on to create a dynamic component. But, not to jump in over to the, let's say like hands-on, really fun part. First of all, let's understand together how you can create different kind of components as well as different field types. Because we only saw like how it's been displayed in the starter space and how it's been displayed in the Draft.JSON so far. So, if you want to also like see the relationship, you know, what is nested and what are like included, containing like a couple of the other, like children's inside this Search Locks feature also can show you a very quick overview as well. But, I would say this is more of like a feature for the content editors, if you want to recommend them for them to have more, you know, let's say like control, to see that. And this is the block library icon, where you can see like all possible defined components that we have so far in this space here. So we have teaser, there is grid and feature, right? But it turned out like it's more than three components. Here, there is the type column, I would say, describing what kind of type of the components they are. So besides from the components that we've never seen before yet, let's take a look at from teaser. So teaser, it's actually called nestable type of the component. And feature is also nestable, but grid, oh sorry, the grid is also nestable. Sorry about that. I'm going to explain you the other type of the component later on, but it seems like all three components that we saw together so far are all nestable. So starting from something very easy. What this nestable type of the content means is that, well, first of all, let me click this new block. This block is a storyblock terminology. It's equivalent to the component.

So means creating the new components. So if you click this, then you see all three types of the components. So in general, that's what we, or that's what storyblock offers you to create different types of the component. So the first option is the one we want to take a look at together. So this nestable block means components. Either one can go inside of the bigger template of the components. So remember what Fakundo presented you like earlier about atomic design. These are like all nested components, or for example, like atom molecule, all of these accept the templates or the page even. So that's what nestable block. So you can define the components such as hero, grid, or, I don't know, carousal, or anything that would be like included inside of some kind of the page template.

There is the different type of the content type called content type. In this case, this is the page component. So before I describe a little bit of more complex part, I'm going to show you what this page component contains inside. So instead of just, like name or headline, simple, like the short text value field types, you see this body blocks. So this body blocks are the special field type instead of just, you know, short text. What this blocks, you know, field type can do is that you can nest inside, you can nest, like, dynamic components inside, you know, like to be stored inside of this page component. So in short, this, I would say that this page component right now that you're seeing here is the template from the atomic design. So if you have hundreds of the pages that you want to nest, whatever kind of components would go inside, you can simply create this one page content type component, and then you can apply this page component to these hundreds of the pages. So all you need to do would be define this one page template and apply for the rest of the page content, and that's it. So you also maybe realize that that's something, like your customers or the content editors can do that on their end because they have access to this UI. And if they have higher permission, I'm not going into too deep, but you can give them the permissions as well, and they can also define and configure these components on their end. And you can focus on simply to transition it into the code and then render the components. So this is the special field type that you can nest as many as different kinds of the dynamic components inside to create the layout of this page template. And to define one, you can go to this, click, you can go to this new block and then choose this content type block and fill out the name of this component. Then it's going to be created. And there is the one component that I didn't define, but I want to explain. Sometimes maybe you might have, let's say, the case that you don't know which type of the component you want to define. Should I define it as nestable? Should I define this content type? But at this point I cannot tell and I don't know. In this case, you can define as universal block as this component type will allow you or everyone to define or use this component to be both, or act as both. So it can be nested inside of the other, components, but at the same time, it can also act as a page template. So that's the quick overview how you can define. And after you, let's say like created the new, let's say like nestable components in here. So right now I only have this, short, sorry, rich text field type but there is like kind of no explanation here. I showed you yet, how I was able to define this rich text field type. Here is the glue. So here is the, I would say like an input that you can give a name of the field type that you're going to create. And here is an icon where you can choose the type of the field types. So as I said before, we just do not have, you know, the short text field type. You can choose all the options that are available from here. So if I want to have the multiple options and then give the name like mountain point. Then I can hit add and it will add, you know, like in here. But of course, maybe sometimes you want to change the order. In this case, you or anyone who has the access and the control to get access to the space, they can easily do click, then drag and drop. And for multiple options, of course you won't do, you can probably like already direct into the sources where you want to get these options. In this case, you have more configuration available here. But I'm not going to too much details on that because in the hands-on part, we also will be able to discover all these as well. And I just showed you a very easy example from our Sort-of-to-Starter space in here. But here is one another example, if you create an example space. When you're going to create this space, by the way, it's also for free, you can take a look at this example and can play around, for example, to change the order of this Hero space, Video component and the Text section to change the order as well. Or even change the color of this Learn More button to be something different in style. Like that. Ghost, Lights, Country. Smoke, something like this. So the possibility would be, or let's say limit is the sky. So, or your imagination. So, this much, let's say combinations, you can create from, based on Atomic Design Methodology, but not to complicate things because we want you to understand fully the fundamental part. So for today's workshop, we have prepared the starter, or we are going to take, and we are going to together like build a simple Remix Storyblock blog application. So that was actually the intro to Storyblock, and if anyone has very quick question, I can take it, as I saw a couple of active chats going on.

Pacundo, do you have?

Yeah, we had a couple of questions that they already answered, or I think so. The first question was that feature component that you show, if it's configurable, what I say is that, yes, that you are able to create any data structure that you want to use for your project, depending on how you want to organize the content and to display it. I mean, during the workshop, you would see how to do that, how to create your own components, your own blogs, and use them in the front end of your application. The other question was if a short blog account is needed for this workshop. I mean, the account is needed to create the space, which is the content repository that we are going to use for our project where all the content and the structures that we are going to use, like is going to live, right. We could connect to a public one, give us a key and that's it. Yeah, I mean, the idea for you to create your own space is that you can then expand that space that you create during this workshop in the case that you want to create a more complex project, Serve.block has a free tier that you will be able to use and all the main features that we are going to use during this workshop are included on the free tier. So creating an account is free, creating a space is free, you won't get charged of that, and you will be able to again experiment with the different features that are offered by Serve.block and then you can, with the same account, you can create different spaces or content repositories for other projects in the case that you want to create them. Luca says, seems super cool but seems a bit different to the meaning of headless CMS. I was used to it. I would like to know more about that, Luca. Yeah, interesting.

Yeah. Maybe you can write us more details in the chat and we will be interested in to see your answers and can also answer further as well. I mean, one thing that you will see during the part of the workshop where we are going to work with the code is that you can use any technology or programming language to create your project. And this real-time preview that you have in the visual editor is generated using your front end. I mean, it's not just Storyblock the one generating the preview. It's the front end of your project connecting to this space that you are going to create or this content repository where all the content is living.

Does the Storyblock got roles for users types of fields? Yes and yes. Yes, I can show you but it's going to make sure it's going to like shorten up our workshop time. So if we have time left, remind us, please benedict us. Okay. Actually the field types we are going to see them during this workshop. Probably the roles of the users we can take a look later but yeah, you can set different roles to the users. You can create your own roles in the case that you want to create custom roles you can do that too. Yeah. How much Nested Relation it can support? As far as I know, I don't remember if we have a hard number there. It depends on how you want to... I mean, how complex you want to be your content structure, right? I mean, you can have... Yeah. I remember cases using six level of nesting on a page and I don't remember if there's any limit actually. Yeah. Yeah. Same answer from my side too.

Okay. Lucas says, okay. I played with a couple of headless CMSs. They commonly didn't go so in deep. Like they just define content types and fields inside. Here I also see some options like size, small or grid. Okay. Yeah. These kind of, let's say, the tabs that you can like, create and also store the relevant fields can be configured from the blog library that I showed you before too. I'm so happy. I'm sorry. I can't feel. Thank you. I'm not good as you know, like these kind of. Words. Okay. Yeah. You can configure that or not just you. Anyone who has access can configure that to render. Of course, from the front-end side would be your job. We are going to take a look at like with this simpler example together in the hands-on part. All right. So many questions. I'm really happy to see that. I'm sorry. Just to clarify these options or names that we are using in the example like size small or greed that are probably really tied to a particular presentation. Like actually an HTML greed or that you are creating with these or something like that. It's like the way that you are using to structure the content that you're going to have and the way that you prefer to use it to display that to present the content, right? I mean, you can create the entities without any particular visual representation and use them in different ways in the case that you want to. But what I mentioned, what we were talking before is that these component approach helps you to create these reusable components that you can provide to the content editors to actually use them to create the content.

Again, really glad to see many questions are coming up and I would like to really make sure to show a couple of let's say, like the features that we got more in-depth question in the end. So to do that, let's get into the hands-on part because a couple of questions that you asked us might be solved by seeing this hands-on part. So here will be the fun part. I hope you're ready to get into some code exercise. To do that, I'm going to move on to my Visual Studio Code. So, but you don't have to use the Visual Studio Code, it's just my preference. And the first step would be like, we are going to create the Remix app from a scratch. And also we are going to provide you the magic link that you can clone all the components that you will need for building together this Remix Storyblock application. And also we are going to configure a little bit of tiny steps and then we are going to create the connection between Storyblock and your Remix code. And then there will be some styles and then there will be more dynamic components. So to get started, first of all, you can run... Oop, sorry, there is a bit of rung stuff because I copied paste, you're gonna run npx create Remix app latest. So don't forget to put the app latest and let me know if the, let's say, code or the terminal and I command is very small for you, then I'm happy to, you know, scale up. So in this case, I'm okay to proceed. Yes. So I'm going to execute and it doesn't take too long and it will show me a couple of options to choose, such as, I would say, like, quite important one would be like the hosting options in the end. So in this workshop, we are not going to deploy into the, let's say like some hosting services, but if you intend to do, or if you want to do, make sure to choose the one you want to deploy. So after a couple of, more few seconds, maybe I'm using too many applications.

So after a couple of, more few seconds, maybe I'm using too many applications. Maybe I'm using too many now. So this is a question from Remixite, where would you like to create your app? I'm going to create in the very root. So I'm just going to just execute with this MyRemix app. And you can choose like, what type of the app do you want to create? So I'm going to go with the just the basic. But if you want to have preconfigured stack ready for production for different purpose of uses, because for this workshop, it might throw you some errors that you didn't expect. So for this workshop, I will stick with the just the basics. And here, we are going to choose Remix app server. But again, like I said, if you want to host into Netify, or apply.io, Vercel or CloudFlare, there are much, much options in here. But it's quite important that you configure in here. But in this case, we don't intend to do it. So I'm going to choose a Remix app server. And I'm going to go with the JavaScript because our GitHub repo follow with the JavaScript, I believe. And do you want me to run npm install? Yes, please, because I don't want to type it out by myself. So just hit Yes. And it's going to install couple of necessary packages that we need. So after that, then we can move on to this very brand new Remix project. Somehow today is taking a bit while, but usually it doesn't. I hope everyone doesn't have some issues if you're following the steps with me one by one.

Oh, and in the meanwhile, before we check that app is working, I am going to show you the magic link that you can clone all the necessary components in your Storyblock space. You can actually find it in our Notion note, but to be sure, I'm going to already show or share with you like in both Discord and Zoom. So, because I want to be efficient for not just, waiting with the awkward pose. And here, so you all already have, the record could not be found, oh yeah, right. Okay, okay, you got the, okay, you got to, this record could not be found. Could you tell me like which version of the node and NPM you have. Sorry, the error, you're receiving it when with the story block link, right? Ah, there we go. Ah, story block link. Okay, sorry about that. Because yeah, I'm not sure if, oh, sorry, if you remove the the path under slash Bloody Mary, it worked for you? Okay. Oh, cool. Then let me share the other link because okay, thank you. Only. Or if you- Maybe when I copy from Notion, it included something unnecessary, characters, not sure. Thank you. Sorry, I- Can you try this link? Let's see. Is it working? I'm not sure. I'm also going to share in the Discord. Get list of my spaces. Don't think so. Okay, seems not working. That is not cool. Could you share the link that you- that worked for you, Vladimir? Because- Yeah. Yeah. Because the other idea would be if- I mean, as we are going to create- the amount of components that we are going to create is not that much, probably creating them from scratch. He also- Yeah. Also sees the workspace. Okay, no error. Yeah. Chris could be right. Yeah. Maybe we need to add them to the collaborator or getting the access, that's why. Okay, don't worry about it. I just wanted to go for a shortcut. But no worries. We can create the components together in the Storyblock site. Sorry that you need to do that, but it's not a big deal. So.

I think, while we were talking about if the Magic Link works or not, I think the Remix already has finished to create or prepare us a very nice, I would say, starter. So let's check out the app in there, I think I named as my Remix app, right? So. Make sure, like, wherever you created, then on your point to Remix app, and then, yep. I just move them to the place. So, okay, let's open it up in the visual editor first. You should already see, like, couple of directories and the necessary, like, config file including the package dot jason. I think it shouldn't have any issues. Let's check it out, the application is working. So, open it up the package dot jason, it already installed us the necessary dependencies we need. So, let's run the npm run dev, npm run dev. Then now it's gonna build the localhost 3000. So we can take a look at it together. I am going to close this one right here. Share in here. To see if the app is working. Yes, it works. If you see, welcome to Remix with couple of links together. Then it means it's working, so awesome. And next up will be like the content structures. So I'm going to move on to first of all, the workshop. Space. And we'll show you first which components you need to create. Remix workshop, this one. So in here at the block library, this is actually exactly the same page I would say that you can see all overview of the necessary components that we saw together in the other section that I was explaining. So we have couple of components that you need to define and I'm going to show you one by one. So starting from the top, first you can create the technical name of all underscore articles to be nestable in this case and it just simple short text field type. So you can select this text value and keep a name as title starting from the small capital. And then next up there is a content type careful with this type of the component. This content type means a page template is created for each block article post because we don't want to have the same, page layout following from the homepage or about or contact page. Instead we want to have a specialized page template for the each blog posts. So for that you can give a name of this component to be starting from the small capital article. And then there will be like the short text of the title starting from the small capital.

And there is again short text field type but this time the name of this field type should be subtitle, all small characters. And then here is the rich text, you can choose from here again, right here. And this name should be content. And there is an image. So to define this image, I said, is a bit, I would say like different from the other field types. So I'm going to show you. So here, instead of choosing rich text or short text, here is the asset. And if you click asset, oh, sorry. If you click asset, then the icon would change. So I am going to name as different names, sorry, test asset. But make sure in your case, you should name as image. So if I edit and then after you adding it, make sure to select this newly created field type of asset. And then in here, if you scroll down, there is the file types. So here you need to select images and then hit save and back to fields. I'm not going to save in this case because I don't want to add it. So that will be all for the article content type. Feature is also easy. This is basically just the name, short text field type. So you can just go with this default. Let's say field type in there given a, as name starting from this small capital. Then this feature component should be also defined as nestable components. So going to the grid, this is also nestable. So if you click first of all, this new block, that's actually the first step. You need to follow one by one for creating all these components. Here, you have a special field type called blocks. So this grid component will be the parent of whatever, let's say a children component will go inside. So that's why we define as blocks. This special type of the field type you can find from here on the most top left. So give a name of this blocks field type to be columns, all starting from the small characters. And moving on to another nestable component called hero section. So all small characters and then underscore here, hero underscore section. So this is also relatively easy component to define. So there will be like, first of all, a title short text field type, subtitle short text field type, you can give names starting from all small characters. And then lastly, there is again, another asset, which you should specify to be an image in the same way I showed you before. So the name should be image starting from small character and then that would be the hero section component. So here is another content type to apply for the very roots such as my Home or like about kind of pages. Then we want to lay out all nestable components to go inside to create the layout of this page template more dynamic way. So that's why you define this field type as blocks, but give a name as starting from body. These are let's say field type names and the component names would be like case sensitive. So please be careful for giving the correct name. And here you can change it later too, but it's easier to make sure to do that in the beginning. And that's what I actually wanted to avoid to make you do these process by providing you the magic link, but it didn't work. Sorry about that. So we're almost there. So this is the last component that we want to define as a nestable component. And the name of this component should be teaser starting from, again, small character, and it only has one short text field type, which has a name as headline. So make sure this is also should be the small characters and that would be all. So I hope you already have like all these components ready in your story box space. Then after that, we are going to configure like a little bit of the things to start to be able to see the preview of what we are building together from the Remake side. And to do that, let me move on to the other story box space because this is already completed story box space and I don't want you to see like some cheating part. So I am going to create a very new space. So I'm going to login and then here, you also can catch it up while I'm creating the new space in here for all the processes that maybe if I went to too fast, so I can choose this new space. And by the way, if you choose this example space, that would be like this space demo that I showed you earlier. So here, I'm going to keep my remakes app. I would leave the server location to be EU, but if you're located in somewhere like closer to the US, you can choose the US. So I would create a space, and in here, I have random spacing here. I also need to create the look in here. Sorry about that. In my case, this magic link works, so let me quickly do that so that you don't have to see me doing the same process that you had to do. So I would ignore it here. Now I have all the necessary components ready. Yes, I have. So I hope you were able to catch up all the steps that I was showing, including like defining all these necessary components. And then, what I was telling you to do a little bit of configuration would be, first of all, go to the content from the left hand side of the sidebar, and then here is the home, let's say like the default story that you have from the starter. Then you can click this home entry and then in this case, in top menu in here, there is the entry configuration icon. So make sure to click here, and then in here, if you scroll down, there is a real path that you can modify to eliminate, let's say like the after the something.com forslash. You don't want to have like home, means like the name of this space to be added. So that's why I want to eliminate it and to do that, I can add a single forslash into the real path over there. But obviously I haven't configured like any useful, let's say preview URL to be displayed in this visual editor. That's why I don't see anything in a here, but to first of all configure that, I want to add the useful, like something local host or the preview of what you deploy in here.

So I'm going to click this change URL. So it will prompt me to this model that I can add or change the new preview URLs. So I'm going to click this green button and in a here, it will direct me to the settings, which is outside of the content where we actually took a look at the homepage, a home story in here. So in here at the visual editor, if you're in somewhere else, make sure to go into the visual editor from the settings. And then in a here, this is the current location that I was seeing. And that's why it returned me like something that I didn't expect to see that. So to prevent that, I'm going to copy and paste what I have this local host 3000 coming from our remix app. And I'm going to store in the location over there. Make sure to add the forward slash in the end so that you can prevent to have like something invalid. Let's say path while you're working on this workshop. So I'm going to hit the save button. I'm going to show you a couple of more configuration and we will be eventually coming back in here to add a little bit more, like another preview URL but it would make more sense if I show you a little bit of pre-configuration. So let's go back to the content and the whole story.

Oh yeah. Sorry Arisa, yeah sorry, can you go to the blog library, just two minutes again. Yeah, sure, sure. To show quickly again how to create the components. I think that we have some people that while they were creating the new space, Okay, okay, okay. They needed to see you how to create a new component like the articles, the old articles because the teaser, the page, the grid and the feature those four blogs come by default with any new space that you create that story blog. But the hero section, the article and the old articles are blogs that Arisa created or we created for this project. Probably you can give you a little bit how to create them. Of course, of course, sorry about that. It's really a good catch. Thanks for letting me know. No, no, sure, sure. Yeah, sometimes it's hard to let's say like, know like where people are like following. So it's really good. So I'm gonna start from the top all articles. So this is what you can start to give a name of this component. When you click this new block and that's what you can give a name all underscore articles. And then in here you can create a default short text field type. I don't give a name of title. So you can create like this. In this case, it's already taken so I cannot define but one is fine. So that's how it should be. Thanks for the screenshots. Low configuration, if anyone missed it. Thank you. Thank you so much. And I hope all articles are good. If not, stop me again and I'm happy to show you. And moving on to article which should be sorry, content type. So if you're clicking this new block and choosing between like one of these three options you should choose content type block and you should keep a name as article right here. And then click add block. And then it will prompt you to the screen that I was showing in here. And of course, if you newly create there's no field types are defined. So what you can do is that create the short text field type of the title by default, it is the short text. So you can give a name as title. Again, it will warn me because it already has. And next up, you can create another short text field type called subtitle. So you don't have to change this second instead you can give a name as subtitle. And click add, make sure to click add then it will save the field types for you to be displayed in here. And next up, you're going to create the rich text field type that you will need to change this icon by clicking this green icon to be rich text. So in here, you can change the icon and then after that, content give a name of content and click add. Then after that, going to the image again, you can change the type of the field type from this icon over here and choose the asset. And then after giving a name, asset and image and clicking add, I'm going to show you the same screen after you did that. Then you will need to choose the type of the file types in down below, when you scroll down, then by default, it should be any file type but we want to specify to be images. So that's what you're going to choose, the checkbox and hit the save and back to fields. Then it will save all the components necessary. So this was the article component. I hope this was clear. If not, stop me again, and I'm happy to show you again. So feature is something created by default but just to be sure what kind of name you should give you should give a name as starting from small characters, and says name. And grid should be nestable. This should be blocks, and the name in here could be a little bit different from by default, and it should be column. So what you can do is that by default, it's already blocks, I guess, but columns. That's what you need to change the name. And hit the add, and if you just simply want to change the name from the existing, click here, and then in the configuration, sorry, fields, should be, wait, I thought it's from the configuration. Maybe it's faster that you delete the existing one if it has the different name, then columns, and create the new blocks here. So that's the grid, and here a section. That's something you need to create from scratch. So it should be nestable, and then the name of this component should be hero, underscore, section. And here you see like three field types. The one with the title, short text, field type. Again, you can define from here short text and give a name as title, and hit the add. Here is the subtitle. You make sure that the field type is short text, and subtitle, hit the add. And then lastly, it should be an image. And make sure to change this field type into asset and give a name as image, hit the add. And then don't forget to change or specify this hero sections image field type to be images from any file type. And hit the save and back to fields. All right. And Page is also...

Page could be like already defined from the default, but we want to make sure together if we have the right, let's say, field type. So the name of this special field type called blocks. First of all, you make sure to choose this blocks and then give a name as body. And hit the add and that's it for the page. That's a content type component. And then teaser is nestable and it only has the headline. And I guess from what we saw the starter, it has already the same configuration.

All right, if anyone still needs time, let us know. Fakundo can stop me. If I'm not being aware of what's going on in the text chat over there, we are happy to take a look at it together. So I hope we all have configured the components over here. So what we were doing is yes, taking a look at the preview URL that we have added in the settings. So let's go to the content. And in the content, I think you should have by default this home space. So clicking this home space. And now, instead of seeing, let's say like the previous screen, now you see HTTP is not allowed. I purposely I show this screen because you have important commands being displayed in here. So I would say like we have method one and two but choosing method one would be the easiest. I would say that if it's really first time to work on my Storyblock project, you need to run these brew commands on brew-related commands. Make sure the brew is up-to-date and you configure or execute these commands. It might take a little bit while, so let me know or let Facundo know if you need a little bit of time, then we can wait for you. And after that, you can execute this NPM, and install global local SSL proxy. And then after that, you can execute exactly the same as this command. You can actually copy and paste because the target of the local host has been already targeted to the 3000, which is actually where remix by default start the local host, so you can just copy and paste. And while we are waiting for the people who need to execute and wait for a little bit of what's going to be returned, a little bit of information for you. So you might wonder like, okay, then next time, let's say like on the next day, if I need to go back to this Store block remix application project, then how should I, you know like run or execute or start to develop my project to see the visual editor in here. To do that, you do not need to re-run all these Perl commands, instead you can just run over here. Sorry Ariza. Yeah, we have a couple of comments I was going to didn't want to interrupt you. So what's the command on window and if it will run on Linux. If you go to the Notion page that we share at the bottom of the page, we have two links with tutorials that we have on the store block page that you can follow to install depending if you have Windows or Mac depending on the operation system that you are using. Bye Luca, see you later. Thanks for joining. Depending on the OS that you are using you have those links that you can follow to make it easier. And sorry, Brittany came back and asked, this is one thing I've been confused about in this build project. Does the bit cert package overwrite this in BitProject? That's a very good question. I think that, I mean it depends on where you like install these certificates because you can insert, you can install that in a global location on your computer and run it like without having, without need it, without sorry, specifying a particular project where you are running it. So it's a dev dependency in that project. I think that this shouldn't override. I mean, if you are running the bit certificate and the HTTPS proxy I think that this should work with bit in your case. I think that you can run one or the other but that's something that we will need to test. Yeah, yeah, definitely, yeah. And also we have spelt experts in our dev road team, not today, but we are happy to connect with them as well. All right, so are there any questions coming up? I think this score is clear. Oh, you already know, Scott and Josephine. Awesome, yeah, they're the one. Okay, now I have Gonzalo saying, when scaffolding the Remix Project, you choose JavaScript. Do you have support for Typescript? Yes, actually, there is one SDK that I'm going to install together with you in a few more steps. And this SDK, which is called Storyblock React, sorry, not Remix, Storyblock React, supports the TypeScript. And Kevin, have you tried the one that is in the document on Linux? Because probably, I mean, it should be pretty similar. Sorry, give me, yeah, it will take some time to install. Yeah, and especially if you have some updates in GRU itself, it might take a little bit longer. That's why I'm a bit taking time in here to wait the others. Oh, you don't have, you might want to install the home GRU. You can actually like home GRU, search here, and here, and they have all the necessary commands for installing. Make sure, you can install them, Linux. This is only for Windows, right? What I'm seeing is that the MK cert package, you can install that on Linux. You will need to get the analog for home GRU for your Linux distribution and install it probably. There's a workaround for the ones that don't want to install the HTTPS certificate or if you want to go ahead now and then continue working. But what we are using, there you go. I mean, we are in this version of Sturblock, the Sturblock v2 is the new version of the user interface, and we are trying to force the developers to use HTTPS certificates because it's more safe for you. We're trying to go to a security connection. Well, method 2 is easier in the case that you don't want to install something. Yeah. It could be. You can create the static HTML page to contain these source code. Then in case, let's say the method 1 doesn't work for you, then you can take the method 2. I guess, as long as you have added this local host 3000 from the setting, then you should see it's exactly the same page so you can just copy and paste over here. Warning, okay. Certito is not available.

So to see it can't be installed in Firefox. Okay, because you try to open Storyblock and have a look in Google Chrome or Brave. But I would say Chrome would be easier if you use app blocker. Yeah, we actually recommend officially at Storyblock to check first into Google Chrome. And if it behaves still the same, then we can. We can have a look deeper. You already use Chrome, okay. Yeah. Freddy, do you have like, if you check the method, too, do you have this static html file in the root? Yes, I have the static URL. Okay, okay. Try the try installing the NSS. Okay. Or it's another hack, but it's not an ideal, but to let's say they cover all the content for this workshop, only for those of you who does not let's say see the ideal, let's say result in here, you can quickly go back to the V1, which means the UI will be different, but you do not need to let's say worry about the SSL certificate. It means you can actually have a look at the preview without configuring that. It's just for more security with this current UI asks you to do that. But if you have this issue, if you click back to V1, it's not an ideal, again, because you're gonna have an old UI, but you do not need to configure such stuff. And instead you should be able to see this welcome to Remix already in here. So it's another hack in this case to make sure that we can, let's say, cover all the content in the workshop. But I would say like, if you have like upcoming questions after this workshop, we're happy to work together. Sounds good, Freddy? Yeah, I tried the version wrong and now I have- Everything up and running. Okay, good, good. Okay, sorry about that. Okay, so after that you gonna run this command right here and then it should be able to show you the preview, but before doing that I am actually going to open up terminal because I don't want to mess up or make it look chaos on my VSCode, so I'm going to run it. So you should see like this over here and make sure to copy this localhost 3010 in this case because the reason why is that I want you to add as a new preview URL. So on purposely, I wanted to show you this screen so that you can copy all this method one and two. But if you already have configured that you can just swap this location to be 3010 or if you want to keep these previous screen that is coming from, let's say like non SSL certified path you can keep and instead you can just add the preview URL in here too. So in this case, I'm just going to overwrite and hit the safe and going back to the content and going to the home story and if I switch, actually it's already switched but if you kept like two URLs you can easily switch from here, change URL and now you should see this welcome to Remix. I hope so far everyone is following. Let me quickly check the chat. Oh, okay. Yes, yes, yes. I'm happy to show you. The method two, actually, I'm going to keep that in here so that that would be easier and safe. One sec, I'm going to show you the, oh yeah, I added the HTTPS, that's why. So method two, you're redirected, ah, look up, yes, it's because here at the entry configuration, I didn't mention it clearly because we went into answering some other questions. So if you click this entry configuration and when you scroll down to the bottom, there is the real path. And by default, it's a blank. And that's what you are seeing, you know, the home directory would be on display like this and it will not render you the preview that you want to see. And to prevent that, go into the entry configuration, go to the real path in the most down part of the screen and add the one single forward slash and it will fix the path to remove this unnecessary route, I would say like the path name for the slide. When you hit the safe and close, then now this unnecessary homes line should be removed. Yes. So Storyblock actually shows the actual dev server we are running. Yes, exactly. And this is pretty cool and makes development much easier and faster. Yes, works. Awesome. So, I hope it was clear. Sorry, I didn't copy and paste the method too. It would be easier. I'm gonna do that in here. All right. So, now we have configured the preview URL, so I'm going to switch back to 3010 and that's what we should be looking at right now. So, we have configured the real path to remove the unnecessary homes line. And next step, we are going to install a package called Storyblock React. If you want to have a look at more, you're gonna find a link from the Notion note, but I'm going to quickly show you, oh, I already opened that, where you can find. So, the version should be 1.3.1. If you install now, you should have that already, but if you already have something old one or working on like some I don't know, current project that you were working on, make sure the version should be following 1.3.3. So, that's what we are going to install. And I'm going to go back to my VSCode. I'm going to terminate a bit, and I'm going to run NPM install. Make sure to include at story block or slash react. So, that's what you should be, you know, like doing it. I'm going to paste so that you can just copy and paste and run it. You can just install into the dependencies. It doesn't have to be Dev dependencies. That's the only thing you need to be careful. Britney, that was in the route also, right? Yes, yes. I added Kevin. I added editor.html. So, the file to public folder, but I cannot see my Dev environment in the store block.

Okay, for a very quick work around, in order to be able to cover all the content in the workshop, it's not an ideal, again. But if you go back to the previous screen, me getting out from the visual editor, there is a sneaky, I would say, escape hatch, back to v1.ui. So, from the current UI, it asks you to have a secure way to preview the content, but using SSL certificate, but if you switch back to the v1, it won't ask you to do that. So, you do not actually have to configure everything what I was showing in the screen. And it should show you, even without these static HTML file. So, again, it's not an ideal, but to be quicker and to have a result that you want to have, that would be a quick escape hatch, I would say. So, let me know if you still cannot see the preview cabin in the text. Then Facundo and I, we are going to double-check what you're going to write in here.

Okay. So I hope everyone install Storyblock react SDK. And by the way, as you may have realized from this SDK name, you can also use exactly the same SDK to, let's say, like your React project with the combination of the Storyblock. So that's why I just wanted to quickly mention about why this SDK's name stands with the React. So after that, we are going to initialize the Storyblock integration in to the root.jsx file. So you should go to the app directory. And here, and there is the root.jsx file. So, in here, in here, oh sorry, this menu is overwriting. We are going to call a special API that is actually coming from what we installed the Storyblock React SDK. And I am going to copy and paste. And by the way, for your information to prevent having some typos or getting lost where I'm talking about, if you go to the notion page, I'm going to actually show that. We are at almost here. We are at here. So all these kind of, let's say like links, which looks like standing for the components. If you click there, you can actually directly jump into this workshop repo where you can just copy and paste the source code what I'm talking about. I hope I have added for a couple of. Here, sorry for this route. I didn't, but you can easily go to this workshop repo, go to the app, go to the route JSX and you have all the info what you need. This is actually completed version of it. So if you get some kind of error, make sure that you come here, copy and paste then check it out if it works or not. So, okay. That was a bit of a note for you and if you open up this route.JSX file, by default, we didn't import, let's say this special API that I'm going to call in here. Let me just move this view over here to the right. So, one second, I am actually going to import these three special APIs that are coming from Storyblock React. So, by doing so, what I'm going to do is that, oh, wait, sorry. I need to actually initialize it. One second, I want to make sure a couple of things. Okay, I am importing the wrong API. Sorry about that. It should be this. Sorry, two APIs. This is what I was looking for, a story block in it and API plugin. And what I'm going to show you is, initializing to tell story block that, Hey, I want to use the story block API to fetch the data. So what I'm going to do is that after importing these two APIs below, I'm going to paste here. Don't worry that I already have the preview API key token by default in your case, you might not have. In this case, I took the API key token from the story block UI. So I'm going to tell you where you can get this value because that's the most important value that you can create a connection to the interactive between your story block and the remix. So going back to this story block UI. I hope it's this one. Going back to or getting out from the visual editor. And then if you go to the settings on the left hand side of the sidebar, there is the access tokens. So if you got to the access tokens, you see one, two, three tokens over there. And by default, you should have this preview access level token available. So that's what I want you to copy and paste into the source code. So there is a copy icon that you can copy the value. Going back to the VS code and swap the value. If you have copied and pasted from the GitHub repo that we shared with you, swap the value in here. I'm not actually going to do that. And then here is the API plugin that we are telling the storyblock that we really want to use like the APIs that are coming from storyblock to start to fetch the data over there. And this components value is something that we are going to define later on. So right now we don't know what kind of components we want to import because we haven't yet created any dynamic components at the source code level. So we are going to cover that later on. And then the first step to create the connection between storyblock and remix is technically done. But it might throw you an error because we haven't yet created any dynamic components that should be defined into some, like components directory that we need to create newly. So we don't want to see the preview at this point, but before doing that, we are going to install a couple of styles configuration. So we are going to use the Tailwind CSS. And there is the link for, let's say, all the info for remix. So if you go to this link right here, then you should see all the necessary configuration precisely for remix. So you can ignore the first step because we already did that, but instead we can, first of all, go to the second, I would say, the command line, and then make sure to execute these commands. So I'm going to do that. So make sure to copy, and then I run into here, and then there is the init command. So it should create a new file called Tailwind configuration, I guess, tailwindconfig.js file.

So it might take a little bit while, but I think you also might need a few seconds to complete installing it. Let me know so far if you have any issues with the Q&A come true, then Fukunoshima and I we are happy to take to answer.

Okay, I don't see some of the upcoming comments in the chats. Okay. So we have installed actually a couple of packages in here. Actually, it doesn't show, but we installed Tailwind CSS, first of all. And then like Post CSS, there is like a, not the ES configuration, Auto prefixer, things like that. We already initialized the configuration file and we are going back to this Tailwind remakes configuration page. In this Tailwind config.js file that you should have now after the init command, you can copy this to the clipboard and then open up this Tailwind configuration file and then paste it like this. So you can save it already. And then after that let's check it up, what else we need to configure? Yes, at the package.json, we are going to modify a bit of npm scripts so that we do not need to, you know, like open up several, let's say terminals to execute these commands. So we are going to copy that. I am actually going to copy here and then opening up this package.json right here. Let me double check if I'm doing correct with my cheat sheet that you did not see. I think we're doing fine. Yes, so make sure to save it. And then after that, there are a few more steps we need to follow from this Tailwind and Remix Configuration page. So we should add this app.css file in the directory of the, let's say you create a new folder of the styles and app.css and I'm going to show you where you should do that. But to save time, I am actually going to copy from my cheat sheet and then paste it. So you should, or you can create in the mos root here, the styles directory, and then inside in here, you can create this new style file called app.css and you can copy and paste the content from this page over here and then paste it. And then after that, going back to the road.jsx file, where we initialized to tell Storyblock that we want to use the Storyblock API. We are going to import this style. First of all, let's go back to the route.jsx file. I am going to import in here. And then after that, we need to export, let's say, like what we imported means this style sheet. So I'm also going to have a look at cheat sheet for not making the mistakes. So I am actually going to paste in under the story block in it. So let's make sure if everything is fine. I think the rest we just need to build a process and see if it's up like. So the configuration for the Tailwind CSS has been completed. If you see any errors or things like that, you can always come back to this Tailwind remix configuration page and make sure that you don't have any typos or define in the different, let's say, levels of the directory. So I see couple of comments. Okay. Kevin, you cannot see your project in the story block. And Zika also. Okay, let me read first what's going on in the chat. Oh, sorry to hear that, Chris, for the incident. Oh, okay, okay. You were talking about configuring the real path. So let me go back to the visual editor. So, here is, yeah, what we are showing before. So, go into the entry configuration from the content and select the home story. And then in here, you see the entry configuration. Going down, there is the real path. By default, it's an empty, but instead if you fix this lag to force to be just single, forward slash, instead of having the home, hit the save button, then it should remove the unnecessary home's lag from here. I hope that will help for returning you the page or the preview you need to see. Okay, if you still have, let's say, some issue to preview the project, let us know through the chat. Facundo or I would, yeah, have a look at it. I hope everyone is following. So far, we have configured the links between link between your Remix app application and the Storyblock visual editor. And we initialize the Storyblock API to start to be able to fetch the data. And we implemented the configuration of the Tailwind CSS. Okay, so next up, we are going to create the components. So, what I would suggest you would be like, open up in, I don't know, somewhere on the browser that you can see. So, go into this Create React Components part. You can see that I have linked to dedicated GitHub repo. So if you click the page component, which I am going to create with you together in a few seconds, then you can see what you actually need to write the code. But of course, if we write the code from scratch, it will make us, sometimes make the typos or miss something. So to prevent that, important thing is we follow together. So make sure to copy the paste into the source code. So, what I'm going to do is that going back to the visual editor, and on my end, I am going to... Wait, let me copy first. But under the directory of the app, I am going to create a new folder called... onFullNames, onFullNames in this case. Make sure it's a plural. And then in here, you can create the new file that has the name of page.js. So I'm going to paste it, actually, to save our time. And as I showed you before, you can copy and a paste from where you can find all the links to the dedicated GitHub repos in each source code. So this is what you can paste over here. And in here, we are going to create another component file called teaser.

So what you can do is that go to the Notion page, click this teaser, and then... I'm going to delete that. And then copy the component that you can see in here, create the file teaser in Android directory of the components, and then paste it. I am actually going to copy from my cheat sheet and paste. So that's what you can do. And we have a few more components that we want to create, which is going to be the next one, is a grid. So going back to the notion, table of contents, click this grid and then copy the code, going to the VS code, Android directory of the components. You can create a new file called grid. In this case, I'm going to copy and paste. So you can paste the code in this grid components file.

Lastly for this step, going back again to the notion, go into the features link. So you can jump into this feature components file. Make sure to copy the source code from here. After that, you can go back to the VS code and under the same directory says components. You can create a new file, which has the name as feature. So in this case, I'm going to copy and paste the shortcut, the time, and you can paste the code that you copied from the GitHub repo in here. So I know it was quite quick, but at this point we have four dynamic component files that are existing in our Remix application. But we need to somehow, you know, call or import at least. And to do that, I have left an explanation in here going back to the root.jsx file. I'm going to close this, because that's not necessary. To the root.jsx file, that I haven't yet mentioned anything at all about the component. So this is the clue where we are going to modify about that. And to do that, instead of, you know, like filling out few lines of the code inside of the store block init API, we are going to create a, I would say, a constant variable that stores an object and the name of these components. But you don't see still like some of like, correct, I would say like code snippet highlights because I haven't yet imported all these dynamic components file. So to do that, you can open up actually the root.js. j.s.x file from the GitHub repo, and you can copy and paste. I would say like here to here. Yeah, here to here. I guess this is a completed version of the GitHub repo. So you have already some other components, but so far you can copy these four lines from line 13 to 16, and you can copy. I am going to copy and then paste it into above. So I have a few components that I still haven't yet created, so I'm going to erase for a moment. So that's what I'm going to import it. And then I'm going to save this file, and I hope everyone is following so far. Let me know if something is not clear. Let me check this chat in here. thanks in notions for components is not active, which link is not working. OK, page, grid, et cetera. Hmm, that is weird. Hmm, the point is, you can go to this GitHub repo. And then you can jump into the components directory over here. And we have so far created a feature, grid, page, and teaser. You can jump in to copy and paste the source code. Yeah, for some of them it works, some of them it doesn't. I'm not sure what's the issue in here, but I don't think you have the issue to get access to this GitHub repo. But if you do, let us know. OK, so if anyone still needs time, let us know. But instead, if not, then I can move on to the next step. And then after a few more steps, then we are going to have a quick five to ten minutes, I would say, break, because we are pushing, we are behind the time schedule. So now we have edited the root.jsx file. And next up, we are going to go to the app directories routes. Open up here. And there is index.jsx file. You should have that by default. And in here, what I'm going to do is that, you can go to here at the routes from the GitHub repo URL. And there is index.jsx file. Don't worry about there's another file already existing in here. We're going to create that in a minute or so. So swap the co-existing code into this one line of the code. So what I'm going to do is, what exactly I said. So it's going to be just this one line of the code. And more configuration would come for the other file that you saw in the same directory in here. So at this point, I would say if we take a look at the homepage in here, let's have a look on the preview in the visual editor. So I'm going to run npm run dev. Then we should be able to see the preview from the story block. So let's go back to our story block project. It's reloading somehow. You don't have to reload, actually, you just need to click this reload if you're working with a local host, so then it should trigger the reload for you. Yeah, it renders me Welcome to Remix. Actually it should show me the components that are defined.

One second, I might have configured something wrong in this case. Yeah, we should have the Tail Wind as well. We should have the Dynamic Component. It should be rendered, But somehow it doesn't detect. Access Token should be correct. Yes that's the same. Component server being loaded. Yes, of course, I haven't yet created this single dollar sign file? That's what it could cost, and I see a couple of questions. OK, yes yes yes, if you use the ad blocker, the preview I would say Visual Editor might not work, so make sure to put the shield down for the store block. And you're getting the error, and components is not defined at root of JSX. Yes, I'm thinking that it's probably that we configure the index.jsx file like this to direct into this file that we haven't yet created, so that's what we're going to follow. So we're going to go to. Actually, this step, so. We had a break here so we're going to go to this create. Up, roads, single dollar sign, jsx file which uses this flat routes. And if you want to take a look at this, black sprouts remix has really nice full documentation so I highly recommend you to take a look at it. And the reason why we use is that we want our let's say like whoever users are going to maintain the content from the story box UI to be able to create nested you know rare layouts or non nested routes whichever kind of you know route layout on their end. So we need to just invest our time once to implement the feature and the rest would be like in the content editors hands so you can go to this link and you can copy. And paste all of it actually because we might need to speed up a bit and also want to prevent failing for some unexpected error. So let's copy all. And then we're going to create this single dollars signed up JSX file in the directory which you already have. It's called routes, so I am going to grab my cheat sheet. We're not failing it and I am going to paste it. Into the route, you can create a new file in my case I'm going to paste so there are a couple of APIs that are again coming from our stored block react SDK and the important part is that first of all we want to we want to load the data from the story box side and fish the data and there is a custom hook that we have already implemented and providing from the react SDK site so that you do not need to do the extra heavy lifting on your end. And this is what you pass. Saving. It's ready. So sorry, do you have any questions? OK, if you have let me know OK where I was yes here so. This story variable would hold the custom hook value that you are dealing with the events such as like input or published and published in behind the scenes so it will load it. I would say JS bridge that is the toolkit that we provide from another SDK but you don't have to deal with it because that's what this store block react SDK is handling about it, and all you need to do is that pass the props or pass the props into the block prop over here. And the reason why I already know this, the rest of the data path to continue after the story should be the content. It's because we saw together in the beginning one of the Jason files right? And that's where you can see all the data path that should follow starting from actually story, and then there is the content, and then there will be like all the dynamic component with the data path that you can see over there. So that's why I said in the beginning this Jason file, especially draft Jason file would be like your best friend while you're working on that because he can see all the path in there. Alright, so what we're handling in here? I'm sure if I kind of will explain a little bit more details when we are going to handle an implement like dynamic splat, not the dynamic. Sorry I mean it is dynamic but this blood routes feature in there and I'm the only one who cannot hear you anymore. Oh. Let me check if my microphone is not muted. It's not muted. Can everyone hear me? I can hear. I can hear both of you. OK, OK ready do you mind like rejoin? I'm not sure if that helps or not but. I'm not sure. Yeah. Or maybe like your device for like catching the sound is not detected. Yeah. OK, if I'm going to quickly write to Freddie that maybe check the device that she is connected for listening to sound. OK. Actio's error yes yes yes. Yes, we received some Actio's error reports. Can you tell us which version of Actio's are you installing? Because I I think there's an issue with. One of the latest versions of Actio's that we need to double check. Yeah, let's check. Yeah and what Britney says is correct. I mean we're working on removing the access dependency pretty soon. I would say in the couple in the next couple of weeks you won't need to install Axios anymore because we are improving our client. Yes, give me one second that they can confirm with you what's the latest version of Axios that you. If you can't install the 1.1 1.1 point two, that should work so that the issues happening with the latest version. OK, thanks for the heads up Huckündo. If any one of you have like even further issues or errors from the AXIOS, let us know. On point 1.2 works. Yeah, let us know after you change the version of the AXIOS. If it doesn't work, you can let us know so. Yeah, alright, so where was I? Yes, we created this single dollar sign splat routes specific file in under the directory of the routes. And what we are going to do. Is that we're going to create couple of more react components because we're going to create a blog application so that we want to organize couple of layout. The global components, such as the navigation for the header and the hooter. So first I'm going to already create the code for that and then later on we are going to see the preview. So then after that, I'm going to hand over to Facundo. Alright, so going to the layout.

Alright, so going to the layout. And you can copy this code. And then create this layout component file in Android directory of components. Right here. My case. I'm going to paste here, but you can create a new file. Going to paste here so you can paste the file over here.

Next up we're going to create by going to the notion page and then we're going to create a navigation. So I'm going to open up. The navigation, it's a bit long, but you can copy and paste all. There is no point that you need to hard code everything in here in this workshop. So just copy this navigation. Going back to the VS code in my case again. Again, I'm going to copy in your case. You can create a new file in under the directory of the components, so I'm going to paste here. So you all should have the necessary code for the navigation next up. Going back to the. Notion and there should be a footer. So I'm going to open up this link of the footer. Copy the code. Again, this is also something you do not need to spend your time to hard code, so just simply copy that in my case. I am going to copy. And paste in under the directory of the components. You can create a new footer file. So that you have the necessary file for the hooter. So going back again to the Notion page. We can include the layout in the dynamic route which you also have. Again, another link, so clicking in here. Will lead you to a specific one line of the code that I want you to pay attention. So here is the place at the splat route file single dollar Sign.j6 file. This is where we want to import and here is the place where we want to call the layout component. So based on that you can copy one line in here. Or you already have actually from what you already have copy and pasted. Before so it should be displaying in here. And I guess you have to layout already. If you have copied and paste from the GitHub report so. Lastly, we're going to create a new component, but it's called hero section as you can see from the notion page. We have already created this new component in the start. So we're going to do is creating the new hero section component file. Again, you have the link in here, so by clicking it it will direct you to the component file where you can copy everything what you need. So make sure to copy that going back to the VS code. And you can create this hero section. Component file in under the directory of the component so you can create by choosing new file or I'm going to paste in this case. Then you have everything what you need. Just a quick info about this blog prop, but this blog prop holds the values would be like all the values that you saw from the draft Jason. Right here. So the data pass starts from the story and there is the content, and that's what I showed you in the beginning. Why I already know the rest of the data path follows content and inside there is the body. So that's why you can map the rest of you know the value that are the component objects. So that's why I already knew it. So until this body, let's say data path layer you already have configured from let's say, like in the root or either the index.jsx file, and you just need to add the additional such as like image, to render the image component or the name of the title or subtitle. And that's what you all are seeing in here in this case. So. Going back to the notion over here, and that's what we mean to explain. Right here, but you can have a look at later on for the workshop and we can you know, all these components that we have installed. The story block in it means. It's in route dot JSX file, so we actually need to import this hero section component that we have created, so I am actually going to copy that value. Going to the VS Code route dot JSX file which is in here. Then we're going to import that. We're going to of course include. In the components over here. So I'm going to copy here. And paste it. I'll make sure here is the technical name that should be defined from the story block user interface. So here is the component name that you can store. And I hit the save button. And let's see. In this case, you haven't yet added the hero section. I'm going to just minimize. So here is the hero section that you can add and to do that.

I think you don't see any components listed up so far in the home page. If you see this add block button means that you successfully were able to define. You know, like this body. Bump up body. Let's say field type to be the blocks. Remember this special field type and you can click at block and from here you have already created the hero section component in the store block UI, so that's what you can select by clicking. Then in here after that you You can see the hero section should be displayed inside. And here you can already start to fill out the values that just like the title should be anything that you want to fill out subtitle, you can fill out anything what you would like to have image. You can upload easily from our assets. You do not need to configure that. You already have the assets feature available, so you can just simply click this image field type and this image field type and then add the image over here.

And then from now on it's going to be like the more blog ish configuration, including how to render the rich text, stuff like that, and I think the rest of the content should belong to Facundo. But I need to admit that we have really tight schedule, so I want to make sure if you still have time for three minutes with us, feel free to stay with us. And if you do not have, sorry that we really exceeded our time but the recording will be available so you can always check the recordings later on as well. Yeah, sorry Aresa, what I was going to say is that honestly I mean besides the rich text editor I think that we are not introducing any other outstanding concept in the in the policy that are left from the tutorial. I mean I will show quickly how to do that, but what I what I wanted to say is that I think that from the from the from a learning point of view. I think that what you would you explain is what are the basics to understand how to connect sterbler to the project so ones that that the people has the access to the. To the GitHub repository on the code of the articles and those parts of the project probably following that wouldn't be a complicated let's say I I can share my screen and and show that mainly to mention the rich text editor and one part that where we are loading fetching data from stair block that I would like to leave some homework for the people and then can share with us how to how they would do or how they would solve a scenario that we did. In a certain way in the workshop, I think that it can be done in a different way using remix. So I would like to share that and ask the people to. And to see if they can solve that scenario and share with us the solution if that's OK, yeah. Yeah, of course. So with that you mean to say you want to take over from now on or or I can I show a little bit of, you know, it would be easier. Here, I think, yeah, sorry, we have a question of servant says that. It's receiving an error that says that. Um, you can't use gitster blog API if you are not loading the API plugin. Um what I don't know if there's any other issue. I mean the code so reserved and the code that you created looks exactly the same as the one in the in the repository. Yeah, sorry so uh having the in the root file it's exactly the same. So my question was does loading that API plugin imply anything more or should passing it as a program there for the storybook in it is enough? I mean, you have to import it from the. You did that, yes. OK, OK, so you import the API plugin and then you send it as a parameter to the surfalog init function. Honestly, I think that nothing else is needed to do. Yeah, and the reason why we actually left the option to use this API plugin API or configure in your own way is that if just in case if you decided not to use the storyblock API to fetch the data, then we left the options for that. But most of all the cases you might want to use to be easy or a simple way. So there's actually not much. Let's say complicated configuration you need to apply for that. So the point is, you need to have the value of the API plugin stored in the use property, and I also need to see how my current preview is going to be look like. And then do you have like any other like errors coming up on your end? Serban? Well, this is the most descriptive one, and it also says that it occurs in the basically in the loader that we defined. And exported in in the index file in routes. But yeah, that's basically where we are trying to use the get story block so that's what's causing it. I'm not sure maybe I can try to sorry and you are executing the serverlock init function outside of the app function, right? Yes yes well that's strange. Yeah, I mean I can. I can keep looking for a bit and then you can continue and maybe in the end we can we can look if nothing. I don't achieve anything. Yeah, sure yeah thanks. Thanks everyone.

OK, with that you actually gave me a really good heads up. I might have something. Didn't configure yet or missed in the route. As I was like partially copy and pasting. But let's see first. How it's going to be looked like. Visual editor. Yes, OK, so on my end by following what we saw, let's say like all these links directed to the each component files. I can see the preview. Or life editing real time visual editing feature working. So I hope you also have the same feature available. So if I click within the range of this dotted line rapper. Then it will detect the click event and let me show you. So it will detect the click event and it will jump into wherever nested. Let's say the component where I selected to make the change of the content. So at this point I think yes, I have the real time editing feature because we have called a we have called the custom hook called use story block and this has all kind of logic behind. Let's say handling all these you know, input, published and published these kind of events coming through the other SDK called. Sorry, not SDK toolkit called JS Bridge, and that's why you see the logic in here so. Let us know if you have like another questions or error coming up. Then unless I can handover to Facundo. After it me OK. Sorry to see you off, but yeah, see you soon. Alright. Probably we can continue with with your screen. I don't know what you think at is a so I don't have to change. Go back and forth or or you prefer me to take the lead as you prefer. No worries, we can go over the rich text first yes yes and then. Yeah, and then go into the. What I'm thinking is that we might not have enough time as we only have like few minutes to go over and complete the block. But what do you all prefer? Do you want to? What I wanted to do or is if you go to the notion page now you will see that the following step is to create. Create a block folder that we already did that in the space, then install the store block rich text react render. Probably you can open that link because I wanted to talk about that. The store block rich text render is because as you may have seen when I created the content type for the article. When we have, there is a field called content that has rich text. I mean, in store blog you can add text to that property and add format to that property. You can set the font to bold to be italic. If you want to add the title, if you want to have the paragraph, I mean, you can add HTML style to the content that you are creating in the rich text editor. The thing is, a store block is a story in that information as a JSON object. How do we tell the front end of our content type? I mean what content do we need to render because as we are headless we don't want to save the style of that rich text as HTML because it can be different than HTML. If we are using that rich text in other presentation layers, probably they are going to use a different concept instead of HTML. So if you go, for instance, I say if you go to one of the blogs that we have on the space. But we can see that if you, um it's loading, this is no, no. This is this is work in progress space. That's why you don't see the content because we haven't yet. First of all, you should see that in order to create this folder blog folder together, technically I have technically I have because I use the magic link that that everyone couldn't, you know, like use it. Personal reason. So that's why I have but just to give you the context we were going to create the folder from this plus icon, choose the folder, give a name as a blog. And just hit the create button and then you will have a new blog and inside and here by default. Of course you don't have the pages, so that's why you're going to create again another story. And you give the name like love one. No one. Love want something like this and that's what we kind of sorry skipped in this explanation but after following this way to create the blog each pages. Make sure the content type is article not the page so that's the point we created this article content component and hit the Create button then you can do the same for the rest of the two. This blog overview page should follow the page content title. Sorry, that's what he was missing and it's working progress. It's fine, you just see like the global components that we, in this case statically created sorry to disturb you, facundo. No, no, no, no. And it's great what I wanted to mention is that if you see on the right hand side the rich text that we are setting with style with bold with italics and etc. If you go to to open the JSON object that is representing this story you will see how the rich text is actually structured in Stairblock because it's not HTML content that is being displayed using CSS or HTML typing as you can see a rich text is not As you can see a rich text, a rich text field looks like that with the marks with the type of the phone that we are adding. If we are adding different paragraph and this is the logic that the rich text renderer that we are installing. I mean the package that we are using will. We go through will parse and then based on the content that the the renderer is parsing we will apply in the correct format. So that is why we need another. Another package to be installed. This story block, rich text render that you can see again. If you go to the article to the article component, you will see that we are using that. If you want to read more, you can go to the GitHub repository for the for the package and you can read more about that. All right.

If you want to read more, you can go to the GitHub repository for the package and you can read more about that. All right. Thank you. We covered rich text content. Yeah. If you see, again the structure of the stories, the article and the old articles page, all of them are components and structures that we created. The homework that I wanted to ask the people to do after the workshop ends. It will be super cool if you can share that with us. If you go to the old articles component in React, probably you can show if you go to the blog page. Now, I don't know who you are. We are missing that. If you go to the first page, the blog page. This one. Yes. If you open that one, probably we don't have anything. No, no, because we didn't create the link between. Yeah, yeah. Okay, got it. Because what I wanted to show, probably you can create that quickly and that's the last thing that we see and we leave the people free for today. Okay. So, one sec. I mean, just copy the code and link it in the server login function, right? No more than that? Right, maybe it's faster that you share your screen because I understand what you're saying, but it might take a little bit longer time to take an action. What do you say? Yeah, give me one second. Yeah, no worries. I'm gonna stop sharing it. Sorry. Oops. Oops. One second. Okay. Because I'm trying to, ah, there we go. No. You have the permission, no? Yes, yes. I was trying to zoom... Yes, now I can see. There we go. Can you see my... We can see your VS Code. Cool. So what I wanted to show you is that I will run npm rundev. The component that we are creating is this old article component that you can see here. What we are doing here is basically listing all the articles that we have in our website with this component called article teaser. This article teaser is a small component that we are using that... Again, we are using this render function from the StrobeLog rich text render to actually render the content of the article that is a field of type rich text. And this is like a preview of each one of the articles that we have on our website. We are using this card, let's say, to show the main information about each one of the articles that we have on our space. And in this all articles component, what we are doing is basically creating a list of articles based on what we have on our space. If I open this URL, you will see that here, I'm opening and I go to the blog. And as you can see, we are listing all the three different blog types, sorry, all the three different articles that we have on our website. If I click on each one of them, we are redirected to the article page that are is a show how to create. But the important part, what I wanted to show you is that this list is rendering dynamically all the content that we have on a story blog. I mean, this is not a con. I mean, we are not creating that list of articles in a story blog manually. This is automatically being generated by the all the articles that we have on our website. And the way of getting that list is calling the story block API and bringing all the stories that are inside the folder blog. And that are not the main blog page, which is the one that actually lists all the articles. What I wanted to ask you as a homework is that as you can see here, we are listing all the articles inside the React components. So the fetching that we are doing is using the useStateHook and the UseEffect to call the fetch, I mean, to fetch the data inside of the React component. So this is happening on the client side. We are listing all the articles on the client side whenever we refresh the page or whenever we visit our page. What I think that can be done and it could be, it will be cool if you can do that and you can share the solution with us is how would you implement this using Remix because we can use the loader functions and execute all this logic server-side and just return the articles that we want to display to the function that is going to actually render the content but doing the call to the Sherlock API on the server-side using a loader function. If you go to the GitHub repository, you will be able to see all the code that I'm displaying to you right now on the repository. But what I wanted to ask you to try is if you can extract this from this React component. So the all articles, the only thing that they will have it will be a list of articles that is coming from the server-side. We are calling on the server, the Sherlock API and connecting from it, getting all the articles. So that was basically what I wanted to ask you if you want to, of course, right? But yeah, I mean, besides that, like I think there's, we covered everything, right? Or at least the main part to connect to Sherlock to connect a remix application to Sherlock. I don't know if you have any particular question of what we saw, let me... Oh, thank you. Yes. A lot of people need to go already. And so sorry that we kind of exceeded like more than 10 minutes of the workshop. And yeah, I hope like we were not like running too fast although we extended a little bit of time. And yeah, it's always like something that we try our best but unexpected things happen, but feel free to reach out to us on Twitter or even, let's say, like, I don't know if you have seen us in some, let's say, I don't know, in online or in a conferences, I would be in the conference as well. So there would be like a live Q and A based on my talk but if you have, let's say, related to this workshop question, I would be very happy to answer that. In fact, it would be like more than 10 minutes of the quite long live Q and A, so yeah, I would be happy to see you there and yeah, have some chat with there. I hope the content was useful and you had some fun.