Merge branch 'main' of github.com:harlan-zw/fork-npmx.dev into feat/og-image-v7

Author: harlan-zw

.storybook/handlers.ts

@@ -57,3 +57,37 @@ export const contributorsHandler = http.get('/api/contributors', () => {
     },
   ])
 })
+
+export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
+  return HttpResponse.json([
+    {
+      did: 'did:plc:mock0001',
+      handle: 'patak.dog',
+      displayName: 'Patak Dog',
+      avatar:
+        'https://cdn.bsky.app/img/avatar/plain/did:plc:zjfptjaegvgc7r2axkkyyzqn/bafkreihrcqhp575f6dph4uztbeyxfrmfnbv7x2gvovrgu4idgdsdw7wety',
+    },
+    {
+      did: 'did:plc:mock0002',
+      handle: 'patakllama.mockpmx.social',
+      displayName: 'Patak Llama',
+      avatar: 'https://api.dicebear.com/9.x/initials/svg?seed=llama',
+    },
+    {
+      did: 'did:plc:mock0003',
+      handle: 'patak.horse',
+      displayName: 'Patak Horse',
+      avatar:
+        'https://cdn.bsky.app/img/avatar/plain/did:plc:vqh7id7sddkrfkhgt7tstlpd/bafkreifodkgqszgpt2qnoyljnbafokr6eujqwztj2kxo473adv5b57hjse',
+    },
+    {
+      did: 'did:plc:mock0004',
+      handle: 'patakcatapiller.mockpmx.social',
+    },
+    {
+      did: 'did:plc:mock0005',
+      handle: 'patakgoat.mockpmx.social',
+      displayName: 'Patak Goat',
+    },
+  ])
+})

app/components/Package/WeeklyDownloadStats.vue

@@ -60,6 +60,7 @@ function handleModalTransitioned() {
 }
 
 const { fetchPackageDownloadEvolution } = useCharts()
