Build Flexible CMS Layouts with Slice Machine

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Jason: Hello, everyone, and welcome to another episode of Learn with Jason. Today on the show we have Lucie Haberer. Lucie, thank you so much for joinings us.

Lucie: Thanks, Jason. Nice to meet you.

Jason: I'm super Excited today, we're going to be doing something we haven't done in a while, working with headless CMSs, and with Prismic Slice Machine, which is an interesting spin on how CMS management works. But before we talk about that, I want to hear about you. For those of us not familiar with you or your work, do you want give us a background?

Lucie: Yes, sure. Nice to meet you. I'm Lucie, I'm from France, Paris. And I have been working at Prismic for 9 months now and I'm writing my master's degree at college. So, quite a bit. But I imagine to get through it. I am also creating content on my side, blogging about JS and the serverless. It's quite fun. And I am in the NUXT community and with everything. I'm quite a Windows person. So, I'm working on stuff on GitHub, the platform for projects. And, yeah, I guess a huge J S and Next.js.

Jason: Yeah. And so, next is something is we're going to use a little bit of NUXT today.

Lucie: Yes, use a little bit of NUXT. Not a lot, but it's going to be all right.

Jason: All right. I'm excited. I have a little bit of -- I have been taught. I have had experts on here to teach me Vue. I definitely only retained 10% of it, though. So, get ready. But so, I want to talk a little bit about Prismic and Slice Machine. Maybe the first thing that we should do is differentiate between the two. So, before we start, what is Prismic?

Lucie: Okay. So, Prismic is a headless CMS. So, it's a CMS that gives you like a dashboard for editors and an API for developers that you can create content from it. So, it's just like content management. But you don't have like any frontend like with WordPress or other technologies. That's quite the modern way of manipulating content on a website or other kind of website. And it gives developers a lot of ability to use the technology that you are using. That's Prismic, basically.

Jason: Okay.

Lucie: Yeah.

Jason: And Slice Machine, then, is -- is a thing built by Prismic.

Lucie: Yeah, exactly.

Jason: Okay.

Lucie: So, Slice Machine, as we like to call it, is the cannery version of Prismic. It's the new way we like people to build websites with Prismic as the service and with the brand new workflows that allows you to build your component. An average component being ready for the CMS to be detected by the editor and the marker inside of it.

Jason: Instead of thinking about your headless CMS as being a I open a page and edit a page, when you think about Slice Machine, we're saying, like, I'm opening a component of the page to edit. And then I can reuse that component in whatever order to build different types of pages out of components. Is that kind of -- or I guess slices.

Lucie: Exactly. With Slice Machine, you create components which are website sections. Might have a subscription section, an article section. So, you are building those with Slice Machine and give them to Prismic. And Prismic takes care of having the UI editors to input content inside of it.

Jason: Got you. Got you. Very cool. Thank you for the sub. I also saw that Bobby Tables subscribed earlier. Thank you very much. Good to have you here, enjoy the boops. Now what I do say? Something ridiculous. Welcome to the boop crew. Huh? Huh? So, here's what I want to do. Let's get over and start looking at it. I'm going to switch us over into pair programming view here. And while we're looking at this, let's take a quick second to shoutout the sponsors. We have live captioning, as always, made possible by White Coat Captioning. We've got Amanda with us today helping us out. Thank you very much, Amanda. And if you want to follow along with those -- those live captions, you can see them on the home page of learnwithjason.dev. The live captions are made possible through our sponsors, Netlify, Fauna, Auth0, Hasura. Thank you very much. They make this show more accessible to more people. I appreciate that because there's no way I could do that on my own without some help. Also, make sure you go and follow Lucie on Twitter to get the latest on Prismic, on Slice Machine and on the other cool things that Lucie is working on. We are working with Prismic today. Oh, dang. Okay. We got a party going on. Chris, thank you for the sub. Nineteen months. Oh, my goodness. And Tessa, gifting the subs. Oh my goodness. Thank you so much. Welcome to the boop crew. Everybody. Oh, my goodness. Oh, I see that you're now a subscriber, Jembrerly, I'm looking forward to getting Spammed with your boops. Good to see y'all. Everybody. So, I dropped the Prismic link there if you want to go check that out. But what we're specifically looking at today is Slice Machine.

Lucie: Exactly.

Jason: And so, okay. So, Slice Machine. And we talked about this a little bit. We get these sections. So, instead of a whole page, I get to, like, design as a developer this is what -- you mentioned hero. This is what my hero section is like.

Lucie: Yes. Exactly. The sections that you might be in. Another example for the page, I think. But that's right there. You are in the section and you are going to ship it to Prismic and Prismic will give a UI editor to work in it.

Jason: Very, very cool. This is powerful stuff. When we start talking about the modern marketing website, you can't just say, this is what the marketing page looks like. You have different needs every day. You have a promotion. A live event that needs updates all the time. You have to switch from a carousel for like client photos to a video that's an explainer. And those sorts of needs are gonna come up all the time. And if you have to rewrite the whole home page every time you have those changes, that's no good at all. So, this is kind of promising another way of working here, right?

Lucie: Exactly. Like you don't want to have a backend between the marketing team and the developers and the designers. You want the team to be able to do their job by just having the best content at the right pace as fast as possible. That's what we do in Prismic using Slice Machine and two things we will see later on.

Jason: Very, very cool. I'm ready here to get started. I want to give this a try. What's the first thing I should do if I want to get started with Slice Machine?

Lucie: Okay. So, yes. The first thing you might want to do is to download the Prismic. You can just use an npm install or -- yeah. Install. And it's Prismic-CLI.

Jason: Prismic-CLI. Here we go.

Lucie: Exactly. It should be rather quick.

Jason: Famous last words.

Lucie: I'm sitting here and I'm watching. But it should be that unless you like to interact with Prismic, this is what we're going to work with today.

Jason: Okay. Perfect.

Lucie: Okay. We have the CLI.

Jason: I could I guess we can do like Prismic-version?

Lucie: Yes. Hyphen, hyphen version. There's not a short hand for it. Yet.

Jason: There we go. We're running Prismic 3.8.7 today.

Lucie: Great. And now that we have the version that we want to do a new Prismic. You have to sign up. So, we can do Prismic sign-up.

Jason: Sign-up like this?

Lucie: Yep. And this will prompt you for an email and a password. Whatever you're fine with.

Jason: Let me generate a strong password over here. Maybe. Dang. Y'all got to the -- almost to the level 3? This is very, very good stuff out here. Oh, and Tessa mentioned those gifts are behalf of the MDE community, that's media developer experts. That's a Cloudinary program, right?

Lucie: Yeah, I think so.

Jason: Okay. Getting a secret password over here. Okay. We've done it. I have an account.

Lucie: So, we have a Prismic account. Now we have -- we are ready to start working with Prismic. But first we need a project. So, we might just bootstrap a simple NUXT project. And for that we have the npx create-NUXT-app.

Jason: Okay.

Lucie: Okay. And you can put the name if you want to.

Jason: Okay. Let's do this -- we'll do Prismic-slice-machine. That will be our project name. Okay.

Lucie: Great. So, yeah, you can leave this default. Yep.

Jason: Okay.

Lucie: Yep, today, whatever you're fine with.

Jason: I'll use npm.

Lucie: That's up to you in the chat. Like we will be like some -- if we want to go quick in CSS, I don't know how familiar you are with it.

Jason: I'm not super-familiar with Tailwind. I need to bring someone on to teach that.

Lucie: Okay. Let's stick with this.

