@leeyeh/jsdoc-rtd

v1.0.14

Published

3 years ago

Readthedocs-style jsdoc template. Fork from TUI JSDoc template.

Downloads

0High
0Medium
0Low

leeyeh

jsdoc jsdoc3 jsdoc-template template

jsdoc-rtd

install

npm install jsdoc-rtd --save-dev

about

A readthedocs style jsdoc template. Forked from TUI JSDoc Template to inherit the extra navigation and search features. Mobile navigation styling applied from docdash template. Cleaned up to SCSS and ES6.

Styling - Based on the readthedocs theme
Styling - Mobile-friendly version (Docdash)
Navigation - AutoComplete Searchbox (TUI JSDoc)
Navigation - Members / Methods / Events (TUI JSDoc)
Navigation - API / Manuals(Tutorials) Tab (TUI JSDoc)

Example

Configuration

See the jsdoc configuration page for generic configaturion options.

Template

"opts": {
    "template": "node_modules/jsdoc-rtd"
}

Logo Image

"templates": {
    "logo": {
        "url": "http://url.to/image.png",
        "width": "72px",
        "height": "60px"
    }
}

Page Title

"templates": {
    "name": "jsdoc template"
}

FooterText

"templates": {
    "footerText": "some text"
}

Use collapsible api list

Default: true

"templates": {
    "useCollapsibles": ture
}

Tab Names

"templates": {
    "tabNames": {
        "api": "API",
        "tutorials": "Examples"
    }
}

api defaults to the value API and tutorials defaults to the value Examples.

Custom Styles

With a folder structure like this:

static
└── styles
    └── custom.css
    └── another.css

And a config like this:

"templates": {
    "default": {
        "staticFiles": {
            "include": ["static/"]
        }
    },
    "css": [
        "styles/custom.css",
        "styles/another.css",
        "http://example.com/remote.css"
    ]
}

styles/custom.css, styles/another.css, and remote.css get included in the layout. default.staticFiles is the build-in jsdoc way of copying extra files.

innerHTML of script.code-js tag
innerHTML of div.code-html tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
</head>
<body>
    <div class="code-html">
        <h3> Base Example </h3>
        <p> Hello world </p>
    </div>

    <script class="code-js">
        console.log('hello world');
    </script>
</body>
</html>