forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: use router for import links in package code (#1307)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Bjorn Lu
Daniel Roe
and committed by
GitHub
d61b472e
f4832f7a
+25
+25
app/components/Code/Viewer.vue
+25
app/components/Code/Viewer.vue
···
57
57
},
58
58
{ immediate: true },
59
59
)
60
+
61
+
// Use Nuxt's `navigateTo` for the rendered import links
62
+
function handleImportLinkNavigate() {
63
+
if (!codeRef.value) return
64
+
65
+
const anchors = codeRef.value.querySelectorAll('a.import-link')
66
+
anchors.forEach(anchor => {
67
+
// NOTE: We do not need to remove previous listeners because we re-create the entire HTML content on each html update
68
+
anchor.addEventListener('click', event => {
69
+
const href = anchor.getAttribute('href')
70
+
if (href) {
71
+
event.preventDefault()
72
+
navigateTo(href)
73
+
}
74
+
})
75
+
})
76
+
}
77
+
78
+
watch(
79
+
() => props.html,
80
+
() => {
81
+
nextTick(handleImportLinkNavigate)
82
+
},
83
+
{ immediate: true },
84
+
)
60
85
</script>
61
86
62
87
<template>