partial refactoring for makeJson
This commit is contained in:
Jay Traband
parent
8d71aee541
commit
bdb97ed499
|
|
@ -25,29 +25,48 @@ mixin makeTabs(path, fileNames, tabNames, stylePatterns)
|
|||
code-pane(language="#{language}" name="#{tabName}" format="#{format}")
|
||||
!= getFrag(extPath + fileName + ".md", sps)
|
||||
|
||||
mixin makeJson(path, fileName, title, stylePatterns)
|
||||
- var language = attributes.language || getExtn(fileName);
|
||||
- var format = attributes.format || "linenums";
|
||||
- var extPath = getPathToFrags() + path + "/";
|
||||
if (title)
|
||||
.example-title #{title}
|
||||
code-example(language="#{language}" format="#{format}")
|
||||
!= getFrag(extPath + fileName + ".md", stylePatterns)
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
|
||||
- var getFrag = function(fileName, stylePatterns) {
|
||||
- var frag = partial(fileName);
|
||||
- if (frag == null) {
|
||||
- return "BAD FILENAME: " + fileName + " Current path: " + current.path + " Fragment path: " + current.pathToFrags;
|
||||
- return "BAD FILENAME: " + fileName + " Current path: " + current.path + " PathToDocs: " + getPathToDocs();
|
||||
- } else {
|
||||
- // ``` gets translated to <pre><code>.....</code></pre> and we need
|
||||
- // to remove this from the fragment prefix is 11 long and suffix is 13 long
|
||||
- var r = frag.substring(11, frag.length-13);
|
||||
- if (stylePatterns) {
|
||||
- for (var styleName in stylePatterns) {
|
||||
- var rxs = stylePatterns[styleName];
|
||||
- rxs = Array.isArray(rxs) ? rxs : [rxs];
|
||||
- rxs.forEach(function(rx) {
|
||||
- r = annotate(r, styleName, rx );
|
||||
- });
|
||||
- }
|
||||
- }
|
||||
- return r;
|
||||
- // Uncomment next line for debugging.
|
||||
- // r = "FileName: " + fileName + " Current path: " + current.path + " PathToDocs: " + getPathToDocs() + "\n" + r;
|
||||
- return styleString(r, stylePatterns);
|
||||
- }
|
||||
- }
|
||||
|
||||
- var annotate = function(str, styleName, rx) {
|
||||
- var styleString = function(source, stylePatterns) {
|
||||
- if (stylePatterns) {
|
||||
- for (var styleName in stylePatterns) {
|
||||
- var rxs = stylePatterns[styleName];
|
||||
- rxs = Array.isArray(rxs) ? rxs : [rxs];
|
||||
- rxs.forEach(function(rx) {
|
||||
- source = applyStyle(source, styleName, rx );
|
||||
- });
|
||||
- }
|
||||
- }
|
||||
- return source;
|
||||
- }
|
||||
|
||||
//- styles a string according to a regular expression.
|
||||
//- The match groups resulting from the regexp application are what is styled
|
||||
//- (not the whole regexp).
|
||||
- var applyStyle = function(str, styleName, rx) {
|
||||
- var repls = {};
|
||||
- var matches;
|
||||
- do {
|
||||
|
|
@ -72,10 +91,66 @@ mixin makeTabs(path, fileNames, tabNames, stylePatterns)
|
|||
- return ix > 0 ? fileName.substr(ix+1) : "";
|
||||
- }
|
||||
|
||||
- var getPathToFrags = function() {
|
||||
- var currentPath = current.path;
|
||||
- var getPathToDocs = function() {
|
||||
- // simple way to only take as many '../' sections as we need to back up to the 'docs' dir
|
||||
- // from the current document
|
||||
- // we will almost certainly never go 10 or 11 deep but ...
|
||||
- return current.pathToFrags || "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
|
||||
- return current.pathToDocs || "../../../../../../../../../../../".substr(0, (current.path.length-2)*3);
|
||||
- }
|
||||
|
||||
- var getPathToFrags = function() {
|
||||
- return getPathToDocs() + "_fragments/";
|
||||
- }
|
||||
|
||||
- var getPathToExamples = function() {
|
||||
- return getPathToDocs() + "_examples/";
|
||||
- }
|
||||
|
||||
//- Extract a subset of a json file in a specified order defined
|
||||
//- by extractPaths while retaining original order for any
|
||||
//- unspecified subobjects.
|
||||
//-
|
||||
//- based on the principle that JSON.parse(source) constructs objects
|
||||
//- in order from the top down in 'source' and JSON.stringify(source) iterates 'source'
|
||||
//- properties according to the order in which they were inserted. ( the spec actually
|
||||
//- discourages this assumption but this method will only
|
||||
//- run on node (v8) and the assumption seems safe there. )
|
||||
- function extractFragment(source, rootPath, extractPaths, space) {
|
||||
- var objSource = JSON.parse(source);
|
||||
- if (rootPath && rootPath.length > 0) {
|
||||
- objSource = getSubObject(objSource, rootPath);
|
||||
- }
|
||||
- var objDest = {};
|
||||
- extractPaths.trim().split(",").forEach(function(dotPath) {
|
||||
- processPath(objSource, objDest, dotPath );
|
||||
- });
|
||||
- var result = JSON.stringify(objDest, null, space);
|
||||
- return result;
|
||||
|
||||
- function getSubObject(source, path) {
|
||||
- var nextSource = source;
|
||||
- var pathParts = path.trim().split(".");
|
||||
- while (pathParts.length > 0) {
|
||||
- var nextProp = pathParts.shift();
|
||||
- nextSource = nextSource[nextProp];
|
||||
- }
|
||||
- return nextSource;
|
||||
- }
|
||||
|
||||
- function processPath(source, dest, dotPath) {
|
||||
- var nextSource = source;
|
||||
- var nextDest = dest;
|
||||
- var pathParts = dotPath.trim().split(".");
|
||||
- while (pathParts.length > 0) {
|
||||
- var nextProp = pathParts.shift();
|
||||
- nextSource = nextSource[nextProp];
|
||||
- if (pathParts.length > 0) {
|
||||
- var val = nextDest[nextProp] || {};
|
||||
- nextDest[nextProp] = val;
|
||||
- nextDest = val;
|
||||
- } else {
|
||||
- nextDest[nextProp] = nextSource;
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
include ../../../_includes/_util-fns
|
||||
|
||||
- current.pathToFrags = "../../_fragments/";
|
||||
//- next line is needed whenever calling makeXXX mixin from within a partial
|
||||
- current.pathToDocs = "../../";
|
||||
|
||||
#sg-code.showcase.shadow-1
|
||||
header.showcase-header
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
#sg-code.showcase.shadow-1
|
||||
header.showcase-header
|
||||
h2 Code Examples
|
||||
p Below are some examples of how you can add/customize code examples in a page.
|
||||
|
||||
|
||||
strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
|
||||
ul
|
||||
li <strong>name</strong> Name displayed in Tab (required for tabs)
|
||||
li <strong>language</strong> javascript, html, etc.
|
||||
li <strong>escape</strong> html (escapes html, woot!)
|
||||
li <strong>format</strong> linenums (or linenums:4 specify starting line)
|
||||
|
||||
.showcase-content
|
||||
|
||||
.l-sub-section
|
||||
h3 Inline Code Examples
|
||||
|
||||
p.
|
||||
Inline code example <code ng-non-bindable>{{username}}</code>
|
||||
|
||||
code-example(format="linenums" language="html" escape="html").
|
||||
Inline code example <code ng-non-bindable>{{username}}</code>
|
||||
|
||||
p.
|
||||
Notice the <strong>ng-non-bindable</strong> attribute. This is only
|
||||
needed when using code examples inline <strong>code-tabs and code-example directives
|
||||
automatically do this</strong>.
|
||||
|
||||
.l-sub-section
|
||||
h3 Adding a code example
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
code-example(format="linenums" language="javascript").
|
||||
//SOME CODE
|
||||
|
||||
.l-sub-section
|
||||
h3 Specify starting line number
|
||||
|
||||
code-example(language="javascript" format="linenums:4").
|
||||
code-example(language="html" format="linenums:4").
|
||||
var title = "This starts on line four";
|
||||
|
||||
.l-sub-section
|
||||
h3 Specify a language
|
||||
|
||||
p.
|
||||
Prettify makes a best effort to guess the language but
|
||||
works best with C-like and HTML-like languages. For
|
||||
others, there are special language handlers that are
|
||||
chosen based on language hints. Add a class that matches
|
||||
your desired language (example below uses <strong>.lang-html</strong>)
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
h1 Title
|
||||
p This is some copy...
|
||||
|
||||
.l-sub-section
|
||||
h3 Code Highlighting
|
||||
p.
|
||||
There are three types of highlights avialable
|
||||
<strong>Outlined</strong>, <strong>Pink</strong>, and
|
||||
<strong>Black</strong>. You can see examples below and
|
||||
the class names needed for each type.
|
||||
|
||||
code-example(format="linenums").
|
||||
// Pink Background Version
|
||||
// class="pnk"
|
||||
var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
|
||||
|
||||
// Black Background Version
|
||||
// class="blk"
|
||||
var night = "The night was pitch <span class='blk'>black</span>.";
|
||||
|
||||
// Outlined Version
|
||||
// class="otl"
|
||||
var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
|
||||
|
||||
.l-sub-section
|
||||
h3 Code Tabs
|
||||
p.
|
||||
Code Tabs are a great way to show different languages and versions
|
||||
of a particular piece of code. When using these tabs make sure the
|
||||
<stron>content is always related</strong>.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" format="linenums" name="ES5").
|
||||
// ES5
|
||||
var hello = 'blah';
|
||||
|
||||
code-pane(language="javascript" format="linenums" name="TypeScript").
|
||||
// TypeScript
|
||||
var hello = 'blah';
|
||||
|
||||
p To create code tabs simply use the directives below
|
||||
code-example(format="linenums").
|
||||
code-tabs
|
||||
code-pane(format="linenums" name="Tab 1").
|
||||
// TAB 1 CONTENT
|
||||
code-pane(format="linenums" name="Tab 2").
|
||||
// TAB 2 CONTENT
|
||||
Loading…
Reference in New Issue