Create Beautiful Presentations With Svelte

hey friends today we're going to learn how to make beautiful and professional looking slides with salt you might be wondering why I'm on the side slides.com and you probably heard of it or even used it but did you know that it's actually powered by an open source framework called reveal.js I'm going to show you how you can Implement that in swell to make beautiful presentations with ease as you can see here here you can go through this slide it has normal slides it has vertical slides so if I go back and go down you can go to the vertical slides and you can also animate call block which is really awesome it uses Kyla JS so as you can see here you can animate between call blocks so if you're making presentations or maybe educational videos even right I can really see this being a good use case for that and this is one of my favorite features Auto animate so you can animate between any state in your slides thanks to the flip animation techniques so pay attention what happens to the boxes when you animate between the slides how beautiful is these friends right look at this how awesome is that and yeah it has a lot of things battle tested so this is something that you can actually use because this isn't some pro-way tutorial project right this is a battle tested library that has existed for years which you can actually use I really encourage you to go through here in the documentation so you can use markdown you can have backgrounds media code even math if you need it so you can import catex or whatever you can customize it using teams here's some default themes where you can make your own team or use the CSS variables provided by reveal.js to style it which you're going to do a bit as you can see here is a lot of options and that's really awesome and also we're going to use Tailwind CSS for The Styling I know I know some people don't like telling but that's okay if you don't like Taylor you don't have to use it but I think Tailwind is a perfect fit in this case because when you're making slides you can just go blazingly fast by typing your Styles in line like this alright so I'm excited to get started alright so let's quickly set up circuit and Tailwind you don't have to use swelkit because we're not going to take advantage of things like server size rendering so if you wanted you can use the vcli to scaffold a regular soil project but I always prefer to create a circuit project in case I change my mind in the future so inside of the terminal I'm inside of an empty project I can say pnpm create swelt and just give it a second so I'm going to create inside this empty project I'm going to pick a skeleton project I'm going to pick typescript which is purely optional you don't have to use typescript and then I'm just going to select this LinkedIn printer and that's basically it so now I can say pmpmi to install the dependencies and that's it and to set up Tailwind we're going to use the silt add package so we can say pnpx swelled ad Tailwind CSS and this is going to set up television CSS with circuit in a second and basically that's it for a setup but now we just need to install reveal.js so now we're going to say pnpm I I'm going to say reveal.js I'm going to install add types reveal.js if you're using typescript if you're not then it's optional and then I'm also going to install some fonts which I'm going to use so I'm going to say font source main rope and I'm going to say font Source jetbrains mono and I'm going to press enter and it should add the dependencies awesome and now we can run the development server and everything should refine so let's see if Tailwind works so it should be localhost 5173 and I already see it works because this is the default what you get with Tailwind is unstyled Page all right so that's it for the setup all right friends so we're going to initialize reveal.js so if you go to the documentations and if we look at the installation steps we already installed it from the npm step as you can see it's simple as adding the reveal JS import reveal has a couple of plugins that come by default but you can also pick from a lot of community plugins so I'm going to use the Magnum plugin I'm going to use the speaker plugin so you can see your notes when you're doing a presentation and I'm also going to use a highlight plugin for the syntax highlighting but before we get started let's look at the project so Source routes and layout was created because we use Tailwind but in this case we're not going to use layout or Pages because this is basically a single page application so let's just copy this import and we're going to delete this plus layout.silt file I'm going to go to page as well to remove here I'm going to use my snippet and then I'm just going to copy this over and one more thing I'm going to do inside routes I'm going to say new file plus page.ts and I'm going to disable server-side rendering because it's going to cause problems as reveal.js is going to use some browser apis so we're going to avoid those problems just by saying export cons server side rendering is equal to false all right so I can close this file and in plus page.swelt I'm going to import a slice component which you're going to create and this is going to initialize Our Deck so I can say import slides from and we're going to create this folder in a second so I'm going to say lib deck slice the swell and I'm just going to use it here and that's it and let's also use swelled head and then we can give the page a title we can say presentation alright so you can go to the sidebar and in Source I'm going to create a new file I'm going to create a lib folder I'm going to create a deck folder and I'm going to create a slides.swelt component so as you can see here it is inside of lib and now we're going to initialize reveal.js here so I can create a script tag and then I can say import reveal from real JS and then we can do the same thing as they do in the documentation we can say markdown from reveal JS and then we can go to the plugin markdown and we also have to say mark down one more time like this you don't have to specify a file extension it's just going to pick it up so I'm going to have a markdown plugin I also want a highlight plugin and you can learn all this by reading their documentation so I can say highlight and I think it's the same thing let's see we can say highlight and yeah we can say highlight awesome and then I want speaker notes so I'm going to say notes I'll just replace these two notes and that's basically that and now we have to use on Mount to initialize this so in the component is created because reveal.js hooks itself into the Dom so the elements have to exist on the page and we can say on Mount press enter and it should be Auto imported from soil I can say on Mount let's give it a callback and now we can say const deck new reveal and then you can say deck initialize and that's basically it but you can also pass more things to the deck as you can see in their example they pass the plugins here in New reveal the Constructor you can also pass it to the initializer I'm going to do it like that I'm just going to say plugins then you can specify an array of plugins then I'm going to say markdown highlight and notes any side of the reveal Constructor you can also specify some options so you can specify Auto animate options so you can say Auto animate easing you can specify the duration Auto animate duration say one second and you can specify things like a hash so it's going to show numbers for your slide in your URL and you can use other options like controls which is true by default you can use progress which is also True by default but you can disable this if you want and then we also need to include the themes as you can see here is a presentation theme so you can use some of these default themes where you can even make your own so we're going to go here I'm going to say import and this is all included in the reveal.js package so you don't have to install anything I'm going to say reveal.js it's in the dist so it's reveal CSS so this is the main styles for the slides then you're going to go again to the dist and then you can just peruse this what's available team what's inside of themes we're going to use a default black one and then we also need styles for the syntax highlighting so we're going to say plugin highlight see it's the instead of dist so this is part of the plugin highlight and then you can see you have monokai in Zen burn but you can change these values so you can create your own team so I'm going to pick monokai and let me just really show you how you can easily figure this out so if you can see it's in reveal.js plugin highlight monokai so if you go to your node folders and you find reveal.js and if you're ever wondering how do you change any of this so highlight monokai so this is highlight.js and it has these tokens you can basically look at this theme you can change these values or you can use any other team from highlight.js so if I go to Pilot JS it's a bit of an older syntax highlighter but basically anything you have here you can just pick any of these themes here you can see it has really a lot of themes so yeah so you can pick any of these themes or you can use these values and I'm also going to tweak some of these values a bit later so this is basically it I can close this I'm going to go here let me just save this and everything looks great all right so how does our reveal.js presentation look like so if we go here we have see installation markup so basically here reveal tells you that you have to include you have to have a reveal div so you can hook into this and then you have another one which are slides and now you make a presentation here so you can see here in this example you have slides here and then you just include slides by using section if I go here and I'm going to save it now let me just refresh everything so you should now see our styles are going to kick in reveal is going to be initialized as you can see here we have the arrows and we can control the slide and how awesome is this friends this is really simple so now we're just going to use cell to make this even simpler and easier to use and of course always consult the documentation because you can do a lot of things so if you look at the code here it shows you what you have to do to include a code example all right but what I'm going to do I'm going to create a presentation component and inside of there we're going to include all of our slides so we're going to create a slice component a code component and the notes component I think and including a markdown component and then you can extend it or change it from there however you want all right so basically it doesn't exist yet but I'm going to import it here I'm going to say import presentation from presentation.soilt and now we can use it here and that's going to be awesome all right so I don't think we have to make any changes to this file anymore so I'm going to close this same with this file I'm going to go now to the lib I'm going to collapse everything Source lib deck and now we can create presentation and now inside of this call block we're going to import our components so we can start building a presentation and the first component I'm going to make is going to be the slide of course so I'm going to say new file slide as well and let me just close the sidebar and this is going to be a really simple component so I can say script we're going to have three props ID animate and restart so I'm going to say export let ID and this is going to be of type string or null and I'm going to pass it null by default and I'm going to say export let animate we're going to be false by default and also export lit restart I'm going to say false and you're going to see what you're going to use it for so again we're just going to create a section as before because that's required by real Js and then we're just going to use a slot so we're going to pass anything we want inside of here let me just make room so we're going to include some data attributes this is how reveal.js hooks into elements we're going to say data auto animate ID and this ID is important if you want to animate some elements that aren't related so for example how reveal.js looks up elements is it says okay if you have a H1 and they're the same that's probably what you want to Auto animate but sometimes you maybe have things like boxes and then you transition the box to something else but reveal.js doesn't know that it's the same box you want to animate so you can say hey this is the ID box so it says okay these are the things I need to animate and I'm going to show you an example of that and then you can say data Auto animate and this is really the important part so if we pass in animate then it's going to include this attribute but you have to do this we have to say or null in case it's not included because it's data attribute is going to be present on the element unless you pass it no so this is really important and then you can include another thing which is data Auto animate restart and you can say restart or no and if you go to auto animate you can learn all about this here so I'm not making it up right as you can see here is the auto animate so it's going to beautifully animate between any transition in your slides so as you can see here it knows that this is the same animation because it has the same content implicit implicit so now you're just going to animate this part the animation so if you go to the next slide it's going to add animation and it explains here how elements are matched this is what I told you about you might have boxes and now you need to give them an ID so you're going to see this is also going to animate oh and also my bad I probably mischaracterize this this isn't for the animation for the specific elements this is when you have some elements that are already animating and you want to break out of those animation and start a new slide so here is an example of that let me show you Auto animate ID and restart so for example you can see here here is a group a and now when it gets to group a you want to stop using the animation so you can say data auto animate okay this is a new slide and now you can see group a b now it's going to start a new slide and you can see how beautiful this works and here is also the restart so you can restart the animation with the same ID and that's what that is used for and also want to emphasize that we only included three attributes but you have a lot more attributes you have backgrounds and Etc so you can look at all of that in a documentation you can expand this and change this however you want so you can see here backgrounds you can see there are a lot of data actually we have background color you have gradient backgrounds you can even animate between those let's just see video backgrounds iframe backgrounds you can have Parallax effects it's just really crazy what you can do with reveal.js and it's a ton of fun to sweltify it but yeah I'm just going to go to auto animates so we have some of these examples all right and that's basically it with this simple and humble component you can already do a lot alright so after we imported this component we can even take their code example we can paste it over and instead of section we can say slide and now we don't have to specify this attribute we can just say animate let's make some space and instead of H1 I'm going to use P tags because these H1 Styles and even P tags have some defaults from reveal.js so we can override them in the global Styles or we can specify it even here but let me just use PTX for now and as you can see here if I save this let's go to the presentation so now if I go back one slide you can see auto animate and then it's going to Auto animate to the next transition and you can even use Tailwind here so we can say class and so I tell when it's awesome for this we can say text red let's see 600 looks close so one problem we called reloading as you can see we have to change the slide to update it or in some cases when you're dealing with call box you're going to have to manually refresh it which is one downside but whatever as you can see here it works Auto animate and how beautiful is that and let me just also show you what I mean here because if we specified margin on this right now it wouldn't work because dot reveal P has already some margin Styles here in which case you can probably just use a div so let me just try using a div let me see if that has some Styles when you always have problems like this just inspect it stay calm and see what's going on right so now you can see there are no Styles applied here so you can use from Tailwind let's say margin top eight and let me just refresh everything close the Developers and now we can see it works and you can also have horizontal sliding vertical slides so if I go here let me say horizontal slide you can remove animate you just copy it over let me remove this now you can just include more slides here vertical slide one say two so now let me just go back here so you have horizontal slide you have a vertical slide and how beautiful is that all right so let's create a code component so we can go to lib deck I'm going to say code .swelt and this one is also going to be straightforward so always console a documentation and really just because I've done it this way doesn't mean you have to so of course you can do whatever you want so if you go to the code here you can see what you have to include here is a section pre and the code so again I'm going to have export let ID which is going to be string or null but I'm going to default it to null then we're going to specify lines so this is going to be a string so we can even animate and pass it lines let me see if there's an example here so you can see it's going to highlight the third line it is going to highlight the lines from 8 to 10 so we can do that this is either going to be a string or Boolean because we can only say on the component lines so you can include the lines without any animation and I can say or null and then we can also say No Escape so let me find this Escape so HTML is going to be Escape by default which you can avoid and I really think this is redundant in swelt how we're going to include the code because it's not going to be interpreted all right so now we just do the same thing they do we already have a component so you don't need a section and I'm just going to make a pre-tag I have my snippet so I could just do that and then I'm also going to include a code tag inside of this code tag I'm going to include a slot so we can pass whatever we want here which is going to be a string of code and now for pre we can say data ID is equal to ID or null so let me just make this more readable code here we're going to have a couple of data attributes data trim data line numbers so these are going to be lines or null and then data No Escape which is going to be no Escape or no alright so you can save this and now let's see how we can use this component so I'm going to copy this over I'm going to say code so let me remove this I'm going to remove this also and now we can use the call component here and now we can just pass it whatever we want so we can use the curly boys otherwise that is going to try and interpret this code but you just want to paste it a string now we can start by saying function love and now if I do this and refresh the presentation so now you can see here we have the call blocks we can include the lines just refresh this so you can see here are the lines and now we can also say animated but remember how I told you about that ID that you have to include since these are related elements we have to tell reveal.js hey you should probably animate this so now we have another prop ID which is going to be called so now when you make a new code you just have to specify the next state and now we can say console log sweld so let me just refresh this and now you have function love and you're going to get swelled and you can change this however you want so you can go back to the first block of code let's say this and refresh so now you can see this is going to be animated in as you can see here's some overflow thing I'm really not sure why they don't remove it by default but we're going to change some Global Styles in a second but yeah now you can see how easy this is and let me also just show you the power of transitions because we can have slide here we can specify animate but you can literally animate anything so I can say p Transitions and this is very easy with Tailwind we can say uppercase and now you can literally have any elements this is just HTML and you can animate between anything so we can create some boxes I can say div data ID box because this is really important and now I can say class so I can use Tailwind I can say with 100 pixel height hundred pixel and we can say background gray 400 so now we can copy this box over a couple of times and we have to give it a different ID box free so let's save this and see if it works and we can also give it a container here so again this is just HTML nothing special and this is why Tailwind is awesome for this vehicle can grow blazingly fast we can say Flex gap2 Place content Center you just refresh it and you can see how awesome this is and now we just need to specify the next stage so this can be whatever you just copy over this block so you can say okay now my boxes are going to change from 100 pixels to 200 pixels and then instead of the first one being gray we can say red green and blue so now I'm going to save this and you're going to see how beautiful this is so here is our call block you have transitions boom and now they animate between the slides how awesome is this friends right so you can literally make anything if you remember if we go to reveal.js homepage you can see there on Slide this is a really awesome example so basically that's the same thing they've done here Auto animates today transition from the next stage so you specify the boxes in this slide you specify the next transition here and then you specify this element and it looks like magic like look at this how beautiful is this and this is all thanks to the flip animation technique alright so let's look at the markdown component so you can use Magnum markdown is a bit weird because it doesn't have all the power of HTML but if you want to make a simple presentation markdown is great so you can use this to make slides you can space it with three dashes so we already included the plugin you can use external markdown files then you can even include slide attributes and other things like this so let me show you how that looks like we're going to go to the sidebar cider deck I'm going to add a markdown component and this should probably be two separate components but whatever so how this is going to work I'm going to create a script I'm going to say export let so this is going to be if we pass an external prop it's going to look for the example MD and now we're going to need to pass a let external which is going to be false by default so now we can use an if block a if this should be an external modern file then we can use the section and we can pass it the prop from the documentation data markdown name and we can go here we can say otherwise you can close the a block so now we can just use a regular markdown block and it's the same thing as I show in the documentation so I can say section it needs to have data marked down and they show a text area but that's really problematic in swell because swelt leaves a text area blank so you can use any other element and thankfully the only thing reveal.js cares about is that it has this data attribute data template so in my case I'm going to use a div and I'm going to say data template and inside of here we can just pass a slot alright so in our presentation let me just remove all of this so it doesn't bother us and I can just copy over this block and I can say markdown so let's try a basic modern file like this and again we're going to need the curly boys so let's even take their example here and this is the old thing if you're going to use markdown inside of here so for example this is going to work great markdown okay lock let me just save this and you can see this works great but this gets awkward when you're trying to do cold walks like this because if I copy this over now we have a problem because you need to escape this vactics right you can save it like this this should work no problem as you can see here is how we include the language which is a downside with the regulation file because I don't know how you can specify the language because it just let highlight.js select the language in the text as you can see the advantage here of margins you can actually specify the language and now you can also pass the line so this should work let me just refresh everything and you can see here you can even Auto animate between the states but as I said this is a bit awkward and if you want to do something like this I advise you to use an external markdown file so you can do it like this we can say markdown let's see name example MD this is already by default but I just want to show you and now we can also specify external let me just copy our this code block and remove this and now it's going to locate from the root of your project so we can include it inside static we can go here new file example MD and now you can say here slide one hello now we can space it out you can say slide two let's include our call block now you don't have to escape it anymore let me just push it here and awesome this should not work let me save this so let me just remove all of this here oh I forgot to save this file so let's just reset everything okay so now we get slide one hello so now you're using markdown you can write your entire presentation in markdown you can see everything works great but of course this isn't as powerful as just using HTML but if this is something that you want to use go ahead and the last thing I want to show you is notes because you probably want speaker notes let me just see if I can find it view okay so here is how you do it so let me just open the sidebar inside our deck I'm going to say notes and it's probably going to be the simplest one so you can just copy over what they have this is just going to be an aside element with class notes and we can just paste it a slot here and you activate notes by pressing s on the keyboard again this is in documentation press the S key on your keyboard to open the notes window so when you're doing a presentation this is only going to show for you so you're going to get the clock what your next slide is and Etc and let's just try it out here if I go to the presentation so we can just do a regular slide I'm going to remove this let's just make a regular slide so you can say slide and now you can include your notes so let's go here or so you can save this and now if I refresh everything here now you can press s and this is going to open a new window and I have a title Window Manager this looks weird but you can see here you have all of the information so now you can go to your next slide and you know to be prepared in advance alright and how awesome is that friends you can customize this for everyone one last thing I want to show you is how you can style reveal JS so if you go here to the theming section let me just look for teams you can go here let me just look for variables so you can use custom properties you can even build your own team so if you go to the custom properties you can see everything that's available to you that you can style so in this case I'm going to press Ctrl P let's find the post CSS file so we can go here and let me just first import the fonts we use so I can say import phone source and now I'm going to do the same for jetbrains mono and don't forget the semicolons so here we can say root and now we can change any of these variables I'm going to change a couple I'm going to say r Main phone is going to be man rope and then we're going to have the heading font going to be the same and I also want to change the call block so you can say code font this is going to be jetbrains mono and don't make the same mistake I did awesome I'm also going to change the link color to Aqua and the link color hover so if you go to the presentation you can see now our font changed and we don't have a lot of slides let me just go back here I'm going to remove the notes I'm going to say slide one slide two Center you can see here we change the color of this progress which you can also change so if we go to the slides file just go to the slides you can save false for both the controls and progress if you don't want to show it so it's going to disappear but of course the slide still works you can press escape to get the high level overview if you need to but I'm just going to revert this to True let me just comment it out all right so that's it for the styling and of course you can also overwrite some of the classes here for the syntax highlighting so for example you can go here and say hljs title and something like HL JS keyboard and if you really don't like the Bold font it uses by default you can say font wait normal you can change other things like removing the Box Shadow from the code tag you can say reveal pre and reveal code you can also hide the Overflow you can say hidden and then you can say you have to say important I think and then you can also remove the Box shadow and the background for hljs say background none all right so let's go here to the presentation and we're going to add a call block code and let's even include lines all right so now if I refresh this slide one slide two as you can see this already looks a lot better it doesn't have that ugly box Shadow and the background and of course we can just go here and find what these tokens are in the theme like I showed you and you can change it for yourself alright so that's it if you like what you've seen don't forget to like And subscribe and you can support me by becoming a patreon and you can also join the Discord thank you for watching and Catering the next one peace [Music] thank you foreign

Channel: Joy of Code

Views: 4,349

Keywords: svelte, sveltekit, reveal.js, tailwind css

Id: 67lqa5kTQkA

Length: 32min 59sec (1979 seconds)

Published: Fri Jun 09 2023