Bullet-Convertor

Quick script to automate a menial task

by Alicia Sykes

HTML

<!doctype html>
<html>
<head>
  <title>Bullet Convertor</title>
  <meta name="description" content="Simple script for converting bullet points into Markdown">
</head>
<body>
  <h1>Bullet Convertor</h1>
  
  <section class="input-section">
    <h3>Input</h3>
    <textarea id="input-textarea"></textarea>
    <button id="generate-button">Generate</button>
  </section>
  
  <section class="input-section">
    <h3>Output</h3>
    <pre>
      <code id="output-code"></code>
    </pre>
  </section>
  
</body>
</html>

CSS

body {
   font-family: "Roboto", Verdana, Helvetica, sans-serif;
   color: white;
   background: #0d0e20;
   padding-bottom: 2rem;
}

h1 {
  font-size: 2.5rem;
  text-align: center;
}

h3 {
  margin: 0;
  
}

textarea, button, pre {
  color: #fff;
  font-family: courier, sans-serif;
  height: 150px;
  outline: none;
  border: 2px solid #00010a8c;
  border-radius: 5px;
  margin: 1rem;
  background: #0d0e20;
}

textarea {
  resize:none;
}

button {
  height: 2.5rem;
  margin: 0 1rem 1rem;
  font-size: 1rem;
  font-weight: thin;
  font-family: "Roboto", Verdana, Helvetica, sans-serif;
  cursor: pointer;
}

pre {
  min-height: 150px;
  height: fit-content;
  overflow: hidden;
  padding: 0.5rem;
}

textarea:focus, button:hover {
  background: #00010a8c;
}

.input-section, .output-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 5px;
  background: #ffffff0a;
  box-shadow: 2px 10px 10px rgb(0 0 0 / 33%), 0 1px 2px rgba(0,0,0,0.24);
  max-width: 800px;
}

JavaScript

/**
 * A function that converts bullet points I make in note format
 * into hyperlinks in markdown format, for publishing
 */
function convertBullets (body) {
  let result = '';
  const lines = body.split(/\r?\n/);
  lines.forEach((line)=>{
    if(!line.startsWith('- ')){ // Not a bullet, nothing to do here
      result += line + '\n';
    } else if (!line.match('http')) { // No URL found, nothing to do here
      result += line + '\n';
    } else if (line.length < 1) { // No content found, nothing to do here
      result += line + '\n';
    } else { // Here begins the conversion
      // Extract the URL from the line
      const urlRegex = /(https?:\/\/[^ ]*)/;
      const url = line.match(urlRegex)[1];
      line = line.replace(urlRegex, '');

      // Convert Title + URL into MD Hyperlink
      const titleRegex = /(- [a-zA-Z0-9-. ]* -)/;
      if (line.match(titleRegex)) { // Double check title format is correct
        let title = line.match(titleRegex)[1].replace(/(- | -)/g,'').trim();
        line = line.replace(titleRegex, `[${title}](${url}) - `);
      } else { // Use text as title (for when desc not provided) 
        line = `[${line.replace(/[^a-zA-Z ]/g, '').trim()}](${url}) - `;
      }

      // Remove any trailing chars, and append it to the result
      line = line.trim().replace(/:$/, '').replace(/-$/, '')
      result += `- ${line} \n`;
    }
  });
  return result; // My work here is done
}

/**
 * Page actions - Written in retro 2004 JavaScript
 * On button click, takes value from input, calls generator function
 * and displays the results into the output section
 */
var generateButton = document.getElementById("generate-button");
generateButton.addEventListener("click", function (){
	var input = document.getElementById("input-textarea").value; 
	var output = convertBullets(input);
  document.getElementById("output-code").innerHTML = output;
});