andreasmischke/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Bookmarklets by Andreas Mischke</title>
    <style>
      html, body {
        font-family: sans-serif;
      }
      .drag-hint {
        display: flex;
        margin: 0.5rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        max-width: 25rem;
        color: #777;
        stroke: currentColor;
        background-color: initial;
        transition: background-color 500ms 1500ms;
      }
      .drag-hint--highlighted {
        background-color: #ffff9a;
        transition: background-color 500ms 0ms;
      }
      .drag-hint__arrow {
        margin-top: 0.2rem;
        margin-left: 3rem;
        margin-right: 0.5rem;
        flex-shrink: 0;
      }
      .bookmarklet-section {
        padding: 1rem;
        margin: 2rem 0;
        background: #eee;
      }
      .bookmarklet-section:first-child {
        margin-top: 0px;
      }
      .button {
        padding: 1rem;
        display: inline-block;
        background: #c5eeff;
        border-radius: 5rem;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="drag-hint">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="50" viewBox="0 0 30 50" fill="none" class="drag-hint__arrow">
        <path d="M 29 1 C 9 1 5.16667 32.3333 5 49 M 5 49 L 9 45 M 1 45 L 5 49" stroke-linecap="round"></path>
      </svg>
      To use one of the bookmarklets, drag its blue button to your browser bookmark bar and use it from there
    </div>
    <main>
      <section class="bookmarklet-section">
        <a
          class="button"
          href="javascript:void function()%7B(function()%7B&quot;use strict&quot;%3Bconst a%3D%5B...document.querySelectorAll(&quot;.board:not(.new)&quot;)%5D,b%3Da.map(a%3D>%7Bconst b%3Da.querySelector(&quot;.board-header&quot;).textContent,c%3D%5B...a.querySelectorAll(&quot;.public .card-description&quot;)%5D.map(a%3D>a.textContent)%3Breturn%7Btitle:b,cards:c%7D%7D),c%3D%5B...document.querySelectorAll(&quot;.action-point-content&quot;)%5D.map(a%3D>a.textContent),d%3Ddocument.createElement(&quot;div&quot;)%3Bd.setAttribute(&quot;style&quot;,&quot;position:absolute%3Bwidth:100vw%3Bheight:100vh%3Btop:0%3Bleft:0%3Bz-index:999%3Bbackground:%23fffc&quot;)%3Bconst e%3Ddocument.createElement(&quot;div&quot;)%3Be.setAttribute(&quot;style&quot;,&quot;position:absolute%3Bleft:10vw%3Btop:10vh%3Bheight:80vh%3Bwidth:80vw%3Bbackground:white%3Bbox-shadow:0 0 16px %23000c%3Bpadding:2rem%3Bbox-sizing:border-box&quot;),e.setAttribute(&quot;contenteditable&quot;,&quot;true&quot;),e.innerHTML%3D&quot;<table><thead><tr>&quot;%2Bb.map(a%3D>%60<th><b>%24%7Ba.title%7D</b></th>%60).join(&quot;&quot;)%2B&quot;</tr></thead><tbody><tr>&quot;%2Bb.map(a%3D>&quot;<td><ul>&quot;%2Ba.cards.map(a%3D>%60<li>%24%7Ba%7D</li>%60).join(&quot;&quot;)%2B&quot;</li></ul></td>&quot;).join(&quot;&quot;)%2B&quot;</tr></tbody></table><h2>Action items</h2>&quot;%2Bc.map(a%3D>%60<div data-node-type%3D&quot;actionList&quot;><div data-task-state%3D&quot;TODO&quot;>%24%7Ba%7D</div></div>%60).join(&quot;&quot;)%3Bconst f%3Ddocument.createElement(&quot;div&quot;)%3Bf.setAttribute(&quot;style&quot;,&quot;position:absolute%3Bright:1rem%3Btop:1rem%3Bfont-size:2rem%3Bline-height:3rem%3Bwidth:3rem%3Bbackground:crimson%3Bborder-radius:50%25%3Btext-align:center%3Bdisplay:block%3Bcolor:white%3Buser-select:none%3Bcursor:pointer&quot;),f.textContent%3D&quot;%5Cu2715&quot;,f.onclick%3D()%3D>document.body.removeChild(d),d.appendChild(e),d.appendChild(f),document.body.appendChild(d),e.focus(),document.execCommand(&quot;selectAll&quot;,!1,null)%7D)()%7D()%3B"
        >Export Retrotool to Confluence</a>
        <p>
          At work we use <a href="https://retrotool.io/">retrotool.io</a> for our Scrum Retrospectives
          and archive the contents in <a href="https://www.atlassian.com/software/confluence">Confluence</a>.
          To reduce the manual copy-paste work, I created this bookmarklet, to easily get the card contents
          and format it in a table that can easily be pasted into the Confluence page editor.
        </p>
      </section>
    </main>
    <script>
      var dragHint = document.querySelector('.drag-hint');
      dragHint.addEventListener('transitionend', () => dragHint.classList.remove('drag-hint--highlighted'));
      document
        .querySelectorAll('.bookmarklet-section .button')
        .forEach(link => link.addEventListener('click', event => {
          event.preventDefault();
          dragHint.classList.add('drag-hint--highlighted');
        }));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bookmarklets by Andreas Mischke</title>
	<style>
	html, body {
	font-family: sans-serif;
	}
	.drag-hint {
	display: flex;
	margin: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	max-width: 25rem;
	color: #777;
	stroke: currentColor;
	background-color: initial;
	transition: background-color 500ms 1500ms;
	}
	.drag-hint--highlighted {
	background-color: #ffff9a;
	transition: background-color 500ms 0ms;
	}
	.drag-hint__arrow {
	margin-top: 0.2rem;
	margin-left: 3rem;
	margin-right: 0.5rem;
	flex-shrink: 0;
	}
	.bookmarklet-section {
	padding: 1rem;
	margin: 2rem 0;
	background: #eee;
	}
	.bookmarklet-section:first-child {
	margin-top: 0px;
	}
	.button {
	padding: 1rem;
	display: inline-block;
	background: #c5eeff;
	border-radius: 5rem;
	color: black;
	text-decoration: none;
	}
	</style>
	</head>
	<body>
	<div class="drag-hint">
	<svg xmlns="http://www.w3.org/2000/svg" width="30" height="50" viewBox="0 0 30 50" fill="none" class="drag-hint__arrow">
	<path d="M 29 1 C 9 1 5.16667 32.3333 5 49 M 5 49 L 9 45 M 1 45 L 5 49" stroke-linecap="round"></path>
	</svg>
	To use one of the bookmarklets, drag its blue button to your browser bookmark bar and use it from there
	</div>
	<main>
	<section class="bookmarklet-section">
	<a
	class="button"
	href="javascript:void function()%7B(function()%7B"use strict"%3Bconst a%3D%5B...document.querySelectorAll(".board:not(.new)")%5D,b%3Da.map(a%3D>%7Bconst b%3Da.querySelector(".board-header").textContent,c%3D%5B...a.querySelectorAll(".public .card-description")%5D.map(a%3D>a.textContent)%3Breturn%7Btitle:b,cards:c%7D%7D),c%3D%5B...document.querySelectorAll(".action-point-content")%5D.map(a%3D>a.textContent),d%3Ddocument.createElement("div")%3Bd.setAttribute("style","position:absolute%3Bwidth:100vw%3Bheight:100vh%3Btop:0%3Bleft:0%3Bz-index:999%3Bbackground:%23fffc")%3Bconst e%3Ddocument.createElement("div")%3Be.setAttribute("style","position:absolute%3Bleft:10vw%3Btop:10vh%3Bheight:80vh%3Bwidth:80vw%3Bbackground:white%3Bbox-shadow:0 0 16px %23000c%3Bpadding:2rem%3Bbox-sizing:border-box"),e.setAttribute("contenteditable","true"),e.innerHTML%3D"<table><thead><tr>"%2Bb.map(a%3D>%60<th><b>%24%7Ba.title%7D</b></th>%60).join("")%2B"</tr></thead><tbody><tr>"%2Bb.map(a%3D>"<td><ul>"%2Ba.cards.map(a%3D>%60<li>%24%7Ba%7D</li>%60).join("")%2B"</li></ul></td>").join("")%2B"</tr></tbody></table><h2>Action items</h2>"%2Bc.map(a%3D>%60<div data-node-type%3D"actionList"><div data-task-state%3D"TODO">%24%7Ba%7D</div></div>%60).join("")%3Bconst f%3Ddocument.createElement("div")%3Bf.setAttribute("style","position:absolute%3Bright:1rem%3Btop:1rem%3Bfont-size:2rem%3Bline-height:3rem%3Bwidth:3rem%3Bbackground:crimson%3Bborder-radius:50%25%3Btext-align:center%3Bdisplay:block%3Bcolor:white%3Buser-select:none%3Bcursor:pointer"),f.textContent%3D"%5Cu2715",f.onclick%3D()%3D>document.body.removeChild(d),d.appendChild(e),d.appendChild(f),document.body.appendChild(d),e.focus(),document.execCommand("selectAll",!1,null)%7D)()%7D()%3B"
	>Export Retrotool to Confluence</a>
	<p>
	At work we use <a href="https://retrotool.io/">retrotool.io</a> for our Scrum Retrospectives
	and archive the contents in <a href="https://www.atlassian.com/software/confluence">Confluence</a>.
	To reduce the manual copy-paste work, I created this bookmarklet, to easily get the card contents
	and format it in a table that can easily be pasted into the Confluence page editor.
	</p>
	</section>
	</main>
	<script>
	var dragHint = document.querySelector('.drag-hint');
	dragHint.addEventListener('transitionend', () => dragHint.classList.remove('drag-hint--highlighted'));
	document
	.querySelectorAll('.bookmarklet-section .button')
	.forEach(link => link.addEventListener('click', event => {
	event.preventDefault();
	dragHint.classList.add('drag-hint--highlighted');
	}));
	</script>
	</body>
	</html>