Jason: Yeah, I can --

Lucie: Okay.

Jason: Do we need any of these?

Lucie: Nope.

Jason: Okay.

Lucie: I think -- we don't need that fancy formatting right now.

Jason: Yeah, we can put prettier in. Let that work. Skip the next.

Lucie: And the next -- yep. Okay. None.

Jason: None. No tests today. We're flying.

Lucie: So, we're going to be like a static generated website. We can use RSSG. We don't want to put static. Because if we have time.

Jason: Yes.

Lucie: You can leave default here -- or nothing, I mean, sorry.

Jason: Okay.

Lucie: And none.

Jason: Okay.

Lucie: We're almost done.

Jason: Gonna use Git. Okay. There we go. It's happening. What's up Tony with the sub? Thank you. Yeah. We're just partying! All right.

Lucie: And p over in the chat, sorry, not today.

Jason: I'll tell you what, y'all, tell me who you want to learn Tailwind from and I'll reach out see if we can make that happen.

Lucie: Okay. And we're starting the next project. So, should be rather quick. And once we're done with that, we're going to bootstrap inside of it. This is quite a similar process.

Jason: Okay. So, we're doing this. Give ourselves -- let's give ourselves a little bit of music while we do it. Oh, no! Should have done it earlier because now it's done.

Lucie: Almost.

Jason: Okay. All right.

Lucie: That is a nice --

Jason: All right. Let's get in here. Get into our new project and I'm going to open.

Lucie: Yeah. Great. So, now, well, we have our NUXT project. So, it's a little bit similar to a Nuxt.js project. It's a different directory. There are just a few of them. So, the pages and index, and then there's your pages.

Jason: Okay. I'm just going to start this so we can see it.

Lucie: Yep. It's the script.

Jason: So, npm run Dev.

Lucie: Yep.

Jason: And it's running at localhost: 3000. So, that contrast is not great. Oh, so, we would need to add code. That's right, chat. It's time for code. Okay. We have a default NUXT project here. Nothing special added. It's just right out of the box. Right out of the create NUXT app.

Lucie: Exactly. So, now what we need to do is to bootstrap. So, you can kill NUXT.

Jason: Okay.

Lucie: And now we'll run Prismic SM. One S, excuse me. It stands for slice machine.

Jason: Okay.

Lucie: And then hyphen, hyphen setup. Yep.

Jason: Okay.

Lucie: So, we run this one. So, what this does is it bootstraps Slice Machine inside your projects and creates a Prismic story for you. So, it will prompt you for a name after it's done.

Jason: Okay.

Lucie: This one is quicker than NUXT. So, it should be fine.

Jason: And so, this is gonna do -- so, I'm logged into Prismic now. I've created an account. So, it's going set up not just the files locally. But it's also going to connect to Prismic to set up like the hosted part of Prismic?

Lucie: Exactly.

Jason: Oh, that's cool.

Lucie: It will create the part on the Prismic side. It will set up Prismic as inside your NUXT project. And get Slice Machine ready to work on it.

Jason: That's super-cool. Oh, yeah. And we can even tell, here, it installed NUXT. So, it's smart. It can tell what kind of project we're in and it's just making decisions for us. That's really handy.

Lucie: Exactly. Now it prompts you for a repository name it's your endpoint for the content within Prismic. We just need to put a unique domain and create one.

Jason: Okay. We'll call it LWJ slice machine.

Lucie: It should be unique.

Jason: Wow. That happened really fast.

Lucie: Right now it's getting started. But I'm here for this time, so, we will go back. Okay. We are almost done with this part. We need to do a few last things. So, now Slice Machine is like a framework, like you work with components that are ready for CMS. And Slice Machine relies on storybook. We need to ask storybook to our project. Storybook is difficult to configure. We have a command for that with Prismic that does it best to configure the projects so we can run Prismic sm thread. And then it's hyphen, hyphen add-storybook.

Jason: Wow. Okay. Like this?

Lucie: Yep. You can run it. And quite similarly to the sm setup command, this command checks your framework. And we tried to set up storybook as far as it can go for your framework. And get storybook up and running in your project. Yeah. You can run it at this time because storybook is quite busy.

Jason: Turn that down just a bit. Just a bit, y'all. Okay. So, this -- this is really cool. So, what we're doing here is a lot of things that, you know, in my experience when I was working at IBM, for example, you know, a lot of what we did was trying to plug together these tolls. We would get the project set up, but then we had to configure testing. And then we had to configure linting. And then we had to configure storybook. And then get it set up with the CMS. What I'm seeing here is that we started with something that's not a Prismic project. Create NUXT app and you've done all of the connective pieces with the CLI where now I don't have to figure out how to connect storybook. You're just kind of doing that for me.

Lucie: Yep. So, yeah. These are as expected. Because there's this missing that we need to create later on.

Jason: Okay.

Lucie: This is expected. It's a bit misleading. You can kill storybook because right now there's a storybook server running.

Jason: Okay.

Lucie: Great. We close that, and two last things that are quite quick. So, if you can -- well, we need like to switch to the alpha version to get the latest and greatest we are working on. Sorry. So, we would run like npm install. And then hyphen, hyphen Dev or hyphen D -- yeah. And then it's slice-machine-UI.

Jason: Oh, yeah.

Lucie: Just as a dependency.

Jason: Say that one more time.

Lucie: It's slice -- s-l-i-c-e -- hyphen machine, hyphen UIs. And then pin the version. So add 0.0.44-alpha.6. This is what we're doing to get just the latest version with the latest features to showcase some cool stuff.

Jason: Got it.

Lucie: Just to override the default stabilization.

Jason: Missing slices, needs more pizza. That's how I feel right now. I'm also missing slices. This -- so, okay. So, what we're doing right now is so Slice Machine UI --

Lucie: Yep.

Jason: This is -- how does this relate to the rest of what we're doing?

Lucie: Okay. So, Slice Machine UI, this will help us to shape the component for the way we want them to be shaped in terms of content.

Jason: Okay.

Lucie: It's will launch in a few. And helps saw this image, type the description. It will get the components ready to be shipped to Prismic.

Jason: Okay. Got it.

Lucie: Okay. The last thing we need to do, if we can just add to the code part. Yeah. Sorry. We need to remove one thing in the next config file.

Jason: Okay.

Lucie: And it will be just like, I think it's a line 21st or something. We need to remove the CSS. Yep. Twenty-nine -- line 29.

Jason: Just get rid of this.

Lucie: Exactly. And I'm sorry -- basically, when you install with the CSS command, it should be a default library and a default CSS file. Because we will come to this later on and overriding, we just remove it. Don't get bothered with it.

Jason: Got it. Cool.

Lucie: Okay. We're done with our setup.

Jason: We're done!

Lucie: Once we did that, we can start coding our component. So, yeah. Like we're really making progress. As you might have guessed, we want components ready for CSS slices. Slices are website sections that you saw earlier. Like the subscribe to newsletter. We will work with them to work with Slice Machine. And I want to make -- the idea to be like, I don't know if you can open a browser quickly. I would show you a website that -- so, you can add to myflipband -- one word -- yep. Dot com. It's safe for world content. So, this is a really funny startup that was started. And this is a band that you get on your wrist.

Jason: Oh, yeah. Actually, this is a really cool idea.

Lucie: Yeah, I find it's so cool. Okay. Every day you want to work out for 15 minutes. And once you achieve this goal, you can clip it and you get the check mark on your wrist.

Jason: This is a good idea.

