improved scalafiddle integration

lightbend · Aug 1, 2018 · c61e84a · c61e84a
1 parent 428a7da
commit c61e84a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 51 deletions.
diff --git a/core/src/main/scala/com/lightbend/paradox/markdown/Directive.scala b/core/src/main/scala/com/lightbend/paradox/markdown/Directive.scala
@@ -399,29 +399,26 @@ case class FiddleDirective(page: Page, variables: Map[String, String])
     try {
       val labels = node.attributes.values("identifier").asScala
 
-      val baseUrl = node.attributes.value("baseUrl", "https://embed.scalafiddle.io/embed")
-      val cssClass = node.attributes.value("cssClass", "fiddle")
-      val width = Option(node.attributes.value("width")).map("width=" + _).getOrElse("")
-      val height = Option(node.attributes.value("height")).map("height=" + _).getOrElse("")
-      val extraParams = node.attributes.value("extraParams", "theme=light")
-      val cssStyle = node.attributes.value("cssStyle", "overflow: hidden;")
+      val integrationScriptUrl =
+        node.attributes.value("integrationScriptUrl", "https://embed.scalafiddle.io/integration.js")
+
+      // integration params as listed here:
+      // https://github.com/scalafiddle/scalafiddle-core/tree/master/integrations#scalafiddle-integration
+      // 'selector' is excluded on purpose to not complicate logic and increase maintainability
+      val validParams = Seq("prefix", "dependency", "scalaversion", "template", "theme", "minheight", "layout")
+
+      val params = validParams.map(k => Option(node.attributes.value(k)).map(x => s"data-$k=$x").getOrElse("")).mkString(" ")
+
       val source = resolvedSource(node, page)
       val file = resolveFile("fiddle", source, page, variables)
-      val (text, _) = Snippet(file, labels)
-
-      val fiddleSource = java.net.URLEncoder.encode(
-        """import fiddle.Fiddle, Fiddle.println
-          |@scalajs.js.annotation.JSExport
-          |object ScalaFiddle {
-          |  // $FiddleStart
-          |""".stripMargin + text + """
-          |  // $FiddleEnd
-          |}
-          |""".stripMargin, "UTF-8")
-        .replace("+", "%20") // due to: https://stackoverflow.com/questions/4737841/urlencoder-not-able-to-translate-space-character
+      val (code, _) = Snippet(file, labels)
 
       printer.println.print(s"""
-        <iframe class="$cssClass" $width $height src="$baseUrl?$extraParams&source=$fiddleSource" frameborder="0" style="$cssStyle"></iframe>
+        <div data-scalafiddle $params>
+          <pre class="prettyprint"><code class="language-scala">$code</code></pre>
+          </pre>
+        </div>
+        <script defer src="$integrationScriptUrl"></script>
         """
       )
     } catch {

diff --git a/tests/src/test/scala/com/lightbend/paradox/markdown/FiddleDirectiveSpec.scala b/tests/src/test/scala/com/lightbend/paradox/markdown/FiddleDirectiveSpec.scala
@@ -16,43 +16,78 @@
 
 package com.lightbend.paradox.markdown
 
+import com.lightbend.paradox.tree.Tree.Location
+
 class FiddleDirectiveSpec extends MarkdownBaseSpec {
 
-  // #fiddle_code
-  val sourcePath = new java.io.File(".").getAbsolutePath + "/tests/src/test/scala/"
-  // #fiddle_code
-
-  "Fiddle directive" should "generate fiddle iframe" in {
-    markdownPages(
-      sourcePath + "com/lightbend/paradox/markdown/FiddleDirectiveSpec.scala" -> """
-    |@@fiddle [FiddleDirectiveSpec.scala](./FiddleDirectiveSpec.scala) { #fiddle_code extraParams=theme=light&layout=v75 cssStyle=width:100%; }
-    """).values.head shouldEqual html("""
-      |<iframe class="fiddle" src=
-"https://embed.scalafiddle.io/embed?theme=light&amp;layout=v75&amp;source=import%20fiddle.Fiddle%2C%20Fiddle.println%0A%40scalajs.js.annotation.JSExport%0Aobject%20ScalaFiddle%20%7B%0A%20%20%2F%2F%20%24FiddleStart%0Aval%20sourcePath%20%3D%20new%20java.io.File%28%22.%22%29.getAbsolutePath%20%2B%20%22%2Ftests%2Fsrc%2Ftest%2Fscala%2F%22%0A%20%20%2F%2F%20%24FiddleEnd%0A%7D%0A"
- frameborder="0" style="width:100%;"></iframe>
-    """.stripMargin)
+  "Fiddle directive" should "generate fiddle integration code" in {
+    markdown("""@@fiddle[FiddelDirectiveSpec.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example }""") shouldEqual html("""
+      |<div data-scalafiddle>
+      |<pre class="prettyprint">
+      |<code class="language-scala">
+      |object example extends App {
+      |  println("Hello, World!")
+      |}</code>
+      |</pre>
+      |</div>
+      |<script defer src="https://embed.scalafiddle.io/integration.js">
+      |</script>""")
   }
 
-  it should "properly add width and height" in {
-    markdownPages(
-      sourcePath + "com/lightbend/paradox/markdown/FiddleDirectiveSpec.scala" -> """
-      |@@fiddle [FiddleDirectiveSpec.scala](./FiddleDirectiveSpec.scala) { #fiddle_code width=100px height=100px extraParams=theme=light&layout=v75 cssStyle=width:100%; }
-      """).values.head shouldEqual html("""
-        |<iframe class="fiddle" width="100px" height="100px" src=
-"https://embed.scalafiddle.io/embed?theme=light&amp;layout=v75&amp;source=import%20fiddle.Fiddle%2C%20Fiddle.println%0A%40scalajs.js.annotation.JSExport%0Aobject%20ScalaFiddle%20%7B%0A%20%20%2F%2F%20%24FiddleStart%0Aval%20sourcePath%20%3D%20new%20java.io.File%28%22.%22%29.getAbsolutePath%20%2B%20%22%2Ftests%2Fsrc%2Ftest%2Fscala%2F%22%0A%20%20%2F%2F%20%24FiddleEnd%0A%7D%0A"
- frameborder="0" style="width:100%;"></iframe>
-      """.stripMargin)
+  it should "parse and apply optional parameters" in {
+    val params = Seq(
+      "prefix" -> "'import io.circe._,io.circe.generic.auto._,io.circe.parser._,io.circe.syntax._'",
+      "dependency" -> "'io.circe %%% circe-core % 0.8.0,io.circe %%% circe-generic % 0.8.0,io.circe %%% circe-parser % 0.8.0'",
+      "scalaversion" -> "2.11",
+      "template" -> "Circe",
+      "theme" -> "dark",
+      "minheight" -> "300",
+      "layout" -> "v75"
+    )
+
+    val markdownParams =
+      params.map {
+        case (k, v) => s"""$k="$v" """
+      }.mkString(" ")
+
+    val htmlParams =
+      params.map { case (k, v) => if (v.startsWith("'")) s"""data-$k=$v """ else s"""data-$k="$v" """ }.mkString(" ")
+
+    markdown(s"""@@fiddle[FiddelDirectiveSpec.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example $markdownParams}""") shouldEqual html(s"""
+      |<div data-scalafiddle $htmlParams>
+      |<pre class="prettyprint">
+      |<code class="language-scala">
+      |object example extends App {
+      |  println("Hello, World!")
+      |}</code>
+      |</pre>
+      |</div>
+      |<script defer src="https://embed.scalafiddle.io/integration.js">
+      |</script>""")
   }
 
-  it should "change base url" in {
-    markdownPages(
-      sourcePath + "com/lightbend/paradox/markdown/FiddleDirectiveSpec.scala" -> """
-      |@@fiddle [FiddleDirectiveSpec.scala](./FiddleDirectiveSpec.scala) { #fiddle_code baseUrl=http://shadowscalafiddle.io width=100px height=100px extraParams=theme=light&layout=v75 cssStyle=width:100%; }
-      """).values.head shouldEqual html("""
-        |<iframe class="fiddle" width="100px" height="100px" src=
-"http://shadowscalafiddle.io?theme=light&amp;layout=v75&amp;source=import%20fiddle.Fiddle%2C%20Fiddle.println%0A%40scalajs.js.annotation.JSExport%0Aobject%20ScalaFiddle%20%7B%0A%20%20%2F%2F%20%24FiddleStart%0Aval%20sourcePath%20%3D%20new%20java.io.File%28%22.%22%29.getAbsolutePath%20%2B%20%22%2Ftests%2Fsrc%2Ftest%2Fscala%2F%22%0A%20%20%2F%2F%20%24FiddleEnd%0A%7D%0A"
- frameborder="0" style="width:100%;"></iframe>
-      """.stripMargin)
+  it should "include multiple fiddles" in {
+    markdown("""@@fiddle[FiddelDirectiveSpec.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #example }
+      |@@fiddle[FiddelDirectiveSpec.scala](tests/src/test/scala/com/lightbend/paradox/markdown/example.scala) { #indented-example }""") shouldEqual html("""
+      |<div data-scalafiddle>
+      |<pre class="prettyprint">
+      |<code class="language-scala">
+      |object example extends App {
+      |  println("Hello, World!")
+      |}</code>
+      |</pre>
+      |</div>
+      |<script defer src="https://embed.scalafiddle.io/integration.js">
+      |</script>
+      |<div data-scalafiddle>
+      |<pre class="prettyprint">
+      |<code class="language-scala">
+      |case object Dent
+      |case object DoubleDent</code>
+      |</pre>
+      |</div>
+      |<script defer src="https://embed.scalafiddle.io/integration.js">
+      |</script>""")
   }
 
 }
diff --git a/version.sbt b/version.sbt
@@ -1 +1 @@
-version in ThisBuild := "0.3.6-SNAPSHOT"
+version in ThisBuild := "0.4.0-SNAPSHOT"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		version in ThisBuild := "0.3.6-SNAPSHOT"
		version in ThisBuild := "0.4.0-SNAPSHOT"