Added demo stub and updated docs

10 years ago · 6be971da24
12 changed files with 411 additions and 12 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,4 @@
+1.0.0 / WIP
+-----------
+
+- First release.
--- a/22
+++ b/22
@ -0,0 +1,22 @@
+Copyright (c) 2014 Jon Schlinkert, Vitaly Puzrin.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
--- a/15
+++ b/15
@ -12,15 +12,10 @@ CURR_HEAD   := $(firstword $(shell git show-ref --hash HEAD | cut -b -6) master)
 GITHUB_PROJ := https://github.com//jonschlinkert/${NPM_PACKAGE}


-help:
-	echo "make help       - Print this help"
-	echo "make lint       - Lint sources with JSHint"
-	echo "make test       - Lint sources and run all tests"
-	echo "make browserify - Build browserified version"
-	echo "make dev-deps   - Install developer dependencies"
-	echo "make gh-pages   - Build and push API docs into gh-pages branch"
-	echo "make publish    - Set new version tag and publish npm package"
-	echo "make todo       - Find and list all TODOs"
+demo: lint browserify
+	js-yaml demo/data.yml > demo/data.json
+	jade demo/index.jade -P --obj demo/data.json
+	rm -rf demo/data.json


 lint:
@ -83,5 +78,5 @@ todo:
 	grep 'TODO' -n -r ./lib 2>/dev/null || test true


-.PHONY: publish lint test dev-deps gh-pages todo
+.PHONY: publish lint test dev-deps gh-pages todo demo
 .SILENT: help lint test todo
--- a/README.md
+++ b/README.md
@ -8,10 +8,11 @@ remarkable

 Markdown parser done right. Fast and easy to extend.

