Abstract out the data into yaml, use the same includes to render it.

[BBB]

I've abstracted out the data into a yaml file, the data is now used to generate the list, menu and single pages. This will make updating the content alot easier in the future, as it's only got to be done in one place.

It also means that the site uses a single html include to render the content.

Let me know if i've missed any classes, or content!

---

I used the following JS to scrape the HTML and convert it to json. I then used json2yaml to convert it to yaml.

  var $props = [].slice.call(document.querySelectorAll('.property'));

  var output = $props.map(($prop) => {
    var title = cleanText($prop.querySelector('.property-name').textContent.replace(/\#/, ''));
    var description = cleanText($prop.querySelector('.property-description').innerHTML);
    var rStyles = $prop.querySelectorAll('style') || [];
    var styles = [].slice.call(rStyles).map((s) => cleanText(s.textContent));
    var rActions = [].slice.call($prop.querySelectorAll('.property-animation')) || [];
    var examples = [].slice.call($prop.querySelectorAll('.example'));
    var is_shorthand = [].slice.call($prop.classList).indexOf('is-shorthand') > -1;

    return {
      title,
      is_shorthand,
      description,
      styles,
      actions: rActions.map(($r) => cleanText($r.innerHTML)),
      examples: examples.map(($ex) => {
        return {
          is_default: !!$ex.querySelector('.example-default'),
          title: cleanText($ex.querySelector('.example-value').textContent),
          description: cleanText($ex.querySelector('.example-description').innerHTML),
          output: cleanText($ex.querySelector('.example-output').innerHTML),
        };
      }),
    }
  });


  function cleanText(txt) {
    return txt.replace(/\s+/gmi, ' ').trim();
  }

  console.log(JSON.stringify(output, null, 2));