dignifiedquire / clean-documentation-theme Goto Github PK

View Code? Open in Web Editor NEW

19.0 4.0 5.0 1.27 MB

Theme for documentation.js

JavaScript 100.00%

clean-documentation-theme's Introduction

Clean Documentation Theme

A theme for documentationjs

Preview

http://libp2p.github.io/js-peer-id/

It uses React server side rendering with Radium for styling components.

Usage

$ npm install --save-dev clean-documentation-theme
$ npm install --save-dev documentation

Add to your package.json

"scripts": {
  "docs": "documentation build --format html --theme node_modules/clean-documentation-theme --o docs
"
  ...
}

and run

$ npm run docs

License

MIT

clean-documentation-theme's People

Contributors

Stargazers

Watchers

Forkers

victorb luiseduardobrito xiaojue cryptoquick zerazeru

clean-documentation-theme's Issues

Cannot read property 'context' of undefined

Just by following the example in the README I get the following warning and error:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

TypeError: Cannot read property 'context' of undefined

Does anyone know what the problem might be?

Add logo support

Publish to npm

Add support for all elements that the default_theme supports

Add tests

There are none, but there should be

Make sidebar sticky & scroll by itself

Add support for @see

Feedback

Taking https://ipfs.github.io/js-ipfs-bitswap as an example

First look is that it feels empty

Or there is missing information of the theme is just not designed well for the type of content. I believe it is missing info.

Clicking the <> url leads to 404

https://ipfs.github.io/js-ipfs-bitswap/[object%20Object]

Return values only say the data type, not what is the actual value

It would be great if custom DataTypes link to the repo of the data type

Othewise it is confusing for users.

Force examples to be javascript

Currently, the highlighting is sometimes auto-set and it seems to not be super accurate.

If I have a JSON-like object in the example, it assumes I want JSON, which means the rest of the JavaScript in the example, won't be highlighted correctly.

clean-documentation-theme/src/utils.js

Lines 41 to 46 in e215062

 highlight (code) { 

 if (this.options.hljs && this.options.hljs.highlightAuto) { 

 return hljs.highlightAuto(code).value 

 } 

 return hljs.highlight('js', code).value 

 }

Investigate searchbar

Finish content styles

Test and fix mobile view

Object Properties Missing

See this stackoverflow question for more details.

When making an object in a class, the properties for the object do not show up.

Example Object

/**
 * The URLs for the ads attributed to this song.
 * @typedef AdUrls
 * @property {String} flexSkip The ad used if the user wants to gain more skips.
 * @property {String} flexReplay The ad used if the user wants to gain more replays.
 * @property {String} flexThumbsDown The ad used if the user wants to skip using a thumbs down.
 * @property {String} nowPlayingStation The ad used for now playing songs.
 * @property {String} nowPlayingStationAdUnit The nowplaying ad unit. (?)
 * @property {String} nowPlayingStationAdTargeting The nowplaying ad 'targeting'. (?)
 * @property {String} backstage The "backstage" ad. (?)
 * @property {String} backstageAdUnit The "backstage" ad unit. (?)
 * @property {String} backstageAdTargeting The "backstage" ad targeting. (?)
 */
this.adUrls = {
  flexSkip: raw.adUrls.flexSkipAdUrl,
  flexReplay: raw.adUrls.flexSkipAdUrl,
  flexThumbsDown: raw.adUrls.flexThumbsDownAdUrl,
  nowPlayingStation: raw.adUrls.nowPlayingStationAdUrl,
  nowPlayingStationAdUnit: raw.adUrls.nowPlayingStationAdUnit,
  nowPlayingStationAdTargeting: raw.adUrls.nowPlayingStationAdTargeting,
  backstage: raw.adUrls.backstageAdUrl,
  backstageAdUnit: raw.adUrls.backstageAdUnit,
  backstageAdTargeting: raw.adUrls.backstageAdTargeting
};

Using default theme:

Using this theme:

	highlight (code) {
	if (this.options.hljs && this.options.hljs.highlightAuto) {
	return hljs.highlightAuto(code).value
	}
	return hljs.highlight('js', code).value
	}