Disponibilizar a API

Assim como os arquivos Markdown, devemos disponibilizar o acesso a API através do Menu lateral.

1. Abra o arquivo custom-sidebar.js
2. Importe o arquivo sidebar.ts que foi gerado na pasta da api (outputDir)

/custom-sidebar.js

import {default as apipetstore} from "./docs/petstore/sidebar"
...
...
...
export default customsidebar;

observação

• As importações devem ficar no topo do arquivo.
• O nome da importação apipetstore pode ser qualquer palavra sem espaços ou caracteres especiais.
• O local da importação ./docs/petstore/sidebar deve ser o caminho da pasta que foi criada na geração dos arquivos MDX.

3. Vamos criar uma nova categoria para a referência

observação

O arquivo inicial normalmente tem o seguinte padrão swagger-NOMEDAAPI.info.mdx. Quando for indicar a página inicial da API (id) você poderá suprimir o .info.mdx

custom-sidebar.js

{
    type: "category",
    label: "Referência Petstore",
    link: {
      type: 'doc',
      id: 'petstore/swagger-petstore' // ID da página inicial da API
    },
    items: apipetstore, // Nome da API importada
  },

4. O arquivo deve ficar semelhante a este

/custom-sidebar.js

import {default as apipetstore} from "./docs/petstore/sidebar"

const customsidebar = [
    {
        type: "doc", 
        id: "introducao", 
        label: "Introdução" 
    },
    // ...
    // OUTROS DOCUMENTOS NO MENU LATERAL
    // ...
    {
        type: 'category',
        label: 'Referência Petstore',
        link: {
            type: 'doc',
            title: 'petstore/swagger-petstore', // ID da página inicial da API
        },
        items: apipetstore, // Nome da API importada
    }
]

export default customsidebar;

dica

Se você tiver mais de uma API, crie categorias para cada uma delas:

/custom-sidebar.js

import {default as apipetstore} from "./docs/petstore/sidebar"
import {default as apipetowner} from "./docs/petowner/sidebar"

const customsidebar = [
    {
        type: "doc", 
        id: "introducao", 
        label: "Introdução" 
    },
    // ...
    // OUTROS DOCUMENTOS NO MENU LATERAL
    // ...
    {
    type: 'category',
    label: 'Referência',
    items: [
      {
        type: 'category',
        label: 'Api petstore',
        link: {
          type: 'generated-index',
          title: 'Api petstore',
        },
        items: apipetstore,
      },
      {
        type: 'category',
        label: 'Api petowner',
        link: {
          type: 'generated-index',
          title: 'Api petowner',
        },
        items: apipetowner,
      },
    ],
  }
]

export default customsidebar;

dica

Se você tiver alguma dúvida, consulte a documentação do Menu lateral.

---

Disponibilizar o acesso no menu superior

Além do menu lateral, é possível criar um link para a sua referência no topo do site. Para isso:

1. Abra o arquivo custom-config.json
2. Procure a configuração navbar
3. Em items adicione mais um link:

custom-config-json

{
    "position": "left",
    "to": "docs/petstore", // ID da página inicial da referência
    "label": "Referência"
}

4. O arquivo deve ficar semelhante a este

custom-config-json

{
// OUTRAS CONFIGURAÇÕES
  "navbar": {
    "logo": {
      "alt": "NDL Logo",
      "src": "img/logos/logo-ndl-color.svg"
    },
    "items": [
      {
        "position": "left",
        "to": "docs/introducao",
        "label": "Docs"
      },
      {
        "position": "left",
        "to": "https://labs.ndd.tech/",
        "label": "Labs"
      },
      /*
      LINK PARA REFERÊNCIA
      */
      {
        "position": "left",
        "to": "docs/petstore/swagger-petstore",
        "label": "Referência"
      },
      /*
      LINK PARA REFERÊNCIA
      */
      {
        "position": "left",
        "to": "docs/releases/releases",
        "label": "O que há de novo?"
      },
      {
        "type": "html",
        "position": "left",
        "className": "ai_button",
        "value": "<button onclick='window.toggleChat()'>Pergunte a IA</button>"
      },
      {
        "type": "localeDropdown",
        "position": "right"
      },
      {
        "type": "docsVersionDropdown",
        "position": "right",
        "dropdownActiveClassDisabled": true
      }
    ]
  },
// OUTRAS CONFIGURAÇÕES
}