{"id":15176630,"url":"https://github.com/kyma-incubator/documentation-component","last_synced_at":"2025-10-01T14:32:31.861Z","repository":{"id":35023465,"uuid":"191760842","full_name":"kyma-incubator/documentation-component","owner":"kyma-incubator","description":"React component for rendering markdown, openapi, asyncapi and odata","archived":true,"fork":false,"pushed_at":"2023-03-07T10:29:46.000Z","size":2733,"stargazers_count":8,"open_issues_count":0,"forks_count":9,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-01-11T13:49:39.387Z","etag":null,"topics":["asyncapi","markdown","odata","openapi","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyma-incubator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-13T12:41:25.000Z","updated_at":"2023-11-17T07:33:32.000Z","dependencies_parsed_at":"2024-10-20T19:48:29.854Z","dependency_job_id":null,"html_url":"https://github.com/kyma-incubator/documentation-component","commit_stats":{"total_commits":55,"total_committers":17,"mean_commits":3.235294117647059,"dds":0.6909090909090909,"last_synced_commit":"8da01b5ad983aa599c09ac06f202a40f95626e17"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyma-incubator%2Fdocumentation-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyma-incubator%2Fdocumentation-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyma-incubator%2Fdocumentation-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyma-incubator%2Fdocumentation-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyma-incubator","download_url":"https://codeload.github.com/kyma-incubator/documentation-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234878317,"owners_count":18900676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asyncapi","markdown","odata","openapi","reactjs"],"created_at":"2024-09-27T13:22:16.014Z","updated_at":"2025-10-01T14:32:26.435Z","avatar_url":"https://github.com/kyma-incubator.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Documentation Component\n\n## :warning: **Archived**\n\nThis project is discontinued and the repository has been deprecated and archived on Mar 7th, 2023.\n\n## Overview\n\nThe Documentation component is a generic, reusable React component that allows you to render any available specification formats.\n\nIt supports:\n\n- Passing custom functions that use system plugins to customize content rendering.\n- Passing custom render engines to render specific types of documents.\n- Setting custom architecture.\n\n## Installation\n\nRun this command to install the component:\n\n- using [`npm`](https://www.npmjs.com/)\n  ``` bash\n  npm i @kyma-project/documentation-component\n  ```\n\n- using [`yarn`](https://yarnpkg.com/en/)\n  ``` bash\n  yarn add @kyma-project/documentation-component\n  ```\n\n## Usage\n\nLearn what the component consists of and see the exemplary code.\n\n### Properties (props)\n\nThe list of properties for the Documentation component includes:\n\n  - **sources: (SourceWithOptions | SourceGroupWithOptions)[]**\n\n    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.\n\n  - **renderEngines: RenderEngines**\n\n    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.\n\n    \u003e **NOTE:**  The array must contain at least one value.\n\n  - **plugins?: Plugins**\n\n    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.\n\n### Custom render engine\n\nFor 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.\n\n### Custom plugin\n\nFor information on how to write a custom plugin for specific document types, read the [`custom-plugin.md`](./docs/guidelines/custom-plugin.md) document.\n\n### Example\n\nSee an exemplary component code that renders the `.md` document source:\n\n``` tsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport {\n  DC,\n  Content,\n  Sources,\n  RenderEngines,\n  Plugins,\n} from '@kyma-project/documentation-component';\nimport { markdownRenderEngine, plugins as markdownPlugins } from '@kyma-project/dc-markdown-render-engine';\n\nconst SOURCES: Sources = [\n  {\n    source: {\n      type: \"md\",\n      rawContent: \"Example content\",\n    }\n  }\n]\n\nconst RENDER_ENGINES: RenderEngines = [\n  markdownRenderEngine,\n];\n\nconst PLUGINS: Plugins = [\n  markdownPlugins.frontmatterMutationPlugin,\n];\n\nconst App: React.FunctionComponent\u003c\u003e = () =\u003e (\n  \u003cDC.Provider\n    sources={SOURCES}\n    renderEngines={RENDER_ENGINES}\n    plugins={PLUGINS}\n  \u003e\n    \u003cContent /\u003e\n  \u003c/DC.Provider\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## Development\n\n\u003e **NOTE:** This repository uses [Yarn](https://yarnpkg.com/en/) and [Gulp](https://gulpjs.com/) for managing local dependencies and better development experience.\n\n### Prerequisites\n\nUse the following tools to set up the project:\n\n- Node.js \u003e= 10\n- Yarn\n\n### Installation\n\nTo install all dependencies for the [Documentation component](./packages/documentation-component) package and other packages in the [`packages`](./packages) directory, run these commands:\n\n``` sh\n$ yarn install\n$ yarn bootstrap\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyma-incubator%2Fdocumentation-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyma-incubator%2Fdocumentation-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyma-incubator%2Fdocumentation-component/lists"}