feat: add text humanization to navigation

Author: onmax

packages/nimiq-vitepress-theme/src/layout/DocNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useDocNavigation } from '../composables/useDocNavigation'
+import { humanizeText } from '../utils/textUtils'
 
 const { navigation, showNavigation } = useDocNavigation()
 </script>
@@ -8,12 +9,12 @@ const { navigation, showNavigation } = useDocNavigation()
   <nav v-if="showNavigation && (navigation.prev || navigation.next)" grid="~ cols-1 md:cols-2 gap-8" class="nq-raw">
     <a v-if="navigation.prev" col-1 :href="navigation.prev.link" nq-hoverable h-max group gap-2>
       <div i-nimiq:arrow-left size-14 shrink-0 op="60 group-hocus:80" transition-opacity />
-      <p f-text-xl>{{ navigation.prev.text }}</p>
+      <p f-text-xl>{{ humanizeText(navigation.prev.text) }}</p>
     </a>
 
     <a v-if="navigation.next" md:col-2 :href="navigation.next.link" nq-hoverable items-end h-max group gap-2>
       <div i-nimiq:arrow-right size-14 shrink-0 op="60 group-hocus:80" transition-opacity />
-      <p f-text-xl>{{ navigation.next.text }}</p>
+      <p f-text-xl>{{ humanizeText(navigation.next.text) }}</p>
     </a>
   </nav>
 </template>

packages/nimiq-vitepress-theme/src/layout/Sidebar.vue

@@ -9,6 +9,7 @@ import { useCurrentModule } from '../composables/useCurrentModule'
 import { useVisibleModules } from '../composables/useVisibleModules'
 import { renderMarkdown } from '../lib/html-renderer'
 import { isActive } from '../lib/route'
+import { humanizeText } from '../utils/textUtils'
 import CommandMenu from './CommandMenu.vue'
 import Logo from './Logo.vue'
 import ModulePill from './ModulePill.vue'
@@ -107,7 +108,7 @@ function openAccordionInitialState(items: NimiqVitepressSidebar['items'][number]
         <a :href="withBase(link!)" relative class="sidebar-item" :data-state="isActive(page.relativePath, link) ? 'active' : ''" reka-active:font-bold transition-all reka-active:text-blue reka-active:bg-blue-400 group :class="{ 'nq-arrow after:op-70 hocus:after:op-100': isExternalLink(link!) || isCrossModuleLink(link!) }" transition-opacity :target="isExternalLink(link!) ? '_blank' : undefined">
           <div v-if="isActive(page.relativePath, link)" aria-hidden absolute inset-y-0 bg-blue rounded-full w-2 z-2 transition-colors :class="isInAccordion ? 'left-12' : 'left-0'" />
           <div v-if="icon" :class="icon" f-size-xs text="neutral reka-active:blue" op="70 group-hocus:100" transition-opacity mr-8 shrink-0 />
-          <span flex-1 v-html="renderMarkdown(text)" />
+          <span flex-1 v-html="renderMarkdown(humanizeText(text))" />
         </a>
       </DefineSidebarItem>
       <ScrollAreaRoot relative of-hidden bg-neutral-100 var:scrollbar-size:10px as="nav" flex-1 f-px="sm md:xs" v-bind="$attrs">
@@ -123,7 +124,7 @@ function openAccordionInitialState(items: NimiqVitepressSidebar['items'][number]
                   <CollapsibleTrigger class="sidebar-item" group pr-12 pl-8 bg-transparent>
                     <div v-if="subitem.icon" :class="subitem.icon" f-text-sm text-neutral op="70 group-hocus:100" mr-8 />
                     <div :class="subitem.text" op="80 group-hocus:100" transition-opacity />
-                    <span flex-1 text-left v-html="subitem.text" />
+                    <span flex-1 text-left v-html="renderMarkdown(humanizeText(subitem.text))" />
                     <div
                       i-nimiq:chevron-down aria-hidden text="9 neutral-700 group-hocus:neutral-800"
                       transition="[color,transform]" :class="{ 'rotate--90': !open }"