feat: add clickable licences

Author: danielroe

app/components/LicenseDisplay.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { parseLicenseExpression } from '#shared/utils/spdx'
+
+const props = defineProps<{
+  license: string
+}>()
+
+const tokens = computed(() => parseLicenseExpression(props.license))
+
+const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
+</script>
+
+<template>
+  <span class="inline-flex items-baseline gap-x-1.5 flex-wrap gap-y-0.5">
+    <template v-for="(token, i) in tokens" :key="i">
+      <a
+        v-if="token.type === 'license' && token.url"
+        :href="token.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link-subtle"
+        title="View license text on SPDX"
+      >
+        {{ token.value }}
+      </a>
+      <span v-else-if="token.type === 'license'">{{ token.value }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-[0.65em]">{{ token.value }}</span>
+    </template>
+    <span
+      v-if="hasAnyValidLicense"
+      class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0"
+      aria-hidden="true"
+    />
+  </span>
+</template>

app/pages/[...package].vue

@@ -483,7 +483,7 @@ defineOgImageComponent('Package', {
           <div v-if="pkg.license" class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">License</dt>
             <dd class="font-mono text-sm text-fg">
-              {{ pkg.license }}
+              <LicenseDisplay :license="pkg.license" />
             </dd>
           </div>
 

package.json

@@ -74,6 +74,7 @@
     "oxlint": "^1.41.0",
     "playwright-core": "1.57.0",
     "simple-git-hooks": "2.13.1",
+    "spdx-license-list": "^6.11.0",
     "std-env": "3.10.0",
     "typescript": "5.9.3",
     "unocss": "66.6.0",

pnpm-lock.yaml

@@ -0,0 +1,75 @@
+import spdxLicenseIds from 'spdx-license-list/spdx-simple.json'
+
+/**
+ * Set of all valid SPDX license identifiers.
+ * Sourced from spdx-license-list package which stays up-to-date with
+ * the official SPDX license list.
+ *
+ * @see https://spdx.org/licenses/
+ */
+export const SPDX_LICENSE_IDS: Set<string> = new Set(spdxLicenseIds)
+
+/**
+ * Check if a license identifier is a valid SPDX license.
+ * @see https://spdx.org/licenses/
+ */
+export function isValidSpdxLicense(license: string): boolean {
+  return SPDX_LICENSE_IDS.has(license)
+}
+
+/**
+ * Generate an SPDX license URL for the given license identifier.
+ * Returns null if the license is not a valid SPDX identifier.
+ * @see https://spdx.org/licenses/
+ */
+export function getSpdxLicenseUrl(license: string | undefined): string | null {
+  if (!license) return null
+  const trimmed = license.trim()
+  if (!SPDX_LICENSE_IDS.has(trimmed)) return null
+  return `https://spdx.org/licenses/${trimmed}.html`
+}
+
+/**
+ * Token types for parsed license expressions
+ */
+export interface LicenseToken {
+  type: 'license' | 'operator'
+  value: string
+  url?: string
+}
+
+/**
+ * Parse an SPDX license expression into tokens.
+ * Handles compound expressions like "MIT OR Apache-2.0", "(MIT AND Zlib)".
+ * Strips parentheses for cleaner display.
+ *
+ * @example
+ * parseLicenseExpression('MIT') // [{ type: 'license', value: 'MIT', url: '...' }]
+ * parseLicenseExpression('MIT OR Apache-2.0')
+ * // [{ type: 'license', value: 'MIT', url: '...' }, { type: 'operator', value: 'OR' }, { type: 'license', value: 'Apache-2.0', url: '...' }]
+ */
+export function parseLicenseExpression(expression: string): LicenseToken[] {
+  const result: LicenseToken[] = []
+  // Match operators first (OR, AND, WITH), then license IDs - ignore parentheses
+  // Operators must be checked first to avoid being captured as license identifiers
+  const pattern = /\b(OR|AND|WITH)\b|([A-Za-z0-9.\-+]+)/g
+  let match
+
+  while ((match = pattern.exec(expression)) !== null) {
+    if (match[1]) {
+      // Operator (OR, AND, WITH)
+      result.push({ type: 'operator', value: match[1] })
+    } else if (match[2]) {
+      // License identifier
+      const id = match[2]
+      const isValid = isValidSpdxLicense(id)
+      result.push({
+        type: 'license',
+        value: id,
+        url: isValid ? `https://spdx.org/licenses/${id}.html` : undefined,
+      })
+    }
+  }
+
+  return result
+}

shared/utils/spdx.ts

@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import LicenseDisplay from '~/components/LicenseDisplay.vue'
+
+describe('LicenseDisplay', () => {
+  describe('single license', () => {
+    it('renders a valid SPDX license as a link', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'MIT' },
+      })
+      const link = component.find('a')
+      expect(link.exists()).toBe(true)
+      expect(link.attributes('href')).toBe('https://spdx.org/licenses/MIT.html')
+      expect(link.text()).toBe('MIT')
+    })
+
+    it('renders an invalid license as plain text', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'CustomLicense' },
+      })
+      const link = component.find('a')
+      expect(link.exists()).toBe(false)
+      expect(component.text()).toContain('CustomLicense')
+    })
+
+    it('shows scales icon for valid license', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'MIT' },
+      })
+      const icon = component.find('.i-carbon-scales')
+      expect(icon.exists()).toBe(true)
+    })
+
+    it('does not show scales icon for invalid license', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'CustomLicense' },
+      })
+      const icon = component.find('.i-carbon-scales')
+      expect(icon.exists()).toBe(false)
+    })
+  })
+
+  describe('compound expressions with OR', () => {
+    it('renders "MIT OR Apache-2.0" with both licenses linked', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'MIT OR Apache-2.0' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(2)
+      expect(links[0]?.attributes('href')).toBe('https://spdx.org/licenses/MIT.html')
+      expect(links[1]?.attributes('href')).toBe('https://spdx.org/licenses/Apache-2.0.html')
+      // Operator is rendered lowercase
+      expect(component.text().toLowerCase()).toContain('or')
+    })
+
+    it('renders triple license choice correctly', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: '(BSD-2-Clause OR MIT OR Apache-2.0)' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(3)
+    })
+  })
+
+  describe('compound expressions with AND', () => {
+    it('renders "MIT AND Zlib" with both licenses linked', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'MIT AND Zlib' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(2)
+      expect(links[0]?.attributes('href')).toBe('https://spdx.org/licenses/MIT.html')
+      expect(links[1]?.attributes('href')).toBe('https://spdx.org/licenses/Zlib.html')
+      // Operator is rendered lowercase
+      expect(component.text().toLowerCase()).toContain('and')
+    })
+  })
+
+  describe('compound expressions with WITH', () => {
+    it('renders license with exception', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'GPL-2.0-only WITH Classpath-exception-2.0' },
+      })
+      // GPL-2.0-only is a valid license, Classpath-exception-2.0 is an exception (not a license)
+      const links = component.findAll('a')
+      expect(links.length).toBeGreaterThanOrEqual(1)
+      expect(links[0]?.attributes('href')).toBe('https://spdx.org/licenses/GPL-2.0-only.html')
+      // Operator is rendered lowercase
+      expect(component.text().toLowerCase()).toContain('with')
+    })
+  })
+
+  describe('mixed valid and invalid', () => {
+    it('renders valid licenses as links and invalid as text', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'MIT OR CustomLicense' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(1)
+      expect(links[0]?.text()).toBe('MIT')
+      expect(component.text()).toContain('CustomLicense')
+    })
+
+    it('shows scales icon when at least one license is valid', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: 'CustomLicense OR MIT' },
+      })
+      const icon = component.find('.i-carbon-scales')
+      expect(icon.exists()).toBe(true)
+    })
+  })
+
+  describe('parentheses', () => {
+    it('strips parentheses from expressions for cleaner display', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: '(MIT OR Apache-2.0)' },
+      })
+      // Parentheses are stripped for cleaner display
+      expect(component.text()).not.toContain('(')
+      expect(component.text()).not.toContain(')')
+      const links = component.findAll('a')
+      expect(links).toHaveLength(2)
+    })
+  })
+
+  describe('real-world examples', () => {
+    it('handles rc package license: (BSD-2-Clause OR MIT OR Apache-2.0)', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: '(BSD-2-Clause OR MIT OR Apache-2.0)' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(3)
+      expect(links.map(l => l.text())).toEqual(['BSD-2-Clause', 'MIT', 'Apache-2.0'])
+    })
+
+    it('handles jszip package license: (MIT OR GPL-3.0-or-later)', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: '(MIT OR GPL-3.0-or-later)' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(2)
+    })
+
+    it('handles pako package license: (MIT AND Zlib)', async () => {
+      const component = await mountSuspended(LicenseDisplay, {
+        props: { license: '(MIT AND Zlib)' },
+      })
+      const links = component.findAll('a')
+      expect(links).toHaveLength(2)
+    })
+  })
+})

