You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by da...@apache.org on 2016/11/07 20:21:40 UTC

[1/3] incubator-beam-site git commit: [BEAM-902] Added runner toggles [BEAM-752] Infrastructure for toggling code snippets in documentation

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 <ma...@gmail.com>
Authored: Wed Nov 2 09:04:41 2016 +0500
Committer: Davor Bonaci <da...@google.com>
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


[3/3] incubator-beam-site git commit: This closes #70

Posted by da...@apache.org.
This closes #70


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/adbd30c0
Tree: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/tree/adbd30c0
Diff: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/diff/adbd30c0

Branch: refs/heads/asf-site
Commit: adbd30c00b62f864c739050d98ca300f523bbc91
Parents: a94ad40 f941c02
Author: Davor Bonaci <da...@google.com>
Authored: Mon Nov 7 12:21:16 2016 -0800
Committer: Davor Bonaci <da...@google.com>
Committed: Mon Nov 7 12:21:16 2016 -0800

----------------------------------------------------------------------
 content/documentation/runners/apex/index.html | 168 ++++++++++++++++++++
 content/get-started/quickstart/index.html     | 105 ++++---------
 content/js/language-switch.js                 | 173 +++++++++++----------
 src/get-started/quickstart.md                 | 160 +++++++++----------
 src/js/language-switch.js                     | 173 +++++++++++----------
 5 files changed, 461 insertions(+), 318 deletions(-)
----------------------------------------------------------------------



[2/3] incubator-beam-site git commit: Regenerate website

Posted by da...@apache.org.
Regenerate website


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/f941c023
Tree: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/tree/f941c023
Diff: http://git-wip-us.apache.org/repos/asf/incubator-beam-site/diff/f941c023

Branch: refs/heads/asf-site
Commit: f941c0230c94f0bd541057dbd5cc68a0b08bad3f
Parents: 2fc6f45
Author: Davor Bonaci <da...@google.com>
Authored: Mon Nov 7 12:21:15 2016 -0800
Committer: Davor Bonaci <da...@google.com>
Committed: Mon Nov 7 12:21:15 2016 -0800

----------------------------------------------------------------------
 content/documentation/runners/apex/index.html | 168 ++++++++++++++++++++
 content/get-started/quickstart/index.html     | 105 ++++---------
 content/js/language-switch.js                 | 173 +++++++++++----------
 3 files changed, 292 insertions(+), 154 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/f941c023/content/documentation/runners/apex/index.html
