Merge remote-tracking branch 'origin/main' into feature/provenance

# Conflicts:
#	app/pages/[...package].vue

Author: danielroe

CONTRIBUTING.md

@@ -187,7 +187,7 @@ import { hasProtocol } from 'ufo'
 
 | Type             | Convention               | Example                        |
 | ---------------- | ------------------------ | ------------------------------ |
-| Vue components   | PascalCase               | `MarkdownText.vue`             |
+| Vue components   | PascalCase               | `DateTime.vue`                 |
 | Pages            | kebab-case               | `search.vue`, `[...name].vue`  |
 | Composables      | camelCase + `use` prefix | `useNpmRegistry.ts`            |
 | Server routes    | kebab-case + method      | `search.get.ts`                |

app/components/Package/Card.vue

@@ -19,6 +19,13 @@ const isExactMatch = computed(() => {
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
+
+// Process package description
+const pkgDescription = useMarkdown(() => ({
+  text: props.result.package.description ?? '',
+  plain: true,
+  packageName: props.result.package.name,
+}))
 </script>
 
 <template>
@@ -74,11 +81,8 @@ const isExactMatch = computed(() => {
     </div>
     <div class="flex justify-start items-start gap-4 sm:gap-8">
       <div class="min-w-0">
-        <p
-          v-if="result.package.description"
-          class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3"
-        >
-          <MarkdownText :text="result.package.description" plain />
+        <p v-if="pkgDescription" class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3">
+          <span v-html="pkgDescription" />
         </p>
         <div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
           <dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">

app/components/MarkdownText.vue app/composables/useMarkdown.tsapp/components/MarkdownText.vue renamed to app/composables/useMarkdown.ts

@@ -1,13 +1,17 @@
-<script setup lang="ts">
 import { decodeHtmlEntities } from '~/utils/formatters'
 
-const props = defineProps<{
+interface UseMarkdownOptions {
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
   plain?: boolean
   /** Package name to strip from the beginning of the description (if present) */
   packageName?: string
-}>()
+}
+
+/** @public */
+export function useMarkdown(options: MaybeRefOrGetter<UseMarkdownOptions>) {
+  return computed(() => parseMarkdown(toValue(options)))
+}
 
 // Strip markdown image badges from text
 function stripMarkdownImages(text: string): string {
@@ -22,7 +26,7 @@ function stripMarkdownImages(text: string): string {
 }
 
 // Strip HTML tags and escape remaining HTML to prevent XSS
-function stripAndEscapeHtml(text: string): string {
+function stripAndEscapeHtml(text: string, packageName?: string): string {
   // First decode any HTML entities in the input
   let stripped = decodeHtmlEntities(text)
 
@@ -33,13 +37,13 @@ function stripAndEscapeHtml(text: string): string {
   // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")
   stripped = stripped.replace(/<\/?[a-z][^>]*>/gi, '')
 
-  if (props.packageName) {
+  if (packageName) {
     // Trim first to handle leading/trailing whitespace from stripped HTML
     stripped = stripped.trim()
     // Collapse multiple whitespace into single space
     stripped = stripped.replace(/\s+/g, ' ')
     // Escape special regex characters in package name
-    const escapedName = props.packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const escapedName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
     // Match package name at the start, optionally followed by: space, dash, colon, hyphen, or just space
     const namePattern = new RegExp(`^${escapedName}\\s*[-:—]?\\s*`, 'i')
     stripped = stripped.replace(namePattern, '').trim()
@@ -55,11 +59,11 @@ function stripAndEscapeHtml(text: string): string {
 }
 
 // Parse simple inline markdown to HTML
-function parseMarkdown(text: string): string {
+function parseMarkdown({ text, packageName, plain }: UseMarkdownOptions): string {
   if (!text) return ''
 
   // First strip HTML tags and escape remaining HTML
-  let html = stripAndEscapeHtml(text)
+  let html = stripAndEscapeHtml(text, packageName)
 
   // Bold: **text** or __text__
   html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
@@ -78,7 +82,7 @@ function parseMarkdown(text: string): string {
   // Links: [text](url) - only allow https, mailto
   html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
     // In plain mode, just render the link text without the anchor
-    if (props.plain) {
+    if (plain) {
       return text
     }
     const decodedUrl = url.replace(/&amp;/g, '&')
@@ -94,11 +98,3 @@ function parseMarkdown(text: string): string {
 
   return html
 }
-
-const html = computed(() => parseMarkdown(props.text))
-</script>
-
-<template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <span v-html="html" />
-</template>