feat: page prev/next designs

[atinux]

I really like what Volta has done: https://volta.net/docs/get-started/install-with-github

https://volta.s3.fr-par.scw.cloud/Clean_Shot_2023_03_10_at_16_20_13_3e197bf3f8.mp4

We could set a default arrow icon if none is set for the previous/next page.

[bdrtsky]

it is beautiful 🤩 Not sure if current gray will look the same, tho

[electrolinux]

About the DocsPrevNext.vue, I've noted this:

In the template, it call directory() with a string (prev._path):

    <span v-if="directory(prev._path)" class="directory">
          {{ directory(prev._path) }}
    </span>

And then in the directory function, this argument is named link, and then wrongly used (at that point, link._path is always undefined):

const directory = (link: any) => {
  const nav = navDirFromPath(link._path, navigation.value || [])

So I suggest to rename the directory argument path, and use it as is in the navDirFromPath() call.

I've also noted, after doing this change on my side, that when the nav[0]._path is returned (when the path is a folder and the first page is an index.md), this is the 'raw' path, starting with '/'.

So, here my proposal for the first 5 lines of the directory() function:

  const directory = (path: string) => {
    const nav = navDirFromPath(path, navigation.value || [])

    if (nav && nav[0]) {
      return nav[0]._path.split('/').filter(Boolean).map(upperFirst).join(' ')
    } else {
      // no other changes...
    }
  }

I could certainly provide a PR for this, but if someone is working on improving this component, it could be easily integrated.

(Hope this help)

[atinux]

Thank you @electrolinux 🙏

cc @bdrtsky

[bdrtsky]

awesome @electrolinux I will use this to improve PrevNext 👍

[Tahul]

@bdrtsky ; have you included this inside #909 ? :)

[bdrtsky]

@Tahul yes