Allow skippable menu items (routes) in prevnext plugin

[Triex]

I am trying to have certain routes/menu links not be included when you press the navigation buttons - it would be great if there was a flag to allow this. Is there some way to exclude individual ones?

I have a simple, but slightly more complicated use case; I have a disclaimer as the landing page, I want people to be able to press Next to get to the following Introduction page, but from there - they would not be able to press Previous to return.

To expand - for example if page 4 is a nested item with information that is not relevant to everyone - but is relevant to that route/heading. I may want people to skip over that page when using the navigation, but have the option to go to it from the menu if they wish.

🙏

[maxmilton]

From a UX perspective, navigation should be consistent and predictable. If the previous/next buttons were to skip over arbitrary menu items, that could be confusing to users.

For displaying content that may only be relevant to some users, I believe a different UI paradigm would be better. For clarity, contextual information is often better just that, contextual in the place where it makes sense. Something like an expandable section or an accordion within a page might be a better option.

Right now microdoc is more about presenting content to users but does little around how that content works; it will happily render out your markdown or HTML as-is and add little styling. There are currently no in-page components for pages to use (like an expandable section or accordion as I mentioned).

If that's the route you wanted to take, try https://github.com/vuejs/petite-vue or https://github.com/alpinejs/alpine to make it easy to add interactivity to HTML content.

In your specific case though, it sounds like all you want is to disable the previous button to prevent going to a landing/cover page which is the first route. For that you could do:

<script>
  var microdoc = {
    routes: [
      "page-one.md",
      "page-two.md",
      "page-three.md"
    ],
    afterRouteLoad: (route) => {
      if (route.path === '#/page-two.md') {
        document.querySelector('.microdoc-button-prev').disabled = true;
      }
    }
  }
</script>

or in a generic way:

<script>
  var microdoc = {
    routes: [
      "page-one.md",
      "page-two.md",
      "page-three.md"
    ],
    afterRouteLoad(route) {
      if (route.path === '#/' + this.routes[1]) {
        document.querySelector('.microdoc-button-prev').disabled = true;
      }
    }
  }
</script>

Also, see https://microdoc.js.org/#/configuration.md#afterrouteload.

Another option is to create your own prevnext style plugin based off https://github.com/maxmilton/microdoc/blob/master/src/plugin/prevnext.ts. The code is actually quite simple so it might be less daunting then is seems.

Lastly, consider leaving your landing page route in the navigation flow. Personally I would consider it a regular content page, so no harm in being able to go back to it!