webdash-readme-preview/webdash-readme-preview.html

Preview your README.md straight from the dashboard

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="/bower_components/empty-state-webdash/empty-state-webdash.html">

<dom-module id="webdash-readme-preview">
  <template>
    <link rel="stylesheet" href="/bower_components/highlight-js/src/styles/solarized-dark.css">
    <style>
      :host {
        display: block;
      }

      #preview {
        padding: 0 20px;
      }

      #preview img {
        max-width: 100%;
      }

      #preview pre,
      #preview code {
        max-width: 100%;
        white-space: pre-wrap;
        word-break: keep-all;
      }

      #preview pre {
        background-color: #022B36;
        padding: 20px;
        border-radius: 5px;
      }

      #preview a {
        color: var(--brand);
      }

      #preview a:hover {
        color: var(--accent);
      }

      a {
        color: inherit;
      }

      #spinner {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #spinner paper-spinner[active] {
        margin-top: 50px;
      }
    </style>

    <template is="dom-if" if="{{emptyState}}">
      <empty-state-webdash title="No README.md found">
        Add a
        <strong>README.md</strong> file at the root of your project to start using this plugin.
      </empty-state-webdash>
    </template>
    <div id="preview">
    </div>
    <div id="spinner">
      <paper-spinner active$="{{loading}}"></paper-spinner>
    </div>

  </template>

  <script>
    class WebdashReadmePreview extends Polymer.Element {
      static get is() { return 'webdash-readme-preview'; }

      constructor() {
        super();
        this.loading = true;
        this.emptyState = false;
      }

      ready() {
        super.ready();
        this.backend = new Backend(WebdashReadmePreview.is);
        this.getManifest();
      }

      getManifest() {
        this.backend.get('readme-html').then(data => {
          if (!data || !data.result || !data.result.html) {
            this.emptyState = true;
            return false;
          }

          const html = data.result.html;
          this.$.preview.innerHTML = html;
        })
          .catch(error => {
            console.log('there was an error', error);
          })
          .finally(() => {
            this.loading = false;
          });
      }
    }

    window.customElements.define(WebdashReadmePreview.is, WebdashReadmePreview);
  </script>
</dom-module>