Docusaurus-theme-frontmatter - Docusaurus theme to expose front matter through a component hook

Last update: Jun 8, 2022

docusaurus-theme-frontmatter

This package enhances the Docusaurus classic theme by exposing the docs, blog, and pages front matter to the following components and their children:

Furthermore, this allows you to define and access custom front matter.

Release Version License

Install

yarn add docusaurus-theme-frontmatter

Then, include the plugin in your docusaurus.config.js file.

// docusaurus.config.js
module.exports = {
  ...
+ themes: ['docusaurus-theme-frontmatter'],
  ...
}

TypeScript support

To enable TypeScript support, the TypeScript configuration should be updated to add the docusaurus-theme-frontmatter type definitions. This can be done in the tsconfig.json file:

{
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "compilerOptions": {
    ...
+    "types": ["docusaurus-theme-frontmatter"]
  }
}

How to use

The useFrontMatter() hook is made available to any of your components through the @theme/useFrontMatter import. For example, you might have a component that creates a gallery of images.

---
title: Miniature fairy doors of NYC
hide_table_of_contents: true
gallery:
  - /images/117-first-avenue.jpg
  - /images/lower-east-side.jpg
  - /images/my-guinness.jpg
  - /images/hundred-years.jpg
---
import Galley from '@theme/Galley';

<Galley />
import React from 'react';
import ImageGallery from 'react-image-gallery';
import useFrontMatter from '@theme/useFrontMatter';

export default function GalleyComponent () {
  const { gallery } = useFrontMatter();

  if (Array.isArray(gallery)) {
    const images = gallery.map((image) => ({
      original: image
    }));

    return <ImageGallery items={images} />;
  }

  return null;
}

Public API

useFrontMatter<T extends FrontMatter>()

Returns the front matter for the current context.

import useFrontMatter from '@theme/useFrontMatter';

interface CustomFrontMatter {
  gallery?: string[];
}

const MyComponent = () => {
  const { gallery } = useFrontMatter<CustomFrontMatter>();
  return (<... />);
}

Context

The current front matter context.

Generally, this is something to be left alone and operates behind the scenes. This is how it is used to enhance DocItem scaffolding the hook:

import { Context } from '@theme/useFrontMatter';
import DocItem from '@theme-init/DocItem';
import React from 'react';

export default (props) => <Context.Provider value={props.content.frontMatter}>
	<DocItem {...props} />
</Context.Provider>;

FrontMatter, DocItemFrontMatter, BlogPostItemFrontMatter, MDXPageFrontMatter

These types are provided to assist in describing the values returned by the useFrontMatter() hook.

import useFrontMatter from '@theme/useFrontMatter';
import type { DocItemFrontMatter } from '@theme/useFrontMatter';

const MyComponent = () => {
  const { id, title, keywords } = useFrontMatter<DocItemFrontMatter>();
  return (<... />);
}

GitHub

https://github.com/roydukkey/docusaurus-theme-frontmatter
You might also like...

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Aug 8, 2022

React JSON inspector component

React JSON inspector component

React JSON Inspector Component React-based JSON inspector that features tree expansion and fast search. Live demo Installation npm install react-json-

Aug 2, 2022

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Aug 7, 2022

A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

Apr 17, 2022

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Oct 28, 2021

Prevent React component subtrees from rendering

Prevent React component subtrees from rendering

React Freeze Prevent React component subtrees from rendering. What is this? 🤔 This library allows for freezing renders of the parts of the React comp

Aug 11, 2022

Component to build simple, flexible, and accessible toggle components

Component to build simple, flexible, and accessible toggle components

react-toggled ⚛️ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives

Jul 30, 2022

React component wrap for SimpleMDE Markdown Editor(v1.x)

react-simplemde-v1 React.js(v16.x+) component wrap for SimpleMDE Markdown Editor(v1.x+) Installation $ npm install --save simplemde react-simplemde-v1

Dec 6, 2021

A flexible, responsive, and easy-to-use crossword component for React apps.

A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

Aug 3, 2022
Comments
  • 1. Does it work with any frontmatter keyword?

    I am trying this plugin with docusaurus 2.0 rc.1 but I am seeing something not right. I swizzled the TOC component, added a random frontmatter entry to a page and used the plugin.

    I do not see the testKey. If I use id or title which are default frontmater accepted key, they work. Am I wrong with anything?

    import React from 'react';
    import clsx from 'clsx';
    import styles from './styles.module.css';
    import TOCItems from '@theme/TOCItems'
    
    import useFrontMatter from '@theme/useFrontMatter';
    
    // Using a custom className
    // This prevents TOCInline/TOCCollapsible getting highlighted by mistake
    const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
    const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
    export default function TOC({className, ...props}) {
    
      const { testKey } = useFrontMatter();
    
      return (
        <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
          {testKey}
          <TOCItems
            {...props}
            linkClassName={LINK_CLASS_NAME}
            linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
          />
        </div>
      );
    }
    
    
    Reviewed by LunaticMuch at 2022-07-30 13:15
a redux middleware to automatically generate tests for reducers through ui interaction
a redux middleware to automatically generate tests for reducers through ui interaction

Redux Test Recorder NOTE YOUR STATE TREE MUST BE SERIALIZABLE Redux test recorder is a redux middleware for automatically generating tests for your re

Jun 29, 2022
A clean, beautiful and responsive portfolio template Based On VSCode Theme
A clean, beautiful and responsive portfolio template Based On VSCode Theme

A clean, beautiful and responsive portfolio template Based On VSCode Theme! To view a live example, click here. Feel free to use it as-is or customize

Aug 4, 2022
ESLint plugin for react-hook-form

eslint-plugin-react-hook-form react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for

Aug 2, 2022
🛹 React Web3 wallet hook for the Onboard.js library.

useOnboard() A React Web3 wallet hook for Onboard.js library. Features Fully configurable as much as Onboard itself selectWallet and disconnectWallet

Jun 14, 2022
Simple hook to truncate items in the given list

useTagTruncator Installation yarn add react-use-tag-truncator npm install react-use-tag-truncator TODO Minor stuff need to be done in project: Fix r

Jul 19, 2021
Simple useGlobalState hook for React!

useGlobalState Simple useGlobalState hook for React! Do you need your data shared across other components, and you simply don't want to pass props all

Apr 26, 2022
transform react class component to function component
transform react class component to function component

react-class-to-fc ⭐ 特性 将react class组件转化为react 函数组件 ?? 安装 npm i react-class-to-fc -g ?? 使用 ctfc -i react-demo.js -o fc.js 就会将 react-demo.js文件中的class组

Nov 22, 2021
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Aug 10, 2022
:hourglass_flowing_sand: A higher order component for loading components with promises.
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Aug 10, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Aug 10, 2022