 Hello, everybody, welcome to our Fedora site workshop event. So we would like to discuss about how to make our, like I said, we are basically remaking our Fedora shop in a better way. So this is a workshop session, so this won't go YouTube. If you would like to join us or talk about us, feel free to do that, because this is just going to be talking about brainstorming and coding in the 15 minutes. A little bit of housekeeping. We shared the links in the chat. This link basically shows you how to set up a couple of your stuff if you'd like to new in this area. If you'd like to join us at the coding or check it out or run it to yourself, we can help you through. Some requirements exist. I think Ashley would like to talk about it a bit more about knowledge case stuff, because we are not here to teach you the very basics of certain stuff. So we have to assume that you know some, have an experience at least with JavaScript and VJS and some of the things we'd like to talk about. So Ashlyn, would you like to also introduce yourself? Yeah, definitely. So I'm Ashlyn. I'm one of the developers in the Web and Apps team as well. And I mostly focus on front-end stuff. I've been doing a lot of testing between the different frameworks and different architectures that we've been looking at for building our new websites. And yeah, I'm just I'm really excited about the session because we're taking something that's still pretty hot in the oven, right? We're still really developing it and getting the nuts and bolts put together. But just to be able to show kind of where we're at with our process and hopefully build some interest and see if there's anybody else that would like to be participating with us. So part of that here, I just wanted to pull up the repo and let everyone see what's going on there. Let's see, let's see, we're on screen too. Yeah, that's what we're looking for. But in the meanwhile, let me also introduce myself for just a second because I forgot to say my name and stuff. Oh, you didn't do that yet. No, I didn't do that. No, no, you can't share your skin. That's OK. My name is also on the web. I'm also a Federal Website and Application Team member. Flash, Federal Mindshare, Web site and Application Team representative. Also doing a bunch of other stuff. But right now I'm just a website guy. That's awesome. Just the website guy. Just a website guy, yeah, pretty much the same. All right, OK, let me just pull this repo up. So this is the website's 3.0 repo. It's where we're working on ironing out the kinks of our architecture before we go and do it for Reels and a different repo that we'll be doing. Once we've locked everything down. So this is a fantastic place if you're looking to learn or get into the website's team. If you want to see the stickiness of what's going on there, you are definitely more than welcome to. We are looking for people to join in and work with us. And it's going to be a lot of fun. We picked Vue.js because it's fairly simple to use compared to React and some of the other frameworks. And we're working on making a workflow that feels fairly natural for vanilla web development, but leave between some new technologies. So this is the repo. And we'll just take a look here. There's Client and Nux site. So if you're just going to add something extra, if you don't mind. By the way, when we are doing this session, we have to also say, I think one more thing, make this stuff simplified. We are renovating all of our websites. This is why we do use these technologies and decisions and other ideas. So this is basically our ideas coming, getting live. And basically, if you want to jump in into the federal website team to do exactly the hard work, the fun work, coding work, if you're interested in the programmer section, feel free to reach us as well. So that was at least the basic idea why are we doing this session as well. Sort of not to say it in the beginning, but I would like to feel that we have to mention it. I think people need to know, why are we doing this? Oh, yeah, for sure. Yeah, I guess it might not be as common of knowledge that we're building all the websites. So really quick here, this is the repo. The difference between Client and Nux site, this is from an earlier stage when we were looking between using vanilla Vue.js and Nuxed, which is a framework built on and around Vue. It automates a lot of the file system routing, the static site generation, things like that. So initially, we were working with just Vue, and that's where this was going to be Client. And we were considering having a fast API Python server. And that's just why this looks like this. So if you're going to jump in and start using this repo, you'll want to CD into the Nux site folder and do your NPM work in there. We've got some basic setup stuff. So if you look on the read me here, there are the commands that you're going to need to know, some of the extensions if you're using VS Code or VS Codeium, anything that you might need there. We've got that, so that should get you going. And you can check out the admin panel and the test deploy, which doesn't look like too much yet. It's just us nailing down the design system on the home page, but there's more behind that, but that's all right. And then if you're looking for more educational resources, we've started to put together this wiki. And those are the links that Honor Alp shared with you. So if you're new to Vue, if you're new to JavaScript-based web development, anything like that, we've got this Getting Started page, which is really helpful. It'll help you get your repo set up, show you how to run code, get you to your next steps, make sure that you've got Node installed and Get Installed. Yeah, so a very, very basic primer. And then if you want to start getting more into the meat of things, this is going to be a lot of the content that we're covering today. It's going to be kind of an educational session here. This component props, which also gets a little bit into slots, and we'll cover that in just a few minutes here. But this gives some code snippets on the basic fundamentals that you'll need to be able to understand, to get working with us. And then if you're more interested in the CMS side of things, we've been using Netlify CMS. And we're going to go and talk about that as well. But if you want to be able to work on it locally and experiment with it, here's some setup notes. And then this is going to be a stage here. We've got some more work to do on how we render our data. So we're going to be doing a bit of a brute force method while we lock down or working with the Mongo queries. And you'll see that with the next content module documentation. But for the stuff that we're doing right now, this will give you a bit of an overview of how you can just start pulling the data from the CMS, which is Get Based. And yeah, so that's it for our documentation. If you're experimenting with this or using this and you're finding any issues, please feel free to create an issue in the list here. If you're interested in CMS and Mongo query syntax, which is kind of a new thing for our team with working with this particular CMS, I've created this issue here as a workspace for people to be able to jump in and comment. And we can start working on in this space. So we're all ready to rock and roll there. Oh, and that's the let's do this without doing that too much. Cool. All right. Back over to you, Anuram. I think there is one more part I would like to discuss about is when we are renovating our websites, I think before we go one more section, let me try to share my screen as well on one certain situation. Second. Give me a second. OK, cool. So I would like to discuss about one more situation in addition to Netlify, which is that I would like to showcase in our content management. So let me share the screen. Can you see it, Ashton, as well? Oh, by the way, I can't hear you. Oh, yeah, you can. I can. OK, now I can hear you too. OK. So in this page, Ashton, also please help me out in certain situations. This page is basically going to be our content management. We're going to create pages, additions, as you can see. We have some context. We have some data inside of it and some sections. Like if you have an image, you can have an image. If you want to call an action or page sections. So we have all of these extra collections and pages. It helps us to basically to manage our content in a much more nice way. Basically, the person who wants to control the website or change the content. It doesn't require to know the coding skills. You can easily change from here and save it. It will create a history, which will automatically create a git commit. It's also cool because we will also see what change, what happens. And if the change has become so much more, we can even try to make them squashed it to make it much more clean history if you would like to. And that also gives us so much advantage in this area. So Netlify is also good in this situation. And then it also creates some extra advantages for us, I guess, going to be proper word. So today, we would like to try to work on an flock to Federa. I will try to work on bits more. Then I will switch to the other section. I will try to cover up some of the technologies, some of the style coding types I'm going to do. If I'm making a mistake, actually, you are my basically police. You have to warn me, find what am I doing wrong. If I crash the code, don't worry. It's just being me. And JavaScript is not always the cool thing. Every type is object. So you don't like it sometimes. You don't have to go. It's great. I'll do it. OK, cool, cool, cool, cool, cool, cool. So I'm going to switch the screen again to share my visual code, do some bit of a changes, try to refresh onto the page when it's become visible. So I think we can start about, you can also help me out on a bit of a Netlify situation to control the content. So basically, the idea is in this first section, I'm going to create a basic view component to create some variables and connect these variables with variables, which means I'm saying props. Then we will also try to pull the data from the Netlify and try to update this data on when we update it. We're going to update our content from the Netlify. Basically, my static content is going to become a dynamic content and controlled by the Netlify. I think I explained it. Ashlyn? Yeah, yeah, definitely. And there's just a question here that Sam asked in the Q&A. They said, the current website looks all right. Is there any particular reason for the redesigns? And that's a really good question. There's a couple. There's some of the pages need a bit of a refresh, as decided by the design team. And we've got a lot of designers coming in that are looking at new and interesting ways to display the content as the community grows and as our events and everything are getting bigger and just more complex. I think we can also say that, sorry, if I interrupt you, please continue. Yeah, yeah, just let me finish on that. And yeah, there's just a lot of new design talent coming in. So we've got a bunch of pages that have been given some refresh designs that are a little bit more to some modern standards. But that's just the visual side of it. The back end side is that the maintainability of our current sites, they're not the most accessible for new contributors to be able to work on. And just some of the tasks that, with more modern technologies, would be really easy to do. They just take a lot more effort. So yeah. Plus, I think we have to say that easy navigation, we would like to have it, because we have a lot of website. People can even lost in there. That's why we would like to bring easy navigation, easy accessibility, maybe, hopefully, quote unquote, a surprise, surprise, maybe dark mode. If you want to see your eyes in the middle of the night, people doesn't like all the CTD by white pages. That's kind of one of the ideas. Thinking about it, of course, needs to be finalized. More mobility-friendly is also one of the reasons. So yes, current website looks OK. But one more important piece, I think we have to say it, Ashley. We are not just creating federal workstation, or server, or coreways, or cylinder. We have much more additions. So we would like to make sure that all of them is can accessible and have same level of accessible quality content. So we would like to basically make them make sure that not put them some other top domains. We'd like to bring them all together in a much more easy navigation. So if you want to go workstation, the navigation is going to be much more easier. Or if you want to go to QDA, for example, myself, I'm using it. So we want to access much more easier. Because to be honest with you, every single new user is asking this, how do I find other, like, is there a federal QDA that should exist? Because the main website doesn't show that in clear way. It's just in the bottom of the page, and it's not cool. So we would like to change these kind of problems as well. So some of them is aesthetics. Some of them is all technology. And some of them is definitely we are growing. And we have multiple variables of deliverabilities. And we would like to make sure that everything has equal level of accessibility and access, easy access to the website as well. I think that's also important. 100%. Yeah, I think that covers everything. And on that note, I was wondering if you'd be able to open up the configuration file for the CMS that you've got the front end for, just as our entry point to getting into the work and the code here, just so people can see what the data is structured like. Yeah, sure, sure, sure, sure. Let me switch then. OK, I think this is pretty much as it is. And this is the media, just a tiny, eye candy show. So sure, this is easy, upload, go, and easy. Like a WordPress style. So that's why we are using this one as well. And I think this is pretty much is covered this page for now. Let me stop sharing my screen and go to share my other screen. And let's talk about a bit more code mode. OK, is it visible? Yep. Cool. Let me change my screen control a bit more because I have so much going on on my screen. Let me make sure that it's fine and nice. I think. Yeah, it's a little narrow. Yeah, I mean, because, you know, putting screen and tiling management, I'm just hitting at the moment, broken my stuff. So you said content, Netify stuff, right? Let's go here. Yeah, yeah, start with in public. So yeah, down. And then so public admin. Admin config, yeah. Yeah, that's a winner. OK. So could you please care to explain this one to us? Yeah, so a part of the system is we wanted a CMS that we'd be able to have really good control over that we wouldn't have too much overhead or anything. So this brings us into a Git-based workflow. And this is the configuration file. So all those fields that on our Alp was just showing you. Those are all set up right here using this YAML file where we can describe what types of fields we want, what we want them to be named, if they're required or not. They all have options that we can do. And so it gives us a really flexible approach for our developers to be able to create a foundation where newer contributors that maybe have less tech experience or our content writers, which like the skillset needed to be a content writer, like a blog writer or a web page writer or designer, it might not really require you to be a strong coder. So this allows us to separate those things a little bit while making it really easy with YAML to be able to get into writing. This isn't a very obscure or abstract type of system as far as that goes. Yeah. Exactly, exactly. I agree with you. And since I agree with you all the time, that's why you are my best teammate as well. Aw, you're my best teammate, too. So one last, the very, very last thing on that, if you could hop down to content and just show what the data for Flock looks like. Yeah, there's that content folder right above Docs in your left-hand side. Yeah, exactly. Just one tiny note can be it. Controlling it if I also made it easy. All we have to do is I learn it from Ashlyn and others is that just put this Netlify.js link. You're all good to go. And it's also easy to configure. I love this. Thank you very much. You make my life easier as well. That's the goal. Documentation. It's a documentation, right? Oh, no, content. It's just above all. Oh, content. OK, perfect. Flock, YAML. So this is the content. And in the control by the Netlify, right? Yeah. OK, so this is the content. Basically, we are controlling over Netlify. Then if you change here or Netlify or in the code, I mean, technically we can change in the code, right? Yeah, you can just edit stuff right here. OK, so can I just type your name over there and it's going to be done, right? So next Flock location is going to be Ashlyn House, maybe. Yeah, yeah. So welcome to Calgary, Alberta. Yeah, perfect. All right, all right, all right, I like it. I like it. If you want to add something? No, I just wanted everyone to be able to see this. So when you're accessing these fields, the way that we're doing it, that brute force way I was talking about is just iterating through the series of arrays and objects to get to basically the string data for our URLs for images and then the text content. So it makes it pretty easy to access. Basically, when you go to the next site, you will see content page Flock. And then you have index file. I think my index is such a small, yeah, yeah. And also the file structure we have, sorry, older structure we have is also easy. So we can pretty much find it. So every edition basically lives in under Edition or ABC, whatever. Yep. So let me back to put this one to here because this is my basically debug screen. If it is crash, I don't know it's crash. So Ashlyn, do you think should I go for a Flock Federal website and try to copy this content to exactly full section and put on the hero, FB hero, and try to customize it together, then let's do some bit of a work. What do you think? Yeah, that sounds fantastic. OK, so I'm going to copy this content. Oh, wait a minute. Let's just show it after I copied or creating stuff. So I'm going to copy this section and file this hero section. And I'm going to put it in FB hero, I think. But you have a card. Should I create a new? Oh, you can use FB hero. I don't think there's anything really in it, is there? No, it's not. It just has a slot and header, which is nothing. So I'm just going to remove this and put everything over there. I think it's going to be, yeah, I just have a banner or alerts. Yeah, I'm going to just remove this over here. Yeah, you're good. Yeah, but this one is, these two dudes can stay there for a while. I'm not going to touch it. So next thing is, if I remember correctly the way you mentioned to me, we can do a little bit of, what can I say, cheesy. We're about that. I think FB, as far as I remember, you're just going to, OK, FB card, yeah. And you have FB card approach. So can I bring this one to as well? Yeah, yeah, you can use that. Yeah, I'm just going to change it, of course. I'm just going to, showcasing that some of them is easy. So if you want to know our structure, I'm just going to copy it because we don't have to reinvent and rewrite everything altogether. Yeah, so this is like getting into one of the strengths that we're going to have with using view this way, is that we can create these reusable components that are flexible, and then our pages are basically just compositions of the components where we take data from our CMS, pass it through the page into the components, and that way we get consistent styling. And it, again, makes it easy to collaborate on. Right now, we're at the stage of building out the components and making them hardened and ready for that sort of thing. Yeah, yeah, definitely. So we're going to say title string, we're going to be stringed. So this title is going to be here. So we would like to make sure this one is close there, so we can control this one. Let's just say top title, I guess, it'll be fine. And we have a big image here. I'm going to use that as a put image things back over here, I believe. And, of course, it's complaining about the thing. I'm going to bring. And also, I think that it's also very important. But I'm going to make it a string for now, but later than we may want to change this into the date to make sure that localization can be possible. I don't want to make this too complicated for now. I'm just going to say date string, but we definitely would like to. What am I missing something extra for now? It's going to be fine. But I think we have H, image, actually, let me just say image, H, think, image, or think. What I mean by that, Ashley knows what for the explanation section is. Oh, there's a person wants to join. OK, hop in. I think the way I would like to say is H on flow is going to be our left hand in our website. Oh, by the way, I forgot to mention it. We all do. Ashlyn, could you share the Pampot link so they can know what tech I'm talking about? Oh, my goodness. Yeah, definitely. Yeah. And since you're doing that, I'm doing the other work in the same time. So let's move it up. OK, I am going to be done with this. David, which one's fine, I believe. I'm just going to use. Daniel, that's OK. By the way, if you want to join us, surely you can join us. But this is a workshop. So this is not going to go to YouTube. If you're a camera shy, don't be. Be all here friendly. Workshop doesn't go YouTube. So let's just say that. It's a pretty much fair warning. Yeah. And so I just want to comment about something with the way that props are being used in this particular version. So this is good, because this is allowing us to pass information to this and use it. The one difficult thing, though, and this will be something that we can get into with an optimized phase, is that the props that are being used here are very, very flock-specific. So likely this particular component in its current version would really be an FP flock hero, right? But it's good, because this way we can get from that level to that level of abstraction. And then we can look at generalizing it a little bit further, because I know the flock hero has a couple different elements and layout patterns than the workstation one and some of the others. And that's going to be when we get into looking at card design. We'll explore that with the use of slots. Both are really valid and useful ways of setting up your components to be reusable. OK, I'd just get into the prototype link. By the way, can I just put directly into the class, inside of the class, to put the props over here? Or should I have to put it inside of the? I can't check this one class stuff, because I put a title string over here, but it's like a string. Should I have to put it inside of this area? You need the double mustache syntax around title string. You like this? No, no, like. I can't type it. All right, sure. Right, right, right, right, right. I have to do this, so it will become unvaryable. We move this stuff. And, oh, not that. So basically, that's done. This one is required to be a URL, but I'm going to look into it later on. And I'm going to change this one. We have this August 5th at this date. It's pink, like that. So we have some basic foundation. And let's just save it at the same time. And let's go here. And then what we can do is we can basically create our FB URL, I guess. Yeah, and you can do it as a self-closing tag. And my auto-completion doesn't work. It's fantastic. We're supposed to do the this thing, but it doesn't do the way I wish to do. And I'm going to do this one now. Yeah, I would recommend, yeah, just to do it as self-closing, because it doesn't take it. This one doesn't take any slots, so it doesn't really have any content to go physically inside. So if you're to do something along those lines, and then you're going to have a whole bunch of props to pass to it. So it'll take less space that way. Yeah, true, true, true, true, true, no problem. And let me check my content. Is it going to work? I just lost two stuff. OK, so let me show you my screen at the same time. So we can observe that. Is it working or not, quickly? So this is the current look on the Flok website. So I just moved this big blue section. There was supposed to be a date, but since I didn't use the props, so that doesn't come up within. But if I add a props and give a parameter, I think we can provide it manually as well for quick showcasing it. So if I want to do that, actually, how do I pass the props? So you're going to use what's called a vbind. And the syntax for that, so the easy way, inside of your component, you'd go like fphero. And then what's the title of the prop that you want to use? Is it date string? Date string, let's just say, yeah, I'm going to pop it in here. This one, for example. Yeah, so you could do that. And then maybe let's just pass it the string directly. We'll say, in that case, actually, you don't need to bind it because we have no data on this end. So we'll go date string, August 4th to 6th, 2022. It would look along those lines. Yep, exactly. Let me copy this one. Also put this one over here. So I just add the props. I didn't change my hero. All I'm going to have to do is add five to page. And yeah, it's already there. Now, how about this? What if we wanted to take the data from the CMS and add it? Yeah, let's do that. I'm writing it directly. OK, so this time I'm going to have to stop sharing and go back to code. Let's do it again and do it again. Yeah, sure. Share my screen, share my screen, share my code, share my code, here's my code. So this is right now, how does it look like? So we're going to have to change this one into access to page. So I can, so let's remove this one now. So we're going to access to OKs. I think we have to do play. Oh, no, you wanted in quotations. Double quotation? Just regular quotes, yeah. And you're going to want to put the colon at the front of the words date string. So it'd be like colon. I didn't understand it. Yeah, right. That's all right. And actually, you should just leave it at data just so they can see what spits out from that. Oh, I'm curious. Sure, let me share my screen. It's going to be a fantastic belong. It is very long. This is our brute force stage that we're at. Yeah, let's look so many. So I need here. I need this one. Yeah. So all I have to do is I select array, go to title. But in order to do that, I need to make sure, of course, I choose the wrong one. Actually, no, I didn't. I choose the title. But if I remove that and save it again, what was it? Is it? I need to go detail title, I guess. But I need to check this one into plot. Yeah, yeah, details, then detail, and the first one. And there are too many details, so which means I have to go our detail along this line. Am I wrong or? I know you're right. I'm happy with doing this. We haven't. This CMS structure is still in progress of seeing what it's like to access the variables. And if it's comfortable, intuitive, or if we're hitting sticking points, that's kind of what I was hoping we could get out of this session as well. Yeah. Wait, I just tied data. The first data is 0 array and dot details. Dot details 0, and I'm in details to be honest. Oh, no, you need to get into header. So it's data 0 dot header. I missed that. Header. OK, so I'm, oh, header. I got header. Header has time to, OK, I'm in. I'm still getting into it. Where am I? I'm in header. I just say data 0 header and dot detail. I need to go there directly. And it's an array, but no, not this one. This one is the array sign. Yeah, so. And I said detail 0. And this is the pretty much I have, but it doesn't update it. Let me update it. Oh, OK, you cannot find details. I must be missing something. Let me copy this one out to refresh it. Ah, come back over here. Oh, OK, I said header and then details. I have to check my YAML again. I'm pretty sure I said detail. It's true, yeah. It's so fairly. So something that I found with this part of the workflow what's useful is just to take that whole thing and dump it into a JSON beautifier just to get it so you can visualize the hierarchy a little bit better because when it's nested like this, it's kind of a pain to look at. Yeah, let me do that too as well. I'm OK, so JSON, beautifier, let's go. Let's go. Not bad, because why does it mean it's not valid? Did I copy wrong? This one. I got the parentheses, the parentheses. Yeah, I should be fine, I believe. Let me actually check on my YAML as well. Yeah, I mean, I did it, so let me try it again. It's JSON, beautifier. Sounds good. And while you're doing that, I'm just in my own editor to see if I can access that property easier. Yeah, OK, I did it. And as you can see, header, title, sub-title, but let me change my screen as well so you can see it. Window, that, and this, and let's go to the YAML. We are in header, as we mentioned, details, and getting the first detail zero. Oh, I have to also take title as well. And I have to do this, right? I guess, if I don't miss it, let me see. OK, it's giving me a, it's not reading the zero. So, yay. So basically, this data coming from Netlify. And basically, I got the Netlify data. So actually, I'm just going to change to the YAML file. So I don't need to touch this structure anymore. I'm done with that. So I'm going to cancel this one. So I'm just going to say 2023. Let's change the number. Yeah, you can see, just see. I'm just going to say, hello, guys. In fact, what the heck am I doing? But I'm basically playing with Netlify YAML file. It just gives me the proper stuff I suppose to do. But this is basically, we basically move entire header hero, getting an over to components. And we just add the props and control those props with Netlify. And basically, now, let's just say, none of us is here. And someone has to change the content and just log into the Netlify, change the state. And we don't have to even know anything. Hello, Katyaan. By the way, actually, I can't hear you. Oh, right. So I keep pushing the button so you don't hear my clickities. OK, how many times did you talk when I was talking to her? It might be something probably a lot. Oh, no, no. I was probably just making random commentary. OK. So do you want to take over the last part? Yeah, let's hop down and do cards. I'm really liking the workflow with slots, because we'll be able to do this with the hero later. So I can show some of that. Would I be able to steal the screen from you? So do you want the screen? I'm stopping because the ocean, OK, you're safe. I'll be the watcher this time. Sounds good. I'm just going to move you all to that screen so we don't end up in a tunnel. That screen, which means I'm going out. Hi. Hi. OK. All right, so I have not pulled this. We'll deal with the get stuff later. But just to recap, looking at from where we started, the initial stage, all of this would have had to have been on the flock page. Actually, your screen shift, you stop the sharing. You stop sharing. Oh, did I? Yes, you did. I wonder how I did that. It's a crazy button. The world has changed so much. It's crazy. Yeah, yeah, yeah. Whatever, you can remove the hero section for now. We can just send a comment, and it will be easier. Yeah, yeah, I'll pull it in. It'll be easy. But yeah, this entire thing now is reduced to one line where all you have to worry about is passing the information to it. And that can really improve our maintainability. And that's just so lovely. So down here, I want to show you this card section. And this is all it is now. And I've already worked through this. And so we'll do a bit of a walkthrough here. But if we think of this as being, we're just basically making our own custom HTML tags that have strong, yeah? Sorry, can you zoom a bit, like me, because it's kind of maybe problematic to some individuals. Let's make sure it's all readable for. Finding texts can be a problematic. Just a friendly reminder. Oh, thank you. Thank you. Is that easier to see? For me, it's fantastic. And if anyone has a trouble in the chat, please write it. Be all open. Because we want to make sure it's all easy to readability. Yeah, continue. And we can do let's do something before coding. All right. So how I've set this up is I've made an FP card component. It's image component, a title card. Like I've just made these all the separate, very small components. And they would be considered dumb components, or quite functional components. But they're close. There is a component. Yeah, but like, so where you were passing props, and that was your main focus. Like, if we look here, the only prop that I've passed is the image URL and the image alt tag. Everything else, we're rendering this inside of this component the way that you would with normal HTML. But we're stripping out all of that access styling. Because we don't need to look at that here. We just need to be worried about the content. And so the way that we're able to do that is by mixing props and slots together. So if I hop over to the components. So we see here, I have this card components. And I've got a bunch of little pieces for them. So let's start at the top and work our way inwards. This is it. Here is our card component. It is not very exciting. All it's doing is creating some top level styling. The flex, we're using Tailwind CSS, by the way. So if you're confused about this crazy utility class thing, which I know isn't the nicest to look at, but it's really nice to work in. And then this slot, what this basically does is if I use it like a single tag the way that we did with FP component like this, where it's self-closing, this slot will take any information that you put inside of it. So if we look here, all that slotted information is this content going inside of the card, which is handling the outer level Flexbox styling. Exactly. And then so if we take a look at the image, because this is where we're mixing props and slots together. Oh, no, the image is just props. Sorry. No, it's just a prop. Because it's an image, right? But so the image is taking the props because it needs to, right? We want to be passing this information into it. So we have it bound to image URL, image alt. We could also do this just as image and set it as an object instead of two separate strings and pass it as the object. The trick with that is that you need to make sure that your naming conventions are more consistent. And this makes it a little bit secure against if somebody made it with like they used URL for the naming convention internally. And then when they pass like a variable to it, an object to it, far into the future, and say they changed the name URL to link, that could cause some rendering issues and just really stupid bugs that you don't want to have to deal with. So I've always gone this route and just like having a little bit more explicit, you can go either way. And we don't have an image situation, by the way, before the talk started. Oh, yeah, I fixed the image issues. So get the images to render. And this is another thing we're kind of like in, as we're in this earlier phase of the process, this is what we're having to add this little string, this config app base URL, which we take our team member, Nico, for figuring that out because from the CMS, as I've worked with before, it was a bit different. But I think we should be supposed to do that. No, this is like a fix for now. But just the same way that in the long run, we're not going to have to be accessing our information in this manner. Yeah, we're doing this zero, zero, it's kind of long. Yeah, we need to fix the other problem. I didn't look into it. I'm sorry. I have to check this one later on. No, it's totally cool. That's a tomorrow issue, right? But for right now, it's a quick and easy way to get into it just so we can start templating. And what we're doing here, because if we hop over to the page, which one are you? Let me just get that page over here. There's the winner. OK, well, I will open Firefox. What was the problem? OK, so you can see I'm like really just dump in data on the page to look at it. So this is the structure of them right now. And we have three of them being rendered. But we've only written it out once. And that's because Vue has this nice v4 syntax, which I think is fairly accessible. We could do really crazy ways with JavaScript. There's lots of ways to loop through things. But I think this is just nice and well spelled out. But what we're doing is we're looking into the cards, which this object, as we saw earlier, that's an array with three cards in it. And it just generates the match there. So if we were to do this again, let's just play with it. We'll go FP card. FP, not F card. I know. I really wanted to make our prefix F. But I know there's no way. No, no, no, no. No, you cannot. I didn't allow you to do that. It's forbidden. You know the reasoning. I know. I know. I'm just saying. So let's go. Let's copy this out again. We'll just do this twice so that you can see what the flow is. So we're looping through our cards. It's now going to give us an issue because of the N tag. So let's give it its N tag that makes it happy. Now if we go take a look at that, now we've got all these other cards that are like, what the heck? Now there's six of them. But because that top level is only a slot, it's not going to show anything. It doesn't know what it's meant to describe. So we could just be like, for each one, we can go. And now it's going to loop that. So let's do something a little more interesting with it. Let's try getting, let's duplicate this image. And now we've got our little icon things that we have these gradients set up. Or no, those are just set up. These are the image. Yeah, I couldn't remember if I had done that because those are font awesome icons. I couldn't remember if I did that with tailwind or if I just pulled it from the design, but I didn't look from the design. So we're going to make all the logos to CSS, right? Yeah, why not? Let's have some fun with it. We're playing with gradients and tailwind is a great time. We need to make it 3D, maybe, so we can turn it around. Oh, we could do that. Yeah, we could. Anyway, look into it, please. So if we look at this FP card title, let's just have a peek at what it's doing. It's again, I didn't do these ones as props because passing a lot of data, it just like, in my experience sometimes, if it just needs to be a text thing like this, it's a lot more intuitive just to work with it the way you normally would. So that's what we're going to do. So and this is there's a kind of a trick here that we're getting that stops us from having to deal with too much of this like super long string thing. Because we're in a for loop, we're going card in this ridiculous big old object or array, sorry. It's an array. So that means any individual one, we only have to use the term card to iterate through. And then from there, we just have to make sure that are the objects that we're accessing or the keys that we're accessing are right. So if we go card, we're going to just get all the information and that's not very useful to us. But if we go card.title, then we get that. We can go, let's just take a look carding. What's one of the other values? Subtitle, let's go with that one. But it's in a title space. So it's unlike here, right? Where we have the actual title, it's now just inheriting the styles from our custom object that we made. So we can leave it at title. And then what we can do is get rid of that other dot. That's not very helpful. And we can add our FP card dot text. Yeah, it will show the same thing. Yeah, and then if we do our, now here's where, I forgot the call to action. That's where we're blending slots and props. So let's use that one. And that'll be the end of this bit of a demo here. So if we go FP card action, we want to bind the URL equals to card, let's do that inside of there, card.cta.url and then boom, it's very, very easy to generate all this very little work. And it takes up a lot less lines of code, which is a win, isn't it? And just to show you what that call to action looks like here. So here we can see for the URL, we're taking our string in the prop and we're binding it to href to the link. So whatever we name this, this just has to be named like that there. And then when we refer to it, we just need to make sure we're saying the URL needs to be this value. We could get rid of the semicolon and write out like a direct one, but then we're gonna lose. Yeah, we're gonna lose the power of our v4 loop. And I think this is nice because we don't have to construct too many data objects, right? So if you're wanting to keep it low key on the JavaScript, you only need to have as much as is necessary. I guess this is still JavaScript, but we wouldn't have to do this. We could do this as just static text as well. And that makes it really nice and smooth. Yup, and that's how we get cards. Yeah, we also have one minute left. If there is any questions, let's just take them as well. Yeah, yeah, please. Are there any questions? And there's, yeah, I mean, if not, we can end it. I don't know. So those of you that are here, did you guys enjoy the session? I hope that you learned some information. I'm not sure if there's anybody with view experience, but I hope that you found it cool. And thank you very much for coming. Thank you. Let's wait a minute. If not, we can end it, I guess now. All right, well, thank you very much, everybody. We will see you around. Bye.