Updating the title of a docs page according to a custom front-matter prop

[ArthurFlag]

Hi,

I'm trying to label the title of certain docs pages according to a front matter property.

For example:

---
title: Cool feature
beta: true
---

This would generate a docusaurus docs H1 element with a span for the "BETA" label that would get added before the generated permalink icon. Same idea/use case for admin features that you could tag/identify as such.

What would be the right path to do that? I think that would be useful to a lot of folks and I'd be happy update the docs to share a tutorial.

[slorber]

See suggestion in #9645

You can just use beta: true, swizzle relevant theme components, and add {frontMatter.beta && <MyBetaTag/>} anywhere you want

[ArthurFlag]

Actually I'm not sure how to pull the frontmatter from my swizzled component.

In the link you shared, you use const docTOC = useDocTOC(); to then get the frontmatter, it seems, where does this come from?

In the context of the Heading component, how would I pull it the front matter?

import React from "react";
import clsx from "clsx";
import { translate } from "@docusaurus/Translate";
import { useThemeConfig } from "@docusaurus/theme-common";
import Link from "@docusaurus/Link";
import type { Props } from "@theme/Heading";

import styles from "./styles.module.css";

export default function Heading({ as: As, id, ...props }: Props): JSX.Element {
  const {
    navbar: { hideOnScroll },
  } = useThemeConfig();

  // H1 headings do not need an id because they don't appear in the TOC.
  if (As === "h1" || !id) {
    return <As {...props} id={undefined} />;
  }

  const anchorTitle = translate(
    {
      id: "theme.common.headingLinkTitle",
      message: "Direct link to {heading}",
      description: "Title for link to heading",
    },
    {
      heading: typeof props.children === "string" ? props.children : id,
    },
  );

  return (
    <As
      {...props}
      className={clsx(
        "anchor",
        hideOnScroll
          ? styles.anchorWithHideOnScrollNavbar
          : styles.anchorWithStickyNavbar,
        props.className,
      )}
      id={id}
    >
      {props.children}
      <Link
        className="hash-link"
        to={`#${id}`}
        aria-label={anchorTitle}
        title={anchorTitle}
      >
        &#8203;
      </Link>
    </As>
  );
}

[slorber]

Swizzle the doc item layout and you'll figure out where imports come from, the hook you look for is useDoc()

Remember it's internal code, not public api surface. If you want to achieve your customization you must be ready to read the theme source code when needed. You now own that code