better-docs
better-docs copied to clipboard
Published
20 hours ago •
SoftwareBrothers
SoftwareBrothers
Components not showing in docs
I created documentation for React Components but they do not appear in docs.
No components section in generated html.
jsdoc.conf.json:
{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc"]
},
"source": {
"include": ["src"],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": ["./node_modules/better-docs/component"],
"templates": {
"better-docs": {
"name": "LD-UI-REACT"
}
},
"opts": {
"destination": "docs",
"encoding": "utf8",
"recurse": true,
"readme": "README.md",
"verbose": true,
"template": "./node_modules/better-docs"
}
}
running script:
...
"docs": "jsdoc -c jsdoc.conf.json"
...
Component Source Code:
import React, { useContext } from "react";
import PropTypes from "prop-types";
import "./Collection.css";
import Entity from "./Entity";
import ThemeContext, { themes, DEFAULT_CONFIG } from "./config";
/**
* A component to show a collection of items
*
* @component
* @example
* const collections = []
* return <Collection collections={collections}>
*/
export default function Collection(props) {
const THEME = useContext(ThemeContext);
return (
<ThemeContext.Provider value={themes[DEFAULT_CONFIG]}>
<div>
{/* <h1
style={THEME.style.collectionLabel}
className={props.class.collectionLabel}
>
{props.entities[0].collectionLabel}
</h1> */}
<section
className={`collection-container container ${props.class.collectionContainer}`}
style={THEME.style.collectionContainer}
>
{props.entities.map((entity, i) => {
return (
<Entity
entity={entity}
key={i}
class={props.class}
></Entity>
);
})}
</section>
</div>
</ThemeContext.Provider>
);
}
Collection.propTypes = {
// List of class to custom style the component
class: PropTypes.string.isRequired,
};
Collection.defaultProps = {
class: {
collectionLabel: "",
collectionContainer: "",
entityImage: "",
entityLabel: "",
entityContent: "",
},
};
generated html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Home</title>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="./build/entry.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700|Inconsolata,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night.min.css">
<link type="text/css" rel="stylesheet" href="styles/app.min.css">
<link type="text/css" rel="stylesheet" href="styles/iframe.css">
<link type="text/css" rel="stylesheet" href="">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body class="layout small-header">
<div id="stickyNavbarOverlay"></div>
<div class="top-nav">
<div class="inner">
<a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="logo">
<a href="index.html">
<h1 class="navbar-item">LD-UI-REACT</h1>
</a>
</div>
<div class="menu">
<div class="navigation">
<a
href="index.html"
class="link"
>
API Documentation
</a>
</div>
</div>
</div>
</div>
<div id="main">
<div
class="sidebar "
id="sidebarNav"
>
<nav>
<h2><a href="index.html">Documentation</a></h2><div class="category"><h3>Classes</h3><ul><li><a href="Edge.html">Edge</a></li><li><a href="Edge.module.exports.html">module.exports</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Graph.module.exports.html">module.exports</a></li><li><a href="module.html#.exports">exports</a></li><li><a href="Node.html">Node</a></li><li><a href="Node.module.exports.html">module.exports</a></li><li><a href="RequiredParamChecker.html">RequiredParamChecker</a></li><li><a href="RequiredParamChecker.module.exports.html">module.exports</a></li><li><a href="RequiredParamError.html">RequiredParamError</a></li></ul><h3>Global</h3><ul><li><a href="global.html#blueMarkerIcon">blueMarkerIcon</a></li><li><a href="global.html#defineProp">defineProp</a></li><li><a href="global.html#fitSvg">fitSvg</a></li><li><a href="global.html#getAngle">getAngle</a></li><li><a href="global.html#getLayerPoint">getLayerPoint</a></li><li><a href="global.html#getSlope">getSlope</a></li><li><a href="global.html#getURILabel">getURILabel</a></li><li><a href="global.html#getWindowDimensions">getWindowDimensions</a></li><li><a href="global.html#leafletIcon">leafletIcon</a></li><li><a href="global.html#passOver">passOver</a></li><li><a href="global.html#projectLine">projectLine</a></li><li><a href="global.html#redSquatMarkerIcon">redSquatMarkerIcon</a></li><li><a href="global.html#segmentAxis">segmentAxis</a></li><li><a href="global.html#sortByTime">sortByTime</a></li><li><a href="global.html#useMap">useMap</a></li><li><a href="global.html#usePane">usePane</a></li><li><a href="global.html#useWindowDimensions">useWindowDimensions</a></li></ul></div>
</nav>
</div>
<div class="core" id="main-content-wrapper">
<div class="content">
<header class="page-title">
<p></p>
<h1>Home</h1>
</header>
<h3> </h3>
<section>
<article><h1>MAP providers</h1>
<p>You can find interesting map on TileLayer 's on: <a href="http://leaflet-extras.github.io/leaflet-providers/preview/index.html">leaflet-provider.js</a></p>
<h1>URI encoded icon</h1>
<p>You can download svg icons, uri encode and embed them directly in the html file.
This is a good solution avoiding to struggle with webpack building configuration for
applications using this package.</p>
<p>Some day you may host icons in a separate online server and switch the iconUrl to the online one.</p>
<p>To encode icons you need to:</p>
<p><code>$ npm run encode-svg</code></p></article>
</section>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a></p>
<p class="sidebar-created-by">
<a href="https://github.com/SoftwareBrothers/better-docs" target="_blank">BetterDocs theme</a> provided with <i class="fas fa-heart"></i> by
<a href="http://softwarebrothers.co" target="_blank">SoftwareBrothers - JavaScript Development Agency</a>
</p>
</div>
</footer>
</div>
<div id="side-nav" class="side-nav">
</div>
</div>
<script src="scripts/app.min.js"></script>
<script>PR.prettyPrint();</script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
It's been some time since the original issue was posted, but I'm also facing the same problem. Any solution?
