JSFiddle - React, Tailwind, and code Playground

Fliplet libraries

by tonytlwu

HTML

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

CSS

textarea {
  width: 100%;
}

JavaScript

var assetsToExclude = ['fliplet-runtime', 'fliplet-core', 'fliplet-pages', 'fliplet-native', 'fliplet-interact', 'bootstrap', 'reset-css', 'normalize-css', 'list-swipe', 'pdfjs'];
var preloadedAssets = ['moment', 'lodash', 'handlebars', 'bootstrap-css', 'font-awesome', 'modernizr', 'jquery', 'animate-css'];

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 preloadedHtml = ['<ul>'];
    var assetsHtml = ['<ul>'];

		Object.keys(assets).sort().forEach(function (name) {
    	if (assetsToExclude.indexOf(name) > -1) {
        return;
      }
      
      var asset = assets[name];
      var liHtml = [
        '<li>',
        '<strong>' + name + '</strong>',
        ' <code>' + asset.latestVersion + '</code>',
        asset.description ? ' ' + asset.description : '',
        asset.reference ? ' (<a href="' + asset.reference + '" target="_blank">Documentation</a>)' : '',
        '</li>'
      ].join('');
      
      if (preloadedAssets.indexOf(name) > -1) {
      	preloadedHtml.push(liHtml);
        return;
      }

      assetsHtml.push(liHtml);
    });

    preloadedHtml.push('</ul>');
    assetsHtml.push('</ul>');

    $('#assets').html([
    	'<h2>Libraries available in all apps</h2>',
      '<p>The following libraries can be found in all apps:</p>',
      preloadedHtml.join(''),
      '<h2>Other approved libraries you can add to your apps</h2>',
      '<p>Optionally add any of the libraries to your app for additional functionality:</p>',
      assetsHtml.join('')
    ].join(''));
    
    var turndownService = new TurndownService()
		var markdown = turndownService.turndown($('#assets').html());
    
    $('#copy').val(markdown);

  });
}

loadAssets();