Lucie: So, what I was thinking about, as a few section websites. You can see the section is quite simple to build. And also, the newsletter section at the end. We can do the embed with the video. Add to the chat -- yeah, we can do the sections that we can also build.

Jason: Yeah.

Lucie: First, we can -- yep.

Jason: Maybe what we can do. So, are you thinking just to repeat this back and make sure I understand it. We'll just hand code a hero section and maybe another section and then we're going to set those up to work with Slice Machine?

Lucie: Exactly.

Jason: Okay. So, let's do -- a hero is kind of a standard, right? You're going to do a hero for pretty much everything. And do tutorials. It looks like I can copy and paste it. It will be quick.

Lucie: We can do that.

Jason: All right. So, chat, if there's anything you want to see that we're not doing, just let us know. So, what I'm going to do is I'm going to set up a section and --

Lucie: You're going -- yeah. You're going a little fast. Because you're already working inside the component. And we -- sorry to interrupt.

Jason: Oh, no, sorry. Maybe I misunderstood. I thought this was what we wanted to do.

Lucie: No, I wasn't like -- I can with Slice Machine and Prisma, you are working. What we want to do is create our first section.

Jason: Oh, okay. I was definitely jumping the gun here.

Lucie: Sorry. Maybe I wasn't clear enough. So, what we can do is add again and we can return Prismic sm command.

Jason: Okay.

Lucie: And this time it's hyphen, hyphen, create-slice.

Jason: It's going to do it all for us. Look at me. Doing things the hard way. Okay. So, we're going to put it in slices.

Lucie: Yep. You can build library of slices. You have a default slice library. And we need to give it a name so it can be simple, whatever you want, just some kind of PascalCased.

Jason: Maybe do something like this.

Lucie: Yep. That works.

Jason: Okay.

Lucie: Boom! And we just created our slice.

Jason: What?

Lucie: Your inside slice has an error and we have multiple in it. Maybe I can explain it.

Jason: Okay.

Lucie: Okay.

Jason: All right.

Lucie: So, we have different in it. Go from top to bottom. We have the index, this is like the storybook file that is meant to show you slices and slice storybook. So, we can work with the storybook by developing your website section. So, it's just like --

Jason: Very cool. Okay. Okay.

Lucie: Next one is our index.vue component. This is our section. And it has contents with some default content and we can work with this. So, just like pass --

Jason: Yeah. And then we've got our styles down here. These are going to be scoped to the component. This is one of the things that I love most about Vue is this single file component setup.

Lucie: Great. And then we have mocks.JSON. This is an interesting one. As a developer, I don't know if some of you in the chat are doing things with this. When you start reading, there's a lot of back and forth going on to CMSs, and working with the CMSs, and then you put them in the code and start showing things inside your pages. That's things that we want to add with Slice Machine. We are generating content for your slices so you don't have to go back and forth with the CMS.

Jason: Oh! That's really nice.

Lucie: Yeah. That is. And finally the last one is the model of the component that is ready to be shipped with Prismic. This one we don't need to peek at it too much. It's just kind of content model information for Prismic to be able to generate the UI for your content writing.

Jason: And this is really interesting too. Because what -- what this is showing me is that I'm not going to Prismic and saying, Prismic, you know, let me click these buttons to define like my tables and stuff. I, as the developer, I'm writing the description that Prismic will use to build the forms that the content editors edit in. And that schema is here.

Lucie: Yeah.

Jason: So, if I want to change something in the Prismic editing experience, I'm actually going to be editing this file.

Lucie: No.

Jason: No. [ Laughter ]

Lucie: Sorry. Let's -- you kind of did this file. But it's not with JSON and then to push it to see if it's working. So, we have some kind of editor to that. And that's our next step. So, we want to --

Jason: Okay.

Lucie: Add to the CLI for launching another command to have some other magic. So, this time, we are gonna launch Slice Machine UI that we added earlier on to our alpha version. So, command this Prismic sm--develop.

Jason: Like this?

Lucie: Yep. This will launch the Slice Machine UI in the Node server.

Jason: Okay.

Lucie: Yeah. But just like while we are running some migration things, you can skip it. Or, yes, it won't change anything for us.

Jason: Okay.

Lucie: Great.

Jason: Thank you for the sub, Luke.

Lucie: So, this is launching a server. Now it's running on 9999.

Jason: Okay. Let's go take a look. I think it's just thinking. My network is sending a lot around.

Lucie: I think it should start. We are in the UIs that will shape the content model. And we have the sections that we created together.

Jason: Yeah.

Lucie: And there are the contents like we will get to in a few minute little. And I think we will have some ah-ha moments like this is the workflow. So, right now you're on it. Which is great. You have a UI that's familiar to what you're using. So, the UI to input what you want to get dynamic data from. So, there's the title and the descriptions that we are looking from our component. So, we can --

Jason: We have a title. We can keep that. A description. And then we've got a probably button text and a button link.

Lucie: Exactly.

Jason: And then an image.

Lucie: Yep.

Jason: Okay.

Lucie: So, if you want to, we can already do the content right now adding the few buttons that we need to add. So, yeah. You night need to -- scroll a bit on this picture. We need like -- okay. Yeah. So, what -- what are you looking for right now? We need to create the button, right?

Jason: Yeah. This one, right?

Lucie: Yeah. That's for the button. And I prefer to add the API for it. So, button, or -- yeah.

Jason: Okay. And then if I --

Lucie: Yep.

Jason: Do a link.

Lucie: Yep. Exactly. This works.

Jason: Okay.

Lucie: You can add a button in here.

Jason: Okay. Got our button link. Oh. Are these supposed to be like -- how should I think about it?

Lucie: You're doing it rights. What's interesting is the API and that you will be -- well, what I mean by API is like the key in the object that we get from the API that will have the content for each button link. So, by default, when you don't have a -- it puts the API. And you can get it --

Jason: Okay.

Lucie: You can put a user friendly button like button link.

Jason: Got it. Did I do it?

Lucie: Oh, good. Ah, this is weird. No, it should be -- okay.

**Jason:**it's okay. We don't need that.

Lucie: We're a developer. We can deal with that. And, yeah, that's an image. So, this one is pretty straightforward.

Jason: Okay.

Lucie: And okay. And well, we must be done with the content. We have the titles and the description. So, the button and the image. And then we can save it because as you can see on the side bar, save to the system. We won't do this yet.

Jason: Okay.

Lucie: Because before that, we need another terminal to run storybook inside it.

Jason: Okay.

Lucie: Don't give the Slice Machine UI. And we can -- yep.

Jason: And then I'm gonna npm run Storybook?

Lucie: Exactly.

Jason: Okay.

Lucie: Run storybook. And one of the things that we did earlier on was added storybook to the Prismic CLI. And Prismic CLI did its best for the project. The great thing with Nuxt.js, they are doing the storybook that takes it to research the web config. And we don't have to deal with Webpack which can be long and troublesome to get through. And here we go. So, we have storybook. And I think you might have guessed the reason what we are seeing here.

Jason: Yeah.

Lucie: This is the default error sections that we created for the CLI. Now what you can do is you can get back to the Prismic -- no, excuse me, to the Slice Machine UI. And now save model to filesystem. So, it -- yeah. Okay.

Jason: There we go.

Lucie: Yeah. And as you can see, we said the model and it took a snapshot of our component from storybook for us to have it inside it.

Jason: Look at that this, y'all.

Lucie: Exactly.

Jason: Okay. That's super cool. And so, I don't, then, have to learn what all of these different config files are.

Lucie: Yep.

Jason: I just get to go and edit it locally. Not had -- I don't have to go log into Prismic or anything. I'm working on my local machine with storybook. Clicking some buttons to configure it and then it saves all of the code so we can put it into source control.

Lucie: Exactly.

Jason: That's slick.

Lucie: Yeah. Excuse me. Go ahead.

Jason: No, I'm just -- just gushing. No, go ahead. So, now that we have a model --

Lucie: Yep. We have a model. And the interesting thing, because welfare the config, it also generated NUXT for it. They are already provided working in the server context.

Jason: Whoa!

Lucie: Like that's the thing. You don't have to it deal with the mock file. It gets generated every time.

Jason: Oh, my god. That's so handy.

Lucie: Yeah. If you want to get this first, you can even like -- we just started with it. But we are giving the user the way to fine tune the way they are looking. You can say, I want to have the front image, and I want a paragraph. You can -- we are giving stories to the user to fine-tune the way the mocks are looking. So, you can have a better mock file when you're working as a developer.

Jason: That's -- okay. That's super Cool. And is that a thing that I would do in my config? I would do it in the Prismic UI, say the mock for this should be four paragraphs of text?

Lucie: Exactly. If you want to, we can add it right now. Nope. So, yeah, if you get -- yeah, we can pick like this one. You can add -- two tabs over. Well, excuse me. I'm going super-fast. The first tab is like the fit config. What you want this to be about, able to do for the editor. And the second tab is the mock config. So, this one we just introduced it and it's still a message. But it will be fine-tuning the way they are engineering while developing.

Jason: Yeah. Okay.

Lucie: One simple program.

Jason: That's really -- this is nice. We can. Okay. I get it. This is very cool. This is like extremely handy too.

Lucie: Yep.

Jason: And then if I go into this one.

Lucie: As our input of an image or you can pull image from --

Jason: We clearly wanted some -- we wanted some -- what happened?

Lucie: Yeah. I think you can close -- you kind of like -- yeah. Now it should be good.

Jason: Okay.

Lucie: Or perhaps it's still not too beta.

Jason: That's okay. We'll let is sit. So, this is amazing. So, then once we have that, now I have storybook. And so, this is where we'll develop. Right? Like --

Lucie: Exactly.

Jason: Work in here. So, if I take this over, before I jump the gun again, is now the time to code?

Lucie: Exactly.

Jason: Okay.

Lucie: Yeah, this is time to code and get dirty now.

Jason: Okay. So, then this is not the one that we want. This is not the one that we want. We want this index.vue here.

Lucie: Exactly.

Jason: All right.

Lucie: So, inside --

Jason: Code.

Lucie: Sorry, I'm seeing the GIF that's -- that's cool. So, yeah, we have a simple Vue component. I think you can get rid of the file tree and set up space.

Jason: Yes. Let's get rid of the side bar here. We have our side bar. Let me wrap this so everybody can see the code.

Lucie: And then we have the field. And now you are telling me that you have a component and you are afraid to screw up and you have the syntax. Again, Slice Machine can help you here and if we want to, you can type back quickly to Slice Machine UI. To the local host. And -- yep. And you will see that there are show code snippets as needed.

Jason: Oh!

Lucie: And now it must be bigger to see everything.

Jason: Oh!

Lucie: It's showing shortcuts and it's ready to be used. The data with the red key. We can hit copy and it will get it for you.

Jason: Got it. Okay. So, if we're going to set up a hero section. We've got our like -- our like text area.

Lucie: Yeah.

Jason: So, there's like the text. And inside of that, we're gonna have our H1. Which will have our title in it.

Lucie: Yep. Exactly.

Jason: Okay. Then we're gonna have a -- probably I'm going to assume a div because this is a richtext field. I soup it's not just plain text that we could wrap with the paragraph. So, I'm going to put a div around it. And then we're going to create our button. Which I'm just going to stick right in here. So, our button, the text will be what I copied. The slice primary button.

Lucie: You want to repeat inside the link perhaps.

Jason: Oh, yeah. You're absolutely right. Not a button like that. We want to link. And then we have a class of button.

Lucie: Yeah. That's working. And, again, because you're going to the link, we can, I think, put the Prismic link component which while it's like a regular component except that it's having the structure that is coming from Prismic.

Jason: Fascinating. Okay. I can just skip this all together. We'll get rid that have.

Lucie: So, this is great for me. I cannot reuse in React. I don't have to remember the exact syntax of it.

Jason: Okay. This then now that we've got in Prismic link, I can add a class like normal. I can do a button.

Lucie: Exactly.

Jason: I'm going to save this.

Lucie: I think you need to close the text. Yep. You open the text back online three.

Jason: I sure did. Oh, that's right. Because we need to also have the image.

Lucie: Yeah.

Jason: And so, then we need the -- class image and inside here.

Lucie: And here again, we can pull the image from the snippet.

Jason: Just done for us. Prismic image. Beautiful. Wow. That is --

Lucie: I know I think if we save this, we should see everything.

Jason: Wow!

Lucie: Perhaps you can close the little contour thing like the -- yep.

Jason: I don't know how to do this one.

Lucie: At the right. I'm pointing at my screen. It's another thing. At the middle of the screen on the right. Top right. Nope. I don't -- yeah, well, this works through React.

Jason: Ope, that's the wrong thing. Who wants to watch me push all the buttons?

Lucie: We can -- the first screen was great, I think. Like the thing that we pulled -- yep.

Jason: Here?

Lucie: This is -- we can focus on our component.

Jason: Okay.

Lucie: Okay. So, we don't have a link. Oh, yeah, now we have a link. It's just --

Jason: Yes. Here's the link here. So, I'm going to then -- let's style things up a little bit.

Lucie: Yep.

Jason: So, we'll come down here and we've got -- we called the section hero.

Lucie: So, you know I think it's -- yeah. It's this -- we can address this.

Jason: We'll make it display: Flex. Let's see how fast we can style up a hero section. We'll go to display: Flex. A gap of probably 2rem. And then we have our text.

Lucie: Yep.

Jason: And we have our image. And I'm gonna get rid of the rest of these. Because I don't want them. These we can make -- let's go a width of like --

Lucie: Oh, no, I don't --

Jason: We'll go 60%. That seems fine. And then this one. We can go maybe even like auto. And then we'll do an image img of -- width 100%. Height 100% and we'll do an object-fit: Cover.

Lucie: Great.

Jason: Okay? I'm happy with that.

Lucie: That looks --

Jason: Closer --

Lucie: Going on.

Jason: What if we do like a contain instead? That's a little bit better.

Lucie: Great.

Jason: Cool. So, then we've got that. Why didn't this go left, though? Oh, because I wrote center.

Lucie: Yep and there's another --

Jason: Okay. Go ahead?

Lucie: It was like someone from CSS from the top. Yep, right here.

Jason: Okay.

Lucie: So --

Jason: Good, good with, good. Let's make our button look like a button. So, I'm going to do a button and give it a background of let's see, our color is 111. What's our foreground color here? We'll just invert it. We'll grab this one. Let's go with a font weight of bold. A padding of, I don't know, 0.5rem and a little extra on the sides. Border none and a border-radius of 0.25. How is that going to look? Kind of close. Let's maybe give it a display block and a margin top of 1rem.

Lucie: Oh, that was fast. Inline block, perhaps.

Jason: Yes. That's probably the right call. Let's go inline block.

Lucie: Yes. I'm seeing the underline.

