Any way to read front matter in component?

[andrewnicols]

I'm writing a Terminology component to allow for technical terms to be defined within a glossary. Ideally I'd like to keep a short summary of the item in the front matter of the definition (i.e. in /docs/terms/example.md), but I don't think it's possible to read the front matter from the client side.

Is there any way to read the front matter from within a React component?

Failing that, is there another reasonable way of doing it? Perhaps generating a json output during build which can be read from the client?

[andrewnicols]

I have a feeling that #6923 will also solve my use-case.

[slorber]

Yes, it looks like it should work for your use-case

remember that theme-common is not publicly documented so you'd rather implement this on your site first, because if we do any breaking changes it might break your plugin for all users

[Josh-Cena]

Where are you reading is from? In any arbitrary page?

[andrewnicols]

Essentially yes - well, and docs page.

[andrewnicols]

I'm trying to write a React component which takes the name of a term and helps with defining it by creating a Tooltip with a summary, and a link to a full definition.

Essentially I'm trying to write this plugin, but instead of rewriting the source md files, I'd prefer to write it as a React component which reads the Summary and links to the page.

This is my WIP:

import React from 'react';
import Link from '@docusaurus/Link';
import { Tooltip } from "@material-ui/core";
import { useActiveDocContext } from '@docusaurus/plugin-content-docs/client';

export default function Term(props) {
  const { activeVersion } = useActiveDocContext();
  const termPath = `terms/${props.reference}`;
  const referencedDoc = activeVersion.docs.find(doc => doc.id === termPath);
  const termSummary = '...';

  return (
    <Tooltip title={<span>termSummary</span>} arrow={true}>
      <Link to={ referencedDoc.path }>
        <span>{props.children}</span>
      </Link>
    </Tooltip>
  );
}