JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<h2>
Dependabot Commands
</h2>
<p>
Drag and drop the commands into your bookmarks bar. 
</p>

<div id="commands">

</div>

CSS

a {
  display: block;
  margin-bottom: 10px;
}

JavaScript

// List of commands here:
const commands = [
	'@dependabot rebase',
  '@dependabot recreate',
  '@dependabot merge',
  '@dependabot squash and merge',
  '@dependabot cancel merge',
  '@dependabot close',
  '@dependabot reopen',
  '@dependabot ignore this major version',
  '@dependabot ignore this minor version',
  '@dependabot ignore this dependency',
  'Looks like CI is failing, assigning back to you.',
];

// --- magic happens here ---

const linkFactory = function (command) {
	const link = document.createElement('a');
  
  link.href = `javascript:document.querySelector("#new_comment_field").value="${command}",document.querySelector(".js-new-comment-form.js-needs-timeline-marker-header").submit();`
  link.innerText = command;
  
  return link;
}

const addToElement = function (el, commands) {
	const $el = document.querySelector(el);
  
  commands.forEach(command => {
  	$el.append(linkFactory(command));
  });
}

addToElement("#commands", commands);