Add Markdown Snippets example, style it 💈

website/src/examples/markdown-snippets/app.css

@@ -0,0 +1,103 @@
+.form-snippetLabel {
+  font-size: 0.85em;
+  color: #000;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-snippetTitle {
+  display: block;
+  margin-bottom: 15px;
+}
+
+.form-snippetTitle-input {
+  font-family: inherit;
+  font-size: 1em;
+  width: 100%;
+  border: 1px solid #b7b7b4;
+  padding: 8px;
+  border-radius: 5px;
+}
+
+.form-textarea {
+  font-family: inherit;
+  font-size: 1em;
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 5px;
+  border: 1px solid #b7b7b4;
+  min-height: 160px;
+  width: 100%;
+  resize: vertical;
+  font-family: inherit;
+  margin-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.form-textarea:focus,
+.form-snippetTitle-input:focus {
+  border-color: #7db9e5;
+  outline: none;
+  box-shadow: 0 0 1px 1px #7db9e5;
+}
+
+.form-createSnippet {
+  -webkit-appearance: none;
+  border: 0;
+  font-family: inherit;
+  font-size: 16px;
+  border-radius: 5px;
+  padding: 8px;
+  background-color: #0fb800;
+  color: #fff;
+  width: 100%;
+  cursor: pointer;
+  margin-top: 15px;
+  transition: background-color 0.2s;
+}
+
+  .form-createSnippet:hover {
+    background-color: #0b8600;
+  }
+
+.form-upload {
+  font-size: 0.95em;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 0 0 5px 5px;
+  border: 1px solid #b7b7b4;
+  border-top-width: 0;
+  padding: 5px 8px;
+  cursor: pointer;
+  text-align: center;
+  transition: color 0.2s;
+  color: #374047;
+}
+
+  .form-upload:hover {
+    color: #97a1a7;
+  }
+
+.form-upload .error {
+  border-color: red;
+  color: red;
+}
+
+.form-upload .error .message {
+  margin-right: 8px;
+}
+
+.snippet {
+  margin-top: 25px;
+}
+
+.snippet-content img {
+  display: block;
+  margin: 5px 0;
+  max-width: 100%;
+}
+
+.snippet-content p {
+  margin-bottom: 10px;
+}

website/src/examples/markdown-snippets/app.es6

@@ -0,0 +1,193 @@
+/* eslint-env browser */
+const marked = require('marked')
+const dragdrop = require('drag-drop')
+const robodog = require('@uppy/robodog')
+
+const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0'
+const TRANSLOADIT_EXAMPLE_TEMPLATE = '0b2ee2bc25dc43619700c2ce0a75164a'
+
+/**
+ * A textarea for markdown text, with support for file attachments.
+ *
+ * ## Usage
+ *
+ * ```js
+ * const element = document.querySelector('textarea')
+ * const mdtxt = new MarkdownTextarea(element)
+ * mdtxt.install()
+ * ```
+ */
+class MarkdownTextarea {
+  constructor (element) {
+    this.element = element
+    this.controls = document.createElement('div')
+    this.controls.classList.add('mdtxt-controls')
+    this.uploadLine = document.createElement('div')
+    this.uploadLine.classList.add('form-upload')
+
+    this.uploadLine.appendChild(
+      document.createTextNode('Tap to upload an attachment'))
+  }
+
+  install () {
+    const { element } = this
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('mdtxt')
+    element.parentNode.replaceChild(wrapper, element)
+    wrapper.appendChild(this.controls)
+    wrapper.appendChild(element)
+    wrapper.appendChild(this.uploadLine)
+
+    this.setupUploadLine()
+  }
+
+  setupTextareaDrop () {
+    dragdrop(this.element, (files) => {
+      this.uploadFiles(files)
+    })
+  }
+
+  setupUploadLine () {
+    console.log(this.uploadLine)
+    this.uploadLine.addEventListener('click', () => {
+      this.pickFiles()
+    })
+  }
+
+  reportUploadError (err) {
+    this.uploadLine.classList.add('error')
+    const message = document.createElement('span')
+    message.appendChild(document.createTextNode(err.message))
+    this.uploadLine.insertChild(message, this.uploadLine.firstChild)
+  }
+
+  unreportUploadError () {
+    this.uploadLine.classList.remove('error')
+    const message = this.uploadLine.querySelector('message')
+    if (message) {
+      this.uploadLine.removeChild(message)
+    }
+  }
+
+  insertAttachments (attachments) {
+    attachments.forEach((attachment) => {
+      const { file, thumb } = attachment
+      const link = `\n[LABEL](${file.ssl_url})\n`
+      const labelText = `View File ${file.basename}`
+      if (thumb) {
+        this.element.value += link.replace('LABEL', `![${labelText}](${thumb.ssl_url})`)
+      } else {
+        this.element.value += link.replace('LABEL', labelText)
+      }
+    })
+  }
+
+  matchFilesAndThumbs (results) {
+    const filesById = {}
+    const thumbsById = {}
+
+    results.forEach((result) => {
+      if (result.stepName === 'thumbnails') {
+        thumbsById[result.original_id] = result
+      } else {
+        filesById[result.original_id] = result
+      }
+    })
+
+    return Object.keys(filesById).reduce((acc, key) => {
+      const file = filesById[key]
+      const thumb = thumbsById[key]
+      acc.push({ file, thumb })
+      return acc
+    }, [])
+  }
+
+  uploadFiles (files) {
+    robodog.upload({
+      waitForEncoding: true,
+      params: {
+        auth: { key: TRANSLOADIT_EXAMPLE_KEY },
+        template_id: TRANSLOADIT_EXAMPLE_TEMPLATE
+      }
+    }).then((result) => {
+      this.insertAttachments(
+        this.matchFilesAndThumbs(result.results)
+      )
+    }).catch((err) => {
+      console.error(err)
+      this.reportUploadError(err)
+    })
+  }
+
+  pickFiles () {
+    robodog.pick({
+      waitForEncoding: true,
+      params: {
+        auth: { key: TRANSLOADIT_EXAMPLE_KEY },
+        template_id: TRANSLOADIT_EXAMPLE_TEMPLATE
+      },
+      providers: [
+        'webcam',
+        'url',
+        'instagram',
+        'google-drive',
+        'dropbox'
+      ]
+    }).then((result) => {
+      this.insertAttachments(
+        this.matchFilesAndThumbs(result.results)
+      )
+    }).catch((err) => {
+      console.error(err)
+      this.reportUploadError(err)
+    })
+  }
+}
+
+const textarea = new MarkdownTextarea(
+  document.querySelector('#new textarea'))
+textarea.install()
+
+function renderSnippet (title, text) {
+  const template = document.querySelector('#snippet')
+  const newSnippet = document.importNode(template.content, true)
+  const titleEl = newSnippet.querySelector('.snippet-title')
+  const contentEl = newSnippet.querySelector('.snippet-content')
+
+  titleEl.appendChild(document.createTextNode(title))
+  contentEl.innerHTML = marked(text)
+
+  const list = document.querySelector('#snippets')
+  list.insertBefore(newSnippet, list.firstChild)
+}
+
+function saveSnippet (title, text) {
+  const id = parseInt(localStorage.numSnippets || 0, 10)
+  localStorage[`snippet_${id}`] = JSON.stringify({ title, text })
+  localStorage.numSnippets = id + 1
+}
+
+function loadSnippets () {
+  for (let id = 0; localStorage[`snippet_${id}`] != null; id += 1) {
+    const { title, text } = JSON.parse(localStorage[`snippet_${id}`])
+    renderSnippet(title, text)
+  }
+}
+
+document.querySelector('#new').addEventListener('submit', (event) => {
+  event.preventDefault()
+
+  const title = event.target.querySelector('input[name="title"]').value ||
+    'Unnamed Snippet'
+  const text = textarea.element.value
+
+  saveSnippet(title, text)
+  renderSnippet(title, text)
+
+  event.target.querySelector('input').value = ''
+  event.target.querySelector('textarea').value = ''
+})
+
+window.addEventListener('DOMContentLoaded', () => {
+  loadSnippets()
+})

website/src/examples/markdown-snippets/app.html

@@ -0,0 +1,27 @@
+  <!-- Basic Uppy styles -->
+  <link rel="stylesheet" href="/uppy/robodog.min.css">
+  <form id="new" class="form-snippet">
+    <h2>Create a new snippet</h2>
+    <label class="form-snippetTitle">
+      <div class="form-snippetLabel">Snippet Title</div>
+      <input class="form-snippetTitle-input" type="text" name="title" placeholder="Enter snippet title">
+    </label>
+    <label class="form-snippetText">
+      <div class="form-snippetLabel">Snippet Content</div>
+      <textarea class="form-textarea" name="snippet" placeholder="Enter snippet content"></textarea>
+    </label>
+    <button class="form-createSnippet" type="submit">
+      Create
+    </button>
+  </form>
+
+  <h2>Previous snippets</h2>
+
+  <div id="snippets"></div>
+</main>
+<template id="snippet">
+  <div class="snippet">
+    <h3 class="snippet-title"></h3>
+    <div class="snippet-content"></div>
+  </div>
+</template>

website/src/examples/markdown-snippets/index.ejs

@@ -0,0 +1,38 @@
+---
+title: Robodog Markdown Snippets
+layout: example
+type: examples
+order: 6
+---
+
+{% blockquote %}
+This is a demo app that works a bit like Github Gists or Pastebin. You can add markdown snippets, and add file attachments to each snippet by clicking “Upload an attachment”.
+{% endblockquote %}
+
+<p>
+  Uppy <a href="/docs/robodog/">Robodog</a> (using <a href="https://transloadit.com">Transloadit</a> internally) generates an inline preview image for images, videos, and audio files. You can <a target="_blank" href="https://github.com/transloadit/uppy/blob/master/examples/transloadit-textarea/template.json">view the Assembly Template here.</a>
+</p>
+
+<p>
+⚠️ For this demo, snippets are stored locally in your browser. Attachments are stored in Transloadit’s temporary storage and <em>expire</em> after about 24 hours. In a real app, you can easily <a target="_blank" href="https://transloadit.com/docs/#17-saving-conversion-results">export files to a permanent storage solution</a>, like Amazon S3 or Google Cloud.
+</p>
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html markdown-snippets/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js markdown-snippets/app.es6 %}