merge: resolve conflicts with main

Author: danielroe

.github/workflows/autofix.yml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*

.github/workflows/ci.yml

@@ -8,13 +8,16 @@ on:
     branches:
       - main
 
+permissions:
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
@@ -31,7 +34,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
@@ -59,7 +62,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*

app/components/ConnectorModal.vue

@@ -6,6 +6,7 @@ const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disco
 
 const tokenInput = ref('')
 const portInput = ref('31415')
+const copied = ref(false)
 
 async function handleConnect() {
   const port = Number.parseInt(portInput.value, 10) || 31415
@@ -20,6 +21,27 @@ function handleDisconnect() {
   disconnect()
 }
 
+function copyCommand() {
+  let command = executeNpmxConnectorCommand.value
+  if (portInput.value !== '31415') {
+    command += ` --port ${portInput.value}`
+  }
+  navigator.clipboard.writeText(command)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+
+const selectedPM = useSelectedPackageManager()
+
+const executeNpmxConnectorCommand = computed(() => {
+  return getExecuteCommand({
+    packageName: 'npmx-connector',
+    packageManager: selectedPM.value,
+  })
+})
+
 // Reset form when modal opens
 watch(open, isOpen => {
   if (isOpen) {
@@ -103,9 +125,24 @@ watch(open, isOpen => {
                 Run the connector on your machine to enable admin features:
               </p>
 
-              <div class="p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm">
+              <div
+                class="flex items-center p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm"
+              >
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg ml-2">npx&nbsp;npmx-connector</span>
+                <span class="text-fg ml-2">{{ executeNpmxConnectorCommand }}</span>
+                <button
+                  type="button"
+                  :aria-label="copied ? 'Copied' : 'Copy command'"
+                  class="ml-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  @click="copyCommand"
+                >
+                  <span v-if="!copied" class="i-carbon-copy block w-5 h-5" aria-hidden="true" />
+                  <span
+                    v-else
+                    class="i-carbon-checkmark block w-5 h-5 text-green-500"
+                    aria-hidden="true"
+                  />
+                </button>
               </div>
 
               <p class="text-sm text-fg-muted">Then paste the token shown in your terminal:</p>

app/composables/useSelectedPackageManager.ts

@@ -0,0 +1,5 @@
+import { useLocalStorage } from '@vueuse/core'
+
+export function useSelectedPackageManager() {
+  return useLocalStorage<PackageManagerId>('npmx-pm', 'npm')
+}

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

@@ -192,19 +192,7 @@ function hasProvenance(version: PackumentVersion | null): boolean {
   return !!dist.attestations
 }
 
-// Persist package manager preference in localStorage
-const selectedPM = ref<PackageManagerId>('npm')
-
-onMounted(() => {
-  const stored = localStorage.getItem('npmx-pm')
-  if (stored && packageManagers.some(pm => pm.id === stored)) {
-    selectedPM.value = stored as PackageManagerId
-  }
-})
-
-watch(selectedPM, value => {
-  localStorage.setItem('npmx-pm', value)
-})
+const selectedPM = useSelectedPackageManager()
 
 const installCommandParts = computed(() => {
   if (!pkg.value) return []
@@ -296,7 +284,7 @@ defineOgImageComponent('Package', {
         <div class="mb-4">
           <div class="flex flex-row justify-between">
             <!-- Package name and version -->
-            <div class="flex items-start gap-3 mb-2 flex-wrap min-w-0">
+            <div class="flex items-start gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
               <h1
                 class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
                 :title="pkg.name"
@@ -326,7 +314,9 @@ defineOgImageComponent('Package', {
                 "
                 :title="`v${displayVersion.version}`"
               >
-                <span class="truncate max-w-32 sm:max-w-48"> v{{ displayVersion.version }} </span>
+                <span class="truncate max-w-24 sm:max-w-32 md:max-w-48">
+                  v{{ displayVersion.version }}
+                </span>
                 <span
                   v-if="
                     requestedVersion &&
@@ -396,7 +386,7 @@ defineOgImageComponent('Package', {
         </div>
 
         <!-- Stats grid -->
-        <dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6">
+        <dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 sm:gap-4 mt-4 sm:mt-6">
           <div v-if="pkg.license" class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">License</dt>
             <dd class="font-mono text-sm text-fg">
@@ -439,7 +429,7 @@ defineOgImageComponent('Package', {
             </dd>
           </div>
 
-          <div class="space-y-1 col-span-2">
+          <div class="space-y-1 sm:col-span-2">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
               Install Size
               <span
@@ -486,7 +476,7 @@ defineOgImageComponent('Package', {
 
         <!-- Links -->
         <nav aria-label="Package links" class="mt-6">
-          <ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
+          <ul class="flex flex-wrap items-center gap-3 sm:gap-4 list-none m-0 p-0">
             <li v-if="repositoryUrl">
               <a
                 :href="repositoryUrl"
@@ -625,12 +615,12 @@ defineOgImageComponent('Package', {
         <div class="relative group">
           <!-- Terminal-style install command -->
           <div class="bg-[#0d0d0d] border border-border rounded-lg overflow-hidden">
-            <div class="flex gap-1.5 px-4 pt-3">
+            <div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
               <span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
               <span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
               <span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
             </div>
-            <div class="flex items-center gap-2 px-4 pt-3 pb-4">
+            <div class="flex items-center gap-2 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
               <span class="text-fg-subtle font-mono text-sm select-none">$</span>
               <code class="font-mono text-sm"
                 ><ClientOnly
@@ -680,7 +670,7 @@ defineOgImageComponent('Package', {
         </div>
 
         <!-- Sidebar -->
-        <aside class="order-1 lg:order-2 space-y-8 min-w-0 overflow-hidden">
+        <aside class="order-1 lg:order-2 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" />
 

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

@@ -339,16 +339,17 @@ useSeoMeta({
 
         <!-- Breadcrumb navigation -->
         <nav
-          v-if="filePath"
           aria-label="File path"
           class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
         >
           <NuxtLink
+            v-if="filePath"
             :to="getCodeUrl()"
             class="text-fg-muted hover:text-fg transition-colors shrink-0"
           >
             root
           </NuxtLink>
+          <span v-else class="text-fg shrink-0">root</span>
           <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
             <span class="text-fg-subtle">/</span>
             <NuxtLink

app/utils/install-command.ts

@@ -1,12 +1,12 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
 
 export const packageManagers = [
-  { id: 'npm', label: 'npm', action: 'install' },
-  { id: 'pnpm', label: 'pnpm', action: 'add' },
-  { id: 'yarn', label: 'yarn', action: 'add' },
-  { id: 'bun', label: 'bun', action: 'add' },
-  { id: 'deno', label: 'deno', action: 'add' },
-  { id: 'vlt', label: 'vlt', action: 'install' },
+  { id: 'npm', label: 'npm', action: 'install', execute: 'npx' },
+  { id: 'pnpm', label: 'pnpm', action: 'add', execute: 'pnpm dlx' },
+  { id: 'yarn', label: 'yarn', action: 'add', execute: 'yarn dlx' },
+  { id: 'bun', label: 'bun', action: 'add', execute: 'bunx' },
+  { id: 'deno', label: 'deno', action: 'add', execute: 'deno run' },
+  { id: 'vlt', label: 'vlt', action: 'install', execute: 'vlt x' },
 ] as const
 
 export type PackageManagerId = (typeof packageManagers)[number]['id']
@@ -59,3 +59,13 @@ export function getInstallCommandParts(options: InstallCommandOptions): string[]
 
   return [pm.label, pm.action, `${spec}${version}`]
 }
+
+export function getExecuteCommand(options: InstallCommandOptions): string {
+  return getExecuteCommandParts(options).join(' ')
+}
+
+export function getExecuteCommandParts(options: InstallCommandOptions): string[] {
+  const pm = packageManagers.find(p => p.id === options.packageManager)
+  if (!pm) return []
+  return [pm.execute, getPackageSpecifier(options)]
+}

server/api/registry/[...pkg].get.ts

@@ -5,11 +5,10 @@ export default defineCachedEventHandler(
       throw createError({ statusCode: 400, message: 'Package name is required' })
     }
 
-    const packageName = pkg.replace(/\//g, '/')
-    assertValidPackageName(packageName)
+    assertValidPackageName(pkg)
 
     try {
-      return await fetchNpmPackage(packageName)
+      return await fetchNpmPackage(pkg)
     } catch (error) {
       if (error && typeof error === 'object' && 'statusCode' in error) {
         throw error

server/utils/readme.ts

@@ -206,8 +206,20 @@ function resolveUrl(url: string, packageName: string, repoInfo?: RepositoryInfo)
   if (url.startsWith('#')) {
     return url
   }
-  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('//')) {
-    return url
+  if (hasProtocol(url, { acceptRelative: true })) {
+    try {
+      const parsed = new URL(url, 'https://example.com')
+      if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+        return url
+      }
+    } catch {
+      // Invalid URL, fall through to resolve as relative
+    }
+    // return protocol-relative URLs (//example.com) as-is
+    if (url.startsWith('//')) {
+      return url
+    }
+    // for non-HTTP protocols (javascript:, data:, etc.), don't return, treat as relative
   }
 
   // Prefer GitHub raw URLs when repository info is available