Merge branch 'main' into main

Author: danielroe

.github/workflows/ci.yml

@@ -61,7 +61,7 @@ jobs:
   browser:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.57.0-noble
+      image: mcr.microsoft.com/playwright:v1.58.0-noble
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

app/assets/main.css

@@ -525,6 +525,14 @@ input[type='search'] {
   appearance: none;
 }
 
+@media screen and (max-width: 767px) {
+  input,
+  select,
+  textarea {
+    font-size: 16px !important;
+  }
+}
+
 input[type='search']::-webkit-search-decoration,
 input[type='search']::-webkit-search-cancel-button,
 input[type='search']::-webkit-search-results-button,

app/components/SearchBox.vue

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

app/composables/useIsMobile.ts

@@ -0,0 +1,10 @@
+/**
+ * Composable for detecting mobile devices using media query.
+ * Uses the same breakpoint as Tailwind's `md:` (768px).
+ *
+ * Returns `false` during SSR to avoid hydration mismatches.
+ * @public
+ */
+export function useIsMobile() {
+  return useMediaQuery('(max-width: 767px)')
+}

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

@@ -310,34 +310,6 @@ const createPackageInfo = computed(() => {
   return packageAnalysis.value.createPackage
 })
 
-// Expandable description
-const descriptionExpanded = ref(false)
-const descriptionRef = useTemplateRef('descriptionRef')
-const descriptionOverflows = ref(false)
-
-// Check if description overflows on mount/update
-function checkDescriptionOverflow() {
-  if (descriptionRef.value) {
-    const paragraph = descriptionRef.value.querySelector('p')
-    if (paragraph) {
-      // Compare scrollHeight to the fixed container height (3 lines ~= 72px)
-      descriptionOverflows.value = paragraph.scrollHeight > 72
-    }
-  }
-}
-
-watch(
-  () => pkg.value?.description,
-  () => {
-    descriptionExpanded.value = false
-    nextTick(checkDescriptionOverflow)
-  },
-)
-
-onMounted(() => {
-  nextTick(checkDescriptionOverflow)
-})
-
 // Canonical URL for this package page
 const canonicalUrl = computed(() => {
   const base = `https://npmx.dev/${packageName.value}`
@@ -517,32 +489,14 @@ function handleClick(event: MouseEvent) {
             </nav>
           </div>
 
-          <!-- Fixed height description container to prevent CLS -->
-          <div ref="descriptionRef" class="relative max-w-2xl min-h-[4.5rem]">
-            <p
-              v-if="pkg.description"
-              class="text-fg-muted text-base m-0 overflow-hidden"
-              :class="descriptionExpanded ? '' : 'max-h-[4.5rem]'"
-            >
+          <!-- 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" />
             </p>
             <p v-else class="text-fg-subtle text-base m-0 italic">
               {{ $t('package.no_description') }}
             </p>
-            <!-- Fade overlay with show more button - only when collapsed and overflowing -->
-            <div
-              v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
-              class="absolute bottom-0 inset-is-0 inset-ie-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end"
-            >
-              <button
-                type="button"
-                class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                :aria-label="$t('package.show_full_description')"
-                @click="descriptionExpanded = true"
-              >
-                {{ $t('common.show_more') }}
-              </button>
-            </div>
           </div>
 
           <!-- External links -->

app/pages/code/[...path].vue

@@ -11,7 +11,6 @@ definePageMeta({
 })
 
 const route = useRoute('code')
-const router = useRouter()
 
 // Parse package name, version, and file path from URL
 // Patterns:

app/pages/docs/[...path].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { setResponseHeader } from 'h3'
 import type { DocsResponse } from '#shared/types'
 import { assertValidPackageName } from '#shared/utils/npm'
 
@@ -38,6 +39,18 @@ const { data: pkg } = usePackage(packageName)
 
 const latestVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
 
+if (import.meta.server && !requestedVersion.value) {
+  const app = useNuxtApp()
+  const { data: pkg } = await usePackage(packageName)
+  const latest = pkg.value?.['dist-tags']?.latest
+  if (latest) {
+    setResponseHeader(useRequestEvent()!, 'Cache-Control', 'no-cache')
+    app.runWithContext(() =>
+      navigateTo('/docs/' + packageName.value + '/v/' + latest, { redirectCode: 302 }),
+    )
+  }
+}
+
 watch(
   [requestedVersion, latestVersion, packageName],
   ([version, latest, name]) => {

app/pages/index.vue

@@ -6,6 +6,8 @@ const searchQuery = ref('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
+const isMobile = useIsMobile()
+
 const debouncedNavigate = debounce(() => {
   router.push({
     path: '/search',
@@ -76,7 +78,7 @@ defineOgImageComponent('Default')
                 name="q"
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
-                autofocus
+                :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"
               />

cli/package.json

@@ -31,7 +31,7 @@
     "test:types": "tsc --noEmit"
   },
   "dependencies": {
-    "@clack/prompts": "1.0.0-alpha.9",
+    "@clack/prompts": "^1.0.0",
     "citty": "^0.2.0",
     "h3-next": "npm:h3@^2.0.1-rc.11",
     "obug": "^2.1.1",

docs/package.json

@@ -18,8 +18,8 @@
     "preview": "nuxt preview --extends docus"
   },
   "dependencies": {
-    "docus": "latest",
-    "better-sqlite3": "12.5.0",
-    "nuxt": "^4.2.2"
+    "better-sqlite3": "12.6.2",
+    "docus": "5.4.4",
+    "nuxt": "4.3.0"
   }
 }