Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kyma-incubator/documentation-component
React component for rendering markdown, openapi, asyncapi and odata
https://github.com/kyma-incubator/documentation-component
asyncapi markdown odata openapi reactjs
Last synced: 17 days ago
JSON representation
React component for rendering markdown, openapi, asyncapi and odata
- Host: GitHub
- URL: https://github.com/kyma-incubator/documentation-component
- Owner: kyma-incubator
- License: apache-2.0
- Archived: true
- Created: 2019-06-13T12:41:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T10:29:46.000Z (almost 2 years ago)
- Last Synced: 2025-01-11T13:49:39.387Z (26 days ago)
- Topics: asyncapi, markdown, odata, openapi, reactjs
- Language: TypeScript
- Homepage:
- Size: 2.61 MB
- Stars: 8
- Watchers: 15
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Documentation Component
## :warning: **Archived**
This project is discontinued and the repository has been deprecated and archived on Mar 7th, 2023.
## Overview
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.
## Installation
Run this command to install the component:
- using [`npm`](https://www.npmjs.com/)
``` bash
npm i @kyma-project/documentation-component
```
- using [`yarn`](https://yarnpkg.com/en/)
``` bash
yarn add @kyma-project/documentation-component
```
## Usage
Learn what the component consists of and see the exemplary code.
### Properties (props)
The list of properties for the Documentation component includes:
- **sources: (SourceWithOptions | SourceGroupWithOptions)[]**
The `sources` property is required and contains source files for the component. For more information on what a render engine is, read the [`sources.md`](./docs/props/sources.md) document.
- **renderEngines: RenderEngines**
The `renderEngines` property is required and contains render engines for the component. For more information on what a render engine is, read the [`render-engines.md`](./docs/props/render-engines.md) document.
> **NOTE:** The array must contain at least one value.
- **plugins?: Plugins**
The `plugins` property is optional and contains plugins for the component. For more information on what a plugin is, read the [`plugin.md`](./docs/props/plugins.md) document.
### Custom render engine
For information on how to write a custom render engine for specific document types, read the [`custom-render-engine.md`](./docs/guidelines/custom-render-engine.md) document.
### Custom plugin
For information on how to write a custom plugin for specific document types, read the [`custom-plugin.md`](./docs/guidelines/custom-plugin.md) document.
### Example
See an exemplary component code that renders the `.md` document source:
``` tsx
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<> = () => (
);
render(, document.getElementById("root"));
```
## Development
> **NOTE:** This repository uses [Yarn](https://yarnpkg.com/en/) and [Gulp](https://gulpjs.com/) for managing local dependencies and better development experience.
### Prerequisites
Use the following tools to set up the project:
- Node.js >= 10
- Yarn
### Installation
To install all dependencies for the [Documentation component](./packages/documentation-component) package and other packages in the [`packages`](./packages) directory, run these commands:
``` sh
$ yarn install
$ yarn bootstrap
```