-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
catch internal links and use router #73
Conversation
✅ Deploy Preview for directus-website ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
components/Base/Text.vue
Outdated
onMounted(() => { | ||
if (!contentEl.value) return; | ||
|
||
// Intercept all the local links | ||
const anchors = contentEl.value.getElementsByTagName('a'); | ||
if (!anchors) return; | ||
|
||
Array.from(anchors).forEach((anchor) => { | ||
const url = anchor.getAttribute('href'); | ||
if (!url) return; | ||
|
||
// Add target blank to external links | ||
if (!url.startsWith(config.public.site.url) && !url.startsWith('/')) { | ||
anchor.setAttribute('target', '_blank'); | ||
anchor.setAttribute('rel', 'noopener noreferrer'); | ||
return; | ||
} else { | ||
// Add on click event to local links | ||
anchor.addEventListener('click', (e) => { | ||
e.preventDefault(); | ||
navigateTo(url); | ||
}); | ||
} | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is one of those It works but man I wish there was a less hacky way to achieve this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah me too. Couldn't come up with any "simple" solutions.
Open to suggestions.
I think the proper way would be to use some type of transformer to process the HTML during the build process.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That would be the only alternative yeah, but even then we can't really replace it with <nuxt-route>
as nuxt wouldn't be able to recognize that 🤔
In case the navigate fails
One issue for the WYSIWYG editor is internal links from resources / blogs etc - right now it would cause a full page reload. This should fix that and also open external links in a new tab.
Notes: