Skip to content
This repository has been archived by the owner on Mar 7, 2023. It is now read-only.

React component for rendering markdown, openapi, asyncapi and odata

License

Notifications You must be signed in to change notification settings

kyma-incubator/documentation-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Documentation Component

⚠️ 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

    npm i @kyma-project/documentation-component
  • using yarn

    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 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 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 document.

Custom render engine

For information on how to write a custom render engine for specific document types, read the 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 document.

Example

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"));

Development

NOTE: This repository uses Yarn and Gulp 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 package and other packages in the packages directory, run these commands:

$ yarn install
$ yarn bootstrap