Repository: incubator-beam-site Updated Branches: refs/heads/asf-site a94ad4021 -> adbd30c00
[BEAM-902] Added runner toggles [BEAM-752] Infrastructure for toggling code snippets in documentation Project: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/commit/2fc6f459 Tree: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/tree/2fc6f459 Diff: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/diff/2fc6f459 Branch: refs/heads/asf-site Commit: 2fc6f459079bef447aa26703ac0b7c0ae65e0275 Parents: a94ad40 Author: Abdullah Bashir <[email protected]> Authored: Wed Nov 2 09:04:41 2016 +0500 Committer: Davor Bonaci <[email protected]> Committed: Mon Nov 7 12:20:38 2016 -0800 ---------------------------------------------------------------------- src/get-started/quickstart.md | 160 ++++++++++++++++------------------ src/js/language-switch.js | 173 ++++++++++++++++++++----------------- 2 files changed, 169 insertions(+), 164 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/2fc6f459/src/get-started/quickstart.md ---------------------------------------------------------------------- diff --git a/src/get-started/quickstart.md b/src/get-started/quickstart.md index 8402c55..f5db479 100644 --- a/src/get-started/quickstart.md +++ b/src/get-started/quickstart.md @@ -67,106 +67,94 @@ After you've chosen which runner you'd like to use: 1. Choosing input files and an output location are accessible on the chosen runner. (For example, you can't access a local file if you are running the pipeline on an external cluster.) 1. Run your first WordCount pipeline. - 1. [DirectRunner]({{ site.baseurl }}/documentation/runners/direct) - - ``` - $ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \ - -Dexec.args="--inputFile=pom.xml --output=counts" - ``` - - 1. [FlinkRunner]({{ site.baseurl }}/documentation/runners/flink) - - ``` - TODO BEAM-899 - ``` - - 1. [SparkRunner]({{ site.baseurl }}/documentation/runners/spark) - - ``` - TODO BEAM-900 - ``` - - 1. [DataflowRunner]({{ site.baseurl }}/documentation/runners/dataflow) - - ``` - $ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \ - -Dexec.args="--runner=DataflowRunner --gcpTempLocation=gs://<your-gcs-bucket>/tmp \ - --inputFile=gs://apache-beam-samples/shakespeare/* --output=gs://<your-gcs-bucket>/counts" - ``` +{:.runner-direct} +``` +$ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \ + -Dexec.args="--inputFile=pom.xml --output=counts" +``` + +{:.runner-flink} +``` +TODO BEAM-899 +``` + +{:.runner-spark} +``` +TODO BEAM-900 +``` + +{:.runner-dataflow} +``` +$ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \ + -Dexec.args="--runner=DataflowRunner --gcpTempLocation=gs://<your-gcs-bucket>/tmp \ + --inputFile=gs://apache-beam-samples/shakespeare/* --output=gs://<your-gcs-bucket>/counts" +``` ## Inspect the results Once the pipeline has completed, you can view the output. You'll notice that there may be multiple output files prefixed by `count`. The exact number of these files is decided by the runner, giving it the flexibility to do efficient, distributed execution. -1. [DirectRunner]({{ site.baseurl }}/documentation/runners/direct) +{:.runner-direct} +``` +$ ls counts* +``` - ``` - $ ls counts* - ``` +{:.runner-flink} +``` +TODO BEAM-899 +``` -1. [FlinkRunner]({{ site.baseurl }}/documentation/runners/flink) +{:.runner-spark} +``` +TODO BEAM-900 +``` - ``` - TODO BEAM-899 - ``` -1. [SparkRunner]({{ site.baseurl }}/documentation/runners/spark) +{:.runner-dataflow} +``` +$ gsutil ls gs://<your-gcs-bucket>/counts* +``` + +When you look into the contents of the file, you'll see that they contain unique words and the number of occurrences of each word. The order of elements within the file may differ because the Beam model does not generally guarantee ordering, again to allow runners to optimize for efficiency. - ``` - TODO BEAM-900 - ``` +{:.runner-direct} +``` +$ more counts* +api: 9 +bundled: 1 +old: 4 +Apache: 2 +The: 1 +limitations: 1 +Foundation: 1 +... +``` +{:.runner-flink} +``` +TODO BEAM-899 +``` -1. [DataflowRunner]({{ site.baseurl }}/documentation/runners/dataflow) +{:.runner-spark} +``` +TODO BEAM-900 +``` + +{:.runner-dataflow} +``` +$ gsutil cat gs://<your-gcs-bucket>/counts* +feature: 15 +smother'st: 1 +revelry: 1 +bashfulness: 1 +Bashful: 1 +Below: 2 +deserves: 32 +barrenly: 1 +... +``` - ``` - $ gsutil ls gs://<your-gcs-bucket>/counts* - ``` - -When you look into the contents of the file, you'll see that they contain unique words and the number of occurrences of each word. The order of elements within the file may differ because the Beam model does not generally guarantee ordering, again to allow runners to optimize for efficiency. - -1. [DirectRunner]({{ site.baseurl }}/documentation/runners/direct) - - ``` - $ more counts* - api: 9 - bundled: 1 - old: 4 - Apache: 2 - The: 1 - limitations: 1 - Foundation: 1 - ... - ``` - -1. [FlinkRunner]({{ site.baseurl }}/documentation/runners/flink) - - ``` - TODO BEAM-899 - ``` - -1. [SparkRunner]({{ site.baseurl }}/documentation/runners/spark) - - ``` - TODO BEAM-900 - ``` - -1. [DataflowRunner]({{ site.baseurl }}/documentation/runners/dataflow) - - ``` - $ gsutil cat gs://<your-gcs-bucket>/counts* - feature: 15 - smother'st: 1 - revelry: 1 - bashfulness: 1 - Bashful: 1 - Below: 2 - deserves: 32 - barrenly: 1 - ... - ``` - ## Next Steps * Learn more about these WordCount examples in the [WordCount Example Walkthrough]({{ site.baseurl }}/get-started/wordcount-example). http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/2fc6f459/src/js/language-switch.js ---------------------------------------------------------------------- diff --git a/src/js/language-switch.js b/src/js/language-switch.js index 1e4e5f2..2c634fe 100644 --- a/src/js/language-switch.js +++ b/src/js/language-switch.js @@ -1,87 +1,104 @@ -$(document).ready(function(){ - // Pattern in every code block, wrapper element. - var elAttr = "div[class^=\"language-\"]"; - // Default language. - var defLang = "language-java"; - // Wrapper class for css stylings. - var wrapper="language-switcher" +$(document).ready(function() { + function Switcher(conf) { + var id = conf["class-prefix"], + def = conf["default"]; + var prefix = id + "-"; + return { + "id": id, + "selector": "div[class^=" + prefix + "]", + "wrapper": prefix + "switcher", // Parent wrapper-class. + "default": prefix + def, // Default type to display. + "dbKey": id, // Local Storage Key - /** - * @desc Generate bootstrapped like nav template, showing supported languages in nav. - * @param array $languages - list of supported languages. - * @return string - html template, which is bootstrapped nav tabs. - */ - function navTemplate(languages) { - var langList=""; + /** + * @desc Generate bootstrapped like nav template, + showing supported types in nav. + * @param array $types - list of supported types. + * @return string - html template, which is bootstrapped nav tabs. + */ + "navHtml": function(types) { + var lists = ""; + var selectors = ""; - for (var i = languages.length - 1; i >= 0; i--) { - langList+="<li data-lang=\""+languages[i]+"\"> \ - <a>"+languages[i].replace("language-","")+"</a></li>"; - } - return "<div class=\""+wrapper+" "+languages.join(" ")+"\"> \ - <ul class=\"nav nav-tabs\">"+langList+"</ul> </div>"; - } - - /** - * @desc Extract language from provided text. - * @param string $text - string containing language, e.g language-python. - * @return string - cleaned name of languge, e.g python. - */ - function getLang(text) { - var lang = /language-\w+/i.exec(text) - return (lang)? lang[0]:""; - } + types.forEach(function(type) { + var name = type.replace(prefix, ""); + name = name.charAt(0).toUpperCase() + name.slice(1); + selectors += " " + type; + lists += "<li data-type=\"" + type + "\"><a>"; + lists += name + "</a></li>"; + }); + return "<div class=\"" + this.wrapper + selectors + "\"> \ + <ul class=\"nav nav-tabs\">" + lists + "</ul> </div>"; + }, + /** + * @desc Extract language from provided text. + * @param string $text - string containing language, e.g language-python. + * @return string - cleaned name of languge, e.g python. + */ + "parseName": function(str) { + var re = new RegExp(prefix + "(\\w+)"); + var parse = re.exec(str); + return (parse) ? parse[1] : ""; + }, + /** + * @desc Add Navigation tabs on top of parent code blocks. + */ + "addTabs": function() { + var _self = this; - /** - * @desc Search next sibling and if it's also a code block, then store - it's language and move onto the next element. It will keep - looking untill their is no direct code block decendent left. - * @param object $el - jQuery object, from where to start searching. - * @param array $lang - list to hold languages, found while searching. - * @return array - list of languages found. - */ - function nextFetch(el, lang) { - if(!el.is(elAttr)) { - return lang; - } + $(_self.selector).each(function() { + if ($(this).prev().is(_self.selector)) { + return; + } + $(this).before(_self.navHtml(_self.lookup($(this), []))); + }); + }, + /** + * @desc Search next sibling and if it's also a code block, then store + it's type and move onto the next element. It will keep + looking untill their is no direct code block decendent left. + * @param object $el - jQuery object, from where to start searching. + * @param array $lang - list to hold types, found while searching. + * @return array - list of types found. + */ + "lookup": function(el, lang) { + if (!el.is(this.selector)) { + return lang; + } - lang.push(getLang(el.attr("class"))) - return nextFetch(el.next(), lang) - } + lang.push(el.attr("class").split(" ")[0]) + return this.lookup(el.next(), lang) + }, + "bindEvents": function() { + var _self = this; + $("." + _self.wrapper + " ul li").click(function(el) { + // Making type preferences presistance, for user. + localStorage.setItem(_self.dbKey, $(this).data("type")); + _self.toggle(); + }); + }, + "toggle": function() { + var pref=localStorage.getItem(this.dbKey) || this.default; - /** - * @desc Perform language switch on page, and persist it's state. - */ - var switchLanguage = function() { - var langPref = localStorage.getItem("codePreference") || defLang; + // Adjusting active elements in navigation header. + $("." + this.wrapper + " li").removeClass("active").each(function() { + if ($(this).data("type") === pref) { + $(this).addClass("active"); + } + }); - // Adjusting active elements in navigation header. - $("."+wrapper+" li").removeClass("active").each(function(){ - if($(this).data("lang") === langPref) { - $(this).addClass("active"); + // Swapping visibility of code blocks. + $("[class^=" + prefix).hide(); + $("." + pref).show(); + }, + "render": function(wrapper) { + this.addTabs(); + this.bindEvents(); + this.toggle(); } - }); - - // Swapping visibility of code blocks. - $("[class^=\"language-\"]").hide(); - $("."+langPref).show(); + }; } - // Add Nav tabs on top of code blocks. - $(elAttr).each(function() { - if($(this).prev().is(elAttr)) { - return; - } - $(this).before(navTemplate(nextFetch($(this), []))); - }); - - // Attaching on click listener, to li elements. - $("."+wrapper+" ul li").click(function(el) { - // Making language preferences presistance, for user. - localStorage.setItem("codePreference", $(this).data("lang")); - switchLanguage(); - }) - - // Invoking on page boot. - switchLanguage(); -}) \ No newline at end of file + Switcher({"class-prefix":"language","default":"java"}).render(); + Switcher({"class-prefix":"runner","default":"direct"}).render(); +}); \ No newline at end of file
