Is there any way to get Docs theme front-matter's image? like using hooks?

[effozen]

Good day Team,

I wonder there is any way to get front-matter's image.

📝 Situation

I've been trying to custom Docs-theme's tag and DocCard pages.

My purpose is custom DocCard with docs-front-matter-image and description.

This is example image.

I've found useDocById give some information but, there is no front-matter and images.

only description, id, permalink, title are given.

🎯 Purpose

To get front-matter or front-matter's image via using doc-id.

📝 Ask

Team, is there any way that I can get image or any other front-matter via using doc-id when I on DocCategoryGeneratedIndexPage or DocCard, DocTagDocListPage?

[slorber]

Unfortunately it's not possible, the props theme components receive are quite "static" and there's no easy way to add more data to those apart forking/enhancing our existing plugins.

In the future, React Server Components should give you the flexibility to achieve your needs
#9089

In DocCategoryGeneratedIndexPage, the DocCard components receive the same data structure as sidebar items (because this page displays a list of sidebar items at a given level). If you pass sidebar_custom_props as front matter to your docs, then DocCard should receive that as props (and you can eventually "automate" that by rewriting image to sidebar_custom_props.image thanks to parseFrontMatter)

[effozen]

Thank you, Slober!

I could solve the problem through your solution!

I left another tricky but not good solution. Only just for temporal way who want to solve this problem quickly.

For those looking to customize DocTagCosListPage which is not using item props, try the following:
(this case is only for using image)

The useDocById hook (or a similar one) only provides four attributes. I focused on permalink and used it to create a custom image link:

<DocItem doc={doc} docImg={`/media${tag.items[index]["permalink"]}img/index.webp`} />

While I don't consider this the best solution (in fact, I think it's the worst option), it's one possible workaround to try.

Thank you always for your dedication, Slober! Your maintenance work has been invaluable in helping me develop my website. I really appreciate it.

Hope you have a great day! 😁

---

example of customizing docs tag list using image: