Merge branch 'npmx-dev:main' into main

Author: craigary

README.md

@@ -155,7 +155,8 @@ We welcome contributions – please do feel free to explore the project and
 - [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com
 - [npm-alt](https://npm.willow.sh/) – An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible
-- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – VSCode extension for npmx
+- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – Official VSCode extension for npmx
+- [vscode-open-in-npmx](https://github.com/sybers/vscode-open-in-npmx) – VSCode shortcut to open packages on npmx
 - [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
 - [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
 - [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.

app/app.vue

@@ -121,9 +121,12 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
-      $t('common.skip_link')
-    }}</LinkBase>
+    <LinkBase
+      :to="{ hash: '#main-content', query: route.query, params: route.params }"
+      variant="button-primary"
+      class="skip-link"
+      >{{ $t('common.skip_link') }}</LinkBase
+    >
 
     <AppHeader :show-logo="!isHomepage" />
 

app/components/AppHeader.vue

@@ -107,7 +107,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-simple-icons:bluesky',
+        iconClass: 'i-carbon:logo-bluesky',
       },
       {
         name: 'Chat',
@@ -124,6 +124,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
 
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
+const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -212,10 +213,16 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
-          <AppLogo class="w-8 h-8 rounded-lg" />
-          <span>npmx</span>
+          <AppLogo class="w-7 h-7 rounded-lg" />
+          <span class="pb-0.5">npmx</span>
+          <span
+            aria-hidden="true"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -inset-ie-1"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->

app/components/CallToAction.vue

@@ -19,7 +19,7 @@ const socialLinks = computed(() => [
   {
     id: 'bluesky',
     href: 'https://social.npmx.dev',
-    icon: 'i-simple-icons:bluesky',
+    icon: 'i-carbon:logo-bluesky',
     titleKey: $t('about.get_involved.follow.title'),
     descriptionKey: $t('about.get_involved.follow.description'),
     ctaKey: $t('about.get_involved.follow.cta'),

app/components/Header/AccountMenu.client.vue

@@ -142,12 +142,12 @@ function openAuthModal() {
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
             <!-- npm CLI connection -->
-            <button
+            <ButtonBase
               v-if="isNpmConnected && npmUser"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openConnectorModal"
+              out
             >
               <img
                 v-if="npmAvatar"
@@ -182,14 +182,13 @@ function openAuthModal() {
                   })
                 }}
               </span>
-            </button>
+            </ButtonBase>
 
             <!-- Atmosphere connection -->
-            <button
+            <ButtonBase
               v-if="atprotoUser"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openAuthModal"
             >
               <img
@@ -212,7 +211,7 @@ function openAuthModal() {
                 >
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
               </span>
-            </button>
+            </ButtonBase>
           </div>
 
           <!-- Divider (only if we have connections AND options to connect) -->
@@ -223,11 +222,10 @@ function openAuthModal() {
 
           <!-- Connect options -->
           <div v-if="!isNpmConnected || !atprotoUser" class="py-1">
-            <button
+            <ButtonBase
               v-if="!isNpmConnected"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openConnectorModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -248,13 +246,12 @@ function openAuthModal() {
                 </span>
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
               </span>
-            </button>
+            </ButtonBase>
 
-            <button
+            <ButtonBase
               v-if="!atprotoUser"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -266,7 +263,7 @@ function openAuthModal() {
                 </span>
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
               </span>
-            </button>
+            </ButtonBase>
           </div>
         </div>
       </div>

app/components/Header/AuthModal.client.vue

@@ -64,12 +64,9 @@ watch(handleInput, newHandleInput => {
           </p>
         </div>
       </div>
-      <button
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="logout"
-      >
+      <ButtonBase class="w-full" @click="logout">
         {{ $t('auth.modal.disconnect') }}
-      </button>
+      </ButtonBase>
     </div>
 
     <!-- Disconnected state -->
@@ -111,19 +108,13 @@ watch(handleInput, newHandleInput => {
                 <span class="font-bold">npmx.dev</span>
               </template>
               <template #atproto>
-                <a :href="atprotoLink" target="_blank" class="text-blue-400 hover:underline">
-                  AT Protocol
-                </a>
+                <LinkBase :to="atprotoLink"> AT Protocol </LinkBase>
               </template>
               <template #bluesky>
-                <a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
-                  Bluesky
-                </a>
+                <LinkBase to="https://bsky.app"> Bluesky </LinkBase>
               </template>
               <template #tangled>
-                <a href="https://tangled.org" target="_blank" class="text-blue-400 hover:underline">
-                  Tangled
-                </a>
+                <LinkBase to="https://tangled.org"> Tangled </LinkBase>
               </template>
             </i18n-t>
           </div>
@@ -133,18 +124,17 @@ watch(handleInput, newHandleInput => {
       <ButtonBase type="submit" variant="primary" :disabled="!handleInput.trim()" class="w-full">
         {{ $t('auth.modal.connect') }}
       </ButtonBase>
-      <ButtonBase type="button" variant="primary" class="w-full" @click="handleCreateAccount">
+      <ButtonBase type="button" class="w-full" @click="handleCreateAccount">
         {{ $t('auth.modal.create_account') }}
       </ButtonBase>
       <hr class="color-border" />
-      <ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
+      <ButtonBase
+        type="button"
+        class="w-full"
+        @click="handleBlueskySignIn"
+        classicon="i-carbon:logo-bluesky"
+      >
         {{ $t('auth.modal.connect_bluesky') }}
-        <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
-          <path
-            fill="#0F73FF"
-            d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
-          ></path>
-        </svg>
       </ButtonBase>
     </form>
   </Modal>

app/components/Header/ConnectorModal.vue

@@ -80,13 +80,9 @@ function handleDisconnect() {
         {{ $t('connector.modal.connected_hint') }}
       </div>
 
-      <button
-        type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="handleDisconnect"
-      >
+      <ButtonBase type="button" class="w-full" @click="handleDisconnect">
         {{ $t('connector.modal.disconnect') }}
-      </button>
+      </ButtonBase>
     </div>
 
     <!-- Disconnected state -->
@@ -100,14 +96,11 @@ function handleDisconnect() {
           <p class="text-sm text-fg-muted">
             <i18n-t keypath="connector.modal.contributor_notice" scope="global">
               <template #link>
-                <a
-                  href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-blue-400 hover:underline"
+                <LinkBase
+                  to="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
                 >
                   {{ $t('connector.modal.contributor_link') }}
-                </a>
+                </LinkBase>
               </template>
             </i18n-t>
           </p>
@@ -124,15 +117,12 @@ function handleDisconnect() {
       >
         <span class="text-fg-subtle">$</span>
         <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
-        <button
-          type="button"
+        <ButtonBase
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           @click="copy('pnpm npmx-connector')"
-        >
-          <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>
+          class="ms-auto"
+          :classicon="copied ? 'i-carbon:checkmark text-green-500' : 'i-carbon:copy'"
+        />
       </div>
 
       <!-- TODO: Uncomment when npmx-connector is published to npm

app/components/Terminal/Install.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { JsrPackageInfo } from '#shared/types/jsr'
+import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 import type { PackageManagerId } from '~/utils/install-command'
 
 const props = defineProps<{
   packageName: string
   requestedVersion?: string | null
   installVersionOverride?: string | null
   jsrInfo?: JsrPackageInfo | null
+  devDependencySuggestion?: DevDependencySuggestion | null
   typesPackageName?: string | null
   executableInfo?: { hasExecutable: boolean; primaryCommand?: string } | null
   createPackageInfo?: { packageName: string } | null
@@ -30,6 +32,20 @@ function getInstallPartsForPM(pmId: PackageManagerId) {
   })
 }
 
+const devDependencySuggestion = computed(
+  () => props.devDependencySuggestion ?? { recommended: false as const },
+)
+
+function getDevInstallPartsForPM(pmId: PackageManagerId) {
+  return getInstallCommandParts({
+    packageName: props.packageName,
+    packageManager: pmId,
+    version: props.requestedVersion,
+    jsrInfo: props.jsrInfo,
+    dev: true,
+  })
+}
+
 // Generate run command parts for a specific package manager
 function getRunPartsForPM(pmId: PackageManagerId, command?: string) {
   return getRunCommandParts({
@@ -68,7 +84,7 @@ function getTypesInstallPartsForPM(pmId: PackageManagerId) {
   const pm = packageManagers.find(p => p.id === pmId)
   if (!pm) return []
 
-  const devFlag = pmId === 'bun' ? '-d' : '-D'
+  const devFlag = getDevDependencyFlag(pmId)
   const pkgSpec = pmId === 'deno' ? `npm:${props.typesPackageName}` : props.typesPackageName
 
   return [pm.label, pm.action, devFlag, pkgSpec]
@@ -95,6 +111,18 @@ const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+
+const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
+const copyDevInstallCommand = () =>
+  copyDevInstall(
+    getInstallCommand({
+      packageName: props.packageName,
+      packageManager: selectedPM.value,
+      version: props.requestedVersion,
+      jsrInfo: props.jsrInfo,
+      dev: true,
+    }),
+  )
 </script>
 
 <template>
@@ -133,6 +161,42 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           </button>
         </div>
 
+        <!-- Suggested dev dependency install command -->
+        <template v-if="devDependencySuggestion.recommended">
+          <div class="flex items-center gap-2 pt-1 select-none">
+            <span class="text-fg-subtle font-mono text-sm"
+              ># {{ $t('package.get_started.dev_dependency_hint') }}</span
+            >
+          </div>
+          <div
+            v-for="pm in packageManagers"
+            :key="`install-dev-${pm.id}`"
+            :data-pm-cmd="pm.id"
+            class="flex items-center gap-2 group/devinstallcmd min-w-0"
+          >
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+            <code class="font-mono text-sm min-w-0"
+              ><span
+                v-for="(part, i) in getDevInstallPartsForPM(pm.id)"
+                :key="i"
+                :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
+                >{{ i > 0 ? ' ' : '' }}{{ part }}</span
+              ></code
+            >
+            <ButtonBase
+              type="button"
+              size="small"
+              class="text-fg-muted bg-bg-subtle/80 border-border opacity-0 group-hover/devinstallcmd:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              :aria-label="$t('package.get_started.copy_dev_command')"
+              @click.stop="copyDevInstallCommand"
+            >
+              <span aria-live="polite">{{
+                devInstallCopied ? $t('common.copied') : $t('common.copy')
+              }}</span>
+            </ButtonBase>
+          </div>
+        </template>
+
         <!-- @types package install - render all PM variants when types package exists -->
         <template v-if="typesPackageName && showTypesInInstall">
           <div

app/composables/useGlobalSearch.ts

@@ -26,6 +26,7 @@ export function useGlobalSearch() {
     urlQuery => {
       const value = normalizeSearchParam(urlQuery)
       if (!value) searchQuery.value = ''
+      if (!searchQuery.value) searchQuery.value = value
     },
   )
   const updateUrlQueryImpl = (value: string, provider: 'npm' | 'algolia') => {