----------------------------------------------------------------------
diff --git a/content/documentation/runners/apex/index.html b/content/documentation/runners/apex/index.html
new file mode 100644
index 0000000..f25dec0
--- /dev/null
+++ b/content/documentation/runners/apex/index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>Apache Apex Runner</title>
+  <meta name="description" content="Apache Beam is an open source, unified model and set of language-specific SDKs for defining and executing data processing workflows, and also data ingestion and integration flows, supporting Enterprise Integration Patterns (EIPs) and Domain Specific Languages (DSLs). Dataflow pipelines simplify the mechanics of large-scale batch and streaming data processing and can run on a number of runtimes like Apache Flink, Apache Spark, and Google Cloud Dataflow (a cloud service). Beam also brings DSL in different languages, allowing users to easily implement their data integration processes.
+">
+
+  <link rel="stylesheet" href="/styles/site.css">
+  <link rel="stylesheet" href="/css/theme.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+  <script src="/js/bootstrap.min.js"></script>
+  <script src="/js/language-switch.js"></script>
+  <link rel="canonical" href="http://beam.incubator.apache.org/documentation/runners/apex/" data-proofer-ignore>
+  <link rel="alternate" type="application/rss+xml" title="Apache Beam (incubating)" href="http://beam.incubator.apache.org/feed.xml">
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-73650088-1', 'auto');
+    ga('send', 'pageview');
+
+  </script>
+  <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
+</head>
+
+
+  <body role="document">
+
+    <nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <a href="/" class="navbar-brand" >
+        <img alt="Brand" style="height: 25px" src="/images/beam_logo_navbar.png">
+      </a>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        <li class="dropdown">
+		  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Get Started <span class="caret"></span></a>
+		  <ul class="dropdown-menu">
+			  <li><a href="/get-started/beam-overview/">Beam Overview</a></li>
+              <li><a href="/get-started/quickstart/">Quickstart</a></li>
+			  <li role="separator" class="divider"></li>
+			  <li class="dropdown-header">Example Walkthroughs</li>
+			  <li><a href="/get-started/wordcount-example/">WordCount</a></li>
+			  <li><a href="/get-started/mobile-gaming-example/">Mobile Gaming</a></li>
+              <li role="separator" class="divider"></li>
+              <li class="dropdown-header">Resources</li>
+              <li><a href="/get-started/downloads">Downloads</a></li>
+              <li><a href="/get-started/releases">Release Notes</a></li>
+              <li><a href="/get-started/support">Support</a></li>
+		  </ul>
+	    </li>
+        <li class="dropdown">
+		  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Documentation <span class="caret"></span></a>
+		  <ul class="dropdown-menu">
+			  <li><a href="/documentation">Using the Documentation</a></li>
+			  <li role="separator" class="divider"></li>
+			  <li class="dropdown-header">Beam Concepts</li>
+			  <li><a href="/documentation/programming-guide/">Programming Guide</a></li>
+			  <li><a href="/documentation/resources/">Additional Resources</a></li>
+			  <li role="separator" class="divider"></li>
+              <li class="dropdown-header">Pipeline Fundamentals</li>
+              <li><a href="/documentation/pipelines/design-your-pipeline/">Design Your Pipeline</a></li>
+              <li><a href="/documentation/pipelines/create-your-pipeline/">Create Your Pipeline</a></li>
+              <li><a href="/documentation/pipelines/test-your-pipeline/">Test Your Pipeline</a></li>
+              <li role="separator" class="divider"></li>
+			  <li class="dropdown-header">SDKs</li>
+			  <li><a href="/documentation/sdks/java/">Java SDK</a></li>
+			  <li><a href="/documentation/sdks/javadoc/">Java SDK API Reference</a></li>
+			  <li role="separator" class="divider"></li>
+			  <li class="dropdown-header">Runners</li>
+			  <li><a href="/documentation/runners/capability-matrix/">Capability Matrix</a></li>
+			  <li><a href="/documentation/runners/direct/">Direct Runner</a></li>
+			  <li><a href="/documentation/runners/apex/">Apache Apex Runner</a></li>
+			  <li><a href="/documentation/runners/flink/">Apache Flink Runner</a></li>
+			  <li><a href="/documentation/runners/spark/">Apache Spark Runner</a></li>
+			  <li><a href="/documentation/runners/dataflow/">Cloud Dataflow Runner</a></li>
+		  </ul>
+	    </li>
+        <li class="dropdown">
+		  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contribute <span class="caret"></span></a>
+		  <ul class="dropdown-menu">
+			  <li><a href="/contribute">Get Started Contributing</a></li>
+        <li role="separator" class="divider"></li>
+        <li class="dropdown-header">Guides</li>
+			  <li><a href="/contribute/contribution-guide/">Contribution Guide</a></li>
+        <li><a href="/contribute/testing/">Testing Guide</a></li>
+        <li><a href="/contribute/release-guide/">Release Guide</a></li>
+        <li role="separator" class="divider"></li>
+        <li class="dropdown-header">Technical References</li>
+        <li><a href="/contribute/design-principles/">Design Principles</a></li>
+			  <li><a href="/contribute/work-in-progress/">Ongoing Projects</a></li>
+        <li><a href="/contribute/source-repository/">Source Repository</a></li>      
+        <li role="separator" class="divider"></li>
+			  <li class="dropdown-header">Promotion</li>
+        <li><a href="/contribute/presentation-materials/">Presentation Materials</a></li>
+        <li><a href="/contribute/logos/">Logos and Design</a></li>
+        <li role="separator" class="divider"></li>
+        <li><a href="/contribute/team/">Team</a></li>
+		  </ul>
+	    </li>
+
+        <li><a href="/blog">Blog</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="https://www.apache.org/foundation/press/kit/feather_small.png" alt="Apache Logo" style="height:24px;">Apache Software Foundation<span class="caret"></span></a>
+          <ul class="dropdown-menu dropdown-menu-right">
+            <li><a href="http://www.apache.org/">ASF Homepage</a></li>
+            <li><a href="http://www.apache.org/licenses/">License</a></li>
+            <li><a href="http://www.apache.org/security/">Security</a></li>
+            <li><a href="http://www.apache.org/foundation/thanks.html">Thanks</a></li>
+            <li><a href="http://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
+            <li><a href="https://www.apache.org/foundation/policies/conduct">Code of Conduct</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!--/.nav-collapse -->
+  </div>
+</nav>
+
+
+<link rel="stylesheet" href="">
+
+
+    <div class="container" role="main">
+
+      <div class="row">
+        <h1 id="using-the-apache-apex-runner">Using the Apache Apex Runner</h1>
+
+<p>This page is under construction (<a href="https://issues.apache.org/jira/browse/BEAM-825">BEAM-825</a>). The runner is on a feature branch.</p>
+
+
+      </div>
+
+
+    <hr>
+  <div class="row">
+      <div class="col-xs-12">
+          <footer>
+              <p class="text-center">&copy; Copyright 2016
+                <a href="http://www.apache.org">The Apache Software Foundation.</a> All Rights Reserved.</p>
+                <p class="text-center"><a href="/privacy_policy">Privacy Policy</a> |
+                <a href="/feed.xml">RSS Feed</a></p>
+          </footer>
+      </div>
+  </div>
+  <!-- container div end -->
+</div>
+
+
+  </body>
+
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/f941c023/content/get-started/quickstart/index.html
----------------------------------------------------------------------
diff --git a/content/get-started/quickstart/index.html b/content/get-started/quickstart/index.html
index 58429bc..c4f6772 100644
--- a/content/get-started/quickstart/index.html
+++ b/content/get-started/quickstart/index.html
@@ -209,87 +209,51 @@ MinimalWordCount.java	WordCount.java
       <li>Choosing input files and an output location are accessible on the chosen runner. (For example, you can\u2019t access a local file if you are running the pipeline on an external cluster.)</li>
     </ol>
   </li>
