You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openwhisk.apache.org by pd...@apache.org on 2018/09/04 19:55:05 UTC

[incubator-openwhisk-website] branch master updated: Update the `wsk` installation instructions (#321)

This is an automated email from the ASF dual-hosted git repository.

pdesai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-openwhisk-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 7323a13  Update the `wsk` installation instructions (#321)
7323a13 is described below

commit 7323a13662ec90b13a84cb4c1979f3f17ffc96c8
Author: Justin Halsall <Ju...@users.noreply.github.com>
AuthorDate: Tue Sep 4 15:55:01 2018 -0400

    Update the `wsk` installation instructions (#321)
    
    * space elements in header equally
    
    * set terminal to not trigger horizontal scrollbar on lower screen resolutions
    
    * update CLI install docs and prepare for brew
    
    * Add seperate section for Windows
    
    * add styling for h6
    
    * add installation to naviation
    
    * uncomment brew docs
    
    * break up installtion and config instructions
---
 _layouts/documentation.html |  59 +++++++++++++++++++---
 _scss/_desktop.scss         |   4 +-
 _scss/_skin.scss            | 116 +++++++++++++++++++++++++-------------------
 _scss/_tablet.scss          |   1 -
 _scss/_variables.scss       |  43 ++++++++--------
 5 files changed, 142 insertions(+), 81 deletions(-)

diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index 22607f7..45e4404 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -35,6 +35,7 @@ layout: default
                 <li><a href="#pre-requisites">Pre-requisites</a></li>
                 <li class="collapsible-toggle"><a href="#using-openwhisk">Using OpenWhisk</a></li>
                 <ul class="collapse-content">
+                    <li><a href="#wsk-cli-install">Installing wsk CLI</a></li>
                     <li><a href="#wsk-cli">Configuring wsk CLI</a></li>
                     <li><a href="#wskdeploy">Deployment Tool - wskdeploy</a></li>
                     <li><a href="#rest-api">OpenWhisk REST API</a></li>
@@ -633,6 +634,53 @@ $ make quick-start
                 <a href="https://github.com/apache/incubator-openwhisk/blob/master/ansible/files/auth.guest">https://github.com/apache/incubator-openwhisk/blob/master/ansible/files/auth.guest</a>.
                 Also, use the <strong>192.168.33.13</strong> address as the whisk API host.
             </p>
+
+        </div>
+    </main>
+
+    <main class="doc">
+        <div class="content">
+
+            <a class="indexable" id="wsk-cli-install"></a>
+            <h5>Install the wsk CLI</h5>
+
+            <h6>Install the wsk with Homebrew (Mac &amp; Linux)</h6>
+            <p>To easily install the OpenWhisk CLI (wsk) you can use <a href="https://brew.sh">Homebrew for Mac</a> or <a href="http://linuxbrew.sh">Homebrew for Linux</a>.</p>
+            <div class="terminal">
+{% highlight bash %}
+$ brew update
+$ brew install wsk
+{% endhighlight %}
+            </div>
+            <p>Then you can invoke the OpenWhisk CLI by just typing <code>wsk</code>.</p>
+            <h6>Install the wsk CLI from a tar.gz (Mac &amp; Linux):</h6>
+            <p>If for any reason you can't or don't want to use one of the previous installation method, you can still download the OpenWhisk CLI in a standalone .tar.gz file with everything you need to get started.</p>
+
+            <p>The latest files can be found on the Releases page at GitHub: <a href="https://github.com/apache/incubator-openwhisk-cli/releases">https://github.com/apache/incubator-openwhisk-cli/releases</a></p>
+            <p>Download the file for your platform and uncompress it. Inside it you will have a <code>wsk</code> executable.</p>
+            <p>To make it simpler to use, you can move the binary into your PATH:</p>
+
+            <div class="terminal">
+            {% highlight bash %}$ sudo mv [full path to downloaded wsk] /usr/local/bin/wsk{% endhighlight %}
+            </div>
+
+            <p>Then you can invoke the OpenWhisk CLI by just typing <code>wsk</code>.</p>
+
+            <h6>Install the wsk CLI from a tar.gz (Windows):</h6>
+
+            <p>The latest files can be found on the Releases page at GitHub: <a href="https://github.com/apache/incubator-openwhisk-cli/releases">https://github.com/apache/incubator-openwhisk-cli/releases</a></p>
+            <p>Download the file for your platform and uncompress it. Inside it you will have a <code>wsk.exe</code> executable.</p>
+            <p>To make it simpler to use, you should <a href="https://www.computerhope.com/issues/ch000549.htm">add it to your PATH</a>.</p>
+
+            <p>Then you can invoke the OpenWhisk CLI by just typing <code>wsk</code>.</p>
+
+        </div>
+    </main>
+
+    <main class="doc">
+        <div class="content">
+
+
             <a class="indexable" id="wsk-cli"></a>
             <h5>Configure the wsk CLI</h5>
             <p>
@@ -640,11 +688,6 @@ $ make quick-start
             </p>
             <ul>
                 <li>
-                    <strong>Download the wsk CLI:</strong>
-                    Download wsk binary for your local environment into a location in your shell path from
-                    <a href="https://github.com/apache/incubator-openwhisk-cli/releases">here</a>.
-                </li>
-                <li>
                     <strong>CLI Help:</strong>
                     To get the CLI command help, execute the following command:
                     <div class="terminal">
@@ -756,7 +799,7 @@ $ wsk list
                     <a href="https://github.com/apache/incubator-openwhisk/blob/master/docs/actions.md#languages-and-runtimes">Here</a>
                     is the list of runtimes supported by OpenWhisk:
                 </p>
-                
+
                 <ul>
                     <li><a href="#nodejs">JavaScript</a> - OpenWhisk runtime for Node.js v6 and v8</li>
                     <li><a href="https://github.com/apache/incubator-openwhisk-runtime-docker/blob/master/README.md">Docker</a> - OpenWhisk runtime for Docker Actions using SDK</li>
@@ -766,7 +809,7 @@ $ wsk list
                     <li><a href="https://github.com/apache/incubator-openwhisk-runtime-swift/blob/master/README.md">Swift</a> - OpenWhisk runtime for Swift 3 and 4</li>
                     <li><a href="#java">Java</a> - OpenWhisk runtime for Java 8</li>
                 </ul>
-                
+
                 <p>
                     While the actual function code will be specific to a language and runtime, the OpenWhisk operations to create,
                     invoke and manage an action are the same regardless of the implementation choice. OpenWhisk wsk CLI and Whisk Deploy
@@ -782,7 +825,7 @@ $ wsk list
                     <a href="mailto:dev@openwhisk.incubator.apache.org">dev@openwhisk.incubator.apache.org</a>.
                     once you have followed the guide on creating a new language/runtimes. Here are some examples of runtimes added by community:
                 </p>
-            
+
                 <ul>
                     <li><a href="https://github.com/rainbyte/openwhisk-wrapper">Haskell based OpenWhisk Services</a></li>
                     <li><a href="http://jamesthom.as/blog/2017/01/18/openwhisk-and-rust/">OpenWhisk and Rust</a></li>
diff --git a/_scss/_desktop.scss b/_scss/_desktop.scss
index 020af02..d492c48 100644
--- a/_scss/_desktop.scss
+++ b/_scss/_desktop.scss
@@ -11,8 +11,8 @@
   }
 
   #whiskHeader {
-      // This padding applies only to the home page which has a banner
-      padding-top: $whisk-header-desktop-padding-top;
+    // This padding applies only to the home page which has a banner
+    padding-top: $whisk-header-desktop-padding-top;
   }
 
   #whiskIndexedLayout {
diff --git a/_scss/_skin.scss b/_scss/_skin.scss
index 9546f0f..21b22ad 100644
--- a/_scss/_skin.scss
+++ b/_scss/_skin.scss
@@ -1,56 +1,72 @@
 * {
-    box-sizing: border-box;
-    background: none;
-    border: 0
+  box-sizing: border-box;
+  background: none;
+  border: 0;
 }
 
 body {
-    font-family: $font-family-default;
+  font-family: $font-family-default;
 }
 
-h1, h2, h3, h4, h5 {
-    font-weight: $font-weight-bold;
-    margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: $font-weight-bold;
+  margin: 0;
 }
 
 h1 {
-    font-size: $h1-font-size;
-    line-height: $h1-line-height;
+  font-size: $h1-font-size;
+  line-height: $h1-line-height;
 }
 
 h2 {
-    font-size: $h2-font-size;
-    line-height: $h2-line-height;
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
 }
 
 h3 {
-    font-size: $h3-font-size;
-    line-height: $h3-line-height;
+  font-size: $h3-font-size;
+  line-height: $h3-line-height;
 }
 
 h4 {
-    font-size: $h4-font-size;
-    line-height: $h4-line-height;
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
 }
 
 h5 {
-    font-size: $h5-font-size;
-    line-height: $h5-line-height;
+  font-size: $h5-font-size;
+  line-height: $h5-line-height;
 }
 
-p, ul, ol, li {
-    font-size: $p-font-size;
-    font-weight: $p-font-weight;
-    line-height: $p-line-height;
-    color: $color-blue-dark-text;
+h6 {
+  font-size: $h6-font-size;
+  line-height: $h6-line-height;
 }
 
-a, a:visited, a:hover, a:active {
-    color: $color-anchors;
+p,
+ul,
+ol,
+li {
+  font-size: $p-font-size;
+  font-weight: $p-font-weight;
+  line-height: $p-line-height;
+  color: $color-blue-dark-text;
+}
+
+a,
+a:visited,
+a:hover,
+a:active {
+  color: $color-anchors;
 }
 
 a.button {
-    color: $color-white;
+  color: $color-white;
 }
 
 // The syntax highlighter uses the "figure" element, but we want to override its default margins
@@ -59,35 +75,35 @@ figure {
 }
 
 .button {
-    background-color: $color-blue-dark;
-    border-bottom: solid 3px #b2b1b1;
-    border-radius: 6px;
-    border: solid 1px $color-gray-percent-82;
-    box-shadow: inset 0 0 0 1px $color-gray-percent-96;
-    color: $color-blue-dark;
-    display: inline-block;
-    font-family: $font-family-default;
-    font-size: 13px;
-    font-weight: 300;
-    letter-spacing: 0.5px;
-    line-height: 40px;
-    padding: 0 20px;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    text-shadow: 0 1px 0 rgba($color-blue-dark, 0.6);
+  background-color: $color-blue-dark;
+  border-bottom: solid 3px #b2b1b1;
+  border-radius: 6px;
+  border: solid 1px $color-gray-percent-82;
+  box-shadow: inset 0 0 0 1px $color-gray-percent-96;
+  color: $color-blue-dark;
+  display: inline-block;
+  font-family: $font-family-default;
+  font-size: 13px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  line-height: 40px;
+  padding: 0 20px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 1px 0 rgba($color-blue-dark, 0.6);
 }
 
 .button:hover {
-    background: $color-blue-gray-medium;
-    border: solid 1px $color-gray-percent-76;
-    border-bottom: solid 3px $color-gray-percent-70;
-    box-shadow: inset 0 0 0 1px $color-gray-percent-94;
+  background: $color-blue-gray-medium;
+  border: solid 1px $color-gray-percent-76;
+  border-bottom: solid 3px $color-gray-percent-70;
+  box-shadow: inset 0 0 0 1px $color-gray-percent-94;
 }
 
 .button:active {
-    background: #dfdfdf;
-    border: solid 1px $color-gray-percent-56;
-    box-shadow: inset 0 10px 15px 0 $color-gray-percent-78;
-    top:2px;
+  background: #dfdfdf;
+  border: solid 1px $color-gray-percent-56;
+  box-shadow: inset 0 10px 15px 0 $color-gray-percent-78;
+  top: 2px;
 }
diff --git a/_scss/_tablet.scss b/_scss/_tablet.scss
index 8e4aa2c..4c04a54 100644
--- a/_scss/_tablet.scss
+++ b/_scss/_tablet.scss
@@ -1,5 +1,4 @@
 @media screen and (min-width: $media-size-tablet-start) {
-
   footer {
     padding: $whisk-footer-base-padding-tablet;
   }
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index e1303e6..a0ff1aa 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -159,6 +159,9 @@ $h4-line-height: 28px;
 $h5-font-size: 16px;
 $h5-line-height: 28px;
 
+$h6-font-size: $font-size-default;
+$h6-line-height: 24px;
+
 $p-font-size: $font-size-default;
 $p-font-weight: $font-weight-default;
 $p-line-height: $line-height-default;
@@ -166,25 +169,25 @@ $p-line-height: $line-height-default;
 /*
  * Header
  */
- $header-base-h1-font-size: 32px;
- $header-base-h1-font-weight: 300;
- $header-base-h1-font-style: normal;
- $header-base-h1-line-height: 42px;
-
- $header-base-h5-font-size: 14px;
- $header-base-h5-font-weight: 300;
- $header-base-h5-font-style: normal;
- $header-base-h5-line-height: 28px;
-
- $header-tablet-h1-font-size: $header-base-h1-font-size + 4px;
- $header-tablet-h1-font-weight: $header-base-h1-font-weight;
- $header-tablet-h1-font-style: $header-base-h1-font-style;
- $header-tablet-h1-line-height: $header-base-h1-line-height + 2px;
-
- $header-tablet-h5-font-size: $header-base-h5-font-size + 2px;
- $header-tablet-h5-font-weight: $header-base-h5-font-weight;
- $header-tablet-h5-font-style: $header-base-h5-font-style;
- $header-tablet-h5-line-height: $header-base-h5-line-height;
+$header-base-h1-font-size: 32px;
+$header-base-h1-font-weight: 300;
+$header-base-h1-font-style: normal;
+$header-base-h1-line-height: 42px;
+
+$header-base-h5-font-size: 14px;
+$header-base-h5-font-weight: 300;
+$header-base-h5-font-style: normal;
+$header-base-h5-line-height: 28px;
+
+$header-tablet-h1-font-size: $header-base-h1-font-size + 4px;
+$header-tablet-h1-font-weight: $header-base-h1-font-weight;
+$header-tablet-h1-font-style: $header-base-h1-font-style;
+$header-tablet-h1-line-height: $header-base-h1-line-height + 2px;
+
+$header-tablet-h5-font-size: $header-base-h5-font-size + 2px;
+$header-tablet-h5-font-weight: $header-base-h5-font-weight;
+$header-tablet-h5-font-style: $header-base-h5-font-style;
+$header-tablet-h5-line-height: $header-base-h5-line-height;
 
 /*
  * Index
@@ -254,7 +257,7 @@ $terminal-line-number-padding: 10px;
  * Image Wrapper
  */
 
- // prevent images from renmdering too large using width to determine scale
+// prevent images from renmdering too large using width to determine scale
 $image-wrapper-width: 100%;
 $image-wrapper-height: 100%;
 $image-wrapper-max-width: 500px;