github.com/avenga/couper@v1.12.2/docs/website/app.vue (about) 1 <template> 2 <NuxtLayout> 3 <NuxtPage /> 4 </NuxtLayout> 5 </template> 6 7 <script setup> 8 const { result, search } = useAlgoliaSearch("docs") 9 10 onMounted(async () => { 11 setInterval(() => { 12 for (const pre of document.getElementsByTagName("pre")) { 13 pre.title = "Click to copy to clipboard" 14 pre.onclick = (event) => { 15 const target = event.target 16 navigator.clipboard.writeText(target.innerText) 17 target.classList.add("copied") 18 setTimeout(() => target.classList.remove("copied"), 1500) 19 } 20 } 21 }, 1000) 22 23 document.addEventListener('keyup', e => { 24 if (e.key === "Escape") { 25 const reset = document.querySelector("button.ais-SearchBox-reset") 26 if (reset) { 27 reset.click() 28 } 29 } 30 }) 31 }) 32 </script> 33 34 <style> 35 .prose pre { 36 position: relative; 37 pointer-events: none; 38 line-height: 1.5rem 39 } 40 41 .prose { 42 max-width: 80%; 43 } 44 45 pre::before { 46 content: "📋"; 47 position: absolute; 48 right: 1rem; 49 font-size: 1.5rem; 50 cursor: pointer; 51 pointer-events: auto; 52 } 53 54 pre:hover::before { 55 filter: brightness(1.2); 56 } 57 58 pre.copied::after { 59 font-family: sans-serif; 60 content: "Copied! ✅"; 61 position: absolute; 62 background: #475569; 63 top: 0.5rem; 64 right: 1rem; 65 padding: 2px 10px; 66 border-radius: 5px; 67 } 68 </style>