marky

bookmarklet.html (3203B)

---

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>bookmarklet | marky</title>
     <link rel="stylesheet" href="/styles.css" />
     <style>
       a.btn{display:inline-block;background:#222;color:#fff;text-decoration:none;padding:10px 14px;border-radius:6px}
       .notice{margin-top:12px;color:#666}
     </style>
     <script src="/vendor/vue.global.prod.js"></script>
   </head>
   <body>
     <div id="hdr">{{HEADER}}</div>
     <main class="container">
       <h2>Save to Marky</h2>
       <p>Drag this to your bookmarks bar:</p>
       <p>
         <a class="btn" href="javascript:(function(){try{var d=document,s=encodeURIComponent,u=location.href,t=document.title,sel='';var ae=d.activeElement;if(ae&&((ae.tagName==='TEXTAREA')||(ae.tagName==='INPUT'&&/^(?:text|search|url|tel|email)$/i.test(ae.type)))){var ss=ae.selectionStart||0,se=ae.selectionEnd||0;if(typeof ss==='number'&&typeof se==='number'&&se>ss){sel=ae.value.substring(ss,se)}}if(!sel&&d.getSelection){sel=d.getSelection().toString()}else if(!sel&&window.getSelection){sel=window.getSelection().toString()}else if(!sel&&d.selection){sel=d.selection.createRange().text}var win=window.open('{{ORIGIN}}/bookmarklet?u='+s(u)+'&t='+s(t)+'&d='+s(sel)+'{{AUTH}}','marky','width=520,height=520');if(win){win.focus()}}catch(e){alert('Could not open Marky: '+e)}})();">Save to Marky</a>
       </p>
       <div class="notice">
         <p>When clicked on any page, this opens a small form prefilled with the page URL and title. On submit, it saves to your Marky account.</p>
       </div>
     </main>
     <script>
       const { createApp } = window.Vue;
       createApp({
         data(){ return { me:null, api:{ present:false, value:'', show:false, busy:false, copied:false } } },
         async mounted(){
           try { const r = await fetch('/me'); if (r.ok) this.me = await r.json(); } catch {}
           if (this.me && this.me.username) {
             try { const r = await fetch('/api/token'); if (r.ok) { const j = await r.json(); this.api.present = !!j.present; } } catch {}
           }
         },
         methods:{
           async logout(){ await fetch('/logout', { method:'POST' }).catch(()=>{}); location.replace('/'); },
           async revealApiKey(){ this.api.busy=true; try { const r=await fetch('/api/token?reveal=1'); if(!r.ok) throw 0; const j=await r.json(); this.api.present=true; this.api.value=j.api_token||''; this.api.show=true; this.api.copied=false; } finally { this.api.busy=false; } },
           async generateApiKey(){ this.api.busy=true; try { const r=await fetch('/api/token',{method:'POST'}); if(!r.ok) throw 0; const j=await r.json(); this.api.present=true; this.api.value=j.api_token||''; this.api.show=true; this.api.copied=false; } finally { this.api.busy=false; } },
           async regenerateApiKey(){ return this.generateApiKey(); },
           async copyApiKey(){ try { await navigator.clipboard.writeText(this.api.value||''); this.api.copied=true; setTimeout(()=>{ this.api.copied=false; },1500); } catch(e){ alert('Failed to copy token'); } },
         }
       }).mount('#hdr');
     </script>
   </body>
   </html>