Taiga UI based library for developing documentation portals for Angular libraries.
npm install @taiga-ui/addon-doc
> Taiga UI based library for developing documentation portals for Angular libraries.
Install main packages:
``
npm i @taiga-ui/{cdk,core,kit,addon-mobile}
Install doc:
`
npm i @taiga-ui/addon-doc
> You can also see community made guide in Russian
1. Include TuiDocMainModule in your App module and use in your template:
`html`
2. Configure languages to highlight in your main module:
`typescript
import {Component} from '@angular/core';
import {TuiDocMainModule} from '@taiga-ui/addon-doc';
import {hljsLanguages} from './hljsLanguages';
import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
import {App} from './app.component';
@Component({
standalone: true,
imports: [TuiDocMainModule],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
coreLibraryLoader: () => import('highlight.js/lib/core' as string),
lineNumbersLoader: () => import('highlightjs-line-numbers.js' as string), // Optional, only if you want the line numbers
languages: {
typescript: () => import('highlight.js/lib/languages/typescript' as string),
less: () => import('highlight.js/lib/languages/less' as string),
xml: () => import('highlight.js/lib/languages/xml' as string),
},
},
},
],
})
export class App {}
`
3. Configure documentation providers:
TUI_DOC_PAGES — an array of pages, see TuiDocPages type
TUI_DOC_LOGO — an src for the SVG logo in the sidebar
TUI_DOC_DEFAULT_TABS — an array of default named for tabs on your typical page
TUI_DOC_TITLE — a title prefix for the browser tab
TUI_DOC_SEE_ALSO — a two dimensional array of related pages by their titles
TUI_DOC_SEARCH_ENABLED — enable doc search. Default value is true
4. Configure routing:
`typescript
import {Routes} from '@angular/router';
const appRoutes: Routes = [
{
path: 'super-page',
loadChildren: async () => (await import('../super-page/super-page.module')).SuperModule,
data: {
title: 'Super Page',
},
},
// ...
];
`
> You must have title in route data in order for TUI_DOC_SEE_ALSO to work. It would also be automatically added toTUI_DOC_TITLE
> for browser tab title when navigating to that route.
5. Create pages.
_Module:_
`ts
import {TuiAddonDoc} from '@taiga-ui/addon-doc';
@Component({
standalone: true,
imports: [TuiAddonDoc, SuperComponent],
})
export class App {}
`
_Component:_
`ts
// ..
@Component({
standalone: true,
selector: 'super',
templateUrl: './super.component.html',
})
export class Super {
// Keys would be used as tabs for code example
readonly example = {
// import a file as a string
TypeScript: import('./examples/1/index.ts?raw'),
HTML: import('./examples/1/index.html?raw'),
};
readonly inputVariants = ['input 1', 'input 2'];
}
`
> You can use any tool to import a file as a string. For example, you can use
> Webpack Asset Modules.
_Template:_
`html
package="SUPER-PACKAGE"
deprecated
>
This would be the content of a first tab
heading="Example of usage"
[content]="example"
>
documentationPropertyMode="input"
documentationPropertyType="T"
[documentationPropertyValues]="inputVariants"
[(documentationPropertyValue)]="input"
>
Some input
``