implement the Run Code interaction for designated source code blocks

preview-src/index.adoc

@@ -39,6 +39,55 @@ As the selected interval increases, the amount of statistical data displayed wil
 Click the image:git-branch.svg[,16,role=icon] icon at the bottom of the editor to select a branch.
 Then click the image:arrow-small-down.svg[,16,role=icon]image:arrow-small-up.svg[,16,role=icon] icons to open the pull/push dialog.
 
+== Try It Now
+
+This section demonstrates the interactive, try it now feature of the docs.
+
+[source.try-it,ruby]
+----
+require 'couchbase'
+
+options = Couchbase::Cluster::ClusterOptions.new
+options.authenticate('username', 'password')
+cluster = Couchbase::Cluster.connect('couchbase://127.0.0.1', options)
+
+bucket = cluster.bucket('travel-sample')
+collection = bucket.default_collection
+
+begin
+  get_result = collection.get('airline_10')
+  puts get_result.content
+rescue Couchbase::Error::DocumentNotFound
+  puts 'Document not found!'
+end
+----
+
+[source.try-it,java]
+----
+import com.couchbase.client.core.error.DocumentNotFoundException;
+import com.couchbase.client.java.*;
+import com.couchbase.client.java.kv.*;
+
+public class StartUsing {
+  public static void main(String[] args) {
+    var cluster = Cluster.connect(
+      "couchbase://127.0.0.1", "username", "password"
+    );
+
+    var bucket = cluster.bucket("travel-sample");
+    var collection = bucket.defaultCollection();
+
+    try {
+      var result = collection.get("airline_10");
+      System.out.println(result.toString());
+
+    } catch (DocumentNotFoundException ex) {
+      System.out.println("Document not found!");
+    }
+  }
+}
+----
+
 == Individual Bucket Monitoring
 
 Bucket monitoring within the Couchbase Web Console has been updated to show additional detailed information.

src/css/clipboard.css

