@dimerapp/docs-theme

The docs theme provides ready to use Edge templates, CSS and frontend JavaScript to create a documentation layout. This package must be used with @dimerapp/content package.

Usage

Install the package from npm packages registry.

npm i @dimerapp/docs-theme

Register the docsTheme with the edge template engine. The docsTheme plugin registers a set of templates under the docs namespace.

Some of the templates relies on the edge-uikit. So make sure to also and configure the edge-uikit.

import{Edge}from'edge.js'importuiKitfrom'edge-uikit'import{docsTheme}from'@dimerapp/docs-theme'constedge=newEdge()edge.use(uiKit)edge.use(docsTheme)

Once done, you use the following components to render the docs header, sidebar, table of contents and the main content.

@component('docs::header', config)
@slot('logo')
AdonisJS
@end@slot('logoMobile')
AdonisJS - Mobile logo
@end@end
<sectionlayout-shell>
@!component('docs::sidebar', {
collapsible: true,
sections: sidebarSections
})
<mainlayout-main>
@!component('docs::content_header', { title: file.frontmatter.title })
@component('docs::content')
@!component('docs::doc_errors', { messages: file.messages })
@!component('dimer_contents', { nodes: file.ast.children, pipeline })~
@end@if(file.toc)
@component('docs::toc')
@!component('dimer_element', { node: file.toc, pipeline })~
@end@end
</main>
</section>

Including styles and scripts

You may import the styles and scripts as follows.

@import'@dimerapp/docs-theme/styles';

importmediumZoomfrom'medium-zoom'importdocsearchfrom'@docsearch/js'import{initZoomComponent,initBaseComponents,initSearchComponent,}from'@dimerapp/docs-theme/scripts'Alpine.plugin(initBaseComponents)Alpine.plugin(initSearchComponent(docsearch))Alpine.plugin(initZoomComponent(mediumZoom))