basics working

Author: justinbmeyer

.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Users Environment Variables
+.lock-wscript
+
+docs/
+dist/
+temp/
+.vscode/settings.json
+package-lock.json

.npmrc

@@ -0,0 +1 @@
+package-lock=false

bit-docs.js

@@ -0,0 +1,14 @@
+var tags = require("./tags");
+
+module.exports = function(bitDocs){
+	var pkg = require("./package.json");
+	var deps = {};
+
+	deps[pkg.name] = pkg.version;
+
+	bitDocs.register("html", {
+		dependencies: deps
+	});
+
+	bitDocs.register("tags", tags);
+};

codepen-data.js

@@ -0,0 +1,31 @@
+var scriptRegExp = /<script\s([^>]+)>([\s\S]*?)<\/script>/i;
+var moduleTest = /type=["']module["']/;
+var types = {
+    html: function htmlType(text){
+        // test if a module script tag exists
+        var results = text.match(scriptRegExp);
+        if(results) {
+            var attrs = results[1];
+            if(moduleTest.test(attrs)) {
+
+                var HTML = text.replace(results[0],"").trim();
+
+                return {
+                    html: HTML,
+                    js: results[2],
+                    js_module: true,
+                    editors: "1011"
+                };
+            }
+        }
+    },
+    js: function (text){
+        return {
+            js: text,
+            js_module: true,
+            editors: "0011"
+        };
+    }
+};
+
+module.exports = types;

index.js

@@ -0,0 +1,97 @@
+require("bit-docs-prettify");
+
+require("prismjs/plugins/line-highlight/prism-line-highlight");
+require("prismjs/plugins/line-highlight/prism-line-highlight.css");
+
+
+
+
+var types = require("./codepen-data");
+var languageHTML = /language-(\w+)/;
+
+function createCodePen(data) {
+
+    var JSONstring =
+      JSON.stringify(data)
+        // Quotes will screw up the JSON
+        .replace(/"/g, "&​quot;") // careful copy and pasting, I had to use a zero-width space here to get markdown to post this.
+        .replace(/'/g, "'");
+
+
+    var form =  '<form action="https://codepen.io/pen/define" method="POST" target="_blank">' +
+        '<input type="hidden" name="data" value=\'' +
+        JSONstring +
+        '\'>' +
+    '</form>';
+
+    var div = document.createElement("div");
+    div.innerHTML = form;
+    document.body.appendChild(div);
+    div.firstChild.submit();
+    setTimeout(function(){
+        document.body.removeChild(div);
+    },10);
+}
+
+
+var matches = document.body.matches || document.body.msMatchesSelector;
+
+function findPre(start) {
+    while(start) {
+        if(start.nodeName === "PRE") {
+            return start;
+        }
+        if(start.querySelector) {
+            var pre = start.querySelector("pre");
+            if(pre) {
+                return pre;
+            }
+        }
+
+        // needs to be previousSibling for zombie
+        start = start.previousSibling;
+    }
+}
+
+module.exports = function() {
+
+    document.body.addEventListener("click", function(ev){
+
+        if(matches.call(ev.target, ".codepen")){
+
+            var preElement = findPre(ev.target);
+
+            if(preElement) {
+                var codeElement = preElement.querySelector("code");
+                var language = codeElement.className.match(languageHTML)[1];
+                var text = codeElement.textContent;
+
+                var data = types[language](text);
+                if(docObject.codepen) {
+                    docObject.codepen.forEach(function(replacement){
+                        if(data.js) {
+                            data.js = data.js.split(replacement[0]).join(replacement[1]);
+                        }
+                    });
+                }
+                if(data.js) {
+                    data.js = data.js.trim();
+                }
+                if(data.html) {
+                    data.html = data.html.trim();
+                }
+                if(data) {
+                    if(window.CREATE_CODE_PEN) {
+                        CREATE_CODE_PEN(data);
+                    } else {
+                        createCodePen(data);
+                    }
+
+                } else {
+                    console.warn("Unable to create a codepen for this demo");
+                }
+
+            }
+        }
+    });
+};

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "bit-docs-html-codepen-link",
+  "version": "1.0.0",
+  "description": "add a codepen link ",
+  "main": "index.js",
+  "scripts": {
+    "preversion": "npm test",
+    "test": "mocha test.js --reporter spec",
+    "release:pre": "npm version prerelease && npm publish --tag=pre",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bit-docs/bit-docs-html-codepen-link.git"
+  },
+  "keywords": [
+    "bit-docs"
+  ],
+  "author": "Bitovi",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bit-docs/bit-docs-html-codepen-link/issues"
+  },
+  "homepage": "https://github.com/bit-docs/bit-docs-html-codepen-link#readme",
+  "dependencies": {
+    "bit-docs-prettify": "^0.2.2-8",
+    "prismjs": "^1.11.0"
+  },
+  "devDependencies": {
+    "bit-docs-generate-html": "^0.1.0",
+    "connect": "^2.14.4",
+    "mocha": "^2.5.3",
+    "zombie": "^4.3.0"
+  }
+}

tags.js

@@ -0,0 +1,18 @@
+
+exports.codepen = {
+    add: function(line, curTagData, scope, docMap, defaultWriteProp, options) {
+        var html = "<div class='codepen'></div>";
+        var useCurData = validCurData && (typeof curData.description === "string") && !curData.body;
+
+        // copies codepen options on to the docObject so they are accessible by the script
+        if(options.codepen) {
+            this.codepen = options.codepen;
+        }
+
+        if(useCurData) {
+            curData.description += html;
+        } else {
+            this.body += html;
+        }
+    }
+};

test-demo.md

@@ -0,0 +1,27 @@
+<style>
+    .highlight {background-color: #90FEFB;}
+    .expand {height: 20px; background-color: red;}
+    .codepen:before {
+        content: "Try it in your browser!"
+    }
+</style>
+
+## ESModule
+
+```html
+<my-app></my-app>
+
+<script type="module">
+import { Component } from "can";
+Component
+</script>
+```
+<div class='codepen'></div>
+
+## Straight JS
+
+```js
+import {DefineMap} from "can";
+console.log( myCounter.count ) //-> 1
+```
+<div class='codepen'></div>

test.js

@@ -0,0 +1,75 @@
+var assert = require("assert");
+var generate = require("bit-docs-generate-html/generate");
+var path = require("path");
+var fs = require("fs");
+
+var Browser = require("zombie");
+var connect = require("connect");
+
+var open = function(url, callback, done) {
+	var server = connect().use(connect.static(path.join(__dirname, "temp"))).listen(8081);
+	var browser = new Browser();
+	browser.visit("http://localhost:8081/" + url)
+		.then(function() {
+			callback(browser, function() {
+				server.close();
+			});
+		}).catch(function(e) {
+			server.close();
+			done(e);
+		});
+};
+
+describe("bit-docs-html-codepen-link", function() {
+	it("basics works", function(done) {
+		this.timeout(60000);
+
+		var docMap = Promise.resolve({
+			index: {
+				name: "index",
+				demo: "path/to/demo.html",
+				body: fs.readFileSync(__dirname+"/test-demo.md", "utf8"),
+                codepen: [
+                    ["can", "//unpkg.com/can@^5.0.0-pre.1/core.mjs"]
+                ]
+			}
+		});
+
+		generate(docMap, {
+			html: {
+				dependencies: {
+					"bit-docs-html-codepen-link": __dirname
+				}
+			},
+			dest: path.join(__dirname, "temp"),
+			parent: "index",
+			forceBuild: true,
+			minifyBuild: false
+		}).then(function() {
+			open("index.html",function(browser, close) {
+				var doc = browser.window.document;
+                var createCallData = [];
+                browser.window.CREATE_CODE_PEN = function(data){
+                    createCallData.push(data);
+                };
+                var codePens = doc.querySelectorAll('.codepen');
+
+                Array.from(codePens).forEach(function(codePen){
+                    codePen.click();
+                });
+                assert.deepEqual(createCallData,[
+                    {   html: '<my-app></my-app>',
+                        js: 'import { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent',
+                        js_module: true,
+                        editors: '1011' },
+                    {   js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
+                        js_module: true,
+                        editors: '0011' }
+                ]);
+
+				close();
+				done();
+			}, done);
+		}, done);
+	});
+});