Code snippets now contain a button copying the contents (#474)

johanandren · web-flow · commit 30197a078b51 · 2021-02-19T10:53:31.000+01:00
Code snippets now contain one button for showing snippet sources and one for copying the contents

This aligns the snippets with other doc tools that has a copy button up top right.
diff --git a/core/src/main/scala/com/lightbend/paradox/markdown/StyledVerbatim.scala b/core/src/main/scala/com/lightbend/paradox/markdown/StyledVerbatim.scala
@@ -47,9 +47,11 @@ abstract class StyledVerbatimSerializer extends VerbatimSerializer {
 
     node match {
       case vgn: VerbatimGroupNode =>
+        printer.print("""<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button>""")
         vgn.getSourceUrl.ifPresent(new Consumer[String] {
-          override def accept(sourceUrl: String): Unit =
-            printer.print(s"""<a class="icon go-to-source" href="$sourceUrl" target="_blank" title="Go to snippet source"></a>""")
+          override def accept(sourceUrl: String): Unit = {
+            printer.print(s"""<a class="snippet-button go-to-source" href="$sourceUrl" target="_blank" title="Go to snippet source">source</a>""")
+          }
         })
       case _ =>
     }
diff --git a/plugin/src/sbt-test/paradox/default-theme/expected/index.html b/plugin/src/sbt-test/paradox/default-theme/expected/index.html
@@ -12,6 +12,7 @@
 <script type="text/javascript" src="js/page.js"></script>
 <script type="text/javascript" src="js/warnOldVersion.js"></script>
 <script type="text/javascript" src="js/groups.js"></script>
+<script type="text/javascript" src="js/snippets.js"></script>
 <link rel="stylesheet" type="text/css" href="lib/foundation/dist/foundation.min.css"/>
 <link rel="stylesheet" type="text/css" href="css/page.css"/>
 
diff --git a/plugin/src/sbt-test/paradox/default-theme/expected/sub/indexed.html b/plugin/src/sbt-test/paradox/default-theme/expected/sub/indexed.html
@@ -12,6 +12,7 @@
 <script type="text/javascript" src="../js/page.js"></script>
 <script type="text/javascript" src="../js/warnOldVersion.js"></script>
 <script type="text/javascript" src="../js/groups.js"></script>
+<script type="text/javascript" src="../js/snippets.js"></script>
 <link rel="stylesheet" type="text/css" href="../lib/foundation/dist/foundation.min.css"/>
 <link rel="stylesheet" type="text/css" href="../css/page.css"/>
 
diff --git a/plugin/src/sbt-test/paradox/default-theme/expected/sub/unindexed.html b/plugin/src/sbt-test/paradox/default-theme/expected/sub/unindexed.html
@@ -12,6 +12,7 @@
 <script type="text/javascript" src="../js/page.js"></script>
 <script type="text/javascript" src="../js/warnOldVersion.js"></script>
 <script type="text/javascript" src="../js/groups.js"></script>
+<script type="text/javascript" src="../js/snippets.js"></script>
 <link rel="stylesheet" type="text/css" href="../lib/foundation/dist/foundation.min.css"/>
 <link rel="stylesheet" type="text/css" href="../css/page.css"/>
 
diff --git a/plugin/src/sbt-test/paradox/snippet-absolute/docs/expected/absolute.html b/plugin/src/sbt-test/paradox/snippet-absolute/docs/expected/absolute.html
@@ -1 +1 @@
-<pre class="prettyprint"><code class="language-scala">val snippet = 0</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val snippet = 0</code></pre>
diff --git a/plugin/src/sbt-test/paradox/snippet-noindent-writer/expected/index.html b/plugin/src/sbt-test/paradox/snippet-noindent-writer/expected/index.html
@@ -1,6 +1,6 @@
 <div>
 <div>
-<pre class="prettyprint"><code class="language-scala">object Hello extends App {
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">object Hello extends App {
   def say(str: String): Unit = {
     println(str)
   }
@@ -10,7 +10,7 @@
 </div>
 </div>
 
-<pre class="prettyprint"><code class="language-scala">object Hello extends App {
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">object Hello extends App {
   def say(str: String): Unit = {
     println(str)
   }
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/configured-bases.html b/plugin/src/sbt-test/paradox/snippets/expected/configured-bases.html
@@ -1,4 +1,4 @@
-<pre class="prettyprint"><code class="language-scala">val foo = 42</code></pre>
-<pre class="prettyprint"><code class="language-scala">val foo = 42</code></pre>
-<pre class="prettyprint"><code class="language-scala">val foo = 42</code></pre>
-<pre class="prettyprint"><code class="language-scala">val foo = 42</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val foo = 42</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val foo = 42</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val foo = 42</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val foo = 42</code></pre>
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/group.html b/plugin/src/sbt-test/paradox/snippets/expected/group.html
@@ -1,2 +1,2 @@
-<pre class="prettyprint group-a"><code class="language-scala">private class SomethingElse</code></pre>
-<pre class="prettyprint group-b"><code class="language-scala">import scala.util.Try</code></pre>
+<pre class="prettyprint group-a"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">private class SomethingElse</code></pre>
+<pre class="prettyprint group-b"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">import scala.util.Try</code></pre>
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/multiple.html b/plugin/src/sbt-test/paradox/snippets/expected/multiple.html
@@ -1,10 +1,10 @@
-<pre class="prettyprint"><code class="language-scala">import scala.concurrent.duration._
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">import scala.concurrent.duration._
 
 case class Measurement(method: Method, duration: Duration)</code></pre>
-<pre class="prettyprint"><code class="language-scala">import scala.util.Try
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">import scala.util.Try
 
 def parseInt(s: String): Option[Int] = Try(s.toInt).toOption</code></pre>
-<pre class="prettyprint"><code class="language-conf"># HTTP Configuration
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-conf"># HTTP Configuration
 http {
   port=80
   host=0.0.0.0
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/nocode.html b/plugin/src/sbt-test/paradox/snippets/expected/nocode.html
@@ -1,4 +1,4 @@
-<pre class="prettyprint"><code class="nocode">certpath: -Using checker7 ... [sun.security.provider.certpath.RevocationChecker]
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="nocode">certpath: -Using checker7 ... [sun.security.provider.certpath.RevocationChecker]
 certpath: connecting to OCSP service at: http://gtssl2-ocsp.geotrust.com
 certpath: OCSP response status: SUCCESSFUL
 certpath: OCSP response type: basic
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/reference.html b/plugin/src/sbt-test/paradox/snippets/expected/reference.html
@@ -1,10 +1,10 @@
-<pre class="prettyprint"><code class="language-conf"># This should be included
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-conf"># This should be included
 #and this as well
 
 snippets {
   # this snip is a snap
   snip = &quot;snap&quot;
 }</code></pre>
 <!-- -->
-<pre class="prettyprint"><code class="language-conf"># this snip is a snap
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-conf"># this snip is a snap
 snip = &quot;snap&quot;</code></pre>
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/snippets.html b/plugin/src/sbt-test/paradox/snippets/expected/snippets.html
@@ -1,8 +1,8 @@
-<pre class="prettyprint"><code class="language-scala">def indented = {
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">def indented = {
   1 + 2
 }</code></pre>
-<pre class="prettyprint"><code class="language-conf">snippets {
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-conf">snippets {
   test = 1
 }</code></pre>
-<pre class="prettyprint"><code class="language-scala">val symbols = Seq(&#39;symbols, Symbol(&quot;@&quot;), &#39;EOL)</code></pre>
-<pre class="prettyprint"><code class="language-scala">val spacy = &quot;Please do not remove ending spaces after these markers&quot;</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val symbols = Seq(&#39;symbols, Symbol(&quot;@&quot;), &#39;EOL)</code></pre>
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val spacy = &quot;Please do not remove ending spaces after these markers&quot;</code></pre>
diff --git a/plugin/src/sbt-test/paradox/snippets/expected/some-xml.html b/plugin/src/sbt-test/paradox/snippets/expected/some-xml.html
@@ -1,3 +1,3 @@
-<pre class="prettyprint"><code class="language-xml">&lt;bar&gt;
+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-xml">&lt;bar&gt;
     XML FTW
 &lt;/bar&gt;</code></pre>
diff --git a/tests/src/test/scala/com/lightbend/paradox/markdown/IncludeDirectiveSpec.scala b/tests/src/test/scala/com/lightbend/paradox/markdown/IncludeDirectiveSpec.scala
@@ -53,7 +53,7 @@ class IncludeDirectiveSpec extends MarkdownBaseSpec {
   it should "include nested code snippets" in {
     markdown("""@@include(tests/src/test/resources/include-code-snip.md)""") shouldEqual html("""
       |<pre class="prettyprint">
-      |<code class="language-conf">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-conf">
       |a = b</code>
       |</pre>""")
   }
diff --git a/tests/src/test/scala/com/lightbend/paradox/markdown/SnipDirectiveSpec.scala b/tests/src/test/scala/com/lightbend/paradox/markdown/SnipDirectiveSpec.scala
@@ -31,7 +31,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
   "The `snip` directive" should "render code snippets" in {
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example }""") shouldEqual html("""
       |<pre class="prettyprint">
-      |<code class="language-scala">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
       |object example extends App {
       |  println("Hello, World!")
       |}</code>
@@ -50,7 +50,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
       |<dt>Scala</dt>
       |<dd>
       |<pre class="prettyprint">
-      |<code class="language-scala">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
       |object example extends App {
       |  println("Hello, World!")
       |}</code>
@@ -59,7 +59,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
       |<dt>Java</dt>
       |<dd>
       |<pre class="prettyprint">
-      |<code class="language-java">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-java">
       |public class example2 {
       |    public static void main(String[] args) {
       |        System.out.println("Hello, World");
@@ -75,7 +75,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
       |@@snip[example2.java](tests/src/test/scala/com/lightbend/paradox/markdown/example2.java){ #example2 .red .blue }
       |""") shouldEqual html("""
       |<pre class="prettyprint red blue">
-      |<code class="language-java">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-java">
       |public class example2 {
       |    public static void main(String[] args) {
       |        System.out.println("Hello, World");
@@ -87,7 +87,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
   it should "trim indentation from snippets" in {
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #indented-example }""") shouldEqual html("""
       |<pre class="prettyprint">
-      |<code class="language-scala">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
       |case object Dent
       |  case object DoubleDent</code>
       |</pre>""")
@@ -96,7 +96,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
   it should "not truncate snippets" in {
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #multi-indented-example }""") shouldEqual html("""
       |<pre class="prettyprint">
-      |<code class="language-scala">
+      |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
       |object AnotherIndentedExample {
       |  def rendered(): Unit = {
       |  }
@@ -106,15 +106,15 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
       |</pre>""")
   }
 
-  it should "add link to source" in {
+  it should "add link to source and copy button" in {
     implicit val context = writerContextWithProperties(
       "github.base_url" -> "https://github.com/lightbend/paradox/tree/v0.2.1",
       "github.root.base_dir" -> new File(".").getAbsoluteFile.getParent,
       "snip.github_link" -> "true")
 
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example }""") shouldEqual html(
       """<pre class="prettyprint">
-        |<a class="icon go-to-source" href="https://github.com/lightbend/paradox/tree/v0.2.1/tests/src/test/scala/com/lightbend/paradox/markdown/example.scala#L28-L30" target="_blank" title="Go to snippet source"></a><code class="language-scala">
+        |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><a class="snippet-button go-to-source" href="https://github.com/lightbend/paradox/tree/v0.2.1/tests/src/test/scala/com/lightbend/paradox/markdown/example.scala#L28-L30" target="_blank" title="Go to snippet source">source</a><code class="language-scala">
         |object example extends App {
         |  println("Hello, World!")
         |}</code>
@@ -131,7 +131,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
 
     markdown("""@@snip[example.scala]($test$/example.scala) { #example }""") shouldEqual html(
       """<pre class="prettyprint">
-        |<a class="icon go-to-source" href="https://github.com/lightbend/paradox/tree/v0.2.1/tests/src/test/scala/com/lightbend/paradox/markdown/example.scala#L28-L30" target="_blank" title="Go to snippet source"></a><code class="language-scala">
+        |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><a class="snippet-button go-to-source" href="https://github.com/lightbend/paradox/tree/v0.2.1/tests/src/test/scala/com/lightbend/paradox/markdown/example.scala#L28-L30" target="_blank" title="Go to snippet source">source</a><code class="language-scala">
         |object example extends App {
         |  println("Hello, World!")
         |}</code>
@@ -147,7 +147,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
 
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example }""") shouldEqual html(
       """<pre class="prettyprint">
-        |<code class="language-scala">
+        |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
         |object example extends App {
         |  println("Hello, World!")
         |}</code>
@@ -157,7 +157,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
   it should "include labels when including the whole file" in {
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala)""") shouldEqual html(
       """<pre class="prettyprint">
-        |<code class="language-scala">
+        |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
         |/*
         | * Copyright &copy; 2015 - 2019 Lightbend, Inc. &lt;http://www.lightbend.com&gt;
         | *
@@ -247,7 +247,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
   it should "filter labels by default" in {
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example-with-label }""") shouldEqual html(
       """<pre class="prettyprint">
-        |<code class="language-scala">
+        |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
         |object Constants {
         |}</code>
         |</pre>"""
@@ -257,7 +257,7 @@ class SnipDirectiveSpec extends MarkdownBaseSpec {
   it should "allow including labels if specified" in {
     markdown("""@@snip[example.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example-with-label filterLabels=false }""") shouldEqual html(
       """<pre class="prettyprint">
-        |<code class="language-scala">
+        |<button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">
         |object Constants {
         |  val someString = " #foo "
         |}</code>
diff --git a/themes/generic/src/main/assets/css/page.css b/themes/generic/src/main/assets/css/page.css
@@ -149,15 +149,29 @@ a.anchor .anchor-link:before {
   content: "§";
 }
 
-a.go-to-source::before {
-  content: "📄";
+.site-content .page-content .prettyprint .snippet-button {
+  float: right;
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: bold;
+  font-family: "Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+  speak: none;
+  color: #4078c0;
+  border: 2px solid #e5e6e4;
+  padding: 4px 4px;
+  margin-left: 8px;
+  line-height: 1.2;
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.prettyprint .icon {
-  float: right;
+.site-content .page-content .prettyprint .snippet-button:hover {
+  background-color: #e5e6e4;
+  border: 2px solid #4078c0;
 }
 
-a.anchor .anchor-link, .icon {
+a.anchor .anchor-link {
   font-size: 18px;
   font-family: "icons" !important;
   font-style: normal !important;
diff --git a/themes/generic/src/main/assets/js/snippets.js b/themes/generic/src/main/assets/js/snippets.js
@@ -0,0 +1,6 @@
+$(function() {
+  $(".snippet-button.copy-snippet").click(function() {
+    var code = $(this).parent().find("code").text()
+    navigator.clipboard.writeText(code)
+  })
+})
diff --git a/themes/generic/src/main/assets/page.st b/themes/generic/src/main/assets/page.st
@@ -14,6 +14,7 @@ $endif$
 <script type="text/javascript" src="$page.base$js/page.js"></script>
 <script type="text/javascript" src="$page.base$js/warnOldVersion.js"></script>
 <script type="text/javascript" src="$page.base$js/groups.js"></script>
+<script type="text/javascript" src="$page.base$js/snippets.js"></script>
 <link rel="stylesheet" type="text/css" href="$page.base$lib/foundation/dist/foundation.min.css"/>
 <link rel="stylesheet" type="text/css" href="$page.base$css/page.css"/>
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<pre class="prettyprint"><code class="language-scala">val snippet = 0</code></pre>`
	`1`	`+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="language-scala">val snippet = 0</code></pre>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<pre class="prettyprint"><code class="nocode">certpath: -Using checker7 ... [sun.security.provider.certpath.RevocationChecker]`
	`1`	`+<pre class="prettyprint"><button class="snippet-button copy-snippet" title="Copy snippet to clipboard">copy</button><code class="nocode">certpath: -Using checker7 ... [sun.security.provider.certpath.RevocationChecker]`
`2`	`2`	`certpath: connecting to OCSP service at: http://gtssl2-ocsp.geotrust.com`
`3`	`3`	`certpath: OCSP response status: SUCCESSFUL`
`4`	`4`	`certpath: OCSP response type: basic`