-/DEMO LINK/
+[Live demo](http://jonschlinkert.github.io/remarkable/demo/)

 /INTRO/

+
 Install
 -------

@ -27,6 +28,7 @@ bower:
 bower install remarkable --save
 ```

+
 Usage
 -----

@ -41,7 +43,7 @@ console.log(md.parse('# Remarkable rulezz!'));
 You can define options via `set` method:

 ```javascript
-var Remarkable = require('remarkable')();
+var Remarkable = require('remarkable');
 var md = new Remarkable();

 md.set({
@ -55,3 +57,16 @@ md.set({
 });
 ```

+
+Authors
+-------
+
+- Jon Schlinkert [github/jonschlinkert](https://github.com/jonschlinkert)
+- Alex Kocharin [github/rlidwka](https://github.com/rlidwka)
+- Vitaly Puzrin [github/puzrin](https://github.com/puzrin)
+
+
+License
+-------
+
+[MIT](https://github.com/jonschlinkert/remarkable/blob/master/LICENSE)
--- a/demo/assets/index.css
+++ b/demo/assets/index.css
@ -0,0 +1,14 @@
+.source, .result {
+  width: 100%;
+  height: 350px;
+}
+
+.result {
+  border: 1px solid #ccc;
+  overflow: auto;
+}
+
+.hljs {
+  background: none;
+  padding: 0
+}
--- a/demo/assets/index.js
+++ b/demo/assets/index.js
@ -0,0 +1,8 @@
+hljs.initHighlightingOnLoad();
+
+$(function() {
+  // highlight snippets
+  $('pre code').each(function(i, block) {
+    hljs.highlightBlock(block);
+  });
+});
--- a/demo/data.yml
+++ b/demo/data.yml
@ -0,0 +1,107 @@
+
+self:
+  demo1:
+    title: Simple markdown
+    description: |
+      That's a sample of typical `remarkable` use. You can play with content
+    code: |
+      var Remarkable = require('remarkable');
+
+      var md = new Remarkable({
+        gfm: true,
+        tables: true,
+        breaks: false,
+        pedantic: false,
+        sanitize: true,
+        smartLists: true,
+        smartypants: false
+      });
+
+      console.log(md.parse('# Remarkable rulezz!'));
+      // => <h1>Remarkable rulezz!</h1>
+    source: |
+      # h1 Heading
+      ## h2 Heading
+      ### h3 Heading
+      #### h4 Heading
+      ##### h5 Heading
+      ###### h6 Heading
+
+      Alt h1 Heading
+      ==============
+
+      Alt h2 Heading
+      --------------
+
+      ## Horizontal Rules
+
+      ---
+
+      ___
+
+
+      ***
+
+      ## Text
+
+      Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
+      ## Emphasis
+
+      __bold text__
+
+      _italicized text_
+
+      ~~strike through text~~
+
+      ## Blockquotes
+
+      > Quoted text
+      >> Quotes can be nested
+
+      ## Lists
+
+      Unordered:
+
+      * valid bullet
+      - valid bullet
+      + valid bullet
+        - Phasellus iaculis neque
+        - Purus sodales ultricies
+
+      Ordered:
+
+      1. Lorem ipsum dolor sit amet
+      2. Consectetur adipiscing elit
+      3. Integer molestie lorem at massa
+
+      ## Code
+
+      This is `example of inline code`.
+
+      Code block (with language name for highlighter)
+
+      ``` javascript
+      var text = 'Remarkable is awesome!';
+
+      console.log(text);
+      ```
+
+      ## links
+
+      [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
@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
+    <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>
+      <h2>Basic examples</h2>
+      <h3>Simple markdown</h3>
+      <p>That's a sample of typical `remarkable` use. You can play with content
+</p>
+      <p><a data-toggle="collapse" href="#code-sample-demo1">Show code</a></p>
+      <pre id="code-sample-demo1" class="collapse"><code class="js">var Remarkable = require('remarkable');
+
+var md = new Remarkable({
+  gfm: true,
+  tables: true,
+  breaks: false,
+  pedantic: false,
+  sanitize: true,
+  smartLists: true,
+  smartypants: false
+});
+
+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">
+          <textarea class="source"># h1 Heading
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+Alt h1 Heading
+==============
+
+Alt h2 Heading
+--------------
+
+## Horizontal Rules
+
+---
+
+___
+
+
+***
+
+## Text
+
+Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
+
+## Emphasis
+
+__bold text__
+
+_italicized text_
+
+~~strike through text~~
+
+## Blockquotes
+
+&gt; Quoted text
+&gt;&gt; Quotes can be nested
+
+## Lists
+
+Unordered:
+
+* valid bullet
+- valid bullet
+ valid bullet
+  - Phasellus iaculis neque
+  - Purus sodales ultricies
+
+Ordered:
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+## Code
+
+This is `example of inline code`.
+
+Code block (with language name for highlighter)
+
+``` javascript
+var text = 'Remarkable is awesome!';
+
+console.log(text);
+```
+
+## links
+
+[Basic link](https://github.com/jonschlinkert/remarkable)
+
+[Link with title](https://github.com/jonschlinkert/remarkable &quot;Awesome markdown parser&quot;)
+</textarea>
+        </div>
+        <section class="col-xs-6">
+          <div class="result"></div>
+        </section>
+      </div>
+      <h3>Code highlight</h3>
+      <p><a data-toggle="collapse" href="#code-sample-demo2">Show code</a></p>
+      <pre id="code-sample-demo2" class="collapse"><code class="js"></code></pre>
+      <div id="demo2" class="row">
+        <div class="col-xs-6">
+          <textarea class="source"></textarea>
+        </div>
+        <section class="col-xs-6">
+          <div class="result"></div>
+        </section>
+      </div>
+      <h2>Advanced examples</h2>
+      <h3>Typograph</h3>
+      <p><a data-toggle="collapse" href="#code-sample-demo3">Show code</a></p>
+      <pre id="code-sample-demo3" class="collapse"><code class="js"></code></pre>
+      <div id="demo3" class="row">
+        <div class="col-xs-6">
+          <textarea class="source"></textarea>
+        </div>
+        <section class="col-xs-6">
+          <div class="result"></div>
+        </section>
+      </div>
+      <h3>Block macros</h3>
+      <p><a data-toggle="collapse" href="#code-sample-demo4">Show code</a></p>
+      <pre id="code-sample-demo4" class="collapse"><code class="js"></code></pre>
+      <div id="demo4" class="row">
+        <div class="col-xs-6">
+          <textarea class="source"></textarea>
+        </div>
+        <section class="col-xs-6">
+          <div class="result"></div>
+        </section>
+      </div>
+      <h3>Custom tag (lexer plugin)</h3>
+      <p><a data-toggle="collapse" href="#code-sample-demo5">Show code</a></p>
+      <pre id="code-sample-demo5" class="collapse"><code class="js"></code></pre>
+      <div id="demo5" class="row">
+        <div class="col-xs-6">
+          <textarea class="source"></textarea>
+        </div>
+        <section class="col-xs-6">
+          <div class="result"></div>
+        </section>
+      </div>
+    </div>
+  </body>
+</html>
--- a/demo/index.jade
+++ b/demo/index.jade
@ -0,0 +1,49 @@
+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(id='code-sample-' + name)
+    code.js= s.code
+
+  .row(id=name)
+    .col-xs-6
+      textarea.source= s.source
+    section.col-xs-6
+      .result
+
+doctype html
+html
+  head
+    script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
+
+    script(src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js')
+    link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css')
+
+    script(src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js')
+    link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css')
+
+    script(src='../dist/remarkable.js')
+
+    link(rel='stylesheet' href='./assets/index.css')
+    script(src='./assets/index.js')
+
+  body
+    .container
+      h1 remarkable demo
+
+      h2 Basic examples
+
+      +sample('demo1')
+      +sample('demo2')
+
+      h2 Advanced examples
+
+      +sample('demo3')
+      +sample('demo4')
+      +sample('demo5')
+
+
+
--- a/dist/remarkable.js
+++ b/dist/remarkable.js
@ -0,0 +1,19 @@
+/* remarkable 1.0.0 https://github.com//jonschlinkert/remarkable */!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Remarkable=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"./":[function(require,module,exports){
+'use strict';
+
+function Remarkable(options) {
+
+}
+
+Remarkable.prototype.set = function (options) {
+
+};
+
+Remarkable.prototype.render = function (src) {
+  return '';
+};
+
+module.exports = Remarkable;
+
+},{}]},{},[])("./")
+});
--- a/dist/remarkable.min.js
+++ b/dist/remarkable.min.js
@ -0,0 +1,2 @@
+/* remarkable 1.0.0 https://github.com//jonschlinkert/remarkable */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self),n.Remarkable=e()}}(function(){return function e(n,r,t){function o(i,u){if(!r[i]){if(!n[i]){var d="function"==typeof require&&require;if(!u&&d)return d(i,!0);if(f)return f(i,!0);var p=new Error("Cannot find module '"+i+"'");throw p.code="MODULE_NOT_FOUND",p}var c=r[i]={exports:{}};n[i][0].call(c.exports,function(e){var r=n[i][1][e];return o(r?r:e)},c,c.exports,e,n,r,t)}return r[i].exports}for(var f="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}({"./":[function(e,n){"use strict";function r(){}r.prototype.set=function(){},r.prototype.render=function(){return""},n.exports=r},{}]},{},[])("./")});
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "ansi": "^0.3.0",
    "benchmark": "^1.0.0",
    "browserify": "*",
+    "jade": "1.6.0",
    "jshint": "*",
    "mocha": "*",
    "uglifyjs": "*"