diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 46a8d4cf9e..6bd31f3e0c 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -324,6 +324,7 @@ useShortcuts({ class="border-none" variant="button-secondary" :to="link.to" + :name="link.name" :aria-keyshortcuts="link.keyshortcut" > {{ link.label }} diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue index 561273154c..9d5fa38665 100644 --- a/app/components/Link/Base.vue +++ b/app/components/Link/Base.vue @@ -36,6 +36,11 @@ const props = withDefaults( /** Link destination (internal or external URL) */ to?: NuxtLinkProps['to'] + /** + * Link name used to trigger package-aware routing for compare links + */ + name?: string + /** always use `to` instead of `href` */ href?: never @@ -69,8 +74,27 @@ const isButtonMedium = computed(() => props.size === 'md' && !isLink.value) const slots = useSlots() const iconOnly = computed(() => !!props.classicon && !slots.default) const keyboardShortcutsEnabled = useKeyboardShortcuts() - +const { packageName } = usePackageRoute() + +const linkTo = computed(() => { + if (props.name?.toLocaleLowerCase() !== 'compare' || !packageName.value) { + return props.to + } + // On a package page (/package/:name), carry the current package name to the compare page + if (typeof props.to !== 'object' || props.to === null) { + return props.to + } + const to = { ...props.to } as Record + return { + ...to, + query: { + ...to.query, + packages: packageName.value, + }, + } +}) +