<div class="columns container my-2">
  <div class="column is-half is-offset-one-quarter">
  <h1 class="title">Contribute to Serverless Resources</h1>

  <div class="field">
    <label class="label" for="title">Title</label>
    <div class="control">
      <input id="title" name="title" class="input" type="text">
    </div>
  </div>
  
   <div class="field">
    <label class="label" for="url">URL</label>
    <div class="control">
      <input id="url" name="url" class="input" type="url">
    </div>
  </div>
    
   <div class="field">
    <label class="label" for="author">Author</label>
    <div class="control">
      <input id="author" class="input" type="text" name="author">
    </div>
  </div>
  
   <div class="field">
    <label class="label" for="tags">Tags (comma separated)</label>
    <div class="control">
      <input id="tags" class="input" type="text" name="tags">
    </div>
  </div>
    
   <div class="field">
    <label class="label" for="description">Description</label>
    <div class="control">
      <textarea id="description" class="textarea" name="description"></textarea>
    </div>
  </div>
  
   <!-- We'll prepare our javascript's function for later -->
  <div class="control">
    <button onclick="validateSubmission();" class="button is-link is-fullwidth">Submit</button>
  </div>
    
  </div>
</div>

body {
  padding: 1.5rem;
}

//Helper function to get value by id
function getValue(name){
  return document.getElementById(name).value
}

function validateSubmission(){
  //save all the input values
  const title = getValue('title')
  const url = getValue('url')
  const author = getValue('author')
  const tags = getValue('tags')
  const description = getValue('description')
  
  //generate a filename
  const filename = title.replace(/\s/g, '-') + ".md"
  
  //Format tags 
  const formattedTags = '["' + tags.replace(/,/g, '","') + '"]'
  
  
  //Generate a string mimicing the file structure
  //Indentation is important here
  let fileText = `---
title: "${title}"
url: "${url}"
author: "${author}"
tags: ${formattedTags}
---
${description}`
  
  //Encode string to URI format
  const encodedFileText = encodeURIComponent(fileText)

  //Generate a github link with query parameter
  const githubQueryLink = "https://github.com/CSS-Tricks/serverless/new/master/src/content/resources/new?value=" + encodedFileText +"&filename=" + filename
  
  //Open in a new tab
window.open(githubQueryLink) 
  
}