Header & Footer Images

[00:00:00]
>> Okay, let's grab the Svelteflix logo from the publish site. We'll just open Dev Tools, select that element, Find that image and just open it in a new tab. And I'm gonna save that into my workspace. I'm gonna create it in a lib directory to keep it out of my routes folder.

[00:00:36]
I'm gonna create a new folder called images. I'm just gonna drop it in there with the name of logo. Right, and you can now see that in our project source/lib/images/logo. And I'm gonna reference this inside my layout.svelte, By importing it as if it were a module. Import logo from $lib/images/logo.svg.

[00:01:04]
And this is gonna tell Vite to grab a reference to that SVG file and treat it as an asset that will get a unique hash name added to it, so that it can be cached immutably. So inside that link, we'll create an image with an alt attribute of SvelteFlix and a source of that logo value.

[00:01:37]
Right now, we can't see it and I suspect that's because we haven't added a height to the element. Okay, so it looks like we need to add an explicit height on that image element, so let's do that. Right, and we'll just polish this off a little bit by adding some more of a gap between the links on the right Okay, so we have the beginnings of a user interface.

[00:02:14]
We're gonna add a main element for each individual page, just drop a slot in there. And then at the bottom, we'll add a footer, Which is gonna contain this text "Data provided by". And then we'll have a link to the movie database. So this is where all of this information is coming from.

[00:02:45]
TMDB is an API that you can use in your own applications to build any app that involves data about movies and also TV shows, and the people who are in them. It has an API with some developer documentation, which hopefully I can find down here. So we'll be referring to this page as we build the application.

[00:03:13]
Yes, I have a question from the crowd.
>> Is there a good way to refer to things like the logo or site CSS so that if the file name changes for cache busting, some external site can still refer to the URL without it changing?
>> So if you wanted the logo to be at a persistent URL, so that it could be used externally, then instead of having it in your source folder, what you could do is put it in your static folder.

[00:03:40]
So let's take this images directory and put that there, and then just comment out that import. And instead of using this logo value, we'll just hard code static, sorry, images/logo.svg. And that will look the same, the only difference is that that file will not be cached immutably, it will always be accessible at that URL.

[00:04:16]
And so that's something that we do typically with things like favicons. But any image that you want to be cached immutably, you should have that in your source directory instead. So we're gonna add a link to the movie database, since they've been kind enough to provide this information.

[00:04:40]
Just grab that, drop that in there. And then, once again, we're just gonna grab this SVG from the publish site, save it into our app, As tmdb.svg. Gonna put that logo back where it was. And we'll duplicate this line. We'll grab a reference to that other SVG, and we'll drop that inside that link.

[00:05:31]
One last little bit of CSS and then we can start building the page itself.