Let’s Learn Eleventy! (with Zach Leatherman) — Learn With Jason

[Music] hello everyone and welcome to another episode of learn with Jason it's the first one in 2020 so welcome back I hope you had great holidays today on the show we have Zack Leatherman Zack how you doing good how are you I'm doing well how was your holiday that was great I completely flooded my bathroom so it's just a great great end to 2019 III think that's that's how you know that's how I always want to go out of the years like with a good mopping story so yeah so for those of us who aren't familiar with your work do you want to give us a little bit of a background on kind of who you are what you do what you're into all that fun stuff sure so I am a friend in the front-end web developer I work for a filament group and we are a consultancy that works with companies to do front-end performance consulting and web development consulting we sort of work with you to make sites that work for everybody so sites that work across a broad range of devices and network experiences very very cool yeah so we've got we've got a couple of first-timers in the chat today people excited for 11d so let's talk a little bit about what eleventy is let me click over to the website so I'll just I'll tell you what 11d is because I as I understood it I'm teaching you eleventy today so it says eleventy is a simpler static site generator so what does that mean like what what's the story behind 11d and and how did it kind of come into existence yes I'm kind of like I was a big fan of Jekyll back in the day and I built like a ton of sites with Jekyll and Jekyll is a great tool that's available you can use to build sites and I kind of wanted something that was similar to Jekyll in node and so that was sort of the impetus for eleven days beginning and so I rewrote my blog using this tool 11d and I've basically been building a bunch of sites using this tool since it started I think it's probably two years ago oh yeah we hit our to our second birthday and November so it's been around for a while it's it's uh it's I want it to be more like a more like a utility than a framework I guess I would say mmm it's right it's very like its main core is that it just it takes templates and outputs HTML so I want that pipeline to be very obvious and very easy to use and I want that sort of to be the core focus of the generator so yeah we kind of have a bunch of different templating languages that's kind of like one of our strengths people really like that the flexibility when it comes to templating languages and I've had a lot of feedback that it's very easy to get started with so hopefully that's true today huh yeah yeah I mean this this QuickStart looks impressive I am always a fan of like hey let's run three lines of three commands and you get a website yeah I can actually do it you technically you can do it in two commands but it isn't quite as nice because you can do an MPX you can just run it directly from npx and I don't know how familiar everyone is with NPM and npx but MPX is a tool that you can just runtime install things and I will use them without sort of installing them locally sorry you can actually yeah let's let's do that so I'm just gonna run through this because it seems fun let's do the let's do the QuickStart so cool I'm going to yarn global add 11 D 11 D and now we get a live test to see if this works with yarn oh I know I didn't even think about that hello who is it sorry can you hear me oh my gosh I'm just - no I can you hear me oh no we broke them we broke the speakers but can yours now the phone took over the headphones okay so this is gonna be 11 D on hardmode while he works out as is Mike again so I am going to just continue following this we're going to do Zack and you hear us into readme MD and then I'm gonna run eleventy alright good now I can hear you now can you hear us I can hear you yeah there's a slight echo but we're back yeah so now we have we did a thing we built we built that alright and so now I can serve it 11b serve yep and that uses a browser sync it's a browser sync instance and then click read me hey it works ah so that's fun I mean that's that's it all right so are we done is that that's it we go home now yeah that's it pack it up and cuddle know that I mean this isn't for cool like that's a that is a really nice on-ramp yeah so basically the the thing that might be different that people aren't really used to when it comes to eleventy are things that might be non-traditional is that we basically look for any markdown file in any directory inside of this folder and we'll output it using the same folder structure so if you had like a deeply nested markdown file for directories deep in there we would still find that and I'll put it with the same folder structure nice oh yeah and the outputs a little bit different in that we use we try to use clean URLs whenever possible so we make a folder for with this sort of file slug and I make an index.html inside of that so you can have clean URLs in the output without having to do any extra work or any web server configuration nice and so if I want to let's see let's let's make up a project like what's a what's a fun project to kind of show how to get into get a little bit deeper into into 11d um yeah so we have oh sorry gun I was I was gonna start spitballing what do you what do you think oh so there's an eleven e-base blog project that we have that you can use as a template okay sort of get started and that sort of gives you like a larger code base to start from than just like making everything manually um so if you go to if you click the just giant logo at the top that will actually take you to the docks okay no it's the easiest one and then on the left there'll be starter projects sort of like the fifth one down from the top all the way that's oh here sorry heading so number yeah number one is eleven debase blog okay I mean you just click through that and if you clone this template project you can get like all this starter stuff okay I'm sort of setup for you automatically so but I think so I think that's awesome one thing that I like to do just because it's how I process stuff is to kind of roll something that's less good but that's completely from scratch to try to get my head around how all the pieces fit cuz I'm seeing stuff in here like yeah there's this looks like a specialty folder there's you know these sorts of things look look fancy pants and I see some set nunchucks nunchucks templates um and so like I don't know if you're up for it but I think it might be kind of fun to think about like can we build sort of a base implementation of this that that maybe doesn't have all features but that shows how all of these pieces work yeah absolutely let's do it all right let's let's do it so if I want to do that where would you want to start yeah so I would say the first thing that you'd want to do is probably make two blog posts okay and though does it matter how I do this sir can I just like make up my structure you can put them up no let's just let's do it however you want to do it and if it and if it works then it's good for 11d yeah there shouldn't be any prescriptions here those two and the reason that I do it like this is because sometimes I want to have like like my images kind of co-located with my posts and let's pull in feel like I had oh this was a fun thing we'll just pull this one and so this was an emotion little sticker they might come out of the party Corgi discord which if you are there you go RT Corgi I'm not familiar with party Corgi but all right we'll do it it's a yeah it's a it's a discord group that a lot of content creators and and live streamers and folks who like watching live streams hang out in it's it's kind of Christmas somebody's project but spend a lot of time there so it's a it's a fun thing to do but so let's start with our first thing I'm gonna give it a title we'll call it post one and then I'm gonna say like what up and then we'll say this one I want a title and we'll say orgy's and then I'm going to use that image and it will see images do the thing JPEG okay so I have two images hey thank you for this description Jer gold alright I've got two posts one is using an image and I think is there anything that I need to do any any specialty stuff yeah let's well let's rerun it again and see what happens I like this alright 11d okay it's no good things got a bang post one it made two those HTML files transformed your markdown but we lost our thing it didn't write the thing that it doesn't do by default is it doesn't copy unrecognized file extensions okay and so anything that's not a template is classified as like an unrecognised file extension so the way that you can add you can tell it to copy additional file extensions that are not recognized as templates is that you can pass that in two formats on the command line so if you go back to the command line and you say Aloni - - formats equals M D comma what is it J jpg I'll try that oh okay so now if I run 11 D serve well you'll still need that formats flowy oh like this is like a live thing it's not just serving the site files got it correct yeah okay so formats was MD and JPEG I mean that might have worked because it's 11 he doesn't blow away your site folder when it builds um but you'll get you'll get out of sync there okay so we've got post Wow post one I think it's gonna be belong slash post one good call there we go we've got our images working we have our blog posts are doing what we want so that's that's pretty awesome and so I notice it didn't choke on my my markdown frontmatter but it also didn't use it and I I mean how could it we didn't tell it how um so I think go here yeah where is it using the front manner so I gave the post title but I didn't tell again we obviously didn't tell it how to use that sure but it didn't like complain or choke or anything so that's awesome so if I want to use this I think yes so you have a guess I'm guessing that we're about to write a template you already have a template I do this is technically already a template so by default coming from Jekyll the default 11 D so 11 he treats all markdown files as liquid and it pre process them with liquid and you can change the global default to be whatever templating language you want but that's just the default that we have set so if you want to use liquid syntax inside of your markdown you can do so so if you do curly curly curly two curly brackets or whatever like this and then title yep that will use your data come on and I'm still serving so is it gonna add or alowed yeah and should whoa okay yeah that is awesome yeah so it does that by default for you um and I think maybe the next step we should or did you have any more questions about that well I mean this yeah so this is this is pretty awesome and you said this is using liquid yeah so you can change it you have to make a configuration file to change the default um templating language that's used here but and we can do that now if you want since we'll probably have to make a configuration file at some point sure yeah I don't know that I have a strong preference about it but let's let's play and we can decide okay so yeah make a new file the default file we look for is dot eleven ejs like this no sorry spill to hell yeah yeah sorry it's very confusing when we switch between words and names with okay so I have a dot eleven tjs yeah so basically what this does is it looks for module exports that has the configuration stuff inside of it so we'll do module dot exports equals yep and then let's see what is a what's the configuration thing I have to look it up to go yeah there's a configuration section on the left there's another one yeah alright yeah right there configuration like that and then scroll down a little bit and there'll be something about global markdown default template engine for markdown files you know right there complete engine so there's an MP so there's the sample config file right there I'm like you gonna copy now go go back oh sorry I'm like off on my own yeah so there's a default ya config file you can just copy and paste there now we're getting that so we'll drop this in here and then we can make it I don't actually know how to write nunchucks so they're very similar which is kind of confusing to some people but it's there's no changes to this since no changes okay see that works I've do I need to stop and restart to pick up the config oh yeah it's a good question and I think there's a different on what platform you're using right now okay so same same thing it still works I'm gonna let me make this a little bit easier to follow here so I've got this [Music] and it looks like it it says it's reloading I don't have browser sync installed do I need to do that no that should be bundled automatically it might not be a hot Roenick oh I know what the problem is this is a yeah this is a very common thing that happens to us and that browser sync requires a body tag so let's yeah let's go through and and work through fixing that problem we have that listed on our like right on the getting started guide but it still trip some people up including me obviously all right so we can let me make this a little bit smaller so what what we should do to fix that is make a layout file that we can reuse across both of these okay templates so what we'll do to do that is we'll make another folder at the root called underscore includes and again this is these folders are you can change the name of them and your configuration file if you don't like this default names I'm just giving you the default names so it's picked up without making any configuration changes and then we'll do just make another template inside of there called layout dot we do liquid or nunchucks whatever you want we could do markdown to but hmm doesn't really work very good for top-level HTML yeah let's let's do let's do listen because that's the default right yeah liquids a little bit easier to and is it it's it was it just called layout layout you can make it whatever you want you pick the file name dot liquid okay like that it shows the Shopify logo yeah and so - I don't think I have syntax highlighting for that but we'll make that work to make a template use a oh yeah yeah put some default H team on there snippet I have somewhere in here I have this um visit Lake how much like a dart a memory no it's not mine I believe that all right I'm already I'm already wrong no you're you're right you just lived out and then HTML yep okay and then you want a body tag body and then we need to drop in some insulin yep and inside of this we just look for a Content okay and so kind of a neat thing about Aloni layouts is that it doesn't matter what format you use for a layout they're sort of templating language independent so if your template uses nunchucks you can use a liquid layout with that or you can mix and match from however you want okay that you're Tom alright so did that work no it isn't applied to the template yet oh right you need to tell the template to use the layout so to do that we'll open up the template No the easiest way to do it is just open up the template file here so indexed MD yeah yeah yep yep and then in your frontmatter just say layout colon layout got liquid and so you just you just know that like if the frontmatter includes the layout you will set that all right yeah and it's set on a per template basis so um and I'll show you how to make this better in a little bit so you so technically you have to add this to both templates post one in post two but it is hot reloading now which is great yeah so yeah so we by adding this body tag we we got the hot reloading working yellow I need to add this to my other template and so that's I mean that's fine but it sounds like you've got a way to make that easier yeah so there's a couple of different ways you can set data in eleventy and we have something called a data cascade and that kind of sort of combines all the data together at runtime and frontmatter sort of like the easiest most straightforward way to do it yeah so if you're using data there's something called data cascade and so we have a bunch of different sources that you can get data from front manner front matter in your layout so you can actually set from veteran layout and that will apply to your templates as well interesting um and then if you go up there's like there's template data files which are files that live alongside of your templates that share the same file name with a different file extension so we have this index MD if you had an index dot 11 T Dana J s that would also be a way you could set data okay now we don't want to do that here because that would only apply to one file but you can actually do that on a directory as well and it will apply to all of the templates inside of a directory so if we go to our blog folder and we make a blog dot we can just do JSON actually that might be the easiest yep and then like layout you know they're good and liquin ok and then I'm gonna make this a little bit more obvious so we'll just add like okay and we'll make this amazing that okay so that's the baseline my minimal accessible yeah I think you want I think yeah I think you want to also go into those blog posts and delete the layout to make sure that it's doing its thing okay so that's gone don't need that and that's gone okay and then Sebastian no you shouldn't have any we need to do that no well it's definitely working which is which is awesome we don't have a main page though so it's not doing anything just yet post to that's what we want and so it's kind of the cool thing that um sorry G on something I had an idea which is and I pull like and I pull the title out of the the front matter in the template like will this work or you run it and find out you may have like just stumbled upon exactly what I was gonna say oh my god this is awesome okay so then that means I can go back into my post and get rid of the title part yeah okay I see yeah so so yeah the data cascade happens independent of rendering and so all the data is coalesced before that just work or is like merged together work together before the templates are rendered so yeah nice yeah that's I mean that's super handy and it definitely does like I can see the appeal of this because I'm just writing like what I want the page to look like I'm defining a document that has some metadata that can fill in my template if necessary and things just work which is like that makes me really happy as a dev because it's like you know I think there are a lot of really powerful solutions out there but there's a little bit of ceremony to get up and started and you know you've got a lot of like boilerplate you've got a lot of stuff and in boiler plates are amazing but they're hard to parse and that's one of the reasons why I like doing this show like from an empty folder is like what are we actually building like how much do we actually need to build to to make this thing work and you know being able to do this in what we've got three three files that aren't content and it works so that's pretty that's pretty powerful stuff yeah and we didn't technically need a config file yet either that's true that's just that's just me playing actually why not let's delete it let's get rid of it or I can make it empty because we're still using it and then I don't know how to test that it's my it's fast enough that I'll just do it let's see any questions in the chat what's up Nikki yeah that was 100% my Windows notification sound I don't know how to turn it off yeah yeah things are let's see does it error if title is not there or gracefully omit that's a good question yes oh that's dependent on templating languages I don't nunchuks and liquid I think both fail or they don't fail they will just ignore missing variables but you fall but that's controlled by the templating languages [Music] this so it looks like it just it didn't fail it just gave us an empty h1 so it looks like it it will still output whatever it's like it's it's not smart enough to know that like this whole line should disappear but I think that's a limitation of templating language is not of like I don't know yes I'll do that that's not necessarily I don't know if I would call that a limitation you can put an if statement there too if you want to omit certain other content if the variable doesn't exist you didn't you didn't know this was gonna happen but now you have to teach me liquid you know how to write a conditional yeah absolutely oh it's curly percent if title percent curly I mean other curly oh yeah that one oh and then like an idea yep there you go and that's the same for a nunchuck same liquid nice okay so that means that we get in our main now we get no empty h1 okay cool that's that's good I'm happy so now all right I'm feeling good I feel like there's probably other things that that we should know so what else do I need to know is a yes so that the next step would probably be to make an index page that lists all of your blog posts okay and the way the way that 11d groups content together is not directory dependent it has nothing to do with the file structure okay we use something called collections and that's all controlled in frontmatter as well so if you go to the eleventy site and look at one of the sidebar options will be collections I believe yet working with templates sorry and then collections yeah okay when I forgot to mention also that your layout can also have an a layout you can chain layouts together Oh interesting so if I wanted to like break it up into like I've got my my site layout that's got the header and stuff but then my blog maybe has like a sidebar like a footer thing or something I can I don't have to like duplicate the global layout I could just have the global layout be used by the blog layout yeah correct that's awesome okay so then if I want to do so tags will do it yeah so if you want to add an item to a collection you basically make a tag for it aren't you at it you add tags here either your front matter your Dana file so we can do that actually on the blog data file that seems that was where I was thinking and then tag was I think it's tags tags and is this going to be an array give me a string or an array I don't work with either so we'll make these a blog so now these are all blogs and then that means I can just write this out so if I create like let's I guess I would yeah we'll call this index dot MD and then I will say welcome to the blog and then I can just write this template out so for post in collections posts just holler if I know you're doing fine the thing to note about liquid and nunchucks is the the little dash that comes after the after him before the percent that controls the whitespace around the tag so if there's a dash that air will actually remove any white space before the tag and if there's a dash at the end or move whitespace between that and the next character interesting okay so if I leave this out I would get like a ul on this line and then this would actually be indented on its own line but by adding these dashes it's gonna be like the UL li li li like all kind of cran together one line yeah it'll be on one line and so the I know the example here doesn't have it but really the nicest way you can do a loop is just it have the dash on the on the start and not the end okay so can I write markdown in here oh yeah you can do that too yeah okay I'm gonna try that you don't need that if that sounds fun so then I can do let's see we'll do blog data title and it's going to link to how would how would I be honest blog Dana wait blog dot what is that URL I think yeah okay and then I'm going to close that with and that looks fine to me the only other thing you're missing here is that you won't have a layout here because this exists outside of your blog folder also it doesn't have a layout set so for now we'll just do it manually um which I guess means that I should move this up to be a title now we're talking okay so now if I go home that is excellent and then I didn't put a title in this so I just need to do that and it should should through the magic of hot loading show up holy buggy lives work it's awesome okay so now could get into my third post damn that was easy well this is awesome like this is this is super powerful I can I can definitely see the appeal of this for Lake I want to get something on the Internet I don't want to have to like jump through a lot of Hoops to do it I would just like the site to be live please and as far as I can tell if I'm reading the output correctly we're not we're not getting like boiler plate with this right like we're whatever we right that's what we get yeah it's in so it's when you make a site with eleventy it's impossible for me to tell if you've made it with 11d based on the output because whatever you put into it it's what comes out like there's no extra stuff that gets added so my vanity is ruined by this project because I can't tell I have no idea who is using it who isn't using it but that's fine because I think that's an it that's an important part of it too it's because um I like the idea of just not having any extra things come out of it yeah and I mean this like this is very this seems like what especially for for building something that like you know you know that you need to control everything that's coming in and out of it you want to know what's going on at every step of the process you know if you're if you're working on something where you need to have really tight grip on the performance and the output like it looks like this this is kind of batteries included to get started but it looks like then is there are there ways that I could tell this to like minify my HTML or or things like that or does that kind of become my that's my job um so we do provide hooks to perform like higher level transforms of the output and those are called transforms you can find those in configuration and basically it lets you modify eight in the HTML that comes out for it gets written to disk um so yeah sorry just configuration at the top and there'll be a section on transforms if you scroll down I'm finding all the nice ways to improve my documentation by watching you stumble through it here cool so all right so I can just register anything as a as a hook which is pretty slick like that's really a and here's the thing I was asking for I want to minify and so I just grabbed an NPM package that does that add in a transform check if it ends with a sure that no HTML nice yeah this is a yes I'm very whoa whoa whoa dude Oh No blitz Jackson the robot has lost the party core view mode that's too bad well I will have to fix that um okay so now what's next what's another thing that we should do like I I feel like um there's so many things that I'm not looking at yet so I feel like there are a bunch of different directions we could go next yeah so there's a lot of different things we can't do next I I would think maybe like a small thing that people should know about is uh the permalink option which which basically lets you sort of decouple where the file outputs to from where it lives where the IMP input file lives so unless you remap basically where the file goes into your output so you can actually change your permalink in your data cascade to be whatever you want Oh sort of remap where it goes into your output folder okay so so that way like if I wanted to take let's say this one and put it in here but I want this to be so that way it'll actually get the layout so I don't need to set it anymore but I want to make sure that it shows at the at the root then I can say permalink and I would make that what just index slash uh maybe just slash I think try that cuz I like that manner I also like that better okay so it moved it I'm surprised that worked I'm going to I'm gonna restart just in case it was like catching something because it it should have a recursive collection now give me just a second to delete this page or the output I'm gonna make it start again so let's do the thing should have created a recursive collection huh it did create a recursive collection or I guess it didn't because it's just linking to itself not necessarily looping right but I'm surprised that work but I'm delighted that it did so I mean there we go on the on the bright side you can do it wrong like I just did if you wanted to be safer you could actually add tags into this template and just let it be like like empty oh if I blow away yeah I think that will blow away they'll hey okay you know that that is one way that we can do it probably there are better ways to solve this problem but that brings us to the next question which is a lot of people in chat are asking for data files we're seeing that come from it looks like everyone's so yeah so yeah I don't even know what that means so let's let's learn yeah so we can actually make we can change where I mean we already technically use data file with our blog dot 11 e Dana JSON okay I'm BJ son's a little bit limited and in that it can't do any like runtime processing it's just like a static file so you can actually change us to be a dot JS file okay and then it add a module X module exports to this X like export the so if you rename this file to be a dot J s and then yet module exports equals that should just work it appears that it just does yes um but you can also do um function you can export a function in here too so you can do like async stuff inside of okay can I make this a sink yep absolutely so you can do any at runtime you can do like remote data fetching you can do whatever you want in here basically um so I want what does it dog CEO let's let's grab a random dog and we will add that at runtime and so I want to let's get result is going to be wait does this have this is using node right so I need to get something you know so crying it is okay you can use node fetcher but note yeah so we're gonna yarn I've had so much practice don't you care [Music] have I need to fix my BS code because it like forgets what commands are I've never used Axios so here we go so oh good I can teach something this is the only one that I know because I get it wrong all the time and have to like look it up so I have basically we're just gonna run a get command to get this this this dog API and then I'm going to I believe we'll get back data message so the image will be result that data message and then we can say dog is image and then I'm gonna go into template no not that one template and say just duplicate this will say if dog then we want to image source dog do I need to quote this um if you don't you won't be quoted in your output so okay I would do it dog and then you said to do it like this to get rid of extra whitespace oh no I like to put it just always at the beginning yeah and not at the end you know I usually works out for me like this I don't leave that one to you okay so we have this theoretically is going to do what we want then you stop the site to install the I sure did oh I forgot we know this is work yes it won't work yet so we're gonna get Axios is going to be required X yes now it should work doing things and so we have a little bit of yeah we're gonna go we've got I mean that's not a corgi but that's fine but now if we go any any page that we go to is gonna grab it a random doggin and is this happening at I guess right now because we're serving it's kind of know it so it only runs you know and only we'll fetch those at Build time nice ok so yeah so it's gonna be the same dog on each page until I stop and restart and then we'll get new dogs right correct and you'll see there's actually we actually have like a little bit of benchmarking in there so you can see like what files are taking up a lot of your build time so you can see this data files taking a lot of time cuz it's making our network requests yeah it's making multiples well that is so yeah all right this is great I could look at dog pictures all day Doug CEO there you go I don't invest ok so so yeah I mean this is like that's super powerful and the fact that we were able to just kind of throw that together that quickly is very very nice is there anything else with data that you want to show off and Jack this is your chance to ask if there are things that you want to see clarified dive in here let's see just reading through the chat to make sure there are so I see someone asked about data files so you can actually sprinkle your data files all throughout your templates like we did here so you can make like Blagh eleventy data jas or json or whatever but we also will support a global data folder as well okay and those will be data files that are available to all templates and that's just underscore data by default at the top level and I can I just call it whatever I want like the file inside the data yeah so the files inside of the underscore data folder actually control the variables that they use in the templates so that and then if I make it sorry goodbye so if I name this that name is what becomes available yeah that's that's what the so let's just go through it I guess it might be easier so if we make like a I don't know just think of a random name maybe like and then you think it's just like whatever I want yeah you can do that chance okay so then I might just move this instead of being in the in this part which I think would make sense I can move it out here instead and then I'm going to do the this is gonna be the same thing so a module that exports async and then we're going to I just like I can just return the image right return image yep alright so now instead of one side of all your templates you'll have this puppers so you named it dog and that would have been triggered over I should have fell down I mean this one is a good popper though okay so that's dope another question people are asking about pagination do you want to do you want to dive into any of this but any any deeper into data before we do pagination I think we hit most of it if you don't see any other questions joining data from two sources that's yes you can you can do that however you want instead of the J's file if you want to do that manually you can record you can make two different network requests and combine them wherever you want and if I so if I have like this data that I am exporting is that available in here or that's only available at the final template like could I access the upper value here like is Arab not currently no um but yeah you can access this and in the template you can return an object in your data file you can return whatever you want in there okay if you have two separate data files how do you access it across sources it seems like the answer to that would be like if I if I needed to do this processing and then I needed to do more processing in here that would end up getting combined into one file right if I needed to have access available is that not correct there uh let me say that again so so if I'm understanding what Dan Dan fasciae is asking in the chat it's if you have the one data file cannot access data from another data file so if that was the case what you'd have to do is like I would almost need to mean like yeah you can right I mean it's just JavaScript here so you can actually require a different data file if you want um you couldn't do that in a JSON file but since it's JavaScript you can actually just like record yeah like what you're doing here requiring the data file in a different directory and using it so this I mean this would work right Dan feel free to ask follow-ups if you want otherwise I think we're gonna move on to pagination and see see what we can do there and lots of good like just JavaScript stuff which is nice but yeah so that I think I mean I'm definitely seeing the the power here because it's I can see the power and I can see the confusion because it's because it's just JavaScript it's kind of the same hurdles that you run into with react where somebody's like well I don't know how to do this with react and it's like we'll just write JavaScript and that's a great answer if you already know JavaScript and and not great answer if you don't so yeah I think a lot of the hiccups that we see from from developers using eleventy as sort of misunderstandings and it like education around what require can do so like require can you can actually it will parse JSON for you if you require a JSON file it's really powerful and what require can do so yeah that's probably an area of documentation improvement that we could do some require primers yeah yeah I mean that's I think that's like the problem with every every platform at least every platform I've ever worked on is like figuring out how much of the rest of the internet you should document to like prep everyone for what like tools get used yeah that was that was a huge project when I was at Gatsby was like alright well what part of the internet are we going to document what part aren't we gonna document and there was a ton of like here's how like CL eyes work here's what graph QL is you know and and all this stuff that was kind of like you need this foundational knowledge if you're going to use gatsby but it's also a huge amount of documentation to maintain but but yeah so i think that is such a rabbit hole we could probably talk about that all day and i would definitely love to dive into this this pagination stuff because i don't even know where I would start sure yeah so um pagination is also I think maybe a contentious point for Dan because we talked about this in the past hi Dan so it can do a couple of different things so what most people think of when they think of pagination is they think like page 1 page 2 page 3 right and you can you can use it to do that so if you have like on your blog index you can make like a bunch of different index files based on how many blogs you have on like blog posts you have one for each page of data that you want okay and it's very good at doing that we could run through how to do that real quick but the other thing that let's maybe do that real quick because well actually go ahead and explain what the other thing is and then I think we should do that as well okay so the other thing that pagination can do that is sort of more confusing to beginners is that it it can iterate over any data to output whatever you want so it's more of like a a way to create multiple output files from a single input file which is I think it confusing abstraction for people but it's also super powerful once you get it so a lot of people use it so to fetch sort of data from a CMS and then you can output a bunch of different templates from your one single CMS data request mm-hm so for example say you're using like WordPress headless and you make a CMS request to get all your blog posts and it come back comes back in a big giant JSON file or whatever I you can iterate over that with pagination and output a bunch of different HTML templates from a single data source gotcha I can see why Dan argued with you over the naming of this I think I might be team Dan on this one yeah and so we have we have on the documentation we have it come like a completely different section that's called create pages from data mm-hmm but basically like has an example what mostly just links to pagination just a sort of like wire let up for people a little bit matter yeah no I mean it's and and the concept is super powerful so I want to do that but first I just noticed something that I think is worth calling out the the dog requests that we made because we put it in poppers it only happens once and what that means is that wherever we go in the site the same request is returned so our our call for a random dog if we wanted it to be random on each page it would need to be in this blog level or we would need to make one for each post because otherwise like this one if I'm understanding correctly this module gets executed once per page in the folder because it's named after the folder whereas the the data this gets executed once per build am i understanding that correctly yeah absolutely you got you nailed that right on the head okay so that's just something to keep in mind if you're if you're kind of abstracting your data out like I was like oh this will do exactly the same thing but it there's a slight shift in the way that it that it worked it caught me off guard so yeah for performance global did is only run once per build down awesome yeah and that's that saying it out loud that makes sense it just like I had one expectation and it was a little different than I expected okay so we're going to you've had pagination yeah pagination is what we're gonna do so what like I guess we could do this a few ways we could we can make like a two posts per page and a pagination setup that would let us use these three posts or I could also make a request to like there's the Rick and Morty API or something that would let us get like a collection of characters and we can quickly build new pages out of that no I think using the blog posts that we have set up is probably the most straightforward thing okay so yeah let's go back into our index file and change that to be a pagination template okay I don't know if you want to move that to the root or if you want to leave it here were you happy with that let's move it out to the root that seems wise but then I need to have my layout yeah all right so okay to make a patch and template you it's again it's configured in your frontmatter I don't know if you want to go to the documentation real quick Jesse and we probably worth this Ziya visually pagination so collections are arrays so yeah we can use this but I think there is a specific example of paginating a collection on this page to you but it's just it's very similar aging a collection okay yeah there we go so I can just put in collection stop posts and then I think ours is blog good call out um so all right so I have pagination and I'm gonna make this data to collections blog the size will set it to two so that we get more than one page and then for an alias I can just set it to logs and then I'm going to change this from the collections to vlogs yep okay and otherwise it's gonna work exactly the same was that a yes you kind of froze on me a little bit yeah sorry yes okay I thought you were like super impressed and surprised and you know I had like rendered you speechless I mean also that okay so it did what I wanted but how do I get to page two yep so the confusing part is that you need to make a link to um your pages so we need to sort of understand how to make links to other items in them in the pagination stuff so let's go back to the documentation to find that as well okay [Music] so navigation links that seems right pagination navigation it's just gonna slowly get longer and longer and tell us a full tongue twister right yeah I I think you're about to hit like a minor hiccup with a mismatch in our documentation because this is I believe written for the next version which you do not have installed locally okay didn't I did some work to sort of make this better you know there's a version 0.10 that's coming out so don't use anything that's zero not ten huh gotcha so I can't use pagination pages yet but soon yeah I was tempted to release it this morning but I thought that might be I don't know a little much I we we live for Yolo releases and live demos laughs you want to launch it right now let's do it oh you serious yes let's a hundred percent let's do this all right here we go I'm gonna go just watch that burden tick over oh my gosh here we go this is not gonna end badly at all the chat is very excited about this well they've been waiting all right I'm gonna make sure I'd know how many extra things in my working directory this is gonna be not exciting for a little while it's okay so well while we're doing that we can we can play a game in the chat so how about this Phil what do you think about doing a net laughs I swag giveaway we've got some t-shirts and stuff right I'm gonna take his silence as a yes so let's yeah let's do it so while we are launching 11d 0.10 i am going to do a giveaway and that requires me to log into stream labs so give me just a second and while I do that yeah we're gonna give away a shirt so just keep your eyes on the chat because it's going to that's what I needed let's see okay all right to factor factor off all right so we're gonna do a giveaway and our giveaway happens over here I have a new giveaway now to give away for something custom it's going to be a t-shirt and we're gonna run this for the next ten minutes so for the next ten minutes you can win a not fly teacher and if you are a sub you will get an extra like a bonus entry so it's now active and you can enter by hitting yeah we can throw in some stickers with that t-shirt fill that's a great idea so yeah you can enter by just typing you just got here by t-shirt I'm gonna make it notify t-shirt and stickers okay so that's saved and it is started so this is this is now running you can now win a nullify stuff Nell if I swag so yeah I hit that hit that raffle to get in how's it going over there Zach almost done if you hear an airplane like an airplane taking off that's my computer running the unit tests if we see it start to like hover in front of you oh yeah oh man this is great I'm so this is exciting this is the first time on the show that we've done a live release very I'm very on board at this so what else is new for at chat tell me how your house your holiday what did what did you do for New Year's but what kind of good stuff do we have what was the best thing you ate over the holiday break Phil yeah I'm totally gonna I'm totally gonna update the local site we'll just we'll pull the latest version of 11d and roll all right it should be published now I so Brian went to sleep at 9:30 i 100% did not make it to midnight we had people over at our house like we have like 15 people in the house and I got to like 11 and I was like yeah no not gonna die just left all the people in the house lemon sauce turkey all the cheese oh my god this is all amazing eco nothing needed to be fixed we just wanted to use a feature in 0.10 so we're just launching it so that we can use it all right the new version is technically technically up but the release notes aren't there yet okay release notes aren't there yet but we can see that well you can you show me one instant I can see what yeah it's on NPM right now yarn global add 11 the latest oh come on I'm so sick of BS code not remembering where my stuff is oh wait no it's 11 the 11 D is that right yep okay I don't know why I just didn't have you install the beta because we have a base know what this is so much more exciting orange sauce turkey oh man I shouldn't have asked about food I'm hungry biscuits and gravy here we go eleventy at 0.10 yeah it's live ya'll we the we did it live so let me know everything did what we wanted can you check the version oh it's right there okay yeah it's output okay cool yeah screw that up ah now this is this is wonderful so okay so now we should be able to use this this pagination which means that I get pagination dot pages yeah so this should be just a very you should be able to copy and paste one of these examples so yeah go um where was it I feel like I was looking right at it and I got lost I think it's been further down further down extra links here H key and okay even though it says don't cover this cone do it anyway so we're going to write for H key in pagination pages and then we will ref pagination H refs [Music] what's what's the loop thing loop dot index zero let me you know let me see here oh yeah something's up with uh there's a loop in here pagination pages will be the keys test data page it's also we're making so basically we're making an index of all of the the pages in our pagination which we don't necessarily need to do for this we just need to make next in previous here so um okay so I was on that part so if I wanted to now now I'm trying to wrap my head around it so what so what I'm understanding is that if we were to do like logs yeah see you want you know sorry delete all of this no just you just get it just stop it okay so yeah here's what you here's what you want okay so yeah so let's do a link tag yes sorry yep or any tref and then inside of the quotes you'll want pen nation yep you're doing alright pagination dot href dot previous we got you know and that will be a link to the previous page and then you might be able to guess what the next page is okay and then I assume I can do like if pagination dot href previous correct I would also assume that this over I think you're missing a curly at the end oh yeah I'm sure I'm okay so let's try that right over here we get our next page now we got a previous page look at that so then I'm gonna change this down and let's make it one post per page and so now something shorted out there but um so yeah so when you change pagination from being a single from being one a chunk of one is like a special case so you don't have to it's not it's no longer in a race so blogs is no longer a thing gosh so okay so so just as the one no yeah I don't work change it to size one okay and then your alias would be blogs since it's just one and then you would just you know delete that delete your for loop you know I don't know if that will actually delete it from the template but because it's none Jack's and you're using an aged remote comment there but oh yeah okay so that's one so we get our next and then this one's got previous and next pages and then this one only has previous so that's doing what we wanted all right so then I'm gonna undo what I just did there and take this back to two now you want to change your alias to blog's all right so I mean this is butyl we've this is clearly the best website I've ever built so yeah what uh what else should we what else should we cover here oh we were gonna do something from from data right oh yeah we can okay so if we want to do that your new data set you could just make Jatin you could make a JSON file over here I'm choosing or you couldn't use something from an API - yes let's do said the rick and morty api is really easy so we can just do a quick call there and that'll give us this one grab any character i think we can just like throw in on right yeah so this will give us info next and then results so i can go in here and we'll say characters j yes and this is gonna be module dot exports and we'll make this an async function we're also going to see those so we'll get result will be Axio stock get okay and so in here we can say that the characters will be result data wish I could make that there's a way to make this easier let me look at the network tab try that again so we get this back response preview there we go so it's gonna be result that data results and that's an array so that actually should be what we return and then in here you want uh I think you have to await something right okay so now each character gonna get an array set as characters and him characters we're gonna get each one will have ID name etc etc so we can maybe just make a a page let's so let's do this let's create a a new set of pages under as like characters / 1/2 whatever um and just show their names does that seem you know let's do it okay so to do that I need something I would just do it like this did you freeze okay here we might my frozen pagination you're back and we want data would be characters size size is gonna be ten and do I need an alias here can I just use characters uh and analyst makes it a lot better otherwise you have to like news like pagination dot items and Swede oh okay so I assume I can't just do that because it would collide mmm that's a good question let's yeah I would probably do some bad things I wouldn't use the same thing there alright so we'll just we'll do a we'll do a short version and then did I need anything else I need to lay out so we'll go lay out is liquid that seems reasonable and then in here I think I can pull a lot of this so we'll just put the the characters here it's basically the same template okay so now this part is gonna be a little bit different it's gonna be the name yeah and it probably won't be dot data either because that was a collection specific all this is just give me like the raw okay data that comes back from the service how would I do what right now you're making right now you're making an index page that will show all of the different character names if you wanted to make a character page for each character that we're fetching then you would use pagination with the size of one now we can do that first if you want to do that yes is that that kind of demos the and then you would change alias to character okay so I want that and then I'm gonna need to do like see it's not gonna set a title so I can set that to character dot name and then we can set the image here so we'll do character dot name and we get back an image which is just image and that seems like it's cuz that's broken okay so I've done that this didn't like you may have saved at some point oh wait yeah that worked so it created our characters we got our first twenty and now if I go back here to was it characters characters I think okay so now we've got our pages going in and I need to override oh wait can I make this like false to make it yeah I think in the M we'll know and false are the same thing but yeah okay so let's see where we're coming up on time here so a couple questions in the in the chat just to make sure does eleventy have a concept of menus or tables of contents or is that kind of like a thing you have to roll your own we have a wanted feel like markdown specific table can you prep markdown parser so you know the markdown IT plugins that are out there that are available we have a separate like 11d navigation plugin they if you screw there's like a plugins yep right there on the left and okay so that one will help you with navigation and then we can just use like whatever markdown we wanted we would just kind of talk so is this built on like remark or what's what's your markdown parsing language processor yes sir T II I don't know why but I'm having a lot of trouble with your data connection right now is that me hmm okay yeah it seems like you're back now so you what what was your your parser markdown IT okay and so if I use common mark got it and so if I'm if I'm going into like make a plugin then theoretically I can just kind of I can read some of the the source here to figure out how they work but I can I can just kind of put whatever I want in too yeah so so 11e plugins are basically um very simply they're just basically a way to make your own configuration file that people can import okay so you basically get anything that's a villian configuration you can you can make a plugin for says it's it's it's just an extension of configuration okay cool so maybe the the last thing that we should do is let's get I want to put a list of these characters I want to make this page like slash characters that shows about yeah maybe I think really quick we should probably make a permalink for these so we don't have weird like integer integers in our URL that would be cool that's pretty easy you can just type right in this one we yeah we might hello hello yeah it's uh it might be honest you hackers you you dirty hackers I don't know that it may be attackers but yeah so I think this also just might be a sign that we are we are a time and we should start tearing down here so it so if I want to well let's let's try it so I wanted add a can i can't just add a permalink can i yep I can yes you can do that you know and how do I set it so you would do slash characters slash like this you can't do that yeah or can I do I get to leave it out no if you want to use variables in there so we do actually do template parsing inside of permalink so you you can use any this is a liquid file I think you can use any liquid syntax inside of here okay so you know how could you stare at your name okay so if I do character dot name the problem is going to be that they have spaces and stuff is there a way to like yeah so just for that you would use we include something by default called a URL slug and that's just a filter that we provide and so you can do a bar wherever that like straight up and down bars and then just a slug I think this is you might want to put quotes around this just for you know safety yellow safety animal safety that's we all need a little animal safety yeah so now there we go so we should be you might want a trailing slash there too and your permalink because otherwise it will be confused about whether or not I should make it a directory or a extension list file problem writing I would cancel this and we're just rerun it okay I think thing oh I know what it is it's because it it created the the folders so let me just delete cuz I think it created those as like straight files and then we tried to write into folders that were actually oh yeah that's it you know here we go okay so that I thought that was gonna be hard and it wasn't so that was pleasant okay so I think I had so next steps like things that that we would want to do next we're out of time so we got to kind of shut it down here but next steps would be like diving into building the the page out of the characters which it looks like we would just be creating another page with a bigger pagination size and creating a list of links for that we could set the permalink slash characters yeah and then I didn't see anything else in the in the chat but let's see who our winner is and Moomin Nicki you are the winner of our net laughs I see shirt and stickers so I will connect with you offline will get you the details and you know what because y'all were troopers today I'm gonna pick a sec winner so let's do this we're gonna get Bowen occu are also a winner so we will we will get both of you hooked up with with some some swag so awesome yeah Zach where should people find you online I'm Zach lead on Twitter szekely comm 11 edad dev is our website almost with an H no thanks okay and we've got 11 d dev which was back here this is so this is super fun this looks like something that's gonna be really really useful for getting things up and running quickly having a lot of flexibility in terms of what we want to do with it chat as always thank you so much for coming in and definitely stay tuned because we've got some fun stuff coming up later this week we have we let's see here's click the button that break my don't break my oh I'm hitting the wrong button this way so yeah later this week we've got Nick the hey-zeus he's gonna come on and teach us how to do stripe subscriptions on websites I'm super excited about this one nick is amazing he's also like a professional Tekken player so I'm gonna have lots of questions for him about that that's gonna be a lot of fun and then we've got Eli Fitch coming on we're gonna do some custom maps and animation then we've got Angie Jones she's gonna teach us about Cypress and visual testing which is two things that I know very little about so I'm really really excited for that one Zak Gordon's gonna come on I gift is gonna come on and teach us about grid 'some so we've got so so much good content coming up and even more that I haven't had a chance to get on the website yet so definitely come out here we added a calendar now so if you want to get where is it it's Jason AF / LW j calendar that will actually put all of the dates into your calendar so you can set reminders and stuff if you want it's automatically updated so that way you don't have to come check the website you'll just no with that being said um Zach any any parting words no I really enjoyed being on the show thanks for having me yeah thanks so much for coming on this was this was really great chat stay tuned we're gonna raid Zach thanks again and we will see you next time see ya you

Channel: Learn With Jason

Views: 18,072

Keywords: twitch, Eleventy, netlify, JAMstack, static sites

Id: j8mJrhhdHWc

Length: 90min 47sec (5447 seconds)

Published: Wed Jan 08 2020