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.
Install the package from npm packages registry.
npm i @dimerapp/docs-themeRegister 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'
import uiKit from 'edge-uikit'
import { docsTheme } from '@dimerapp/docs-theme'
const edge = new Edge()
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
<section layout-shell>
@!component('docs::sidebar', {
collapsible: true,
sections: sidebarSections
})
<main layout-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>You may import the styles and scripts as follows.
@import '@dimerapp/docs-theme/styles';import mediumZoom from 'medium-zoom'
import docsearch from '@docsearch/js'
import {
initZoomComponent,
initBaseComponents,
initSearchComponent,
} from '@dimerapp/docs-theme/scripts'
Alpine.plugin(initBaseComponents)
Alpine.plugin(initSearchComponent(docsearch))
Alpine.plugin(initZoomComponent(mediumZoom))