Gitpod Tech Talk - Add a RSS feed for a SvelteKit app

okay live zero zero three zero zero five okay i think this is counting good hello everybody um oh hey why do i hear myself what do you do you hear me twice actually no i just hear you as expected although this is super weird so okay bury me i'm i hear myself when i talk like a couple seconds if you ever use browser tab or something close all that stuff here oh yeah you might be right i closed about 16 tabs and 7 okay very much oh way better so okay cool what are we going to do today we are going to build an rss feed for a swelt kit block um that's the plan right yeah let's jump there i will show um share i'll share my screen window there we go okay that should be visible good all right let's go so um somebody on twitter requested that we add an rss feed for git put at ios blog and i think that's a brilliant idea because rss feeds are cool and helpful so let's the way we do this is we have the git port browser extension installed so we get the green button here if you don't have that button when you watch this stream um basically search online for gitpod browser extension and click that link and then here you can install it for chromium or firefox and you're good to go so that'll give you that button here alternatively you could just prefix the url with git pod git pod.i or slash hash and hit enter that would be the same thing i prefer the button because it opens a new tab for me so i'll do that it spins up a developer environment in the cloud we're working with gold weasel today nice there we go we have vs code terminal preview everything everything you possibly want in life is right here so while this is starting up we're not going to need this we don't need any recommendations from you but one thing i want to do is let me open the preview in a separate tab and then go to the blog still starting up so let's give that a second so what we want to do is basically create a url here slash rss.xml and expose an rss feed at this url at the moment it gets to 404 because we haven't built that yet but we want to change this now the good news here is that we already have a changelog slash rss.xml where it generates the rss feed you can see rss version 2 with all the change log information so we can leverage that code and kind of reapply it for the blog as well so let's go back um and change this to blog nothing for now so let's get started the way this works in this world kit app is that under source routes we have the block and we have all our blog posts in here including an index file so in order to do an rss.xml file like or or path like we have defined here as our end goal we can copy that and basically create a new file called guess what rss.xml and we give that the typescript extension ts so that we can write our code in here very easy now the other thing uh just give me one second let me open something here um hold on bear with me do we have any viewers yet julian i don't know to be honest okay good me neither i think we can we can reuse quiet uh yeah like like from the request yesterday quite a huge amount of logic from hooks.yes um especially with the uh locals i didn't know about this the way i i yeah tried to fix it was much too complicated at least it worked but i was a bit shocked when i saw you just so many things i did you know the the only reason i knew about that is because um i've i've keep i've kept reading the changelog for swell kit just to make sure that i have a rough idea of what i need to do when it comes to upgrading and i did notice that they changed some stuff in the hooks file they removed some functions and whatnot so i i knew it's there i just didn't have you know i didn't think of it but it's all good quite proud to get it working and then i threw it all away sorry for that i i realized this morning when i when i woke up yeah way too complicated to be honest okay so what what you did in the pr you had basically um an rss.xml file uh for the changelog right and then in here you would load the content and parse it and all that except now there's a huge benefit to that and you only do that work when somebody loads the rss feed what we're doing with the hook is a little bit different right because we're doing that for every request so it may not be it may not be ideal uh what what we do here you know what i mean even if somebody goes to the home page we cannot generate that but it's i think it's neglectable in terms of effort and i feel it's following the same pattern so let's anyway let's get going so we have uh an rss xml ts file that's located under um roots block now when we go back here and reload that we still don't get anything because we don't have any returns so basically what this is here if we do a dot ts file in a root that's called a swell kit endpoint and when you have a swell kit endpoint you can expose or export methods that map to http verbs so get post put and i think it's del because delete is a keyword in javascript so what we want to do is we want to expose or export let's say export a get function that is eventually going to get called so for now let's just do export get equals what am i doing get equals what am i typing here get uh async yes it'll be probably async we have to do some stuff there and then um hang on i i completely what am i doing here so there we go um so that that's a get end point that swell kit is automatically going to to expose now if we have a quick look at the docks for swell kit and we go to the endpoints section you see that there's a get example and what we have to return from this from this function is a status a header and a body these are optional attributes so let's just try this before we go any further so we want to return an object that has a status that is of 200 and a body of this will be an rss feed hello to my favorite skateboarders yeah thank you pauline thank you okay we have now a get endpoint that returns a status 200 and a body now let's see what happens when we reload this page that's pretty good progress already we now see that body and we're basically you know halfway there more or less now that's a good start but what we have to return is a proper rss feed and you know when i did that the first time around rss feed example the power of the internet and that may or may not work let's see see wikipedia if that helps us do you actually consume rss feeds in a reader yeah i got i got feedly um as an app so i subscribed to company blogs um i t blocks all kind of stuff yeah i'm that old well okay do you consume water test to be honest i'm not yeah you're not that old there you go i i had a play with it but i i never got yeah used to it yeah it uh the thing is i don't know if it's still a common thing to do but the idea to get only the information i care about and you know curate that the way i want it it's just super appealing to me compared to like twitter or any other social media where you get everything thrown at you and i mean you can filter too but it just feels more painful okay so this this looks like a pretty good start let's take this just so that we can test and instead of body here let's create a variable called rss feed something along those lines that should do and actually it's called it's not a feed it's just a document right and up here let's define it rss document equals let's use this for now okay eventually we lose prettier so now we have what wikipedia tells us to be a valid rssc and we return that so let's go back and refresh two errors haha okay why are you doing this to me oh okay we we have um the reason this is happening so the reason we're getting this error is because we didn't actually specify what content type we want to return we have to tell the browser that we are returning an rss xml so in order to do that we can specify um headers here in in the return so let's do headers do you know which header we need or should i uh i do yeah i know applications type application slash rss plus xml so this is this basically tells the browser that hey that endpoint that you're calling here is going to give you an rss feed so if we refresh now then we we now see the xml so it's like okay here here's your xml good so before we go any further as we start making changes i want to do two things or ideally i would do two things one is i would write a test that validates that this comes back now we don't have a testing framework in place at the moment so the very least we can do is find an rss validator and just use the official w3c and then we can use our url because we're using gitpod we have a publicly available develop url we can copy that and go over here and paste it which is going to fail i'll show you in a second why 401 unauthorized that's because our port 3000 is private you just tick the lock that's it check this out now it's public and if we go back we check that again we have a valid oh no sorry what the wikipedia is not is not right i'm going to know the start of entity okay um fair enough it doesn't like that xml part so we shall say goodbye to it try it again congratulations this is a valid rss feed so now we know that the framework we put in place is is valid and the next thing we want to do is kind of replace individual pieces in here with actual you know content i guess from our blog the first thing we'll see is that item i know that this is a repeatable element so this is something where for each blog post we will want to have one item in in in here but more more importantly i think we have easier wins here so for example the title we can just literally rename that to git pod blog description in fact let's let's do something let's look at the index file for the block and see what we use so let's use the same description so that we're consistent across that description and then the link to to that is um git pod dot io slash blog slash xml as well as https hang on link is linked going to oh that's not the feed itself that's just a blog okay there we go copyright do we want to do that i think we do um yeah i think it's in the changelog feed it's set we said it okay cool um now here julian just remember next year to come and update that on january 1st to may now i'm just kidding we're not going to do that um we'll use new date and we'll save you the time uh get a full year so that'll just create that dynamically we don't have to worry about it nice what else do we need last build date okay so this is interesting because i think that's used by rss feeder readers to um kind of show you newer content only and things like that so we probably need to validate the date of the the unused blog post yeah i think so right we don't want to just use the current date i think it's it's the date when the latest blog was published does this make sense but for that you have to bring in to bring in the um block data agreed yes uh one thing i'm saying for this one i guess pop when it last published yeah it's probably the same as the last build ttl time to live what do we want to do here let's leave it okay you're right so we need to get some data here this starts to get interesting by the way i just realized that we have another dinosaur open up the cloud in the chat saying that he also uses or she also uses irs as with feedly i feel i feel good i feel very good now so you're the outlier um okay good so okay we have we need to load these um we need to load these markdown files all of them we need to sort them by date descending so that we have the most recent blog post at the top and then we have to feed them or pass them into that get endpoint somehow so that we can loop over that to create the items but also to read the dates and stuff now good news is that swelt kit provides a file called hooks hooks in the source directory this is completely unrelated to react hooks if you're familiar with that same name nothing to do with each other completely different concept so one thing i want to show you here is that we have a handle function at the at the bottom here and we're using a helper function called sequence that's provided by the swell kit library that just allows us to combine different different handler funkers functions and one thing we we have already is a handle blog posts and the reason we have that here is because if we go to blog you can see that this is the overview where we render a preview of each blog post and this is in fact exactly what we want to do for the rss feed right we want to get each one create that item element and um we're good to go hey jimmy no problem there's a really big question in the room at the moment whether people use rss readers or not so if if you use an rss reader could you please let us know um we need we need to make some points here and figure out what we do okay so while we wait for that we have the function already to parse all these files so we have a handle handle blocks here and one thing you notice is that we use a feature from from wheat which which swell kit supports where we can do a glob on any path and we can even use uh wildcards so we're reading all the markdown files in that directory we map over it we do a bunch of stuff um we um oh we're missing something here okay so anyway let me explain in a sec so at the moment what we do is we just read the metadata so if we look at the blog post it doesn't matter which one you can see up here the front matter code now this is actually all we need in order to render the content here but for the rss feed we also need to load the content of the blog post itself right we don't need that here so there's no need to parse it but we do need it for the rss feed so we need all of this markdown content down here now the way to do that luckily we have that over here already for the changelog entries so i'm just going to use that same same code so we get the metadata we get the file name and we get the content and now we don't have content because we have to fetch it here okay there we go um nice thing is i don't need to worry about formatting that code it will do that automatically once we do a git commit that'll happen by itself good um yeah so now here's one more thing you notice uh with the posts that that we you know parse here and render we then sort them by the date and then you notice here request dot locals dot posts so in the requests requested locals we have the posts available to to read so this is where we work on that yesterday julian where we can now go fetch them we go back let me show you um in the rss feed so let me show the docs quickly end points so one thing you notice is that the request object that we interface it contains a locals object here populated by hooks so we can go here and read locals and what we can do next is blog posts equals locals dot posts you need to put in yes thank you um we may not actually even need that we're not going to do anything specifically with it but it's fine so now what we can do is we know that they're sorted by date already so we can let uh let me change this i'm going to draw no need to assign it to a variable if we don't need to anything with it um so last build date we can now use a bit of javascript here and um so basically new date and then from that we want to get to utc string and the date we want to use is from those local locals posts and now we know that the first element is the most recent one and then the date refers to this object here for the state object isn't there isn't there a type we could add to get the intellisense working potentially um let me try so one thing we can do is i don't know if it's gonna know about oh actually we may have a post yeah you're right hang on we should be able to import that type where's that type types do we have a blog oh genius that's why you're on the call make everybody's life easier i love it thank you and i think it's a named export that we have oh beautiful yeah then local start posts is an array of hosts yes so i think yeah then we have to hang on we have to i guess set it to okay let's do this then const blog posts locals dot posts um what how does it work like this i think we'll find out so now if we go here to we drop this we use block posts let's see beauty of typescript so a date and that should do now let's just have a quick look um let's make sure we're actually it's doing what it's supposed to do if you refresh that uh yeah yeah yeah yeah all right um cannot read properties of undefined reading page oh oh i think i know where the problem is i think in where you assigned i think it's correct i think it's not an error let me see it's happening in app store probably in the hook probably messed up something here let me see does it have to do something with line 15 or 30 where the red underlines is i think that's an issue i faced yesterday as well which is related to the ts config but i'm not sure if this has any side effects yeah it it it's just intelligent intellisense complaining um we could would you change the es 2020 i think yes the um module property in the compiler options yeah i think that's okay it's still it's still around their code but it's something let me just check let me see what we did here so one one difference is that i know here promise all all right and then we fetch the thing we map over it we get the path and the mod okay maybe to make this easier let's rename anyway default content so it's talking about render did i see a render somewhere here no page okay reading page what is going on you do file now that's okay metadata filename content let's see uh let me what is going on here we aren't using any stores i think that's as well stored i think internally yeah maybe yeah but yeah not intended in this scenario i think we are using straws but not for rss currently okay so it's probably yeah under the hood something oh oh that open graph yeah two lines above yeah okay hang on why okay what's going on what so did that line here i think that because the interface changed the interface of the function changed one sec open graph 13 is that actually mapping nope but yes yeah there's a store imported this is so cool why would this i think it's that it's that render thing here because that's the only thing we added let me remove that for a second yeah yeah interesting why is that but it still works it's probably just when displaying the content it it won't work um say again i think for now it works but when when adding the items with the html content i think it won't work without a render function there oh yeah you're right because the render should for now it should be fine but yeah and yeah just fine until we add the actual content the items yeah the problem is like we're going to run this edition in like literally a minute um yeah but this worked you're right but why okay let's see that again so content yeah i think i've seen that before like but why would it why would it not work for blocks and it works for [Music] is change log calling the open graph component good cat let's check change log it does okay let me just quickly check the chat um 720 yeah why is it 720 um i'm not sure um let me just see if i can shoot oh that's my screen i guess i wonder how i changed some zoom oh okay okay hang on how do i change the oh yeah hang on hang on one sec let me figure out let me stop sharing and yeah i'm not sure let me let me just zoom in for now i'm not sure what to change in the tool so i'm gonna zoom in let me know if that's better better nice the object that the data prop which gets passed into the open graph component in line 32 i think that's that's not typed or something that's just an object i think yeah it's it's an open graph yeah i think so why one sec what what do we have what's the file name where it oops um post content layout all right let's have a look at that post content layout so here where is the open graph there we go um okay so that's pretty much the same can i read properties of undefined reading page in length 73 in which one oh yeah that doesn't match yeah yeah that the style sheet that's not it um the third line block content layout.swelt let me have a look in on the main branch yeah that's why that's why we do this unscripted i should have probably tested that first a little more and then i can do that components yeah i'm pretty sure it's but what's different why does it work actually let me double check um maybe it's from from post content layout isn't it uh yes this is yes um could you go to the file um source components block block content layout dot smelt that's the layer block yeah and there um the rest props because in the in the error message i'm the third line from the bottom this block content layout that's spelled line 60 16 [Music] nice cat and this would also explain the difference between the block content and the change logs because yeah i think the change logs won't call the block content layout.swelt to play it for the md specs that's right you are absolutely correct yes huh could you lock the rest of probably andy uh you know what may have okay hang on i have an idea i think that the problem is that we are not using okay i'm not sure let's look this console well that's a lot of color sounds better all right the content is missing still i think you you it's it's uh still removed isn't it uh what is removed sorry the uh the content we added the content with the render function which failed yeah shouldn't shouldn't it be in the um [Music] in the logs then if everything worked correctly should there be a prop content then um [Music] no i think the what what happens i think yeah i think it's not returned with the spread operator is it don't think so yeah the the problem is rest props um only contains the [Music] front matter of the blog post okay yeah okay and but hang on so but for these objects i think nothing should change i agree i agree here's what's interesting it gets to this all all through back to 2018 and then it blows up and then it does it again but only you know what i think i think somebody's missing something oh that would be painful some so blog post is not not fulfilling the interface i wonder if that but why why would it okay i'm not gonna question why but yeah maybe that's what i'm life is more fun yeah definitely more fun if by the way if anybody on the stream has any clue as to what's going on then please let us know okay let's do this i want to try if this really is the case to get rid of this get rid of this get rid of this what do we get ascending but what will happen if you comment out this if you comment out all the uh html stuff oh yeah oh i forgot one oh yeah yeah this one i'm saying let me try this i just want to get rid of the the rest prop c if they're causing by the way no it's something else look at this a day with git pod it has no okay hang on let's look at that maybe that's just because it's the first one um oh yeah that might be that okay what is it doing now cannot read property definitely find reading split post content layout handle blog posts but now it's from the third line from from the bottom is hooks.yes yeah in inside of that okay let's see it's gonna end up yeah sorry what's that content render oh do you think so brian made a point about does it handle null fields in front matter yeah you think about a subtitle yeah what would happen if you type null i think in in some of the other files or just an empty string or whatever oh yeah oh my god now it's bitbucket so that's the next okay yeah then that's probably the catch okay but then can we do can we do empty string whoa whoa whoa slow down there we go okay we we shall we shall do that one sec um search for subtitle does this work so how do you search for subtitle and nothing behind maybe if we use regex and we say what's the end is it dollar sign for for the end yes yes there we go now go ahead yeah that's probably how i it looks about right i think it's definitely worth a try works for me um place all 20 replace methods i'll do you my okay one more time no maybe that didn't work but you have 24 changed files how do you do this in regards yes sorry what i have one you have 24 changed files so it definitely changed something yeah it did add the empty string but now we're back to let's refresh you know maybe i wonder now we're back at the uh at good part first one right here yeah i think that's the first one better fader where it fails now this there could definitely be an issue where some of these fraud matters are not they don't exist is subtitle used in any of the markdown files so is it empty in every single so could just delete it if it's not used yeah that's a good question definitely happy to delete it if it's not used um it's something that you know the previous blog yeah it's definitely used but let's see that's just in in some files it's used i think are you sure yeah that's just the type um it doesn't mean i don't see it used anywhere other than markdown files yeah just just in markdown files yes but i think it's used in in some cases oh you mean it's defined okay yeah but that's fine i don't care that if it's not if it's not used anywhere in the code then [Music] we'll we'll drop it the question is is it gonna solve the problem um and just removing it from the um type yeah let's try one thing first let's remove it here so now let's say but what happens if we go through everything is it going to keep saying that okay if i do this i'm going to get an empty line there and the thing with null instead of the empty string didn't work right we can try easier easier than the other one i'm trying to do yeah back yeah no difference all right let's let's try this um yep that's not it that's not it okay what is going on something else wrong it's probably really obvious once we figure it out so it probably doesn't make any difference if we are not using the rss xml.ts file because nothing is done with subtitle currently it's just yeah displayed with uh md specs but not just anywhere yeah okay so so that's probably a bug which which yeah might be there for quite a while and no one ever noticed because it's not used anywhere right agreed definitely um it's it's i i think i think so here's one thing let me share the the fact that this file shows up post content layout this is really this is defined in the uh as the md swags layout yeah so i wonder i wonder i don't think md sweats okay i wonder i wonder if mdsu x is actually used when we do it like this with the content.render.html uh wait maybe what we could try hold on a sec what if delete subtitle content dot what if we print this thing do we get anything i'm going to add another one where did i have the other console unlock did i have another one i have not one right here i think where you look yeah the rest types where was it here i commented it out okay so let's have a look curious yeah we don't even get there render render let me have a look do you need to call renderdutcher.html too many sorry what rendered.html you just called dot renderbed yeah what did you see well but what's undefined it was undefined it wasn't here yeah i i would i would see um i think html and yes so hang on we didn't actually figure out what it is right it's just the fact that something with the blog posts oh yeah it's called the md swag stuff that that we use although hang on the fact that we actually see this file means that nvx is being used otherwise this wouldn't even come up because if we just parse the markdown files then it wouldn't know about that let me show you swelt config see here so for block we have the md sweats configuration where we say that use this layout for blocks and post content layout post that's called from inside the blog open graph and the open graph is called inside post block dots yeah yeah okay but to be honest i i get why it fails yeah same same same here let's have a look do we do split it does complain about split right man i really want to get to the bottom of this now um do we have another split in here not explicit it's always the same pattern a bunch of them work and then we get the error and then a few more work so do you think one of the blog posts doesn't have it all but then we would see undefined we is men hold on let's try one more thing um let's do slug okay are they alphabetically sorted looks like it um yeah workshops as code that might be the last one we have oh there's okay what's below the um error message there there are it's that's something else it did not actually alphabetically sold maybe are they right are they doubled in the list i don't think so i think there wasn't one with uh which is called open source this one yeah that's not in there in the um list above the error i think it's below yeah that's right that's right hold on let's do something man this is really uh painful right now and then let's be more so how many do we have 55 and [Music] block yeah so they're all there interesting do you think we have to to double check every markdown file that the front matter is correct i don't want to [Laughter] that should be the last option yeah i was hoping nobody's gonna suggest that i i wonder it's it's so odd like it's so odd this might also be a complete red herring might not even be related to hang on let me try okay how come we have not done that earlier it is it is it is better software but i don't want to just that's unfortunate that's unfortunate i like i like the way you see things actually it's like overflow github has any issues about it whoa yeah i honestly have no clue um the the only difference is that this does use md swags whereas the change lock is just pure pure markdown um i think the difference is that change locks aren't using a marked uh mdsflex template or layout file correct exactly that's probably the only difference well you're right it does use mp6 whatever talking about but it doesn't use it doesn't use oh yeah there's this layout that's right only block dogs and guys yeah what would happen if you comment out the line 57 the block so it doesn't use yeah so it might look a bit ugly but okay no effect on this oh hang on but no no no wait but now that the the somewhere else let me restart because i changed the uh small configuration i think that does need a um like the pre-process changes probably needs a server restart let's have a look i think there's nothing wrong with the return function what are you talking about um in the rss oh wait why is it i think hold on hold on why is it i think the route should be fine in every case it's just for a hunt isn't valid i think i'm an idiot remember when i reverted my changes so yeah then probably and this vex tries to do something but nothing's there yeah we don't even have that file right now oh oops nobody caught that that's why i do a live stream so that people can tell me what i do wrong all right oops hang on there's one oh no wait it's there what you need to add the dot ts at the end if you want to keep this okay okay but now the the content dot render function is commented out or is it uh no no yeah then it's fine okay so now the real question is whether christine who is responsible for our marketing if she's gonna notice something off on this page yeah she might she might that's not probably you're probably gonna see that huh yeah so we're gonna we gotta figure it out but okay so that's a nice catch there so at least we know what we suspected for the entire time something related to the layout okay something related to the layout and also related to the post content layout particularly according to according to this right yeah okay yeah then it's definitely something with the layout actually even hang on it's even open graph post content and open graph what what do we pass into the open graph here title type image what's no robots oh this is something open graph specific there's not um yeah they're over here i think right now where did i print them here yeah 38. all right one more time all right it doesn't get there so it doesn't can you go back to the post content layout file please the open graph gets called with writers right down here nope it isn't where's the the writers um from the dot split function where where are they used they here where we actually tried to create their twitter handle oh i'm confused that it that it's telling us oh wait a minute wait a minute wait a minute that store is not available when uh that's so i think app stores is not available when you're in an endpoint instead of is that possible you know what i mean yeah yeah uh but that that would mean that md svex tries to render something even though it's not a markdown file is it because why should mdsfx do something in the rss.xml endpoint we're not having a markdown file because because of this line right here because of this okay yeah okay so that that is that is rendering the page as if it was like an html page and then and then it tries it gets to that um open graph it tries to read the page store and that blows up oh my god like yeah reading page okay so hold on what do we got here um stores are contextual root component okay i think yeah it kind of makes sense right they i don't think they would have access to the stores if that's the case what do we need this thing for anyway um page host okay we we do need it to well yeah we do this this is auto generating the um the og url okay let's let me just try something are all the authors split [Music] and not just to come up with our training space well what do you mean brian are all the authors split by coma and not just they come oh oh i see i see i already had a thought about this as well and the the ones i checked um i didn't check all to be honest but the ones i checked i they were correct the authors were split correctly with comma in the space yeah okay that's definitely oh hang on that's that's too fragile though where was that in which which file postcon i think it was in oh this one yes exactly um the buckthorn files with the authors i checked um where split correctly they all have a space yeah yeah but yeah but i just didn't check it yeah okay let's see replace um what is it back backslash s is that makes sense and then here split by that i don't think it actually didn't work oh wait recent articles preview okay hold on let me just let me just go through that recent articles preview there's the page store again land4 sorry what's that oh yeah yeah actually hang on let me change this quickly that's better i like i like that better split by comma and then trim the white space um that's in like uh like this with a map trim but you have to do it on each on each altar right oh yes i think that's what that's what brian meant i think and then yeah okay yeah either either before yeah fair enough cool so now hang on so yeah so this is it's that it's that um okay so that that page seems to cause an issue when you use it like that is there a workaround for this i think this is a this is a deeper thing to investigate whether whether like this thing here for example is not really documented anywhere in in swell kit this is a beat thingy so i wonder if that's a use case that might that might be a bit unique maybe i think what i need to do is i need to i need to talk to the um swelt maintainers i open an issue properly document how this works and see see what they think it's i mean if it's a use case where in our case well let's think about it when you're rendered here this is the handle function or the hoax right as a handle and if we go here and here we go so this function runs every time swell kit receives a request and that actually happens before it does the whole rendering and all that stuff so i wonder if it's just too early in the process for that to be available yeah why would that stone up yeah i know wonder if it's too early in the in the whether it happens while the app is running or during free rendering and determines the response it receives the request object and the function call result will show so let me show you um this part right here this is in that when we when we call that result function my understanding is that this is where the the whole swelt magic happens where everything gets rendered in parts and whatnot and if we look at the flow here the handle handle blog posts so we we do the content render before we do the resolve yeah but then in the changelog it's maybe also not intended to work like it does i think i think it would fail there as well that the difference is that in the changelog we don't have we don't use um yeah if we go to yeah so first of all it doesn't have a layout which means uh it doesn't call just it doesn't call the store and and we're not we're not actually using this file to do the open graph we are just looking at oh hold on you know what the difference might no yeah we we read the um change log from here and these are just markdown files no layout and not none of that you can use the store yeah so would the the logic i implemented yesterday maybe resolve this if we don't take it from the locals but yeah just fetch the blog posts when calling the rss endpoint no i think it wouldn't because i i didn't call everything i i didn't call the result function yesterday i just returned the the response without resolving anything worth trying um so basically go back to this and then in here you had what did you have here like const i need to to to have a look in the pull request i don't know anymore by heart something like load blog post i think yeah i think it was called something like this and then we would do it here and then instead of um instead of using locals we'll fetch them they're not fair let's try it so it'd probably be pretty much the same thing but just without the the result with the resolve right and then basically just posts um something like that what's your problem what yeah i think i i called everything from uh object promise.all and then object.entries and just returned the resolve promise.all function or just make it async okay let's try so that's that's because now we're calling that stuff after or like as part of the result uh in in the hook right um so now instead of instead of calling the render here when this function gets called with the request swell then executes that endpoint and now it now it works okay so this is yeah this is interesting i want to go follow up on that with anthony i think on the as well team and understand what what what's the issue but it's something to do with the rendering at least we could reuse the thing i built yesterday yeah yeah yeah so even though it was yeah the only thing is we have so we have some actually we don't need to file them do we uh oh maybe we do we'll see later um okay now that the challenge is i do have to run um that's unfortunate but the positive news is that we have now now it's really just a matter of you know creating that string dynamically i think yeah if you open the pull request for this i can i can go on with that what happens if i get out of here if i leave the the chat i'm happy if you want to continue um but i i think i thought the feature in the pull request and i yeah just finish the feature even after the stream or on the stream probably after i need to get uh dinner soon yeah okay okay cool yeah let's see i mean okay so we we definitely learned something um and i'm gonna follow up so i'll be tweeting about this once i have an answer and a solution and figure out whether this was us messing up or whether it is something that should be supported or not but yeah for now at least we can load the blog post here as part of the endpoint so yeah cool that that's why that's why i made it very clear this is unscripted so we never know what happened but it's fun definitely learned something and then now have something to dive into and figure out what's going on so we'll um we'll follow up probably with a tweet or so and i'll throw it into the chat as well let's figure it out awesome yeah then you can you can push to push your branch and yeah i think it's just a matter of minutes now to get the um rss document string ready for delivering the feed i think so it's really trading that string dynamically um yeah and then should be okay hang on what did we change here i am going to keep this that's definitely more solid than what we had before um and then this is the new okay let me push this um really at block slash xml okay okay add block other says feed we have another it's one two three four one two three four and draft so you can take it yeah all right i never used the vs code extension to create a pull request i offer prs yeah it's i find it handy it's right here i don't have to go over and click around so used to to clicking all the things in in the github ui yeah the other thing you could do is install the github cli i used that before but i never used this before as well fair enough okay hang on so the the the check fails let me just see why the pre-push so our swell diagnostics something we didn't do properly i think let's fix this and then push yeah this this one i'm recording a full stack development course at the moment and this this thing is super handy for people to follow along what's going on if i just do things in the comment line or whatever and you know you lose people quickly there we go um ah i i saw it and i figured maybe we could give a pie without doing anything crap good things it feels like it's it's is just a string i believe so yes uh although does it not know oh oh my god no i'm oh okay that's definitely not ideal um i think this is better i don't use the same variable name there we go oh no um let's do some magic here git commit why not all right i think i copied that yes okay let's see if that does the trick well i'm glad we figured it out then otherwise that could have been nasty if we yeah yeah i think it got more technical than than we intended i thought this is just the same as the changelog shouldn't be a big deal turns out that was so wrong on so many levels okay yeah you should have your pr or maybe not oh no i need to actually do what you just said i need to manually create the pr um yeah don't do that okay if you see what i just did never do that request template never do it and i did it on the live stream as well so good job all right cool um we'll pick that up i will i will do some research just this got me curious really interested in actually understanding what happens in in their um under the hood so i'll do some digging in the source code figures out um shall we change the the logic in the changelog feed then as well to be consistent yeah you know i actually like that idea because um as i when i first implemented that it was just a kind of port from zapper over to this well kit and i just threw it all in the hook but as i said at the very beginning like we run that on every request completely complete nonsense we don't need to do that um if you if you don't mind moving that over that would be super helpful yeah that's that's our problem let me just have a look there's another thing in here what else do we do we do handle guides um i'll leave that for now we haven't really launched that yet so i think that's okay we don't have um oh hang onto hang on hang on you have to be careful um you have to we still need the stuff in the in the hooks by the way we cannot yeah i i wouldn't delete today okay okay bring back the things i i did yesterday deal okay yeah let's do that i just realized we need these um entries for the actual website to render the changes yeah they are called from session i think i believe so yes yeah nice okay cool yeah go for it then for for the changelog as well so we have that nicely separated um love it okay cool so i'm gonna i'm gonna wrap this up and then uh yeah i gotta run but thanks thanks julian for hanging out uh no it's way past your dinner time so good thanks thanks for helping out and thanks everyone on the stream for jumping in that was um that's good fun we'll we'll be back having next week or so cool all right see you later bye

Channel: Gitpod

Views: 176

Keywords:

Id: sGcMN0cYc78

Length: 84min 7sec (5047 seconds)

Published: Tue Nov 16 2021