DOC DOCS - DOCUMENTAÇÃO PARA NEXTJS

doc_docs é uma biblioteca Open Source para projetos NextJS, ela usa o método de roteamento de arquivos do NextJS para criar uma documentação personalizada.

*No momento que escrevo este artigo, esta lib está em fase de desenvolvimento, mas em breve vai estar com sua versão estável para ser utilizada em qualquer projeto NextJS.

PARA USAR

instale o pacote:

npm i doc_docs

Depois:

import ComponentOrDocs from "doc_docs";

Após inicie a configuração básica:

• remova o <Component {...pageProps} /> de _app;
• Adicione o <ComponentOrDocs/>;
• adicionar router para a função args;
• passar propriedades básicas para o componente:

<ComponentOrDocs Component={Component} pageProps={pageProps} route={router}/>

Exemplo:

import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <ComponentOrDocs
      Component={Component}
      pageProps={pageProps}
      route={router}
      configDirs={{
        dirs: [ "api", "other_path"],
        subDirs: { api: ["user", "auth"] },
      }}
    />
  );
}

export default MyApp;

Agora você pode criar uma pasta doc dentro da sua pasta /pages;

• dentro da pasta docs, crie um arquivo index.
• Só isso... seu doc_docs está pronto!

MENU

para configurar seu menu você pode criar pastas dentro da pasta docs;
e para exibir basta alterar o atributo configDirs na tua _app componente;

dirs: é uma pasta simples com o arquivo de índice dentro;
subDirs: é uma configuração de submenu para criar uma pasta de seleção no menu;

Exemplo:

import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <ComponentOrDocs
      Component={Component}
      pageProps={pageProps}
      route={router}
      // this is a menu configuration;
      configDirs={{
        dirs: [ "api", "other_path"],
        subDirs: { api: ["user", "auth"] },
      }}
      // end of menu configuration;
    />
  );
}

export default MyApp;

LOGO CUSTOMIZADA

para definir um logotipo personalizado que você pode usar projectLogoatributos;

este atributo aceita um JSX.Element ou uma String;
Exemplo:

import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <ComponentOrDocs
      Component={Component}
      pageProps={pageProps}
      route={router}
      configDirs={{
        dirs: [ "api", "other_path"],
        subDirs: { api: ["user", "auth"] },
      }}

      projectLogo={your custom logo here}
    />
  );
}

export default MyApp;

REDE SOCIAL

para adicionar ícones de cabeçalho com suas redes sociais, você pode usar o componente principal;

Você pode definir:

• github;
• website;
• Instagram;
• linkedin;
• discord;
• Facebook;

Exemplo:

import React from "react";
import ComponentOrDocs from "doc_docs";
import "./_app.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <ComponentOrDocs
      Component={Component}
      pageProps={pageProps}
      route={router}
      configDirs={{
        dirs: [ "api", "other_path"],
        subDirs: { api: ["user", "auth"] },
      }}

      // example social networks:

      github="https://github.com/your_nickname"
      website="https://your_website.com"
      instagram="https://instagram.com/your_username"
    />
  );
}

export default MyApp;

COMPONENTES PRÉ-CONSTRUÍDOS

import { name_of_component } from "doc_docs/components"

Componentes:

TitleDoc:

Título para documentos de página!

<TitleDoc title="Your Title" />

ComponentDoc:
Com este componente você pode explicar e demonstrar um componente seu...

• options e description são opcionais;
• options configura uma tabela com as props do componente;

 <ComponentDoc
        background="grey"
        element={<h1>Here you can expose Components</h1>}
        options={[
          { prop: "OnClick", default: "none", accept: "() => void" },
          { prop: "children", default: "none", accept: "string" },
        ]}
        description={
          "optional description for this"
        }
      />

Code:
Para você adicionar um bloco expondo seu código sem executá-lo

<Code
  language="name_of_language"
  code={Your code here} />

DescriptionDoc:
Bloco de descrição para paragrafos...

<DescriptionDoc
    description="this is a description example" />