Demo cleanup

10 years ago · ff4c7b7262
7 changed files with 79 additions and 87 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,3 @@
 benchmark/implementations/
-demo/
 dist/
 node_modules/
--- a/demo/.eslintrc
+++ b/demo/.eslintrc
@ -0,0 +1,6 @@
+env:
+  node:     false
+  browser:  true
+
+globals:
+  $: false
--- a/demo/assets/index.css
+++ b/demo/assets/index.css
@ -3,7 +3,7 @@ body {
  overflow: hidden;
 }

-.source, .result, .result-text {
+.source, .result, .result-src {
  width: 100%;
  height: 350px;
 }
@ -13,25 +13,26 @@ body {
  overflow: auto;
 }

-.result-text {
+.result-src {
  display: none;
 }
-.result-text-data {
+.result-src-content {
  white-space: pre;
 }

-.result-as-text .result-text {
+.result-as-text .result-src {
  display: block;
 }
 .result-as-text .result {
  display: none;
 }

-.mode {
+.result-mode, .source-clear {
  position: absolute;
  right: 15px;
  top: 0;
  padding: 0 10px;
+  border-radius: 0 4px;
  font-weight: bold;
  font-size: 12px;
  background-color: #666;
--- a/demo/assets/index.js
+++ b/demo/assets/index.js
@ -1,32 +1,51 @@
-$(function() {
-  // highlight snippets
-  $('pre.code-sample code').each(function(i, block) {
-    hljs.highlightBlock(block);
-  });
-});
+(function () {
+  'use strict';
+
+  var mdHtml, mdSrc;

-var md = new window.Remarkable({
+  var options = {
    html: true,
    xhtml: true,
    breaks: false,
    langprefix: 'language-'
-});
+  };

-md.renderer.rules.table_open = function () {
+  function mdInit() {
+    mdHtml = new window.Remarkable(options);
+    mdSrc = new window.Remarkable(options);
+
+    // Beautify output of parser for html content
+    mdHtml.renderer.rules.table_open = function () {
      return '<table class="table table-striped">\n';
-}
+    };
+  }
+
+  function updateResult() {
+    var source = $('.source').val();
+    $('.result').html(mdHtml.render(source));
+    $('.result-src-content').text(mdSrc.render(source));
+  }
+

+  $(function() {
+    // highlight snippet
+    $('pre.code-sample code').each(function(i, block) {
+      window.hljs.highlightBlock(block);
+    });

-function updateResult() {
-  var result = md.render($('#demo1 .source').val());
-  $('#demo1 .result').html(result);
-  $('#demo1 .result-text-data').text(result);
-}
+    mdInit();

-$('#demo1 .source').on('keyup paste cut mouseup', updateResult);
-$('#demo1 .mode').on('click', function (event) {
-  $('#demo1').toggleClass('result-as-text');
+    $('.source').on('keyup paste cut mouseup', updateResult);
+    $('.source-clear').on('click', function (event) {
+      $('.source').val('');
+      updateResult();
+      event.preventDefault();
+    });
+    $('.result-mode').on('click', function (event) {
+      $('body').toggleClass('result-as-text');
      event.preventDefault();
-});
+    });

-updateResult();
+    updateResult();
+  });
+})();
--- a/demo/data.yml
+++ b/demo/data.yml
@ -1,9 +1,6 @@

 self:
-  demo1:
-    title: Simple markdown
-    description: |
-      That's a sample of typical `remarkable` use. You can play with content
+  demo:
    code: |
      var Remarkable = require('remarkable');

@ -89,16 +86,3 @@ self:
      [Basic link](https://github.com/jonschlinkert/remarkable)

      [Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser")
-
-  demo2:
-    title: Code highlight
-
-  # Advanced demos
-
-  demo3:
-    title: Typograph
-  demo4:
-    title: Block macros
-  demo5:
-    title: Custom tag (lexer plugin)
-
--- a/demo/index.html
+++ b/demo/index.html
@ -8,12 +8,13 @@
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
    <script src="../dist/remarkable.js"></script>
    <link rel="stylesheet" href="./assets/index.css">
+    <script src="./assets/index.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>remarkable demo</h1>
-      <p><a data-toggle="collapse" href="#code-sample-demo1">Show code</a></p>
-      <pre id="code-sample-demo1" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
+      <p><a data-toggle="collapse" href="#code-sample">Show code sample</a></p>
+      <pre id="code-sample" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');

 var md = new Remarkable({
  html: true,
@ -25,8 +26,8 @@ var md = new Remarkable({
 console.log(md.parse('# Remarkable rulezz!'));
 // =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt;
 </code></pre>
-      <div id="demo1" class="row">
-        <div class="col-xs-6">
+      <div class="row">
+        <div class="col-xs-6"><a href="#" class="source-clear">clear</a>
          <textarea class="source"># h1 Heading
 ## h2 Heading
 ### h3 Heading
@ -101,13 +102,12 @@ console.log(text);
 [Link with title](https://github.com/jonschlinkert/remarkable &quot;Awesome markdown parser&quot;)
 </textarea>
        </div>
-        <section class="col-xs-6"><a href="#" class="mode">html / source</a>
+        <section class="col-xs-6"><a href="#" class="result-mode">html / source</a>
          <div class="result"></div>
-          <pre class="result-text"><code class="result-text-data"></code></pre>
+          <pre class="result-src"><code class="result-src-content"></code></pre>
        </section>
      </div>
    </div>
    <div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable">Fork me on GitHub</a></div>
-    <script src="./assets/index.js"></script>
  </body>
 </html>
--- a/demo/index.jade
+++ b/demo/index.jade
@ -1,22 +1,3 @@
-mixin sample(name)
-  - var s = self.self[name];
-  //-h3= s.title
-  //-if s.description
-  //-  p= s.description
-  p: a(data-toggle='collapse' href='#code-sample-' + name) Show code
-
-  pre.collapse.code-sample(id='code-sample-' + name)
-    code.js= s.code
-
-  .row(id=name)
-    .col-xs-6
-      textarea.source= s.source
-    section.col-xs-6
-      a.mode(href='#') html / source
-      .result
-      pre.result-text
-        code.result-text-data
-
 doctype html
 html
  head
@ -31,24 +12,26 @@ html
    script(src='../dist/remarkable.js')

    link(rel='stylesheet' href='./assets/index.css')
+    script(src='./assets/index.js')

  body
    .container
+      - var s = self.self.demo;
      h1 remarkable demo

-      //-h2 Basic examples
-
-      +sample('demo1')
-    //-
-      +sample('demo2')
-
-      h2 Advanced examples
+      p: a(data-toggle='collapse' href='#code-sample') Show code sample
+      pre.collapse.code-sample(id='code-sample')
+        code.js= s.code

-      +sample('demo3')
-      +sample('demo4')
-      +sample('demo5')
+      .row
+        .col-xs-6
+          a.source-clear(href='#') clear
+          textarea.source= s.source
+        section.col-xs-6
+          a.result-mode(href='#') html / source
+          .result
+          pre.result-src
+            code.result-src-content

    .gh-ribbon
      a(href='https://github.com/jonschlinkert/remarkable') Fork me on GitHub
-
-    script(src='./assets/index.js')