@dimerapp/docs-theme v6.1.2
@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'
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>
Including styles and scripts
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))
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
9 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago