@trevorblades/remark-mdx-rakkas
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    remark-mdx-rakkas

    This is a fork of remark-mdx-frontmatter that is made to work nicely with Rakkas

    Installation

    First, install this package, along with remark-frontmatter, which it relies on.

    npm install remark-frontmatter @trevorblades/remark-mdx-rakkas

    In your Rakkas config, you should have a standard-looking MDX configuration, using a Vite plugin and adding mdx to your array of pageExtensions. Pass this module and the remarkFrontmatter to your MDX plugin as the remarkPlugins option.

    import mdx from '@cyco130/vite-plugin-mdx';
    import {remarkMdxRakkas} from '@trevorblades/remark-mdx-rakkas';
    import remarkFrontmatter from 'remark-frontmatter';
    
    export default {
      pageExtensions: ['jsx', 'tsx', 'mdx'],
      vite: {
        plugins: [
          mdx({
            remarkPlugins: [remarkFrontmatter, remarkMdxRakkas]
          })
        ]
      }
    }

    Usage

    This remark plugin takes frontmatter content, and makes it available to your layout components in Rakkas. Both YAML and TOML frontmatter data are supported.

    For example, given a file named page.mdx with the following contents:

    ---
    title: Getting started
    ---
    
    This is how you get started...
    
    <InteractiveComponent />

    The following component, layout.jsx can read its child pages' frontmatter by accessing the meta prop.

    import {Helmet} from 'react-helmet-async';
    
    export default function Layout({children, meta}) {
      <>
        <Helmet title={meta.title}>
          <meta content={meta.description} name="description" />
        </Helmet>
        <h1>{meta.title}</h1>
        {children}
      </>
    }

    Install

    npm i @trevorblades/remark-mdx-rakkas

    DownloadsWeekly Downloads

    0

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    7.05 kB

    Total Files

    7

    Last publish

    Collaborators

    • trevorblades