JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
<div id="assets">Loading...</div>
<textarea id="copy"></textarea>

CSS

textarea {
  width: 100%;
  height: 300px;
}

JavaScript

var assetsToExclude = ['fliplet-runtime', 'fliplet-core', 'fliplet-pages', 'fliplet-native', 'fliplet-interact', 'jquery', 'modernizr', 'font-awesome', 'bootstrap-css', 'bootstrap', 'reset-css', 'normalize-css', 'moment', 'handlebars']

function getAssets() {
  return $.ajax({
    url: 'https://api.fliplet.com/v1/widgets/assets'
  });
}

function loadAssets() {
  return getAssets().then(function (results) {
    var assets = results.assets || {};

    if (!Object.keys(assets).length) {
      $('#assets').html('No assets found');
      return;
    }

    var html = ['<ul>'];

    html = html.concat(Object.keys(assets).sort().map(function (name) {
    	if (assetsToExclude.indexOf(name) > -1) {
        return;
      }
      
      var asset = assets[name];

      return [
        '<li>',
        '<strong>' + name + '</strong>',
        ' <code>' + asset.latestVersion + '</code>',
        asset.reference ? ' (<a href="' + asset.reference + '" target="_blank">Documentation</a>)' : '',
        asset.description ? '<br><i>' + asset.description  + '</i>' : '',
        '</li>'
      ].join('');
    }));

    html.push('</ul>');

    $('#assets').html(html.join(''));
    
    var turndownService = new TurndownService()
		var markdown = turndownService.turndown(html.join(''));
    
    $('#copy').val(markdown);

  });
}

loadAssets();