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}")
|
code-pane(language="#{language}" name="#{tabName}" format="#{format}")
|
||||||
!= getFrag(extPath + fileName + ".md", sps)
|
!= 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 getFrag = function(fileName, stylePatterns) {
|
||||||
- var frag = partial(fileName);
|
- var frag = partial(fileName);
|
||||||
- if (frag == null) {
|
- 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 {
|
- } else {
|
||||||
- // ``` gets translated to <pre><code>.....</code></pre> and we need
|
- // ``` 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
|
- // to remove this from the fragment prefix is 11 long and suffix is 13 long
|
||||||
- var r = frag.substring(11, frag.length-13);
|
- var r = frag.substring(11, frag.length-13);
|
||||||
- if (stylePatterns) {
|
- // Uncomment next line for debugging.
|
||||||
- for (var styleName in stylePatterns) {
|
- // r = "FileName: " + fileName + " Current path: " + current.path + " PathToDocs: " + getPathToDocs() + "\n" + r;
|
||||||
- var rxs = stylePatterns[styleName];
|
- return styleString(r, stylePatterns);
|
||||||
- rxs = Array.isArray(rxs) ? rxs : [rxs];
|
|
||||||
- rxs.forEach(function(rx) {
|
|
||||||
- r = annotate(r, styleName, rx );
|
|
||||||
- });
|
|
||||||
- }
|
|
||||||
- }
|
|
||||||
- return r;
|
|
||||||
- }
|
- }
|
||||||
- }
|
- }
|
||||||
|
|
||||||
- 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 repls = {};
|
||||||
- var matches;
|
- var matches;
|
||||||
- do {
|
- do {
|
||||||
@ -72,10 +91,66 @@ mixin makeTabs(path, fileNames, tabNames, stylePatterns)
|
|||||||
- return ix > 0 ? fileName.substr(ix+1) : "";
|
- return ix > 0 ? fileName.substr(ix+1) : "";
|
||||||
- }
|
- }
|
||||||
|
|
||||||
- var getPathToFrags = function() {
|
- var getPathToDocs = function() {
|
||||||
- var currentPath = current.path;
|
|
||||||
- // simple way to only take as many '../' sections as we need to back up to the 'docs' dir
|
- // simple way to only take as many '../' sections as we need to back up to the 'docs' dir
|
||||||
- // from the current document
|
- // from the current document
|
||||||
- // we will almost certainly never go 10 or 11 deep but ...
|
- // 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
|
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
|
#sg-code.showcase.shadow-1
|
||||||
header.showcase-header
|
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…
x
Reference in New Issue
Block a user