Merge branch 'main' into i18n/update

Author: 9romise

README.md

@@ -21,7 +21,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 ## Shortcuts
 
 > [!IMPORTANT]  
-> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npmx.dev). If you know others who would be interested, please invite them too!
 
 - [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
 - [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile

app/components/ChartModal.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
 
+function close() {
+  open.value = false
+}
+
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape') {
-    open.value = false
+    close()
   }
 }
 </script>
@@ -53,6 +57,8 @@ function handleKeydown(event: KeyboardEvent) {
               <slot />
             </div>
           </div>
+
+          <slot name="after" v-bind="{ close }" />
         </div>
       </div>
     </Transition>

app/components/ClaimPackageModal.vue

@@ -370,7 +370,7 @@ const connectorModalOpen = shallowRef(false)
                     >
                       {{ $t('claim.modal.preview_json') }}
                     </summary>
-                    <pre class="p-3 text-xs font-mono text-fg-muted bg-[#0d0d0d] overflow-x-auto">{{
+                    <pre class="p-3 text-xs font-mono text-fg-muted bg-bg-muted overflow-x-auto">{{
                       JSON.stringify(previewPackageJson, null, 2)
                     }}</pre>
                   </details>

app/components/ConnectorModal.vue

@@ -125,7 +125,7 @@ watch(open, isOpen => {
               </p>
 
               <div
-                class="flex items-center p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm"
+                class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
               >
                 <span class="text-fg-subtle">$</span>
                 <span class="text-fg ml-2">{{ executeNpmxConnectorCommand }}</span>

app/components/OperationsQueue.vue

@@ -198,7 +198,7 @@ onUnmounted(() => {
           <!-- Result output for completed/failed -->
           <div
             v-else-if="op.result && (op.status === 'completed' || op.status === 'failed')"
-            class="mt-2 p-2 bg-[#0d0d0d] border border-border rounded text-xs font-mono"
+            class="mt-2 p-2 bg-bg-muted border border-border rounded text-xs font-mono"
           >
             <pre v-if="op.result.stdout" class="text-fg-muted whitespace-pre-wrap">{{
               op.result.stdout

app/components/PackageDownloadAnalytics.vue

@@ -2,7 +2,7 @@
 import { ref, computed, shallowRef, watch } from 'vue'
 import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useElementSize } from '@vueuse/core'
 
 const {
   weeklyDownloads,
@@ -18,8 +18,10 @@ const {
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 const colorMode = useColorMode()
-
 const resolvedMode = ref<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+
+const { width } = useElementSize(rootEl)
 
 onMounted(() => {
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
@@ -50,6 +52,16 @@ const accent = computed(() => {
   return id ? (oklchToHex(accentColorValueById.value[id]!) ?? '#8A8A8A') : '#8A8A8A'
 })
 
+const mobileBreakpointWidth = 640
+
+const isMobile = computed(() => {
+  return width.value > 0 && width.value < mobileBreakpointWidth
+})
+
+onMounted(() => {
+  rootEl.value = document.documentElement
+})
+
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 type EvolutionData =
   | DailyDownloadPoint[]
@@ -417,6 +429,7 @@ const formatter = ({ value }: { value: number }) => formatCompactNumber(value, {
 const config = computed(() => ({
   theme: isDarkMode.value ? 'dark' : 'default',
   chart: {
+    height: isMobile.value ? 850 : 600,
     userOptions: {
       buttons: {
         pdf: false,
@@ -474,6 +487,7 @@ const config = computed(() => ({
       },
     },
     zoom: {
+      maxWidth: 500,
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,
@@ -699,9 +713,4 @@ const config = computed(() => ({
   background: var(--bg-elevated) !important;
   box-shadow: none !important;
 }
-
-.vue-data-ui-zoom {
-  max-width: 500px;
-  margin: 0 auto;
-}
 </style>

app/components/PackageWeeklyDownloadStats.vue

@@ -202,6 +202,19 @@ const config = computed(() => {
       :packageName="packageName"
       :createdIso="createdIso"
     />
+
+    <template #after="{ close }">
+      <div class="sm:hidden flex justify-center">
+        <button
+          type="button"
+          @click="close"
+          class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+          :aria-label="$t('common.close')"
+        >
+          <span class="w-5 h-5 i-carbon-close" />
+        </button>
+      </div>
+    </template>
   </ChartModal>
 </template>
 

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

@@ -680,14 +680,15 @@ defineOgImageComponent('Package', {
                 :key="pm.id"
                 role="tab"
                 :aria-selected="selectedPM === pm.id"
-                class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
                 :class="
                   selectedPM === pm.id
                     ? 'bg-bg shadow text-fg border-border'
                     : 'text-fg-subtle hover:text-fg  border-transparent'
                 "
                 @click="selectedPM = pm.id"
               >
+                <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
                 {{ pm.label }}
               </button>
               <template #fallback>

app/pages/search.vue

@@ -89,7 +89,8 @@ const { data: results, status } = useNpmSearch(query, () => ({
 }))
 
 // Keep track of previous results to show while loading
-const previousQuery = ref('')
+// Use useState so the value persists from SSR to client hydration
+const previousQuery = useState('search-previous-query', () => query.value)
 const cachedResults = ref(results.value)
 
 // Update cached results smartly

app/utils/install-command.ts

@@ -1,12 +1,37 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
 
+// @unocss-include
 export const packageManagers = [
-  { 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' },
+  {
+    id: 'npm',
+    label: 'npm',
+    action: 'install',
+    execute: 'npx',
+    icon: 'i-simple-icons:npm',
+  },
+  {
+    id: 'pnpm',
+    label: 'pnpm',
+    action: 'add',
+    execute: 'pnpm dlx',
+    icon: 'i-simple-icons:pnpm',
+  },
+  {
+    id: 'yarn',
+    label: 'yarn',
+    action: 'add',
+    execute: 'yarn dlx',
+    icon: 'i-simple-icons:yarn',
+  },
+  { id: 'bun', label: 'bun', action: 'add', execute: 'bunx', icon: 'i-simple-icons:bun' },
+  {
+    id: 'deno',
+    label: 'deno',
+    action: 'add',
+    execute: 'deno run',
+    icon: 'i-simple-icons:deno',
+  },
+  { id: 'vlt', label: 'vlt', action: 'install', execute: 'vlt x', icon: 'i-custom-vlt' },
 ] as const
 
 export type PackageManagerId = (typeof packageManagers)[number]['id']