Merge branch 'main' into cta-section-card-headings

danielroe · web-flow · commit e32753e6a9e9 · 2026-02-03T09:48:58.000Z
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -32,14 +32,10 @@ jobs:
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: Install pnpm
-        with:
-          cache: true
-
-      - name: 📦 Install dependencies
-        run: pnpm install
+        # pnpm cache skipped deliberately as the project is not actually installed here
 
       - name: 🔠 Lint project
-        run: pnpm lint
+        run: node scripts/lint.ts
 
   test:
     runs-on: ubuntu-latest
diff --git a/README.md b/README.md
@@ -13,12 +13,16 @@
 
 ## Vision
 
-The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the npm registry &ndash; fast, modern, and accessible. We don't aim to replace the [npmjs.com](https://www.npmjs.com/) registry, just provide a better UI, DX, and admin experience.
+The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern browser for the npm registry.
 
-- **Speed first** &ndash; Layout shift, flakiness, slowness is The Worst. Fast searching, filtering, and navigation.
-- **URL compatible** &ndash; Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
-- **Simplicity** &ndash; No noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
-- **Admin UI** &ndash; Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
+We're not replacing the [npmjs.com](https://www.npmjs.com/) registry, but instead providing an elevated developer experience through a fast, modern UI.
+
+What npmx offers:
+
+- **Speed** &ndash; Fast searching, filtering, and navigation.
+- **Simplicity** &ndash; Get the information you need when you need it in an intuitive UI.
+- **Compatibility** &ndash; Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
+- **Enhanced admin experience** &ndash; Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
 
 ## Shortcuts
 
@@ -36,7 +40,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 
 ### Package browsing
 
-- **Dark mode by default** &ndash; easier on the eyes
+- **Dark mode and light mode** &ndash; plus customize the color palette to your preferences
 - **Fast search** &ndash; quick package search with instant results
 - **Package details** &ndash; READMEs, versions, dependencies, and metadata
 - **Code viewer** &ndash; browse package source code with syntax highlighting and permalink to specific lines
@@ -100,7 +104,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 
 ### npm compatibility
 
-npmx.dev supports npm permalinks &ndash; just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` and it works:
+npmx.dev supports npm permalinks &ndash; just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` to get the npmx experience:
 
 | npm URL                         | npmx.dev equivalent                                                    |
 | ------------------------------- | ---------------------------------------------------------------------- |
@@ -142,7 +146,7 @@ npmx.dev also supports shorter, cleaner URLs:
 
 ## Contributing
 
-We welcome contributions &ndash; please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
+We welcome contributions &ndash; please do feel free to explore the project and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
 
 ## Related projects
 
