Layouts

Layouts

If you hadn't noticed, this site has the same header on every page. This is provided by the <site-layout> component which lives in ~/src/components/site-layout. This component makes use of Marko's ability to pass content using nested attributes.

Styles

As you can see, this site looks quite nice. That's because Marko pulls in stylesheets next to a Marko template. Try editing the contents of ~/src/components/site-layout/style.css. 💄

Images

We also have the Marko logo in the header. The image file lives at site-layout/logo.png, right next to site-layout/index.marko which references it using a relative path: <img src="./logo.png"/>.

And this works for all resources, not just images, which allows you to keep your resources next to the templates which use them. 👍