Now, the last thing I want to do before we close out this episode is add some custom fonts to our website, just so we have a little bit of style differences for headlines, as well as maybe we'll call, since we're calling the application Audio, A-W-W-D-I-O, we're just going to put that on the front page. And again, this doesn't have to look absolutely perfect, but it just shows you a little bit of pieces that you could think about as you're building an application from start to finish. You don't have to have this well-designed logo or anything like that. Sometimes it's just little changes that make a big difference. So one of the fonts that I really love, and this is from Bunny Fonts, so bunny.net, and if you take a look in our code, in the home view or any layout that Laravel Breeze kind

So one of the fonts that I really love, and this is from Bunny Fonts, so bunny.net, and if you take a look in our code, in the home view or any layout that Laravel Breeze kind of initiates for us, we have some fonts already added. So we can add fonts to this link here and add additional fonts for us. And so that's what we're going to do. So the first thing I want to do, well, since we're here, why don't we change the title here? Let's do audio. Let's listen together. And now the fonts that I really like are this Any User Telescope.

Let's listen together. And now the fonts that I really like are this User Telescope. I think that's really nice for maybe like the logo font. And then this Aleo font is a very nice serif that we can use for the headers for each of these sections. So why don't we add this? The best way to do is if you click on an ad variant and you get this, and you click switch to HTML up here, you get the link URL. And since we already have this bunny link in our code here, fonts.bunny.net, we can just attach it to this link.

And since we already have this bunny link in our code here, fonts.bunny.net, we can just attach it to this link. And in this case, the ones that we're going to want is Aleo and then AnyUserTelescope. So we can do that by, so after this, what we can say is Aleo. And maybe we want the 300, 500, and 700. And then AnyUserTelescope. And we want maybe just the 400. I think that's the only one that it shows. So if we go back to AnyUserTelescope, we only have a 400 variant. And again, if you click to add variant, you can get this whole section ready for you.

So if we go back to AnyUser Telescope, we only have a 400 variant. And again, if you click to add variant, you can get this whole section ready for you. So now you have this entire link set up for you, but you can see how it has a pipeline and then the font name with variants. Append that and display equals swap that we previously had. Now there's one thing we have to do in our tailwind.config.js. We need to add these font families. And one of the things I like to do is add a new serif. And then we can also add a new, maybe we'll call it cursive for that logo title font. So for serif, we'll say that this is the Aleo and the fallback will be just the standard.

And then we can also add a new, maybe we'll call it cursive for that logo title font. So for serif, we'll say that this is the Aleo and the fallback will be just the standard serif font that you might have installed on your system. And same thing for cursive, we'll say Any User Telescope with a fallback of cursive. And it looks like, I forgot the colon there, should be good to go. Now in our code, what we can do is, I believe we were already calling cursive in our Tailwind styles here. So we should see, yeah, or I believe serif, I should say. So we already see this information here, which looks nice. I'm liking how this is coming together.

So we already see this information here, which looks nice. I'm liking how this is coming together. Maybe we want to shrink this padding or the margin between these two items. Let's take a look at our dashboard. So mb-8, here we have my-20. So instead of mb-8, maybe we'll do mb-4. Yeah, that's a little bit better. And maybe we'll shrink this size. So maybe like text-sm, is that too small? Maybe we'll say like 0.9rem.

So maybe like text small, is that too small? Maybe we'll say like 0.9 rem. So not necessarily small, but a little bit smaller than normal. And I like that. So now we have this kind of like headline font. We have the form all ready to go, and then additional listening parties that we can join. And why don't we add a logo, or rather just the word with that handwritten font up here. So we can do that probably in our home.blade.php, or maybe first of all here, we'll add the background. So background of emerald and 50, so that way we have that set in the background as well as the component.

