Nuxt 3 Crash Course - Full Website Tutorial - 2023

hello and welcome to this full course on next and prismic during this course we'll cover a ton of stuff as we call together production ready marketing website you learn how to build this next free we'll bring our content from prismic we'll start our website using tail and CSS and we'll make all our code more reliable by using typescript my name is Lucy I'm on the developer experience team at prismic I'm a next core team member and I'm really excited to dive into this project with you this tutorial assumes you already have a grasp of VJs HTML CSS and JavaScript it's good if you're what familiar is next but don't worry if you're not we'll be covering everything we'll go through so we'll be up to speed in no time now why would you want to build a website with next next is a VJs framework that offers many features like serice side rendering static generation and file based roting it has an amazing developer experience with integrated Dev tools Auto impul for everything and a rich ecosystem to support you it's a great choice for quickly shipping ey performance and production ready website and with it you can build pretty much anything these days for for Content we're going to use prismic now let's talk about prismic prismic isn't just another CMS with prismic we get a clouded headless page builder your clients or content team can easily craft new unbrand pages without begging developers and your visitors get a worldclass user experience so let's see what we are actually going to be building this is flu eyes in a website we'll be building from scratch to production flu is statically generated allowing it to be as fast as a web can go and SEO friendly and again flu isn't just a quick demo project we'll be building it together from scratch to production so well what is flues Flores is a marketing website it has a own page and a few other Pages as we can see here but basically each of those pages is made of sections we have for example your e section with like a big title some description a CTA and an image of the product then we you have a testimonial section your feature section and a repetition of those text image section as we as we can see here and finally a C section at the end of the page so if you look at our figma file that I have right here we can see we have the pages we've been browsing so we have the homage and then we can make the fature page and the above page if we want to but if you look more closely we can see we have some repeating section here across the pages for example like testimonial slides here we can see it here year and year and as I just slipped like well at prismic we call them slices and those are all of them on this website so if we Zoom here we have the EO slice that is responsible fing like the EO section that we want to use on our website so we have the big flashy one here with like a big title some description and like a CTA and like this eye-catching image that this display right here and we have like the more exal one that is like some kind of variation of it with just like U the text on the left and like the image on the right we have this text image section that is just like an image and some text the feature section is a repetition of some like feature shutouts that we want to give testimonial section we've been talking about and finally the C traction here and this is really like the kiss of this uh crash course like we'll be building those sections together and the reason we're focusing on building website sections that then as a Content writer when you end ofice website sections to them they have the ability to build pages and compost them the way they want to within prismic for example if we look at our own page as a Content writer you might want to say like well like maybe actually like I want the testimonials to be a bit higher so let's put them a bit higher and maybe like this feature section like well like we want to pull it like within the text like just to break a bit like the rthm and finally like also like you can be like well actually on the about page I also want like some text so well let's put some text here let's put it before exit testimonials and if you want to spin up another page like you can just do so so like let's just duplicate that one remove that this and well like we have a whole other page that is like unique and composed of those website sections we've been making together so that's really the mindset I want you to be in like to focus on building sections of website because this way like by shipping website sections like you're not looking at this like feature p feature page here and thinking W like the eror has always to be followed by this feature section and then we have like um a text image section we really want to focus on shipping slices and like website sections to our content writers so that they can Define as many page as they want so well that's fiz that's the website we building together with next and prismic and TA in CSS so well let's get into it so so just like as if you are working with a real designer working on a real site we're going to be getting our designs from figma and referencing a file for images assets and everything that means that you're going to need a figma account that is free so go ahead and sign up for one if you don't have one already so we're going to be fetching a file from figma community so you can reach out to figma dcom community and here in the search bar search for something like flu rise so this will get you this F right here that has been made by my colleague Alex trust and from here you can click open in figma and this will get you your very own copy of the figma design for the flu website and really this copy is yours so feel free to play with it you can move stuff around it it's stuff like it's really a file for you to play with you can also try and like reorder section like we did before to see how it's working but well definitely get this Sigma file we're going to be referencing it a lot while developing our website okay so the fastest way to get started with next and prismic is to use one of prismic starters so to do so head over to prismic doio and from here you can just log in into prismic or if you don't have an eons yet you can create one and set up point for free once you're on the dashboard here you can click next and here you'll be prompted to select like the you want to start with so on our on our case like we want to go with a minimal starter here that as you'll see is really minimal and that's perfect for us to get started and build a website from scratch with flu so on this window here we just need to prompt for repository name so we'll go with florise next repository name needs to be unique so you won't be able to pick flise next but if your name JN for example you can go with next John or so whatever F you put really that's it's not a big deal just like a needs to be a unique name for prismic to know like where your content is stored we'll stick with a free plan year and hit create repository what this does it creates a repository on prismic to manage our content and we'll get back to that but for now we want to initialize our stter locally and to do so we just need to copy this command here is given us by prising so it click the little like copy to clipboard button here gets us into our clipboard we open a terminal and we PR these commands in so what this command is doing is cloning prismic Minal starter and installing dependences it also set up size machine prismic developer tool but we'll come back later to it once we're done setting up our project it might ask you to log into prism if it's the first time you run it to do so you just have to press a key and open it in the browser it's really simple as you'll see so right now it's finishing installing up our npm dependencies then it will upload a few things to prism and we'll get ready to pick inside our project so here we go now it's publishing some things to prismic like plogging in publishing our sizes to prismic like so just the default data start is coming where no is will get back to them and here we go we're done initializing our project so then it prompt you to would you like to open your replace story so we don't want that today so we just h no and then we can just get inside our project and open it inside vs code with the code. command so wow this is our project good so if you're familiar with next three already you'll be familiar with most of the directories and files that you see here so we have the Pages directory for pages in next public directory for like static assets our next five econs by default the next server directory and so on and so on from prismic we have a few directories like the custom type directories that all our custom types definition on prismic so those are like some weird Json that you don't need to know about because all of that will be manage for UI that we'll use later on then we have this slices directory this all these our website section that we've been uh picking at on figma so by default we have like a really simple Rich Text one but we'll create our own later on now if we pick inside our packages and what we have here is mostly next dependencies so we have the next tools we have the nexts configuration we have next yes like nothing to like a Wilder from prismic we have the next GS prismic dependency this is prismic module for next and while I crey in next like modules as a gold standard to integrate new technologies into next and the role of this package is really to integrate prismic inside next you don't have any setup to do on your end then we have slice machine UI which is prismic developer tool for you to work with prismic and the slice machine adapter next which adapts this developer tool to work with next correctly so again like next modules are reallyy gold standard to integrate many Technologies inside next there are modules for pretty much anything and we're about to use another one to tail into our project so let's do that let's finish our project setup first of all going back to our figma we have this little like component style and assets page click on it and here we have this typography card that shows us all the fonts we're going to use on our website so we can see we're using to for the eding we using Nito and for the body we're using Nito s which is like a bit more like a less like Randy one that is more visible like for users on like a font small font size like we have on the body here so for anything custom fonts like that to use on our website I like to use Font source so font Source you can access this on font source.org and it's a bit like a font as a package service on npm and so if you look for like Nito here we you have Nito and Nito Sun those are the two ones that you want to use so we can click on Nito click install and then it giv us an mpm command to install it so we can go here copy the code get back to our terminal clear everything and install Nito so this is this will install the font locally so that we can use it on our project likewise we want to use Nito s because that's the second font we want to use for like our uh body text so we go unit and install it so then once our front install like that we just need to go to our next config here and we'll add a new CSS assets array this is a way next to declare new CSS sty sheet that we want to use in s project so we can go here and add font Source um I variable because it's the variable font for/ nunito and add font Source I variable F to and that match like we're already ready to use those fonts inside our project and those that's that was the instruction we given here so we just as you imported like Nito Nito from front variable and same for Nito and here we go everything is install in our project but now to use our font we're going to use tailwind and Tailwind is this really cool like a CSS framework that we'll use to develop our project without having to write much style directly exited it will be all class based with your classes but nor if you're new to tailing and will get you for it and it will be quite a smooth right together so as I said earlier that is the bit to integrate T ins sign next best way to do it is to use the T module for next so we can access it for T css. next.org but basically with next if you're looking for module just add to next.com click module and from here you have a list of all the modules that are available for you to CH in next so here I could have search for Tailwind I have Tailwind CSS and this gets me to the same website if I go to the documentation here so to install it I just need to launch this command npm install in the dev dependency next teline so I copy that add to our terminal again and pass our Command so it didn't pass so no wor so just like in install i d at tailin uh nextjs tailin in CSS there is installs in next Tailwind module inside a project of course we'll need to declare it inside our next configuration so again we go back to next configuration and on the module array we can see we already have the prismic one configured so we'll just add the Tailwind one that goes like this so add nextjs for/ Tailwind CSS and from here we just need to Wi Tailwind with the custom fonts we installed before so we'll go ahead and create a quick um Tailwind config CGS file and here we can go into do module. exports equal uh an object um we'll give it a fim and we'll extend T fim to declare font so we go extend and then font family and here we have body so for the body fonts we said we want to use no need to send variable so go like no need to send variable and we'll fall back to sensor to the default next sary font of our uh system and we'll do the same for the adding font so go font adding and here we go just need to variable and that's for our adding one another thing we'll need to do is tell just like because we're using prismic and using this slies directory here we need to make Tailwind aware that we have this directory that will contain classes for Tailwind to generate and to do so we St just into the content array here and we'll inside it will declare the quick for SL slices for uh s Star card and here we just pick anything that's is JS TS or View and we can save that so well that's pretty much it so as promised we're done setting our project and we'll version everything to get so to do so we can go back to our terminal run git in it this creates a git repository inside our project with nothing on it we can add everything to it so we can St every file we have so this staged everything I made some warning because I came on Windows and converted a few things for us but that's what we want and finally we just run a comit so get comit M and we'll go like with um initial com and well that's it so we're done setting up our project we install prismic we started from a starter then we added our fonts to our project and we set up tailin and from here we're ready to start developing prismic for real now that we've got a project setup let's get to a prismic powerful local development tool slice machine slice machine works with our development server and because we started from a starter we can start both no and slice machine server by running the dev command so it goes like this npm run Dev basically what this does that it starts it starts next sever year on Port 3,000 as we used to and also it start SI machine on Port 9999 right here so we can open it in our browser and really we can think of s machine as a craftman's workshop where we can create and shape our data models all while ripping benefits like G versioning component previews and autogenerated Mars within this tool we can create different type of data model Pages custom types and slices let's start with Pages as you can see we already have a generic page one here that features a minimal setup pages are typically used in prismic to represent a page of your website where content writers can compose website sections to tailor them to their liking without the need of developers thanks to slies reference in the Sone section right here nowas we'll get back to it moving on we have C custom types when building with prismic custom types serves as templates to create documents this typically correspond to pieces of data on your website like information about I know for a pricing plan and so on they can also represent a multitude of elements such as navigation menus site settings you name it finally we have slices we use them to represent page sections that we'll be focusing on in a few and the last t tab here is a changes tab it's not related to git it's related to what prismic knows of your project so when we work on it we and we're ready to ship something new to prismic that's where we'll add to also let prismic know about our changes that prismic is up to date and what are new website sections for example all right it's time to create our very first content type we're going to create a custom type we call settings it's in this custom type that we'll put site information like the title of our site or we Define our navigation or we put for BYO information and so on so we'll go to the custom types Tab and click the create button here first of all we need to decide between reusable type and single type in this case we go with single type because we only want one settings file in our website we don't want multiple of them we'll pick settings as a name and this generates an ID for us which in this case just setting lower case so we'll stick with that and click create we now inside our settings custom type that we can Define so we can see get two options static Zone and SL Zone we'll get a difference when we create our own page but for now we'll only work with a static Zone in our settings file if we click add a new field here we're given options for field and this is what makes prismic so powerful you can add text images embeds links and a lot more first first we want a field for site or company's title it's nice to have one of these because we use them at a bunch of place in our website for example it's what we'll use when you'll do the meta title and want the fullback so like here example we have like a features and fluid for example so in that case we have kind of two options we can either pick a re text field which is like what we want when we want to have a field that we can like customize like bold links and like multiple paragraphs and so on or key text field which is just like a plain text string so in the case of like just company title we don't want any bold or things going on so we'll stick with the key text field but as soon as we want something like more rich orle like for fancy description or like a text sze that we'll work later on we prefer Rich text because this will allow content writer to like stylize a text way they want and like um add like images multiple paragraph within it like just us freedom but in this case for the company title we just want a key text field so we'll go with key text and here we need like a film name for it we'll go with site title we can hit enter and then we're done so well great we've made our first F size mechine we made a a lot of f like for this tutorial so well we'll get used to it but let's keep working with them for SEO and social media it's a good idea to have fullback content for any page that doesn't have meta description and OG image is entered not every page needs a unique OG image you know so let's create a field for fullback meta description and OG image for The Meta description we're going to again add a new field we pick key text again because like a bold and empasis like doesn't matter in the case of meta description and this one we'll name it meta description good now next let's create our r image for back so again add a new field we pick image and we name this one OG image so well we next to our field we have this little like a cray on here so if we click it we can a DAT or F and configure it further so we have a label that is shown in the UI the ID that we get in the API in the case of an image we can pick like a a wi in a so for example we can say at our image we want it like to be like a more or less like uh What uh social media wants for images like this and this will constru our image to be within these sizes and so that we have like an image that is like tailored for OG images serving great so we have free Fields each of this field will appear once in the settings document finally we'll tackle a navigation menu for this we'll use a group field that includes a link field and a text field because what we want to render is if we go back to our figma here and go to our website we want to work on navigation so we want to have a list of Link here with like um just a text in your link for each of them so to do so inside safe machine we click add a new field and this time we want a group we'll call the group navigation and then inside it we can click add a new field and we'll first add the link so go link we'll call it link and then we add another one that will be this This Time Again a key text that we just call it label and well everything inside this group is going to repeat so we can have as many link as we want inside our navigation and this enables the content editors to really like configur navigation within prismic and you'll see all of that of this custom type in prismic Page Builder so that's it there now but first of all when need to save our custom type then we can go to our changes tab here we can see it there has a change that we have a new settings document that is that prismic doesn't know about so we can click push changes we proceed to pushing our changes to prismic here you go all s have been pushed to prismic and now if we head back to our um to our dashboard here that where we just created the repos story before we can click refresh now this will like get us to the refresh uh page because like weed our rep in between and from here we have some default document that we can just like don't care about for now in our case we create new and can see we have our settings document here that we just created together we can we can click it and here we can start entering like data but this would pick our site title in our case will be FL rise we put a meta description go from some like Lum can pick an OG image you can select one uh from uh media library here so put like this guy um and finally we have our navigation here so we can put like multiple links so we'll put like a link to the web uh it will be like to pris for example and we'll put an uh so for like the label go with prismic and we add another one for example like this one it will be to the web again and going go with kab so gab.com and we'll go with gab and from here we can hit save and publish and we're done we created our first custom type and content entry on prismic together now that our settings document is live we're ready to dive into customizing our website's layout so if we go to our website right now we can see just like rendering our default slice that comes with a minimal stter from prismic so let's have that on the side and let's bring our V code right here so we'll go with vs code and inside it uh what we want to do is to create a layout that will UNG Globe all our page so in next layout has stored under our layout folder and the default one is called just default this one applies to all pages so we go here create like a layout folder and go for/ default to create our layout file so we go with default. View and this will be a layout so inside it we can just have a template and we have a div and we'll render a slot which will be our page so if I go ahead and save that and now if I like content here it should show on our page however like sometimes like KN struggles to pick up that we created a new directory and to watch things correctly so we just give next to restart so we restart our server running npm run Dev restarts again next and Si machine and going back to our server here it's restarting and we can see we now have a layout picked up here so now if I make update to it like it should be like how to reload it as you can just see here great so from here we'll add two things we'll need like a header and a footer we'll come back to that but first all let's just add our background because as you can see on the website it's like really CLE but there's like a small like gradient going on here like really like just not plain white but just like some kind of a purplish like greenish here so well we'll do that with tailing so to do so great a div just like an empty div nothing inside it and Tailwind is a utility framework so it's based on CSS classes so it go is ADD class here and from our class it will deduct um CSS to apply to our um through this D really so if I go here I will first go like add a fixed class this is just to select position fixed and then we'll go with inser zero so what this do just like put the D across all our Pages wherever we are and from here if I go like at the background for I go like a background like um slate and I save can see like I have a slate background across all my website cool that's not what we want but we're getting there um as I said we had we have a background our website so we'll add this background and like some kind of gradient so we starting to make a gradient first all we need to select the direction of our gradient so we go like PG for background and then we go like gradient want to gradient we want it to top right and here go say like we'll go like we say was something like um like going from Green like to purplish something like that or S perhaps so we'll go here and we go like from Emerald and just to see like a bit better we go like maybe like 500 and then go like two s and again we'll send 500 500 so if I save that we can see we now have a gradient showing up on our website cool so well the issue is that we don't see our content anymore so sure we'll use this Z per class from TN to control Z index and so go Z minus one like this and now it's behind our backround we have some opacity to not make it like that hard on the user to call opacity 50 so that's like gives like a 0 five opacity to the we created and we like tune down a bit like our our like a gradient color to be more ctle like this so that right now it's like a just like a well really ctle as we had on our figma f as we have here so like just like like from like purple to like greenish here and that's what we have here cool so that's really case of tailing like you want to prop like you have a property in CSS you can apply it on your page like this just by slapping classes on top of elements okay so now that we have our page working with like a gradient and everything let's create our AER component to do so I will go inside my like directory tree and I will create a new header component so I'll go like components for/ header. view so all this Max restart because s a new components directory inside the T like my template I like um header template like a header element like this and just like our Eder for not like this so one of the best feature I love is next that everything is Auto Import it so I don't have to worry about something uh like where to import it from everything just picked up by index and Auto Import inside my app so if I go here inside my layout if I go back inside it I can now type header and next knows about my header component so I can just save it like this and if I save it we now have our header showing up right here so well let's make our work now so if we go back to our uh figma here on FL eyes you can see our looks like this inside components we have like a better view of it here so we have our header and basically what we see is that it's displaying a logo and then listing all our um navigation here so the navigation is coming from prismic so we have to get that data somewh from Prix so how do we do so and the way to fetch data in next from like third party is to use next I think data composable but in this case we need like this data in the header in the food and we also need that other PES in our application so we need to find a way to like fetch this data globally and the way to do so is to create a composable in next so we'll do so we'll create a composable so likewise again like because just very beginning ofing our website we're creating a lot of directory so we'll go ahead and create a composable directory and this composes we'll name it use settings things and we go with thats but nor is like everything look like plain JavaScript in this for now so for so inside it we can write a composable so a composable is just a function so go export const use settings there a function like this and from here like we need some out fetch data from prismic so remember the beginning uh the next uh next stter from prismic came with prismic module that I showed you inside uh our packages and that is missing uh let's we don't have our packages and oh no it's here my bad cool so you can see have the next prismic modu right here and install this our next application say next config we have prismic here and thanks to that we have access to a lot of utilities from prismic to fetch our content or to template it and the first one that we want to learn together is the use prismic compos we go prismic equal use prismic and again because it's next Everything Is AO imported we don't have to import anything so go prismic use prismic and what we want from this compos to return data from prismic so as I said going to use next as sync data composable so I go return uh use as sync data uh well so put up some too many things so just like go uhing again data like this so we'll give it a key which will collect settings this is just a way for next to be a like to dup um calls uh so we'll go with setting like this and then we'll forite a function that function is meant to be responsible for fetching our data from prismic so just have a function like this and go with return and here we extracted prismic Instead This prismic object we have a client uh object and the client is what allows us to talk to prismic API to get data from it so we call a client and from a client we have plenty of method and we have a lot of gor methods we can go like get all by every tag by IDs and so on and so on here we need to get our settings and remember in St machine when we created our settings we said we wanted um a non-re repeatable like um settings custom type so this mean we can use get single and then we need to provide it with our document type so that's the API ID so that's settings here all lower okaye so we go with settings as you can see it's all typed already by pring because next client is aware of all the document type we have so here to suggesting a page or settings because that's the two page uh that's the two document type we have in prison so our settings here and our page here so in our case we go with settings like this and well that's pretty much everything we need to we need here so go just settings and uh that's it so we can save that and the last thing we'll do we'll do from this composable that actually like using data returns a lot of things from us so it returns like uh catch data error and on status refresh function and so on in our case we just need the data so we'll stick with data here and without much we can save this composable and we're done with it that means that now if we get back to our Eder component here can close everything else we can add a script section so use view free script um setup uh so go script setup we'll keep the typescript language uh again everything looks like P script so far so nor is when once we get to the more typescript oriented part I will explain you more for now everything is just like JavaScript and from here I can again benefit of next Auto Import features so we'll go call settings equal new settings and with that much we now have our settings accessible here so this as you see uh maybe not yet um well as you see it get our settings so that means that if we get back to our page here and we just like print that we can see like it's this m settings well there's a lot of Weir thing that we're not familiar with yet but as you can see we have the site title TR up here which ISS fluze meta description and we have also a bit like fervor we might have navigation with the links to prismic and the links to GitHub that we created together before so sometimes is next especially at the beginning of a project your editor might get a bit confused like it doesn't know yet of this AO Imports that's because we just created the directory together so again we just slap a quick restart to an next server here and this should like fix everything and like uh let a vle like catch up so right as you can see right now it cut up so it knows that like this is a setting document from prismic and everything is typed to help us really template without any headache so now we'll get to do some like back and forth with figma to like actually like template or header so first we can see we have like um our little fluze logo here so it's accessible maybe somewhere something yes it's access here we have a component so what we can do we can pick our logo here and as you can see it's like used right here there I assume yes so it's using this so what we can do we can right click here can click copy as and can copy as SVG so now we have the SVG and we can go back to our code we can create a new component we'll call this one no go. View and here we just put like a template and inside our template we slap the SVG we copy it from figma which is like a bit big but that's really like a really quick uh quick way to get um an SVG from FMA inside your code that is then usable across your application so I can close that and now inside my Eder I can call my logo component again all of that thanks to next AO Imports and here we go we have a logo showing up so now what else do we have to do first of all we can see like it's some kind of like it's constrained within some kind of container uh will the same for fter so maybe there's something like to in here and if we look at our sizes from before we can see like a lot of them are actually constrained with it within some B boundaries like we have like boundaries here we have like again like the same boundaries here actually like we have the same one so this one looks like if we go to Dev mode you can see like we have uh like 124 boundaries here might be like the same actually it's not the same it's a bit weird um but we'll see so basically we need some kind of um wrapper component like bonded component container component to contain our Design Within those boundaries so maybe we see that better not design here yes so if we go here and quick this we have like 128 if we go back to something else for example like our card here we also have like 108 might bit moving every time uh yeah there's something but basically we need some kind of container component so let's work on that together for now so we'll go back to our code create a new component we create we name it bonded View and here again we just need like uh to Define like some template first so we'll go like a script setup to get started go long typescript uh we'll need some that's because we'll need some props um then we go to template and template here what we'll do is like well because the container component we still have we still want some control over it we want to render like a section right like our div what we'll do is render a component and this component uh will'll name it like um like we'll say like it's a tag so like we like is we'll go with as and if there's no as it will be a section and where do we get as like we'll do that using like defined props helpers from VJs that allows us to Define our props uh for that component so prior to that you might be might be famar like the way of defining props for an object so here example like I want like um an as prop and it will be like a a string for example what we can do in typescript we can define those props using typescript uh in interface and to do so we use this really like a funny uh like opening tag here and from here we can declare some kind of an object uh to tell us that well we want an asce prop it's optional so in t like equation mark say it's optional and say it's a string so it looks like an object but this is a text interface that says well want our props and you want maybe an as an as prop that is either string or undefined and from here as you can see here we have as available in our template that is a string or defined if you putle like number here well it will freak out here maybe but we can see our string a number or in Define for us we just stick with string so we have our component showing here and then uh once we want inside it want to render our slot so go slot we save that going back to rer this means we can now use uh our bonded component here so go bonded we can save that so far is not doing anything but what we can see if we inspect our HTML here we can go here and see it's rendering for a section so that's where the as part that we uh implemented together is going to be end we going go as and here we want to be a Eder so I can save and you can see it's a header here inside our console cool um but well like this is just like the component skeleton what we want now is to be like to conin it so let's do that uh go back to our bred component here and we'll start to add some Tailwind classes on it again so first of all we'll add like some class here and what we'll say we say like we want some uh margin first like to to get started so if we go to our figma to our component style we can see here we have some um some margin have 124 which is maybe a bit big um so what will do uh yeah well maybe that's not maybe that's perfect so 124 so in Tailwind everything is like multiple of four um so what we'll do we'll go back to our code here and we'll start with maybe um having like some kind of like gradient of size from Mobile to um to desktop size so we go back here and we'll start well we'll say like first of all on mobile we want like just PX4 which is just like 16 pixels of mar of padding here then we'll extend and we'll say like well like maybe on middle screen like we want to go up to like uh six which is like a bit more it's like 24 and then on really large screen want to go uh well we'll stick with that so right now you can see it's a it's a bit settle but we can go and it should yeah you can see it's like getting smaller as we go to smaller screen size cool uh we have the same issue on like uh vertical uh spacing so we can do the same approach can see like well on mobile want like just like 10 which is like a 40 pixel um and then you want to go something like even bigger on on a medium size so go like on mle say go like P like 14 which is uh 14 * 4 which is 66 as it's display here and then on our screen we'll go like a py6 and now if again we do like the same tricks we can see like it's big it's getting smaller and smaller every time ago so that's how we do responsive with tailing so basically we stop our class so like p x is for padding on the xaxis so like horizontal axis we go like four which is like uh 16 pixel and then we go up on medium screen so that's like uh on like 760 768 and above go up to 24 and then and so on and so on for every uh screen size we want to handle then we have the same wise like for like py which is the vertical axis so we start at 1040 then we go up to 56 and we go up to 16 which is for 64 pixel cool but then then like well our contents like like not really Centered for now it's like just all like just coning with like a Rel paring there's no container around it so let's create that container so to do so we just slap another div here we'll have our start in the middle go back here one SL and here again we'll add some classes to this new div so go class and from here we want our container so we'll say like we give it a Max WID go like Max WID 6 XEL and then we'll say like uh we want it like to be as large as possible so we go like uh W Auto so those two classes together like w full is go like to go to actually full weight so go like take as much space as possible and then we have the max with 6 XEL that just like say well takes as much space as possible but no more that than 1100 with 52 and then to Center that just go like MX Auto which is a way to Center div uh horizontally in your document and now you can see like we have a container so like if you go to bigger screen size it stays like no more that like 1100 and then it goes down slowly and like the padding like slowly decreases as we reach like mobile sizes cool so we're getting there is our error so we canot get back to our Eder um here and start working with our settings so what we'll do here we need to render our navigation so if you go to settings here and take benefit of the auto compation from typescript can go to dat data. navigation and this is our navigation as you can see we have like the um the link we add and the label for every item we added on prismic earlier on so if we go back here we add like prismo and GitHub and we can see them here so let's render them and to render them what we just need just like some kind of basic Loop so we'll go and have a navigation inside it we have like a UR uh this Ur like this list need it to be like um flexible so like a display Flex to that's run to like just like to display Flex in tailwind and then we have like um a list element so go like La uh list list item like this and from here we want to Loop over it so injs to Loop you might be familiar with it but basically we use like V4 go V4 go item of settings the data that navigation which we had V4 uh here we go so this should be fine it just says I think that it's missing a key so we add a key so go key and go with item. label and here it will wind a bit because it's say like well like it has to be defined and like a label can be null in prismic so what you can just say like well if there's no label we just add like an empty string and from here inside it we can like render our label for example just to have some kind of example call like item. label and now if we save we now have like prismic and gab cool so well but this is not a link yet because in then like if we go like and render a link we can see like this finished structure from prismic what we could do we could just like do linkurl uh but this is not like really the way to go like there's something like uh like this is really the internal structure of link of rmic and we don't really want to mess with it so instead what you can do you can use prismic link component that is er2 you render link coming from prismic so go prismic link we can close it and what we can do here can give it our field so go field and we go like item. link and this is rendering a link and inside it what we want we want a label so item. label and if I save that we know have links here so they don't appear thingss because it's tailin and like by default tail in like don't like wipe all the default of the browser but as you can see in the bottom here it's things and so if I click on one it's opening like GitHub in that case nice well so it's still not looking like our design so if we see like we want our logo on the left and our navigation on the right so let's do that so we have a logo here and our navigation here so what we want to do is just like to wrap that with a div so like div we'll wrap all of that inside the div and what we'll do here we'll again add some tying classes to control our style so go like Flex so this will like display it as Flex go like just some Gap because like this way in Mobile it will be like all small and and neit so like this we have a small Gap four so like before it was a gap zero so no Gap Gap four like 16 pixel of Gap and again like with st we can just like over everything and gives you like number of pixel like it corresponds to and this is because I have the 10 CSS extension installed on my uh vs code so I highly recommend you to install it I should have said that small um earlier but yeah basically like this will just give you instant like help you understand like what is available from T so I go than G four uh you can see like it's not really centered so we can just say like itms uh Center this for like per from the Align item Center we go like just if a between this is to like um have like the logo on the left and the navigation on the right and what we'll say like um on mobile uh and above uh we want to be like uh display like on top of each other and like uh on big screen you just want like a line like this so we'll go uh Flex call so like this is like on mobile we want it to be like as a column like this but like as soon as like bigger than like a mobile phone we go like Flex uh how to get back to this layout cool there one last thing we need to do is like to adjust like some kind of um padding between those so what will go we can go here and see so like a feature and like 30 pixel behind those so what we can do we can like high B that with tailand and say like well here with my link on to some class and go like P4 for example and this will give us like coring on the left and right of our element while Ming like being like clickable links for accessibility cool uh last thing I might want to do is like actually you so like the padding I went with uh on my bonded components maybe a bit big but here we have two choices like um either we can like adapt it here but this adapting for like every uh component using the bonded component and uh well as you can see like we tend to have like more big uh padding on like a 96 as you can see here um we will stick with the bigger ones like by default and for the Eder what we'll do we just say like well like for this one actually like let's just use C some padding so go is the class here and we'll say like well use a padding on the vertical axis of four um and on the medium screen you use like Ping On vertical AIS of six and on the large screen you use pading on the veral exis of eight and as you can see here I use the question uh the exclamation mark from T to say like well I want that to be important so I want to override the style of the default component with that and so this is what the exclamation mark uh does when you put that in front of a class inter just Mark that importance that it's like registered in CSS like allows you to override style from other components don't have to use that often but in this case it's relevant to use the important question mark here and well without without much we already have our eror working here so great let's proceed to do our footer okay so well for our footer the process is quite similar as you can see if we go back to our fer like this St is pretty much the same like the same layout the only difference being that we have this need like copyright at the at the midd here so what we'll do we'll go to our file Tre here we just like duplicate our Eder component we'll name it footer and from here uh what we can do we can first of all like register it inside our layer out so we go back to our layout and again we take advantage of next Auto Import to just add our footer back here save that now I have like the same ER and footer here because it's all like rendered uh well we just copy pasted the component for now so we'll just focus on our footer from now first of all we want it to be rendered as a footer and not a rer so go footer then we'll keep like the same uh constraint here actually maybe we'll get rid of them because I think on the fut bigger let's check our figma so this is the components but let's see on the website here actually it's smaller so it's more like a zero so let's keep it like this uh you can see it's on a plain white background so we can add that first uh so go footer and like BG white so BG white for like say like w we want a background and we want it to be white in t so we say that see we have the background right um yeah and I guess the last thing we need to do like it's the same thing like our footer um with the navigation here and the logo so we can keep it like this and what we can do is just like in between the logo and the navigation we need to add copyright so we'll go like a P tag um or like a small class on it so we go like text access so text access say like to put the text in like a smaller front size like 12 pixel and if we go check our figma I think that's the size Z so it's no need to sand and like 12 pixel so let's go with that so here we go and we'll say uh so well here we need our copyright so what does our copyright look like and like just like you see the year and the name of the website so we can do that so I go back here and I add like Copyright symbol which you can do with an L code or I can like copy paste it here and then you want to have the date uh like the current like here so to do that you can just inter it like a new date and go like get fure now we have the date showing up and then we need our site title and this is where we can use again our settings documents so we go like settings. data and here you can see it's all like iner for you can go like and check site title and if I save here we have stor showing it cool so all and are done the last thing we need to do is to go back to our uh template and to our default uh SEO meta data for us so to do so we can spin up a script setup again new script with the L typ script um and here we need again to import our settings so go con settings equal use settings so now we know have access from our settings managed by prismic and what we need to do is to use next use SEO meta uh compos that is really like a nice helper that allows us to describe like our metadata so we have like the title here we can go like settings that value because like this is like um a view reactive reference and then we can go data and then can go like site title we can do the same with the description so go same like fashion go settings value. data do mea description and finally we have our image so we can go like OG image in that case and here well we have our image from prismic so what we could do we can do like settings. value uh data. OG image but the issue with that that like well this is an image from prismic like it's a prismic image field uh and we don't know much about it so in order like to get the URL of our image which is what we want here what we can do is like to import uh prismic as image SRC helper which is used to extract the SRC of an image from prismic image field and we can import that either from prismic client or in our case we'll use import it from um news prismic and now we have our our image s helper that we can use here to V our image and to extract the SRC from it and now if I save that we canot see it saying on page but now if I refresh I think it will still say on page because it's saying because um of how we conf website but we should not have our meta description sh up somewhere perhaps uh yeah so we have our me description norum there Dam it and if we scroll down we should find our meta image that is is right here so if we pick that link and open it we should see next the funny guy we picked on prismic okay so that's all for this section before we wrap up let's recap what we achieved we created our first custom type within size machine we add did content to it for page builder we fetched content from pris M on our website using a next compos voler that is using an acuse prismic from the prismic module to F data from prismic and then we created our Eder footer and layout uh all of that while working with next benefiting from next Auto Import and getting the angs of a few things like stying your first fing with stying and so on and so on so great job next step will continue to answer our website by adding more unique features but before that let's commit our progress so we can do that for the terminal here so that means like we start the server and everything what you can do if you're using vs code here we can just like go here and enter commit message we go like fit header and footer and we can save that and well then it's like all committed and we're ready to carry on now that we have our layout built let's move on to creating our own page so again here is the design of our own page in figma so we can see it's like made of a ton of website sections and well that's what most of our work will consist of today like creating all those sizes for on page but the best part about that that once we build all those sizes for on page we can use them on any other Pages like feature page about page already any other page you might need on your website and really like the B thing about that is that once people like all those sizes one size at a time these states are editor determine in what order this sies go inside the page so if they want one to be before another and like reorganize this page this way they can re like tailor and craft their page on their own without the need of a developer so first we're going to add back to size machine to start working on our own page so we go here we get back to full screen and here we're on in our custom Tes but this time we want a page type so we go to page type and by default because we started as a minimal starter we already have a page page type right here so let's head inside it and here we have a UI pretty similar to the one we add when we're crafting our settings type before except we have two zones we have the static Zone where our Statics field that we use before and the SCE Zone that where we have our sizes so like the website section that we allow content writer to use on this kind of page um we'll get back to this Sion soon but first like let's just work a bit with static Zone and add some fields to manage our SEO metad data so as we can do I can add more Fields here but just to for sake of like organizing things a bit better I can create a tab so to do so I will click the plus button here I will name it SEO and I will have an SEO tab or I can manage everything related to SEO for this very page so again I have like main I have SEO and if you click close you can add as many tabs as you want inside my SEO tab I will add like a few Fields so I'll start by adding like a meta title which will be a key text field just like we did before meta title kitex field we add another kitex field which will be a meta description so we go meta description and finally We'll add a meta image field that will be uh The Meta image of that page so again we click add new field we pick image and then we can enter meta image here to get our meta image once again if you want to configure Fields further you can do so by clicking the little pencil here and here on my meta image I will the same constraint that weed before just so like it's all consistent across my website can click done here and we're done so once we're done with our uh setting up our SEO tab here with our meta title meta description and meta image we can hit save and get back to the code now because we started with a minimal starter that page already exists with our code so if I go back to my vs code here open the files you can see I have like an index file here that is already fetching data from prismic and displaying them however if this this was like a new pages type that we're creating we can like quickly Bo this page clicking the page spp button here that gives you a snepp that is really all similar to what we already have within our code here just great to know that so well let's just like explain a bit what's going on here first of all like we're getting our data from prismic using a similar method that we did for settings we're calling like use prismic to get the prismic object then you're calling at using data to get our index page and from that we're just resing prismic client get by uid so again the uid is what we configured before here uh well that what was already configured for before is the uid which is a slugger for page so we can get that from the uh well that case of Z page we don't need to get it but in the case of a dynamic page we get it from the router um so for now we just want the page and the H page in our case great um next what we have here let's just move on quickly to our template we have this s Zone here it's using this SL Zone component so this is what is responsible for undering slices from this slice zone of our uh page type here so to iterate with our components which are SCE components going from the SES directory and then we give it the page SES and this components is basically just a fancy for Loop that takes care of like looping for your slices and rendering them correctly with the appropriate component and finally we have the use at call here it's just a c the default one that will reflector to make use of our new SEO field that we configure together so we get rid of all of that and go with use SEO meta like we used before we get again a title so go with page. value. data. meta title and while just because like this can default to null we just make sure it's default to undefined so we'll go like if there's nothing just say well let's just make sure we have like an obious and Define here we'll do the same with the description go page. value. data. meta description and again we slap an obvious undefine in case it doesn't exist and finally our OG image which again goes as page that uh value. dat meta image and in that case well we can do two things either we can like use again like the same heler we here as IM 30 or we can do like the lesson safe like. URL to just get URL in our case I think we'll just stick with like the recommended method of using like prismic that has image RC and we'll go like this and uh in case there's nothing we just return and Define cool so that's all for setting up our own page uh uh we have everything working here so we have our own page set up within s machine and prismic what we can do we can just go here and push of that to prismic on our code with we have our own page setup turnning our metadata with next value from that page and in case there's no value we defaulting to undefine in order to default to the value defined in our layout and then all of the sizes of those the website section that will get CH on this page will get will get rendered for this lien components provided by prismic so that now we can start working on our SES so well this company is doing already a lot of things but like we're already getting like really close to get started and like develop our first spes so just before that that's all for setting up our own page so let's commit of that again so we go back to the git tab on vs code and here we do like a fit homepage to say that we added our own page to our website all right now that we've got our own page set up we're adding our first slice if you look at our figma here we have our pages but you also have this slies tab and here designer put all the slies that we need to implement together let's start with the ER section and so the section can like there's two kind of design for it there's like the big and flashy one that we'll use on our own page and the more like tuned down one that was on other pages so we have two different design and we'll be able to un both of them for one slice with a feature called variation but we'll get to that later so first one the eror like the one that is Center on the own page so to do so let's head back to slice machine and let's head to our page page and then here we can click on ADD slice we can click slice I we'll create a new one and this one I will name it e just like a plain default e slice like most most site will have like a slice like that so we have our error slice created we can head inside it here and from here we are templating our SI so it's quite like similar to what we did on our settings page or page type so far except we not working on a slice and what we see we have two kind of Zone we don't have like the static and slice and the slice Zone Zone we now have the non repeatable Zone and the repeatable zone so what the difference between those two zones well it's quite straightforward like every that we put in the non repeatable Zone will only appear once whereas the field appearing in the repeatable zone will be able like to be repeated by content writer so it's great if you want to example have a list of links to feature but we'll make use of that later on for now we'll only need to work on the repeatable zone and from here the game for us is to have a look at our figma component and try to figure out like what field we want to have for this slize so you can see we have like a big title that will be a r text field then you have a description that will be another R text field then we have a button so we do quite the same Technique we did like for the navigation we'll have like one lab and one Link Field and finally we have the image will be which will be an image field so let's work on that together let's start adding this fields in size machine first we'll do the eding that we have right here so going back to size machine on the non- repeatable Zone because we only want one adding we can click add new field we can click reach text is two time because I want an H1 tag so we go here name it adding and then I'm can click like crayon here to select like what kind of t we want so by default like everything is checked on we don't want anything of that we just want NH H1 click unselect all NH H1 and click save and from here if I click save here it will save my slice to the file system you can see like it says like slice eror model. Json indeed if we now have a look at our code we can see that it created like a model. Json your file with inside it our adding fi with a structure text so I'm just showing that to you to show you that like everything you work on on SI machine is version like locally so you can like save it within GitHub and like get back to it like roll back if needed like all that is a kit control workflow basically so well let's get back to slice machine and finish our templating so as we said we have a heading but we also have like a description here so like well we say like that's a body so we'll add another re text field we name it body this time we also configure it we unct everything we just take like a paragraph and both italic so that's all we want to all with in this body text then let's do our button so again as I said our button is two Fields like a label and a link so let's do that so we'll go add a field we'll start with the text we'll go like button text with a key text field this time because we don't want anything like fancy inside it and we also add the link with Buton link and last but not least we have the big image field here that you want to add so we did that pretty like a few times already so let's just add our image will name it image and once we're done with that we can save all of that and to the F system and again if we have a pick at our Jon file here that is like a model definition that again you don't need to know about it's all man sa machine allows you to version that to get that you don't lose your progress now we can start to actually build out the Cod portion of our slice this is where slice machine really starts to make our Liv this here so going back to S machine you can click this simulate button here what this does that it opens what we call the slice simulator at prismic in a new tab that is responsible for rendering our si in isolation alongside an editor here that allows us to configure M for it after the fields we just defined together as you can see here we have heading heading field that we can like write on like I don't know and uh we have the body the button text button links like all the data we defined previously on the slice um templating section here and that we can like use to develop our slice going back to our code here we can see it created for us a EO slice component rest some borderer plate code in it namely just like defining the props it's receiving and then like just a really basic template which is what we get to see here like place all the component for EO default slice here and if I go back here and like edit this textle I just like remove andjust that slice because you're just saying slice but more interestingly I can start and like just log like SCE for example see the content of my S you can see here my heading my body and well like those are all the data this size is receiving and like is responsible for templating and from here you can see like it starts to get a bit complex like my adding which is just in onjo is actually like an array with like some object and stuff like that and these you might be like well like it's getting complex like I should do console long like hsd or to see my data and like to figure like what's going on but size machine isier to help you navigate for all of that that so it can be all smooth so let's just get that on the side get size machine here and from here we can get back to our code let just get it a bit bigger and Si machine here because it tells us like well like if you want to see your buds you can go like slice primary heading and if I go here I can do like slice primary. eding and I go back to my simulator you can see like we have a heading with like enjoy and expand and everything just as descri machine but more interestingly if you want to render this eding component we can do that thanks to Snippets that are right here so let's click on show Cod Snippets and this shows us like all the Snippets we need to render all those field inside our component with your GS so let's just copy all of them for the sake of the exercise inside our code so we can see what this all looks like within the simulator and here we go so have sneet for eding or body a button text or link and our image so I can save all of that and go back to the simulator here and we can see like it's displaying like all my content now we have like a fun the body here we have the button text the link and our image here and the great thing from here is that we can start customizing all of that data within uh the editor that we have here so we can say like a fan GA right don't now uh you can like change the body like if you want to make it longer you can make it longer if like another link like a click me for example you can still link to Google and if you want to change the image you can like replace it and put I don't know like some fruits and now we have some fruits being displayed uh within our slice and really the great thing about that that you don't have to look for data anywhere it's all available right here and you have Snippets to help you like render all of that so well let's just do a quick refactor before we move on so like we have our butt on text here but like well three next buttons it should be like displayed within the link so just move that right here inside the link I can save that and now we have like really our heading our body our button and our image which is already slowly looking like what we're supposed to be building within our size from figma here um the only thing here that you might have noticed no stle and that's the reason for that that because Tailwind by default NE ships with like no stle has like a really comprehensive reset CSS that gets rid of all the default St from the browser so like really responsible foring anything St related so well let's recap what we did in the past couple minutes we created our first s that's mileston it's available here is in s machine we add that fields to it to much of figat design then we BR the data into sze MCH into into our slice thanks to SI machine and the and the Cod s so thanks to all of that we're able to display uh our data on size on the SI imator and rendered the data coming from M that we can edit with the mo editor here and save them to face time once we have like Mug are like fitting our design for example so now now that we got all of that set let's bring in some style and let's actually like finish our EO component together in the last section we built out a very basic e slice in this section we'll sty our Fields using Tailwind after design in figma so we already like played with our editor bit for now we'll get close it because we're running out of screen real estate get that a bit like to the middle bar so we have like our code on this side and our SCE preview here and now if we look at our FAS so what do we have we have basically like two elements in our SL like we have the text part with the CTI here that will like need to be wrapped together because once we move on to this design we need like all of that on the side and the image on the other one and then we have our image we have a huge gap between the two so like we need to take care of that at one point and then also like all our contents that constraint within like some kind of containers we need to work on that so well actually we can start with a container this is pretty straightforward as we did before we have like our bonded component now so we can just slap it uh on our size and this will not like have a nit container like on our on it that will like constraint in size on bigger screens and then from here well we can do what we did so what we said we did we do so we like wrap everything like T extend button related here in a div and then we wrap everything else in a div because like just to be able like to handle our layout later on so we wle of that so this doesn't change anything but from here we can start like a playing with like a layout so we'll start working with telling classes again and on the outer div what we want to do is like to like place every items in the center so to do so we can go like grid grid call one one this just create like a grid with one column and I say just Place item Center go like Place item Center if I save that it's already like constraint on my items the center that will get that like further so now in our like inner div that contain all the text what we want to say like we want to say well get all the text in the center so go like flex f call Item Center so it gets all the items centered correctly and then text Center to Center text and now all text is centered a bit like on our figma design here next step what we need to do is like our image here it's too big on a fat design can see like it's smaller than a container to have here so like 900 pixel wide so we'll get that with St here so we go like class and go like uh something like um max we for th and like with full to make sure like it's full one like we have a small image and one thing we also need to do like well we don't have it here right now but on our design here we have like some kind of toop Shadow on our image so we can do that with s because T really has a class for everything so you can go like drop shadow Excel and now we have a shadow on our image cool now we need to endle like spacing a bit within all our uh text elements here so we'll go that so on the prismic text here add a class and we'll say well want like a four margin bottom so again you can over everything with Tone If you have the T extension on vs code like this is 16 pixel and then we can select well that's on mobile because like on like medium screen and higher actually like want mb8 so that's what we'll uh get for now MBA like this we can r on with our body so for our body we do again a class and so this time we'll say like M we'll say like MB four again same thing and I think we'll go so with NBA so actually we can just copy paste all of that because we don't like the same kind of spacing cool and last but not least like the link this one like when like a bigger spacing as it's like displayed in our figma fer to we need a bigger spacing so this time we'll go with again a class except that on mobile with go like mb8 and on Med man goes like mb10 and now well small T here and be 10 ni bigger cool so now we need to make our text looks like what it's supposed to look like so we'll focus first on our um body here so what we can do we can pull our figma here we can go to the editor mode and you can see like a bit like what our text made so it's no need to stand 24 pixel normal 400 like no B whatsoever 98 uh 12 166 so we can go to our prismic Bri text here and add some more classes to it we go text to excel which is 24 pixel which is what we have here uh and text T say 24 pixel and then what we can do we can select font normal which is like a no ball whatsoever we're likeing 10 which uh is 40 pixel as we have here and uh what else should we do well yes and last here we need to other fronts we go like font so we go like this and now we should have like our text looking a bit like what what we have on figma and then one last thing like our color so or like theme slate 600 and that's what we need to add from tailing so here to color our text in ta again we have a class for that go like text slate 600 and now we have some kind of like this like a light grayish like a light dark color on our text um yeah so two more things you need to do we need to draw a button and a reach text so a button a reach text as we can see on figma like those are like some kind of components so if go to components in style we have well our is not here but will make some kind of component for it and you have like all those textile like mainly for the H1 H2 H3 and maybe the body so what we can do for that is that we can um create some uh like component classes for it and to do so we just create a CSS file in nextjs so we can go inside our code and we can create um a quick CSS file so we'll go inside here create no not inside our ear sorry we go at the root of our project and we go create an assets folder and set it we want to style that CSS file so we CSS file next doesn't know about it so we just need to tell next W like please like close this St CSS file so we go inside our next configure and inside our CSS asset array where we already added our fonts we also add our on CSS style so we go like this and go assets stle that's CSS and now we will load our CSS so because we updated our config next needs to restart and what this will do that it might break the link with our simulator here so to just resolve the link just give a refresh to the page and now we'll see again our slides being rendered here cool and now with in our style css5 we can start our link T to it so well what I like to do is basically as you saw here we have multiple headings that we want to use in our application so we have like fluid like H1 H tt3 and maybe there's like a small one so maybe this one well um I'm not sure as well let's go with H1 H2 H3 and let start adding our heading so to do so we'll do like first heading class and tweet will add the base type to the TW for our headings so we have our headings here I can see like H1 it's like first it's bold it's n n and that's the same for all eding so we can start and work on that so we go here and say like add apply font bold because all are bold we go like cing tight because that's uh well that's maybe not the right one well let's go was itting tight I write out this one tracking tight uh this is uh to just like um laun like the spacing within the text we can add that to like just make the text bit like more dense then we go like font display uh display which is our this uh is it this no it's heading in our case yeah font heading to like our adding font and then we like the text uh it's not reference here but I think it's like text slate 700 and now if I save that and get back to my heading here I can add this class to it and we start to resemble what our heading is supposed to look like so like a f can see like it's a different font now I just need to make it bigger and maybe like have some kind of like gradient of size again to make it like smaller on me on small screen and to do so just Define like some kind of variant for adding so go like adding Excel and see I apply text 5 Excel so that's on mobile want text 5 Exel and on Med man want text 7 XEL which uh here 10 72 which is well five Exel is maybe okay that's not what we have here uh let's just check our heading s it's different yeah so on on our heading s we have 72 which is for the exceling and on mobile it should be smaller so we have what we have here so have 48 which is 5 XEL so that's for the adding Exel and I think the three other ones uh here like we'll be adding that we use like cross appication like more consistently so we'll Define another kind of heading go like adding LG and this time we might do like uh some kind of 48 I don't know yeah this one is 48 so this will be the H2 or there's going be something that Mish happen our design area no big is so go like 5xl and 4 XEL with another one that will be like MD for like medium headings so this one will be H3 so like it's 40 so this time like 40 is uh yeah is it 40 yes it's 40 okay so we'll go is 4 Exel and 3 Exel and uh well just to continue on the gradient of adding like with adding s small like two and free like two three 3 4 four five 5 seven and that's like our gradient of heading that we'll be able to use within our application to develop our sizes great so now going back to our size here we we added Le adding class but now we can add like adding Excel class here from our St sheet inside our file so we go heading we St it here and now we have the F together eding cool so the last thing we need to do is to do our button and with the same Technique we just to create a slice is like a composite of T classes inside it so go back to our to St sheet we like a do button uh class and inside it will apply telling classes to it so this time we'll say well our Bon is a block uh it's qu like fit so like it fits the content like that's the property we see like qu fits content um we do next the what's it col of our button In tha um Canan for sure and we have more information no just like this so what we do I'll do like uh BG S I think that's uh 700 I know that because U Alex worked on the design of this figma file like use the Italian uh pet to to get the color so like that's definitely Italian color so I think that's it you can see our like looks the same cool um um there's maybe a over style but well let's just add one for fans to go like over which is a way time like you say like when you do like over I you say like well on over apply class to it so go like over cyan 800 I can go here I can see say like well once something is on over and has this class then we apply this style to it that's what we're doing here uh yeah and so while wa to few to more classes to it so let's make that bigger um well we do like a transition to it so like transition colors we like to like a duration of like 200 milliseconds like it's really fast or like a eing to it like e in and out and then we need to like paddings we have a button here and you can see like we have 12 so like 12 divided by four that's three so like like like a horizontal padding of free like P py3 and for the horizontal ones like 39 so we'll run it to 36 like P um px12 but again if want like um or design to be Pixel Perfect we can do we can just say like well want like a custom class like p x 39 pixel for example and now what else we might want to do yeah we need to fix the font so well can using like the N to a font so we'll go again with a font adding and then uh well that that's pretty much it I think well no we might need to well let's just save that and see where we are so we Sav that we add the button Class 12 link and what you can see okay soing R so we'll do we'll do that so we'll go like here and I could do like a red uh full so that's to like just like get a red button then we'll do next text white to get like a right text and finally also like text bold uh so we go bold and like tracking wider like something like more like bigger in terms you can see like with tracking wider it looks like this with tracking wider it's a bit more legible because like it's small text with bold and like with a phone that is not meant to be uh used like for text like with a wider tracking make it more visible and accessible to our users and that match I think we're pretty much done with our eding here as you can see so J securing F securing T secing and that's our hero component for us to use oh but one thing I forgot to do is like well when we have a look at our design here like um the body is constrained like to an hour container so we can do that quickly like nor so we can go back to our code we have our second prismic R text that is responsible for rendering a body and from here I can do like Max with uh LG for example that will constrain uh our body within a narrow container just like we have here nice now that we have our slice styled and saved we're ready to use it on prismic and get our first taste of the page builder but before that we're going to get an image for each of our slices by exporting them from figma so we can upload them right here because prismic let us use this thumbnail in the page builder so that content editors can see what the slice looks like before they selected so let's go back to figma and on this slices page here like be sure to end six Dev mode if you're inside it you can go back to the first error slice for the first error variation here you can select the component and by holding alt and like dragging it outside of the viewport of the current error we can get here like this just like blend errow component here and what we can do to get a screenshot of it we can just add a white background to it by clicking the Plus on the FI here and from here I can say I want to export it to the PN and save it on my desktop so what we'll do we'll do that for each of our sizes here so that's all we have screenshot for all of them and we're ready to upload them as as we like develop them together so let's do that together so let's do that so I'll do the same for the like variation here I can drag it here add a background same for like see text with image so again I drag them add the background Dr it add the background the same for the feature one drag it here add a background for the testimonial SES add a background and finally for a cta1 here drag it add a background so sometimes your designer might do that for you here it wasn't the case so well we have to do it on our own but as you can see it's like pretty fast to do and from here we have all our sizes we can like select all of that and go to the export uh option at the end here and this will allow us to ort all these seven layers at once so you can click export layer please promp me for where I want to save them so I can just save them on the desktop here and well here we go I have my all my slies on the desktop now and I can go back to slice machine and here I can click upload screenshot select file I will go to my desktop here and I can pick the ER one which I think is the one we want here we go and so if if we go back here it should have uploaded here we go well all right small glitches happen but well here we go we are it so cool so we have the SL saved here um we don't need to do anything else and if we go to the changes tab we can hit push changes to push our size to prismic but here we can see that our page has been modified so what happened that because we clicked add size from here and created a new size from zero page PR automatically knew that we wanted to add this SCE to the size on of this um page type but the great thing about SCE is that now if I want to use this Slice on other page type we can do so um and like this page will be reused across all different pages that types that we want to create allowing our content trator to reuse it across different page because maybe for now we only have like a page type but maybe at one point we'll have like a blog post page and maybe I don't know like a landing page type all of that so well we ready here can go back to the changes tab it might PR you to log in again if you it's been a while since you haven't logged in but well for me it's all good here I can click push changes and this will push everything to prismic okay so now that everything is pushed to fmic we can add to the page builder so I can get back to my tab here alternatively you can just click the little like open new tab button here that will get you to your dashboard on prismic the form here Will update our own page which was already created by our minimal starter and inside it well we had the default content we had so far so we had the default TT sice that we can get rid of by just clicking like the little like um Kebab that here Kebab menu to delete it and then we can add a slice and from here you can see we have our eror slice here next the with a default variation so we can add it and from here we can input content inside it so let's input a content from figma so we had uh productivity as flows with your life so let's get to the DA mode select that text and here I have t content that can copy can can get back to prismic pass it here at flows and we want to like a like um non-breaking space with your life then for the body we add uh an isue potential so again you can click that copy it from figma get back to prismic paste it here or the button text was straight for free or trade for try for free uh Bon link will stick with like a link to the web for just to say go to prismic and for the image here uh well let's export our image from figma so on the figma um design here we have a component styl in assets and here we can find our dashboard so we can click that and I can click uh on the de mode here we have the assets and we can say well I want to export it I want to export this Source image file and this gives us our image here I can like just drag and drop on my desktop and from here I can go back to prismic select an image upload media and I will take the one here that is on my desktop Now it's uploaded I can take it here and without much if I if I were to save my custom type here publish it and now if I go back to my next St server this time here can it refresh and we should see our eor showing inside our page great now let's create a slightly different version of our eror slice prismic variation features makes it easy for marketer to select a different style of the same slize and you can create them in size machine so if you look at our figma file here again uh going back to this siis page we have our eor component here for the default error but as I've been saying a bit like well this is a variation of for ear like it's another version of it and the only real difference that it's instead of like being like stacked like vertically like it's stacked horizontally now it's like the text on the left and the image on the right so well let's see how we can create that in size machine Let's create this horizontal layer layout inside size machine now to do so I can go back size machine so if you're on the changes tab you can end the slices tab we'll pick our error here and at the top here you have this little drop down that is like our variation drop down so by default I only have one default variation but I will add a new variation and I will call it horizontal like this so it creates like that's the name that's the ID of the variation and it tells me like like duplicate from the default variation and what this does that when I create the variation I'm on the horizontal variation now and it has duplicated all the same field from our default variation and the great thing about variation that you can like very field inside them so if for example like inside the horizontal variation we want to add like two images I can go and click add a new field pick image I'll name it like image two save it and now on my horizontal variation I have two image field whereas on the default one I only have one so getting back to my um horizontal variation I will delete this new image field because I don't need it in this case we need like just the same set of field I can hit save this set my slice what we can do already is upload screenshot because like we just pick them together so click upload screenshot select the file this time it will be the ER slice here here we go and so now if I switch you can see like I have like the default screenshot for the default variation and the horizontal screenshot for the horizontal variation and now we can go back to simulator also and so well what we'll do now is we'll update our template so that like the horizontal variation looks like what it's supposed to look like from our f so to do so well let's see what we're doing in our FMA so really we're switching from like vertical layout to horizontal layout and to do so well we can like perform some update but first of all like how do we know what variation we're on well prism gets us this really neat uh data on our size which is called like size. variation which as you can see tells us what variation on is are like default or horizontal and we can use that to know what variation we're on so for example if like a quick like P tag here and I say like this is the horizontal variation and I add like a V if statement here to say like well like only on that kind of variation go like size. variation equal equal and say orizontal if I save that and get back to the simulator here well you already saw it I think but you can see it say like this is the horizontal variation and if I go back to the default one we don't have this is the horizontal variation anymore great so well let's update our code here to reflect our new variation and the main thing we need to do here is really to Tinker with our D stack so that like the items are placed differently and so we can do so with your JS by just adding like a V bind V binded class vbond class uh like this and from here like I can like create like um a new object like to buy class that conditionally to this div so go like let's say like U on Medan like on my horizontal variation need to be like in a two col layout and this will only need to happen on medium size or bigger because like in Mobile we need to switch back to like a default layout so I go mty GD call 2 which equals to like saying like that on medium screen and AER we switch to G template with two column and here I would just say the same thing we said here actually just slice variation equal horizontal and if I remove our little like P example here I can save that and now you can see we already like getting closer to what we want next we also need to update this one because as you can see on Sigma when on this variation like the text is like aligned on the left so we need to get that alignment back and to do so we'll um well we'll need to get rid bit of those like ATM Center Tex Center we'll apply them conditionally uh if it's a default varation and so to do so again we just like do a bit of um alignment and we'll do this time a class this is an object we apply those classes here and what we do we just do that if we are on the default variation and so as you can see the data is on like aligned on the left and going back here what we can do is uh well maybe adding like a bit like a longer text to our Mark so like it looks more like what that we have in the design and we'll go like uh try for free and well like we're pretty happy with that FR we can also like replace image let's take a fruit uh avocado like this and well we can save our Mar and we're Happ with that so now what's left for us to do going back to SCE machine like editor here we can like push that to prismic um so we already added a screenshot here earlier on it's all saved can go back to the changes tab can now see like our eror size has been modified because it now has two variation I can click push changes to prismic and we're pretty much done here so it pushes to prismic if I go back to the page builder here you can now see that um when I want to add a new slice I have like two or two variations showing up here so I can add another one if I want to and uh start like thinkering out with my slice but uh well we'll stick with the um with what we have for now so just Del next second varation it's save again um and so well great like that's wonderful just a new variation toward nice variation is super powerful for everyone on the team they all designers and developers a few options to the content team and they ire marketers to build many different pages that stays on brand so that concluded building our first SCE from scratch well great congratulation you get it this far so let's going with our progress before we move on to making another slice so I can again go back to vs code to the source control tab here I can put like a little commit message so like fit your slice I is a little like check mark here and this all commits everything to my git um repository here cool now that we have our first slice and variation completed let's move on and build our next slice so if we go back to our figma and check out um our sizes here the next one I'm going to build is this feature size right here and well we can see there something a bit like different on this size there's this repetition of um little like uh article here about like with an image a title and a description and well let's see how we can hand that with SI machine so I will go back sice machine I will go to our page type Pages add a new slice create from scratch and here I will call this nice features and so well let's have a look at our FMA and see how we can handle that so first of all we have a title like we have a heading here so we can do this heading so let's get to our snce here I'll go to next features and we'll add our heading so I go like reach text I'll name it heading and this time I will only allow H2S here I can click save and now for our um little friends here like the little article so how do we un them well have two Choice like one option would be like to just like add four times like uh four headings four sub edings four sub description and four Images but this is not really a convenient for us and doesn't give any flexibility to a concentrator in the case they want to add more icons like maybe they want to add eight of them maybe some one to have only two so to do so what we can do is to Leverage The repeatable Zone that we have right here and basically repeatable Zone will allow content writer to repeat those elements as many times they want inside this slices so let's think about like this um content modeling here so how do we model this little next scheduling uh card here first all we add another heading so we can go here click reach text so this time I clicked just to show it again I clicked add new field on the repeatable zone so I go here reach text I will call this one um typ tile just to because not like the eding of a St just like a title of a card I will unct everything onow H phrase then I'll do like the description here so again I'll add a r text field for that another R text field I'll call this one description and finally we have this icon here so see icon and you know they're like a bit fancier not like just like regular icon and by thinking well like this is an image and well that's you're right like we could handle that for an image um however like because like those are like really like special icon like they're like on brand they like uh really like they're like fluze icons not like just like any any image that can go there so what we can do to handle them is instead of having an image we'll have a select field that will allow us to decide which icon to display within our code so we can go to ad field click select here I will name this one icon so I'll drag it to the top just to like the same order we have here and now I can click like crayon here and add options for sa field so as can see we have like a few here so we'll start with my calendar because it's our calendar first one then we have the bar graph so go with bar graph then you have the little like Clover element here so I'll go again with Clover and finally we have The Hourglass like infinite symbol here so we'll go with our glass so we have calendar paragraph close over and our glass I can click done and just so that it clicks a bit more like I will save my size here and click the simulate button and you'll see what the repeatable Zone looks like uh in the editor uh here so you can see a have flame here showing up and then I have my repeatable zone and you can see defaults with bar graph examine and like some text and I can add as many as many items as I want here so I can go with calendar heading spring and I can another one and so on and so on so we'll play with that that in a few just one thing I noticed that we might like need to do is go back to our um slice modeling here and I'll go update my icon again and there's this like really useful checkbox here that we can check that is use first value as default calendar so check that and this will adjust our code here to start with the calendar by default so if I refresh the page and go back here if I had another item well I haven't saved so we'll save and go back here again and refresh you thing so if I go back and click another it and see now it defaults to calendar so it's a bit more convenient for a Content writer to move on cool so we modeled our size here and now we can move on to templating it and have something that looks like this because for now we only have the default placeholder s so let's do that if we head back to our code here well let's put it on this side as we used to on the beginning well shrink a bit the simulator just like our tiny preview here we can close everything and see that like size machine has created for us a new features directory here inside it have our default code with the um default like placeholder component that we're seeing here so we can get rid of that and start like templating our well actually let's skip it but we can start templating our sze so well uh you will'll use the same trick as before so for to get started like will are bonded component which will do like the little like containerization over it then we can like um expand it a bit here because what we'll do use the same trick as before which shows the cut Snippets uh for our uh text so we can like use it so I'll click like copies got Snippets from like um our heading so I can add it here easily and then what we'll do we'll do our little uh content Loop here so well for our car like to loopover again we can show the Cod snippet we have like some like helpers for us but when to to do the loop first so we'll do with a div here we'll do like a V4 and we'll Loop over item of slice. items this is all you can access as the [Music] um uh this is all you can access the repeatable section of your size and then just a key so key and go with um item. icon and if there's no icon just like default an empty string and from here we can like log our item to just see what we have like this um going back to the simul the simulator you can see we have like a first item which is an icon Hour Glass with some title and the description and then we have another one which is empty so while from here we can do our templating so first of all there's one thing I want to show you that for now we've been using prismic reach text to display our heading so what we can do instead we can use just take prismic text which will display also writing as you can see here the only difference being that for now it will display it inside a plain div so have D flame so to displate inside an H2 as we want here can go here and say wrapper equal H2 and if I save that canot see it's displayed within an H2 cool um now we'll do our style on it so we can leverage the same um technique as before so remember we created together a few classes to handle our adding com our adding style like easier and same for a button so we can go back here and apply our class so we'll go heading for our heading class which will go to like bold and everything then go adding iph iph MD which gets it like this and finally you can do like um well do some padding underneath so go like mb12 and then text Center to center it like this so now we have our heading done which should look a bit like what we have in figma with rist features cool now let's focus on templating our section here so what I will do first is just like add a bit more like icons here so I'll go like with the calendar by default then we have the bar graphs and we'll go with the Clover and finally we'll go with The Hourglass then we for a few addings so we'll go with um examine search contain protect here we go uh we'll pass the same like a description here and what I can do I can click save Mo get rid of the editor and you can see we have like way more content not to display within our items so using that we can go back SI machine and we can next start like um using the snippet from here so I can copy the icon which will just show me the icon can copy the title like this I can copy the description again here we go and if I save that get back to simulator can see have something that looks a bit more close to what we want so for the title with the same trick as we did on the heading here so we get rid of the Rich and I will just display it as a prismic text I'll display it as an H3 so wer H3 and I will apply my class also on it so I go class and this time I go adding adding iph I small and then I will say like well on this one I think like the font needs to be like a bit lighter so if I were to save it like this like it's like re bold font so I go like font medium to use like a medium version of our font and again here I'm using the question the exclamation mark at the beginning to force TN to mark this class as important as you can see right here so well what else we need well we need some padding underneath like to underne like to separate our uh adding our title from our paragraph so we'll go with uh pb3 here we go and uh so we have our padding and now we just need to display it as like a card on this side so to do so I can well right now I'm just like coping over it so I'll wrap all of that with another div here we go so I can bring my div here I go class and this time it will be grid so we'll say that by default like this on mobile on small screen it will be like a grid with two columns so grid callose two and on um large screen L will go SC call 4 because as you can see on our figma uh this design like gets like to um a little like horizontal vertical layout once on mobile so we'll go like two colum on like tablets and like four columns on desktop so going back here uh saving that we already have something that looks great here um what else we can do we need some padding like some gap between each of those elements so as you can see like it's not like um like there like 30 pixel of Gap so we can do so with adding by adding like um Gap X8 which tells like talent to like add a gap on the xaxis um what else do we have it's also like a bit more constraint than our containers you can see here like a container is like 108 pixel like it's concerned a bit more so we can see like is both sides of that um I assume uh if I go to the frame here you can see like it's um more like a th000 pixel wide so to do so here we can go here and add a class again so we'll go with Max with 5 XEL which is about like um a th pixel um we also like at a gap like a vertical in case we have more item so if I go here and add like another item uh with like a heading uh you can see like it's like really like stack on top of each other so it go like another Gap so go like an a gap on Z Y axis so go y 12 and this this way like we have a nicer Gap in it so we just get rid of this new element because we don't want it for for now so here we go um what else what else do we need to do let's have a look at our figma yeah we need to hand This Ti on our um description here so let's do that so I will go like on my prismic prismic Bri text that this spring of the description I will add some class to it and this time we'll say like a text base like base uh style or font medium well the font body is like that's new s that's like more leible so if I save it can see it's a bit uh a bit better like to read um and then I will like text slate 6002 like the little like grayish uh slight color that we have here cool starting to look a bit like our design uh what else we need to do um yeah we might need to is there like some kind of card no there's not some kind of card um so let's get back here we have our grid gals to we have the max SD uh might want to center it horizontally because in like as you can see it's like Center on left so go like MX Auto like this now centered um we like a place everything uh Center like in case we have like a really long one for example um just that it looks better as you can see here in case we have a long one what we do we call SM Place items uh start so like it looks great on um on desktop but like on Mobile screen want to like to place item Center um col like this will look better so Place item Center uh and this me like if I go to like a mobile layout so if I go like for example like um 480 it's not PL like the way we want it to be so let's go back to this layout like more desktop layout um here we go we need to thinker with our card so go like class we like um max with xess to like have them like not being that big in case like we missing one uh because right now basically like I haven't saved here and if I remove one oh no it's a great call it's a g layout so it will be like this so we keep it like this um like a grid uh on this layer so like it's um display like um as a column correctly so go grid go SM Place item start on on mobile go Place items Center uh on mobile go is text Center and on I go like text left the reason I'm doing that that as you can see on our design here on mobile like everything is centered in um like this and so on size machine here I can update the we I can use like this little drop down to get to Mobile you can see now it's like all centered in the in the center well it's all Center basically cool uh getting back to desktop um what we need to handle still is our icon so how can we do that as I said like we not using uh images here we're using uh we just have a string coming from prismic and so what this means that we can use this string to render the correct icon so to do so want I get a bit more real estate on vs code I'll create a new component and I will call it icon so go like icon. View and from here I can go like at a template and here we'll pass our SVG for Icon now go again a script setup with long typescript and now we Define our props so go like Define props again we like opening tag here to add our typescript interface because we're doing our types in typescript uh for our props and here I can just like open a new object and I will say like what what is like the shape that I expect from my prop so what I really want here is the name of the icon so we add name what you can do in tex say like well want name it's a string so Tex will be happy with that but in that case we don't we we cannot accept every string we have a calendar back graph Clover our glass and we won't have anything else so what we can do instead we can go here and say like calendar with a string or like a little like pipe here like to say or typ so or B graph or Clover or our glass and if I save that now I can have like my name can see it's like either calendar BPH Clover or glass and this will all to say which icon we want to use so here I just like say like um I just had a d for now and it's like a sh name and this will allow us to get back to our component here for a SCE and to apply our icon here so I have my icon and from this icon well I'll just like slap it inside the div I'll say like if we have an icon so v v if item. icon and here uh we'll un like our icon with the name so we'll VB the name it'll be like item. icon we can Auto close that here just like um a small padding underneath so as you can see like on on figma like we had some padding between that so we can go back here and go class Marchin buttom five to padding and now we need to render our icons so getting back to the icon component we just created here what we can do is fetch our icons from figma so going back to figma here we have our size and we have our icons they might be yeah they are available here on the component sty and assets page and from here what I can do I can select my icon I can click right click it and click copy s SVG so I copy that go back to my icon template I will paste the SVG and that's the SVG of the calendar so if I save it here you can see it's all like calendar is and well uh cool but that's not what we want so what we can do here just saying like a V if and say V if name equal equal calendar and now we only have a calendar showing up and now we can carry on and do that with the other icons so I go like with the back graph I right click it copy as SVG go back to my component past it I can save to get like formatting from ESN and here go the if well I can go also like the L if in view in that case and we'll say the L if name equal equal paragraph so go we are there so you can go to the Clover now again right click copy s SVG going back to our component past it save it and add the VLC statement name equal equal Clover and finally the last one 20 hourglass again right click copy s SVG go back to our component past it save it and fin go like a v l name equal equal hourglass you can see it was the last one that was suggested to us so so that's all thanks to um that's all thanks to typescript basically and here we go we have our uh little like a new feature SL ready to work on prismic we're finished with the templating it should look like um like our size now so as you can see here we have like the uh same layout uh oh actually well no it's like not looking like it yet we have forgotten like some things I think on the on the description let's just check description we have this and so what we might want to do is add some kind of leading leading uh six no W go leading and we'll go like leading uh relaxed well maybe lose and this might look a bit more like what we have on figma here so we have like like a really high high leading and that's what we have here our component also like looks great on mobile now and I think on tablet it should be well not here on tablet but maybe on like if go like to something kind of small layout you can see it's like all like stacked like this cool go back to desktop so happy with it we can save our marks if it wasn't done already we can close that get back to size machine so we can update a screenshot so remember we extracted our screenshot from figma earlier before together so we can pick our feature one here it's uploaded we can save it here we can go back to our change Tab and from our change tab here well can say again our page has been modified so we it's now featuring our feature size and we have a new feature size here and so what we can do we can hit push to prismic and this will make this size is available on prismic so again like going back to our page builder on prismic Tab here now I can refresh to just get the new data and can see I have now the feature size available here for us to play with in prismic and so while we're PR much done with our feature slice so what safe for us to do is to commit it uh to our G repace story so go fit feature size I can save that and well that's it so we made a feature size and we just learned about how to use the repeatable Zone inside SES great for our next slice we're making our testimonial slice so looking at figma well we're done with our feature size now the test size so you might be thinking well cool like right is all of that Lucy so it's already like a repeatable Zone with like a tit like a description like an image a title and everything but well this time we're going to use another technique um this is essential for building a prismic website is great to have in it toolbox so well in prismic content relationship like our way to establish a connection between different content type for example you could create a blog post custom type and then off for custom type then use a Content relationship to link the blog post to the4 allowing you to reach R and display the offers information along with the blog post in this case what we're going to do is that we'll create a testimonial custom type and each testimonial will be its own document and then in our size we have a Content relationship to this to testim to the testimonial document type so we can pick like a a testimonial to be displayed here instead of having to enter all those data every time we want to this testimonial across our website so well that's what we're going to do so we start by creating our custom type document type so heading back to slice machine here I can go to custom type Sy time because this testimonial like won't be a page on its own we'll click create we'll use the reusable type because like we want to have multiple testimonial this time compared to setting or we only want one settings page one one settings document for testimonia we won't take as many testimon as we want so we'll use the reusable type we'll name it testimonial like this click create and now we'll start by adding some fields to it so first of all we click like new and we'll add a name so the name will go like the key text we go like um name and that will be the name uh of for in that case could be like Aisha W so we'll go name then we have the uid here that was already here for us so we'll put in next Second and the U as I say like the slag of the testic just a way like to to like query it within prismic or like to reference with a page we can keep it like this or add another field same to B the job title so for job title like is like digital marketing specialist in this case we again like use a keex field and we'll name it like job title we add again a new field this time will be like for the Avatar so we got an image name it Avatar and what we can do here can maybe like constraint it size like 256 on both like we like a square Avatar here and finally we have the quote so we like um add a new add a new field this time we go reach text because the quote like maybe bold inside and things like that and we'll name it quote will be rich text we can click see the crayon here UNS everything just s like one paragraph bold and italic that you can have like a bit like richer richer quote without having like a block post inside them you can click save and now we can click save on on slice machine it saves our custom type and well that's pretty much it so now we can create slices that display our testimonial so let's create our slice so again this time just to change I'll go to slices here and create a new slice I will name it testimonals and click create this will create my sze for me inside my file system my project on the non- repeatable zone as you can see here we still have our heading so we'll add our heading again so go like with Rich Text we'll name it heading we'll K it a crayon and enable everything well enable only H2S because only want one H2 here and then we'll use again the repeatable Zone here but as I said instead of having like um a field for each of those items we'll just have like a Content relationship field and we'll name it um well okay name it teson have testimonial right here we can click this crayon again and here we'll SE the type want to constraint to so we can like con to a page to settings or to testimonial in now case we only want testimonials here so I can click testimonials and I can click down and now I can save my slice I can go back to my page here because this time I created the P the slice from the slies tab so I can go to my page to my page here and I can like click add slice select existing testimonal and this add the SL to my to my page custom type we can also get rated of the Rich Text SI that was actually default one we're not using anymore click save here one thing we can also do is um add a screenshot to our testimonial SI so even if it's not developed yet we can still add a screenshot so we can click select and we can pick our testimonial screenshot that we exported before together here we go uh it's not pling here we go so we have it and now inside our change tab we can hit push changes to prismic and the reason we're pushing changes to prismic yet is that this T simulator that we've been using so far is not capable of ending content relationship uh as of recording this tutorial it will be soon in the future but for is not it's not capable finding content relationship so what we'll do instead what we already other our s prismic and I create a few testimonial together so that that we can do the templating of this new SL let's get back to our document triler and we'll start by creating our testimonial so maybe it should get speed up because it's not like that interesting uh it seem like a writing like a just testimonial but we'll see about it so we'll start with Emily so take like it's well maybe don't maybe I can type that uh so let's have the page have MW MW she's a ux designer we need to take the image here so like click here and like download it so I will take like see Source image uh downloads it here so I can like get it on my desktop well actually do the same for like all the other images so I can click here take the source image get it to my desktop and same for Aisha I can click here Source image and get to my desktop so will be able like to upload it with prismic getting back here can click select image upload media I can take uh this one which is uh a here we go um so that's not em replace it with em uh and then the quote so I can just copy it from figma get back to prismic past it here and we have our quote trying up cool uh I'm wondering yes that's a re next cool so that match I need a uid call so yeah we go like a w click save publish so you have one of our testimony already can go back create two more go here testimonial this time we'll do like Mark so we go like Mark error we go with Mark error sh tile Mark is a nonprofit funer sect an image well upload Mark so Mark is this one we get Mark here we can get this quote get back here pass the quote uh save and publish and finally we have Aisha so again we'll create the testimonial uh here we go testimonial so this time it will be Aisha W to be AA W CH title she's a digital marketing analist specialist sorry SE image same deal upload media F time Aisha is this image here we go can get a quote copy prismic that's the quote save publish and now we can go back to our documentary and this time we get to our Ownage here and on the homage what we'll do we'll add another size and we'll have a sze named testimonial size so well you can just add the title so what our user say so what our users say and now we have the repeatable section here so I can like click add add and add so have like free testimonial and I can link to a testimonial so we have first em then Mark finally Aisha I can save that publish and now what we'll do this time is that we'll work on templating our SES from next server directly going to vs code we can go to our slides so going to our new testimonial SL here starting like to get the Ang of it and Well for now we only have like our placeold component for testing SL so let's start just setting a bred component here so like it's all centered correctly and what we see here we can like just just log what we get from prising so we got like loger size um and actually size items get like on items and we'll go like the first items to see what our testimonial actually looks like so can see you have our first testimonial we have an ID for it we have the type we have the length we have the slag there the first publication date like there's no well only thing it looks like our T like the uid that we have here is Mew so indeed by default prismic when we have a Content relationship to something it it's only giving you information like metadata about this document if you want to get more we need to use a a feature from prismic which is called Fetch link and fetch link is used when you query the content from Prism it's basically some kind of like mini graph feature that you that allows you to tell prismic well actually whenever you give me something from this type of content relation ship like give me a bit more like give me like the name title and everything but to do so we can add to our index page here and update our query to prismic so you can see here we're using like prismic c. get by uid Page and home and one we can have we can add another um element here and we'll name it and well it's an it's an option object you can PR to PRM on cing it like there's a lot of option you can proide to that what you want to provide in this case is the fetch link option so we'll go like fetch links this is an array and this is basically an array of like fields we want to get from our testimonial um document type so go like testimonial do quote and if I save that already we can now I have the quote coming up and so we can do that for all the felds we want to get from testimonials we got we want see quote we want the Avatar we want the name and we want the job title and without mat you can see already like now I have all the information we need like we have the quote we have the Avatar we have the name and the job title so we have all the data we need to be able like to template um our job TI like um our testimonials correctly within our testimon slice so well let's see our FMA so first of all one thing we can notice quickly is that we have like the same like um heading as our feature size so we can like copy that like steal that from our previous feature size so go like to featur to our feature size I can click the heading here copy it go back to my testimonial and past it so this allows me that like when I go to next you can see we have like what our user says now and now what we need to do is that we need to Loop over our testimonials so what we could do we could Loop over st. items but the issue that like well maybe like well this will cause this issue with typescript because as you can see here like if I go like a column like typescript doesn't know what we have here uh if I give like a quick restart to view um well you can see like we have testimonial indeed but like with then we just have a link type we don't have anything else so what we can do in s to just fix that we can make go here and what we'll do we'll go like a con testimonials and basically we'll extract the testimonials from our s using a view computed properties go like this an object and what we'll do here we'll return props do slice. items and go we'll do like a map go like item that call Item item do testimonial you just like to flatten a bit like the object uh yeah and so well yeah I'm using props but in like first all we like to extra our props go props like this and now we get our testimonial So like um you have an array of content relationship fi for testimonial cool getting closer to our goal but what we want to do first like we want to filter so basically we want like on on prism like what you can do you can like add a group but like maybe it's empty like well maybe it's con in fielda or something like that so to print any issue with application we just make sure that the field is filled so we can do filter here and like filter on testimonal and what we can do yes just prismic is field helper so I'm importing content from prismic client what you can also import is is field helper like this and I can do is field. conent relationship and I give to PR to V helper my conentration go testimonial and this just returns a Boolean based on whether or not my concentration ship be is filled and from here what I can just say which is like a bit like cheating but basically uh the SCE is not to where like we use fetch link on our page to get our data uh with like more information from prismic and so to make t script aware of that because like here if I go and go like to my testimonial I go like testimonials to Z yeah I still have just only like link type so to fix that I can cheat a bit with typescript and tell like well actually actually this is something we don't know but trust me it's really a Content that it's really like a testimonal document that we're fetching here so that's not really that's not technically true but but it's true enough in our case that we can use it like this which means that here now if I go and click column can see we have all the data of our document for us and namely we'll have inside data we'll have the Avatar the job title the name the quote and so on so from here we're ready to template our testimonial cards together so let's do our templating so we can go back to next well next I freaked a bit out so let's just like un block it cool um and so from here well we need to do a loop so again what we'll do we have like a div that wraps everything and we'll do like some classes on it to do like grid layout and then we have a div that to Loop over here and I can bring inside like my Tes of data what I want to say like V4 and V for testimonial of testimonials that we just created together computed property right here then we need to add a key so we go key and what we say like a testimonial. data. name and if we don't have any name we just give an empty string it will be fine for us can save that and our uh ER my testimonial we see like we have like all testim so one two and three just to see a bit more what you're doing we add the grid so go like grid uh class grid on our wrapper D here so go like grid uh we'll say on large screen it's a grid call three um and on small screen I just like one call grid so grid call one like the gap of eight uh so like that will be like 32 pixel because um if you look at our FMA here on desktop it's like line like this like free card on mobile uh it's like on top of each other vertically layout like this so this gives us a bit like closer to what we want to do and if we like try like to narrow thing can see it moves on to Vertical layout like this um so that's all we need here um going back to our card here we can see well maybe like let's get rid of those like really like ugly Jason so first of all um we'll go like a prismic r text go like a rich text this so go like save close it when to Pride it with our field and here will display um our quote so go like um testimonial. data. quote and so this should display our code like this I went to a few classes on it because it's like a display like um in a big way so it's main like um like a great leading and like um a bigger font so let's work on that so like class and here will go with text Exel to have like bigger text then like on medium screen ler maybe like go even like higher so like we'll go like two XEL so it's like 24 pixel which is what we should have here I think and we have 24 pixel and the mobile is a bit smaller like it's actually it's also 24 pixel so maybe we just we don't need that we can seeti with just T to excel to have 24 pixel everywhere like this um what else we need to do we need like to other font for body which like a bit more likely um go like text late 600 to like a bit like a grayish um color like we like we have here no 700 s right all right so let's go with [Music] 700 then we'll add like a margin btom at because then like we have our other content coming with it so go like a div and go class Flex uh items Center so here in this D what we'll do that will display our image here and then like our stack with the name and the uh job title of this person so you can go back here what we'll do use this time the prismic image component the prismic image component just like the prismic reex component is using like a field to get the image from prismic go like testimonial. data Avatar and as you can see like our image it was really big on prismic um like just as a reminder like it speak like this like it has been served like smaller by iMagic which is prismic image CDN and this is already sing us some bandwidth and time but well we can like now like do the sidey to have it fit our design so go like class um go like runed full to get like the runed version of it like a margin right uh because there will be like some text on the right and then we'll do like um aspect Square in case like first one that is not like a square to start with we like a width so what's the width we want on that it's 56 pixel on mobile and on desktop so you can just go with 56 pixel um don't like this can just go like this and eight because the same and um yeah so that's that's already well that's pretty much everything we need here so have our image showing up next upep we need our uh job title and name so go like another div well like this time it's like all um key text like it's not we don't need any Rich text with testimonial. data do uh name and this want data. job title like this so showing up like this so we'll just like wrap each of them with a P tag up here we go and then we go P like this um so for the name what like it's uh 700 16 pixel okay noted so we can go here going to go class go text B font medium and text slate 700 here we go and next for the job title it's a bit later I think yes it's later so it's 500 so I'll go again text space and text slate 500 like this um one last thing we need to do is like we have a quote like it has like a bigger dating so we'll work on that so we'll have our R text here and we'll go with leading 10 that's 40 pixel leading just like what we have here so like lead line 8 40 pixel and leading 10 is line 8 40 pixel nice and well um we missing one thing is like we have like this little like card like it's like it's like SLE like can see like a white fromed card so let's just work on that we can go to our um for Loop here can add a class so what we'll do we'll do like um bgy to start with have a shadow LG because like there's a small Shadow to it um you can see like a shadow to It Go Shadow LG uh then we go like red LG ver like a red uh corner to it cool um like a border do we need a border I don't think we need a border is there a border uh there a really light border I don't think we need it yeah no I stick with a white background I think like this and so now we just need to work on the margin so on desktop we have big margin on mobile we have small margin so let's work on this gradient of margin together so go px8 on mobile and on medium go like px14 like this um go py10 on mobile and on desktop go like a py 16 like this uh we'll say it's agreed and make will space content between here we go um great so now it's all line like correctly as you can see here and oh that's pretty much our design so looks like this and on mobile it goes like this in um this stack de cool so well great we just made our testimonial s together the main thing we learned in this lesson is that uh we like to create like different content type in prismic and to reference them through content relationship uh inside our sizes and this allows us to fetch those data inside our SES smartly get just what we need to template it correctly inside our size the last thing we need to do together is go back here and do our commit message we go fit testimonials SCE we can click the check mark and now it's all committed to gab and you're ready to move on to our two last sizes we just worked on to like complex s like testimonial SCE and the more like SLE um feature SI which involved a lot of new uh notion and concept like for us to learn about we're not work on a more like simple size which is our um text image size that we have right here so what we'll do for this one is that we'll have two variation we'll have like um a text right uh a te text right image left and a text left image right uh those will be two variation and well it will be quite straightforward to template them we'll have like a heading field a des body field and an image field and a variation for each of them so well let's get to work with that on sice machine so I go to my page type here can click add slice create a new slice here this time I'll name it text with image like this and so I'll go with my text with image can already update the screenshot so I can like pick our screenshot so go like a text with image one so it will be like um text text uh this is already failing me every time B well no wor is uh we'll see on way to fix that um so the first one is like you see image on the left text on the right um we'll add a few Fields so we go like adding so like again adding with a rich text field will only allow H2S then we have a new field which will be our body go bu and here for body and select all just like paragraph bold and italic click save add a new field finally and it will be our image like this save our image and so from here what we can do we can already save that we can create a new variation and this time our variation we call it image right can save the variation so now we have two variation have the default variation and the image right variation so we can save it upload the screenshot select a screenshot this will be text with image here we go we have text with image so we have two variation have the one with the image on the left the one with the image on the right and while we're done with our templating we can click the simulate size button and this will get us to like a default placeholder size as we're used to now and we can get ready and start templating that together okay so for the template it will be quite straightforward what we can do is like going back to this code we can open our new slice close everything else um what we can do here is maybe like just apply already our bonded component which gets us a nice container and from here with we we can go back size machine click the show cut Snippets and we'll like just copy paste everything to get us a bit like a head up head start on our component so like this going by simulator we know like our header our body and our image and now we can start working on the templating so we'll have our image first here inside the H chnl and now well let's just get that align correctly what we'll do we'll uh wrap everything within a div so this allow us to control like a flex box and like the flow of um everything well actually maybe we not do a flex box just do like um a class with like a grid set like on mobile we can like switch to one column layout so like GR gap eight uh so Med man go with a grid call to and we'll Place item Center so like this so we already have like um our image on the left and our text on the right uh and actually like our um body is underneath so we need like to wrap it with our title so it's all like together so we'll wrap that with a div like this and go [Music] here we have our div so maybe there's like some kind of padding underneath that's eight pixel so like eight pixel in T is like P2 go class and go like a margin btom two like this we have a small margin uh again we want to choose like a rich text here we just want an H to go prismic text where the wrapper say like well want to wrap that with an H2 and now we have an H2 uh if we were to inspect our element it should be an H2 here we go so it's an H2 um going back to our code we can maybe get rid of that to us more real estate and have that bigger here we go it's maybe nicer uh into our more class we'll St our adding classes I go adding adding LG so that's for eding uh for the rich text here we'll also add some class um gole like text LG font body and text late 600 like this um yeah I'm happy with that um so what we might need to do let's see yeah it's it's all tiny so maybe we need like to constraint way like we are like 3 25 325 yeah that's our designer wanted that so let's go here and let's see what we're doing what we'll do is just con that in terms of like weight we go uh weight go like Max with MD which is about what we wanted uh and yeah that's pretty much it we're getting closer um and we're getting very close actually uh um what we need to figure out now is how we can Center that piece on our um I can Center that uh text within within like the oh I don't know how to speak uh we can Center that part with the image so to do so get back to our uh D and it should be already place oh not Place contents Place item Center and now it's centered cool um what else do we need to do we have imparing here uh there's some kind of weird oh no that's because our image really tall here okay cool uh so that's fine then can go to our image can apply class to it so class go like runed LG we have like nice roundness on it and well you can see like I was already on the image right variation that's not what we want we have like the little like default variation for the image right actually like let's just replace that with a more squarish image like this like looks bit more like what we want to work on and so here we need like the two revers we need like the chamber to be here and like the image to be on the left to do so we can go on our wrapper here we have like a class which are our basic class and what we can do is like just use again like a conditional uh class here and what we'll do revert the order so go like on medium go like order two like this will revert the order of like the first item the second item together and we say we only want that when our slice. variation is uh image right like this uh so this is not working yet oh yeah my bad um we don't need to do that on the div itself want just to do that on the image so going back here can go to our image save it and now it's like reverse like this so if I go back to my default variation it's like this go back to my image right it's like this so well let's just like a bit what we're doing here uh again like when like um a 498 so that's quite straightforward can go to our Rich Text here call like cading 10 this goes like a a bigger text like this we might want to like the T like 24 so like LG is like only 18 pixels we go like maybe 2 Excel for like getting 24 like this and then like that's like 8 pixel cool on mobile it goes down to still 24 so we can keep it like this and our text is still like this cool so we have a variation done um well and we're ready to proceed so again like we have our image right here we have our default variation here we can save our Mo if it wasn't done can go back uh to slice machine on our change tab we can see we have two changes one for our page where we added our new IM text with image slice and one with our new slice here with two variation Network on together we can push all of that to prismic go to vs code and do our commit to git so go like fit text with image slice and we're getting really close to like getting our side down like there's one slice left and so well let's get to work on that we're getting really close to finishing our work on the SES we worked on the eror sze the text with image sze feature slice testimonal slice and what's left for us to work on is this little like really cute um call to action slice so well let's have a look a bit at the design already so we can see it have a heading it has a body it has a then a button with a CTA so with like um just like trade for free which is would be like a label and like a link on top of it Buton so let's get to prismic and create this quick call to action size together so I go to size machine go to my page type here I can click add slize create new I'll call this one call to action and from here I have my code to action size here I can again um add the um the um tumbate to it so I go with C action here we go I have my thumbnail which again failed me but that's fine so go again call to action now it's good have a call to action and now we can do templating so as I said on figma here we have like a heading a body and a button with a CT link and the CT label so s to our adding adding we only allow H2S we then add our body we only allow a paragraph bold and italic we get another field this time it will be our button text so for button text will be just a key text field so go like button text and another field which will be this time link like button link I can save all of that open the SIM Ator and get to template all of that and again we will leverage our Snippets to get a head start on our component so I can go here open my component make it full screen and we'll copy like all our little like Snippets here so we'll go one for the heading one for the body we'll text the pon here and will put like inside the link we go we see bet and text going back to the simulator we know see all of that uh we can like keep like see try it threee we can close that and now we we're ready to template so first all we get like our bonded component here and now if we look at our FMA we see that we need to do some kind of small card here so again what we'll do for that we'll do like some kind of th we let like some run um border Rus to it than could drop shadow and then we'll see how we can do this small gradient with Tailwind so I will like wrap everything inside the div here we go I can move all of that inside it then I add my T classes so as we can see here um are like little cards like way smaller on a container it's like a 800 pixel wide so we'll work on that here so go like Max WID for Exel for example and this does like 00 pixel cool uh we'll do like a MX Auto to like Center it horizontally um then we'll do like some kind of gradient of padding because as you can see here like we have like a big padding on um on desktop and like a smaller one on mobile so let's do that so we'll say something like um on medium screen and a will look like a padding of 12 uh just like a small padding on um on mobile go like just four uh go like Ping of 12 again on everything um like by default on the Y AIS um then it go go like a grid to like display every item set it as a grid we'll do like Place items Center this is the way just to Center everything correctly um we can well Canada runed LG already this will like had a b Rus to our element but since we don't have any background uh we don't see it like a red background quickly can now see we have our rounded radius but actually let's work on our gradient so again like we'll use like the few Talent classes to work on our gradient so go like PG gradient like uh to top right then we'll say like well we start from Sayan 500 for example I can see like like a s background showing up and we'll go all the way up to uh well let's say like twm TM 50 we have no this gradient we you can see also with st I can say well actually like make a stop at the at the middle like with like white and you can see like now we have like a emerald Sayan and like a white strip in the middle so that's for our little like um fancy uh card uh we can add a few more things to it we need like to add some Shadows we go like shadow shadow Excel like this and now we have like a curing up a bit like what we have in figma right here can see like we like emerald and like San and then we have like C like White Strip in the middle so that's what we got here now we can work on our button on our body and on our little heading here so let's do that so well first is a b will straightforward as you remember onon when we're working on our EO component we add a state for the button so we can just add that to our uh link and we'll have our button showing up class button and now we have a button that like has a nice over Style with animation and everything we can now do the body here so for the body we had a few classes uh well first of all we like Center the text then we'll do like the text color go like text St 600 and finally we just like some padding like some margin with the button like this so let's see if it looks like a bit what we have here we have like a yeah we have like a 30 two so that's eight indeed and then we have like um just the adding to do which has like a eight uh pixel margin within it so let's work on our eding so we go like MB two for the margin bottom we go like adding uh adding adding small and well we can save that we have our adding showing up uh we can also like simplify CH just like prismic text and like a wrapper and time here we say with an H2 so what like like what we did with the other heading in our application so well like that's pretty much it like we have our little like CTA card here on mobile it's looking great like it's on looking on figma it's like more simpler like with like smaller padding and everything um so well we're pretty much done with our CTX s that was quick so we can see like our desktop rep it can save the M get back to size machine instead our change again we're changing our our page because like we added our call to action here and um we have our call to action slice we can hit push to prismic we can go to our version tab on um vs code and do our comit so go like fit CTS slice and well without much check we done with our last slice and we're ready to explore the last part of making our website live all right we've got all of our slices created the models have been pushed to PRM so we have no changes in our changes tab so now let's see what our page will look like with all the content loaded you can either add your own Demi content or like pick content like I will do from figma uh with our like homepage page here so well let's head to the page builder inside it to of our Ownage here um so it's save uh just we like to refresh to get our new SES and well from here like what I will do is that I will pick uh like just enter the content we have on our figma so we already have our ero and our testimonials here I will do like the remaining that we have here so that we can see our page uh completely finally within our next application so let's enter the content together so my figma here what I will do first I will extract all my images using figma Dev so I can have my image here another one another one so I can run export and get like all the pngs for that so I will export them on my desktop so click save and I have everything on my desktop um so as I said we already on prismic have our error and our testimonials so we'll add another size here and I will pick the um text image size so here the adding I'll T the heading from figma so let's just have that like a more convenient place here we go like this can copy The Heading can copy the text here we go and now I can pick my image so upload media here we go let's just see which one I'm supposed to pick uh so it will be text with image SCE photo text with image sze photo so we can pick it here cool uh this is default Val that's what we want then we have our robust featur size so we can go here have uh features um so we add like four items inside it so we like need like four free calendars um go heading so this will be Rob best features then we can do next sking we'll have Analytics have Integrations we have Focus timer so we want the calendar bar graph a clover and an hourglass then we just need to pick our little text here can click like copy to get text add the text add text add the text and add the text cool now we need to do like two more text with image size so I go here with plus pick the other text with with the image right so here what I will do I'll take heading so I'll take um mindful tracking here we go TT the content here copy it select image so again I will upload the image so this time we want two persons we select text with image uh uh nice photo one this one here we go can add another SCE so we go here click again like this one with the image on the left add our heading so this one is productivity selfcare then next tect body here body select image upload the media so this time it will be image 17 like this go have image 17 and last but not least we need our CTA at the end of the page go CTA here so we go like an isue CR inner productivity we'll take the little like catchphrase here button is try for free and the link will just put a link to uh web so like htps slash and then we'll go like a pr. AO so with that much can it save publish and well that's pretty much it I just finished entering my content s PR as you can see here so like all the content from my own page I saved and I published and if I go back to my next website now and I H refresh can also I have all my page showing up just like it does on figma here so cool all weed content for page on prismic but let's not talk about something that I'm really excited about on prismic let's talk about previews now we're going to set up the Fant ftic prismic preview feature that lets you and your content team preview your page before publishing it to the world editor need to be able to preview their work it's a terrible experience if they're just getting publish hoping the page looks the way they want with pring previews they can get to see the changes live on the site without your visitor seeing it yet plus if you're on a big team your editors can create as many previews on different documents as they need they can group their edits across multiple documents into a release and preview Everything at Once that's great if you're preparing for launch of a new product for example and best of all prismic even has a preview link feature where you can send your specific URL to anyone and they will see the preview that you're seeing all right let's add previous to our site it's just a couple of Step first of all thanks to PRP next module you don't have to set up anything within your code so remember when we set up our minimal starter we had prismic next module register sign next and thanks to that well some of you might have noticed it but when we started our next server here we can see it's Lo that it's Lo to us like using default preview page available at for/ API preview that means that we can use this page to run our prismic previews um within our website and in this case in our development website so let's do that so let's head to our prismic rep dashboard so we'll exit our homepage document and here you click the little Cog at the bottom left here that will accesses or repository settings inside it look for the preview tab right here and here we able to add as many previews as we want to preview our work on different environments we can have one for development as we'll have here but we can also have one for staging and everything so we go with like development in our case we'll Target our local support and then the route will be/ API for/ preview from here I can just click like create my preview and now I can go back to my document here go to my homepage and now if I were like to put some changes here so like a productivity that flows like just like this I can it save and for me W either I can publish but like right now it's not published if I go back to my document I can say it's still saying like ativity that flows with your life but now here you can click like preview the page and you can preview on development what this does it brings us to our development server it loads something and then we have productivity that FL CLS and the great thing here is that well you know have like this little like card like with the toolbar that tells us well like those are the documents that we're like using on this page or like the homepage like link document which are like testimonials the settings page and this is what we're playing the H page you also like get to see like one document to prev on this page here and more importantly also like this C sharable link here it gets you a link like this you can click copy the link and this link you can share it with your coworker and everyone really so for example to just inite can go to my guest session on Chrome here I can pass the link and now this will Target me to my local website I can see it refresh and now I can see productivity that flows but something even more like uh mind blowing with previews and prismic that they are like live previews so if I keep like that pro pro that flow here and go to prismic and I change back to something like um like prity that kicks for example and it save like this saves it's still not published you can see like it refreshed my preview and so that's just previewed content and as soon as you want to exit your preview and like end the preview session you can just click the across here this will exit your preview get like back to production content so this was on my guess session but you can also do so on your um n- guess session it was here sorry and here I can click exit and I get back to my uh regular state so those are prismic previews they're like really powerful but you can get even more of previews so let's check that out but before we learn more about prismic previews I just want to show you something where prismic index gets really powerful it's time for us to set up more pages and as we know with the minimal starter for now we have like this uid page has already been set up for us uh when we started our project so let's just make sure it aligns correctly with uh what we have on our index page by well like let's get that bigger and let's well we need like to refactor our ad so to get that we can get that from our uh index page here so we get our ad and then here like we're pretty much happy with what we have uh for the fetching the last thing that remember for testimonial St we need to fetch more content so we just get that array of options here um and like slap it uh as an option uh to our client C here like this and so without much like our our other pages are ready to ready to roll so we have like components uh for size we have PR we have like we're calling our um prismic compos we're calling our root this time like to get the uid of the route and from that we like to use prismic client to get a page by uid and we give it next the root P ID and then we're using fetching again to fetch like more data for test SCE if we have any we updated our SEO to SEO metadata to display everything we have So Meta title description and meta image and that's pretty much it so we can save that um and one last thing I show in the code is that you might be wondering well like we're creating pages in prismic but others prismic not like well these Pages goes to that world so you might have guess it's based on uid but there is a place where defined like our routing within next and prismic it's also within the prismic module configuration here and we have a CL config and to our CL config we give it an area of roots here and so this interesting basically this is what we call prismic Root resolver it's giving ins to prismic API to resolve your content with some URL so for example here we say well if it's a page type then you resolve to for/ colon U ID but we could have put something like for/ post for S if it was a blog post for example like let's say if we have a blog post type we can go like post we can like go forward slash blog for/ uid and this will resolve any post to for/ blog for/ uid and finally second three years that we are reading an exception we're saying well hold on I want every page to to Res to for con U ID except if it's the Ownage and if it's if it has the home U ID then we want to resolve it to for slash um to just for slash so great so we can save that don't need to update anything here actually that's just example we cannot our little commit message like fit uh setup uh uid page we can save that to GitHub already uh well just to git for now we'll get to GitHub later on and well so we know more about like we have like multiple page set up and we can actually go to prismic and create more pages now I'm just going to create two more pages really quick like we'll do like the feature page the above page we just do like the EO uh but you can add more if you want or you can like create more pages if you want to so let's start working on that so we'll start with a feature page uh which Maybe will put like this so we can like see a bit of both screen so I can get back well I can publish my homepage I'm happy with that new catch phrase here um can go here I will uh Delete the um aner page so I can click on it and um then from here I can click archive so it's archiving The homage as the another page in I you here we go um I'll click create a new page page I click page and here I'll will put a new page for features so name it X it will be features it will be features on the SEO tab here I'll add like a features and like um features for finding Focus uh we don't add any meta image for that pick add slice here and to the add slice what we can do we can pick the error slice here and we'll pick like the small horizontal version of it so for we'll pick like the data from figma so we copy like the catchphrase here then we'll copy X body so we can go here copy the body but on text it's try for free again so we'll go try for free again we link to prismic but feel free to link to whatever foot you about and we have the image so likewise like we just extract it to image for the feature and about page click plus export give it give me page gives me PES can click save on the homepage I'm from my desktop I'm happy about that click select image upload media and here I think I have features which is not what we want uh what's it's called it's called I don't have oh yeah no it was inside there it's inside let's see your left I think yes here we go so we want see little like um camera lens thing can add it here click save and now what you can do also is preview like just to swing back to that you can click here and click preview the page and like it's not published yet but we can like still preview it on development it will PR the Page open it and see have like a feature uh for finding Focus like we have here well we can save that actually we can maybe exit the preview like close close a bit or tabs get starting to get like two more tabs here well let's publish our features page and just create quickly the about page here go like create a new page page we'll call it about it will be about or like meta title about we go like um about the Flor Ste can go back to main add our size so we'll go again with the EO horizontal size we'll take like the heading uh from figma here copy T the body from figma copy um Bon link well we don't have any well let's let's just have B try for free well not maybe try for join us go like a link to the web PR Miko here we go can select an image so this time we'll select the image with the people on the beach you can click the image here click save likewise you can preview if you want to but for now we we see like with the default one and we can get back to our um page here and what you can do is now also go to settings and update our navigation cuz remember we have a navigation for now linking to prismic and to giab so let's update that to link to actually to link to our page I go here prismic link to prismic page I will click the link and I will click next see one with the feature page and here so CL link to prismic page the link link to the uh abot page we go like with a features for the label and the um about for theable and this is where previous start to get interesting like if I save here I can preview it so again I preview on development and we'll see like our navigation has updated when have like features and about which show our features and about page we can close that you can publish it to prismic we're happy with that and without much like we're pretty much done with creating pages with prismic and really like now with this page tab we can create countless feature pages about page Contex page you name it if you need a new website section you can create it with SI machine like we went through Basics together which you can create like more SES if you want to and the great thing about that that editors don't need to called developers and designers every time they need a new page that's the power of prismic pages this whole time we've been great about committing our work to git now let's push that code to GitHub it's a good practice that our work is saved somewhere on the internet other than just our local machine if our hard drive fails right now so like we'll lose all our work but if we push to GitHub then it's safe and the great thing about that is like pushing to GitHub enables a lot of things for you like likewise well namely like contributing with other people as you may be familiar with and also to De playay your side to verel that we'll see right after so let's head to github.com go like to github.com you don't have an account you can create one for free then once you're on this page here once you're on your own page of GitHub you can click see PR here and create a new repository so I'll create my repos story with no template because we already have some code ready and iate create it inside my own like kab username they will name it like flise uh next and so FL next avable I won't have a description I will keep it public and I can click like create repository from here so this creates my GitHub repository where I will be able to host my code so here it shows me a lot of commment that um we can like run to host our code there what's interesting for us that we want to run those commments basically locally so we can like copy them can go here get to our terminal close our server put it on the side so pass the first command so G remote add origion um GitHub like to my rep story so basically this giab well like you have like a g rep story locally but actually like you have also remote original you can pull your code then we'll do like git Branch M Masters just initialize actually Master branch of your G repository and once you done that you can go get push you origin Master once again like if you don't know those comments like those are just the comments that are like referenced here like and tailored across your name of theost or you picked and without much if I now refresh my page here you can also have like all my code available online on GitHub and with that we're already to OST our website and verel together so let's get to that so let's head to ver.com so again if you don't have an account here you can create one for free but for me like you can log into GitHub if you just create well you likely have a giab account by now so and here what we can do we can click add new project and this gives me to versa.com new here I can select my repository so the one we just created together like FL next I click import so here I'm as to pick like the configuration like how I want to deploy it so with next like but so I don't have a lot to do only thing you can do is to deay your new site statically is to click the build and output settings drop down here and tick the override um command here this will run next generate which which will generate your next website statically to be run on versel and from here I can click deploy and this will start versel deployment process so basically it's like if you are building your site locally except it's run on verel and verel runs it off your key tab repository so this takes a minute or two and we can see the logs here can see ver starting up but well we'll see once it's done like water website looks like all right so great our website like successfully deployed to versal if we click the thumbnail here gets us to our like website said live on verel you can add a custom domain here if you have one and yeah like our website is here statically generated it's really fast for SEO and everything and as you can see we have our multiple pages and everything is all managed in prismic and the great thing about that that now whenever you push something to GitHub it will redplay your website with the latest features you added so if you add more slices if you like change design stuff like that ver will take care of deploying that automatically for you to production but GitHub is not the only source of Truth we want to rebuild our website from we also want to rebuild our website from prismic so let's say we can do that with verel so I have my verel project here and I can click continue to dashboard what we want to do here is to set up a Web book inside versel that prismic will be able to call whenever there's a Content change that our website gets rebuilt so to do so I head to versal settings then I can add to git and herefs qu bit we have deploy hooks here so name my hook prismic I'll set to thisy master Branch because that's the branch I want to deploy toal and I click create hook but this does this gives me this long URL that I'm able like to call to rebuild my website but I don't want to call it manually I want prismic to call it on its own to rebuild our vers website to do so I can add to prism I can get back to my dashboard again we'll add to the little C and this time we'll add to webbook inside webook we give a name to the webook so we'll call this one versel give it a URL that's a URL just copy it from verel we don't give to give it any secret or custom either and inside the triggers we can just it well triggers only when the document is published or un published we don't need about 3s or tags that's not like what we want to do with this hook and from here I can click add this hook what you can see here is that whenever I publish a document or unpublish a document verel will trigger a rebuild and will update my website than thanks to that another thing I might want to set up on prismic right now is previous for Content writer indeed so far we've only set a previews for ourself for developers in noos but now that we have a public URL for Content writer to use like for production website we can set that previews on this production website so let's just close a bit like more task it's getting messy see but I grab the URL and I can click create a preview I'll create it a preview for production I will pass in the URL from verel that I got and this time the UR is still the same still for/ API for/ preview and I can click create preview but this means that now whenever I go to my document I click like on updating one and now I have the option to preview on development or production so that's great that means a Content writer can prev content but there's one more thing we can do is prismic and with a page builder that as you can see like there like all these cards are like a bit weird since the beginning what we can do here is I can click the like little like Kebab menu here click live preview settings and here again I can put my URL from my website and this time I will I I will input like for/ slice simulator what this does that it instantiate this simulator similarly to the one we add in SCE machine right here but inside our page builder that we can see our content being updated live right here so let's see and you can see like here I have productivity that kicks if you screen a bit have the image here but basically the G of that if I replace the image with another one can see it updated right here can get back to the one I add here if I change the title like productivity that flows to get back to our original t you can see like it's thing here like this FL is not being able to be previewed F because using concentration ship and as I said concentration ship aren't supported yet by prismic uh s simulator so we working on that but for now you won't be able to preview that kind of sizes but all the other ones can see you can have like a quick preview here and if you want to have like a prev under sell again I can just click it save not publish it yet get back to the prev the page here click prodiction this time and this brings me to flu. next ver you can see it shows prod productivity that flows which is preved content as you can see with the tool bar here you can again get a sharable link and once you're done with your pre already your I you can close it to get back to the production version and as promised we set up a pre we set a previous reversal we set a preview in the page builder here and also set up a webbook which means that if I publish this page now then it's published and I go to versal to my deployment tab we can see that it created a new deployment for us and that's like in the process of buing Shing our new changes and so as soon as it's done we'll see productivity that flows back on our website here um just like as we uh configured and accredited within prismic so let's wait a minute for that and we'll see our content live so that's it like the build is done on versal if I go back to my live website and give it a refresh you'll see productivity that flows just like we did in prismic so great like we we're pretty much done with our website now congrats so we build you a website but well let's just recap that all of that together we are done in this course you'll be able to full feature next next site using prismic for your website builder from creating pages and adding slices to those pages and just seeing a faster prodution site can update you know have the skills to create a performance website where content editors can easily build on brand Pages we went from figma designs to slice machine and you learned how to turn any design into slices for next development experience was smooth thanks to automatic mock data C Snippets and the SI simulator by the end we had the production ready next side deplo in with typescript tailwind and Industry best practices this is really something you can be proud of now take what you've learned and make it your own trading more spices custom types create a blog case studies or connect your site with other services and remember if you get stuck anywhere next Tailwind prismic versal all have amazing documentation and whatever you build please share it with the prismic community forum for feedback and inspiration I'd love to see it so please tag me in thank you once again my name is Lucia burer please comment below and let me know what you want to see in the next tutorial I really appreciate you making it this far into this one so please leave a like And subscribe thank you so much and have a great day

Channel: Prismic

Views: 11,854

Keywords: nuxt 3, nuxt 3 crash course, vue 3, nuxt js, nuxt 3 tutorial, nuxt course, nuxt 3 course, nuxt vue, nuxt vs next, nuxt 3 vue 3, nuxt tutorial, nuxt 3 full course, tailwind css tutorial, nuxt3 tutorial, nuxt 3 tailwind

Id: 8GmfcbuYOWE

Length: 196min 55sec (11815 seconds)

Published: Fri Oct 13 2023