Build And Deploy A SvelteKit Markdown Blog

hey friends I'm excited to show you how to make an awesome and extendable Marathon blog with swellkit as you can see pay attention to these gorgeous transitions when we go to the about and contact page even the RSS feed works and it's all pre-rendered so it's blazingly fast as you can see we can even toggle the team which also has a cool transition so you can see when you refresh the page there's no flashing it works great so you can go back to the Dark theme as you can see when we load the post it looks also gorgeous we're going to learn how to create a custom syntax highlighter in regard to Shiki where you can use actual vs code themes for your syntax highlighting and I'm going to show you how that works so I'm very excited about that and also if we go here you can go to the second post I'm also going to show you how you can use custom components to override elements so for example when I inspect this element right here if I bump it up you can see here is an image but we created a custom component in markdown which is going to add the lazy attribute to it and I'm also going to show you how you can use markdown plugins so here we're using a bunch of plugins we're using it to give the ID to headings and then we're using a markdown plugin to create a table of contents for us so for example if you want to link a certain section of your post to somewhere like the counter you can just click on counter you can take this link and copy it over right all right friends I'm super excited so let's get started alright friends so let's create a new swell kit project I'm inside an empty project name Vlog but you can name it whatever you want so open the terminal and I'm going to use pnpm and I'm going to say create sweld and now we're just going to go through the wizard so I'm going to press enter because I'm already inside a directory I'm going to pick the skeleton project I'm going to use typescript but if you aren't comfortable with types you can just pick JavaScript or you can even ignore types and everything is going to work the same so I'm going to pick that and now press spacebar on your keyboard to select yes link so we get code errors in our editor and we get prettier for code formatting and you can even enable format on Save inside your settings in vs code if you want and that's basically it so I'm going to press enter now let's install the dependencies I'm going to say pin PMI this should take a second all right now that it's done you can say PMP run Dev you're going to run the development server and now you can open port so it's localhost five one seven three and that's it in this section we're going to tackle the layout and styles I'm going to use open props which is really on awesome you can think of it as a Tailwind but it gives you CSS variables instead of utility classes which is awesome so you can use CSS as God intended so you can see here is the card and you just have these values for example if you go to Colors this might look similar to Tailwind how that gives you colors and then you can pick between the colors and basically these are just design tokens and water design tokens is just a fancy term for preset values for your design or whatever else you want so basically it gives you limitations so you don't make ugly designs right so this is really a strength or something like tailwind and open props in this case which was made by Adam Argyle who is Awesome by the way but yeah we're going to use open props and then for icons I absolutely adore Lucid I know there's that other library that gives you a million icons I don't want a million icons I just want a great looking icon set and Lucid never disappoints so next I'm going to install open props will see it and then I'm going to install two fonts so let's go back to the terminal we can open the terminal Ctrl C to scale whatever you have going right now and now I'm going to say pnpmi I'm going to say open props as you can see I already have the completion we'll see it's spelled and then I'm going to say add font Source main rope and headphone Source jailbrings mono so we're going to use Mangrove for the sensory font for the site and jetbrains mono for the code blocks and this is really an easy way to install a phone so you don't have to worry about that then I'm going to press enter and great I'm going to close the terminal for now because I want to show you another thing press Ctrl p in your editor and now inside the prettier config you can configure this however you want for example I really don't like semicolon so I can go and say false now I'm going to save this configuration and outside the package Json we have a useful script which is pnpm run format and it's going to format your entire code base using this config so you can say format and yeah basically that's it it's done and now we can say pnpm run Dev to start the development server back again let's close this I'm going to press Ctrl V to close the tab again I'm going to press Ctrl p and I'm going to search for app HTML so I want to add a favicode and I really love this site by iOS boss so you can use the emojis as favicon if you click on it it's just going to copy so go to fav.farm and now we can go here I like to put this here and I'm just going to paste this here and I'm going to get this awesome Emoji as a favorite concealer or knows your site is blazingly fast as you can see everything works great alright so for the next step I'm going to add a config file in our project so everyone knows that we are a pro developer that makes 100 files for no reason right but the Jokes Aside this config is going to be useful because it's going to have the title description and whatever else you want for the site so you can just change one value in one place instead of hunting it down in all of these files right so let me just close this I'm going to press Ctrl B to open the sidebar I'm going to go to Source right and routes actually on the routes it's in Source but I'm going to create a new file so it's going to be a lib file which is going to be Alias default for us so I'm going to say lib and then inside I'm going to say slash config TS is going to create a lab folder with a config DS file inside we can close the sidebar and now we can say export const title and I'm going to name my block Shakespeare because this is Morgan for poets and I'm going to say export cons description soil gate block for poets and here is something interesting so we can also specify the URL we can say const URL and since you're not hosting this site yet you can just copy localhost and then we can use this environment variable from cell kit I can start typing Dev and this should be Auto imported from App environment so we're going to say hey if this is in development and from the URL you can just use localhost or if this is in production we can later if I remember give it a URL to the site we want so you can just give it a real URL so this is going to be used in your head tag and etc for your SEO so basically this is going to be your site here copy this slower like this it's going to be something like your code XYZ right and now we can save it and that's it and also sometimes when you add a leave folder like this 12K doesn't understand you've added it so it's going to give you squigless but just in case I like to stop the development server and I like to run it again but of course just do it if you have problems but let's just fix this right now alright so now that this is done I'm going to add a root layout that's going to have all of our Global Styles and by the way if I'm going quick for you and if you're not really familiar with swellkit I actually have a five hour course for free on YouTube that's going to teach you circuit from nothing to everything I know about it basically all right so I'm going to close this file I'm going to go to Source routes and now I can say new file plus layout swell so this is going to be the global layout for so you can see the content disappeared because we have to give it a slot right so it's going to appear back again but let's just do this we can say script so I just have some useful Snippets here I also have a video on that if you want to learn how to do that and now we can import open props so I can say open props and I need to say slash style and then we can also normalize some values and then you can also import buttons from it so if I save this already we're going to get some nice default Styles which is really awesome so before we continue let's create the header and footer component in route so I can go here and I can say routes we're going to create a header the cell file and I'm going to create a footer but of course you can have this in one file if you want but let's just do this so for the header again I'm going to use my handy snippet and I'm going to say this is what I prefer import all as config from so now we can get the Alias lib config so now inside of here let's create some markup I can say nav so I'm going to create the title which is going to be the root right and then I'm just going to use a ball tag like this and then from the config we can say config titles you can see how useful this is we can just change it in one place and I also forgot here I have to include title and then we're going to add the navigation here so I'm just going to say UL class links and now I'm going to say Li I'm going to give it a tag so I'm just going to put some placeholders here and as an exercise you can add these files yourself but I'm going to add them later right now so I don't have to think about this so we have the about and now let's create the contact and I'm also going to include an RSS which is going to implement later so we can do it like this so this is the ref here and I can say rss.xml and I also wanted to open in another page which is a better user experience in my opinion so I can say Target underscore blank and I can just say RSS and then let's give a placeholder for later when we're going to work on the team I'm just going to say for now button this is going to be the toggle for the team we're going to work on and then let's just set some Styles so I can say style and let me just scoot this up so I can say nav padding block so this is really a newer property in CSS you're not familiar with this instead of staying padding Left Right block basically means left and right and you also have padding inline which is top and bottom so now we can use the defaults from open props we can say VAR size 7 which is 2 RAM and now I can say links margin block look at us we're such a professional developers you can say size 7 and now let's also say for links so I like to say color in Harry so it doesn't have that ugly blue color and then I'm going to say text decoration none we're also going to need a media query so I'm going to say media Min wave and really these aren't fixed values like I didn't get this from some handbook or Etc just use media query side breaks right it doesn't have to be fixed for example open props can help you get started you can even use the media queries from bootstrap right if you don't know where to start let me just look for it media query yeah as you can see media queries here so you can see there are the media queries and you can see okay does my site look great at this size or whatever but you don't have to use this exact values use media queries where your side breaks right so they aren't some fixed thing you don't have control over okay so in this case I'm just going to say nav and I also like going mobile first not design wise designer is actually prefer to start desktop first but when you're coding Go Mobile first because it's going to be way less code so I can say display actually Flex not grid and then I can say justify content space between and then for the links I can say display Flex the same for The Gap I'm going to again use VAR size 7 so another useful utility and then I'm going to override the margin block to be zero like this and basically that's it for the header so I'm going to go at the top of this file and I just copy over the script tag because it's going to be the same thing in the footer so now we can create a tag footer let's give it a P tag here and now we can again use config title and what you're curious about is why sites update by hand the date right when you can use JavaScript so that's really something interesting so you can use this HTML entity if I can type it so you can say copies you don't have to copy paste the copyright symbol so let's be cool so you can say new date and now we can get full here and basically that's it so now let's give it some styles we can say padding block bar size seven I can say border top one pixel solid again VAR border and let's also give these some styles so we can say text to which we're going to Define in a bit in our Global CSS other thing you might notice is that I really don't often use classes and that is perfectly fine because this is a single file component and your styles that are encapsulated so this isn't going to clash with anything else on your site and I find it's really easier to style and Etc yeah so I can press save and now let's go back inside the layout so you can import our components we can say import header from header.12 and now I can copy this over I can say footer not footer we can say footer from footer.salt alright so now we can create a more of a global layout so if I go here I can say dot layout and Emmett is going to auto complete it so let's use the header and then we can say footer I'll be careful you don't make a mistake like this there we go and now we can create a main and now let's just move slot over into main awesome let's save it so everything should work as you see we need to style some things so let's go down here we can create a style tag so for the layout let's say that height should be a hundred percent So Max in line size you can say Max size or Max width or whatever but yeah I could say Max inline size I'm just going to use the value from open props or actually one of their media queries and I could say display grid so basically I really want this header to be Auto then we're going to use 1fr for this content and then to push the footer to the bottom we're going to say Auto again but it's not going to work yet because we need to add Global Styles so we set the width actually the height to 100 for the body and HTML so let's add a grid and we can say grid template columns and now I can say Auto 1fr auto margin in lines this is a cool trick you might be familiar with margin 0 Auto but using inline you don't have to do this you can just say margin inline Auto and that's way easier and then we can also save padding inline VAR size seven it should be two Ram so that's perfect so now let's add more Styles so we can say Main padding block VAR size I'm going to use 9 which is 4 Ram and then I'm going to add a media query media main wave we're going to say 40 pixels and we're just going to remove the padding in line zero and this padding is just when you get a smaller size so you're going to have some padding and then when it's a larger size you're going to remove the padding from the layout so I can save this alright so now we can add the global Styles and for that I'm going to go to the post and copy it over so we don't spend 10 minutes here typing out some CSS and this is going to give us more time so I can actually explain to you some Concepts that I want to show you so I'm going to go here I'm going to go through routes actually let's go in Source we need to add the app cssing source now it's going to open here and the post is always in the description if you're curious so I can go here and here is this section so let me find it where are the styles here is sourcefcss you can just press copy here you can copy it over and now as you can see here I specified the width and height for the body so when I go here and save it we need to import it inside the layout so you can go here import fcss and as you can see now it looks a bit different so let me just move this here and something is wrong with our layout then let me see it looks like it's applying oh see let me instead of call of this was supposed to be rows and also now our site looks beautiful alright so I really want to show you some cool things but first i'm going to close all of these things because we don't need it anymore and let me just really show you how people write modern CSS today so if I go here to the top I'm just going to load this example in the background so let me just see where is this you have some cool examples here I'm going to open color schemes but I really want to talk about how CSS variables are used so you have the CSS variables right but you really don't use them as this so you don't say for example one place that you want orange or gray and then you have to change it everywhere and this is so much work so basically what you do or what open props teaches you you can see here are some default CSS variables you can override the ones from open props and if you don't know how to do that just inspect some element in your code and you can see what value it uses so for example if you go here and expect it let me just bump the size up then you can just see what it uses in the expector right here so you can see all of the values and again all these variables also going to be here in the Styles you can see what are their values you can look at the open probe site but basically what I want to show you instead is how we Define it so for example inside the HTML since it has lower specificity than root I think this is why this is done so here you specify your values in this case here we can do simple theming by specifying the variables for dark mode and light mode so this might look like a lot of code right but it's really just copy pasting over these values over and over which you do once and then you're done so as you can see here is brand dark so we really don't use directly these values like origin Etc we make variables like this brand dark text one dark text to darken Etc and then we make their light counterpart or whatever else team you want to make and now inside the root you can also specify color scheme dark so the browser knows what color scheme you're using and it's going to change the inputs according to that and now you can see we have this variables a brand dark brand light but we're not using brand light brand dark we're just having more generic variables here which is named brand and we're saying in root okay by default you can use brand dark or you can use light if you want and then for the media here I'm saying if the user prefers color scheme light then we're going to change these more generic variables to use the ones we specified for teaming and this is really simple and it sets us up for Success later when you're going to implement teaming so as you can see here we also have these classes for the color scheme dark on the HTML attribute which I'm going to use later and now if we go to the site here let me open the developer tools and let me just place this down here and let me see not in the options but you usually have this ah here it is here is that paintbrush it's hard for me to see but you can see prefers color scheme lights you can try it out you can see this works really awesome so even if you don't have a team toggle you can see that this works as expected so let me just talk about some other things so here we have HTML body we need to set the height 100 so it takes the entire height what people usually do they get frustrated and they say it a hundred vertical height and Etc but I really don't like that it's really not a good practice so do this instead and now on the HTML we just set the color accent color if you want the background image which I also have is a gradient so it's more spicy then I just make it fixed so that looks great and then I just have some default stylings for an image and since open props gives you that CSS reset you don't have to do things like specifying an image as a block so you avoid those line height issues and Etc then I just have some default Styles here for the list and here is another beautiful thing what you can do people work often in this CSS versus tail with Cam but you can actually learn from daily you can create this awesome utility classes you can have classes where you transform text and Etc but look how cool this class is so this this is the surface class you have surface one two three four you can make more and then you set the background color and you set the color for the surface right so this is why I love this example so I can show you let me just go here and you can see how beautiful this works so you have the brand text color and Etc and now these are your surface colors so this is one two three four and now you can use this across your app so you can see how theming also becomes very easy so you can see here is dark dim grape and choco and you can see how really beautiful open props is and using modern CSS to achieve this sort of thing alright so I hope I didn't confuse it too much in this section I actually think it was worth it to just copy over these Styles and have more time to explain these sort of things and don't forget the post is always in the description if you need to copy or look at something or even look at the project files in this section we're going to set up md6 you might have used MDX in the past for react which lets you use react components inside markdown and basically MD swags is MDX but for swelled so you can import cell components in your markdown you can have interactive charts or whatever else you want and it also has a lot of configuration options and an easy way to use markdown plugins which you're going to look into later so as always you can go to the docs and read it and you can just simply install it in your terminal you can say pin PMI install it as a development dependencies md6 this should take a second and now let's run the development server inside our editor now we're going to press Ctrl P press config so you open the cell config and basically what md6 is is basically just a preprocessor it's going to treat marginal files as components which are going to specify right now so it's able at the end of the day to turn everything to HTML so let me just go here to our beautiful site and now I'm going to just remove these comments so it's really less noise I'm going to save everything so I'll have to show you something cool I don't have to do this I just want to show you so here we have this page cell that wouldn't be interesting if you could just write markdown like this and this right now won't work you will get an error but you can specify to swell the extension you wanted to process so if we go here and say extensions the default one it does is sweld or you can also specify MD so markdown so let me just save this and now you can see it loaded everything but there's one problem it can process the markdown which is where MD Sox is going to come in handy so for example if I open Root again you don't have to do this right but if I do some mark down here hello you can see it can process the markdown but using md6 we can so what I'm going to do I'm going to first import md6 from mt6 and then I'm going to create a config const MD swags options I'm going to pass it extensions it wants and if you read the docs you're going to see something like dot svx inspired by MDX we didn't have to use this and I prefer just to use markdown AMD and we can also use a JS Dock type annotation so we get types you can say type and then you can say import so you import the module and then you can use a type from it which is in this case MD slacks options so you get great autocompletions for example if you press Ctrl spacebar you can see what's available to you which is foreshadowing for things we're going to use later alright so now you have to also use it so now since we have more than one preprocessor we have to turn this into an array so for example by default uses wheat process this handles your SAS post CSS and whatever but now we want to use md6 also and now we need to pass it the MD swags options and that's how simple that was so now I'm going to save it and you should see something ah it updated so now md6x processes bugged on inside cell files so you can close this for now and of course this was just for demonstration you don't have to do this I'm actually going to rename this file back to swell because we're not going to use this and I'm going to instead create some posts so inside of source I'm going to create a post folder and let's create some placeholder posts so I'm going to say first post AMD and I'm going to say second post MD let me just close the sidebar here I'm going to use front matter so basically here is what you're going to extract as metadata from the margin post so you can say title and you can say first post and you really don't need quotation marks I'm going to have a title description I'm going to have a date and I actually prefer to use quotations mark because dates can be weird how you processed it so I'm going to say the year actually I jumped ahead of myself in the future and so I can use this and then let's see I'm going to use this date and you can also do categories like this you can specify an array but I can say svelkit as well if that's what you want and you can also have a Boolean like this so you can say published you can set it to true and later we're going to set it so it only shows publish post and hides the not published ones and now we can also use some markdown so I can say mark down here I can say hey friends let's give it an emoji so you can say wave and then let's give it a cold look just so we can see that it works we're going to say typescript but you can use whatever else you want and I'm going to say function greet name String and basically I'm just trying to put as many things as possible here so you can see later how syntax highlighting works and basically that's it so now I'm going to copy this over and I'm going to paste it here so this is going to be the second post and in the second person is going to have it more recent so you can also see if sorting Works later and here I'm just going to say sweld and this is going to be media inside the static folder is searched from root so if you ever wonder where do you put your images videos and Etc I'm going to open the sidebar here it is inside static so we're going to use this favicon since we get it by default for free so it's really awesome so how do you do an image in markdown you probably already know it but we can just do it like this so this is your alt text so this is going to be the link so you can just say favicon PNG and save everything all right so basically that's it for a dummy post alright friends in this section we're going to create a post API endpoint and I often get asked this because people are confused when you use a page endpoint and when would you use an API endpoint in circuit and basically what you understand it is going to make sense so for example uh API or Standalone endpoint can return anything you want so we're going to use it to return a Json of posts we can use anywhere we can use it to list post we can use it for categories we can use it for the RSS and whatever else you want but on the other hand a page endpoint which just loads your data for the page can only return Json and basically it's just Json for the page so if you're not reusing anything for example just making a call to the database to get some data just for that specific page then you really don't need an API endpoint or if you're using forms then you also need a page endpoint right and I hope that makes a lot more sense so let's create the API input for post I'm going to press Ctrl B to open the sidebar and I'm going to go in Source routes and this isn't convention but I prefer naming the Standalone endpoints inside this API folder so I can say API slash post and now you need to create a standalone endpoint so now I can say plus server TS and I can close this I'm also going to use a snippet I have so I can say endpoint and now this gives me an option of all the HTTP words I have which is another benefit of a standalone import you can use get post patch boot delete in this case I'm going to use get because I just want to get a list of posts in Json and basically that's it so what I'm going to do here I'm going to say post and I'm going to create a function get post and also time for a rent because this is something that drives me crazy when people create a thousand files for every single thing what I prefer to do is if I'm using something in one place then I'm just going to stick it in that file and if I end up reusing it then I'm going to put it in something like clip slash post yes or whatever you want right and then we can also say return Json so you can import this helper from circuit and we can just pass it post so let's create this right now I can say async function get post so I'm going to create this post and we're going to use a type for it which I'm going to make later so I'm just going to say hey this is an empty array and now let's use something cool so now we need to get all the pass to the post and this is really easy to do using Veet import meta Globe so we can just pattern match the markdown file so we don't have to write some node code and Etc and this works across many platforms so you can say import meta globe and now inside of here I can say source so it's relative to the root Source post and even if they're inside folders is going to find it so I can say slash star.md and for example if you have these Magnum files inside folders you can put a star here you can just do a slash like this and it's going to work beautifully but this is going to return something interesting so let me just return post let me just show you so I can go here and say console of paths let's go here and now we can go to API posts here you see some stupid error for the fabric on the series and departures you can see how the globe slurped up the post but it returns this function which is basically just the modulated return but basically instead of that we can use this option we can use eager true so this is just going to read the contents of the file you can learn more about this in the Veet documentation so now we can save this let me just rerun now we're going to see we get back the content so we can say default and get the value from that but right now here I'm going to remove this line and I want to Loop over all the posts and I'm just going to insert them into this post array so it couldn't be simple like this so we can say four const path in paths and now we can say the file is equal to paths path so let's just log it out to see what's going on as you can see let me just like this so you can see again we get the same thing default and default but now we also need to get the slug and basically the slog is going to be the extension so first pose dot MD but we also need to remove the MD and it's really not that bad so you can just say path split actually let me show you if I go here and say path just refresh this so the code runs here you can see here is the path Source post first and basically I want to split this on the slash so I can just grab the last one and then I'm going to remove MD from the end and that's how simple this is going to be so I can say const slug path split I'm going to split it on the Slash and then I can use at I'm going to take the last one and I'm just going to say question mark in case it doesn't exist and then I'm going to say replace and basically I just want to replace dot MD with nothing let's go simple it is so if I console log out slug let me just refresh this so basically if you didn't know if you refresh this same but you're just going to rerun this code so basically that's how I'm testing it so as you can see here we get the slot ah and also some people are confused what a slug is and basically a slug is just a term for a title post which is probably taken from journalism or whatever because slug is the title of the article but in this case the slug is going to be the thing in the URL you link to the post alright so now you need to get the metadata so I can say const metadata equal file metadata this is what you're going to get as you can see here from the file which is going to be our front matter so you don't have to use some library to pass the front matter in the markdown and now you can say const post I can spread the metadata but I also want the slug so I'm going to include the slug and I'm going to say if the post is published only then we're going to do this we're going to say if there is true feed I'm going to say pulse push the post also am I going to save that and now if we refresh this you can see ah how awesome is this navigate our post here so we have title description date categories published through slug one thing you have to do is sort it so that what I like to do I'm just going to reassign posts I'm going to be post not some sort and now people name this a b that's really I really don't like the sort of name so I'm going to say first second because it compares the first and second item each time so actually I'm just going to do it like this and now I'm going to say new date and I'm going to pass second date and we can turn this into a number to a piece typescript where you can use this method to get time and I'm going to subtract this from new date and we're going to say first date and then again we can get time and that's it so now the first post should be second because when you add a new post your blog you want it to show first right in that chronological order so let me just save this and now when I refresh this endpoint second should be at the top and how beautiful is this or a friend so if you don't care about typescript close your eyes I'm just joking it's really not that bad but really I'm just going to show you the types quickly and for you that don't care about typescript you really don't have to concern yourself with this so we're going to do in Source lip I'm going to create a types file going to be types TS I'm going to say export type categories which you can always update but for now you only have swellkit and salt and I'm going to create a type post which is going to have title string it has a slug string has a description make sure you spell it properly it has a date which is a string so the categories we can use the categories we created and now I realized my mistake because this should be capital and also we have published which is a Boolean and now we can save this and now we can use this so let me show you how I type this and this is why really typescript is awesome because if you're not using typescript this you might be just going gun call for this like this but you're going to encounter so much problems down the line and typescript is going to guide you gently or some might not agree with that but yeah so for the Post we really want to use that post type and we can just specify it as an array so you can see here it's imported at the top so now we need to specify this metadata type because file is unknown so we really need to do a check that this is existing inside this file this is where typescript is so awesome because this really isn't just typescript this is just really some good old-fashioned JavaScript checking at runtime right Tasker job surfaces this sort of problems for you so it actually forces you to do it properly so I can do something like this I can just say if the file exists and type of file is an object and the field metadata exists in file so I can do it like this and now I can move all this code here so for the file metadata we can assert it we can say hey this is s post but in this case this is a lie because it doesn't have the slug so we can use this helpful utility from Tasker you can say omit we can pass it the type here and you can say hey remove slug from it so we have to create a special type so here what we can also do we can say s post and this is going to satisfy but one cool thing we can use the new satisfy operator here so we can say satisfies post and are we going to get an error which we wouldn't catch otherwise so slow can be undefined right so now inside of here we can also add a check if the slot actually exists and this is why typescript is so awesome because it actually forces you to do things properly right so now since this is no this is satisfied to this sort of type post you can see here is it matches this shape so now this is happy when we pass the post and now we have a lot better error handling so I can save this and really nothing changes regarding functionality but now we have more confidence our code works as expected and this is why it's really worth it going through these struggles of learning type skin Etc because at the end of the day is going to make you a better developer another thing I want to mention is that you can see how we have this highlighting here and that's because I'm using this plugin so I can say Chrome Json viewer let's just say it's going to find it all right so you can get this extension yourself because by default you won't get this View and then you're going to get the same highlighting as I have I'm just using another team that it comes with but you can pick whatever team you want all right all right so far we've been assembling Lego blocks ourselves but let's actually use those Lego blocks and first we're going to show the post so I'm going to open the sidebar inside source Rouse because we want to show the data inside plus page.12 we're going to create a plus page DS file we don't have to say server because we don't really depend on anything on the server reading from the file system and Etc so you can just say page DS and now we can use the API endpoint we created so as you can see these things work hand in hand it really doesn't mean if you're using an API endpoint you don't use a page endpoint these things can all be combined and you don't even have to use that API endpoint you can write that logic for fetching posts here or inside the lib function but then you're just duplicating the logic right so I hope you really have a better understanding when you would use these things but actually let's stop talking and let me show you so again I'm going to use the snippet so now we're going to use a load function and from the load function we need to get fetch because this fetch has superpowers it can resolve relative URLs so if I say cons response for example I'll wait this is just like regular fetch but here we can say to Silky hey use API post that you created and this wouldn't work with regular fetch because you would need to give it the entire URL so this is fetch with superpowers and then you can say hey pause let's import the post type and we can even remove this JS sometimes it includes for whatever real reason and we can just do whatever else we need response Json you can even turn this into a function if you want but yeah basically we just need to return this and we're done save it and boom now we need to show the post all right so if you're following along I want you to be more comfortable using keyboard shortcuts instead of clicking around so press Ctrl p in your editor you can just type routes and you can see Source routes this is our root so you can open this you can see welcome to sulkit or you can just remove all of this I can just do this and we can say export let data so now we get the data back from this endpoint which is going to be pause so if you're just really sure we also have this handy snippet pre and I can just say data and now we're going to see what it returns so this is post and now we can Loop over them and show them and that's how simple that is all right friends but let me remove this and I'm also going to import the config so I can say import all as config from config that's going to be it and now let's work on the markup so here for SEO let's just say soiled head and now you can specify a title so not sure what this imported but let's just do this title and you can just say banana right this is going to change that to banana but let's use our config config title and awesome so let's create a section for the Post now I'm going to create a UL with a class post I'm going to create it like this and now we can say each I also have this snippet we can say data posts as post and now inside of here you can create an ally with a class of post and I can first turn it into a link so for the link I want to use the slog right so I can say post slug this is also going to have a class title inside of here we're going to use post title so next I'm going to create a P tag with a class date so P class date and I'm going to use post date and then I'm going to create a P tag with a class description now I can use post description so let me just save this so you can see it works but you might be noticing here it should have type completion because we get this from the back end right so you can see if we hover already this is an array of posts but if you ever have issues you can just press Ctrl P type the pointy boy or you can press Ctrl shift p this is going to immediately launch you into this mode the language server you can say restart language server or you can restart your development server and everything is going to work great so just give it a second and now if we hover over data you can see ah now it infers it correctly it just sometimes a lot of things are going on under the hood right so use the tools that you have all right awesome so let's Jazz this up I'm going to add some Styles I'm going to say pose play grid Gap is going to be 2 RAM post Max inline size are and here is some useful utility so we have size content 3 which is going to be 60 characters and we should probably use let's see vars size 7 who's still Ram right here we should probably do that awesome so this is going to set the max size for the post so let's save this and see what we get awesome and now I also want an underline for every post but I don't want it for the last one so how can we do this we can really use this handy selector we can say post not last child and then you can say border both on one pixel solid VAR we can use border which is specified in our CSS and then we can also say padding bottom size 7 let's save it and now you're going to see we get this border here but it's not going to give a border to the last item and how simple was that all right now let's add more Styles I'm going to add styles for the title I'm going to set the font size to our font size and this is another useful utility from open props we can give it a clamp which is a fluid font size so you can see in this case I'm going to use fluid free and I also want to say text transform capitalize and this should already look a lot more beautiful alright so we need to style the date which we're going to fix in a second so we're going to say color and then we can use text too so we can make it more muted and let's also style the description margin top size 3 and this is really great all right so let me show you a cool utility I often use for formatting dates so I'm going to open the sidebar I'm going to go to lib and I'm going to make a file utils and this is all the utils I use in a project and let me just I think I have this as a snippet for my date let me just paste this so you don't have to type all of this out and I'm going to say export form a date let me save it so let me explain this so you can ignore the typescript this is really I'm just blocking the type from Intel date type format which I deducted from hovering over the code so date style and it shows you actually it's right here date format and now we can hover over all these values you can type here but that's really not what's important this is format date so you just need to create a new formatter so you can do it like this const format there you can say new Intel date time format you can pass it the locals which you're passing through the function and the date style so you can do it like this and then you can return instead the format there so you can say formatter not form a date formatter format and you can say new date and you can pass it the date in the function so in my opinion this is more readable so you can save it like this so I basically create the formatter you don't need really any library for date and time and Etc it's just really using the built-in browser API so new Intel date time format we're passing the local state style and then we just format it and that's it so inside of here I can import it at the top so I can say import form a date from lib utils and now we can go here where is our date so we can just say format date post date and it's going to use the default so it's going to look absolutely amazing and that's basically it and you can also pass it other options and make it more flexible alright so let's work on how we can show a single pose and of course if I go here in the sidebar in Source post the way how we do it of course we're going to slurp up this post to show post and of course we also want to read this and get the single pulse based on the slug and of course inside the routes if you're here you can just add those plus page.md but imagine having to add each of those folders and files for each process would be really tedious but thankfully swelkit has Dynamic routes so for example we can do something like this we can say slug which is going to be dynamic and then we can get first post MD or whatever else you need right and that's basically how that works so this is what we need to create so inside routes I'm going to say new file I'm going to say slug and then I'm going to do a slash and now we're going to need to specify a page TS and I'm also going to create plus page soil so you can show the data so let me just do it like this I'm going to close the sidebar I'm super excited to show you something cool right now so let me just go here and I'm just going to use this snippet so I can use a load function and we're going to take the params so this is going to be whatever comes here so let me just do a console log params I'm going to open the terminal and we can also see this in the client material it's not important so if we go here and you can just say something like banana and then let's see as you can see here it says slug banana so basically that's how we get the params and now we can do this to import that file based on the slug all right but I'm going to show you how cool this actually is what you're going to do here and it might take a second to understand but it's going to make a lot of sense so what we can do we can say cons post and now we're going to use a dynamic import we can say a weight import and now we can say let me use backticks we need to go two folders above and we can say post and now we can just do this programs slug dot MD that's it how beautiful is this and basically the reason we can import this as a module is because if you remember we specified in the config that swelt should read also marked on files and now we can also parse those markdown files with md6 but you're going to see another cool benefit of this so let me just console log post so let's see what do we get if I go here and let me just I'm just going to go to the first post right now there's nothing here and there shouldn't be anything here but you can see here we get the default again you might be familiar with this from earlier so if we say pause default this is going to give us the content or the file right so as you can see render let me just refresh this so you can see here is our render function and we also get the default so we can use this render function and we can use cell special component cell component and render this as a component on the page which is going to make it really simple and as you can see it's not pose default but we also have post metadata so you can see here is going to be the render function which is going to be the content inside the default right but we also have the metadata how beautiful is this friends we don't have to parse this using front matter or whatever this is just going to extract this for us so we get the title description date categories and the publish Boolean so how beautiful is this and basically all we need to do let me just remove this I can just say return and we can name this whatever you want we can say contest remember this is the component that we can render in regard to see how this works in a second you can say post default and now we can return the metadata post metadata and also let's be more responsible so we have to wrap this in a try catch so I'm just going to take this code let me wrap it like this and now I can see here a catch the error and now we can import row error so this is imported from cell kit error and now in case this fails we're going to say 404 let's use backticks could not find param's slug so we're going to get this error which is beautiful so for example let's see if I go here and say something like banana you can see 404 could not find banana so let's go back here and now we can go to our page let me just close this I'm going to create this script tag again export data so we get the data for the page let's use my sneaky little snippet okay so always go to opposite exists ah how beautiful is this friends look how simple this is this is super we get the meta title description date categories and published and we just now need to Loop over it and interesting thing it didn't include the component itself because probably Json certified can't display it which is fine it exists trust me you're going to see it in a second all right I'm going to stop teasing you okay so first let's get some SEO out of the way so you can create soiled head you can use title actually not this again you can say title like this and now let's import the config same as before import all is config from lip config don't remember dollar sign because it's aliased and now we can say actually we don't even need config my bad I jumped ahead of myself yeah let's just do it like this so for the title this is going to be what we get from data meta title how awesome is this again if you don't have Auto completion it's because we really don't have types for this here but you can also use types and it's going to be fine but let's just do this and then let's just have some basic meta tags we can say property OG type and as a homework you can also add meta tags for social images you can add social images also and yeah so we're going to say article like this and then we'll just copy it over so if you really don't know about this you can just go to open graph I think just see open graph the open graph protocol and you can learn about these different things but honestly who has time to read for all of this nonsense you can just go to my blog or whatever blog you read just look at what they're using for The Meta tags and just copied over like everyone else does right easy okay so for this content we can just say content and we can say data meta title and basically these are just the bare minimum meta tags right so now let's create the article itself so I'm going to say article and now here I'm going to create a h Group which is more esoteric so I can say H1 and I can say data meta title and now we're also going to have publish date published again we're going to use format date and we're just going to pass it data meta date basically that's it and now we're also going to show the tags so let me just save everything you can see first post publish that and now I can go here so let's just create tags so now we can create a niche block you can say data meta categories and again if you ever have problems with this like you don't need to console all these values all the time this is why this is one of my favorite Snippets so you can just do this and I'll just look at these values here so you don't have to remember it but usually don't have to do this because you have Auto completion but here we haven't specified the types because as you see here is any but you can also Supply the types for that if you want on the back end and it's going to show on the front end but yeah that's why I really love this snippet so I can go here in s category each and I'm just going to use a span and remember from before we have those surface glasses so I'm going to say surface 4 and I'm going to use the num HTML entity and I'm going to say category so let me say this so you can see here it is we're going to add some Styles but also homework for you if you're keen on doing it what you can do instead of using a span you can create a link here and you can use the category as a link so for example you can have something like this categories and then you can have this Dynamic parameter category so maybe as a homework assignment you can see if you can figure this one out which is going to be really fun but yeah let me just do this and now since we have the text already now we need the post itself I know I know I'm such a tease so let's go here you can create a div pros and basically we're going to need to style this Pros because we don't really have control over the markup ourselves it's just going to spit out from markdown whatever it is we're going to have to add some styles to the global Styles all right so let me show you something cool so here is a svelte component like this and now it accepts that this attribute and you can pass it data content because we're importing the marathon file as a component right so now if I save this ah here is our post how awesome is this friends all right so let's quickly add some styles let's go to a style now we're going to style the article Max inline size so we're going to use size content free 60 characters we're going to say margin inline Auto so it's centered like this then let's add H1 takes transform capitalize and then we can also do H1 plus b you see how lazy I am I try to avoid classes as much as possible so let's go margin talk VAR size two and you can also flex your CSS selector knowledge right takes two so now we can do this okay this looks a lot better so now we can also style the tags we can say display Flex get r size free say margin top size 7 which is going to be 2 RAM so we're going to have some spacing and now for each tag this is starting to get really easy how embarrassing is this no no it's awesome trust me so now I'm trying to Target each child you're going to say padding VAR I'm going to say size two and we're going to say size three so padding when you do it like this so it's really top bottom first one and the second option is left right and then we can also say border radius r and we can use radius round from open props let me save this and this already looks a lot better alright so this is the only markup we have control over inside our template but as you can see here if we inspect this we really don't have control over something like this let me just do it like this so you can see we need to make the Styles Global you can do it here for example you can say Global H2 and Etc but let's just press Ctrl P we're going to open the CSS file it's just place it here and now we're going to scroll to the bottom and let's just add some Styles so we can say pros and we can use the new selector is so you don't have to repeat ourselves and now we can say H2 H3 H4 H5 H6 now we can say margin top VAR is going to have a size of 8 so 3 RAM then you can say margin bottom I'm going to have size three just save this and just close this so we can see what's going on so we have some spacing for the titles and this is really a cool new selector if you weren't aware of it and I think it works in every browser alright so I'm going to Target the piece selector but basically I don't want so we can Nest it is and let me just copy over this text so we don't have to type it so is where it's followed by a P tag right you can just say margin top bar size seven let me say this of course you don't really have a lot of paragraphs but you can just use a placeholder or whatever to test it out and it works trust me and then we can say Pros is and we can Target unordered and ordered lists we can say list style type which is really cool so you can give it an emoji and this is also accessible I believe so we can say padding left VAR size five here you can see we're going to use lists later so this is really something cool then we can say Pros is unordered ordered list and Li we don't even have to be this specific since we've already using these selectors let's use it margin block size two actually yeah I think it's size two and we can say padding inline start again a cool property so you don't really have to say padding left or whatever and you can see size two so now this is also going to work great is going to push the list a little bit from the left and now we need to style the pretext so as you can see here Pro spree if I say background red you're going to see this is our pre-tag so we're going to say Max inline size and I'm only doing this because I need to override the open props value I'm going to say 200 because I want to take the entire width I'm going to say padding see size was seven I think three was one ram yeah so I can do it like this I want the Border radius to be 8 pixels and I can save this and the other thing I want you can see this tab size here is large so it's using four tabs I think but you can say tab size two let me just remove the background we can save this and everything looks great alright so that's it if we go to the other post you can see here is showing the image the markdown is rendering properly and how simple was this and you learned a bunch of things in this part I'm going to show you how to do syntax highlighting so you can see here is our code block right now but it looks really sad right it has no Styles and Etc but md6 by default uses prism which is a really tried and tested syntax highlighter and to get teams for it it's simple as going to their repository which is prism teams so you can pick any of these themes here you can change the CSS values you just have to include this in your CSS and that's it you're done but I really want to do something more awesome I want to use a more modern syntax highlighter Shiki which looks like this so let me just really show you what's the main difference well the main difference you can see how let me just inspect this this is how this works so prism basically goes over that markdown and tokenizes these strings right so you can Target these three rings and you can style it using CSS this is really tedious so you don't have really a lot of these tokens but something like Shiki uses the same tokenizer as vs code which means that you can use actual vs code themes as you can see it uses text made grammar to tokenize string which is the same thing vs code uses so you can use any vs code theme as you can see in this example they're using the north team but you can actually just point it to a Json file and everything is going to work great and this is really so much easier and looks better in my opinion than using prism alright so how do we get cheeky working and basically we need to create a custom syntax highlighter which might sound intimidating but it's a couple of lines of code and let me just go to the md3x docs so if I search for the docs it should show up MRX docs so let's see custom highlighter so as you can see here in their docs you just have to specify this function highlight there and then we can use Chic inside and just pass it as an option and that's how simple that is so let me show you how we can achieve that we're going to go through the terminal first I'm going to stop everything I'm going to say pnpm I I'm going to install Shiki let me just close these developer tools awesome let's run the development server again and now inside the writer Ctrl P start typing config and open the swellkit config awesome so you just need to import Shiki from Shiki and now we can create our custom highlighter so this is why I split things like this so it's really easier to understand what's going on since you had md6 options here which are also type so as you can see from all of the options we can also pass a highlight option and now we can pass it an object and this has a highlight there which is just going to be an async function is going to take the code language we're going to default this to text and then let's just give it the body and now this is just going to take a couple of lines of code so for example if we read The Cheeky docs they show you how to use the highlighter so we can create a highlighter like this you can say a weight shaky gate highlighter we have awesome completion right and now we can pass it a bunch of options but in this case I'm going to use a theme I use myself so this is a theme I use it's poem address so I can say POI mandress and that's basically it so this part is a bit trickier but I found the solution reading the issues on the md6 GitHub basically we need to create the HTML right like this and we can just use the highlighter you can say highlighter quote to HTML so Chic is going to turn your HTML into something that looks like vs code right and we can also pass it the code and we pass it the language here and then we just need to return it so we can return the HTML but there's really a problem here and basically circuit is going to freak out when it sees a symbol actually a character like this and Etc brackets so we really need to escape it somehow and thankfully MD specs provides us a function for that so we can wrap this by importing Escape swelt which is just going to get Auto Imports from md6 and now we need to wrap all of this like this and now we also have another problem we just want to render this inside the template so we can return this with back decks and basically just want to input this in the template right so remember how we have this useful feature HTML in soil so we can just show the content and you can also say HTML but you also need to give it backticks so we can escape this code because we're going to run into problems right and then just to escape it you just need to use the backslash like this and now you can save this and everything should work great you might need to restart the development server as you can see it already kicked in and how beautiful is this so this is literally the same theme you're seeing me use here in the vs code editor being used live in the markdown how mind-blowing is this friends and there's a ton of options for Shiki you can figure out syntax highlighting and line hiding the unfortunate downside is that their docs really know where your sugar coating it sucks so you have to go through their issues and figure this out if you want things like that or actually sucks is an understatement their dogs don't exist is really amazing and you're going to be so much happy using this but again let me just show you shaky GitHub so if you go here let me just zoom in as you can see here is their definition of docs so uh it's a bit rough right she explains how cheeky also works so configuration and option this is the same thing I don't get the highlighter you can specify the theme languages if you don't want to include every language or you want to include specific languages Let me just also go here ah you can see awesome paths you can specify a theme so you can give it a path to the Json awesome then languages can recall to HTML let's see what else even has locals yeah actually you can just pause for this it's really not that intimidating I think there's also an option so you can load a light and dark theme if that's something that you want let me just see if I can quickly find it if not I'm going to move on but yeah basically you're gonna have some fun and read it and yeah basically that's it you can see how simple it was to implement your own custom syntax highlighter in a couple of lines of code and of course Shiki isn't the only syntax highlighted out there if you want any other syntax style trade to use you can apply what you learn here and Implement that one so there's also another awesome project for example Shiki two slash which is completely insane it also gives you typescript feedback in your editor and this is really a fancy page for Shiki two slash basically this thing cheeky and turns it up to 11 as you can see you get these tool tips in your code blocks is that something that you want swelki documentation for example uses two slash so you can see here you have this documentation and let me just see now you can hover over it you get the types and everything so if that's something that you want for the purpose of a simple blog I really think this is overkill but how beautiful is this I think this is really awesome alright if your mind isn't already blown I'm going to show you how you can use components inside markdown first I'm going to start by creating a counter component inside source post but you can place this wherever you want I'm going to say counter.swelt I'm going to create a new script tag you can say lit count actually zero so let's say cons increment to the simple function we can say count plus equals one because in sales you need a reassignment to update the value so you can save button you're going to show the count and for the on click let's say increment that's basically it so let's press Ctrl P let's find the post and look what you can do now this is crazy so you can use a script here and now inside of here you can say import counter from counter swelt and now you can just use it so let's create a counter section let's save it and how beautiful is this so now you have a regular swell component inside markdown but let me show you another awesome thing and that is custom component so for example if I inspect this image what if you wanted to Lazy load images ifriends or Etc if you're not aware there's a loading attribute in HTML you can use and set it to lazy so the asset is only going to load when it's in view so you don't need intersection Observer and Etc because it's baked into the browser but as you notice the problem here really don't have control over this markdown right or the generative HTML but thanks to md6x we can pass it a component with the same name and we can get the same props of the Elementor trying to replace and we can do whatever we want with it but to do that first we need to create a layout and to not be confused with plus layout.s cell this is something entirely different basically this is what happens so inside the layout here you have your markdown and this is just what happens so the layout you specify just wraps your markdown you can pass it whatever you want as you can see here in the options you please specify a layout so you can create a special layer for a Blog article or use a default layout and this is really confusing how they're using layout dot swelt so I prefer to name mine md6 and you can do other things with this layer but basically the only reason I use md2x layout is to replace a component so let me show you how that works so I can press Ctrl p I'm going to open the swelki config and here since we have Auto completion your press control spacebar I can just start typing layout and now inside of here you just want to use a default layout I want to place this into Source instead of using layout or cell you can name it whatever you want banana right so I'm just going to name it md6 just to be obvious and then in the sidebar just collapse everything inside of source I'm going to say new file md3x the result and also for good measure I like to restart the development server because when you change the config it often doesn't get picked up so let me show you that and this also similarly Works to the sales layout because you can use a slot and now everything is going to get past as you can see and now you can say hello for example this is going to wrap your entire malware as you can see but we can use this to override these elements let me show you how we can do that I'm going to close the config we don't need it anymore we don't need a post anymore I'm going to close the counter so let me show you how you can create custom components so for this I'm going to go into Source slip I'm going to create a new folder components are going to have another folder custom components and then I'm going to create a cell component that has to have the same name as the element you want to replace so I'm going to name it image sweld and I'm also going to create another file in custom which is going to be index TS and this is only going to serve to export the components because it might seem like Overkill but later as you add more components it's going to be easier to import then I'm going to show you how let me just close this and now we can just add a script tag here so you get all of the same attributes as the element you're trying to replace or export let's Source Alt and we can just even let's just specify an empty string like this if it doesn't complain and now we can just override it however we want so you can just do this you can pass it Source alt and now remember what we wanted I want to specify loading lazy so I can save this and now inside of this file I can just say import image from image the soil and I can just export it as an object this is going to be really easier to import let me show you how so now inside of MD Sox layout we have to use scrape language likely but we also have to specify context module so we have to say context module and now we can import the image from lib components custom this is basically doing index TS but since you don't have to include index TS this is works great so now you can see this is already going to be much easier so you can import whatever else you have in the future H2 H2 and Etc instead of importing every component individually and now we can also have to do an export and now you can say image so now let me save this and now we might need to refresh the page and let me just inspect and again if things aren't working you might need to restart the development server because this thing gets confused easily I found out just because when you change and mess with the config weird things happen all right so now that I restarted the development server and you can also go here and reset language server sometimes this also fixes it when you change the configs it just how it is but once you get it working it's all right but look at this power that you now have so we have image source favicon also loading lazy how awesome is this and now you can modify any element you want and this is really powerful let's talk about how you can extend your markdown blog using markdown plugins but first I need to briefly explain something that sounds spooky which is abstract syntax tree which sounds intimidating but it's really not so for example let's say you have a HTML file or a marketing file and I ask you that your job is to parse it and modify it so what would your solution be it would probably be something naive right like using regex to parse it but that's really inefficient and prone to errors so at the end of the day everything you see HTML markdown gets turned into these three that you can reasonable which is called the abstract syntax tree and then you have all these awesome libraries around it so you can what's referred to as walk the tree so you can just walk the tree yourself so you don't have to implement that and then you can say okay does this node exist here then I can do something based on that and Etc and okay this might sound like complete nonsense but why would you care about this so first let me say if you're interested in learning about abstract syntax 3 or writing plugins for markdown this is really a great post from CSS tricks on how to modify nodes in an abstract syntax tree which is really a great read if you're interested in that but let me show you the ecosystem of modern plugins and I'm going to refer to them as markdown plugins but they're more General HTML and markdown plugins that transform it right they're really not called markdown plugins but for simplistic so you can see here is remark so remark is a tool that transforms markdown with plugins so basically you have some markdown and then you can transform it however you want and then on the other side you have rehype which is the same thing but it transforms HTML with plugins and then you can look at this repositories you have a bunch of remark plugins so you can add titles and Etc you also have a rehi plugin so this is going to modify the HTML but I'm going to show you what you're going to use so we're going to use something like remark unwrap images because let's say that you have this problem what annoys me about images in markdown is they're often surrounded by this speed tag which is really annoying and can cause problems with styling right but really didn't even fix this by using a custom component it still wraps it so we can use our remark plugin to remove the speed tag from the markdown right and everything is going to be great and then for example let's say that we want to link this tags here so for example here is a H2 swell but what if we want to add an ID here that says ID equals and why would you do that well you can then simply link to that so you can say something like pound size 12 and then it's going to link to that section of your site which is really awesome but we can do that because first we have no ID right so we can use another awesome plugin which is going to be re-hype Slug and it's going to add What's called the slog to these titles and why is this also awesome because we're going to use a third plugin remark table of contents so it's going to slurp up all of the headings in your markdown and it's going to create a table of contents for you and how awesome is that and also I want to show you that these things aren't really that intimidating basically what a markdown plugin is at the end of the day just a simple function is packaged like this so you can consume it but basically you can create in your own project as a simple function and you can include it as a remark or a rehab plugin so let me just show you if you go to index.js you might be thinking this is something super complicated and yeah there's some intimidating Parts about this code but you can see remark camera images this is it this is the code here is a walker it just walks this tree right and then it says okay if I find this type or node then do that or whatever else it's really not important and anyone can do it as I can show you here here is a plugin I made a while ago this was two years ago so basically if you remember how popular was that image placeholders with Gatsby I wanted the same thing but I was using hjs at the time I think so I made the modern plugin for rehab that gets the image size turns it into base64 so it acts as a placeholder so you get this awesome effect before the image is loaded with the lower resolution so I'm actually not sure if this works today but again really simple if you go here it's just a function right and it just goes through the tree walks the tree right and then look at this no tag image if it's image then we're going to do something with that image it really isn't important what's here you can learn this again you can read this post and you're going to be enlightened and Abstract synthesis are really cool and Powerful alright but enough talk let me actually show you how we can use this thing so I'm going to open the terminal I'm going to press Ctrl C and I hope all this talk didn't intimidate you because just to use the plugins it's really simple so we just need to First install them so we can say remark unwrapped images remark TLC table of contents and Rehab slug we're just going to install them and then we're going to import them inside the config and pass it on to md6 and this is why nv6 is awesome because it makes it easy to do so all right so let's run the development server again I'm going to close the terminal Ctrl p I'm going to open the config so here in this section I'm just going to say import remark unwrap images from remark unrep images then I'm going to import remark table of contents from remarkable of contents and then re-hype slug awesome and now again md6 makes this really easy so after the Highlight you can see to press Ctrl spacebar what options do you save oh rehab plugins and remark plugins awesome so let's first start with remark plugins and then we can just paste it an array and just paste the plugin remark unwrap images I'm going to pass in remark table of contents actually we need a period awesome and now we can say rehi plugins rehype slug that's it all of this talk for 20 seconds of work right all right so let's see if this works awesome now you have slugs for the titles and what else did Via table of content is going to show you that so it unwrap the image if you inspect the image ah now no longer it isn't surrounded by that annoying P tag and let me show you how simple it is to add a table of contents so right now we have swelt and counter is headings so this is going to create a table of contents first so let me press Ctrl p so this is the second pulse rate and all you have to do you have to go wherever you want actually and you can just say table of contents and it's going to generate it based on that it works like magic right look how awesome it is so now because we used an ID and a table of contents now when someone visits your site or they want to link to a specific section you can just say counter for example and now you can just copy this link over and paste it to someone another thing worth mentioning is that when you're using such plugins you should read their docs because they have some extra options so for example if I inspect this here it has also something annoying by default some allies are surrounded by P tags I think it's not in this case but actually you're going to see that in which case you can just go here and this is going to also show you how to pass options for a plugin so for the plugin you're using turn it into an array and then you can add a configuration object and because I've read the documentation like everyone does right there's a config option which is right actually not right it's tight but they are tight true and then you can save this and again refresh and everything is going to work so now again if we go here everything looks great this is how simple it is to use markdown plugins to extend your blog or reference to adding a team toggle is going to be a breeze because we set ourselves up for Success if you remember hit the start in our Global Styles we specify these variables so it already respects the user's preference based on the media query but we also included something like this it's just color scheme dark so if I go here and on the HTML I can just add color scheme light for example and this should change the team which is awesome so now you just need to use JavaScript to toggle it and this is going to be really simple the first thing I'm going to do I'm going to press Ctrl P open app HTML and first I'm going to get the theme here which is going to prevent flashing because flashing happens because you're loading your component the site loads but the component still hasn't loaded so it defaults to some value for example you have it set to a dark theme but maybe the default is light so it's going to be light by default because it still doesn't know the preference and when the component mounts is going to check the local storage right and at that point it's too late and that's what causes that flashing so I'm going to do it here instead because this runs before anything else and to be honest maybe a better approach than using local storage would be using a cookie but in this case if you're building a static site or you're going to maybe use a static adapter later you really can't use cookies without a server right so this is going to be the easiest method for us so you can say script we can say type module and really it's nothing intimidating we can say const team we can check local storage local storage get item I'm going to have a key that's named color scheme alright so now we can say hey if team exists then we can say document document element so this target is the head of the document and then we can set the attribute you can say color scheme and you can set it to the team that we received otherwise if the user doesn't have any preference we can set the default to be the dark mode so you can set item color scheme and we can say dark save it and everything works great so now if I open the developer tools let's go to application so now you can see local storage color scheme dark so you can clear it again is going to appear and you can improve this by also listening using JavaScript to the preferred color scheme and you can set an event listener when that changes to update everything else so that's a challenge for you if you want to take it so next I'm going to make a simple swell store that's going to export the active team so you can subscribe to it anywhere and get notified if it changes and then we're also going to include a toggle theme and even a way to set your team in case you ever want to use it so it's really simple let me just close all of this and now inside source lib I'm going to create team TS you're also going to see that people love to put their stores in a folder named stores but I'm just going to do it this way and let me just show you how simple this is so first I'm going to add a type theme which can only be light or dark right and now we're going to use a store so we can say const user theme we're going to need to import writable from cell to just an object and this is a way where we can subscribe to it so actually let me set this to theme and this is going to be writable and now we can create this variable cons user theme so again we need to check the local storage but because we set it before this component is mounted it's not going to cause flashing so we also need to import another thing a browser so we know that we're in the browser context because your components run on the server and client which is going to cause an error and let's just do that so we need to check if it's the browser in which case we can do local storage get item and remember I named it color scheme so now in our store we can pass user team and if it doesn't exist we can just default to dark and also let me space this out so it's more clear and you can see how simple this is so now we can also export function Ogle fee and we're also going to export a function which is going to be set team which we're not going to use but you can use it if you want and I'm going to show you so let's also export this so this is our store so let's toggle the team and it's really simple so you might be familiar with stores and using the syntactic sugar dollar sign but that only works inside the swell component so basically you have to use the methods on the store yourself like this so you can say team update and now you can get the current team which is a callback right and now basically we just want to flip the theme so we can say const new theme equals and then we can say hey if the current team is dark then a team should be light otherwise flip it back to dark and again what we want to do we want to update the head with that attribute so you can say document document element set attribute color scheme and we can pass it the new theme and then we also want to update local storage local storage set item color scheme we're going to set it to the new theme and always with the store you have to return the value so we have to say return new theme and that's it surely nothing complicated right this is how simple stores are and for this one if you ever need to set theme so you can for example in part of Europe you can say set theme dark like this and it's going to update the store so if you ever need this it's simple as saying team set we can pass the new theme which is going to be here new theme and we also made a type theme which is really awesome all right and that's how simple swell stores are of course you can also again as I said you can use JavaScript and you can listen for the event or the user preference what color scheme they prefer and then you can even add an event listener so you can watch if the preference changes right so if you ever want to challenge and want to implement yourself you can do something like cons preference window match media and then you can say prefers color scheme dark or something and then you can get it by saying matches so this is going to return a Boolean and then if you ever want to listen to it you can say preference add event listener change and then you get the Callback and this is how you can Implement so you can also account for that but basically just to save on time I'm going to do it like this so now I'm also going to create a toggle component so let me just close this inside source routes I'm going to create a new file toggle sweld let me close this sidebar I'm going to create a script tag so let's just import some transitions you can say fly from svelt transition let's import some icons I'm going to use the moon and sound from Lucy itself and I'm going to import the theme and toggle theme from our store and that's basically it so now we can create a button and on click we're going to update the value in the store so we're going to say toggle theme and we also need to give it an aria label so it's more accessible toggle theme and then let's make a check so now remember that syntactic Sugar Magic we need to subscribe and unsubscribe to the store and this is how you do it in a Cell component and actually here is an error from hey awesome and now we need to check what the team is okay so if the team is dark then we're going to create the div like this and let's just give it an animation going to be in fly y10 we're going to use Sun and let's see it also has a span which is going to be light so this is also going to be an else block like this so you can say else let me just copy over this code and let me just see fly so this is also going to be y but we're going to be negative so we're going to create a cool effect you're going to see what it looks like so we can say Moon and then we're going to name it dark let's save everything and let's also give it some Styles which is really simple we just need to overwrite some default Styles so we're going to say padding zero font weight inherit you can also set appearance none but that creates more work than it's worth to be honest uh border none box shadow and we want to set overflow hidden because of the animation I'm going to show you if you set the high amount of why you need this overflow and then again I'm going to be lazy classic you're going to Target every child let's say Flex Gap size two let's save this and of course now we need to import our component inside the header so let's press Ctrl P start typing header so remember how we had this toggle placeholder right here so let's see if it's going to Auto Import it we should just start typing toggle and it's going to note what to import it if we look at the top it imported the toggle from right here all right so let's see the moment of truth if I save this and also sometimes because when you load these things and change files all of a sudden without changing you might run into some issues so again restart the development server and it's going to fix itself as you can see it took a second but here we are so now look at this so this is our cool animation is going to change the theme how beautiful it is so this is that the animation you can see it comes from the top and then it comes from the bottom you can see the value is updated but let's test it if it persists right and there shouldn't be any flashing because we set it in app HTML how beautiful is this so you can see everything works let's add some simple page transitions which are going to give your site an air of Whimsy and sophistication I have an entire video on silky page transition so I'm going to go through it quickly basically we need to know when the URL changes and then we can use the key block to destroy the elements and then create them again which is going to play the transition so the easiest way to do that we can go to source routes and then we can create a layout TS file so now we can use a load function again and now we're going to get the URL from here and then we can return prop URL but we're going to look when the URL path frame changes so that's how we're going to know the transition is in play and then again here in routes I'm just going to create a new component transition swelt I'm going to give it a script tag I'm going to say import fade from sweld transition you're going to take the URL as a prop going to be a string like this and now we can use the key gen the key block actually I'm curious why it doesn't complete probably because it's mad about this yeah so we can do it like this then we're going to pass the URL and let's just create that transition and then we can say class transition and we need this class because now since we're wrapping everything we need to give it a 100 height and then we can just say in fate and by the way if you're going to use out just make sure to give it a delay the same amount of duration as your in transition but you can learn more about the video I mentioned and then we're going to pass it the slots or anything else and then for the Styles I'm going to quickly say transition height hundred percent and now press Ctrl P go to your layout and now inside of here we can say page if you're going to say transition and it's going to know to import it so it's going to work like this so you can put it here but I also like to be more descriptive so I can say page transition and then let's put the slot inside so now we need the data prop so you can say expert data so this is going to come from the layout TS endpoint right so now we can pass this as the URL say data URL let's save it and also don't forget since I named it page transition I should also name it pin transition here so now if we go here now we should get the page transitions working so I can go to the first post as you can see now it looks beautiful and elegant another thing I want to mention is in transition you can also use import navigating from the store so it's like app stores yeah it's like this and you can pass navigating instead of doing this with a layout but careful this comes with a downside it's going to work when your page is fast but if someone is using a slower connection and they for example go to the second post and they try to navigate to your main if this page doesn't load instantly the transition for this page is going to play again because you triggered the navigating event from the store but the site you want to go to isn't ready to be navigated to this is going to cause issues to the user because it's going to look like if they clicked on here that this page has reloaded again which is not true because if they wait a second it's just going to go to the main page so this is really a downfall of using navigating and I never trust real stores for navigation because of this reason and this is why using a layout to pass the URL is a safer method but yeah that's it and that's how really simple it is to Implement page transitions in soil kit in this section I'm going to show you how to create an RSS feed you might not use an RSS feed yourself a lot of people do and they prefer to get notified about updates using their RSS reader and creating an RSS feeding cell kit is simple as creating a standalone API endpoint that returns XML and this goes back to what I said at the start about the difference between a standalone endpoint and a page endpoint basically a page endpoint can just return some Json for the page and it's just the page data right but using a standalone endpoint you can return whatever you want it can be text Json XML and Etc it's basically if you ever use the express and created an endpoint inside of that that's what a standalone endpoint is so here's how you do it I'm going to open the sidebar in size Source routes I'm going to create a new file I'm going to name this rsas.xml so when you go to the path in the browser we have to type rss.xml which is really optional and also when we created the post endpoint you could have also named it folder post.json then you would have to type post or Json in your browser but that's really up to you so now we can say slash and then we create the endpoint server TS and how to disappoint you I'm just going to copy the code over because there really isn't a lot to learn from here so I'm just going to go to the Post the RSS section I'm going to copy the post and I'm going to save it let's just go over it so you can see what we're doing so here importing config the types from the the post type and here I have a regular get function that I'm exporting we're getting the post from our endpoint and then we specify the header so content type is application XML and you can see I'm just constructing here an XML string this is the minimal markup required for the XML this is why I didn't want to type all of this out because it's really pointless right and also how I check this when you deploy your site you can use the feed validation service and you can give it a path to your RSS so as you can see here you have this channel title description link and here we're just using the config title description URL and basically that's it and now we're taking the post that we got here and then We're looping over them so we need an item and each one is going to have title description link a good which I don't even know what it is to be honest I just looked at what you need for an RSS reader and here it is and then you need a publish date and here's how you find out what you need to do because first I did the naive thing I just said new date post date and then the RSS Eliza was like wrong we want this type of thing and I was like okay how do I get this sort of date and then I learn from mdn that you can use to UTC string to give it what it wants right and basically that's it and then I'm also using trim at the end because I made a new line here which would cause a parsing error in the XML right and then it's simple as returning new response XML headers alright so now that we have this if we go here and remember how we had this post here she's going to open it in a new tab and and you can see it works so you can see how beautiful RSS feed you can use but yeah I hope this section wasn't disappointing because we will just spend a lot of time typing for no actual benefit or to learn something new right but yeah that's basically how simple it is to make an RSS feed and you can also make a site map if you want to look into that another thing you can do for RSS feed discoverability so for example let's say summer has an RSS feed they would have to take this literal link and copy it in the reader but what most people do is they take your site URL and copy it into the reader but if you don't have this particular tag it won't work so let me show you what you need to do so inside app.html you can go to head and you can add another link so you can say link real alternate and you can say type application which is atom plus XML and you can give it a link to your RSS feed which is going to be slash RSS XML then we can close this and not sure what happened but you can just refresh here and basically now when someone copies over your link in their RSS feeder is going to work and you're going to get your feed and they can enjoy your content all right friends that's basically it but before you deploy the project let's first add an error page so we get a more custom error so for example if I go to Banana that doesn't exist this looks fine but we can do better so we can go to the project Source routes and we can create new file plus error.swill so now we can override the default templates you can see nothing is shown and you can also add this plus aerial sales page for every route but because we don't have a lot of nesting it's almost pointless so let me just add the script tag now we can import the page store from app stores and now we can just get the values just create a div error H1 so we're going to subscribe to the page store we're going to say status and we're also going to say page error which one I don't exists so let's do it like this and not stats plus status and let's go to the style we can say error and then let's say height 100 we can say display grid and I want to center it so I can say Place content Center let's say this and we can see this already looks a lot better alright friends our site looks great but before you deploy it let's do a couple of things first I'm going to create an about and contact routes because we didn't do that yet just for completion so we can go a new file we can say about so you can say Plus page swelt and we can say about I like long walks on the beach because why not so let's save this and now let's just copy over this folder inside routes say paste so now we can say contact let's open the contact page I can change this title to contact and we can say new phone who this awesome so now when we transition to the size they work all right so now let's close everything and now we want to pre-render all of this content so basically we just want to make this static and this is really simple if we press Ctrl p and start typing layout so if we open our root layout endpoint inside of here we can say export const pre-render true and resverkey sees this is going to crawl all the links on your site and it's going to pre-render the pages at build time so when you're on pmpm run build or read build whatever instead of ass in the server each time to create the page is going to serve the static files instead and we also have to do this for the RSS endpoint so you can go here export cons pre-render true we can save this and I'm also going to show you how that works we're going to understand what pre-rendering is but first we need to go to the terminal stop whatever you're doing and then we're going to first remove the default adapter you can use adapter Auto inverse cell is going to detect it but they recommend you install their adapter which fine who am I to question yourself so now I can say PMP ID so ljs adapter so just make sure you say adapter or cell which will take a second and now press Ctrl P go to your selfie config and you just need to replace adapter Auto with or sell and that's basically it so now we can close this and now inside of here which I recommend you do before you deploy to catch any silly mistakes like typos in ETC I recommend you do pnpm run build and then you can also say npmpm run preview so you can preview your page so first it's going to run the build and then the preview so you can check if everything is working fine so give it a second alright so now instead of 5173 it's 4 and you should see everything looks the same okay beautiful our pulse work let's see okay everything was great so let me show you what happens when you pre-render and basically it's really nothing intimidating so another thing is it creates this dot for sale folder which you should add to your git ignore so you can go here and add this this should be by default I guess since you can use any adapter it doesn't make sense but here are your functions so you can have serverless functions here but let me just show you the output static so as you can see here is the app the API that we created posts which we can also pre-render so when you use pre-rendering it's going to crawl your entire site for links right so you can see if we go to the about this is just a normal static site right then you have contact first post so now you just computed all of the data got the data for the page in advance and now that's what you're going to see when you load the page right so this is why it's blazingly fast once you upload it you can see we already pre-rendered our RSS and everything works great so basically that's what pre-rendering is it's nothing spook it just gets the data ahead of time and it does it at build time instead of request time when you go to your post so let me just collapse everything and now we just need to create a new repository on GitHub so here I am on my legendary Smurf account so I can name this circuit blog a Blog for markdown poets so we can just create this make it public create Repository and now inside the terminal I'm going to use the terminal but you can use your GUI or whatever else let me just collapse this so you can say Git You need to initialize an empty repository you can say git add thought to Stage all of the changes and then you can say git commit M we can say add project so now you have all of these instructions here and you can just copy over this part say copy you can run all these commands in the terminal at once if you want so you can copy it over paste and now this should be pushed your Repository so you can see here it is how beautiful is this you can also update everything here let me show you how simple this is using versaille so now we can go to the resale dashboard add new project and I'll give you a second to load since you already have one project you can just import the silky blog you don't really have to change anything here because your cell has great integration with cell kit you can place your environment variables here if you need that but let's just press deploy and it's going to take a minute also don't be afraid during build to look at this output because this is basically the same thing you see in your terminal but it's run on someone else's machine right this is all the things that you might have made a silly mistake or typo so don't freak out just read the error message you can see here is a lot of junk it really isn't even important but if you see here something like error and it's red just stay calm and read it then you're going to figure it out but there should be no problem just give you a second to be done all right so it's working it's magic the first time is going to be slower but subsequent runs going to be much faster then you're going to get greeted by a congratulatory screen so congratulations if you made it this far and you can go to your dashboard and your cell is going to give you a unique URL silky block Sigma like this and now you can open it at congrats now you have your blog hosted online okay look at this how beautiful is this everything works is expected let's see about you have our transitions you can go to the rsas that works let's see if our team works ah how beautiful is this friends and let me also show you something else you can go to the deployments Here and Now each time when you add a post this is going to trigger versus Cell and it's going to redeploy and bust the old cache so you're going to get a new post and it's going to take you see it didn't even take long like under a minute like this is super impressive and you can even enable some basic analytics here but this really isn't important what I wanted to show though is you go here deployment so if you have any errors from your serverless functions or whatever you can go to the logs here and you can see if something goes wrong here for example here's complaining about the fevico not being present so you can probably add a favorite content icon in your static folder but I honestly don't bother with it and also let me show you something cool so if you go here to your project if you don't like the name versaille gave you can also use a custom domain here if you have that but this is already a great looking URL but you can edit it and if it ends with DOT for sale app you can place anything here that you want you can get a nice unique looking URL basically that's it alright friends I hope you learned a lot and don't forget to like And subscribe you can find my patreon if you want to support me join the Discord and all the links to what I use is in the description including the post so thank you for watching and catch you in the next one peace [Music] thank you [Music]

Channel: Joy of Code

Views: 18,559

Keywords: svelte, sveltekit, markdown, blog

Id: RhScu3uqGd0

Length: 110min 48sec (6648 seconds)

Published: Fri Apr 28 2023