-
-
- {{ $t('footer.about') }}
-
-
- {{ $t('footer.blog') }}
-
-
- {{ $t('privacy_policy.title') }}
-
-
- {{ $t('a11y.footer_title') }}
-
-
- {{ $t('translation_status.title') }}
-
+
+
+
+
+ {{
+ $t('footer.product')
+ }}
+ {{ $t('footer.about') }}
+ {{ $t('footer.blog') }}
+ {{ $t('footer.docs') }}
-
-
- {{ $t('footer.docs') }}
-
-
- {{ $t('footer.source') }}
-
-
- {{ $t('footer.social') }}
-
-
- {{ discord.label }}
-
+
+
+
+ {{
+ $t('footer.legal')
+ }}
+ {{ $t('privacy_policy.title') }}
+ {{ $t('a11y.footer_title') }}
+ {{
+ $t('translation_status.title')
+ }}
+
+
+
+
+ {{
+ $t('footer.community')
+ }}
+ {{ $t('footer.source') }}
+ {{ $t('footer.social') }}
+ {{ discord.label }}
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8f0cb2290..76148d115 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -151,6 +151,7 @@ const route = useRoute()
const isMobile = useIsMobile()
const isSearchExpandedManually = shallowRef(false)
const searchBoxRef = useTemplateRef('searchBoxRef')
+const searchContainerRef = useTemplateRef('searchContainerRef')
// On search page, always show search expanded on mobile
const isOnHomePage = computed(() => route.name === 'index')
@@ -188,6 +189,12 @@ function handleSearchBlur() {
}
}
+onClickOutside(searchContainerRef, () => {
+ if (isMobile.value && !isOnSearchPage.value) {
+ isSearchExpandedManually.value = false
+ }
+})
+
function handleSearchFocus() {
showFullSearch.value = true
}
@@ -215,7 +222,7 @@ onKeyStroke(
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index ef824f063..d582c964c 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -21,9 +21,12 @@ useSeoMeta({
+
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 83b0f2b86..4bb293083 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -108,11 +108,27 @@ function prefetchReadmeMarkdown() {
}
async function copyReadmeHandler() {
- await fetchReadmeMarkdown()
+ // Safari requires navigator.clipboard.write() to be called synchronously within
+ // the user gesture, but accepts a Promise inside ClipboardItem.
+ // This pattern works in Safari 13.1+, Chrome, and Firefox.
+ if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {
+ const blobPromise = (async () => {
+ await fetchReadmeMarkdown()
+ const markdown = readmeMarkdownData.value?.markdown ?? ''
+ return new Blob([markdown], { type: 'text/plain' })
+ })()
+ try {
+ await navigator.clipboard.write([new ClipboardItem({ 'text/plain': blobPromise })])
+ return
+ } catch {
+ // Fall through to legacy approach
+ }
+ }
+ // Legacy fallback (non-Safari, or older browsers)
+ await fetchReadmeMarkdown()
const markdown = readmeMarkdownData.value?.markdown
if (!markdown) return
-
await copyReadme(markdown)
}
@@ -305,6 +321,17 @@ const latestVersion = computed(() => {
return pkg.value.versions[latestTag] ?? null
})
+// Detect license changes between current version and latest
+// SlimVersion does not carry license, so we compare against the package-level license
+const licenseChanged = computed(() => {
+ const currentLicense = displayVersion.value?.license
+ const latestLicense = pkg.value?.license
+ if (!currentLicense || !latestLicense) return false
+ const normalize = (l: unknown): string =>
+ typeof l === 'string' ? l : ((l as { type?: string })?.type ?? '')
+ return normalize(currentLicense) !== normalize(latestLicense)
+})
+
const deprecationNotice = computed(() => {
if (!displayVersion.value?.deprecated) return null
@@ -367,18 +394,6 @@ const sizeTooltip = computed(() => {
return chunks.filter(Boolean).join('\n')
})
-const hasDependencies = computed(() => {
- if (!displayVersion.value) return false
- const deps = displayVersion.value.dependencies
- const peerDeps = displayVersion.value.peerDependencies
- const optionalDeps = displayVersion.value.optionalDependencies
- return (
- (deps && Object.keys(deps).length > 0) ||
- (peerDeps && Object.keys(peerDeps).length > 0) ||
- (optionalDeps && Object.keys(optionalDeps).length > 0)
- )
-})
-
// Vulnerability count for the stats banner
const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
const hasVulnerabilities = computed(() => vulnCount.value > 0)
@@ -582,9 +597,25 @@ const showSkeleton = shallowRef(false)
{{ $t('package.stats.license') }}
-
-
+
+
{{ $t('package.license.none') }}
+
+
+
+ {{ $t('package.license.changed_badge') }}
+
+
@@ -959,7 +990,7 @@ const showSkeleton = shallowRef(false)
+definePageMeta({
+ name: 'package-dependents',
+ scrollMargin: 200,
+})
+
+const route = useRoute('package-dependents')
+
+const packageName = computed(() => {
+ const { org, name } = route.params
+ return org ? `${org}/${name}` : name
+})
+
+const { data: pkg } = usePackage(packageName)
+
+const resolvedVersion = computed(() => {
+ const latest = pkg.value?.['dist-tags']?.latest
+ if (!latest) return null
+ return latest
+})
+
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
+
+const latestVersion = computed(() => {
+ if (!pkg.value) return null
+ const latestTag = pkg.value['dist-tags']?.latest
+ if (!latestTag) return null
+ return pkg.value.versions[latestTag] ?? null
+})
+
+const versionUrlPattern = computed(() => {
+ const split = packageName.value.split('/')
+ if (split.length === 2) {
+ return `/package/${split[0]}/${split[1]}/v/{version}`
+ }
+ return `/package/${packageName.value}/v/{version}`
+})
+
+const page = shallowRef(0)
+const PAGE_SIZE = 20
+
+interface DependentsResponse {
+ total: number
+ page: number
+ size: number
+ packages: Array<{
+ name: string
+ version: string
+ description: string | null
+ date: string | null
+ score: number
+ }>
+}
+
+const { data, status, refresh } = useLazyFetch(
+ () => `/api/registry/dependents/${packageName.value}`,
+ {
+ query: computed(() => ({ page: page.value, size: PAGE_SIZE })),
+ watch: [page],
+ },
+)
+
+const totalPages = computed(() => {
+ if (!data.value?.total) return 0
+ return Math.ceil(data.value.total / PAGE_SIZE)
+})
+
+function prevPage() {
+ if (page.value > 0) {
+ page.value--
+ window.scrollTo({ top: 0, behavior: 'smooth' })
+ }
+}
+
+function nextPage() {
+ if (page.value < totalPages.value - 1) {
+ page.value++
+ window.scrollTo({ top: 0, behavior: 'smooth' })
+ }
+}
+
+const numberFormatter = useNumberFormatter()
+
+useSeoMeta({
+ title: () => `Dependents - ${packageName.value} - npmx`,
+ description: () => `Packages that depend on ${packageName.value}`,
+})
+
+
+
+
+
+
+
+
+ {{ $t('package.dependents.title') }}
+
+
+ {{ $t('package.dependents.subtitle', { name: packageName }) }}
+
+
+
+
+
+
+
+
+
+
{{ $t('package.dependents.error') }}
+
{{ $t('common.retry') }}
+
+
+
+
+
+
{{ $t('package.dependents.none', { name: packageName }) }}
+
+
+
+
+
+ {{
+ $t(
+ 'package.dependents.count',
+ { count: numberFormatter.format(data.total) },
+ data.total,
+ )
+ }}
+
+
+
+ -
+
+
+
+ {{ dep.name }}
+
+
+ {{ dep.description }}
+
+
+
+ {{ dep.version }}
+
+
+
+
+
+
+
+ {{ $t('common.previous') }}
+
+ {{ page + 1 }} / {{ totalPages }}
+
+ {{ $t('common.next') }}
+
+
+
+
+