Merge pull request #28 from rakeshAlgo/view-source-url-style

View source url style

Author: amarantha-k

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$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,46 +1,88 @@
-.copy-code-button {
+.view-source-button {
+  color: var(--color-brand-gray4);
+  font-family: "Source Code Pro", sans-serif;
+  background: url(../img/awesome-github.svg) no-repeat center center;
+  background-size: cover;
+  display: inline-block;
+  width: 16px;
+  height: 15.5px;
+  font-size: 0;
+  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 {
+  width: 0;
+  height: 0;
+  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;
+}
+
+.copy-code-button {
   background: url(../img/copy.png) no-repeat center right/contain;
-  width: 24px;
-  height: 14px;
-  right: 1rem;
-  top: 12px;
-  display: none;
+  width: 13px;
+  height: 16px;
   cursor: pointer;
   font-family: "Source Sans Pro", sans-serif;
   color: var(--color-brand-gray4);
-  z-index: 1;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 a.copy-code-button:focus,
 a.copy-code-button:hover {
   color: var(--color-brand-gray4);
 }
 
-.doc .listingblock:hover .copy-code-button {
-  display: block;
-}
-
 .copy-code-button:hover::after {
   content: attr(data-title);
   color: var("--color-brand-gray4");
-  font-size: 14px;
+  font-size: var(--font-base);
   font-weight: var(--weight-light);
   line-height: 1;
   text-transform: capitalize;
   position: absolute;
   bottom: -53px;
-  right: -100%;
-  left: -100%;
-  margin: auto;
+  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; */
+  min-width: 80px;
   font-family: "Source Sans Pro", sans-serif;
 }
 
@@ -54,5 +96,62 @@ a.copy-code-button:hover {
   content: "";
   box-shadow: inset 0 0 1px #bec0c1;
   bottom: -27px;
+  right: auto;
+  left: auto;
+}
+
+.doc .listingblock code[data-lang] + .source-type-box {
+  position: absolute;
+  top: 0;
   right: 0;
+  display: none;
+  align-items: center;
+  z-index: 1;
+  padding-top: 12px;
+}
+
+.doc .listingblock code[data-lang] + .source-type-box .data-source {
+  content: attr(data-lang);
+  color: var("--color-brand-gray1");
+  font-size: 0.75rem;
+  font-weight: var(--weight-normal);
+  letter-spacing: 1px;
+  line-height: 18px;
+  text-transform: uppercase;
+  font-family: "Source Code Pro", sans-serif;
+  padding-right: 0.5rem;
+  border-right: 1px solid var(--color-brand-gray9);
+}
+
+/* .doc .listingblock:hover code[data-lang] + .source-type-box .data-source {
+  display: block;
+} */
+
+.doc .listingblock:hover code[data-lang] + .source-type-box {
+  display: flex;
+}
+
+.doc .listingblock pre .fade-shadow {
+  content: "";
+  display: inline-block;
+  background:
+    transparent
+    linear-gradient(
+      180deg,
+      #f1f7fe0d 0%,
+      #f1f7fe40 18%,
+      #f1f7fe 68%,
+      #f1f7fe 100%
+    )
+    0% 0% no-repeat padding-box;
+  width: 65px;
+  height: 80%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+code.language-console.hljs.shell {
+  white-space: nowrap;
+  overflow-x: auto;
 }

src/css/doc.css

@@ -574,52 +574,6 @@
 
 */
 
-.doc .listingblock code[data-lang] + .data-source {
-  content: attr(data-lang);
-  color: var("--color-brand-gray1");
-  display: none;
-  font-size: 0.75rem;
-  font-weight: var(--weight-normal);
-  letter-spacing: 1px;
-  line-height: 18px;
-  text-transform: uppercase;
-  position: absolute;
-  top: 12px;
-  right: 2.4rem;
-  font-family: "Source Sans Pro", sans-serif;
-  padding-right: 0.5rem;
-  border-right: 1px solid var(--color-brand-gray9);
-  z-index: 1;
-}
-
-.doc .listingblock:hover code[data-lang] + .data-source {
-  display: block;
-}
-
-.doc .listingblock pre .fade-shadow {
-  display: inline-block;
-  background:
-    transparent
-    linear-gradient(
-      180deg,
-      #f1f7fe0d 0%,
-      #f1f7fe40 18%,
-      #f1f7fe 68%,
-      #f1f7fe 100%
-    )
-    0% 0% no-repeat padding-box;
-  width: 65px;
-  height: 80%;
-  position: absolute;
-  right: 2px;
-  top: 0;
-}
-
-code.language-console.hljs.shell {
-  white-space: nowrap;
-  overflow-x: auto;
-}
-
 table.tableblock code.language-console.hljs.shell {
   white-space: normal;
 }

src/img/awesome-github.svg

@@ -1,10 +1,23 @@
 ;(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 On Github'
+      viewSourceLink.appendChild(document.createTextNode('View'))
+    }
+    // console.log(codeBlock)
+    var sourceTypeBox = document.createElement('div')
+    sourceTypeBox.className = 'source-type-box'
+    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 +26,31 @@
     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)
+    pre.appendChild(sourceTypeBox)
+    sourceTypeBox.appendChild(dataSource)
+    if (viewSourceLink) sourceTypeBox.appendChild(viewSourceLink)
+    sourceTypeBox.appendChild(copyButton)
     pre.appendChild(fadeShadow)
   })
 })()