Jason: Cool. Okay. It's not perfect. We need to do stuff to make this more accessible, like focus states and stuff like that. But for the purposes of showing what we're trying to here, I'm going to give that a good enough for now. Oh, why is this not doing what -- I think I want image to be... let's do the 20% minus 2rem so it actually fits.

Lucie: It's going to be very small.

Jason: Not quite right. How about 40%? That's better. And then let's make this text -- we'll give it the 60. Why are you like in?

Lucie: Because I think it wants to take the remaining space. I'm not sure.

Jason: Yeah. Now I'm confused by what it's doing. You know what? I'm happy with that. We're going to ship that. This is our hero segment. We have it set. Looks good. I'm happy.

Lucie: Yeah. If you're happy with it, with that one. We can move on to the second one that you are looking for.

Jason: Yes, okay.

Lucie: Get the --

Jason: Let's see if we can do this. This will be kind of interesting because this one's going to have a repeating block. I saw that there was an option for that. So, okay. All right, so, here's what I'm -- I'm gonna talk through what I think and then you can tell me how we should do this.

Lucie: Great.

Jason: So, my thought is that to make one of these, we need a section -- or a slice that will be this. Here. And we'll have a photo, a headline and a description. And then we need to be able to repeat that three times so that we can have three entries in our testimonials block.

Lucie: Exactly.

Jason: Okay. Let's see. Let's see. If I want to do that... do I just start a new terminal or do I need to shut things down?

Lucie: I would open a new terminal.

Jason: Okay.

Lucie: It's a little bit -- right now. We are looking for ways to fix it, perhaps launching storybook. But the free terminal is way too good to be comfortable with it.

Jason: Add slice?

Lucie: Create slice.

Jason: Create slice. Okay. I'm creating -- what?

Lucie: Ah.

Jason: What do you mean Prismic not found? I disagree. Am I in a different version of Node? What's going on?

Lucie: It's only or the first terminal. I'm not sure what's going on here.

Jason: I think it may be --

Lucie: Is this the same profile?

Jason: I don't know. Let's find out. I don't know what's going on. Let's -- we'll just stop and start it. Oh. I'm in 1415 over here. Let's nvm use 14.

Lucie: Ah.

Jason: I don't know. I don't know what's going on. I probably need to restart my terminal or something. But for now, we can Prismic sm create-slice.

Lucie: Yep.

Jason: Put it in slices.

Lucie: And this time I don't know if testimonial -- yep.

Jason: I spelled it wrong. No! What have I done?

Lucie: Okay.

Jason: What can be done?

Lucie: You have to go with it. That's like something on the backlog to implement is a way to rename slices.

Jason: Okay.

Lucie: But we are okay with it.

Jason: We'll live with my choices.

Lucie: You can launch again with Slice Machine UI with Prismic. Yep.

Jason: Wait. Where was it? Here. Develop.

Lucie: Yeah, well, okay. We see like if that's working as expected.

Jason: Okay. Now that we've added a second one, now that we've gone back to the slices library. And we can see it's here and named and spelled wrong. Oh.

Lucie: That's okay.

Jason: And this one is close. It's got a title and description, so, I just need to add that image, right?

Lucie: Yeah. We need to add like a repeat of our set of testimonials.

Jason: Oh, you're right.

Lucie: And this is like -- like as we can see on the UI, two different type where you can add. There's a non-repeatable zone. It's single, unique find, slice. And there's a repeatable zone that's content that we would be able to repeat within its UI.

Jason: Do this?

Lucie: And right now you cannot drag it through the section. That's --

Jason: Okay. That's fine. What we'll do is we'll say. Can I use the same field names? If I call it image is that okay?

Lucie: The names only need to be unique within their unique zones.

Jason: Got it. And we'll give regular text. We'll just do a heading. And rich text for testimonial. Okay. And then do I just delete these?

Lucie: Yep.

Jason: Okay.

Lucie: It's not -- it's not deleting.

Jason: Doesn't seem to want to let me do that. That's okay. We can just ignore these.

Lucie: Yeah, there's a control first. So, we can save this one to our system now.

Jason: Oh. It deleted it for us, apparently. Oh.

Lucie: I'm not sure what's going on here.

Jason: It's okay. It's okay.

Lucie: Yep. Okay. So, we have everything running on the terminal. That's fine. Now we can code, I think.

Jason: Okay. So, if I go back out to here, close section hero. I can get into the testimonials here and I can open up this one. Close this back up. And now we have our code snippets. That's so nice. And so, oh, so, this is interesting. So, now for the repeatable sections, I'm putting it inside of a repeater.

Lucie: Yep.

Jason: Okay. I can handle that. That's a thing that makes sense to my brain. So, if I -- let's see. If I call this testimonials, oh, my god. Am I ever gonna spell this word right?

Lucie: Yeah!

Jason: Then I should theoretically be able to do something, like let's take this. And I'm going to make this wider so we can actually read it.

Lucie: Formatting, but it's fine.

Jason: I want to take this out and put it right in here. Is that okay?

Lucie: That's not okay with Vue.

Jason: That's not okay.

Lucie: You're not able to export multiple nodes from a single component.

Jason: Gotcha. That makes sense.

Lucie: That's not a thing in Vue. Without Vue you can do that. But, no.

Jason: Okay. So, we've got a div. We're gonna loop over the slice items. And then for each item we're going to rend a thing. Copy this one out.

Lucie: It will literally get here because it's meant --

Jason: I read the wrong thing.

Lucie: No, you didn't. It just put everything inside the snippet for you.

Jason: Two. And then this last one is the Prismic rich text. Okay. So, I'll drop this down here. And we'll chop out the piece we need.

Lucie: Just in the terminal.

Jason: Okay. Then I can put that in here.

Lucie: I think we're good.

Jason: I think we're good. I'm going to save that. And let's go over to storybook.

Lucie: Yep. And you should see -- yep.

Jason: Testimonials, default slice. I will go full screen. And now we've got --

Lucie: I don't know how many we end up.

Jason: Three.

Lucie: Generally I like to run them a amount of times.

Jason: Yeah.

Lucie: But I think we are fine with five.

Jason: Okay.

Lucie: Or we can try to get more or less by saving again. But I don't think that's -- yeah, that's not something you can -- we can save right now.

Jason: Okay. This is -- so, yeah. Let's save one of these images. We'll save. Save to the filesystem. And now when we reload here, it gives us faces. Which isn't good, that's what we wanted.

Lucie: Right now it gives the same sample for everyone. So, this is like, again. But, yeah, this uses an idea of like having a face as an image to work with.

Jason: Yeah. No, that's perfect. So, then down here in our section, testimonials -- no, monials, got it. Then we can do kind of the same thing. So, we will display. How do we want to do this one? Maybe this one we will do as grid. Grid is fun. So, grid-template-columns and we will make it a repeat. Please stop helping. There we go. Three. And I don't know. Let's call it 30%. And then we can do a gap of -- we'll give it 2rem again. And let's make the background on this one white. Cool. Yeah. All right.

Lucie: Great.

Jason: So, then those all fit. Now we need to make our images fit. And so, for our images, let's give it a -- let's actually give it a wrapper. So, that we can more easily deal with that. Because what I want to do actually, if we can --

Lucie: The ranges thing?

Jason: A yeah, I would love to make that work. So, let's go image-wrap is gonna be like width -- what was it? It was like -- I don't know. We'll call it a hundred pix else, a height of a hundred pix else. Give it a border radius of 50% so it's circular. And then I want to do I think an overflow hidden here. And then for the image, we can do width 100%. Height 100%. And object-fit: Cover, I think... are you doing anything? But I -- did I screw this up? Testimonials. Image wrap.

Lucie: This looks correct. Press update. Yeah.

Jason: There it is. Look at that. Now we have our testimonials, showing up properly. The images are cropped. And then we can just make this do the thing that we want it to do. So, let's go with a margin of maybe zero auto 1?

Lucie: Yes.

Jason: Okay.

Lucie: Yay!

Jason: That's good enough, right? That's good enough for government work.

Lucie: Yeah. We can go with that.

Jason: All right. Let's call this good. We've got ourselves a three testimonial setup. And that is -- that puts us in good shape here. Let's -- let's roll. What do we do next?

Lucie: Yeah. Okay. Now that we're done with building our website sections. And next we want to ship them to our content creator for them to be able to play with them. So, we can one last time add to the UI on the -- okay.

Jason: Add to -- oh, wait. This button. This one?

Lucie: Yep. We can hit push Slice to Prismic.

Jason: Okay.

Lucie: This would push slice to Prismic.io. That's the first time that we were interacting with Prismic.io directly.

Jason: It is. I'm laughing because I saw a bunch of boops happening and I knew that Cassidy was hear before I looked at the chat.

Lucie: Okay. So -- we pushed our first slice. This is the slice that we to push the second one. The second arrow.

Jason: Okay.

Lucie: And I think we can retake a screenshot of it quickly. If you hover over the image.

Jason: Hover the image.

Lucie: We are getting booped right now. We can take a screenshot of it.

Jason: Okay.

Lucie: Okay.

Jason: Oh, cool. Okay. I get it. I get it.

Lucie: And took a screenshot from storybook for content creator, okay, the section looks like that. That's what I want to put on the website.

Jason: All right, chat. Chill it out. We need to learn stuff here. All right. Push slice to Prismic. Now we just got to -- now we wait. Okay.

Lucie: I think you clicked push to Prismic?

Jason: I did. I think. And now --

Lucie: Yeah. We're done with coding. Like no -- I think that's the first time that we can add to Prismic.io.

Jason: All right, chat. We got to chill it so we can see what's going on. We're running a little bit short on time. Thank you as always for the boops. But so, we've got -- so, we've got our two sections here. We've pushed them to Prismic. And they said new before. Be now they say modified. Does that -- what does modified mean in this context?

Lucie: Well, I think modified -- I'm thinking. I have been working on Prismic. Of course I know what modified is. But modifying is meant to say that the slice that we're modifying is not in sync with Prismic. But right now we're just pushing to Prismic. That shouldn't show that here. That's all right. And I think we can just add to Prismic here.

Jason: Okay. Cool.

Lucie: So, yeah.

Jason: So, I think -- I clicked the button, so, I think it's there.

Lucie: We will see that in a few. Yeah. Right now we are running Slice Machine UI. This is the local UI. But now we can add to Prismic IO website. The -- with the website and the first time we will interact with it in the browser, sorry.

Jason: What did we call it? LWJ-slice-machine.prismic.io. Is that right?

Lucie: Yep. It will prompt you for a login, I think.

Jason: Okay.

Lucie: Okay. You can use your --

Jason: Oh, god. Really hope that password is gonna be here. Yes. There it is. Okay. Thank goodness for password managers. Yes. Okay. So, I'm gonna save that. Please don't lose it.

Lucie: Okay.

Jason: Main language, do English. Once upon a time.

Lucie: Welcome to Prismic. This is the UI that you will see in part of it. And right now we are in the document. So, this is smart of the CMS where you're going to see everything -- like all the documents that you are -- all the content that you are managing. Like right now we need to add to the second tab. So, it's the content moderating part of Prismic. On the side. Yes. Custom type.

Jason: Okay.

Lucie: So, this is what we use to deal with as a developer when we are inputting fields and content and things like that. With Slice Machine, we reduced this to the minimum. By default, it ships with a single page type. We are going to edit this one. So, you can ed fit. And here you will find the UIs that you are probably familiar with. It's just kind of like some advanced UI where you can work with it. Right now you are looking at it. And that's the zone that we want to deal with. So, right now there's a bunch of default spaces within it. I think we can develop them all like using the little bin icon. We can just be using our slices.

Jason: Byeeee!

Lucie: And with them --

Jason: There we go. Now we're looking at nothing default. We're all custom today.

Lucie: Yep. And now you can click add slices. Add a slice.

Jason: Adding.

Lucie: And the first step is the default slices, we did it, and there's the shared slice tab.

Jason: Shared slices. Oh!

Lucie: So, you can select the two of them.

Jason: Select them both, excellent.

Lucie: And what we are seeing right now is, okay, in every document of type pages, our content creator will be able to use our section arrow and testimonial components. That's everything we need to do in the CSS. We can hit save.

Jason: Okay.

Lucie: We don't need to deal with this one. And now if we get back to the home page of our repository.

Jason: Okay.

Lucie: No, excuse me, the home page of Prismic.

Jason: Sorry, got you.

Lucie: My bad. And we can get back to the command tab. Yeah, this --

Jason: Whoops. I went too far.

Lucie: No, this is the dashboard where you have every website. And then we can hit the button create a new page.

Jason: Cool. Okay. All right. If I want to build our home page, I would expect, I click this. And I go, isn't this neat? And then I can say, I built this using Prismic Slice Machine. And then we can say, like, check out -- wow. My spelling today is brutal. Slice Machine. And then let's put in a link to Slice Machine. For my -- here.

Lucie: Yep. Oh. Yep.

Jason: Oh, this kind of link, link to the web. There we go. Excellent. All right.

Lucie: And an image.

Jason: Image. So, I'm gonna do just a screenshot of the page. How about that?

Lucie: That works. No --

Jason: I want to stay on the page.

Lucie: You can drag and drop here.

Jason: This is open, I can drag and drop here. Please don't judge me to clean up screenshots.

Lucie: You should see mine, it's a mess. Add the slice.

Jason: And now I want to add another one, right? I hit my button. Beautiful.

Lucie: We are in the body of like a marketing person content editor and we are filling our website and defining the page with the sections that our developers provided to us.

Jason: Yeah. I'm going to pull some random folks. Let's get Cassidy's image -- wait, no. There it is. love this. This is like one of my favorite features.

Lucie: I would be using it now.

Jason: Okay. So, then I can put Cassidy in here. And we'll use the drag and drop. Okay.

Lucie: There you go.

Jason: And then we're gonna add another one. And let's see. Who else is coming in here? I see -- I see Trost. Let's --

Lucie: Yeah.

Jason: Is it TrostCodesi?

Lucie: No, it's a-trost.

Jason: There you are.

Lucie: Here we go.

Jason: That worked. Did work. All right. Let's get Alex in here. I love this.

Lucie: Yeah. So, like this is again like the editorial in Prismic using the components we put together with JSON.

Jason: Okay. And then we're going to do one more. Who else is -- who else is out here? Ximena. Let's do -- let's see if this works. Oh, no. I don't know your GitHub. Maybe not. Oh, we got it. Ximenavf92. What's up? So, let's do this. And then we'll get Ximena added. And we'll say, let's... okay. So, how about this? We've got three things set here. These are all good. Then what?

Lucie: Okay. Last thing we can do is like if you scroll up, there's a single like UI difference. This is a unique identifier for your document.

Jason: Oh, okay.

Lucie: We can just say home page. Home or home page.

Jason: Yeah, let's do home.

Lucie: That's unique in your Prismic so you can identify this document. And now we can save.

Jason: Okay.

Lucie: Oh, that's --

Jason: This value is already being used. That's okay.

Lucie: I think it's okay. You can go to the page now -- or, yeah.

Jason: Now we are publishing. I am publishing. It is published. It is done. Okay.

Lucie: Yeah.

Jason: All right. So, then if I want to use this -- so, we've got -- and this is what I think is really cool. We were able to work on these without actually having to publish anything. So, we were able to see that they worked. But this is in storybook. What we haven't actually done yet is done anything with this setup.

Lucie: And we can --

Jason: Okay.

Lucie: We can do that pretty quickly.

Jason: I'm ready. Let's do it.

Lucie: Okay. So, add to your index JS from your pages directory.

Jason: Pages, index view.

Lucie: You can remove everything from the template.

Jason: Okay. I have removed pretty much everything.

Lucie: What you can remove the title, I think.

Jason: Okay.

Lucie: That's up to you.

Jason: Let's just make it empty.

Lucie: Yep.

Jason: Okay.

Lucie: Okay. So, now we need to -- well, that's -- also like Slice Machine is helping you again because you don't need to know much about NUXT to get it working. So, what you're going to use is the slice components. The component from Prismic that's about to render like the spaces that we put it inside the -- inside our -- slices, yes, with a C. Slice-zone. And then we're going to give it a few attributes.

Jason: Okay.

Lucie: The first attribute is the type of the document it wants to fetch. It's type. This one is page. Just type page.

Jason: Okay.

Lucie: The second is a unique identifier. So, we have UID.

Jason: Like that?

Lucie: Just UID.

Jason: Oh, sorry. I'm broken by that Node package. And this was home page.

Lucie: Yep. And you can close it. We can --

Jason: Can it be self-closing like this?

Lucie: Yes. It can be self-closing.

Jason: Okay.

Lucie: And the last thing is in the script tag, import slice zone before the export. And import Slice--

Jason: Why can I not spell today? Jeez. Slice. Zone.

Lucie: Yeah. Vue-slicezone, single word. Yep. You got it.

Jason: Okay.

Lucie: And now inside the export default directive, we need to add the components. Saying these components are using these components. It's an object. And here we just type SliceZone. Yep.

Jason: And that's that, right?

Lucie: And then we're done. We can --

Jason: Okay.

Lucie: You can shut -- you can look against the Slice Machine UI. We can launch NUXT.

Jason: Okay. I think it's just npm run Dev.

Lucie: Yep. If we didn't mess up, we should see our content in the page right now.

Jason: All right. And so, while we're waiting for that to build, I want to talk about a couple things that I see here that are really, really interesting. A big I see with a lot of teams, they're trying to build these experiences. Trying to build the ability to say, we need, you know, like these card components. But the cards have some variations in them. Like, you know, some of them are going to have a title. Some of them aren't. They might have one entry or 15 entries and all of these sorts of things that it's hard to do with a -- a more static design system because you're -- you're basically saying, okay, I'll create 15 variations of this component and choose the one that I want. But then you have to code up the forms to manage, oh, here is the 15 variations of forms to go with the 15 variations of components. Things get really hard to manage because you're updating things in multiple places. What I like about this is that this does a lot of that kind of as part of the development process. As I'm building this and saying, like, this is repeatable. You're switching it over to be a repeatable section. And also configging Prismic so that the author will add multiple sections. It feels really nice to use from a developer standpoint. Because I can see if I needed to make a change to this later, I'm editing a Vue component. And if we need to make data model changes, that's a thing that I can sort of see a path forward to without breaking everything. Right? So, that seems pretty exciting.

Lucie: Yeah. Well, we are really excited about it at Prismic. And I guess the goal with that was to work on the workflow of the repo with the services and to have like a more like decent way for the backend going on CMSs. That's what Slice Machine is. I don't know how much time we have left. If we want to, we can do one last thing.

Jason: We have about 20 minutes. I think we can do one last thing.

Lucie: Okay. What we are going to do is deploy this thing.

Jason: This is a beautiful website, by the way.

Lucie: It's looking really good from the first time we did it.

Jason: I'm going to give it to the chat. The chat is really make ugh up the esthetic of this site. Y'all look great. And I see you planning your class action lawsuit over there. You're right. You're gonna get 50% of nothing. Okay. Okay.

Lucie: Okay.

Jason: So, let's deploy it. I'm ready.

Lucie: Yep. What we need to do is to do a -- add a little flag in the next config so it's ready to be deployed as a website. So, add to next config JS file.

Jason: Okay.

Lucie: And inside we want to just add like a top level key. You can add it at line 4. That's right. It's called generate key. Yeah, it's an object. And inside you give it another key which is fallback. And you set it to true.

Jason: Like that?

Lucie: And this here, what we're going with NUXT is to generate it so that it modified it to redirect every route to something in case it doesn't match a file.

Jason: Gotcha, gotcha. That makes sense. And so, then?

Lucie: Then what we can do is to build the website -- if that's okay, we can build it locally and drag it --

Jason: Yeah, we can drag and drop it or. If you want, I can get this up on GitHub and we can deploy it.

Lucie: Whatever suits you best.

Jason: I'm going to end up eventually doing that anyway. Rather than deploying it twice, why don't we do that now.

Lucie: Okay.

Jason: What I'm going is get init. Perfect. It was already set up. And the get ignore is set up.

Lucie: One last -- just before you commit. Oh, you already --

Jason: I can unsend it.

Lucie: We just need to add to Git. We added storybook, and the versions that generate things that we don't want on the GitHub.

Jason: I see that.

Lucie: We just want to add that.

Jason: NUXT-storybook, my spelling is going so poorly, I'm not going to try to type that out.

Lucie: Yeah. You connect it.

Jason: Now we do that.

Lucie: You can stage everything.

Jason: Get add all, let's check. We have our slices, our Slice Machine. This is okay to put in?

Lucie: Yes. This is meant to be on GitHub.

Jason: And then I'm going to Git commit. Ready for deployment. Okay. Then I'm going to GitHub repo create, learnwithjason/prismic-slice-machine. Make it public. Yes? Perfect. And then let's get push setup stream to origin main.

Lucie: You do that for me.

Jason: I get a lot of practice with this workflow. Then we can use the Netlify. I'm going to use the Netlify, get init.

Lucie: Great.

Jason: Configure a new site. I'm going to put on my team. And we'll call this Prismic-slice-machine.

Lucie: Great.

Jason: Okay. So, that's created. Our build command...

Lucie: npm run generate.

Jason: npm run generate. And the deploy directory.

Lucie: It's dist.

Jason: Dist.

Lucie: Yep.

Jason: There we go. And then I'm going to open the Netlify app and we can watch this build. Or not. Who am I logged in as? Let's log in as me. Okay. So, our site is building.

Lucie: Yep. Do we have already the -- yes, we have it.

Jason: We should. It will be right -- not quite yet. But it will be Prismic-slice-machine --

Lucie: If we have it already, add to Prismic iO, the dashboard. Yep. Exactly. We can get back yet. And you get to settings quickly.

Jason: Okay.

Lucie: There's a card and there's a preview tab. Previews.

Jason: Previews. I see it.

Lucie: Okay. And you're gonna -- yep. Create -- just give it a project shown on Netlify. And I will show you like what this is doing.

Jason: Okay.

Lucie: You can input the URL of the website.

Jason: Prismic-slice-machine.netlify.app.

Lucie: Great. And it's slash preview that you need to enter. So, what we're looking at right now is a preview end point for production websites. We are about to preview content in it. And Prismic has an interesting approach to preview. You don't get the staging with every draft document. You will see on Prismic only what you are working on as a content editor. And you will get the scope so you are only seeing what you're working on.

Jason: Okay.

Lucie: So, let's just check if it got deployed as expected.

Jason: It appears to of deployed as expected. Go out here. We've got ourselves a production site, y'all.

Lucie: And now we can shut it. And then the last thing we need to do is to add to the repository. Excuse me, the Prismic last part. So, where we were at just before.

Jason: Here?

Lucie: You can add to the document tab. The first one on the left. Yes. So, content. And yep. You can edit this document. And perhaps you want to edit the headline with something catchy. Or, I don't know, just something for the Twitch chat. Yeah. This is perfect. So, yeah, just hit save.

Jason: Okay. So, I save.

Lucie: Don't publish.

Jason: But we have not published.

Lucie: And now -- yeah. This is save as a draft. And now you can click the little eye near publish. Yep. Click. And this will open our live website.

Jason: Oh, but it tried to go to the home page.

Lucie: Go to the page --

Jason: Wow!

Lucie: And this is the thing. And like right now if you want to put the last one, there's the pop-up. This will give you the link. And you can throw it in the chat and everyone in the chat will be able to get to this page. There might be -- they might need to remove --

Jason: The home page part.

Lucie: The home page thing. But otherwise, they don't need to do it. But for them to be able to preview the same preview that we're previewing. And working with the co-worker and stakeholder and everything to make a preview content of the website.

Jason: That is really slick that just worked. I'm going to visit this link right now too.

Lucie: Yep.

Jason: Holy crap. Yeah. That is amazing, right?

Lucie: And you're only previewing the contents that you were working on. So, you don't get to see every draft contents. You just get to see what you were working on.

Jason: Yeah. All right. Okay. I'm sold. And so, this is really incredible. Like I love the workflow here. I love that it -- you know, it seems like JavaScript across all of the frameworks has sort of moved to this component-based model. And I love that the thinking here is component-based. That we're treating our change sets as components. We're, you know, if we make an edit, we can preview just the section we're working on, not the whole site. We're able to edit just the component we're working on, not the whole page. We build our pages out of components instead of having these monolithic pages. This is really nice. Like this feels good to work with. And look how much we were able to do. We in less than 90 minutes have been able to go from an empty folder, we started with an empty folder. We created a new NUXT project. We initialized the Prismic CLI, set up a new Prismic account and project. Built a Slice Machine. And set up two different sections if our site. This hero and this testimonial section. We were able to build test those. We have storybook running to look at these in isolation and can send them. And go to Prismic, add content, get this published to the Internet while I was screwing around for a decent amount of time. And now we have live previews of works in progress so that the content team can say, hey, I'm working on something. What do you think of this copy change? That's kind of huge. I don't know that there's another workflow that would let us get this far this fast.

Lucie: I don't know.

Jason: All right, chat, we have 9 minutes. If you have questions about the workflow, you want to ask Lucie something. Oh, no. Do it before I'm drowned. In the meantime, before we lose our screen real estate, let's do some link shoutouts. Make sure you go and follow Lucie on Twitter. And if you cannot had read the screen anymore, oh, you can read the screen, go li_hbr on Twitter. You can find more information about Slice Machine at slicemachine.dev. And more about Prismic at Prismic.io. As always, this show is live captioned, we have when Amanda with us all day doing the captions. Brought to us by White Coat Captioning, thank you for being here. And made possible through sponsors, Netlify, Auth0, Fauna and Hasura, all kicking in to make this show more accessible to more people. Lucie, are there resources you want to check out?

Lucie: They are not resources, but if you like that, we are running a contest within Prismic where you are asked to build a slice with JSON at the end of the month. So, if you search for -- if you get to Prismic.io/blog?

Jason: This one.

Lucie: Yes. We are running a contest based on this workflow. And you --

Jason: Okay. Look at this. I'm trying to make it emerge.

Lucie: Yeah. So, yeah, if you like the workflow, you can join the contest for building your libraries in Vue or ReactJS. And I think it's the 23rd of February that it ends. So, you are just asked to build a simple library like this and to showcase it within a website like we did with Jason.

Jason: Very, very cool. This is super-fun. You can go check out the site that we built here. Make sure you go and take a look. Also, the repo is open sourced if you want to take a look at that. Let's -- oh, what is it? Browse?

Lucie: Yeah.

Jason: Repo view. I know how to do this. I forget how the GitHub tools work. I'm very -- I feel like I know stuff and then it all just exits my brain immediately.

Lucie: Wants to talk about the prizes for this contest. We managed to get some exciting prizes for the contest. We have a desk tool, like a mechanical keyboard. I know you're into this.

Jason: Custom made mechanical keyboard. That's always fun. Here we go. The Jarvis bamboo standing desk. That's what I'm at right now is the Jarvis bamboo standing desk. That's a heck of a prize. Those are compensate. You can get started here. Looks like there's a slice library started for both next and NUXT. This is pretty cool stuff. I'm very impressed. Y'all have done excellent work. Let's see. What else should we do? Lucie, other than your Twitter, where do you want people to check you out?

Lucie: My blog, it's lihbr, it's a link. It's a blog where I'm writing every now and then about tech things. If you're into JS. Right now I'm writing about serverless function and how to prevent abuse and Spam with them. So, this will land soon.

Jason: Yeah. This has been great. I'm thoroughly impressed by this. It's really great work from the Prismic team. I'm still kind of befuddled that we were able to get as far as we did in the 90 minutes that we had. Lucie, thank you so, so much for hanging out today. I really, really appreciate it. Any parting words for the chat before we wrap this thing up?

Lucie: Yeah, thank you, Jason. I had a really nice time with you. It was a lot of fun and interesting things that we went through.

Jason: Absolutely. I'm super-glad that we had this chance. With that, I think we can -- we can call this one a resounding success. Chat, as always, thank you for hanging out. Thank you for playing along. Let's look at the schedule for what's coming up next. We have some really fun stuff coming up on the show and I cannot wait to share it with you. Serverless marketing automation for React. That is going to be interesting whether you are trying to do something on your own like start a newsletter, or if you're working with your company and you want to make ways to make your marketing feel a little less like spray everything at the whole list and hope for the best. This is customization. Get people relevant content and that it doesn't take a huge amount of manual effort. And Joel is fun to talk to. We will have Colby Fayock, talking about Next.js. To build the frontend. Ben Vinegar, error monitoring. It's useful stuff. If you haven't done error monitoring, it's a way to get notified, you can set thresholds so you don't learn about it from Twitter. You learn about it from your tooling.

Lucie: And Sentry is great to use.

Jason: Yeah. They're great. We have Abhi, old co-worker of mine who is going to talk about running state machines on Kubernetes. And a stampede. I'm going to do a little bit of state machine stuff here that I haven't quite put on the calendar yet. We'll get it on there. It will be a good time. Ben's coming back. And we have a few that I haven't announced yet. It's going to be pun fun. We're going to talk about vit. Wes Boss, Jennifer, talking about Angular. So many great things coming on Learn with Jason. Head over to LearnWithJason.dev and add on Google calendar button so you get updated. With that, one more good-bye. Lucie, thank you as always. Thank you so much, chat. What a great time. This is going to be amazing. We are going to go raid. Let's see. Let's go raid Julie's. And we so see you next time.

Lucie: See you!

Jason: Oh, my god. I don't know how to end. All right. We're leaving for real. Bye!

Lucie: Bye!