Merge branch 'main' into accessible-accent

Author: jellydeck

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/Package/ListToolbar.vue

@@ -115,14 +115,18 @@ function getSortKeyLabelKey(key: SortKey): string {
       >
         <template v-if="showingFiltered">
           {{
-            $t('filters.count.showing_filtered', {
-              filtered: filteredCount.toLocaleString(),
-              count: totalCount.toLocaleString(),
-            })
+            $t(
+              'filters.count.showing_filtered',
+              {
+                filtered: $n(filteredCount),
+                count: $n(totalCount),
+              },
+              totalCount,
+            )
           }}
         </template>
         <template v-else>
-          {{ $t('filters.count.showing_all', { count: totalCount.toLocaleString() }) }}
+          {{ $t('filters.count.showing_all', { count: $n(totalCount) }, totalCount) }}
         </template>
       </div>
 
@@ -132,10 +136,14 @@ function getSortKeyLabelKey(key: SortKey): string {
         class="text-sm font-mono text-fg-muted"
       >
         {{
-          $t('filters.count.showing_paginated', {
-            pageSize: pageSize === 'all' ? filteredCount : pageSize,
-            count: filteredCount.toLocaleString(),
-          })
+          $t(
+            'filters.count.showing_paginated',
+            {
+              pageSize: pageSize === 'all' ? $n(filteredCount) : pageSize,
+              count: $n(filteredCount),
+            },
+            filteredCount,
+          )
         }}
       </div>
 

app/components/PaginationControls.vue

@@ -181,7 +181,7 @@ function handlePageSizeChange(event: Event) {
           $t('filters.pagination.showing', {
             start: startItem,
             end: endItem,
-            total: totalItems.toLocaleString(),
+            total: $n(totalItems),
           })
         }}
       </span>

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>

app/pages/search.vue

@@ -680,10 +680,15 @@ defineOgImageComponent('Default', {
               class="text-fg-muted text-sm mt-4 font-mono"
             >
               {{
-                $t('filters.count.showing_paginated', {
-                  pageSize: preferredPageSize === 'all' ? visibleResults.total : preferredPageSize,
-                  count: visibleResults.total.toLocaleString(),
-                })
+                $t(
+                  'filters.count.showing_paginated',
+                  {
+                    pageSize:
+                      preferredPageSize === 'all' ? $n(visibleResults.total) : preferredPageSize,
+                    count: $n(visibleResults.total),
+                  },
+                  visibleResults.total,
+                )
               }}
             </p>
           </div>

i18n/locales/ar.json

@@ -642,9 +642,9 @@
       "nav_label": "التصفح"
     },
     "count": {
-      "showing_filtered": "{filtered} من {total} حزمة",
-      "showing_all": "{total} حزمة | حزمة واحدة | حزمتان | {total} حزم | {total} حزمة | {total} حزمة",
-      "showing_paginated": "{pageSize} من {total} حزمة"
+      "showing_filtered": "{filtered} من {count} حزمة",
+      "showing_all": "{count} حزمة | حزمة واحدة | حزمتان | {count} حزم | {count} حزمة | {count} حزمة",
+      "showing_paginated": "{pageSize} من {count} حزمة"
     },
     "table": {
       "security_warning": "تحذير أمني",

i18n/locales/az.json

@@ -661,9 +661,9 @@
       "nav_label": "Səhifələmə"
     },
     "count": {
-      "showing_filtered": "{total} paketdən {filtered}",
-      "showing_all": "{total} paket",
-      "showing_paginated": "{total} paketdən {pageSize}"
+      "showing_filtered": "{count} paketdən {filtered}",
+      "showing_all": "{count} paket",
+      "showing_paginated": "{count} paketdən {pageSize}"
     },
     "table": {
       "security_warning": "Təhlükəsizlik xəbərdarlığı",

i18n/locales/es.json

@@ -668,9 +668,9 @@
       "nav_label": "Paginación"
     },
     "count": {
-      "showing_filtered": "{filtered} de {total} paquetes",
-      "showing_all": "{total} paquetes",
-      "showing_paginated": "{pageSize} de {total} paquetes"
+      "showing_filtered": "{filtered} de {count} paquetes",
+      "showing_all": "{count} paquetes",
+      "showing_paginated": "{pageSize} de {count} paquetes"
     },
     "table": {
       "security_warning": "Advertencia de seguridad",

i18n/locales/fr-FR.json

@@ -671,9 +671,9 @@
       "nav_label": "Pagination"
     },
     "count": {
-      "showing_filtered": "{filtered} sur {total} paquets",
-      "showing_all": "{total} paquets",
-      "showing_paginated": "{pageSize} sur {total} paquets"
+      "showing_filtered": "{filtered} sur {count} paquets",
+      "showing_all": "{count} paquets",
+      "showing_paginated": "{pageSize} sur {count} paquets"
     },
     "table": {
       "security_warning": "Avertissement de sécurité",