@@ -1,50 +1,14 @@
-.view-source-button {
+.view-source-button,
+.copy-code-button {
   color: var(--color-brand-gray4);
   display: inline-block;
-  margin-left: 0.5rem;
-}
-
-.view-source-button:hover::after {
-  content: attr(data-title);
-  color: var(--color-brand-gray4);
-  font-size: var(--font-base);
-  font-weight: var(--weight-light);
-  line-height: 1;
-  text-transform: capitalize;
-  position: absolute;
-  bottom: -53px;
-  right: -30%;
-  left: auto;
-  margin: 0;
-  padding: 5px;
-  text-align: center;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
-  background: var(--color-brand-white);
-  border: 1px solid var(--color-brand-gray7);
-  box-sizing: border-box;
-  border-radius: 3px;
-  min-width: 90px;
-  font-family: "Source Sans Pro", sans-serif;
-}
-
-.view-source-button:hover::before {
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-  border-bottom: 10px solid var(--color-brand-white);
-  position: absolute;
-  content: "";
-  box-shadow: inset 0 0 1px #bec0c1;
-  bottom: -27px;
-  right: auto;
-  left: auto;
+  position: relative;
+  cursor: pointer;
 }
 
-.copy-code-button {
-  color: var(--color-brand-gray4);
-  cursor: pointer;
-  display: inline-block;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+.view-source-button:hover,
+.copy-code-button:hover {
+  text-decoration: none;
 }
 
 a.view-source-button:focus,
@@ -54,39 +18,37 @@ a.copy-code-button:hover {
   color: var(--color-brand-gray4);
 }
 
+.view-source-button:hover::after,
 .copy-code-button:hover::after {
+  content: "";
+  border: 7px solid transparent;
+  border-bottom: 10px solid var(--color-brand-white);
+  position: absolute;
+  box-shadow: inset 0 0 1px #bec0c1;
+  top: 7px;
+  left: 50%;
+  margin-left: -7px;
+  pointer-events: none;
+}
+
+.view-source-button:hover::before,
+.copy-code-button:hover::before {
   content: attr(data-title);
-  color: var("--color-brand-gray4");
+  color: var(--color-brand-gray4);
   font-size: var(--font-base);
   font-weight: var(--weight-light);
-  line-height: 1;
-  text-transform: capitalize;
   position: absolute;
-  bottom: -53px;
-  right: -30%;
-  left: auto;
-  margin: 0;
-  padding: 5px;
+  top: 14px;
+  left: 50%;
+  transform: translateY(100%) translateX(-50%);
+  padding: 3px 1em;
   text-align: center;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
   background: var(--color-brand-white);
   border: 1px solid var(--color-brand-gray7);
-  box-sizing: border-box;
   border-radius: 3px;
-  min-width: 80px;
   font-family: "Source Sans Pro", sans-serif;
-}
-
-.copy-code-button:hover::before {
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-  border-bottom: 10px solid var(--color-brand-white);
-  position: absolute;
-  content: "";
-  box-shadow: inset 0 0 1px #bec0c1;
-  bottom: -27px;
-  right: auto;
-  left: auto;
+  pointer-events: none;
 }
 
 .doc .listingblock code[data-lang] + .source-type-box {
@@ -101,7 +63,7 @@ a.copy-code-button:hover {
 
 .doc .listingblock code[data-lang] + .source-type-box .data-source {
   content: attr(data-lang);
-  color: var("--color-brand-gray1");
+  color: var(--color-brand-gray1);
   font-size: 0.75rem;
   font-weight: var(--weight-normal);
   letter-spacing: 1px;
@@ -120,6 +82,10 @@ a.copy-code-button:hover {
   display: flex;
 }
 
+.doc .listingblock code[contenteditable] {
+  outline: none;
+}
+
 .doc .listingblock pre .fade-shadow {
   display: none;
   background:
@@ -160,3 +126,56 @@ code::-webkit-scrollbar {
 code::-webkit-scrollbar-thumb {
   background-color: var(--color-border);
 }
+
+/* New style code block */
+.source-type-box {
+  padding-left: 12px;
+  border: 1px solid #e5e5e5;
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 20px;
+  color: #73768a;
+  font-family: 'Source Code Pro', monospace;
+  z-index: 1;
+  position: relative;
+}
+
+.source-type-box .right-block {
+  display: flex;
+}
+
+.source-type-box .right-block > * {
+  border-right: 1px solid #e5e5e5;
+  padding: 4px 10px;
+  display: flex;
+  align-items: center;
+}
+
+.source-type-box .right-block > *:last-child {
+  border: none;
+}
+
+.doc .listingblock .source-type-box .data-source {
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  font-weight: var(--weight-medium);
+}
+
+.copy-code-button .svg-inline--fa,
+.run-code .svg-inline--fa {
+  margin-right: 5px;
+}
+
+.run-code {
+  background: #0074e0;
+  color: #fff;
+  cursor: pointer;
+}
+
+.run-code:hover {
+  text-decoration: none;
+  color: #fff;
+}

src/css/doc.css

@@ -593,7 +593,7 @@ ul ul ul {
   overflow-x: auto;
   background: #0074e00e;
   border: 1px solid var(--color-brand-gray8);
-  border-radius: 3px;
+  border-radius: 0 0 3px 3px;
   position: relative;
 }
 

src/css/site.css

@@ -27,3 +27,4 @@
 @import "table.css";
 @import "landing-page.css";
 @import "contributor.css";
+@import "terminal.css";

src/css/terminal.css

@@ -0,0 +1,84 @@
+.action-panel {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 50%;
+  background-color: #f1f7fe;
+  flex-direction: column;
+}
+
+.action-panel .run-code-output {
+  border: 0;
+  flex-grow: 1;
+}
+
+.terminal-launched,
+.terminal-launched body {
+  overflow: hidden;
+}
+
+.terminal-launched .action-panel {
+  display: flex;
+}
+
+.terminal-launched .left-sidebar,
+.terminal-launched .toc.sidebar,
+.terminal-launched footer {
+  display: none;
+}
+
+.action-panel .controls {
+  display: flex;
+  background: #fff;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.action-panel .control-button,
+.action-panel .control-label {
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #73768a;
+}
+
+.action-panel .control-button {
+  border: 0;
+  background: transparent;
+}
+
+.action-panel .control-label {
+  flex-grow: 1;
+}
+
+.action-panel .controls > * + * {
+  border-left: 1px solid #e5e5e5;
+}
+
+.action-panel .close {
+  display: flex;
+  align-items: center;
+}
+
+.action-panel .close svg {
+  margin-right: 10px;
+}
+
+@media all and (min-width: 768px) {
+  .terminal-launched .body.container {
+    position: relative;
+  }
+
+  .terminal-launched main.article {
+    width: 50%;
+    position: absolute;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding-right: var(--width-main-gutter);
+    padding-left: var(--width-main-gutter);
+  }
+}

src/js/01-nav.js

@@ -102,7 +102,7 @@
         if (startCollapsed) componentVersionNavEl.classList.add('hide')
         var items = componentVersion.sets
         if (items.length === 1 && !items[0].content) items = items[0].items
-        if (items.length && items[0].content.endsWith(' Home')) {
+        if (items.length && items[0].content && items[0].content.endsWith(' Home')) {
           items.splice.apply(items, [0, 1].concat(items[0].items || []))
         }
         if (buildNavTree(items, componentVersionNavEl, page, [])) hasNavTrees = true