test/nuxt/components/LicenseDisplay.spec.ts

@@ -2,6 +2,36 @@ import { describe, expect, it } from 'vitest'
 
 import { buildScopeTeam } from '../../app/utils/npm'
 import { validateScopeTeam } from '../../cli/src/npm-client'
+import { getSpdxLicenseUrl } from '../../shared/utils/spdx'
+
+describe('getSpdxLicenseUrl', () => {
+  it('returns SPDX URL for valid license identifiers', () => {
+    expect(getSpdxLicenseUrl('MIT')).toBe('https://spdx.org/licenses/MIT.html')
+    expect(getSpdxLicenseUrl('ISC')).toBe('https://spdx.org/licenses/ISC.html')
+    expect(getSpdxLicenseUrl('Apache-2.0')).toBe('https://spdx.org/licenses/Apache-2.0.html')
+    expect(getSpdxLicenseUrl('GPL-3.0-only')).toBe('https://spdx.org/licenses/GPL-3.0-only.html')
+    expect(getSpdxLicenseUrl('BSD-2-Clause')).toBe('https://spdx.org/licenses/BSD-2-Clause.html')
+    expect(getSpdxLicenseUrl('GPL-3.0+')).toBe('https://spdx.org/licenses/GPL-3.0+.html')
+  })
+
+  it('trims whitespace from license identifiers', () => {
+    expect(getSpdxLicenseUrl('  MIT  ')).toBe('https://spdx.org/licenses/MIT.html')
+  })
+
+  it('returns null for undefined or empty', () => {
+    expect(getSpdxLicenseUrl(undefined)).toBeNull()
+    expect(getSpdxLicenseUrl('')).toBeNull()
+    expect(getSpdxLicenseUrl('   ')).toBeNull()
+  })
+
+  it('returns null for invalid license identifiers', () => {
+    // Compound expressions are not in the SPDX list
+    expect(getSpdxLicenseUrl('MIT OR Apache-2.0')).toBeNull()
+    // Non-existent licenses
+    expect(getSpdxLicenseUrl('INVALID-LICENSE')).toBeNull()
+    expect(getSpdxLicenseUrl('Custom')).toBeNull()
+  })
+})
 
 describe('buildScopeTeam', () => {
   it('constructs scope:team with @ prefix', () => {