radanalyticsio · elmiko · Jul 30, 2018 · Jul 27, 2018 · Jul 27, 2018 · Jul 27, 2018
diff --git a/_config.yml b/_config.yml
@@ -47,7 +47,7 @@ collections:
     permalink: /collections/:collection/:path # this is also part of the workaround
   howdoi:
     output: true # this is to workaround issue #161 in jekyll-asciidoc
-    permalink: /collections/:collection/:path # this is also part of the workaround
+    permalink: /:collection/:name # this is also part of the workaround
   presentations:
     output: true # this is to workaround issue #161 in jekyll-asciidoc
     permalink: /collections/:collection/:path # this is also part of the workaround

diff --git a/_howdoi/how-do-i-launch-a-jupyter-notebook.adoc b/_howdoi/how-do-i-launch-a-jupyter-notebook.adoc
@@ -1,4 +1,6 @@
 = launch a Jupyter notebook on OpenShift
+:page-layout: howdoi
+:page-menu_entry: How do I?
 
 There are multiple ways to launch a Jupyter notebook on OpenShift with the
 radanalytics.io tooling. You can use the OpenShift console or the `oc` command

diff --git a/_howdoi/how-do-i-recognize-version-clash.adoc b/_howdoi/how-do-i-recognize-version-clash.adoc
@@ -1,4 +1,6 @@
 = recognize Spark version mismatch between driver, master and/or workers?
+:page-layout: howdoi
+:page-menu_entry: How do I?
 
 It's important that the Spark version running on your driver, master, and
 worker pods all match. Although some versions _might actually_ interoperate,

diff --git a/_howdoi/how-to-connect-to-cluster.adoc b/_howdoi/how-to-connect-to-cluster.adoc
@@ -1,4 +1,6 @@
 = connect to a cluster to debug / develop?
+:page-layout: howdoi
+:page-menu_entry: How do I?
 
 [source,bash]
 oc run -it --rm dev-shell --image=radanalyticsio/openshift-spark -- spark-shell
diff --git a/_howdoi/how-to-connect-to-kafka.adoc b/_howdoi/how-to-connect-to-kafka.adoc
@@ -1,4 +1,6 @@
 = connect to Apache Kafka?
+:page-layout: howdoi
+:page-menu_entry: How do I?
 
 You need to add `--packages org.apache.spark:spark-sql-kafka-0-10_2.11:2.1.0`
 when running `spark-shell`, `spark-submit` or to `SPARK_OPTIONS` for S2I. For

diff --git a/_howdoi/how-to-use-spark-configs.adoc b/_howdoi/how-to-use-spark-configs.adoc
@@ -1,4 +1,6 @@
 = use custom Spark configuration files with my cluster?
+:page-layout: howdoi
+:page-menu_entry: How do I?
 
 Create custom versions of standard Spark configuration files such as `spark-defaults.conf`
 or `spark-env.sh` and put them together in a subdirectory, then create a configmap

diff --git a/_howdoi/use-python-packages.adoc b/_howdoi/use-python-packages.adoc
@@ -1,8 +1,10 @@
 = install Python packages in Jupyter notebooks on OpenShift
+:page-layout: howdoi
+:page-menu_entry: How do I?
 :source-highlighter: coderay
 :coderay-css: style
 
-Sometimes you want to install a new package that isn't in your notebook image, usually while you're prototyping new techniques and aren't sure if a new package will be useful.  Here's how to install a new package from within the Jupyter notebook itself.  Make sure you're able to launch a Jupyter notebook on OpenShift:  follow the quickstart instructions on the link:/get-started[Get Started] page and then follow the instructions in the link:/how-do-i[How Do I? recipe] for launching a Jupyter notebook.
+Sometimes you want to install a new package that isn't in your notebook image, usually while you're prototyping new techniques and aren't sure if a new package will be useful.  Here's how to install a new package from within the Jupyter notebook itself.  Make sure you're able to launch a Jupyter notebook on OpenShift:  follow the quickstart instructions on the link:/get-started[Get Started] page and then follow the instructions in the link:/howdoi/how-do-i-launch-a-jupyter-notebook[How Do I? recipe] for launching a Jupyter notebook.
 
 For this example, we'll install `scikit-learn`.  We'll start by pasting the following code in to a notebook cell and then executing it by pressing Shift-Enter: 
 
@@ -41,4 +43,4 @@ oc new-app --template radanalytics-jupyter-notebook \
   -p NAME=scikit-learn-notebook \
   -p JUPYTER_NOTEBOOK_PASSWORD=secret \
   -p JUPYTER_NOTEBOOK_X_INCLUDE=https://radanalytics.io/assets/scikit-learn-notebook/scikit-learn.ipynb
-----
+----
diff --git a/_layouts/howdoi.html b/_layouts/howdoi.html
@@ -0,0 +1,17 @@
+---
+layout: default
+---
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-lg-10 col-lg-offset-1">
+      <h1>How do I {{ page.title }}</h1>
+    </div>
+  </div>
+  <div class="row margin-top-1">
+    <div class="col-lg-10 col-lg-offset-1">
+      {{ content }}
+    </div>
+  </div>
+</div>
+
diff --git a/_templates/how-do-i.adoc b/_templates/how-do-i.adoc
@@ -1,6 +1,11 @@
 = This is the title, it should not include "how do i"
+:page-layout: howdoi
+:page-menu_entry: How do I?
 
 Your instructions should go here. This is an AsciiDoc document and as such
 you may use the available markup syntax. If you need to add graphics or
 other assets, please add them to the `assets/how-do-i` directory.
 
+The `page-layout` and `page-menu_entry` header options are present to inform
+the static site generator about the template and menu options used for this
+entry. They should not need to be modified.
diff --git a/css/radanalytics.css b/css/radanalytics.css
@@ -93,3 +93,12 @@ div.flex-center {
     display: flex;
     align-items: center;
 }
+
+a.howdoi-link {
+    color: rgb(54, 54, 54);
+    text-decoration: none;
+}
+
+div.margin-top-1 {
+    margin-top: 1em;
+}
diff --git a/how-do-i.html b/how-do-i.html
@@ -12,33 +12,26 @@ <h1>How do I ...</h1>
   </div>
 
   <div class="col-lg-10 col-lg-offset-1">
-    <div class="list-group list-view-pf list-view-pf-view">
+    <div class="list-group list-view-pf">
 
-      {% for doc in site.howdoi %}
+      {% assign sorted_howdoi = site.howdoi | sort: 'title' %}
+      {% for doc in sorted_howdoi %}
+      <a class="howdoi-link" href="{{ doc.url }}">
       <div class="list-group-item">
-        <div class="list-group-item-header flex-center">
-          <div class="list-view-pf-expand">
-            <span class="fa fa-angle-right"></span>
+        <div class="list-view-pf-main-info">
+          <div class="list-view-pf-left">
+            <span class="pficon-info list-view-pf-icon-sm"></span>
           </div>
-          <div class="list-view-pf-main-info">
-            <div class="list-view-pf-body">
-              <div class="list-view-pf-description">
-                <div class="list-group-item-heading">
-                  <h2>{{ doc.title }}</h2>
-                </div>
+          <div class="list-view-pf-body">
+            <div class="list-view-pf-description">
+              <div class="list-group-item-heading">
+                <h4>{{ doc.title }}</h4>
               </div>
             </div>
           </div>
         </div>
-        <div class="list-group-item-container container-fluid hidden">
-          <div class="close">
-            <span class="pficon pficon-close"></span>
-          </div>
-          <div>
-            {{ doc.content }}
-          </div>
-        </div>
       </div>
+      </a>
       {% endfor %}
 
     </div>