Live Coding our Site in SvelteKit Part 1

all right so i guess to start to start things off we're gonna uh start by creating a repo i feel like that's a good place to start and then make sure that gets all up and running and then maybe start filling out some issues um kevin and michelle if you have any uh thoughts while i'm filling up issues or just anything with the code while we get going chime in um we're already starting out a little strange because i'm using actually this felt kit branch of this felt starter um but i'll explain that in a second so we'll start by using a template um website's already taken we need a new name we'll call it website2 for now i think we're eventually going to port this over to the other repo um why not work in public uh include all branches so that we can pull from cell kit amazing let's go and switch to that branch uh let's say switch to kit update understand and then let's just rename it main all right so now we've got our repo um let's go ahead and clone this [Music] all right we have website two now um let's install things i've just been using pmpm recently as i saw someone said that it's better so that's what we're going with also all right good to know um we've got some stuff in here that we'll probably actually want to change because this starter template comes with a bunch of stuff uh that's kind of already in place and we're not gonna need some of it and this is gonna be a slightly big project so i don't want any random stuff in there so first let's just rename the website uh let's see um that stuff's all good we definitely don't need layer k because we're not doing any parts as far as i know right now i'll probably use it most everything else i'm not sure which d3 version we're going to use because with cell kit there's some issues uh importing stuff so we'll say we'll see how this goes um actually we might not even need d3 at all now that i think about it know what i'll probably end up using at least in like the the build pipe or the data processing pipeline pipeline possibly so we'll leave it um okay let me redo that cool all right so let's just start taking a look at everything that's in here um starting with our app html this is super bare bones just has like the body tag some injecting stuff for the head elements and where all this felt content is going to live we're definitely not going to touch this at all um most of our work will be done in the components let's just say we've got a lot of demo stuff here because again this is for our stories usually so it's a little bit of a different focus so i'm gonna go and actually just like clean everything out and let's just even make sure stuff is up and running start there all right i'm gonna run dev it's a good start actually use firefox nice a little redundant because obviously we already have some uh stuff in there that reminds me so we actually have and if we look at layouts uh or sorry routes layout this is applied to every single um route and so this header component is actually being brought in and so that's something left to think about what we want to kind of be consistent site-wide so the header component right now literally just says logo nothing else happening um you might even want to start fresh with that too so um i might even go ahead and just comment that up for now okay so that's good blank slate um that's else i feel like i should figure out what we want to actually do first um definitely we have a lot of data processing stuff to port over so that might be a good place to start um actually i'm gonna make use of our github issues and start writing stuff down so i don't forget and then we can kind of structure them a little bit uh did we not delete the master wrench oh interesting scared of that so it's not confusing wait um weird all right well i guess we're leaving it for now um all right let's go to issues um some things i know i was just thinking off the top when we're talking about this new site is things that we don't have um currently which is like a better responsive image solution which is a little more uh up to date with best practices so i'll say better or responsive images um some other things uh lazy loading images that's some more stuff that is like now built into browsers so uploading let me just um you're definitely going to have to um port over our legacy footer build um i'll explain that later when we actually get to it um maybe include new analytics data so we used to use google analytics now we have our own uh so we can maybe wrap that in from a data standpoint um what else do we need to do i guess high level we need to bring in copy from google docs we need to bring in data from google sheet that's essentially our mini cms um let's start with those two things because i think those are pretty crucial [Music] all right so somewhere in here yep this file we've already got like all the pricing for this stuff built in because it's something that we do often so um let's actually grab uh i'll do this over here just in case we don't want to show certain things on our google drive okay this is fine to look at so basically we have everything right in this google drive um let's start with our beautiful cms uh which essentially just handles all of our published stories um so we need to grab that and actually i'm not sure where we're going to actually want to do this if we're going to want to pre-process everything or just have some reusable scripts and do it in the components itself um tbd so right now i'll just put we normally do which is in the source data folder um and we'll call this stories.csv while we're at it maybe even let's groom this i know there's some stuff that we for sure don't use um anymore i don't even know what ignore is i think i don't know maybe that is used actually but you don't need that uh i guess that's it everything else might barrel tech is clearly uh now we never ended up using that so i'm gonna delete that as well okay um i think we also use this which we do uh so let's grab this our authors [Music] oh oops that's actually obviously the same one it's just a different gid others um all right so i think that's might be actually it for our data and then for our google docs i know we definitely have a few pieces here um let's see we've got our web page faq page privacy policy page um so let's go ahead and grab all those even though we may want to rethink how we actually structure that maybe does make sense for them to be in separate pages or it does i'm not sure i forgot what that one was that's about thank you all right now let's actually see if we can uh pull this down maybe i'm running gdac sweet in theory that worked so we should now see in our data folder nice so we've got all those things let's actually delete those ones because those are just from testing so now we should see oh that's not ideal that's not what we want uh stories that looks right interesting uh and the other ones look sorry so it's just off page that's not working let's see what happens uh we had a gid let me make sure that was the right value ah it wasn't the right value there's actually two zero in there all right let's see if we got it now okay amazing we're in business um so we've got a bunch of data to play with tbd where we process that but let's go ahead and um what to do next i guess i mean i guess we can start building out the actual routes that we know we're going to have just kind of get a some infrastructure going so um layout right is this one that's applied to everything um and all the contents slotted in here so next is going to be that home page and probably want to rename something so that's app is kind of meaningless now because this is a multi-page app um what other routes are we going to want there's a few ways to do this in cell kit i like the folder method i think you can actually do a standalone page too but um [Music] i don't know actually let's try that about that's felt privacy that's filed cute that's about and i'm just assuming this all still exists we're still planning out what the the design of what that's going to be so tb if those are actual pages still then we're going to want our authors pages and actually let me model what we currently have um so if we go down author okay slash author so we'll want um author as the folder and then inside of that actually we're gonna want um [Music] i don't know what to do we can name this whatever we want it's going to be basically anything in brackets will be dynamic name probably makes more sense so that will be another route wait sorry what does the bracket thing do oh it means you can dynamically render pages so we can have like also hello kevin um we can have like infinite number of pages generated via data so um it will just yeah does that make sense so like instead of us having to pre-hard code the where is it um a page called russell dash goldenberg index we'll just have data which will build um all those pages automatically so it's basically like for like like are you gonna have another component that we'll call the bracketed component and generate it that way or how does that work no so this is where some of the awesomeness of spell comes in basically as long as it's linked somewhere so like in our index thing right here if we have an href that's like um uh whatever slash author slash russell goldenberg it will create a page automatically like it basically crawls all the urls and then it's like oh we need to have this page called russell goldenberg be generated and it'll generate that and i guess you'll see soon or maybe not today but the name component yes exactly okay then it's the name route so in spell kit there's actually a differentiation between routes and components um routes are a little like i mean i'm probably going to butcher the terminology it's like an endpoint right so it's like the actual url endpoint um and so can it be the only thing in that folder name that's felt yeah oh you can have you can have other things i think yeah because this is just like subdirectories in a web page think of it that way okay um so yeah but it's pretty awesome because then basically we just can have this one page and it will build all the author pages um as long as they basically just pull out that url and then we'll do some data stuff that actually figures out how to like what to to render on the page itself but it's pretty awesome just take my word for it it's awesome i believe you um all right so i feel like that's most of it right now i feel like this is also a good point to make sure those things are doing what we think they are so in our about so let's say so in index also maybe uh we also want them to all be pre-rendered so i'm gonna i think you still need to add this uh misspell kit is not 1.0 yet so things are still changing but i'm assuming this isn't um we want everything to pre-render on our site so i'm just going to go ahead and add those all in there um is this one open oh interesting i made that uh folder select that about that okay and then [Music] this is where i think it gets a lot of personal preference i don't like to put anything in the routes itself except and then put all the stuff in actual components as much as possible um i haven't had to build out any more skill sets yet so i might very well change my mind but um so like you can see in in our base one i usually just put like this meta component for all the metadata and then just like this app thing and everything else is handled in app so i might kind of continue that approach so instead of app i'm actually gonna call this home page or home i feel like everyone knows what home means and then in our components we'll rename that um and then let's see let's also let's actually just duplicate i should have just duplicated all these files oh well in here let's do the same thing that's uh and now we actually need an about so let's see how much felt has nothing about that's felt about page that's let's see if stuff is actually working awesome so that's good um now to also just make sure everything is connected hhs so let me be a little kinder and stop flashing things back and forth okay um so now we're in business um what to do next so many things to do um [Music] maybe so we've got our i guess i'll set up the other components just because that's gonna happen so um i can't duplicate on all right so faq actually know what i'm not even going to bother with those yet i'll just make sure we get everything working properly for those first two pages and then maybe also the author page and then we'll worry about parting stuff over um so next is let's see in our index thing so this is where i think we can do some of the loading let me bring up spell kit ducks um okay i think this is all you want um yup this is what i want so what i'm thinking is because again this is the route um we can do all the data processing here which means i'm pretty sure when the page actually loads and is rendered it's not going to have any of that data that we don't need if we clean it up here so let me let me just actually start doing stuff and see what it looks like um so this is just like there [Music] tell me example oh hold on gotta pause for a second [Music] all right so this is just the dummy example but we'll just use it to start to make sure we can get what we think we're getting [Music] let's see so it's returns an article properties and then well obviously we're not doing this so let's let's get rid of all that because that's all based on dummy data um but let's include this just for posterity because that's a thing so since we're not loading the data um synchronously we might be able to just i think we can just import it um so then we can actually just not do anything with that or any waiting and let's just say test and then url doesn't exist so upload i don't know data um all right now let's to actually access the article i think we'd export that article or props i'm pretty sure it's article maybe not um and then let's just go ahead and console.log article see what happens here hey look at that it actually worked so now we know how to pass stuff in from the route um let us try importing our data so maybe up here how we normally would input stories from uh data storage.csa also this works because like i mentioned oh we have a bunch of other stuff already built out it's not just like the skeleton template so i have for example um some spell pre-processing pre-processing um which should also let there and plug-ins and whatnot so like dsv lets us um uh import csv files and we also have one for svg so that's a little convenience feature so in theory we should actually just be able to let's see if we can just do that um now let's see if we actually have access to all the story data we do amazing so what i was thinking is because we don't want to pass all this down that we can really clean it up we can do our pre-processing right here um and we honestly don't need the page frame slug so let's just say um we'll probably end up ultimately having a utility for cleaning this data imagine we're going to grab this from a bunch of other places so we'll probably make this reusable so i'm going to go ahead and create a new js file for cleaning up story data so let's call it um [Music] stories i don't know expert default function stories i imagine we'll end up passing a bunch of some parameters and data and then we will or maybe data and awesome options [Music] yeah then it will return stuff um so that's that function let's import it import press stories utils stay safe and i replace yep utils power storage um so that here actually not even i might we can do it right up here uh actually why is it better to do it all in the load function i'm not sure uh const data equals parse stories expecting stories and we don't have any options right now so we'll start with that it is just vague so all right um theory that should oh interesting it logs everything oh because it's pre-rendering um so that's obviously worked we can just check my browser yep question russell oh heck hi michelle hello i forgot that other people were here okay that's okay no worries um can you go back to the code just so you're saying that everything in in index felt what you're doing there that is before the components load yeah so think of this module component in the route as like server side stuff even though what we're ultimately generating right is static um this will this stuff will run when we like run our build task which we're going to do before we deploy so this will run and do all this stuff and then send over some of the data to the home page but none of that's going to happen on the front end the front end is just going to know that it already has this stories object or sorry the stories variable um and it's not going to actually do any of this stuff at all so does that make sense yeah like this could be done service set like we could absolutely have this like on a node server and this could be done like just like with a normal uh paid like request but there's no we don't have anything dynamic so it makes more sense to just bake everything out statically and then um yeah so that is what is happening here so like we'll be able to see like when we soon one day run the builds that we'll be able to see like that if we like filter the stories here you're not gonna see any you're not gonna see all stories and like the filtering happen on the front end you'll just see what's filtered so yeah basically we can kind of like optimize every single page so it's like no bloat and it's just using the data it needs so that's like i'm hoping a nice side effect of all this or redoing it as well at least does that make sense yeah amazing so let's actually test that out um so let's say parse stories all we wanted to do is um return the let's say turn data dot map d d url so now um when it loads this should just have yeah so now it is just instead of a bunch of objects it's literally just a bunch of um strings which are your the urls of the stories um so the first thing we can well maybe not obviously do here but um uh let's see uh clean we have to convert a bunch of stuff data.map because it's all csv so it's all strings um so i'm pretty sure i have a version of this in our old uh in our old website build so i'm gonna see if i can find that and plug in some of that i do amazing um oh we're going to use this an opportunity to update some stuff not sure i love the array if i name um okay so right now we're just going to clone the object date is a new thing oh because i did some i see some d3 time pricing uh so let's create uh let's see a whatever you can put in here d3 dot uh time price and so there will actually be format date let's be better format date uh this also means we did i bring in d3 which is now going to be a very interesting exercise uh input star sd3 i don't even know i might go down a rabbit hole now with that or i might have to use say uh format date.date views that's not something that exists anymore so we're gonna have to redo that same with time on page because we're not using analytics image that's a lot of stuff um looks like we're creating us i mean i'm really curious what's happening there let's actually pause and inspect maybe uh our um stories oh i see i was just replacing the slashes that's okay um well let's go back to because we know i might want to try d3 so let's actually just right now return the data see if importing d3 works or it totally hates us it does hate us so no uh i wonder if we just do it d3 oh okay i think that's happier okay that worked for now i don't know if that's gonna work when we do the the ssr but we'll see so maybe this is a good stopping point because i don't want to do go too far ahead um without making sure that's working um so let's get rid of that console log because that's annoying and maybe yes i know we don't need that actually let's keep that and then let's pass stories and as a prop to a home now let's go to home and export let stories um and then let's just simply do stories of zero dot and first let's see if that that's what i thought um ah let us [Music] so basically i know you know this michelle uh there are lots of issues still with bundling uh external modules invites and ssr when it comes to solid gear that's one of the big outstanding issues as far as i know in terms of it getting to 1.0 so i think that's part of the problem here i'm assuming if we get rid of this it's going to be happy it is so we'll either have to come up with our and also i don't even know where d3 is all right for the time being we're gonna ignore the date pricing uh because everything otherwise we can get around it or same with this time i don't even know what time is um but you can see this is showing the title of the first story so all the data passing around and parameters is making its way to uh this home component and rendering the first one if we plugged in something more like our 100th thing in the list there we go um or if we wanted to just you know move through each story's stories as head you can get a nice little list of every story and there we go all the pudding stories titles um all right let's keep cleaning data i feel like that's important um ignoring d3 for the time being i'm going to put that as an issue so we can stay on top of it which is uh how to include d3 uh all right but a bunch of this other stuff is really straightforward so um so let's see date ignore that for now it'll stay as a string image right we saw it's just replacing the slash defense score uh time we're also ignoring that for now i'm not even sure why we have two things there uh author now we need this array of five thing i know what this is doing um because in our data if we look at author there comma delimited so i had a function aptly named arrayify that did this and let's go ahead and it's a one-liner so just tighten it up and i want to change the name there uh say um [Music] string to hooray is that better i don't know that's a yeah that's exactly what i was thinking yeah okay yeah i mean yeah i like that i mean technically it's comma separated string two array but yeah i think that's it this is a little better than a ray of high um so authors topics charts and keywords those are all things that can have multiple values in our google spreadsheet so we just split the by the comma and then trim the white space and there we have it um so now let's i'm going to log out the i guess we can log in here or console.table stories and you can see our hopefully oh my gosh i've never done that oh yeah i love console of the table the nice thing is you can sort and stuff too oh wait you can't store it in firefox oh much better on chrome so in chrome why are you not happy in chrome that's interesting oh it's just not happy anywhere that's fair [Music] i don't um what i changed what did i change um i know we did we never returned the data turn clean fantastic um okay so in chrome yeah you can just i guess they're not very sortable but you know there we go they're sortable and that's just a lot of columns so maybe we don't need all those columns um maybe that's actually something one of the options maybe we actually pass in exactly which columns we want to keep uh column actually how do i want to do this maybe i'll just make this whole thing an object data columns and then back in excel data columns maybe keys or props or columns i'll say with columns don't know michelle i say you know i get hung up on naming sorry this is for oh keys or columns you're saying yeah like which of the or you know which of because there's we don't need all of these so i'm just saying like which ones do we actually want to bring keys i feel like they're only columns when you're like thinking of them as a table which big true they're not necessarily so yeah but that was fun i'd pick keys all right so we're going to go with we don't need that don't need that topic pic don't need that for now footer definitely don't need that author um i guess we'll keep that go to that last checked uh don't need that where did you even come from okay so those are all the properties that we want uh sorry those are the keys that we want properties might be better it's longer let's say uh so comma oops come on multicursor there we uh almost yes okay so that's everything we want um and then backing up our stories keys so it's actually uh we're gonna have like a little loop with them up here so instead of returning everything we're just gonna loop over keys um so let's see and we're gonna actually we're gonna filter no i don't know a few ways we could do this let's loop over the keys i suppose uh key and we're going to return can we do like the uh i always like to use this when i can what is it does that work is that a thing i think it's just the regular bracket like you want it to be dynamic yeah that oh oh yes that's right yeah it's a variable it's not the word the key isn't key it's the variable key yeah exactly yes oh and i just missed the parenthesis ah yes i love this um okay so that what is that gonna do that's gonna create a bunch of objects with those proper names is that what i want i don't know um it certainly looks cool but it's going to create an array with individual i don't think that's what i want i think that might be right it's going to make an array for each of your keys that has the key to the value but i want to flatten them all into one object ultimately ah so i mean i feel like this is a oh this this could be a map red a reduced situation let's see okay yeah this is a mapreduce situation so we're going to have an array so basically this yeah this is going to look like right it's going to look like uh uh author right okay so that's what that's gonna look like or sorry it's gonna be like this no no that's right it's going to look like that and then if we reduce uh previous current and all we say is current of i'm sorry sorry sorry we're going to return or previous uh uh say so we're gonna start it's just an empty object and we're gonna say previous of oh no this is this is over complicating things okay all right all right all right we're just gonna simplify i'm sure there's a clever way to do this but we don't need to be clever um so instead of i'm gonna miss that but oh well um so it'll just be key and then we'll just set output of key equals d okay uh i guess that's simpler okay um now we have to do the cleaning phase but we're not cleaning we're only cleaning i wonder if i should do all the cleaning stuff first and then pick it because we're not going to know what to clean let's see i don't know i mean this is not happening this is only happening at build time so it's not like it has to be super efficient um [Music] all right so let's keep consequent equals russell i'm gonna head out but good luck all right thank you thank you i'll probably rap soon bye bye uh so data.map it's basically what we had before um okay and then that's our clean data and then results is data.map all right sorry clean.map just gonna do a little short hands here turn oh and return result okay so basically we clean everything even if we're not going to use it and then we're going to basically just filter down to the uh the properties that we want to tighten it up now we should have i thought we were gonna have fewer oh yeah okay now look there here we go we have just the properties we want and it also you can see now we've got our cleaned up stuff in there as well so that did exactly what we were hoping for uh interestingly though we don't have image that's why i say uh because that's a created one um and [Music] image which oh no i did credits there so perfect um oh and there we should put the full url and just so we have it too url hbs cool slash yep uh d dots i guess there's two years that i guess it'll be um uh absolute path okay so we'll just call this path and then maybe image it's actually more like the image slug i'm just going to call this slug actually i feel like that's better and then image will actually do this kind of same thing next log dot url okay yeah just so it's all kind of buttoned up and we don't have to do any of that face bear prefix and suffixing and whatnot that's okay um uh actually that isn't i know what i don't want to do it this way uh because i know we're gonna have responsive images so we'll just do that for now okay oh okay let's get this console logging out of here and all right well let us stop there and next time we'll maybe start making this look like a web page i don't know we'll see

Channel: The Pudding

Views: 1,301

Rating: 5 out of 5

Keywords:

Id: 7y6MIXZumd8

Length: 54min 59sec (3299 seconds)

Published: Tue Sep 07 2021