So background of emerald and 50, so that way we have that set in the background as well as the component. And then we'll say in h1, and we'll set this class to maybe text-center, and maybe like margin-top of 8, text-3xl font. We'll do the cursive font. So that's the one that we loaded, the anti-user telescope font that I saw. And then maybe like text-slate-800, and why don't we call this, we'll use an emoji maybe like this heart-hands, and then we'll say audio. Let's see what that looks like. Yeah, I'm liking it.

Let's see what that looks like. Yeah, I'm liking it. So now we have a logo for lack of a better word, and this is just a font that we brought in with an emoji. And then we added some additional fonts for these headlines. So why don't we add a new podcast just to make sure everything's put together. Now, just a quick note, I did find that there are some XML feeds that don't have that iTunes namespace where we can grab the duration that we were doing here in previous episodes. So what we have to do is if there is no iTunes namespace, we'll go ahead and just grab the duration.

So what we have to do is if there is no iTunes namespace, we'll go ahead and just grab the duration. In this case, there's usually a duration parameter, and we can just assume that a podcast audio file is 128 kilobytes. That's the bit rate that most podcast audio files are, and then we can kind of calculate the duration from there. So this is what it's going to look like instead. So what we have here is instead of just grabbing and assuming the iTunes namespace is there, we can instead get the namespace with iTunes. And if it's not found, then what we'll do is find the enclosure length, which most RSS

we can instead get the namespace with iTunes. And if it's not found, then what we'll do is find the enclosure length, which most RSS feeds have, and we'll assume the bit rate is 128 kilobytes per second, and set the episode length to that duration in seconds. This is where we can parse the duration using Carbon interval, and we're basically just saying we're grabbing the format hours, minutes, and seconds from that duration like we were within the iTunes namespace and setting it like that. We do have some logging set up just in case for some reason that RSS feed did not have a duration, and we would just set the default to an hour long of the podcast. And really this is only necessary so that we can set the end time and can turn off podcasts.

a duration, and we would just set the default to an hour long of the podcast. And really this is only necessary so that we can set the end time and can turn off podcasts at that point. So in this case, we can set them to not active when the end time has passed. So let's try it out again. We have a new podcast that I can add the RSS feed into it and set a start time for that listening party. We'll just say a new business of Laravel drop, and we'll add that RSS feed for the business of Laravel podcast, and we'll set a start time to, we'll say maybe next Wednesday, or two Wednesdays from now I should say, and maybe we'll say 5 p.m.

of Laravel podcast, and we'll set a start time to, we'll say maybe next Wednesday, or two Wednesdays from now I should say, and maybe we'll say 5 p.m. Apply and create listening party. Okay, so that should be running in the background. Let's double check our terminal. If we run php artisan queue:work, that should have completed. Let's check our homepage again. And now we should see a new podcast. Here we go. The business of Laravel drop, and you can see how it's good that we double check this.

Here we go. The business of Laravel drop, and you can see how it's good that we double check this because now we have this information. We have it ready to go, but why don't we truncate this title as well, or we should truncate it shorter. So in our dashboard.blade.php at the listening party episode title, there's a few ways to do this. We could stick with CSS and just set a max width here, and maybe we could say like the max width of, and perhaps we know, you know, we could say like a max width of 2xl, and that is still incredibly too long, so maybe we'll say a max width of small, and let's

max width of, and perhaps we know, you know, we could say like a max width of 2XL, and that is still incredibly too long, so maybe we'll say a max width of small, and let's see what that looks like. Okay, that's a little better. Maybe we'll do like extra small just to be safe. Perfect, because we shouldn't have to shrink too much further down, and it'll automatically truncate if needed. We're not really optimizing for mobile and for smaller screens just yet, and we might not get the chance to do that in this series, but I think this dashboard is looking really well.

not get the chance to do that in this series, but I think this dashboard is looking really well. We have the ability to add podcasts. We'll see that it's live, and we can join by clicking on it, clicking this button. So why don't, in our next episode, start figuring out how we can, when this is live, when the set time is now at the time when we should play the podcast, how can we start it on the server so that anybody joining that party at the time it's live is listening in real time with everyone else.