diff --git a/README.md b/README.md index a37d023..48147fb 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186). -_1202 TILs and counting..._ +_1203 TILs and counting..._ --- @@ -911,6 +911,7 @@ _1202 TILs and counting..._ - [Relative And Absolute Paths In Links](remix/relative-and-absolute-paths-in-links.md) - [Run The Development Server From Another Port](remix/run-the-development-server-from-another-port.md) +- [Set The Title Of A Page](remix/set-the-title-of-a-page.md) ### RSpec diff --git a/remix/set-the-title-of-a-page.md b/remix/set-the-title-of-a-page.md new file mode 100644 index 0000000..17178e4 --- /dev/null +++ b/remix/set-the-title-of-a-page.md @@ -0,0 +1,37 @@ +# Set The Title Of A Page + +One of the reserved functions in a Remix route is `meta`. Defining this +function allows you to specify meta tags that appear in the `` of a page, +including the `` tag. + +``` +import type { + MetaFunction, + LoaderFunction +} from "@remix-run/node"; + +export const loader: LoaderFunction = async ({ params }) => { + // load and return the post +}; + +export const meta: MetaFunction = ({ data }) => { + const { title } = data?.posts || {} + + return { + title: title || "An Article", + }; +}; + +export default function Post() { + /* render the post */ +} +``` + +The `meta` function returns an object that contains key-value pairs of meta +tags. We can include something like `title: 'Sign Up'` for a static title. Or +we can access things like `location`, `params`, and even `data` from the loader +to produce a content-specific title. + +If open one of these `/posts/$slug` pages in the browser and crack open the +_View Source_, we'll be able to see the `<title>Name Of My Post` tag +within the `` tag.