Documentation

Meta object

The Meta object serves as a configuration file that provides metadata components.

It is written in JavaScript ES modules format (mjs extension) and contains an object with various properties defining the component's metadata. It is most often paired with an index.mdx file where you import the meta object from the _mjs.js file, in order to provide properties for the component documentation.

Code example

This is an example of the implementation from /components/button

import heroImg from '/public/images/components/components-hero.png';
import componentImg from '/public/images/components/meta/button.png';

import { meta as buttonGroup } from '/pages/components/button-group/index.mdx';
import { meta as gettingStarted } from '/pages/way-of-thinking/tone-and-voice.mdx';

const baseUrl = '/components/button';
export const meta = {
  baseUrl,
  tabs: [
    {
      label: 'Usage',
      path: '/components/button'
    },
    {
      label: 'Code',
      path: `${baseUrl}/code`
    }
  ],
  related: [buttonGroup, gettingStarted],
  hero: {
    image: heroImg,
    title: 'Button',
    subTitle: 'Components'
  },
  visibleAnchor: ['h2'],
  docs: {
    a11y: true,
    ux: true,
    dev: true,
    status: 'Ready',
    usage: 'infinity'
  },
  image: componentImg
};

Imports

The file begins with import statements that import images and metadata from various paths. These can be images for the hero or image tab.

Constants

The file declares a constant baseUrl with the value '/components/button'. This variable represents the base URL for the component.

Meta Object

The meta object contains the following properties:

Method	Parameters		Description
baseUrl			Stores the value of the baseUrl constant.
tabs			Closes and opens next dialog in queue, or hides the dialog if it's the last. You may pass a callback, when you want to route for example, to make sure the animation has ended before executing.
related			An array containing references to other metadata objects related to the component. The references are imported from external _meta.mjs files.
hero			An object representing the hero section of the component. It contains an image, title, and subTitle.
visibleAnchor			An array specifying which HTML anchor tags should be visible.
docs			Indicating various documentation-related details and if they are completed, such as a11y, ux, dev, status, and usage.
image			Represents an image associated with the button component

This _meta.mjs file can be used to provide essential metadata for the button component, such as its base URL, tabs, related components, hero information, visible anchors, documentation details, and associated images.