feat: improve components and add breadcrumb text humanization

- Fix NqCard icon sizing for row layout
- Update NqHeadline alignment logic based on layout
- Add text humanization for breadcrumbs

Author: onmax

packages/nimiq-vitepress-theme/src/components/NqCard.vue

@@ -36,7 +36,7 @@ const iconClasses = computed(() => {
   }
 
   if (!iconClass.value) {
-    classes.push('f-size-120/160')
+    classes.push(layout.value === 'row' ? 'f-size-48/48' : 'f-size-120/160')
     classes.push(layout.value === 'row' ? 'shrink-0' : 'absolute right--12')
   }
   else if (layout.value === 'row') {

packages/nimiq-vitepress-theme/src/components/NqHeadline.vue

@@ -6,7 +6,7 @@ const {
   title: userTitle,
   description: userDescription,
   h1 = true,
-  align = 'center',
+  align,
 } = defineProps<{
   title: string
   description: string
@@ -19,19 +19,24 @@ const { frontmatter } = useData()
 
 const title = computed(() => userTitle || frontmatter.value.title)
 const description = computed(() => userDescription || frontmatter.value.description)
+const computedAlign = computed(() => {
+  if (align)
+    return align
+  return frontmatter.value.layout === 'home' ? 'center' : 'left'
+})
 </script>
 
 <template>
   <div
     flex="~ col" nq-component="headline"
-    :class="{ 'items-start': align === 'left',
-              'items-center': align === 'center',
+    :class="{ 'items-start': computedAlign === 'left',
+              'items-center': computedAlign === 'center',
               'f-mt-2xl': !h1 }" class="nq-raw"
     f-mb-2xl
   >
     <div
       v-if="label" outline="~ 1.5 neutral-600" bg="neutral/3" px-12 py-6 rounded-full nq-label
-      :class="align === 'left' ? 'text-left' : 'text-center'"
+      :class="computedAlign === 'left' ? 'text-left' : 'text-center'"
     >
       {{ label }}
     </div>
@@ -40,7 +45,7 @@ const description = computed(() => userDescription || frontmatter.value.descript
                                         'f-mt-xs': label,
                                       },
                                       h1 ? 'f-text-4xl font-bold' : 'f-text-3xl font-semibold',
-                                      align === 'left' ? 'text-left' : 'text-center',
+                                      computedAlign === 'left' ? 'text-left' : 'text-center',
       ]" text-neutral mb-0
     >
       {{ title }}
@@ -49,7 +54,7 @@ const description = computed(() => userDescription || frontmatter.value.descript
       :class="[{
         'mt-0 f-text-2xl': h1,
         'f-mt-2xs f-text-xl': !h1,
-      }, align === 'left' ? 'text-left' : 'text-center']"
+      }, computedAlign === 'left' ? 'text-left' : 'text-center']"
     >
       {{ description }}
     </p>

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

@@ -3,6 +3,7 @@ import CopyButtonGroup from '../components/CopyButtonGroup.vue'
 import { useBreadcrumbs } from '../composables/useBreadcrumbs'
 import { useSecondarySidebar } from '../composables/useSecondarySidebar'
 import { useSourceCode } from '../composables/useSourceCode'
+import { humanizeText } from '../utils/textUtils'
 import DocNavigation from './DocNavigation.vue'
 import '../assets/code-blocks.css'
 import '../assets/typography.css'
@@ -31,7 +32,7 @@ const { showSourceCode, showCopyMarkdown, editUrl, sourceCodeUrl, sourceCodeLabe
         <ul v-if="showBreadcrumbs" flex="~ items-center gap-12">
           <li v-for="({ text, icon }, i) in breadcrumbs" :key="text" contents w-max>
             <div v-if="icon" :class="icon" />
-            <span nq-label f-text-2xs w-max>{{ text }}</span>
+            <span nq-label f-text-2xs w-max>{{ humanizeText(text) }}</span>
             <div v-if="i < breadcrumbs.length - 1" i-nimiq:chevron-right text="neutral-700 9" />
           </li>
         </ul>

packages/nimiq-vitepress-theme/src/utils/textUtils.ts

@@ -0,0 +1,22 @@
+/**
+ * Humanizes text by removing backticks and converting camelCase/snake_case to readable format with proper capitalization
+ */
+export function humanizeText(text: string): string {
+  // Remove backticks
+  let result = text.replace(/`/g, '')
+
+  // Convert camelCase to readable format
+  // Insert space before uppercase letters that follow lowercase letters
+  result = result.replace(/([a-z])([A-Z])/g, '$1 $2')
+
+  // Convert snake_case and kebab-case to readable format
+  result = result.replace(/[_-]+/g, ' ')
+
+  // Clean up multiple spaces and trim
+  result = result.replace(/\s+/g, ' ').trim()
+
+  // Capitalize each word
+  result = result.replace(/\b\w/g, char => char.toUpperCase())
+
+  return result
+}