[✨] Document head based on content or props

[samyosm]

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

[mhevery]

Yes, that would be nice. Care to take a stab at it and send a PR. The code is here: https://github.com/BuilderIO/qwik/blob/main/packages/qwik-city/runtime/src/head.ts#L52

[theCephas]

Hello, please can I be assigned this issue? I will love to fix this. Cheers.

[Luwa-Tech]

Hi @mhevery is this issue still open, i would like to work on it.

[samyosm]

Sure, please go ahead.

[gioboa]

@theCephas arrived first 😅 you can do pair programming to solve this race condition

[Blossomeze]

Hi, is this issue fixed already or can I be assigned to it??

[mhevery]

I don't believe so. Perhaps all of the interested parties could collaborate on a solution. I am here to answer questions.

[Luwa-Tech]

Hey @theCephas and @Blossomeze if it's okay with you, let's collaborate on this.

[theCephas]

I don't mind. Although, I started working on it already. How do we collaborate to fix it? @Luwa-Tech

[gioboa]

If you want you can use our discord server

[akash4566]

useDocumentHead Function:

import { useEffect } from 'react';

const useDocumentHead = (title: string) => {
useEffect(() => {
// Check if the title is already set
const existingTitle = document.title;

// If the title is not set or is the default title, update it
if (!existingTitle || existingTitle === 'Untitled') {
  document.title = title;
}

// Return the title (either existing or updated)
return () => {
  document.title = existingTitle; // Reset the title on component unmount
};

}, [title]);
};

export default useDocumentHead;

[akash4566]

head Function in layout.tsx:

import React from 'react';

const Layout = ({ content }) => {
// Use the first h1 heading as the title if it is not already set
const title = content.headings.length > 0 ? content.headings[0].text : 'Untitled';

// Use the useDocumentHead hook to set or retrieve the title
useDocumentHead(title);

return (

{/* Your layout components and content here */}

);
};

export default Layout;