commit 8ad1dac89f6320f5c57f8cf4ed8e75dd4327281f
parent 02e3adf488f38dda63168cd5d530054e2bf8528b
Author: Amit Dutta <mail@amit.is-a.dev>
Date: Mon, 17 Aug 2026 12:00:15 +0530
Merge pull request #47 from notamitgamer2/fix/external-link-warning-modal
Improve external link warning modal
Diffstat:
1 file changed, 22 insertions(+), 3 deletions(-)
diff --git a/docs/.vitepress/theme/components/ExternalLinkWarning.vue b/docs/.vitepress/theme/components/ExternalLinkWarning.vue
@@ -12,10 +12,19 @@ const safeDomains = [
'raw.usercontent.amit.is-a.dev'
]
+const lockScroll = () => {
+ document.body.style.overflow = 'hidden'
+}
+
+const unlockScroll = () => {
+ document.body.style.overflow = ''
+}
+
const reset = () => {
isVisible.value = false
pendingUrl.value = ''
copied.value = false
+ unlockScroll()
}
const handleGlobalClick = (e: MouseEvent) => {
@@ -31,12 +40,16 @@ const handleGlobalClick = (e: MouseEvent) => {
e.preventDefault()
pendingUrl.value = target.href
isVisible.value = true
+ lockScroll()
}
} catch {}
}
onMounted(() => document.addEventListener('click', handleGlobalClick))
-onUnmounted(() => document.removeEventListener('click', handleGlobalClick))
+onUnmounted(() => {
+ document.removeEventListener('click', handleGlobalClick)
+ unlockScroll()
+})
const openLink = () => {
window.open(pendingUrl.value, '_blank', 'noopener,noreferrer')
@@ -61,7 +74,8 @@ const copyUrl = async () => {
<div class="handle"></div>
<p class="warning">
- This link will take you outside the website. I am not responsible for the content of external sites.
+ <strong>You're about to leave this site.</strong><br />
+ This link leads to an external site I don't control, and can't vouch for its content. Continue anyway?
</p>
<div class="url-box">{{ pendingUrl }}</div>
@@ -84,7 +98,7 @@ const copyUrl = async () => {
<polyline points="15 3 21 3 21 9"/>
<line x1="10" y1="14" x2="21" y2="3"/>
</svg>
- Open Link
+ Continue
</button>
</div>
</div>
@@ -134,6 +148,11 @@ const copyUrl = async () => {
text-align: center;
}
+.warning strong {
+ color: var(--vp-c-text-1);
+ font-size: 0.95rem;
+}
+
.url-box {
font-size: 0.8rem;
font-family: var(--vp-font-family-mono);
