https://github.com/hernandemonteiro/doc_docs
package to create documentation for NextJS projects
https://github.com/hernandemonteiro/doc_docs
docs jest nextjs npm-package react
Last synced: about 1 year ago
JSON representation
package to create documentation for NextJS projects
- Host: GitHub
- URL: https://github.com/hernandemonteiro/doc_docs
- Owner: hernandemonteiro
- License: mit
- Created: 2022-11-15T02:51:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-26T21:01:16.000Z (over 3 years ago)
- Last Synced: 2025-05-16T20:11:06.762Z (about 1 year ago)
- Topics: docs, jest, nextjs, npm-package, react
- Language: JavaScript
- Homepage: https://doc-docs.vercel.app
- Size: 60.6 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
DOC DOCS - NEXTJS DOCUMENTATION
doc_docs is for NextJS projects, he use the file routing method of NextJS to create a custom documentation.
### TO USE
install the package:
```
npm i doc_docs
```
after:
```
import ComponentOrDocs from "doc_docs";
```
after init the basic configuration:
- remove the `` of `_app`;
- add the ``;
- add `router` to args function;
- pass basic properties to component:
```
```
##### Example:
```
import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";
function MyApp({ Component, pageProps, router }) {
return (
);
}
export default MyApp;
```
Now you can create a folder `docs` inside your folder `pages`;
- inside the folder docs create a index file.
Just it... your doc_docs is done!
### MENU
to config your menu you can create folders inside the `docs` folder;
and to display you just need change the atribute `configDirs` in your
`_app` component;
`dirs:` is a simple folder with the index file inside;
`subDirs:` is a submenu configuration to create a select folder in menu;
##### Example:
```
import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";
function MyApp({ Component, pageProps, router }) {
return (
);
}
export default MyApp;
```
### CUSTOM LOGO
to set a custom logo you can use `projectLogo` attribute;
this attribute accept a JSX.Element or a String;
##### Example:
```
import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";
function MyApp({ Component, pageProps, router }) {
return (
);
}
export default MyApp;
```
### SOCIAL NETWORK
to add header icons with your social networks you can
use the principal component;
You can set:
- github;
- website;
- instagram;
- linkedin;
- discord;
- facebook;
##### Example:
```
import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";
function MyApp({ Component, pageProps, router }) {
return (
);
}
export default MyApp;
```
### PREBUILT COMPONENTS
`import { name_of_component } from "doc_docs/components"`
##### Components:
`TitleDoc:`
Title for page docs!
```
```
`ComponentDoc:`
- `options` and `description` is optional;
- `options` config a table with the component props;
```
Here you can expose Components}
options={[
{ prop: "OnClick", default: "none", accept: "() => void" },
{ prop: "children", default: "none", accept: "string" },
]}
description={
"optional description for this"
}
/>
```
`Code:`
```
```
`DescriptionDoc:`
```
```