Merge remote-tracking branch 'origin/main' into refactor/modal-a11y

Author: danielroe

.github/workflows/ci.yml

@@ -139,4 +139,4 @@ jobs:
         run: pnpm install
 
       - name: 🔍 Check for unused code
-        run: pnpm knip:production
+        run: pnpm knip

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally"]
+  "recommendations": ["oxc.oxc-vscode", "Vue.volar", "lokalise.i18n-ally", "antfu.unocss"]
 }

app/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
 import { useEventListener } from '@vueuse/core'
+import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,12 +40,7 @@ if (import.meta.server) {
 // "/" focuses search or navigates to search page
 // "?" highlights all keyboard shortcut elements
 function handleGlobalKeydown(e: KeyboardEvent) {
-  const target = e.target as HTMLElement
-
-  const isEditableTarget =
-    target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
-
-  if (isEditableTarget) return
+  if (isEditableElement(e.target)) return
 
   if (e.key === '/') {
     e.preventDefault()

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { isEditableElement } from '~/utils/input'
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -20,6 +22,7 @@ const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
 
 // On search page, always show search expanded on mobile
+const isOnHomePage = computed(() => route.name === 'index')
 const isOnSearchPage = computed(() => route.name === 'search')
 const isSearchExpanded = computed(() => isOnSearchPage.value || isSearchExpandedManually.value)
 
@@ -61,28 +64,38 @@ function handleSearchFocus() {
 onKeyStroke(
   ',',
   e => {
-    // Don't trigger if user is typing in an input
-    const target = e.target as HTMLElement
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return
-    }
+    if (isEditableElement(e.target)) return
 
     e.preventDefault()
     navigateTo('/settings')
   },
   { dedupe: true },
 )
+
+onKeyStroke(
+  'c',
+  e => {
+    // Allow more specific handlers to take precedence
+    if (e.defaultPrevented) return
+    if (isEditableElement(e.target)) return
+
+    e.preventDefault()
+    navigateTo('/compare')
+  },
+  { dedupe: true },
+)
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center justify-between gap-2"
+      class="container min-h-14 flex items-center gap-2"
+      :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
       <button
-        v-if="!isSearchExpanded"
+        v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
         class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
         :aria-label="$t('nav.tap_to_search')"
@@ -156,10 +169,16 @@ onKeyStroke(
         <!-- Desktop: Compare link -->
         <NuxtLink
           to="/compare"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          aria-keyshortcuts="c"
         >
-          <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
           {{ $t('nav.compare') }}
+          <kbd
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            aria-hidden="true"
+          >
+            c
+          </kbd>
         </NuxtLink>
 
         <!-- Desktop: Settings link -->

app/components/CollapsibleSection.vue

@@ -123,7 +123,7 @@ useHead({
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
     >
-      <div class="min-h-0">
+      <div class="min-h-0 min-w-0">
         <slot />
       </div>
     </div>

app/components/MarkdownText.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { decodeHtmlEntities } from '~/utils/formatters'
+
 const props = defineProps<{
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
@@ -21,8 +23,11 @@ function stripMarkdownImages(text: string): string {
 
 // Strip HTML tags and escape remaining HTML to prevent XSS
 function stripAndEscapeHtml(text: string): string {
-  // First strip markdown image badges
-  let stripped = stripMarkdownImages(text)
+  // First decode any HTML entities in the input
+  let stripped = decodeHtmlEntities(text)
+
+  // Then strip markdown image badges
+  stripped = stripMarkdownImages(stripped)
 
   // Then strip actual HTML tags (keep their text content)
   // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")

app/components/OgImage/Package.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-withDefaults(
+import { computed, toRefs } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     name: string
     version: string
+    stars: number
     downloads?: string
     license?: string
     primaryColor?: string
@@ -13,6 +16,15 @@ withDefaults(
     primaryColor: '#60a5fa',
   },
 )
+
+const { name, version, stars, downloads, license, primaryColor } = toRefs(props)
+
+const formattedStars = computed(() =>
+  Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(stars.value),
+)
 </script>
 
 <template>
@@ -88,6 +100,18 @@ withDefaults(
           </span>
         </span>
         <span v-if="license"> • {{ license }}</span>
+        <span class="flex items-center gap-2">
+          <span>•</span>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px">
+            <path
+              fill="currentColor"
+              d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1zM16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z"
+            />
+          </svg>
+          <span>
+            {{ formattedStars }}
+          </span>
+        </span>
       </div>
     </div>
 

app/components/PackageCard.vue

@@ -7,7 +7,6 @@ const props = defineProps<{
   /** Whether to show the publisher username */
   showPublisher?: boolean
   prefetch?: boolean
-  selected?: boolean
   index?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
@@ -20,17 +19,12 @@ const isExactMatch = computed(() => {
   const name = props.result.package.name.toLowerCase()
   return query === name
 })
-
-const emit = defineEmits<{
-  focus: [index: number]
-}>()
 </script>
 
 <template>
   <article
-    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+    class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'bg-bg-muted border-border-hover': selected,
       'border-accent/30 bg-accent/5': isExactMatch,
     }"
   >
@@ -50,8 +44,6 @@ const emit = defineEmits<{
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
-          @focus="index != null && emit('focus', index)"
-          @mouseenter="index != null && emit('focus', index)"
           >{{ result.package.name }}</NuxtLink
         >
         <span

app/components/PackageList.vue

@@ -29,8 +29,6 @@ const props = defineProps<{
   pageSize?: PageSize
   /** Initial page to scroll to (1-indexed) */
   initialPage?: number
-  /** Selected result index (for keyboard navigation) */
-  selectedIndex?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
   /** View mode: cards or table */
@@ -48,8 +46,6 @@ const emit = defineEmits<{
   'loadMore': []
   /** Emitted when the visible page changes */
   'pageChange': [page: number]
-  /** Emitted when a result is hovered/focused */
-  'select': [index: number]
   /** Emitted when sort option changes (table view) */
   'update:sortOption': [option: SortOption]
   /** Emitted when a keyword is clicked */
@@ -153,9 +149,7 @@ defineExpose({
         :results="displayedResults"
         :columns="columns"
         v-model:sort-option="sortOption"
-        :selected-index="selectedIndex"
         :is-loading="isLoading"
-        @select="emit('select', $event)"
         @click-keyword="emit('clickKeyword', $event)"
       />
     </template>
@@ -179,12 +173,10 @@ defineExpose({
                 :result="item as NpmSearchResult"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
-                :selected="index === (selectedIndex ?? -1)"
                 :index="index"
                 :search-query="searchQuery"
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-                @focus="emit('select', $event)"
               />
             </div>
           </template>
@@ -199,7 +191,6 @@ defineExpose({
                   :result="item"
                   :heading-level="headingLevel"
                   :show-publisher="showPublisher"
-                  :selected="index === (selectedIndex ?? -1)"
                   :index="index"
                   :search-query="searchQuery"
                 />
@@ -230,12 +221,10 @@ defineExpose({
             :result="item"
             :heading-level="headingLevel"
             :show-publisher="showPublisher"
-            :selected="index === (selectedIndex ?? -1)"
             :index="index"
             :search-query="searchQuery"
             class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
             :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-            @focus="emit('select', $event)"
           />
         </li>
       </ol>

app/components/PackagePlaygrounds.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PlaygroundLink } from '#shared/types'
+import { decodeHtmlEntities } from '~/utils/formatters'
 
 const props = defineProps<{
   links: PlaygroundLink[]
@@ -126,7 +127,7 @@ function focusMenuItem(index: number) {
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
             aria-hidden="true"
           />
-          <span class="truncate text-fg-muted">{{ firstLink.label }}</span>
+          <span class="truncate text-fg-muted">{{ decodeHtmlEntities(firstLink.label) }}</span>
         </a>
       </AppTooltip>
 
@@ -182,7 +183,7 @@ function focusMenuItem(index: number) {
                 :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"
                 aria-hidden="true"
               />
-              <span class="truncate">{{ link.label }}</span>
+              <span class="truncate">{{ decodeHtmlEntities(link.label) }}</span>
             </a>
           </AppTooltip>
         </div>