Add a Docs Page

This is guide on how to add new docs page to website.

Add documentation in folder

With Visual Studi Code find and open right folder with your documentation website you want to edit.

How to open working folder

For information on how to open working folder please go to Visual Studio Code instructions

In documentation please make sure you create right file structure. Necessary you need at least 1 folder and 1 file to set up new Docs page on your website.

First MY IJF folder and file

datastat-internal # root directory of your site
├── .docusaurus
├── blog
├── docs
├── documentation
├── ijf_admin
├── ijf_my  # MY IJF folder
│   └── intro.md # you can name your intro file as you want.
├── node_modules
├── src
├── static
├── docusaurus.config.js
├── siebars.js
├── ...  

Later you can create a folder structure as displayed below:

My IJF folder structure example

datastat-internal # root directory of your site
├── .docusaurus
├── blog
├── docs
├── documentation
├── ijf_admin
├── ijf_my  # MY IJF folder
│   └── intro.md
│   └── About
|       └── _category_.js
|       └── about.md
|   └── Following
|       └── _category_.js
|       └── following.md
|   └── user-guides
|       └── _category_.js
|       └── delegation-management.md
|       └── imgs
|           └── example.jpg
|           └── ...
├── node_modules
├── src
├── static
├── docusaurus.config.js
├── siebars.js
├── ...

How to add new Docs page to Navbar

When you have added new folder and intro file you have to edit docusaurus.config.js in your root directory of your site

Where to find docusaurus.config.js

datastat-internal # root directory of your site
├── .docusaurus
├── blog
├── docs
├── documentation
├── ijf_admin
├── ijf_my  # MY IJF folder
│   └── intro.md # you can name your intro file as you want.
├── node_modules
├── src
├── static
├── docusaurus.config.js
├── siebars.js
├── ...  

If you are creating additional Docs page for the first time on you have to find "Presets" part in your code.

Under "presets" part you have to add a "plugins" part with next code

Plugins example for MY IJF

plugins: [
    [
      '@docusaurus/plugin-content-docs',
      {
          id: `ijf_my`,
          path: `ijf_my`,
          routeBasePath: `ijf_my`,
          sidebarPath: require.resolve('./sidebars.js'), 
        },
    ],
  ],

And add connection to Navbar on top. You can find navbar settings in themeconfig settings in docusaurus.config.js

Add connection to navbar

themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: 'DATASTAT',
        logo: {
          alt: 'My Site Logo',
          src: 'img/Datastat_logo_square_small.jpg',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: 'tutorialSidebar',
            position: 'left',
            label: 'JIRA',
          },
         {
            to: '/ijf_my/intro',
            position: 'left',
            label: 'MY IJF',
            activeBaseRegex: `/ijf_my/`,
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],

Make sure when configurating "to:" connection, insert first .md file in folder to which you are making connection.

After editing docusaurus.config.js

After editing docusaurus.config.js kill terminal in Visual Studio Code, close development page http://localhost:3000/ and restart development page with npm start

docusaurus.config.js has some problems with updating so restarting helps to solve the problem