Merge branch 'main' into feat/display-author-profile-picture

Author: Gugustinette

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/DeprecatedTree.vue

@@ -88,7 +88,7 @@ function getDepthStyle(depth: DependencyDepth) {
                   name: 'package',
                   params: { package: [...pkg.name.split('/'), 'v', pkg.version] },
                 }"
-                class="font-mono text-sm font-medium hover:underline truncate"
+                class="font-mono text-sm font-medium hover:underline truncate py-4"
                 :class="getDepthStyle(pkg.depth).text"
               >
                 {{ pkg.name }}@{{ pkg.version }}

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/[...package].vue

@@ -122,6 +122,12 @@ const displayVersion = computed(() => {
   return pkg.value.versions[latestTag] ?? null
 })
 
+// Process package description
+const pkgDescription = useMarkdown(() => ({
+  text: pkg.value?.description ?? '',
+  packageName: pkg.value?.name,
+}))
+
 //copy package name
 const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   source: packageName,
@@ -160,6 +166,10 @@ const deprecationNotice = computed(() => {
   return { type: 'version' as const, message: displayVersion.value.deprecated }
 })
 
+const deprecationNoticeMessage = useMarkdown(() => ({
+  text: deprecationNotice.value?.message ?? '',
+}))
+
 const sizeTooltip = computed(() => {
   const chunks = [
     displayVersion.value &&
@@ -563,8 +573,8 @@ function handleClick(event: MouseEvent) {
         <div class="mb-4">
           <!-- Description container with min-height to prevent CLS -->
           <div class="max-w-2xl min-h-[4.5rem]">
-            <p v-if="pkg.description" class="text-fg-muted text-base m-0">
-              <MarkdownText :text="pkg.description" :package-name="pkg.name" />
+            <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
+              <span v-html="pkgDescription" />
             </p>
             <p v-else class="text-fg-subtle text-base m-0 italic">
               {{ $t('package.no_description') }}
@@ -713,8 +723,8 @@ function handleClick(event: MouseEvent) {
                 : $t('package.deprecation.version')
             }}
           </h2>
-          <p v-if="deprecationNotice.message" class="text-base m-0">
-            <MarkdownText :text="deprecationNotice.message" />
+          <p v-if="deprecationNoticeMessage" class="text-base m-0">
+            <span v-html="deprecationNoticeMessage" />
           </p>
           <p v-else class="text-base m-0 italic">
             {{ $t('package.deprecation.no_reason') }}
@@ -969,7 +979,7 @@ function handleClick(event: MouseEvent) {
         <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
           <a
             href="#readme"
-            class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+            class="inline-flex py-4 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
           >
             {{ $t('package.readme.title') }}
             <span

app/pages/about.vue

@@ -53,7 +53,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
 
       <section class="prose prose-invert max-w-none space-y-8">
         <div>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
             {{ $t('about.what_we_are.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-4">
@@ -82,7 +82,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
         </div>
 
         <div>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
             {{ $t('about.what_we_are_not.title') }}
           </h2>
           <ul class="space-y-3 text-fg-muted list-none p-0">
@@ -167,8 +167,8 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
         </div>
 
         <div>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-            {{ $t('about.contributors.title') }}
+          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
+            {{ contributors?.length ?? 0 }} {{ $t('about.contributors.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-6">
             {{ $t('about.contributors.description') }}
@@ -205,7 +205,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
 
         <!-- Get Involved CTAs -->
         <div>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-6">
+          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-6">
             {{ $t('about.get_involved.title') }}
           </h2>
 

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": "تحذير أمني",