Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kodemoapp/player
A React component for reading Kodemo documents.
https://github.com/kodemoapp/player
Last synced: 3 months ago
JSON representation
A React component for reading Kodemo documents.
- Host: GitHub
- URL: https://github.com/kodemoapp/player
- Owner: kodemoapp
- License: mit
- Created: 2023-01-17T13:06:45.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T05:01:10.000Z (over 1 year ago)
- Last Synced: 2024-07-22T10:41:03.099Z (4 months ago)
- Language: TypeScript
- Homepage: https://kodemo.com/docs/player
- Size: 207 KB
- Stars: 664
- Watchers: 4
- Forks: 16
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Kodemo
Kodemo is a new format for more engaging and interactive technical documentation. It's great for tutorials and walkthroughs.
- 🔗 Learn more at [kodemo.com](https://kodemo.com)
- 👉 Try a [live demo](https://kodemo.com/docs/what-is-kodemo)
- 👀 Follow [@kodemoapp](https://twitter.com/kodemoapp)
## Kodemo Player
This repo contains the @kodemo/player package which is responsible for rendering and navigating Kodemo documents. The player is a React component and it needs to be provided with a valid [Kodemo document](https://kodemo.com/docs/format).
### Installation
To install and integrate @kodemo/player please follow the docs at .
TLDR?
1. Install @kodemo/player using your package manager of choice:
```shell
npm i @kodemo/player # yarn add @kodemo/player
```
2. Import and render the `KodemoPlayer` component:
```js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';
ReactDOM.createRoot(document.getElementById('root')).render(
Example Document',
subjects: {
f992151a: {
type: 'code',
name: 'file.js',
language: "javascript",
versions: {
e60944c4: { value: 'const a = 123;', },
}
}
}
}}>
)
```
### Development Setup
If you want to make changes to the @kodemo/player source here's how:
1. Clone this repository
2. Run `yarn install`
3. Run `yarn dev` to start the development server
4. Open the URL from the dev server output and 💥
#### Other scripts
```shell
# run tests
yarn test
# build a new release
yarn build
```
### Adding New Subject Types
Each subject in Kodemo is its own React component. You can easily add your own subject types by following these steps:
1. Create your subject component in the [subjects](https://github.com/kodemoapp/player/tree/master/src/subjects) directory. I recommend using [AbstractSubject](https://github.com/kodemoapp/player/tree/master/src/subjects/AbstractSubject.jsx) as a starting point.
2. Export your subject from [subjects/index.ts](https://github.com/kodemoapp/player/tree/master/src/subjects/index.ts).
3. Add your subject to [enum/SubjectType.ts](https://github.com/kodemoapp/player/tree/master/src/enum/SubjectType.ts).
### Terminology
If you're planning to work with the Kodemo source here are a few key concepts and names that are good to know about.
- The `story` is the main body text of the documentation.
- `Subjects` are the individual pieces of content that the documentation covers. A subject can be an image, code, etc.
- Subjects can have multiple `versions`. Each version represents a variant of the same subject. For example, multiple versions are used to animate lines being added or removed from code.
- The `timeline` is the bar with vertical line segments that indicate which subject that will become active when scrolling.
- `Effects` are keywords within the story that are linked to a specific subject version. They form the relationship between the story and subjects.
---
MIT licensed | Copyright © 2022-2023 Hakim El Hattab, https://hakim.se