@diplodoc/components

YFM Docs Components

Компоненты для Yandex Flavored Markdown Documentation.

Installation

npm i @diplodoc/components

Usage

Append js

// In most cases append transform runtime
import "@doc-tools/transform/dist/js/yfm.js";

import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';

// configure components
import {configure as configureUikit} from '@gravity-ui/uikit';
import {configure as configureDocs} from '@diplodoc/components';

configureUikit({lang: 'ru'});

// can be reconfigured in any moment
configureDocs({
    lang: 'ru',
    // optionally configure allowed translations
    loc: {ru, en, tr, ...}
})

// The theme must be applied. To do that wrap your app in ThemeProvider
const root = createRoot(document.getElementById('root'));
root.render(
    <ThemeProvider theme="light">
        <App />
    </ThemeProvider>,
);

Append css

/*project.css*/

/*Append components styles*/
@import '@diplodoc/components';

/*Append components theme*/
@import '@diplodoc/components/themes/common';

/*In most cases append transform styles*/
@import '@doc-tools/transform/dist/css/yfm.css';

Development

To build the project correctly you need to install python@2. Visit python.org/downloads to get the latest version.

Install Dependencies

npm ci
cd demo && npm ci

To start the development server with storybook run the following:

npm run dev

License

MIT

Changelog

4.14.0 (2024-09-25)

Features

• add left padding to toc items (#303) (b74c4f3)