Demo: permalink, autoprefixer

Makefile

@@ -15,7 +15,7 @@ GITHUB_PROJ := https://github.com//jonschlinkert/${NPM_PACKAGE}
 demo: lint browserify
 	./support/demodata.js > demo/sample.json
 	jade demo/index.jade -P --obj demo/sample.json
-	stylus demo/assets/index.styl
+	stylus -u autoprefixer-stylus -c demo/assets/index.styl
 	rm -rf demo/sample.json
 
 

demo/assets/index.css

@@ -1,72 +1 @@
-body {
+body{margin-bottom:20px;overflow:hidden}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:230px;z-index:10000;white-space:nowrap;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#686868;box-shadow:0 0 2px rgba(102,102,102,0.4);padding:1px 0;}.gh-ribbon a{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}
-  margin-bottom: 20px;
-  overflow: hidden;
-}
-.source,
-.result,
-.result-src {
-  width: 100%;
-  height: 350px;
-}
-.result {
-  padding-right: 20px;
-  overflow: auto;
-}
-.result img {
-  max-width: 100%;
-}
-.result-src {
-  display: none;
-}
-.result-src-content {
-  white-space: pre;
-}
-.result-as-text .result-src {
-  display: block;
-}
-.result-as-text .result {
-  display: none;
-}
-.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;
-  color: #fff !important;
-}
-.hljs {
-  background: none;
-  padding: 0;
-}
-.gh-ribbon {
-  display: block;
-  position: absolute;
-  right: -60px;
-  top: 44px;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  transform: rotate(45deg);
-  width: 230px;
-  z-index: 10000;
-  white-space: nowrap;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background-color: #686868;
-  box-shadow: 0 0 2px rgba(102,102,102,0.4);
-  padding: 1px 0;
-}
-.gh-ribbon a {
-  text-decoration: none !important;
-  border: 1px solid #ccc;
-  color: #fff;
-  display: block;
-  font-size: 13px;
-  font-weight: 700;
-  outline: medium none;
-  padding: 4px 50px 2px;
-  text-align: center;
-}

demo/assets/index.js

@@ -1,7 +1,7 @@
 (function () {
   'use strict';
 
-  var mdHtml, mdSrc;
+  var mdHtml, mdSrc, permalink;
 
   var options = {
     html: true,
@@ -24,6 +24,13 @@
     var source = $('.source').val();
     $('.result').html(mdHtml.render(source));
     $('.result-src-content').text(mdSrc.render(source));
+    try {
+      if (source) {
+        permalink.href = '#md=' + encodeURIComponent(source);
+      } else {
+        permalink.href = '';
+      }
+    } catch (__) {}
   }
 
 
@@ -33,8 +40,15 @@
       window.hljs.highlightBlock(block);
     });
 
+    // Restore content if opened by permalink
+    if (location.hash && location.hash.toString().slice(0,4) === '#md=') {
+      $('.source').val(decodeURIComponent(location.hash.slice(4)));
+    }
+
     mdInit();
 
+    permalink = document.getElementById('permalink');
+
     $('.source').on('keyup paste cut mouseup', updateResult);
     $('.source-clear').on('click', function (event) {
       $('.source').val('');

demo/assets/index.styl

@@ -24,16 +24,22 @@ body
   .result
     display none
 
-.result-mode, .source-clear
+.demo-control
   position absolute
   right 15px
   top 0
   padding 0 10px
   border-radius 0 4px
-  font-weight bold
   font-size 12px
   background-color #666
   color #fff !important
+  opacity .6
+  transition opacity 0.5s ease-in-out
+  &:hover
+    opacity 1
+  a
+    margin 0 20px
+    color #fff !important
 
 .hljs
   background none
@@ -44,8 +50,6 @@ body
   position absolute
   right -60px
   top 44px
-  -webkit-transform rotate(45deg)
-  -moz-transform rotate(45deg)
   transform rotate(45deg)
   width 230px
   z-index 10000

demo/index.html

@@ -27,7 +27,8 @@ console.log(md.parse('# Remarkable rulezz!'));
 // => <h1>Remarkable rulezz!</h1>
 </code></pre>
       <div class="row">
-        <div class="col-xs-6"><a href="#" class="source-clear">clear</a>
+        <div class="col-xs-6">
+          <div class="demo-control"><a href="#" class="source-clear">clear</a><a id="permalink" href="./" title="Share this snippet as link"><strong>permalink</strong></a></div>
           <textarea class="source"># Typography 
 
 ## Headings
@@ -645,12 +646,13 @@ With a reference later in the document defining the URL location:
 
 </textarea>
         </div>
-        <section class="col-xs-6"><a href="#" class="result-mode">html / source</a>
+        <section class="col-xs-6">
+          <div class="demo-control"><a href="#" class="result-mode">html / source</a></div>
           <div class="result"></div>
           <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>
+    <div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable" target="_blank">Fork me on GitHub</a></div>
   </body>
 </html>

demo/index.jade

@@ -25,13 +25,16 @@ html
 
       .row
         .col-xs-6
-          a.source-clear(href='#') clear
+          .demo-control
+            a.source-clear(href='#') clear
+            a#permalink(href='./' title='Share this snippet as link'): strong permalink
           textarea.source= s.source
         section.col-xs-6
-          a.result-mode(href='#') html / source
+          .demo-control
+            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
+      a(href='https://github.com/jonschlinkert/remarkable' target='_blank') Fork me on GitHub

package.json

@@ -22,12 +22,13 @@
   },
   "devDependencies": {
     "ansi": "^0.3.0",
+    "autoprefixer-stylus": "^0.3.0",
     "benchmark": "^1.0.0",
     "browserify": "*",
     "eslint": "0.8.0",
     "eslint-plugin-nodeca": "^1.0.0",
-    "jade": "1.6.0",
+    "jade": "^1.6.0",
-    "stylus": "0.49.1",
+    "stylus": "^0.49.1",
     "mocha": "*",
     "uglify-js": "*"
   }