feat: NqLinks with auto icons, first blue rest secondary

Author: onmax

docs/vitepress-theme/components/links.md

@@ -11,13 +11,13 @@ A component for displaying external links with consistent styling. Perfect for s
 
 ### NqLinksItem Interface
 
-| Name      | Type     | Default             | Description                                                              |
-| --------- | -------- | ------------------- | ------------------------------------------------------------------------ |
-| `label`   | `string` | required            | The text displayed for the link                                          |
-| `href`    | `string` | required            | The URL the link points to                                               |
-| `icon`    | `string` | `undefined`         | Optional icon class (e.g., `i-nimiq:external`)                           |
-| `variant` | `string` | `nq-pill-secondary` | Pill variant: `blue`, `gold`, `green`, `secondary`, `tertiary`, `orange` |
-| `title`   | `string` | `undefined`         | Optional tooltip text for accessibility                                  |
+| Name      | Type              | Default             | Description                                                                                              |
+| --------- | ----------------- | ------------------- | -------------------------------------------------------------------------------------------------------- |
+| `label`   | `string`          | required            | The text displayed for the link                                                                          |
+| `href`    | `string`          | required            | The URL the link points to                                                                               |
+| `icon`    | `string \| false` | auto-detected       | Icon class or `false` to disable. Auto-detects icons for common domains (GitHub, Discord, Twitter, etc.) |
+| `variant` | `string`          | first: `nq-pill-blue`, rest: `nq-pill-secondary` | Pill variant: `blue`, `gold`, `green`, `secondary`, `tertiary`, `orange`                                 |
+| `title`   | `string`          | `undefined`         | Optional tooltip text for accessibility                                                                  |
 
 All links automatically open in a new tab with `target="_blank"` and include `rel="noopener noreferrer"` for security.
 
@@ -130,6 +130,46 @@ Use different pill variants to color-code your links.
 
 </ComponentPreview>
 
+### Auto-Detected Domain Icons
+
+Links automatically get appropriate icons based on their domain. Set `icon: false` to disable.
+
+<ComponentPreview lang="vue">
+
+<NqPlayground>
+<NqLinks :items="[
+  {
+    label: 'GitHub Repository',
+    href: 'https://github.com/nimiq/ui'
+  },
+  {
+    label: 'Discord Community',
+    href: 'https://discord.gg/nimiq'
+  },
+  {
+    label: 'Follow on Twitter',
+    href: 'https://twitter.com/nimiq'
+  },
+  {
+    label: 'No Icon Link',
+    href: 'https://example.com',
+    icon: false
+  }
+]" />
+</NqPlayground>
+
+</ComponentPreview>
+
+#### Supported Domains
+
+The following domains are automatically detected and assigned icons:
+
+- **Nimiq**: `nimiq.com` → `i-nimiq:logos-nimiq-mono`
+- **GitHub**: `github.com` → `i-nimiq:logos-github-mono`
+- **Discord**: `discord.gg`, `discord.com` → `i-nimiq:logos-discord-mono`
+- **Twitter/X**: `twitter.com`, `x.com` → `i-nimiq:logos-twitter-mono`
+- **Telegram**: `telegram.org`, `t.me` → `i-nimiq:logos-telegram-mono`
+
 ## Usage Notes
 
 - Use either `item` for a single link or `items` for multiple links, not both

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

@@ -4,20 +4,52 @@ import { computed } from 'vue'
 interface NqLinksItem {
   label: string
   href: string
-  icon?: string
+  icon?: string | false
   variant?: `nq-pill-${'blue' | 'gold' | 'green' | 'secondary' | 'tertiary' | 'orange'}`
   title?: string
 }
 
 const props = defineProps<{ item?: NqLinksItem, items?: NqLinksItem[] }>()
 
-const items = computed(() => props.items?.length ? props.items : props.item ? [props.item] : [])
+const domainIconMap: Record<string, string> = {
+  'nimiq.com': 'i-nimiq:logos-nimiq-mono',
+  'github.com': 'i-nimiq:logos-github-mono',
+  'discord.gg': 'i-nimiq:logos-discord-mono',
+  'discord.com': 'i-nimiq:logos-discord-mono',
+  'twitter.com': 'i-nimiq:logos-twitter-mono',
+  'x.com': 'i-nimiq:logos-twitter-mono',
+  'telegram.org': 'i-nimiq:logos-telegram-mono',
+  't.me': 'i-nimiq:logos-telegram-mono',
+}
+
+const items = computed(() => {
+  const itemsList = props.items?.length ? props.items : props.item ? [props.item] : []
+
+  return itemsList.map((item) => {
+    let detectedIcon: string | undefined
+
+    if (item.icon !== false && !item.icon) {
+      // Auto-detect icon based on domain
+      for (const [domain, icon] of Object.entries(domainIconMap)) {
+        if (item.href.includes(domain)) {
+          detectedIcon = icon
+          break
+        }
+      }
+    }
+
+    return {
+      ...item,
+      icon: item.icon === false ? false : item.icon || detectedIcon,
+    }
+  })
+})
 </script>
 
 <template>
   <div flex="~ gap-8" class="nq-raw">
-    <a v-for="{ label, href, icon, title = label, variant = 'nq-pill-secondary' } in items" :key="href" :href :title target="_blank" rel="noopener noreferrer" nq-arrow f-text-xs mx-0 font-semibold z-100 :class="variant">
-      <div v-if="icon" :class="icon" mr-4 />
+    <a v-for="({ label, href, icon, title = label, variant }, index) in items" :key="href" :href :title target="_blank" rel="noopener noreferrer" nq-arrow f-text-xs mx-0 font-semibold z-100 :class="variant || (index === 0 ? 'nq-pill-blue' : 'nq-pill-secondary')">
+      <div v-if="icon && icon !== false" :class="icon" mr-4 />
       {{ label }}
     </a>
   </div>