Merge remote-tracking branch 'origin/main' into feat/201

Author: danielroe

CONTRIBUTING.md

@@ -105,6 +105,12 @@ The connector will check your npm authentication, generate a connection token, a
 
 ## Code style
 
+When committing changes, try to keep an eye out for unintended formatting updates. These can make a pull request look noisier than it really is and slow down the review process. Sometimes IDEs automatically reformat files on save, which can unintentionally introduce extra changes.
+
+To help with this, the project uses `oxfmt` to handle formatting via a pre-commit hook. The hook will automatically reformat files when needed. If something can’t be fixed automatically, it will let you know what needs to be updated before you can commit.
+
+If you want to get ahead of any formatting issues, you can also run `pnpm lint:fix` before committing to fix formatting across the whole project.
+
 ### Typescript
 
 - We care about good types – never cast things to `any` 💪

app/components/AppHeader.vue

@@ -30,6 +30,19 @@ function expandMobileSearch() {
   })
 }
 
+watch(
+  isOnSearchPage,
+  visible => {
+    if (!visible) return
+
+    searchBoxRef.value?.focus()
+    nextTick(() => {
+      searchBoxRef.value?.focus()
+    })
+  },
+  { flush: 'sync' },
+)
+
 function handleSearchBlur() {
   showFullSearch.value = false
   // Collapse expanded search on mobile after blur (with delay for click handling)

app/components/PackageSkeleton.vue

@@ -150,7 +150,7 @@
       </div>
 
       <!-- Sidebar: order-1 lg:order-2 space-y-8 -->
-      <aside class="order-1 lg:order-2 space-y-8">
+      <div class="order-1 lg:order-2 space-y-8">
         <!-- Maintainers -->
         <section>
           <h2
@@ -249,7 +249,7 @@
             </li>
           </ul>
         </section>
-      </aside>
+      </div>
     </div>
   </article>
 </template>

app/components/SearchBox.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
-const isMobile = useIsMobile()
-
 withDefaults(
   defineProps<{
     inputClass?: string
@@ -107,7 +105,6 @@ defineExpose({ focus })
           <input
             id="header-search"
             ref="inputRef"
-            :autofocus="!isMobile"
             v-model="searchQuery"
             type="search"
             name="q"

app/pages/[...package].vue

@@ -936,7 +936,7 @@ function handleClick(event: MouseEvent) {
           </a>
         </h2>
         <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-        <div
+        <article
           v-if="readmeData?.html"
           class="readme-content prose prose-invert max-w-[70ch]"
           v-html="readmeData.html"
@@ -952,7 +952,7 @@ function handleClick(event: MouseEvent) {
 
       <div class="area-sidebar">
         <!-- Sidebar -->
-        <aside class="sticky top-20 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
+        <div class="sticky top-20 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
           <!-- Maintainers (with admin actions when connected) -->
           <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
 
@@ -1060,7 +1060,7 @@ function handleClick(event: MouseEvent) {
             :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
             :optional-dependencies="displayVersion.optionalDependencies"
           />
-        </aside>
+        </div>
       </div>
     </article>
 

app/pages/index.vue

@@ -1,25 +1,26 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
-const router = useRouter()
 const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
-const isMobile = useIsMobile()
-
-const debouncedNavigate = debounce(() => {
-  router.push({
+async function search() {
+  const query = searchQuery.value.trim()
+  await navigateTo({
     path: '/search',
-    query: searchQuery.value.trim() ? { q: searchQuery.value.trim() } : undefined,
+    query: query ? { q: query } : undefined,
   })
-}, 250)
-
-function handleSearch() {
-  // If input is empty, navigate immediately (no need to debounce)
-  return searchQuery.value.trim() ? debouncedNavigate() : router.push('/search')
+  const newQuery = searchQuery.value.trim()
+  if (newQuery !== query) {
+    await search()
+  }
 }
 
+const handleInput = isTouchDevice()
+  ? search
+  : debounce(search, 250, { leading: true, trailing: true })
+
 useSeoMeta({
   title: () => $t('seo.home.title'),
   description: () => $t('seo.home.description'),
@@ -64,7 +65,7 @@ defineOgImageComponent('Default', {
         class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
         style="animation-delay: 0.2s"
       >
-        <form method="GET" action="/search" class="relative" @submit.prevent="handleSearch">
+        <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
           <label for="home-search" class="sr-only">
             {{ $t('search.label') }}
           </label>
@@ -89,11 +90,11 @@ defineOgImageComponent('Default', {
                 v-model="searchQuery"
                 type="search"
                 name="q"
+                autofocus
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
-                :autofocus="!isMobile"
                 class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                @input="handleSearch"
+                @input="handleInput"
               />
 
               <button

app/utils/responsive.ts

@@ -0,0 +1,7 @@
+/** @public */
+export function isTouchDevice() {
+  if (import.meta.server) {
+    return false
+  }
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+}

config/i18n.ts

@@ -134,11 +134,15 @@ const locales: (LocaleObjectData | (Omit<LocaleObjectData, 'code'> & { code: str
     file: 'de-DE.json',
     name: 'Deutsch',
   },
-  /*{
-      code: 'hu-HU',
-      file: 'hu-HU.json',
-      name: 'Magyar',
-    },*/
+  {
+    code: 'hu-HU',
+    file: 'hu-HU.json',
+    name: 'Magyar',
+    pluralRule: (choice: number) => {
+      const name = new Intl.PluralRules('hu-HU').select(choice)
+      return { zero: 0, one: 0, two: 1, few: 1, many: 1, other: 1 }[name]
+    },
+  },
   {
     code: 'zh-CN',
     file: 'zh-CN.json',

i18n/locales/de-DE.json

@@ -5,6 +5,9 @@
       "description": "Ein besserer Browser für die npm Registry. Pakete suchen, durchstöbern und erkunden mit einer modernen Oberfläche."
     }
   },
+  "version": "Version",
+  "built_at": "gebaut",
+  "alt_logo": "npmx Logo",
   "tagline": "ein besserer Browser für die npm Registry",
   "non_affiliation_disclaimer": "nicht verbunden mit npm, Inc.",
   "trademark_disclaimer": "npm ist eine eingetragene Marke von npm, Inc. Diese Seite ist nicht mit npm, Inc. verbunden.",
@@ -111,6 +114,7 @@
     "not_latest": "(nicht aktuell)",
     "verified_provenance": "Verifizierte Herkunft",
     "view_permalink": "Permalink für diese Version anzeigen",
+    "copy_name": "Paketnamen kopieren",
     "deprecation": {
       "package": "Dieses Paket ist veraltet.",
       "version": "Diese Version ist veraltet.",
@@ -559,7 +563,8 @@
     "markdown_view_mode": {
       "preview": "Vorschau",
       "code": "Code"
-    }
+    },
+    "file_path": "Dateipfade"
   },
   "badges": {
     "provenance": {

i18n/locales/en.json

@@ -571,7 +571,8 @@
     "markdown_view_mode": {
       "preview": "preview",
       "code": "code"
-    }
+    },
+    "file_path": "File path"
   },
   "badges": {
     "provenance": {