Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add client API for head tags #1

Closed
aleclarson opened this issue Oct 2, 2021 · 1 comment
Closed

Add client API for head tags #1

aleclarson opened this issue Oct 2, 2021 · 1 comment
Labels
roadmap saus/client
Milestone
v0.5

Comments

@aleclarson
Copy link
Contributor

Each page has its <head> tags parsed and provided via the headTags export of saus/client.

import { fetchHeadTags } from 'saus/client'

fetchHeadTags('/') // => Promise<HeadTags>

The fetchHeadTags helper returns a promise that resolves to an array of head tags, like this:

[
  ["title", "Hello world"],
  ["link", { "rel": "stylesheet", "href": "..." }]
]

Then you can use the applyHeadTags helper to update the DOM with them.

import { applyHeadTags, fetchHeadTags } from 'saus/client'

fetchHeadTags('/').then(applyHeadTags)
  • Some tags are replaced (eg: <title>) when defined
  • Some tags are appended (eg: <script> or <link>) if missing

_head.json

The _head.json metadata file is what fetchHeadTags requests. It's generated for every pre-rendered path at build time, and it can also be generated for on-demand routes.

fetch("/users/1234/_head.json")
@aleclarson aleclarson mentioned this issue Oct 3, 2021
Closed
@aleclarson aleclarson mentioned this issue Nov 16, 2021
Closed
@aleclarson
Copy link
Contributor Author

aleclarson commented Feb 6, 2022 •
edited

Implemented in next branch

But no endpoint, only helper functions for updating the <head> element (https://github.com/alloc/saus/blob/dc840db55fe94942aebe05754da4a6684314cb7a/src/client/head.ts).

The describeHead function is called in [page].html.js generated modules, and applyHead is called by the loadPageModule helper function.

@aleclarson aleclarson added this to the v0.5 milestone Feb 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
roadmap saus/client
Projects
None yet
Milestone
v0.5
Development

No branches or pull requests
1 participant
@aleclarson