I get so lazy about title tags. The point of today's notebook is to make me less lazy, so I actually fix the title of this site. Oh, and to explore `Title` and `Titled` in FastHTML.
```python
from fasthtml.common import *
from fasthtml.jupyter import *
from nb2fasthtml.core import render_nb
```
To create a `<title>` tag, you use the Title FT:
```python
Title("Hey")
```
`Titled` is a shortcut to give you `<title>` and `<h1>` containing the same thing, with the `<h1>` wrapped in a main container:
```python
to_xml(Titled("Hey this is Titled"))
```
It doesn't make much sense until you add a list of FTs to `Titled`:
```python
print(to_xml(Titled("Hey this is Titled", P("Here's some page content in a paragraph."),
Div(P("And here's a paragraph in a div.")),
Ol(Li("You can add stuff here"), Li("And more stuff"), Li("And the page can go on and on.")))))
```
## FastHTML App With Titled Pages
Here's a FastHTML app I'm running from this notebook.
```python
app,rt = fast_app(pico=False)
```
```python
@rt
def index():
return Titled("My Homepage",
Div(P("This page has a title and h1.")),
P("Here's some page content in a paragraph."),
Div(P("And here's a paragraph in a div.")),
Ol(Li("You can add stuff here"), Li("And more stuff"), Li("The page can go on and on.")))
```
```python
server = JupyUvi(app)
```
```python
@rt('/pages/{title}')
def page(title:str):
return Titled(title,
Div(P("The title and h1 match the title page URL slug")))
```
```python
server.stop()
```
## Titles From `nb2fasthtml`
```python
name = "2025-01-07-Verifying-Bluesky-Domain-in-FastHTML"
css = ':root {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;} p {line-height: 1.5;}'
nb = Path(f'{name}.ipynb')
```
`render_nb` from the `nb2fasthtml` package already turns the notebook's title into an h1, but it appears it doesn't add a title tag.
To get around that, I have my notebook route handler return:
```python
r = (Title(name[11:].replace('-', ' ').replace('_', ' ')),
Style(css),
render_nb(nb, wrapper=Div))
r
```