Lazy expandable feature for documentation

[hikalkan]

I didn't add sub-documents of the microservice startup template document to the navigation menu.

If you go to the microservice startup template document document, you can see it is highlighted, but there is no item under it on the menu:

However, if you open a sub-document (example: API Gateways), it is not found and highlighted on the menu as expected:

The problem is solved if I add all sub-documents to the menu. However, I don't want to it for three reasons;

1. It will make filtering the items hard on the "Filter by title" area. Many unrelated items will be found.
2. It will make the nav tree unnecessarily big, which may cause performance
3. It has no meaning when I look at the menu manually, because for that kind of documents, details are only important after I open the main document, and it has sub-documents only because it is long.

So, I offer to introduce a new feature to the documentation system: Lazy expandable.

I will give the usage example with the book store tutorial since it has already sub-items on the menu.

I want to change the related part of docs-nav.json file as shown below:

{
  "text": "Web Application Development",
  "isLazyExpandable": true, // ADDED THIS
  "path": "tutorials/book-store",  // ADDED THIS
  "items": [
    {
      "text": "Overview",
      "path": "tutorials/book-store"
    },
    {
      "text": "1: Creating the Server Side",
      "path": "tutorials/book-store/part-01.md"
    },
    {
      "text": "2: The Book List Page",
      "path": "tutorials/book-store/part-02.md"
    },
    {
      "text": "3: Creating, Updating and Deleting Books",
      "path": "tutorials/book-store/part-03.md"
    },
    {
      "text": "4: Integration Tests",
      "path": "tutorials/book-store/part-04.md"
    },
    {
      "text": "5: Authorization",
      "path": "tutorials/book-store/part-05.md"
    },
    {
      "text": "6: Authors: Domain Layer",
      "path": "tutorials/book-store/part-06.md"
    },
    {
      "text": "7: Authors: Database Integration",
      "path": "tutorials/book-store/part-07.md"
    },
    {
      "text": "8: Authors: Application Layer",
      "path": "tutorials/book-store/part-08.md"
    },
    {
      "text": "9: Authors: User Interface",
      "path": "tutorials/book-store/part-09.md"
    },
    {
      "text": "10: Book to Author Relation",
      "path": "tutorials/book-store/part-10.md"
    }
  ]
},

I just added isLazyExpandable to the root document of the tutorial. As a result on the UI, I am expecting the followings:

• Do not render sub-items (including the overall) normally.
• When I click to the root item (Web Application Development for this example), go to the defined path (tutorials/book-store in this example).
• When we are showing a page under that lazy item, render all the sub-times and highlight the matching item on the UI.
• Notice that I also added path to the root item, otherwise, you can not make it clickable and we can not know where to go. It is a kind of duplication, yes.
• Please consider a lazy item can have items which have sub-items. In that case, visiting a 3-rd level sub-item's page should expand 2-levels up lazy item.
• Please consider scenarios where we define lazy items under another lazy item (some kind of recursion).
• After doing the feature and updating the abp.io website, please also modify the docs-nav.json to make these lazy:
  • https://abp.io/docs/latest/tutorials/todo
  • https://abp.io/docs/latest/tutorials/book-store
  • https://abp.io/docs/latest/tutorials/modular-crm
  • https://abp.io/docs/latest/solution-templates/microservice (and add sub-items)
  • https://abp.io/docs/latest/modules/identity-server
  • https://abp.io/docs/latest/modules/openiddict

[ebicoglu]

I don't think this issue will fix the below situation or not, but when somebody finds a doc on google he can not go to the parent of this doc, and cannot see it on the navigation menu.

https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/buttons

and actually this document is not at the correct place which shows on google search

[hikalkan]

It is not related to this issue. But we can add tag helpers to the menu, no problem on that. Create a new issue and assign it to someone.

We can add a "Components" item under the "Overview" menu item (see below screenshot), and add all the components under that new item.

https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers

URLs can be like:

• https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/components/alerts
• https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/components/badges
• https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/components/buttons
• ...

[ebicoglu]

It is not related to this issue. But we can add tag helpers to the menu, no problem on that. Create a new issue and assign it to someone.

We can add a "Components" item under the "Overview" menu item (see below screenshot), and add all the components under that new item.

https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers

URLs can be like:

• https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/components/alerts
• https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/components/badges
• https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers/components/buttons
• ...

I create a new issue for this one #21673