Giter Club home page Giter Club logo

typedoc-functional-theme's Introduction

Functional theme for TypeDoc

npm

This plugin contains a flexible theme for TypeDoc that builds additional features on top of typedoc-neo-theme's improved navigation and readability. Specifically, typedoc-next-theme adds support for displaying and filtering by category, and displaying additional tags of your choice. It .

Additionally, it extends Typedoc with additional options for a richer user experience.

Screenshot of external module design

Visit the Actions on Google Node.js reference to view this theme.

Visit http://typedoc.org/ to learn more about TypeDoc.

Installation and Configuration

Install via npm:

npm install -D typedoc-functional-theme

Or yarn:

yarn install typedoc-functional-theme

Enable the theme when running from the command line:

typedoc --options typedoc.json --theme node_modules/typedoc-functional-theme/bin/default

Or you can specify the theme as a typedoc option in your tsconfig.json file:

"typedocOptions": {
    "inputFiles": [
        "./src"
    ],
    "theme": "node_modules/typedoc-functional-theme/bin/default",
    "mode": "modules",
    "out": "docs",
    // "out": "docs",
    "exclude": [
        "**/src/test/*",
        "**/*.test.ts",
        "**/__tests__/*",
        "**/__mocks__/*"
    ],
    "excludeNotExported": true
},

Theme features

Directory-based module navigation

Just like with typescript-neo-theme, the left navigation bar is automatically organized to group modules into directories. You can also customize what you do and don't display as a plugin feature.

Display tags that aren't displayed by the default themes

Typedoc has specific handling for only a narrow set of tags. Other tags are still collected and available for display, but are not displayed in the default themes. Even though @category is specifically supported, it is not displayed in the default theme. Other tags are collected but not displayed in the default theme.

Category display and filtering

Even though typedoc has specific support for the @category tag, it doesn't display categories as part of the default themes. With this theme, module-level categories will be displayed as badges in the left menu. It's also possible to filter the left menu by category to narrow down the modules to module types of particular interest.

The @category tag can be used for items within a module or file too, and will be displayed there too.

Plugin features

This plugin adds additional options that can be placed in your typedoc.json file.

Links

You may want to specify additional links to appear in your header that don't point to reference documentation but related documentation for your platform.

"links": [{
    "label": "Guides",
    "url": "https://developers.google.com/actions/extending-the-assistant"
  }, {
    "label": "Reference",
    "url": "https://developers.google.com/actions/reference/nodejsv2/overview"
  }]

Outline

The left-hand side is a global navigation. This can be auto-generated by the Typedoc engine and theme, or it can be manually specified by including an object in your options. You provide a custom navigation with links that point to modules/{object value}.html.

"outline": [{
    "Actions SDK": {
      "Overview": "actionssdk",
      "api/v2": "actionssdk_api_v2"
    },
    "Dialogflow": {
      "Overview": "dialogflow",
      "api/v1": "dialogflow_api_v1",
      "api/v2": "dialogflow_api_v2"
    }
  }]

Search

Not all of the files in the reference documentation may be useful for developers. You can select certain pages to be high priority. These will retain the icon, along with displaying a subtitle and a kind (like class or interface). Items not included will be deprioritized, with smaller text.

"search": [{
    "name": "dialogflow.DialogflowConversation.data",
    "subtitle": "Persistent data"
  }, {
    "name": "conversation/response.BasicCard",
    "subtitle": "Rich response"
  }, {
    "name": "conversation/response.BasicCardOptions",
    "subtitle": "Rich response"
  }]

Link to source

You can set up links to your source code under each property in the documentation.

"source": [{
  "path": "https://github.com/actions-on-google/actions-on-google-nodejs/blob/master/src/",
  "line": "L"
}]

For a particular file and line, this can take you to a valid GitHub source for the Actions on Google Node.js project.

License

This project is based on typedoc-neo-theme which is in turn based on typedoc-default-themes by Sebastian Lenz.

Licensed under the Apache License 2.0.

typedoc-functional-theme's People

Contributors

fleker avatar goldenyz avatar bmight avatar e-r-w avatar janmalch avatar leilapearson avatar rxliuli avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.