qwik icon indicating copy to clipboard operation
qwik copied to clipboard

[✨] Document head based on content or props

Open samyosm opened this issue 1 year ago • 12 comments

Is your feature request related to a problem?

It would be appreciated to be able to change the title of a page based on the props a component receives or the content (useContent).

My need

I'm using the MDX feature and I would like the title to be the first h1 if it hasn't been set in the frontmatter. I.e.,

const { title } = useDocumentHead();
const { headings } = useContent();

if (!title) {
    setTitle(headings?.find(t => t,level === 1)?.text);
}

Describe the solution you'd like

Dynamic Head could give you the content of a Markdown page. E.g.,

// layout.tsx
export const head: DocumentHead = ({ head, content }) => {
  return {
    title: head.title || content.headings?.find(t => t,level === 1)?.text
  }
}

Describe alternatives you've considered

I considered setting the title myself after the document loads.

Additional context

No response

samyosm avatar Sep 27 '23 21:09 samyosm