+const numberFormatter = useNumberFormatter()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 
@@ -359,6 +360,9 @@ const config = computed<VueUiSparklineConfig>(() => {
         fontSize: 28,
         bold: false,
         color: colors.value.fg,
+        formatter: ({ value }) => {
+          return numberFormatter.value.format(value)
+        },
       },
       line: {
         color: colors.value.borderHover,

app/components/Readme.vue

@@ -89,6 +89,7 @@ function handleClick(event: MouseEvent) {
   min-width: 0;
   /* Contain all children z-index values inside this container */
   isolation: isolate;
+  contain: layout paint;
 }
 
 /* README headings - styled by visual level (data-level), not semantic level */

app/components/Tab/Panel.vue

@@ -21,7 +21,7 @@ const resolvedTabId = computed(() => getTabId(props.value))
 
 <template>
   <div
-    v-show="isSelected"
+    v-if="isSelected"
     :id="resolvedPanelId"
     role="tabpanel"
     :aria-labelledby="resolvedTabId"

app/composables/npm/useAlgoliaSearch.ts

@@ -161,8 +161,8 @@ export function useAlgoliaSearch() {
     }
   }
 
-  /** Fetch all packages for an owner using `owner.name` filter with pagination. */
-  async function searchByOwner(
+  /** Fetch all packages for a maintainer using `owners.name` filter with pagination. */
+  async function searchByMaintainer(
     ownerName: string,
     options: { maxResults?: number } = {},
   ): Promise<NpmSearchResponse> {
@@ -185,7 +185,7 @@ export function useAlgoliaSearch() {
             query: '',
             offset,
             length,
-            filters: `owner.name:${ownerName}`,
+            filters: `owners.name:${ownerName}`,
             analyticsTags: ['npmx.dev'],
             attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE,
             attributesToHighlight: [],
@@ -286,7 +286,7 @@ export function useAlgoliaSearch() {
       requests.push({
         indexName,
         query: '',
-        filters: `owner.name:${checks.name}`,
+        filters: `owners.name:${checks.name}`,
         length: 1,
         analyticsTags: ['npmx.dev'],
         attributesToRetrieve: EXISTENCE_CHECK_ATTRS,
@@ -347,7 +347,7 @@ export function useAlgoliaSearch() {
   return {
     search,
     searchWithSuggestions,
-    searchByOwner,
+    searchByMaintainer,
     getPackagesByName,
   }
 }

app/composables/npm/useUserPackages.ts

@@ -28,7 +28,7 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
   })
   // this is only used in npm path, but we need to extract it when the composable runs
   const { $npmRegistry } = useNuxtApp()
-  const { searchByOwner } = useAlgoliaSearch()
+  const { searchByMaintainer } = useAlgoliaSearch()
 
   // --- Incremental loading state (npm path) ---
   const currentPage = shallowRef(1)
@@ -58,7 +58,7 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
       // --- Algolia: fetch all at once ---
       if (provider === 'algolia') {
         try {
-          const response = await searchByOwner(user)
+          const response = await searchByMaintainer(user)
 
           // Guard against stale response (user/provider changed during await)
           if (user !== toValue(username) || provider !== searchProviderValue.value) {

app/composables/useSelectedPackageManager.ts

@@ -12,6 +12,10 @@ export const useSelectedPackageManager = createSharedComposable(
 
     // Sync to data-pm attribute on the client
     if (import.meta.client) {
+      const queryPM = new URLSearchParams(window.location.search).get('pm')
+      if (queryPM && packageManagers.some(pm => pm.id === queryPM)) {
+        pm.value = queryPM as PackageManagerId
+      }
       // Watch for changes and update the attribute
       watch(
         pm,

app/pages/pds.stories.ts

@@ -0,0 +1,30 @@
+import Pds from './pds.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import { pageDecorator } from '../../.storybook/decorators'
+import { pdsUsersHandler } from '../../.storybook/handlers'
+
+const meta = {
+  component: Pds,
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [pdsUsersHandler],
+    },
+  },
+  decorators: [pageDecorator],
+} satisfies Meta<typeof Pds>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** `/api/atproto/pds-users` is intercepted by MSW so the community section displays both avatar images and text-only entries. */
+export const Default: Story = {}
+
+/** Community section shows an empty/loading state with no API response. */
+export const WithoutUsers: Story = {
+  parameters: {
+    msw: {
+      handlers: [],
+    },
+  },
+}

app/utils/prehydrate.ts

@@ -39,20 +39,28 @@ export function initPreferencesOnPrehydrate() {
       document.documentElement.dataset.bgTheme = preferredBackgroundTheme
     }
 
-    // Read and apply package manager preference
-    const storedPM = localStorage.getItem('npmx-pm')
-    // Parse the stored value (it's stored as a JSON string by useLocalStorage)
     let pm = 'npm'
-    if (storedPM) {
-      try {
-        const parsed = JSON.parse(storedPM)
-        if (validPMs.has(parsed)) {
-          pm = parsed
-        }
-      } catch {
-        // If parsing fails, check if it's a plain string (legacy format)
-        if (validPMs.has(storedPM)) {
-          pm = storedPM
+
+    // Support package manager preference in query string (for example, ?pm=pnpm)
+    const queryPM = new URLSearchParams(window.location.search).get('pm')
+    if (queryPM && validPMs.has(queryPM)) {
+      pm = queryPM
+      localStorage.setItem('npmx-pm', pm)
+    } else {
+      // Read and apply package manager preference
+      const storedPM = localStorage.getItem('npmx-pm')
+      // Parse the stored value (it's stored as a JSON string by useLocalStorage)
+      if (storedPM) {
+        try {
+          const parsed = JSON.parse(storedPM)
+          if (validPMs.has(parsed)) {
+            pm = parsed
+          }
+        } catch {
+          // If parsing fails, check if it's a plain string (legacy format)
+          if (validPMs.has(storedPM)) {
+            pm = storedPM
+          }
         }
       }
     }

i18n/locales/zh-CN.json

@@ -280,7 +280,8 @@
       "black": "黑色"
     },
     "keyboard_shortcuts_enabled": "启用快捷键",
-    "keyboard_shortcuts_enabled_description": "如果某些快捷键与其他浏览器或系统快捷键冲突，可以选择将其禁用。"
+    "keyboard_shortcuts_enabled_description": "如果某些快捷键与其他浏览器或系统快捷键冲突，可以选择将其禁用。",
+    "enable_code_ligatures": "在代码中启用连字"
   },
   "i18n": {
     "missing_keys": "{count} 项缺少翻译",
@@ -1325,6 +1326,18 @@
         "vulnerabilities": {
           "label": "漏洞",
           "description": "已知安全漏洞"
+        },
+        "githubStars": {
+          "label": "GitHub 星标",
+          "description": "GitHub 仓库的星标数量"
+        },
+        "githubIssues": {
+          "label": "GitHub 问题数",
+          "description": "GitHub 仓库的问题数量"
+        },
+        "createdAt": {
+          "label": "创建时间",
+          "description": "包创建时间"
         }
       },
       "values": {