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-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>
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))