https://github.com/murhafsousli/metabook
A simple implementation of material.io to document Angular apps and libraries
https://github.com/murhafsousli/metabook
angular component documentation material stroybook
Last synced: about 1 month ago
JSON representation
A simple implementation of material.io to document Angular apps and libraries
- Host: GitHub
- URL: https://github.com/murhafsousli/metabook
- Owner: MurhafSousli
- License: mit
- Created: 2022-03-12T01:57:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-14T02:15:04.000Z (over 4 years ago)
- Last Synced: 2025-01-21T02:26:09.918Z (over 1 year ago)
- Topics: angular, component, documentation, material, stroybook
- Language: TypeScript
- Homepage:
- Size: 527 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# What is Metabook
Metabook is a simple implementation of [Material.io](https://material.io)
**The project is still WIP**
### Usage
1. Create a new markdown file in `assets/docs`, e.g. `example-title.md`
2. Generate a component inside `components-examples` directory and export it inside examples `components-examples.module`, e.g. `example-title-component`
3. Export it in `index.ts` in the same directory
To show the component and its code inside the markdown, use the following syntax:
```md
The `` component is bla bla bla.
#### Example
```
Add a demo example including its source code inside your markdown using the comment syntax
```markdown
```
> Note that inside the braces of the comment should contain the component class name.
4. Run the task `npm run compodoc:build` to generate the documentation of the newly added component (this will generate a file `assets/docs/documentation.json`).
> Whenever you update the examples components, you need to re-run `npm run compodoc:build` to update the source code in the documentation.
5. Update the components list of your `MetabookModule` in `AppModule`
```ts
/**
* List of routes for each component page
*/
const metabookRoutes: StoryRoute[] = [
{
title: 'Example Title',
path: 'example-title'
},
{
title: 'Example Paragraph',
path: 'example-paragraph'
}
];
@NgModule({
imports: [
MetabookModule.forRoot({
routes: metabookRoutes,
components: [
ExampleTitleComponent
]
})
]
})
export class AppModule {
}
```
You can override the documentation directory using the config of `MetabookModule`
```ts
MetabookModule.forRoot({
routes: metabookRoutes,
markdownDirPath: 'assets/docs',
documentationPath: 'assets/docs/documentation.json',
components: [
ExampleTitleComponent
]
})
```
#### Contribution
Feel free to join the discussion and send PRs to the repo, I would love hear your input!