Merge branch 'fix/improve-version-modal-input-alignment' of https://github.com/iiio2/npmx.dev into fix/improve-version-modal-input-alignment

Author: iiio2

app/components/CallToAction.vue

@@ -25,6 +25,18 @@ const socialLinks = computed(() => [
     ctaKey: $t('about.get_involved.follow.cta'),
   },
 ])
+
+function handleCardClick(event: MouseEvent) {
+  if ((event.target as HTMLElement).closest(':any-link')) return
+  if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
+
+  const selection = window.getSelection()
+  if (selection && selection.type === 'Range') return
+
+  const card = event.currentTarget as HTMLElement
+  const link = card.querySelector('a')
+  link?.click()
+}
 </script>
 
 <template>
@@ -37,15 +49,16 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        @click="handleCardClick"
+        class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
       >
-        <h3 class="z-1 flex gap-2">
+        <h3 class="flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ link.titleKey }}
           </span>
         </h3>
-        <p class="z-1 text-sm text-fg-muted leading-relaxed">
+        <p class="text-sm text-fg-muted leading-relaxed">
           {{ link.descriptionKey }}
         </p>
         <a
@@ -56,7 +69,6 @@ const socialLinks = computed(() => [
         >
           {{ link.ctaKey }}
           <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-          <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>
     </div>

app/composables/useNumberFormatter.ts

@@ -16,19 +16,21 @@ export const useBytesFormatter = () => {
   const decimalNumberFormatter = useNumberFormatter({
     maximumFractionDigits: 1,
   })
+  const KB = 1000
+  const MB = 1000 * 1000
 
   return {
     format: (bytes: number) => {
-      if (bytes < 1024)
+      if (bytes < KB)
         return t('package.size.b', {
           size: decimalNumberFormatter.value.format(bytes),
         })
-      if (bytes < 1024 * 1024)
+      if (bytes < MB)
         return t('package.size.kb', {
-          size: decimalNumberFormatter.value.format(bytes / 1024),
+          size: decimalNumberFormatter.value.format(bytes / KB),
         })
       return t('package.size.mb', {
-        size: decimalNumberFormatter.value.format(bytes / (1024 * 1024)),
+        size: decimalNumberFormatter.value.format(bytes / MB),
       })
     },
   }

i18n/locales/de-DE.json

@@ -362,9 +362,11 @@
       "y_axis_label": "{granularity} {facet}",
       "facet": "Facette",
       "title": "Trends",
+      "contributors_skip": "Nicht angezeigt bei Mitwirkende (hat kein GitHub-Repository): | Nicht angezeigt bei Mitwirkende (haben kein GitHub-Repository):",
       "items": {
         "downloads": "Downloads",
-        "likes": "Likes"
+        "likes": "Likes",
+        "contributors": "Mitwirkende"
       }
     },
     "downloads": {
@@ -1123,7 +1125,7 @@
     },
     "contact": {
       "title": "Feedback",
-      "p1": "Wenn du bei {app} auf eine Barriere stoßt, sag uns bitte Bescheid, indem du ein Ticket in unserem {link} eröffnest. Wir nehmen diese Meldungen ernst und werden unser Bestes tun, um sie zu beheben.",
+      "p1": "Wenn du bei {app} auf eine Barriere stößt, sag uns bitte Bescheid, indem du ein Ticket in unserem {link} eröffnest. Wir nehmen diese Meldungen ernst und werden unser Bestes tun, um sie zu beheben.",
       "link": "GitHub-Repository"
     }
   }

lunaria/files/de-DE.json

@@ -361,9 +361,11 @@
       "y_axis_label": "{granularity} {facet}",
       "facet": "Facette",
       "title": "Trends",
+      "contributors_skip": "Nicht angezeigt bei Mitwirkende (hat kein GitHub-Repository): | Nicht angezeigt bei Mitwirkende (haben kein GitHub-Repository):",
       "items": {
         "downloads": "Downloads",
-        "likes": "Likes"
+        "likes": "Likes",
+        "contributors": "Mitwirkende"
       }
     },
     "downloads": {
@@ -1122,7 +1124,7 @@
     },
     "contact": {
       "title": "Feedback",
-      "p1": "Wenn du bei {app} auf eine Barriere stoßt, sag uns bitte Bescheid, indem du ein Ticket in unserem {link} eröffnest. Wir nehmen diese Meldungen ernst und werden unser Bestes tun, um sie zu beheben.",
+      "p1": "Wenn du bei {app} auf eine Barriere stößt, sag uns bitte Bescheid, indem du ein Ticket in unserem {link} eröffnest. Wir nehmen diese Meldungen ernst und werden unser Bestes tun, um sie zu beheben.",
       "link": "GitHub-Repository"
     }
   }

package.json

@@ -59,7 +59,7 @@
     "@iconify-json/svg-spinners": "1.2.4",
     "@iconify-json/vscode-icons": "1.2.40",
     "@intlify/shared": "11.2.8",
-    "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@f07e1a3",
+    "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935",
     "@napi-rs/canvas": "0.1.92",
     "@nuxt/a11y": "1.0.0-alpha.1",
     "@nuxt/fonts": "0.13.0",

pnpm-lock.yaml

@@ -0,0 +1,46 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+import { useBytesFormatter } from '../../../../app/composables/useNumberFormatter'
+
+describe('useBytesFormatter', () => {
+  beforeEach(() => {
+    vi.stubGlobal('computed', computed)
+    vi.stubGlobal('useI18n', () => ({
+      locale: ref('en-US'),
+      t: (key: string, params?: { size?: string }) => {
+        const size = params?.size ?? ''
+
+        if (key === 'package.size.b') return `${size} B`
+        if (key === 'package.size.kb') return `${size} kB`
+        if (key === 'package.size.mb') return `${size} MB`
+
+        return key
+      },
+    }))
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('formats values below 1 kB in bytes', () => {
+    const { format } = useBytesFormatter()
+
+    expect(format(0)).toBe('0 B')
+    expect(format(999)).toBe('999 B')
+  })
+
+  it('formats kB values using decimal base (1000)', () => {
+    const { format } = useBytesFormatter()
+
+    expect(format(1000)).toBe('1 kB')
+    expect(format(8414)).toBe('8.4 kB')
+  })
+
+  it('formats MB values using decimal base (1000 * 1000)', () => {
+    const { format } = useBytesFormatter()
+
+    expect(format(1_000_000)).toBe('1 MB')
+    expect(format(1_500_000)).toBe('1.5 MB')
+  })
+})