This project is discontinued and the repository has been deprecated and archived on Mar 7th, 2023.
The Documentation component is a generic, reusable React component that allows you to render any available specification formats.
It supports:
- Passing custom functions that use system plugins to customize content rendering.
- Passing custom render engines to render specific types of documents.
- Setting custom architecture.
Run this command to install the component:
-
using
npmnpm i @kyma-project/documentation-component
-
using
yarnyarn add @kyma-project/documentation-component
Learn what the component consists of and see the exemplary code.
The list of properties for the Documentation component includes:
-
sources: (SourceWithOptions | SourceGroupWithOptions)[]
The
sourcesproperty is required and contains source files for the component. For more information on what a render engine is, read thesources.mddocument. -
renderEngines: RenderEngines
The
renderEnginesproperty is required and contains render engines for the component. For more information on what a render engine is, read therender-engines.mddocument.NOTE: The array must contain at least one value.
-
plugins?: Plugins
The
pluginsproperty is optional and contains plugins for the component. For more information on what a plugin is, read theplugin.mddocument.
For information on how to write a custom render engine for specific document types, read the custom-render-engine.md document.
For information on how to write a custom plugin for specific document types, read the custom-plugin.md document.
See an exemplary component code that renders the .md document source:
import React from "react";
import { render } from "react-dom";
import {
DC,
Content,
Sources,
RenderEngines,
Plugins,
} from '@kyma-project/documentation-component';
import { markdownRenderEngine, plugins as markdownPlugins } from '@kyma-project/dc-markdown-render-engine';
const SOURCES: Sources = [
{
source: {
type: "md",
rawContent: "Example content",
}
}
]
const RENDER_ENGINES: RenderEngines = [
markdownRenderEngine,
];
const PLUGINS: Plugins = [
markdownPlugins.frontmatterMutationPlugin,
];
const App: React.FunctionComponent<> = () => (
<DC.Provider
sources={SOURCES}
renderEngines={RENDER_ENGINES}
plugins={PLUGINS}
>
<Content />
</DC.Provider>
);
render(<App />, document.getElementById("root"));NOTE: This repository uses Yarn and Gulp for managing local dependencies and better development experience.
Use the following tools to set up the project:
- Node.js >= 10
- Yarn
To install all dependencies for the Documentation component package and other packages in the packages directory, run these commands:
$ yarn install
$ yarn bootstrap
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent