From ecbf7ee6d14df8471ee118ddc868c0f943a5b740 Mon Sep 17 00:00:00 2001
From: bread <136384195+bbbreaddd@users.noreply.github.com>
Date: Fri, 13 Feb 2026 02:51:32 -0800
Subject: [PATCH] Base64 Dialog (#4751)

* Base64 Dialog

* fix light mode with base64 dialog

* improve ui

* add to dialog message
---
 docs/.vitepress/theme/Layout.vue              | 38 ++++++++-
 .../theme/components/Base64Dialog.vue         | 83 +++++++++++++++++++
 2 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vitepress/theme/components/Base64Dialog.vue

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 17b8bbe56..8c4786b71 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
+import { ref, onMounted, onUnmounted, provide, nextTick } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import Announcement from './components/Announcement.vue'
 import Sidebar from './components/SidebarCard.vue'
+import Base64Dialog from './components/Base64Dialog.vue'
 import { useTheme } from './themes/themeHandler'
 
 const { isDark } = useData()
@@ -28,7 +30,6 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     )}px at ${x}px ${y}px)`
   ]
 
-  // @ts-expect-error
   await document.startViewTransition(async () => {
     isDark.value = !isDark.value
     // Sync with theme handler
@@ -47,6 +48,40 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
 })
 
 const { Layout } = DefaultTheme
+const showBase64Dialog = ref(false)
+const formattedUrl = ref('')
+
+const handleClick = (e: MouseEvent) => {
+  // Check if the clicked element is a link or within a link
+  const target = e.target as HTMLElement
+  const link = target.closest ? target.closest('a') : null
+  
+  if (link) {
+    const href = (link as HTMLAnchorElement).href
+    
+    if (typeof href === 'string') {
+      if (href.includes('https://rentry.co/FMHYB64') || href.startsWith('https://rentry.co/FMHYB64')) {
+        const dontShow = localStorage.getItem('fmhy-base64-dialog-preference')
+        if (dontShow === 'true') {
+          return // Let the link click proceed normally
+        }
+        
+        e.preventDefault()
+        e.stopPropagation()
+        formattedUrl.value = href
+        showBase64Dialog.value = true
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClick, { capture: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', handleClick, { capture: true })
+})
 </script>
 
 <template>
@@ -65,6 +100,7 @@ const { Layout } = DefaultTheme
     </template>
     <Content />
   </Layout>
+  <Base64Dialog :show="showBase64Dialog" :url="formattedUrl" @close="showBase64Dialog = false" />
 </template>
 
 <style>
diff --git a/docs/.vitepress/theme/components/Base64Dialog.vue b/docs/.vitepress/theme/components/Base64Dialog.vue
new file mode 100644
index 000000000..00afc2c68
--- /dev/null
+++ b/docs/.vitepress/theme/components/Base64Dialog.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  show: boolean
+  url: string
+}>()
+
+const emit = defineEmits(['close'])
+const dontShowAgain = ref(false)
+
+const close = () => {
+  emit('close')
+}
+
+const openLink = () => {
+  if (dontShowAgain.value) {
+    localStorage.setItem('fmhy-base64-dialog-preference', 'true')
+  }
+  window.open(props.url, '_blank')
+  close()
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-show="show" class="fixed inset-0 z-[99999] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click="close">
+      <div 
+        class="p-6 rounded-xl shadow-2xl max-w-md w-full"
+        style="background-color: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);"
+        @click.stop
+      >
+        <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+          <div class="i-carbon:information-filled text-primary" />
+          Base64 Encoded Link
+        </h2>
+        <p class="mb-4 text-text-1">
+          The link you clicked leads to a Base64 encoded string.
+        </p>
+        <p class="mb-2 text-text-1">
+          To decode it, you can use:
+        </p>
+        <ul class="list-disc list-inside mb-4 space-y-2 text-text-1">
+          <li>
+            An online tool: <a href="https://www.base64decode.org/" target="_blank" rel="noreferrer" class="text-primary hover:underline font-medium">Base64 Decode</a>
+          </li>
+          <li>
+            A userscript: <a href="https://greasyfork.org/en/scripts/485772-fmhy-base64-auto-decoder" target="_blank" rel="noreferrer" class="text-primary hover:underline font-medium">FMHY Base64 Auto Decoder</a> (using a <a href="/internet-tools#userscripts" target="_blank" class="text-primary hover:underline font-medium">userscript manager</a>)
+          </li>
+        </ul>
+        
+        <p class="mb-6 text-sm text-text-2">
+          For more options: <a href="/text-tools#encode-decode" target="_blank" class="text-primary hover:underline font-medium">Base64 Decoders</a>
+        </p>
+        
+        <div class="flex items-center gap-2 mb-4">
+          <input 
+            type="checkbox" 
+            id="dont-show" 
+            v-model="dontShowAgain"
+            class="rounded border-border bg-bg-input text-brand focus:ring-brand"
+          >
+          <label for="dont-show" class="text-sm text-text-1 select-none">Don't show again</label>
+        </div>
+
+        <div class="flex justify-end gap-3">
+          <button
+            @click="close"
+            class="px-4 py-2 border border-border rounded-lg hover:bg-bg-input transition-colors font-medium text-text-2"
+          >
+            Cancel
+          </button>
+          <button
+            @click="openLink"
+            class="px-4 py-2 border-2 border-brand text-brand bg-[var(--vp-c-bg-alt)] hover:bg-brand hover:text-white rounded-lg transition-colors font-medium"
+          >
+            Open Link
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>