-  <li>
-    <p>Run your first WordCount pipeline.</p>
-
-    <ol>
-      <li>
-        <p><a href="/documentation/runners/direct">DirectRunner</a></p>
+  <li>Run your first WordCount pipeline.</li>
+</ol>
 
-        <div class="highlighter-rouge"><pre class="highlight"><code>$ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \
+<div class="runner-direct highlighter-rouge"><pre class="highlight"><code>$ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \
      -Dexec.args="--inputFile=pom.xml --output=counts"
 </code></pre>
-        </div>
-      </li>
-      <li>
-        <p><a href="/documentation/runners/flink">FlinkRunner</a></p>
+</div>
 
-        <div class="highlighter-rouge"><pre class="highlight"><code>TODO BEAM-899
+<div class="runner-flink highlighter-rouge"><pre class="highlight"><code>TODO BEAM-899
 </code></pre>
-        </div>
-      </li>
-      <li>
-        <p><a href="/documentation/runners/spark">SparkRunner</a></p>
+</div>
 
-        <div class="highlighter-rouge"><pre class="highlight"><code>TODO BEAM-900
+<div class="runner-spark highlighter-rouge"><pre class="highlight"><code>TODO BEAM-900
 </code></pre>
-        </div>
-      </li>
-      <li>
-        <p><a href="/documentation/runners/dataflow">DataflowRunner</a></p>
-
-        <div class="highlighter-rouge"><pre class="highlight"><code>$ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \
-     -Dexec.args="--runner=DataflowRunner --gcpTempLocation=gs://&lt;your-gcs-bucket&gt;/tmp \
-                  --inputFile=gs://apache-beam-samples/shakespeare/* --output=gs://&lt;your-gcs-bucket&gt;/counts"
+</div>
+
+<div class="runner-dataflow highlighter-rouge"><pre class="highlight"><code>$ mvn compile exec:java -Dexec.mainClass=org.apache.beam.examples.WordCount \
+	 -Dexec.args="--runner=DataflowRunner --gcpTempLocation=gs://&lt;your-gcs-bucket&gt;/tmp \
+	              --inputFile=gs://apache-beam-samples/shakespeare/* --output=gs://&lt;your-gcs-bucket&gt;/counts"
 </code></pre>
