Merge branch 'main' into fix-search

Author: gameroman

.github/workflows/mirror-tangled.yml

@@ -0,0 +1,36 @@
+name: mirror
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+
+permissions:
+  contents: read
+
+jobs:
+  mirror:
+    name: 🕸️ Mirror to Tangled
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          fetch-depth: 0
+
+      - name: 🔑 Configure SSH
+        env:
+          TANGLED_SSH_KEY: ${{ secrets.TANGLED_SSH_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$TANGLED_SSH_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -t ed25519 tangled.org >> ~/.ssh/known_hosts 2>/dev/null
+
+      - name: ⬆︎ Push to Tangled
+        run: |
+          git remote add tangled git@tangled.org:npmx.dev/npmx.dev
+          git push tangled main --force
+          git push tangled --tags --force

app/components/AppFooter.vue

@@ -23,22 +23,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>
-          <LinkBase to="https://docs.npmx.dev">
-            {{ $t('footer.docs') }}
-          </LinkBase>
-          <LinkBase to="https://repo.npmx.dev">
-            {{ $t('footer.source') }}
-          </LinkBase>
-          <LinkBase to="https://social.npmx.dev">
-            {{ $t('footer.social') }}
-          </LinkBase>
-          <LinkBase to="https://chat.npmx.dev">
-            {{ $t('footer.chat') }}
-          </LinkBase>
-
           <button
             type="button"
-            class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >
@@ -102,6 +89,18 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
+          <LinkBase to="https://docs.npmx.dev">
+            {{ $t('footer.docs') }}
+          </LinkBase>
+          <LinkBase to="https://repo.npmx.dev">
+            {{ $t('footer.source') }}
+          </LinkBase>
+          <LinkBase to="https://social.npmx.dev">
+            {{ $t('footer.social') }}
+          </LinkBase>
+          <LinkBase to="https://chat.npmx.dev">
+            {{ $t('footer.chat') }}
+          </LinkBase>
         </div>
       </div>
       <BuildEnvironment v-if="!isHome" footer />

app/components/Compare/PackageSelector.vue

@@ -92,10 +92,17 @@ function handleKeydown(e: KeyboardEvent) {
   }
 }
 
+const { start, stop } = useTimeoutFn(() => {
+  isInputFocused.value = false
+}, 200)
+
 function handleBlur() {
-  useTimeoutFn(() => {
-    isInputFocused.value = false
-  }, 200)
+  start()
+}
+
+function handleFocus() {
+  stop()
+  isInputFocused.value = true
 }
 </script>
 
@@ -151,7 +158,7 @@ function handleBlur() {
           size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
-          @focus="isInputFocused = true"
+          @focus="handleFocus"
           @blur="handleBlur"
           @keydown="handleKeydown"
         />
@@ -178,13 +185,13 @@ function handleBlur() {
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
-            <div class="text-sm text-accent italic flex items-center gap-2">
+            <span class="text-sm text-accent italic flex items-center gap-2 block">
               <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
-            </div>
-            <div class="text-xs text-fg-muted truncate mt-0.5">
+            </span>
+            <span class="text-xs text-fg-muted truncate mt-0.5">
               {{ $t('compare.no_dependency.typeahead_description') }}
-            </div>
+            </span>
           </ButtonBase>
 
           <div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
@@ -196,10 +203,10 @@ function handleBlur() {
             class="block w-full text-start"
             @click="addPackage(result.name)"
           >
-            <div class="font-mono text-sm text-fg">{{ result.name }}</div>
-            <div v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
+            <span class="font-mono text-sm text-fg block">{{ result.name }}</span>
+            <span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
               {{ result.description }}
-            </div>
+            </span>
           </ButtonBase>
         </div>
       </Transition>

app/components/Header/AccountMenu.client.vue

@@ -65,7 +65,7 @@ function openAuthModal() {
       class="border-none"
     >
       <!-- Stacked avatars when connected -->
-      <div
+      <span
         v-if="hasAnyConnection"
         class="flex items-center"
         :class="hasBothConnections ? '-space-x-2' : ''"
@@ -103,7 +103,7 @@ function openAuthModal() {
         >
           <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
-      </div>
+      </span>
 
       <!-- "connect" text when not connected -->
       <span v-if="!hasAnyConnection" class="font-mono text-sm">
@@ -163,10 +163,10 @@ function openAuthModal() {
               >
                 <span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg truncate">~{{ npmUser }}</div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</div>
-              </div>
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg truncate block">~{{ npmUser }}</span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</span>
+              </span>
               <span
                 v-if="operationCount > 0"
                 class="px-1.5 py-0.5 font-mono text-xs rounded"
@@ -206,10 +206,12 @@ function openAuthModal() {
               >
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</div>
-              </div>
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg truncate block"
+                  >@{{ atprotoUser.handle }}</span
+                >
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
+              </span>
             </button>
           </div>
 
@@ -236,16 +238,16 @@ function openAuthModal() {
                 />
                 <span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg">
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg block">
                   {{
                     isNpmConnecting
                       ? $t('account_menu.connecting')
                       : $t('account_menu.connect_npm_cli')
                   }}
-                </div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</div>
-              </div>
+                </span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
+              </span>
             </button>
 
             <button
@@ -258,12 +260,12 @@ function openAuthModal() {
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg">
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg block">
                   {{ $t('account_menu.connect_atmosphere') }}
-                </div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</div>
-              </div>
+                </span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
+              </span>
             </button>
           </div>
         </div>

app/components/Header/SearchBox.vue

@@ -15,6 +15,7 @@ const emit = defineEmits(['blur', 'focus'])
 
 const router = useRouter()
 const route = useRoute()
+const { isAlgolia } = useSearchProvider()
 
 const isSearchFocused = shallowRef(false)
 
@@ -28,11 +29,32 @@ const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-const updateUrlQuery = debounce((value: string) => {
+function updateUrlQueryImpl(value: string) {
+  // Don't navigate away from pages that use ?q for local filtering
+  if (pagesWithLocalFilter.has(route.name)) {
+    return
+  }
   if (route.name === 'search') {
     router.replace({ query: { q: value || undefined } })
   }
-}, 250)
+
+  router.push({
+    name: 'search',
+    query: {
+      q: value,
+    },
+  })
+}
+
+const updateUrlQueryNpm = debounce(updateUrlQueryImpl, 250)
+const updateUrlQueryAlgolia = debounce(updateUrlQueryImpl, 80)
+
+const updateUrlQuery = Object.assign(
+  (value: string) => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm)(value),
+  {
+    flush: () => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm).flush(),
+  },
+)
 
 watch(searchQuery, value => {
   if (route.name === 'search') {

app/components/Package/Dependencies.vue

@@ -95,15 +95,15 @@ const numberFormatter = useNumberFormatter()
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
-            <span
+            <TooltipApp
               v-if="outdatedDeps[dep]"
-              class="shrink-0"
+              class="shrink-0 p-2 -m-2"
               :class="getVersionClass(outdatedDeps[dep])"
-              :title="getOutdatedTooltip(outdatedDeps[dep], $t)"
               aria-hidden="true"
+              :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
-            </span>
+            </TooltipApp>
             <LinkBase
               v-if="getVulnerableDepInfo(dep)"
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"

app/components/Package/DeprecatedTree.vue

@@ -53,12 +53,12 @@ function getDepthStyle(depth: DependencyDepth) {
         aria-controls="deprecated-tree-details"
         @click="isExpanded = !isExpanded"
       >
-        <div class="flex items-center gap-2 min-w-0">
+        <span class="flex items-center gap-2 min-w-0 block">
           <span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
           </span>
-        </div>
+        </span>
         <span
           class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
           :class="{ 'rotate-180': isExpanded }"