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/08/09 14:50:14 UTC
[incubator-openwhisk-website] branch master updated: ADjust colors
for yaml and bash; add bash highlighting (#291)
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 e048880 ADjust colors for yaml and bash; add bash highlighting (#291)
e048880 is described below
commit e048880111547cdb7af164686988ec05a5f7bde2
Author: Matt Rutkowski <mr...@us.ibm.com>
AuthorDate: Thu Aug 9 09:50:12 2018 -0500
ADjust colors for yaml and bash; add bash highlighting (#291)
* ADjust colors for yaml and bash; add bash highlighting
* ADjust colors for yaml and bash; add bash highlighting
* Adjust code syntax padding when line numbers present
---
_layouts/documentation.html | 168 +++++++++++++++++++++----------------
_scss/_highlite-syntax-colors.scss | 10 +--
_scss/_skin.scss | 27 ++++--
3 files changed, 120 insertions(+), 85 deletions(-)
diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index 39e774c..c0c5fb8 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -159,9 +159,11 @@ layout: default
The easiest way to start deploying OpenWhisk is to get Docker installed on Mac, Windows or Linux.
This does not give you a production deployment but gives you enough of the pieces to start writing functions and seeing them executing.
<div class="terminal">
-<pre>git clone https://github.com/apache/incubator-openwhisk-devtools.git
-cd incubator-openwhisk-devtools/docker-compose
-make quick-start</pre>
+{% highlight bash %}
+$ git clone https://github.com/apache/incubator-openwhisk-devtools.git
+$ cd incubator-openwhisk-devtools/docker-compose
+$ make quick-start
+{% endhighlight %}
</div>
<p>
For more detailed instructions, see the
@@ -295,23 +297,26 @@ make quick-start</pre>
To get the CLI command help, execute the following command:
</li>
<div class="terminal">
-<pre>wsk --help</pre>
+{% highlight bash %}$ wsk --help{% endhighlight %}
</div>
- <p></p>
<li id="authentication"><strong>Authenticate wsk CLI</strong></li>
<p>You can configure wsk CLI to use your OpenWhisk credentials in few different ways:</p>
<ul>
<li>With wsk property setup</li>
<p>Run the following command to set whisk API HOST and authorization key to create the configuration file:</p>
<div class="terminal">
-<pre>wsk property set --apihost <API_HOST> --auth <AUTH_KEY> --namespace guest</pre>
+{% highlight bash %}
+$ wsk property set --apihost <API_HOST> --auth <AUTH_KEY> --namespace guest
+{% endhighlight %}
</div>
<p>Credentials are stored in <i>~/.wskprops</i>, which you can edit directly if needed.</p>
<li>Environment Variables Setup</li>
<p>Access credentials can be provided using properties file as environment variable:</p>
<div class="terminal">
-<pre>export WSK_CONFIG_FILE=<your-config-file>
-wsk list</pre>
+{% highlight bash %}
+$ export WSK_CONFIG_FILE=<your-config-file>
+$ wsk list
+{% endhighlight %}
</div>
</ul>
@@ -334,9 +339,8 @@ wsk list</pre>
Start by verifying the utility can display the command line help:
</li>
<div class="terminal">
-<pre>wskdeploy --help</pre>
+{% highlight bash %}$ wskdeploy --help{% endhighlight %}
</div>
- <p></p>
<li>
Create Package Manifest File <i>manifest.yaml</i>:
Please refer to the
@@ -351,7 +355,7 @@ wsk list</pre>
<a href="#authentication">here</a>.</li>
<li>Deploying an OpenWhisk Manifest file:</li>
<div class="terminal">
-<pre>wskdeploy -m manifest.yaml</pre>
+{% highlight bash %}$ wskdeploy -m manifest.yaml{% endhighlight %}
</div>
</ul>
</ul>
@@ -467,23 +471,24 @@ wsk list</pre>
</div>
<li style="list-style-type: decimal">Create an action called <i>helloJS</i> using <i>hello.js</i>:</li>
<div class="terminal">
- <pre>wsk action create helloJS hello.js</pre>
+{% highlight bash %}$ wsk action create helloJS hello.js{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: created action helloJS</pre>
</div>
<li style="list-style-type: decimal">Invoke the <i>helloJS</i> action as a blocking activation:</li>
<div class="terminal">
- <pre>wsk action invoke helloJS --blocking</pre>
+{% highlight bash %}$ wsk action invoke helloJS --blocking{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
-"result": {
- "payload": "Hello world"
-},
-"status": "success",
-"success": true
-}</pre>
+{% highlight yaml %}
+{
+ "result": {
+ "payload": "Hello world"
+ },
+ "status": "success",
+ "success": true
+}{% endhighlight %}
</div>
<li style="list-style-type: decimal">Deploy using <i>wskdeploy</i>:</li>
<p>
@@ -506,7 +511,7 @@ wsk list</pre>
</div>
<li>Run deployment with <i>wskdeploy</i>:</li>
<div class="terminal">
-<pre>wskdeploy -m manifest.yaml</pre>
+{% highlight bash %}$ wskdeploy -m manifest.yaml{% endhighlight %}
</div>
</ol>
</ol>
@@ -556,19 +561,21 @@ wsk list</pre>
</div>
<li style="list-style-type: decimal">Create an action called <i>helloPy</i> using <i>hello.py</i>:</li>
<div class="terminal">
-<pre>wsk action create helloPy hello.py</pre>
+{% highlight bash %}$ wsk action create helloPy hello.py{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: created action helloPy</pre>
</div>
<li style="list-style-type: decimal">Invoke the <i>helloPy</i> action using command-line parameters:</li>
<div class="terminal">
-<pre>wsk action invoke helloPy --blocking --param name World</pre>
+{% highlight bash %}$ wsk action invoke helloPy --blocking --param name World{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"greeting": "Hello World!"
-}</pre>
+}
+{% endhighlight %}
</div>
<li style="list-style-type: decimal">Deploy using <i>wskdeploy</i>:</li>
<p>
@@ -591,7 +598,7 @@ wsk list</pre>
</div>
<li>Run deployment with <i>wskdeploy</i>:</li>
<div class="terminal">
-<pre>wskdeploy -m manifest.yaml</pre>
+{% highlight bash %}$ wskdeploy -m manifest.yaml{% endhighlight %}
</div>
</ol>
</ol>
@@ -640,21 +647,25 @@ wsk list</pre>
</div>
<li style="list-style-type: decimal">Create an executable called <i>exec</i> using <i>hello.go</i>:</li>
<div class="terminal">
-<pre>GOOS=linux GOARCH=amd64 go build -o exec
-zip exec.zip exec</pre>
+{% highlight bash %}
+$ GOOS=linux GOARCH=amd64 go build -o exec
+$ zip exec.zip exec
+{% endhighlight %}
</div>
<li style="list-style-type: decimal">Create an action <i>helloGo</i>:</li>
<div class="terminal">
-<pre>wsk action create helloGo --native exec.zip</pre>
+{% highlight bash %}$ wsk action create helloGo --native exec.zip{% endhighlight %}
</div>
<li style="list-style-type: decimal">Invoke an action <i>helloGo</i>:</li>
<div class="terminal">
-<pre>wsk action invoke helloGo -r -p name gopher</pre>
+{% highlight bash %}$ wsk action invoke helloGo -r -p name gopher{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"msg": "Hello, gopher!"
-}</pre>
+}
+{% endhighlight %}
</div>
</ol>
<a class="indexable" id="go-runtime"></a>
@@ -701,24 +712,28 @@ zip exec.zip exec</pre>
</div>
<li style="list-style-type: decimal">Compile <i>Hello.Java</i> into a JAR file <i>hello.jar</i> as follows</li>
<div class="terminal">
-<pre>javac Hello.java
-jar cvf hello.jar Hello.class</pre>
+{% highlight bash %}
+$ javac Hello.java
+$ jar cvf hello.jar Hello.class
+{% endhighlight %}
</div>
<li style="list-style-type: decimal">Create an action called <i>helloJava</i> using <i>hello.jar</i>:</li>
<div class="terminal">
-<pre>wsk action create helloJava hello.jar --main Hello</pre>
+{% highlight bash %}$ wsk action create helloJava hello.jar --main Hello{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: created action helloJava</pre>
</div>
<li style="list-style-type: decimal">Invoke an action <i>helloJava</i>:</li>
<div class="terminal">
-<pre>wsk action invoke helloJava --blocking --result</pre>
+{% highlight bash %}$ wsk action invoke helloJava --blocking --result{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
-"greeting": "Hello stranger!"
-}</pre>
+{% highlight yaml %}
+{
+ "greeting": "Hello stranger!"
+}
+{% endhighlight %}
</div>
</ol>
<a class="indexable" id="java-runtime"></a>
@@ -790,19 +805,21 @@ jar cvf hello.jar Hello.class</pre>
</div>
<li style="list-style-type: decimal">Create an action called <i>helloPHP</i> using <i>hello.php</i>:</li>
<div class="terminal">
-<pre>wsk action create helloPHP hello.php</pre>
+{% highlight bash %}$ wsk action create helloPHP hello.php{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: created action helloPHP</pre>
</div>
<li style="list-style-type: decimal">Invoke an action <i>helloPHP</i>:</li>
<div class="terminal">
-<pre>wsk action invoke helloPHP --blocking --result --param name World</pre>
+{% highlight bash %}$ wsk action invoke helloPHP --blocking --result --param name World{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"greeting": "Hello World!"
-}</pre>
+}
+{% endhighlight %}
</div>
<li style="list-style-type: decimal">Deploy using <i>wskdeploy</i>:</li>
<p>
@@ -825,7 +842,7 @@ jar cvf hello.jar Hello.class</pre>
</div>
<li>Run deployment with <i>wskdeploy</i>:</li>
<div class="terminal">
-<pre>wskdeploy -m manifest.yaml</pre>
+{% highlight bash %}$ wskdeploy -m manifest.yaml{% endhighlight %}
</div>
</ol>
</ol>
@@ -893,11 +910,11 @@ jar cvf hello.jar Hello.class</pre>
<ul>
<li>Get a list of packages:</li>
<div class="terminal">
-<pre>wsk package list /whisk.system</pre>
+{% highlight bash %}$ wsk package list /whisk.system{% endhighlight %}
</div>
<li>Get a list of entities in a package:</li>
<div class="terminal">
-<pre>wsk package get --summary /whisk.system/<package-name></pre>
+{% highlight bash %}$ wsk package get --summary /whisk.system/<package-name>{% endhighlight %}
</div>
</ul>
<p>
@@ -911,7 +928,7 @@ jar cvf hello.jar Hello.class</pre>
<ul>
<li style="list-style: circle">Get a description of the /whisk.system/samples/greeting action:</li>
<div class="terminal">
-<pre>wsk action get --summary /whisk.system/samples/greeting</pre>
+{% highlight bash %}$ wsk action get --summary /whisk.system/samples/greeting{% endhighlight %}
</div>
<div class="terminal">
<pre>action /whisk.system/samples/greeting: Returns a friendly greeting
@@ -919,40 +936,46 @@ jar cvf hello.jar Hello.class</pre>
</div>
<li style="list-style: circle">Invoking action in a package:</li>
<div class="terminal">
-<pre>wsk action invoke --result /whisk.system/samples/greeting</pre>
+{% highlight bash %}$ wsk action invoke --result /whisk.system/samples/greeting{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"payload": "Hello, stranger from somewhere!"
-}</pre>
+}
+{% endhighlight %}
</div>
<li style="list-style: circle">Invoke the action with parameters:</li>
<div class="terminal">
-<pre>wsk action invoke --result /whisk.system/samples/greeting --param name Bernie --param place Vermont</pre>
+{% highlight bash %}$ wsk action invoke --result /whisk.system/samples/greeting --param name Bernie --param place Vermont{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"payload": "Hello, Bernie from Vermont!"
-}</pre>
+}
+{% endhighlight %}
</div>
</ul>
<li>Creating package binding and invoking action from the binding:</li>
<ul>
<li style="list-style: circle">Creating and using package bindings:</li>
<div class="terminal">
-<pre>wsk package bind /whisk.system/samples valhallaSamples --param place Valhalla</pre>
+{% highlight bash %}$ wsk package bind /whisk.system/samples valhallaSamples --param place Valhalla{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: created binding valhallaSamples</pre>
</div>
<li style="list-style: circle">Invoke an action in the package binding:</li>
<div class="terminal">
-<pre>wsk action invoke --result valhallaSamples/greeting --param name Odin</pre>
+{% highlight bash %}$ wsk action invoke --result valhallaSamples/greeting --param name Odin{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"payload": "Hello, Odin from Valhalla!"
-}</pre>
+}
+{% endhighlight %}
</div>
</ul>
</ul>
@@ -985,11 +1008,11 @@ jar cvf hello.jar Hello.class</pre>
<ul>
<li >Create a trigger to send user location updates:</li>
<div class="terminal">
- <pre>wsk trigger create locationUpdate</pre>
+{% highlight bash %}$ wsk trigger create locationUpdate{% endhighlight %}
</div>
<li>Check you have created the trigger by listing the set of triggers:</li>
<div class="terminal">
- <pre>wsk trigger list</pre>
+{% highlight bash %}$ wsk trigger list{% endhighlight %}
</div>
<div class="terminal">
<pre>triggers
@@ -997,7 +1020,7 @@ jar cvf hello.jar Hello.class</pre>
</div>
<li>Fire the trigger by specifying its name and parameters:</li>
<div class="terminal">
-<pre>wsk trigger fire locationUpdate --param name Bob --param place NYC</pre>
+{% highlight bash %}$ wsk trigger fire locationUpdate --param name Bob --param place NYC{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: triggered locationUpdate</pre>
@@ -1021,33 +1044,35 @@ jar cvf hello.jar Hello.class</pre>
{% endhighlight %}
</div>
<div class="terminal">
-<pre>wsk action create hello hello.js</pre>
+{% highlight bash %}$ wsk action create hello hello.js{% endhighlight %}
</div>
<div class="terminal">
-<pre>wsk action invoke --result hello --param name Bernie --param place Vermont</pre>
+{% highlight bash %}$ wsk action invoke --result hello --param name Bernie --param place Vermont{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}
+{
"payload": "Hello, Bernie from Vermont"
-}</pre>
+}
+{% endhighlight %}
</div>
<li>Create the rule:</li>
<div class="terminal">
-<pre>wsk rule create myRule locationUpdate hello</pre>
+{% highlight bash %}$ wsk rule create myRule locationUpdate hello{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: created rule myRule</pre>
</div>
<li>Fire the <i>locationUpdate</i> trigger:</li>
<div class="terminal">
-<pre>wsk trigger fire locationUpdate --param name Bob --param place NYC</pre>
+{% highlight bash %}$ wsk trigger fire locationUpdate --param name Bob --param place NYC{% endhighlight %}
</div>
<div class="terminal">
<pre>ok: triggered /_/locationUpdate with id abcd...</pre>
</div>
<li>Verify that the action was invoked by checking the activations list:</li>
<div class="terminal">
-<pre>wsk activation list --limit 2</pre>
+{% highlight bash %}$ wsk activation list --limit 2{% endhighlight %}
</div>
<div class="terminal">
<pre>activations
@@ -1057,12 +1082,13 @@ abcd.... locationUpdate
</div>
<li>Retrieving the trigger activation record:</li>
<div class="terminal">
-<pre>wsk activation result 1234....</pre>
+{% highlight bash %}$ wsk activation result 1234....{% endhighlight %}
</div>
<div class="terminal">
-<pre>{
+{% highlight yaml %}{
"payload": "Hello, Bob from NYC"
-}</pre>
+}
+{% endhighlight %}
</div>
You can see that the hello action received the event payload and returned the expected string.
</ul>
@@ -1089,7 +1115,7 @@ abcd.... locationUpdate
The catalog is available as packages under <i>/whisk.system</i> namespace.
Using the following command, you can get a list of packages under <i>/whisk.system:</i></li>
<div class="terminal">
-<pre>wsk package list /whisk.system</pre>
+{% highlight bash %}$ wsk package list /whisk.system{% endhighlight %}
</div>
<div class="terminal">
<pre>packages
diff --git a/_scss/_highlite-syntax-colors.scss b/_scss/_highlite-syntax-colors.scss
index 4c6e63e..f19da7a 100644
--- a/_scss/_highlite-syntax-colors.scss
+++ b/_scss/_highlite-syntax-colors.scss
@@ -28,18 +28,18 @@
.highlight .kt { color: #83D8E1; font-weight: 400 } /* Keyword.Type */
.highlight .m { color: #6600EE; font-weight: 400 } /* Literal.Number */
.highlight .s { color: #EC7600; background-color: inherit } /* Literal.String */
-.highlight .na { color: #678CB1 } /* Name.Attribute */
-.highlight .nb { color: #007020 } /* Name.Builtin */
-.highlight .nc { color: #678CB1; font-weight: 400 } /* Name.Class */
+.highlight .na { color: #7899ba } /* Name.Attribute */
+.highlight .nb { color: #00992b } /* Name.Builtin */
+.highlight .nc { color: #7899ba; font-weight: 400 } /* Name.Class */
.highlight .no { color: #93C763; font-weight: 400 } /* Name.Constant */
.highlight .nd { color: #555555; font-weight: 400 } /* Name.Decorator */
.highlight .ni { color: #880000; font-weight: 400 } /* Name.Entity */
.highlight .ne { color: #FF0000; font-weight: 400 } /* Name.Exception */
-.highlight .nf { color: #0066BB; font-weight: 400 } /* Name.Function */
+.highlight .nf { color: #008cff; font-weight: 400 } /* Name.Function */
.highlight .nl { color: #997700; font-weight: 400 } /* Name.Label */
.highlight .nn { color: #0e84b5; font-weight: 400 } /* Name.Namespace */
.highlight .nt { color: #007700 } /* Name.Tag */
-.highlight .nv { color: #996633 } /* Name.Variable */
+.highlight .nv { color: #7899ba } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: 400 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #6600EE; font-weight: 400 } /* Literal.Number.Bin */
diff --git a/_scss/_skin.scss b/_scss/_skin.scss
index 60bcd88..48251c5 100644
--- a/_scss/_skin.scss
+++ b/_scss/_skin.scss
@@ -46,6 +46,18 @@ p, ul, ol, li {
color: $color-blue-dark-text;
}
+a, a:visited, a:hover, a:active {
+ color: $color-anchors;
+}
+
+a.button {
+ color: white;
+}
+
+figure {
+ margin: 0px;
+}
+
.light-text {
clear: both;
color: $color-fg-base-light-text;
@@ -55,14 +67,6 @@ p, ul, ol, li {
line-height: 18px;
}
-a, a:visited, a:hover, a:active {
- color: $color-anchors;
-}
-
-a.button {
- color: white;
-}
-
.button {
background-color: $color-blue-dark;
border-bottom: solid 3px #b2b1b1;
@@ -105,7 +109,7 @@ a.button {
background: $color-terminal-bg;
color: $color-terminal-fg;
border: 1px solid $color-terminal-border;
- padding: 4px 4px 4px 8px;
+ padding: 8px 8px 8px 8px;
width: 700px;
margin-bottom: 10px;
@@ -121,3 +125,8 @@ a.button {
line-height: 140%;
}
}
+
+// Adjust code syntax padding when line numbers present
+.code {
+ padding-left: 10px;
+}