-        </div>
-      </li>
-    </ol>
-  </li>
-</ol>
+</div>
 
 <h2 id="inspect-the-results">Inspect the results</h2>
 
 <p>Once the pipeline has completed, you can view the output. You\u2019ll notice that there may be multiple output files prefixed by <code class="highlighter-rouge">count</code>. The exact number of these files is decided by the runner, giving it the flexibility to do efficient, distributed execution.</p>
 
-<ol>
-  <li>
-    <p><a href="/documentation/runners/direct">DirectRunner</a></p>
-
-    <div class="highlighter-rouge"><pre class="highlight"><code>$ ls counts*
+<div class="runner-direct highlighter-rouge"><pre class="highlight"><code>$ ls counts*
 </code></pre>
-    </div>
-  </li>
-  <li>
-    <p><a href="/documentation/runners/flink">FlinkRunner</a></p>
+</div>
 
-    <div class="highlighter-rouge"><pre class="highlight"><code>TODO BEAM-899
+<div class="runner-flink highlighter-rouge"><pre class="highlight"><code>TODO BEAM-899
 </code></pre>
-    </div>
-  </li>
-  <li>
-    <p><a href="/documentation/runners/spark">SparkRunner</a></p>
+</div>
 
-    <div class="highlighter-rouge"><pre class="highlight"><code>TODO BEAM-900
+<div class="runner-spark highlighter-rouge"><pre class="highlight"><code>TODO BEAM-900
 </code></pre>
-    </div>
-  </li>
-  <li>
-    <p><a href="/documentation/runners/dataflow">DataflowRunner</a></p>
+</div>
 
-    <div class="highlighter-rouge"><pre class="highlight"><code>$ gsutil ls gs://&lt;your-gcs-bucket&gt;/counts*
+<div class="runner-dataflow highlighter-rouge"><pre class="highlight"><code>$ gsutil ls gs://&lt;your-gcs-bucket&gt;/counts*
 </code></pre>
-    </div>
-  </li>
-</ol>
+</div>
 
 <p>When you look into the contents of the file, you\u2019ll 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.</p>
 
-<ol>
-  <li>
-    <p><a href="/documentation/runners/direct">DirectRunner</a></p>
-
-    <div class="highlighter-rouge"><pre class="highlight"><code>$ more counts*
+<div class="runner-direct highlighter-rouge"><pre class="highlight"><code>$ more counts*
 api: 9
 bundled: 1
 old: 4
@@ -299,26 +263,17 @@ limitations: 1
 Foundation: 1
 ...
 </code></pre>
-    </div>
-  </li>
-  <li>
-    <p><a href="/documentation/runners/flink">FlinkRunner</a></p>
+</div>
 
-    <div class="highlighter-rouge"><pre class="highlight"><code>TODO BEAM-899
+<div class="runner-flink highlighter-rouge"><pre class="highlight"><code>TODO BEAM-899
 </code></pre>
-    </div>
-  </li>
-  <li>
-    <p><a href="/documentation/runners/spark">SparkRunner</a></p>
+</div>
 
-    <div class="highlighter-rouge"><pre class="highlight"><code>TODO BEAM-900
+<div class="runner-spark highlighter-rouge"><pre class="highlight"><code>TODO BEAM-900
 </code></pre>
-    </div>
-  </li>
-  <li>
-    <p><a href="/documentation/runners/dataflow">DataflowRunner</a></p>
+</div>
 
-    <div class="highlighter-rouge"><pre class="highlight"><code>$ gsutil cat gs://&lt;your-gcs-bucket&gt;/counts*
+<div class="runner-dataflow highlighter-rouge"><pre class="highlight"><code>$ gsutil cat gs://&lt;your-gcs-bucket&gt;/counts*
 feature: 15
 smother'st: 1
 revelry: 1
@@ -329,9 +284,7 @@ deserves: 32
 barrenly: 1
 ...
 </code></pre>
-    </div>
-  </li>
-</ol>
+</div>
 
 <h2 id="next-steps">Next Steps</h2>
 

http://git-wip-us.apache.org/repos/asf/incubator-beam-site/blob/f941c023/content/js/language-switch.js
----------------------------------------------------------------------
diff --git a/content/js/language-switch.js b/content/js/language-switch.js
index 1e4e5f2..2c634fe 100644
--- a/content/js/language-switch.js
+++ b/content/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