WebC Inside Your Head
Page titles usually include multiple pieces of information: the name of the current page and the name of the site. Except when you’re on the home page, then it usually just displays the site name. If there is a page title, you’ll want to put that first, and probably include some kind of separator to distinguish it from the site name that follows. Oi, this is getting complicated. It sure would be nice to wrap all of this up into a component that we could just drop in our base layout and forget about it.
Wait. We can‽
Render functions to the rescue!
This component gives us a default title if the page hasn’t set a
title property in frontmatter, and it builds a title from both the page and site titles if the page has a title.
So if we don’t set a title for our home page, it will get just the site title, and everything else will get a combination page title + site title.
In this case, we include the HTML for the
<title> element in our render function, rather than just returning the plain text title the way we did for our copyright component.
The reason is that — strictly speaking — custom elements are not permitted inside
So when WebC’s HTML parser encounters a custom element in the HTML head, it kicks it out into the body.
We have to work around this using
In a nutshell,
webc:is tells the WebC compiler that despite whatever tag name it sees on this element, it’s really this other element.
So in our
<head> we’ll write a normal
<title> element and set
webc:is="meta-title" to let WebC know that it should replace the title with our custom component.
And now every page will get the appropriate title.