add view original source link to source block

Author: mojavelinux

gulp.d/tasks/build-preview-pages.js

@@ -106,7 +106,15 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
                 pageModel.attributes = Object.entries({ ...attributes, ...componentVersion.asciidoc.attributes })
                   .filter(([name, val]) => name.startsWith('page-'))
                   .reduce((accum, [name, val]) => ({ ...accum, [name.substr(5)]: val }), {})
-                pageModel.contents = Buffer.from(doc.convert())
+                pageModel.contents = Buffer.from(
+                  doc
+                    .convert()
+                    // NOTE emulates the behavior of the view source url extension
+                    .replace(
+                      /<pre([^>]+)><code([^>]+)>\[data-source-url=(.+?)\]\n/g,
+                      '<pre$1><code$2 data-source-url="$3">'
+                    )
+                )
               }
               file.extname = '.html'
               try {

preview-src/index.adoc

@@ -275,14 +275,17 @@ The *Server Resources* statistics section displays the resource information on t
 .A query using the fluent API (lines are forced to wrap)
 [source,java]
 ----
-Observable<AsyncN1qlQueryResult> theAirline = bucket.async() // <1>
-    .query(
-        N1qlQuery.simple(select("name").from("travel_sample").as("Airline").where(x("id").eq(5209)))
-    );
-return thisAirline; // <2>
+[data-source-url=https://github.com/couchbase/docs-sdk-java/blob/20c44c9e7ca86ea475b7aa33c58d5670aa7c4495/modules/ROOT/pages/n1ql-queries-with-sdk.adoc#L53-L58]
+Statement statement = select("fname", "lname", "age").from(i("default")).where(x("age").gt(x("$age"))); // <1>
+JsonObject placeholderValues = JsonObject.create().put("age", 22);
+q = N1qlQuery.parameterized(statement, placeholderValues); // <2>
+for (N1qlQueryRow row : bkt.query(q)) { // <3>
+    System.out.println(row);
+}
 ----
-<1> Sets up an async query.
-<2> Returns the result of the query.
+<1> Defines the query.
+<2> Inserts placeholder values into the query.
+<3> Runs the query.
 
 [#vbucket-stats]
 == Monitoring `vBucket` Resources

src/css/clipboard.css

@@ -1,9 +1,23 @@
+.view-source-button {
+  position: absolute;
+  right: 1rem;
+  top: 12px;
+  display: none;
+  color: var(--color-brand-gray4);
+  font-family: "Source Sans Pro", sans-serif;
+  z-index: 1;
+}
+
+.doc .listingblock:hover .view-source-button {
+  display: block;
+}
+
 .copy-code-button {
   position: absolute;
   background: url(../img/copy.png) no-repeat center right/contain;
   width: 24px;
   height: 14px;
-  right: 1rem;
+  right: 3.2rem;
   top: 12px;
   display: none;
   cursor: pointer;

src/css/doc.css

@@ -586,7 +586,7 @@
   text-transform: uppercase;
   position: absolute;
   top: 12px;
-  right: 2.4rem;
+  right: 4.5rem;
   font-family: "Source Sans Pro", sans-serif;
   padding-right: 0.5rem;
   border-right: 1px solid var(--color-brand-gray9);

src/js/07-copy-to-clipboard.js

@@ -1,10 +1,21 @@
 ;(function () {
   'use strict'
   document.querySelectorAll('pre > code').forEach(function (codeBlock) {
-    var button = document.createElement('a')
-    button.className = 'copy-code-button'
-    //button.type = 'button'
-    button.dataset.title = 'Copy'
+    var viewSourceLink
+    var sourceUrl = codeBlock.dataset.sourceUrl
+    if (sourceUrl) {
+      viewSourceLink = document.createElement('a')
+      viewSourceLink.href = codeBlock.dataset.sourceUrl
+      viewSourceLink.className = 'view-source-button'
+      viewSourceLink.target = '_blank'
+      viewSourceLink.dataset.title = 'View Source'
+      viewSourceLink.appendChild(document.createTextNode('View'))
+    }
+
+    var copyButton = document.createElement('a')
+    copyButton.className = 'copy-code-button'
+    //copyButton.type = 'button'
+    copyButton.dataset.title = 'Copy'
 
     var dataSource = document.createElement('span')
     dataSource.className = 'data-source'
@@ -13,29 +24,30 @@
     var fadeShadow = document.createElement('span')
     fadeShadow.className = 'fade-shadow'
 
-    button.addEventListener('click', function (e) {
+    copyButton.addEventListener('click', function (e) {
       if (e.target && e.target.matches('a.copy-code-button')) {
         navigator.clipboard.writeText(codeBlock.innerText).then(
           function () {
             /* Chrome doesn't seem to blur automatically,
                 leaving the button in a focused state. */
-            button.blur()
+            copyButton.blur()
 
-            button.dataset.title = 'Copied ✓'
+            copyButton.dataset.title = 'Copied ✓'
 
             setTimeout(function () {
-              button.dataset.title = 'Copy'
+              copyButton.dataset.title = 'Copy'
             }, 2000)
           },
           function () {
-            button.dataset.title = 'Error'
+            copyButton.dataset.title = 'Error'
           }
         )
       }
     })
     var pre = codeBlock.parentNode
     pre.appendChild(dataSource)
-    pre.appendChild(button)
+    if (viewSourceLink) pre.appendChild(viewSourceLink)
+    pre.appendChild(copyButton)
     pre.appendChild(fadeShadow)
   })
 })()