6.1.3 • Published 10 months ago

@dimerapp/docs-theme v6.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

@dimerapp/docs-theme

npm-image license-image

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

10 months ago

6.1.2

1 year ago

6.1.1

1 year ago

6.1.0

1 year ago

6.0.0

1 year ago

5.0.0

1 year ago

4.0.4

1 year ago

4.0.3

1 year ago

4.0.2

1 year ago

4.0.1

2 years ago

4.0.0

2 years ago

1.8.0

2 years ago

2.2.0

2 years ago

2.1.1

2 years ago

2.0.2

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

1.7.5

2 years ago

1.7.4

2 years ago

1.7.3

2 years ago

1.7.2

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.6.0

2 years ago

1.5.0

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago