Package Install | Hanzo Docs

Deprecated

For Hanzo Docs MDX, it is now enabled by default.

You can use the remarkNpm plugin instead.

Usage

npm

pnpm

yarn

bun

npm install hanzo-docs-docgen

pnpm add hanzo-docs-docgen

yarn add hanzo-docs-docgen

bun add hanzo-docs-docgen

Add the remark plugin.

Hanzo Docs MDX

MDX Compiler

source.config.ts

import { remarkInstall } from '@hanzo/docs/docgen';
import { defineConfig } from '@hanzo/docs/mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkInstall],
  },
});

import { compile } from '@mdx-js/mdx';
import { remarkInstall } from '@hanzo/docs/docgen';

await compile('...', {
  remarkPlugins: [remarkInstall],
});

Define the required components.

mdx-components.tsx (Hanzo Docs UI)

import { Tab, Tabs } from '@hanzo/docs/ui/components/tabs';
import defaultComponents from '@hanzo/docs/ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    Tab,
    Tabs,
    ...components,
  };
}

Component
Tabs	Accepts an array of item (`items`)
Tab	Accepts the name of item (`value`)

Create code blocks with package-install as language.

```package-install
my-package
```

```package-install
npm i my-package -D
```

Output

The following structure should be generated by the plugin.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab value="npm">...</Tab>
  <Tab value="pnpm">...</Tab>
  <Tab value="yarn">...</Tab>
  <Tab value="bun">...</Tab>
</Tabs>

npm

pnpm

yarn

bun

npm install my-package

pnpm add my-package

yarn add my-package

bun add my-package

Options

Persistent

When using with Hanzo Docs UI, you can enable persistence with the persist option.

Hanzo Docs MDX

MDX Compiler

source.config.ts

import { remarkInstall } from '@hanzo/docs/docgen';
import { defineConfig } from '@hanzo/docs/mdx/config';

const remarkInstallOptions = {
  persist: {
    id: 'some-id',
  },
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [[remarkInstall, remarkInstallOptions]],
  },
});

import { compile } from '@mdx-js/mdx';
import { remarkInstall } from '@hanzo/docs/docgen';

const remarkInstallOptions = {
  persist: {
    id: 'some-id',
  },
};

await compile('...', {
  remarkPlugins: [[remarkInstall, remarkInstallOptions]],
});

This will instead generate:

<Tabs groupId="some-id" persist items={[...]}>
  ...
</Tabs>