Skip to content
Snippets Groups Projects
Verified Commit 9c348c3e authored by MickGe's avatar MickGe :tiger2:
Browse files

add button to clean cookies

parent 18dda0cc
Branches dev
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
action-bar.js
+ 12
− 1
View file @ 9c348c3e
......@@ -6,9 +6,20 @@ actionBar.appendChild(sortButton);
sortButton.innerHTML = "⇅";
sortButton.title="Cliquer pour inverser l'ordre";
const cleanCookiesButton = document.createElement('button');
actionBar.appendChild(cleanCookiesButton);
cleanCookiesButton.innerHTML = "🍪";
cleanCookiesButton.title="Cliquer pour supprimer les cookies";
const reverseSort = () => {
const newsFeedEl = document.querySelector(".news-feed-el");
newsFeedEl.classList.toggle('reverse');
}
sortButton.addEventListener('click', reverseSort);
\ No newline at end of file
const cleanCookies = () => {
document.cookie = 'token=""; expires=Thu, 01 Jan 1970 00:00:01 GMT"; samesite=lax; secure';
document.cookie = 'instanceURL=""; expires=Thu, 01 Jan 1970 00:00:01 GMT"; samesite=lax; secure';
}
sortButton.addEventListener('click', reverseSort);
cleanCookiesButton.addEventListener('click', cleanCookies);
\ No newline at end of file
dist/assets/index-bdd0e28c.css → dist/assets/index-37a7e3fb.css
+ 1
− 0
View file @ 9c348c3e
:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}a{font-weight:500;color:#9ec5e8;text-decoration:inherit}a:hover{color:#5ea0da}body{margin:0;min-height:100vh}h1{font-size:2em;line-height:1.1;margin:2rem auto;padding-bottom:1rem;text-align:center;position:sticky;top:0;background-color:#000;box-shadow:#000 0 20px 20px}h1 em{opacity:50%}#bm_nb{margin-right:1rem;font-size:95%}#app,.presentation{max-width:920px;margin:0 auto;text-align:center;padding:2rem}.presentation{padding:0 2rem;text-align:start}.presentation .logo{max-width:1em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.news-feed-el{display:flex;flex-direction:column;position:relative}.news-feed-el.reverse{flex-direction:column-reverse}.toot{width:100%;padding:1em;margin:1.2em auto;border:solid #827d7d 1px;border-radius:8px;background:#242424;position:relative;z-index:20;overflow:hidden;text-overflow:ellipsis;max-height:1000vh;transition:opacity 1s .2s ease-in-out,max-height 1.5s .1s ease-out,padding 1s .8s ease-in-out,margin 1s .8s ease-in-out}.toot .banner{display:flex;align-items:center;flex-direction:row;justify-content:space-between}.toot .banner button.unbookmark{background-color:#6c0a0a;border:solid #827d7d 1px;transition:all .2s .1s ease-out}.toot .banner button.unbookmark:hover{transform:translate(2px,-2px);box-shadow:#000 -3px 3px 3px,#fff -3px 3px 4px 1px}.toot-content{text-align:start}.toot .attachments{display:flex;overflow:scroll;align-items:center;column-gap:1em}.toot .attachments img{max-width:380px;max-height:380px;margin:auto;border-radius:4px}.toot .account{display:flex;flex-direction:row;justify-content:start;align-items:center}.toot .account-avatar{width:46px;height:46px;border-radius:4px;overflow:hidden;margin-right:1em}.toot .account-avatar img{width:100%;height:100;object-fit:cover}.toot.disappeared{opacity:0;max-height:0;padding:0 1em;margin:0 auto}.date-modified{font-size:small;font-style:italic;text-align:end}
:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}a{font-weight:500;color:#9ec5e8;text-decoration:inherit}a:hover{color:#5ea0da}body{margin:0;min-height:100vh}h1{font-size:2em;line-height:1.1;margin:2rem auto;padding-bottom:1rem;text-align:center;position:sticky;top:0;background-color:#000;box-shadow:#000 0 20px 20px}h1 em{opacity:50%}#bm_nb{margin-right:1rem;font-size:95%}#app,.presentation{max-width:920px;margin:0 auto;text-align:center;padding:2rem}.presentation{padding:0 2rem;text-align:start}.presentation .logo{max-width:1em}button{border-radius:8px;border:solid #827d7d 1px;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;min-height:2.5rem;cursor:pointer;transition:all .2s .1s ease-out}button:hover{transform:translate(2px,-2px) scale(1.05);box-shadow:#000 -3px 3px 3px,#fff -3px 3px 4px 1px}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.actionbar button{margin:0 1em}.news-feed-el{display:flex;flex-direction:column;position:relative}.news-feed-el.reverse{flex-direction:column-reverse}.toot{width:100%;padding:1em;margin:1.2em auto;border:solid #827d7d 1px;border-radius:8px;background:#242424;position:relative;z-index:20;overflow:hidden;text-overflow:ellipsis;max-height:1000vh;transition:opacity 1s .2s ease-in-out,max-height 1.5s .1s ease-out,padding 1s .8s ease-in-out,margin 1s .8s ease-in-out}.toot .banner{display:flex;align-items:center;flex-direction:row;justify-content:space-between}.toot .banner button.unbookmark{background-color:#6c0a0a}.toot-content{text-align:start}.toot .attachments{display:flex;overflow:scroll;align-items:center;column-gap:1em}.toot .attachments img{max-width:380px;max-height:380px;margin:auto;border-radius:4px}.toot .account{display:flex;flex-direction:row;justify-content:start;align-items:center}.toot .account-avatar{width:46px;height:46px;border-radius:4px;overflow:hidden;margin-right:1em}.toot .account-avatar img{width:100%;height:100;object-fit:cover}.toot.disappeared{opacity:0;max-height:0;padding:0 1em;margin:0 auto}.date-modified{font-size:small;font-style:italic;text-align:end}
dist/assets/index-84fa1614.js deleted 100644 → 0
+ 0
− 11
View file @ 18dda0cc
(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))n(t);new MutationObserver(t=>{for(const r of t)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function c(t){const r={};return t.integrity&&(r.integrity=t.integrity),t.referrerPolicy&&(r.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?r.credentials="include":t.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function n(t){if(t.ep)return;t.ep=!0;const r=c(t);fetch(t.href,r)}})();const m=document.createElement("div");m.classList.add("news-feed-el");const v=async(e,o)=>await fetch(e,{mode:"cors",headers:{Authorization:`Bearer ${o}`}}).then(n=>n.json().then(t=>{const r=n.headers.get("link").split(",").map(s=>s.match(/&m(ax|in)_id=\d+/g));return[t,...r]}),n=>{console.error(n)}),L=async(e,o,c,n)=>{const t=`${e}api/v1/statuses/${c}/unbookmark`;try{await fetch(t,{mode:"cors",method:"POST",headers:{Authorization:`Bearer ${o}`}}).then(r=>{console.info(r.url),n.classList.add("disappeared");const s=document.querySelector("#bm_nb").textContent-=1;document.title=`${s} Mastodon unBookmarks`},r=>{console.error(r)})}catch(r){console.error(r)}},w=e=>e.charAt(0).toUpperCase()+e.slice(1),$=async(e,o)=>await v(e,o),E=(e,o)=>`<div id="${e.id}" class="toot">
<div class="banner">
<a href="${e.account.url}" target="_blank" title="Voir le profil sur l'instance d'origine"><div class="account"><div class="account-avatar"><img src="${e.account.avatar}" /></div><div class="account.username">${e.account.display_name}</div></div></a>
<button title="Cliquer pour retirer le marque-page" class="unbookmark">&#128278;</button>
</div>
<div class="toot-content">${e.content}</div>
${o.length?o.join(""):""}
<div class="date-modified">
<a href="${e.uri}" target="_blank" title="Voir le pouet sur Mastodon">${w(e.created_at)} <i class="fa fa-up-right-from-square" aria-hidden="true"></i></a>
</div>
</div>`,_=async(e,o)=>{const c=`${e}api/v1/bookmarks/?limit=40`;try{const n=[];let t,r="";do{const a=await $(c+t,o);n.push(...a[0]),[t,r]=[a[1],a[2]]}while(r);n.reverse();const s={weekday:"long",year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"numeric",timeZone:"Europe/Paris"};n.forEach(a=>{a.created_at=new Date(a.created_at).toLocaleString("fr-FR",s),a.account.display_name=a.account.display_name.replaceAll(/:\w+:/g,"").trim()||a.account.username;const d=new RegExp('(?<=rel="tag")',"g");a.content=a.content.replaceAll(d,' target="_blank"');const i=a.media_attachments.filter(u=>u.type=="image").map(u=>`<img src="${u.preview_url}" title="${u.description}"/>`);i.length&&i.unshift('<div class="attachments">')&&i.push("</div>"),m.innerHTML+=E(a,i)}),m.querySelectorAll(".unbookmark").forEach(a=>{const d=a.parentElement.parentElement,i=d.id;a.addEventListener("click",()=>L(e,o,i,d))});const y=n.length;return{newsFeedEl:m,bookmarksNb:y}}catch(n){console.error(n)}return"Nothing to display…"},f=document.createElement("div");f.classList.add("actionbar");const h=document.createElement("button");f.appendChild(h);h.innerHTML="&#x21C5;";h.title="Cliquer pour inverser l'ordre";const q=()=>{document.querySelector(".news-feed-el").classList.toggle("reverse")};h.addEventListener("click",q);var k;const l=Object.fromEntries((k=document.cookie)==null?void 0:k.split(";").map(e=>e.trim().split("="))),g=prompt("Token? (read:bookmarks & write:bookmarks)",l==null?void 0:l.token);let p=prompt("URL instance?",l==null?void 0:l.instanceURL);p.startsWith("https://")||(p="https://".concat(p));const b=new URL(p);document.cookie=`token=${g}; max-age=604800; samesite=lax; secure`;document.cookie=`instanceURL=${b}; max-age=604800; samesite=lax; secure`;const x=async()=>{const e=await _(b,g);document.querySelector("#app").appendChild(f),document.querySelector("#app").appendChild((e==null?void 0:e.newsFeedEl)||e),document.querySelector("#bm_nb").textContent=(e==null?void 0:e.bookmarksNb)||"Ø",e!=null&&e.bookmarksNb&&(document.title=`${e.bookmarksNb} Mastodon unBookmarks`)};x();
dist/assets/index-85fb6efb.js 0 → 100644
+ 11
− 0
View file @ 9c348c3e
(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))r(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const s of n.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function i(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerPolicy&&(n.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?n.credentials="include":t.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function r(t){if(t.ep)return;t.ep=!0;const n=i(t);fetch(t.href,n)}})();const m=document.createElement("div");m.classList.add("news-feed-el");const L=async(e,a)=>await fetch(e,{mode:"cors",headers:{Authorization:`Bearer ${a}`}}).then(r=>r.json().then(t=>{const n=r.headers.get("link").split(",").map(s=>s.match(/&m(ax|in)_id=\d+/g));return[t,...n]}),r=>{console.error(r)}),w=async(e,a,i,r)=>{const t=`${e}api/v1/statuses/${i}/unbookmark`;try{await fetch(t,{mode:"cors",method:"POST",headers:{Authorization:`Bearer ${a}`}}).then(n=>{console.info(n.url),r.classList.add("disappeared");const s=document.querySelector("#bm_nb").textContent-=1;document.title=`${s} Mastodon unBookmarks`},n=>{console.error(n)})}catch(n){console.error(n)}},E=e=>e.charAt(0).toUpperCase()+e.slice(1),$=async(e,a)=>await L(e,a),C=(e,a)=>`<div id="${e.id}" class="toot">
<div class="banner">
<a href="${e.account.url}" target="_blank" title="Voir le profil sur l'instance d'origine"><div class="account"><div class="account-avatar"><img src="${e.account.avatar}" /></div><div class="account.username">${e.account.display_name}</div></div></a>
<button title="Cliquer pour retirer le marque-page" class="unbookmark">&#128278;</button>
</div>
<div class="toot-content">${e.content}</div>
${a.length?a.join(""):""}
<div class="date-modified">
<a href="${e.uri}" target="_blank" title="Voir le pouet sur Mastodon">${E(e.created_at)} <i class="fa fa-up-right-from-square" aria-hidden="true"></i></a>
</div>
</div>`,R=async(e,a)=>{const i=`${e}api/v1/bookmarks/?limit=40`;try{const r=[];let t,n="";do{const o=await $(i+t,a);r.push(...o[0]),[t,n]=[o[1],o[2]]}while(n);r.reverse();const s={weekday:"long",year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"numeric",timeZone:"Europe/Paris"};r.forEach(o=>{o.created_at=new Date(o.created_at).toLocaleString("fr-FR",s),o.account.display_name=o.account.display_name.replaceAll(/:\w+:/g,"").trim()||o.account.username;const d=new RegExp('(?<=rel="tag")',"g");o.content=o.content.replaceAll(d,' target="_blank"');const l=o.media_attachments.filter(u=>u.type=="image").map(u=>`<img src="${u.preview_url}" title="${u.description}"/>`);l.length&&l.unshift('<div class="attachments">')&&l.push("</div>"),m.innerHTML+=C(o,l)}),m.querySelectorAll(".unbookmark").forEach(o=>{const d=o.parentElement.parentElement,l=d.id;o.addEventListener("click",()=>w(e,a,l,d))});const y=r.length;return{newsFeedEl:m,bookmarksNb:y}}catch(r){console.error(r)}return"Nothing to display…"},h=document.createElement("div");h.classList.add("actionbar");const k=document.createElement("button");h.appendChild(k);k.innerHTML="&#x21C5;";k.title="Cliquer pour inverser l'ordre";const f=document.createElement("button");h.appendChild(f);f.innerHTML="&#127850;";f.title="Cliquer pour supprimer les cookies";const x=()=>{document.querySelector(".news-feed-el").classList.toggle("reverse")},U=()=>{document.cookie='token=""; expires=Thu, 01 Jan 1970 00:00:01 GMT"; samesite=lax; secure',document.cookie='instanceURL=""; expires=Thu, 01 Jan 1970 00:00:01 GMT"; samesite=lax; secure'};k.addEventListener("click",x);f.addEventListener("click",U);var g;const c=Object.fromEntries((g=document.cookie)==null?void 0:g.split(";").map(e=>e.trim().split("="))),b=prompt("Token? (read:bookmarks & write:bookmarks)",c==null?void 0:c.token),_=c!=null&&c.instanceURL?decodeURIComponent(c.instanceURL):"";let p=prompt("URL instance?",_);p.startsWith("https://")||(p="https://".concat(p));const v=new URL(p);document.cookie=`token=${b}; max-age=604800; samesite=lax; secure`;document.cookie=`instanceURL=${encodeURIComponent(v)}; max-age=604800; samesite=lax; secure`;const q=async()=>{const e=await R(v,b);document.querySelector("#app").appendChild(h),document.querySelector("#app").appendChild((e==null?void 0:e.newsFeedEl)||e),document.querySelector("#bm_nb").textContent=(e==null?void 0:e.bookmarksNb)||"Ø",e!=null&&e.bookmarksNb&&(document.title=`${e.bookmarksNb} Mastodon unBookmarks`)};q();
dist/index.html
+ 3
− 3
View file @ 9c348c3e
......@@ -5,15 +5,15 @@
<link rel="icon" type="image/svg+xml" href="/Mastodon_Logotype_(Simple).svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mastodon unBookmarks</title>
<script type="module" crossorigin src="/assets/index-84fa1614.js"></script>
<link rel="stylesheet" href="/assets/index-bdd0e28c.css">
<script type="module" crossorigin src="/assets/index-85fb6efb.js"></script>
<link rel="stylesheet" href="/assets/index-37a7e3fb.css">
</head>
<body>
<h1><span id="bm_nb"></span>Mastodon <em>un</em>Bookmarks</h1>
<div class="presentation">
<p>Tout se passe dans le navigateur.</p>
<p>Depuis son compte <em>Mastodon</em>, il faut générer un jeton d'accès ayant pour droit <code>read:bookmarks</code> et <code>write:bookmarks</code>.</p>
<p>Un cookie permet de stocker le jeton et l'adresse de l'intance pendant 7 jours, il faut donc supprimer le cookie ou utiliser la navigation privée pour ne pas qu'il demeure.</p>
<p>Un cookie permet de stocker le jeton et l'adresse de l'intance pendant 7 jours, il faut donc supprimer le cookie (en cliquant sur le bouton ci-dessous) ou utiliser la navigation privée pour ne pas qu'il demeure.</p>
<p><img class="logo" src="https://about.gitlab.com/nuxt-images/ico/favicon-32x32.png" alt="Logo de GitLab"/> Le code source est là : <a href="https://forge.tedomum.net/mickge/mastodon-bookmarks" target="_blank">https://forge.tedomum.net/mickge/mastodon-bookmarks</a>.</p>
</div>
<div id="app"></div>
......
index.html
+ 1
− 1
View file @ 9c348c3e
......@@ -11,7 +11,7 @@
<div class="presentation">
<p>Tout se passe dans le navigateur.</p>
<p>Depuis son compte <em>Mastodon</em>, il faut générer un jeton d'accès ayant pour droit <code>read:bookmarks</code> et <code>write:bookmarks</code>.</p>
<p>Un cookie permet de stocker le jeton et l'adresse de l'intance pendant 7 jours, il faut donc supprimer le cookie ou utiliser la navigation privée pour ne pas qu'il demeure.</p>
<p>Un cookie permet de stocker le jeton et l'adresse de l'intance pendant 7 jours, il faut donc supprimer le cookie (en cliquant sur le bouton ci-dessous) ou utiliser la navigation privée pour ne pas qu'il demeure.</p>
<p><img class="logo" src="https://about.gitlab.com/nuxt-images/ico/favicon-32x32.png" alt="Logo de GitLab"/> Le code source est là : <a href="https://forge.tedomum.net/mickge/mastodon-bookmarks" target="_blank">https://forge.tedomum.net/mickge/mastodon-bookmarks</a>.</p>
</div>
<div id="app"></div>
......
main.js
+ 7
− 3
View file @ 9c348c3e
......@@ -6,13 +6,15 @@ const cookies = Object.fromEntries(document.cookie?.split(";").map(el => el.trim
const token = prompt("Token? (read:bookmarks & write:bookmarks)", cookies?.token);
let promptURL = prompt("URL instance?", cookies?.instanceURL);
const cookieInstanceURL = cookies?.instanceURL ? decodeURIComponent(cookies.instanceURL) : "";
let promptURL = prompt("URL instance?", cookieInstanceURL);
if (!promptURL.startsWith("https://")) promptURL = 'https://'.concat(promptURL);
const instanceURL = new URL(promptURL);
document.cookie = `token=${token}; max-age=604800; samesite=lax; secure`;
document.cookie = `instanceURL=${instanceURL}; max-age=604800; samesite=lax; secure`;
document.cookie = `instanceURL=${encodeURIComponent(instanceURL)}; max-age=604800; samesite=lax; secure`;
const appendChildren = async () => {
const content = await getData(instanceURL, token);
......@@ -23,4 +25,6 @@ const appendChildren = async () => {
document.title = `${content.bookmarksNb} Mastodon unBookmarks`;
}
appendChildren();
\ No newline at end of file
appendChildren();
// YaehBqDsKZwFtM7Nqa0ZO7TPE9RKQ_kMgzRNoRu7PZ0
\ No newline at end of file
style.scss
+ 17
− 15
View file @ 9c348c3e
......@@ -36,7 +36,7 @@ h1 {
font-size: 2em;
line-height: 1.1;
margin: 2rem auto;
padding-bottom: 1rem;
padding: 1rem 0;
text-align: center;
position: sticky;
top: 0;
......@@ -70,21 +70,29 @@ h1 {
button {
border-radius: 8px;
border: 1px solid transparent;
border: solid #827d7d 1px;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
min-height: 2.5rem;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
transition: all 0.2s 0.1s ease-out;
&:hover {
transform: translate(2px, -2px) scale(1.05, 1.05);
box-shadow: black -3px 3px 3px, white -3px 3px 4px 1px;
}
&:focus,
&:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
.actionbar {
button {
margin: 0 1em;
}
}
.news-feed-el {
......@@ -116,12 +124,6 @@ button:focus-visible {
justify-content: space-between;
button.unbookmark {
background-color: rgb(108, 10, 10);
border: solid #827d7d 1px;
transition: all 0.2s 0.1s ease-out;
&:hover {
transform: translate(2px, -2px);
box-shadow: black -3px 3px 3px, white -3px 3px 4px 1px;
}
}
}
&-content {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment