multipleof4/4ev.link
1
0
Fork 0
mirror of https://github.com/multipleof4/4ev.link.git synced 2026-01-13 15:57:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Make shorten button work with latest AlpineJS

Browse Source
This commit is contained in:
multipleof4
2025-09-26 15:42:37 -07:00
parent 941eee9142
commit 19f2c659d2
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -49,6 +49,7 @@
[data-theme=dark] .bgfx:before{background:radial-gradient(60% 60% at 50% 0,rgba(255,255,255,.04),transparent)} [data-theme=dark] .bgfx:before{background:radial-gradient(60% 60% at 50% 0,rgba(255,255,255,.04),transparent)}
a{color:inherit} a{color:inherit}
</style> </style>
<script src="//unpkg.com/alpinejs" defer></script>
</head> </head>
<body class="bgfx"> <body class="bgfx">
<div class="container" x-data="app()" x-init="init()"> <div class="container" x-data="app()" x-init="init()">
@@ -155,17 +156,17 @@ a{color:inherit}
</div> </div>
<div class="note">Free plan • Randomized links • Black/White/Gray UI</div> <div class="note">Free plan • Randomized links • Black/White/Gray UI</div>
</footer> </footer>
<div class="toast" x-cloak x-show="msg" x-text="msg" role="status" aria-live="polite"></div>
</div> </div>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<script> <script>
const app=()=>({t:localStorage.getItem('theme')||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'),url:'',busy:0,short:'',links:JSON.parse(localStorage.getItem('4ev.links')||'[]'),base:'https://4ev.link',msg:'', const app=()=>({t:localStorage.getItem('theme')||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'),url:'',busy:0,short:'',links:JSON.parse(localStorage.getItem('4ev.links')||'[]'),base:location.origin,msg:'',
init(){document.documentElement.setAttribute('data-theme',this.t);this.freshIcons()}, init(){document.documentElement.setAttribute('data-theme',this.t);this.freshIcons()},
setTheme(v){this.t=v;localStorage.setItem('theme',v);document.documentElement.setAttribute('data-theme',v);this.freshIcons()}, setTheme(v){this.t=v;localStorage.setItem('theme',v);document.documentElement.setAttribute('data-theme',v);this.freshIcons()},
toggleTheme(){this.setTheme(this.t==='light'?'dark':'light')}, toggleTheme(){this.setTheme(this.t==='light'?'dark':'light')},
val(u){try{new URL(u);return 1}catch(e){return 0}}, val(u){try{new URL(u);return 1}catch(e){return 0}},
async shorten(){if(this.busy||!this.val(this.url))return this.toast('Enter a valid URL');this.busy=1;this.freshIcons();try{const r=await fetch(this.base,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.url.trim()})});if(!r.ok)throw'';const d=await r.json();this.short=d.shortUrl;this.links.unshift({slug:d.slug,target:d.target,created:Date.now()});this.links.splice(20);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.url='';this.toast('Link created')}catch(e){this.toast('Failed to shorten link')}finally{this.busy=0;this.freshIcons()}}, async shorten(){if(this.busy||!this.val(this.url))return this.toast('Enter a valid URL');this.busy=1;this.freshIcons();try{const r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.url.trim()})});if(!r.ok)throw'';const d=await r.json();this.short=d.shortUrl;this.links.unshift({slug:d.slug,target:d.target,created:Date.now()});this.links.splice(20);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.url='';this.toast('Link created')}catch(e){this.toast('Failed to shorten link')}finally{this.busy=0;this.freshIcons()}},
copy(txt){navigator.clipboard?.writeText(txt).then(()=>this.toast('Copied')).catch(()=>{let t=document.createElement('textarea');t.value=txt;document.body.appendChild(t);t.select();document.execCommand('copy');t.remove();this.toast('Copied')})}, copy(txt){navigator.clipboard?.writeText(txt).then(()=>this.toast('Copied')).catch(()=>{let t=document.createElement('textarea');t.value=txt;document.body.appendChild(t);t.select();document.execCommand('copy');t.remove();this.toast('Copied')})},
toast(m){this.msg=m;this.freshIcons();clearTimeout(this._to);this._to=setTimeout(()=>this.msg='',2000)}, toast(m){this.msg=m;this.freshIcons();clearTimeout(this._to);this._to=setTimeout(()=>this.msg='',2000)},
del(i){this.links.splice(i,1);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.freshIcons()}, del(i){this.links.splice(i,1);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.freshIcons()},
@@ -174,8 +175,5 @@ freshIcons(){this.$nextTick(()=>(lucide?.createIcons()))}
document.addEventListener('DOMContentLoaded',()=>{lucide.createIcons()}); document.addEventListener('DOMContentLoaded',()=>{lucide.createIcons()});
</script> </script>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style> <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
<div x-data="{m:''}" x-init="$watch('$root.__x.$data.msg',v=>{m=v})">
<div class="toast" x-cloak x-show="$root.__x.$data.msg" x-text="$root.__x.$data.msg" role="status" aria-live="polite"></div>
</div>
</body> </body>
</html> </html>