@@ -151,6 +155,7 @@ We welcome contributions &ndash; please do feel free to poke around and improve
 - [npm-userscript](https://github.com/bluwy/npm-userscript) &ndash; Browser userscript with various improvements and fixes for npmjs.com
 - [npm-alt](https://npm.willow.sh/) &ndash; An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) &ndash; An alternative frontend to npm made with as little client-side JavaScript as possible
+- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) &ndash; VSCode extension for npmx
 
 If you're building something cool, let us know! 🙏
 
diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue
diff --git a/app/components/Compare/FacetCard.vue b/app/components/Compare/FacetCard.vue
diff --git a/app/components/Compare/FacetRow.vue b/app/components/Compare/FacetRow.vue
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
@@ -58,7 +58,7 @@ onUnmounted(deactivate)
     >
       <div
         v-if="isOpen"
-        class="fixed inset-0 z-50 sm:hidden"
+        class="fixed inset-0 z-[60] sm:hidden"
         role="dialog"
         aria-modal="true"
         :aria-label="$t('nav.mobile_menu')"
diff --git a/app/composables/useAtproto.ts b/app/composables/useAtproto.ts
@@ -1,15 +1,14 @@
 import type { UserSession } from '#shared/schemas/userSession'
 
 export function useAtproto() {
-  if (import.meta.server) {
-    return {
-      user: ref(null),
-      pending: ref(false),
-      logout: async () => {},
-    }
-  }
-
-  const { data: user, pending, clear } = useFetch<UserSession | null>('/api/auth/session')
+  const {
+    data: user,
+    pending,
+    clear,
+  } = useFetch<UserSession | null>('/api/auth/session', {
+    server: false,
+    immediate: !import.meta.test,
+  })
 
   async function logout() {
     await $fetch('/api/auth/session', {
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
@@ -193,7 +193,8 @@
     },
     "create": {
       "title": "创建新项目",
-      "copy_command": "拷贝创建命令"
+      "copy_command": "拷贝创建命令",
+      "view": "{packageName} 由同一位维护者维护，点击查看详情"
     },
     "run": {
       "title": "运行",
@@ -202,7 +203,8 @@
     "readme": {
       "title": "Readme",
       "no_readme": "没有可用的 README。",
-      "view_on_github": "在 GitHub 上查看"
+      "view_on_github": "在 GitHub 上查看",
+      "toc_title": "大纲"
     },
     "keywords_title": "关键词",
     "compatibility": "兼容性",
diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
@@ -193,7 +193,8 @@
     },
     "create": {
       "title": "创建新项目",
-      "copy_command": "拷贝创建命令"
+      "copy_command": "拷贝创建命令",
+      "view": "{packageName} 由同一位维护者维护，点击查看详情"
     },
     "run": {
       "title": "运行",
@@ -202,7 +203,8 @@
     "readme": {
       "title": "Readme",
       "no_readme": "没有可用的 README。",
-      "view_on_github": "在 GitHub 上查看"
+      "view_on_github": "在 GitHub 上查看",
+      "toc_title": "大纲"
     },
     "keywords_title": "关键词",
     "compatibility": "兼容性",
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "@vueuse/integrations": "14.2.0",
     "@vueuse/nuxt": "14.2.0",
     "@vueuse/router": "^14.2.0",
+    "defu": "6.1.4",
     "focus-trap": "^7.8.0",
     "marked": "17.0.1",
     "module-replacements": "2.11.0",
@@ -105,6 +106,7 @@
     "@vitest/coverage-v8": "4.0.18",
     "@vue/test-utils": "2.4.6",
     "axe-core": "4.11.1",
+    "fast-check": "4.5.3",
     "fast-npm-meta": "1.0.0",
     "knip": "5.83.0",
     "lint-staged": "16.2.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/lint.ts b/scripts/lint.ts
@@ -0,0 +1,33 @@
+/**
+ * This script runs oxlint and oxfmt in a CI environment, without the need to install the entire
+ * project. It reads the required version from pnpm-lock.yaml and executes the linters accordingly.
+ * It's "stupid by design" so it could work in minimal Node.js environments.
+ */
+
+import { spawnSync } from 'node:child_process'
+
+function getDependencyVersion(dependencyName: string): string {
+  const result = spawnSync('npm', ['pkg', 'get', `devDependencies.${dependencyName}`], {
+    encoding: 'utf8',
+  })
+
+  if (result.status) {
+    throw new Error(`Command failed: pnpm info ${dependencyName} version`)
+  }
+
+  return JSON.parse(result.stdout)
+}
+
+function runCommand(command: string, args: string[]) {
+  const result = spawnSync(command, args, { stdio: 'inherit' })
+
+  if (result.status) {
+    throw new Error(`Command failed: ${command} ${args.join(' ')}`)
+  }
+}
+
+const oxlintVersion = getDependencyVersion('oxlint')
+const oxfmtVersion = getDependencyVersion('oxfmt')
+
+runCommand('pnpx', [`oxlint@${oxlintVersion}`])
+runCommand('pnpx', [`oxfmt@${oxfmtVersion}`, '--check'])
diff --git a/test/nuxt/components/compare/ComparisonGrid.spec.ts b/test/nuxt/components/compare/ComparisonGrid.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import ComparisonGrid from '~/components/compare/ComparisonGrid.vue'
+import ComparisonGrid from '~/components/Compare/ComparisonGrid.vue'
 
 describe('ComparisonGrid', () => {
   describe('header rendering', () => {
diff --git a/test/nuxt/components/compare/FacetRow.spec.ts b/test/nuxt/components/compare/FacetRow.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import FacetRow from '~/components/compare/FacetRow.vue'
+import FacetRow from '~/components/Compare/FacetRow.vue'
 
 // Mock useRelativeDates for DateTime component
 vi.mock('~/composables/useSettings', () => ({
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
@@ -1,6 +1,6 @@
 import type { ComparisonFacet } from '#shared/types/comparison'
 import { CATEGORY_ORDER, FACET_INFO, FACETS_BY_CATEGORY } from '#shared/types/comparison'
-import FacetSelector from '~/components/compare/FacetSelector.vue'
+import FacetSelector from '~/components/Compare/FacetSelector.vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
diff --git a/test/nuxt/components/compare/PackageSelector.spec.ts b/test/nuxt/components/compare/PackageSelector.spec.ts
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import PackageSelector from '~/components/compare/PackageSelector.vue'
+import PackageSelector from '~/components/Compare/PackageSelector.vue'
 
 // Mock $fetch for useNpmSearch
 const mockFetch = vi.fn()
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
@@ -32,7 +32,7 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   // Complex components requiring full app context or specific runtime conditions
   'Header/OrgsDropdown.vue': 'Requires connector context and API calls',
   'Header/PackagesDropdown.vue': 'Requires connector context and API calls',
-  'Header/MobileMenu.vue': 'Requires Teleport and full navigation context',
+  'Header/MobileMenu.client.vue': 'Requires Teleport and full navigation context',
   'Modal.client.vue':
     'Base modal component - tested via specific modals like ChartModal, ConnectorModal',
   'Package/SkillsModal.vue': 'Complex modal with tabs - requires modal context and state',
diff --git a/test/unit/server/utils/docs/text.spec.ts b/test/unit/server/utils/docs/text.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import * as fc from 'fast-check'
 import {
   escapeHtml,
   parseJsDocLinks,
@@ -40,6 +41,15 @@ describe('stripAnsi', () => {
     const input = `object is ReactElement${ESC}[0m${ESC}[38;5;12m<${ESC}[0mP${ESC}[38;5;12m>${ESC}[0m`
     expect(stripAnsi(input)).toBe('object is ReactElement<P>')
   })
+
+  it('should strip everything in one pass', () => {
+    fc.assert(
+      fc.property(fc.string(), input => {
+        const stripped = stripAnsi(input)
+        expect(stripAnsi(stripped)).toBe(stripped)
+      }),
+    )
+  })
 })
 
 describe('escapeHtml', () => {
@@ -124,6 +134,65 @@ describe('parseJsDocLinks', () => {
     const result = parseJsDocLinks('{@link http://example.com}', emptyLookup)
     expect(result).toContain('href="http://example.com"')
   })
+
+  it('should convert external URLs using {@link url} to links', () => {
+    fc.assert(
+      fc.property(fc.webUrl(), url => {
+        const result = parseJsDocLinks(`{@link ${url}}`, emptyLookup)
+        expect(result).toContain(`href="${escapeHtml(url)}"`)
+        expect(result).toContain('target="_blank"')
+        expect(result).toContain('rel="noreferrer"')
+        expect(result).toContain(escapeHtml(url))
+      }),
+    )
+  })
+
+  it('should convert external URLs using {@link url text} to links', () => {
+    fc.assert(
+      fc.property(fc.webUrl(), fc.stringMatching(/^[^}\s][^}]+[^}\s]$/), (url, text) => {
+        const result = parseJsDocLinks(`{@link ${url} ${text}}`, emptyLookup)
+        expect(result).toContain(`href="${escapeHtml(url)}"`)
+        expect(result).toContain('target="_blank"')
+        expect(result).toContain('rel="noreferrer"')
+        expect(result).toContain(escapeHtml(text))
+      }),
+    )
+  })
+
+  it('should be able to treat correctly several external URLs at the middle of a text', () => {
+    const surrounding = fc.stringMatching(/^[^{]*$/)
+    const link = fc.record({
+      url: fc.webUrl(),
+      label: fc.option(fc.stringMatching(/^[^}\s][^}]+[^}\s]$/)),
+      before: surrounding,
+      after: surrounding,
+    })
+    fc.assert(
+      fc.property(fc.array(link, { minLength: 1 }), content => {
+        let docString = ''
+        const expectedUrls = []
+        for (const chunk of content) {
+          if (chunk.before.length !== 0 || docString.length !== 0) {
+            docString += `${chunk.before} `
+          }
+          if (chunk.label === null) {
+            docString += `{@link ${chunk.url}}`
+            expectedUrls.push(chunk.url)
+          } else {
+            docString += `{@link ${chunk.url} ${chunk.label}}`
+            expectedUrls.push(chunk.url)
+          }
+          if (chunk.after.length !== 0) {
+            docString += ` ${chunk.after}`
+          }
+        }
+        const result = parseJsDocLinks(docString, emptyLookup)
+        for (const url of expectedUrls) {
+          expect(result).toContain(`href="${escapeHtml(url)}"`)
+        }
+      }),
+    )
+  })
 })
 
 describe('renderMarkdown', () => {
diff --git a/test/unit/shared/utils/async.spec.ts b/test/unit/shared/utils/async.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ onUnmounted(deactivate)`
`58`	`58`	`>`
`59`	`59`	`<div`
`60`	`60`	`v-if="isOpen"`
`61`		`- class="fixed inset-0 z-50 sm:hidden"`
	`61`	`+ class="fixed inset-0 z-[60] sm:hidden"`
`62`	`62`	`role="dialog"`
`63`	`63`	`aria-modal="true"`
`64`	`64`	`:aria-label="$t('nav.mobile_menu')"`