Added logo

Author: andreaferretti

src/main/resources/main.css

@@ -19,6 +19,40 @@
   width: 800px;
 }
 
+/*Logo*/
+
+@font-face {
+  font-family: "Forque";
+  src: url('/fonts/Forque.woff') format('woff'),
+    url('/fonts/Forque.svg') format('svg'),
+    url('/fonts/Forque.ttf') format('truetype'),
+    url('/fonts/Forque.eot') format('embedded-opentype');
+}
+
+#logo {
+  padding-left: 340px;
+}
+
+#logo svg {
+  margin-top: -25px;
+  margin-bottom: 25px;
+}
+
+#logo h1 {
+  font-family: Forque;
+  font-size: 80px;
+  margin-left: 35px;
+}
+
+#logo h1 a, #logo h1 a:hover {
+  color: #333333;
+  text-decoration: none;
+}
+
+#logo path, #logo circle {
+  cursor: pointer;
+}
+
 /* Pie */
 
 #pie svg {

src/main/scala/demo/components/logo.scala

@@ -0,0 +1,45 @@
+package demo.components
+
+import scala.scalajs.js
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.all.{ a, h1, h3, href, div, className }
+import japgolly.scalajs.react.vdom.svg.all._
+import paths.mid.Bezier
+
+import demo.colors._
+
+
+object logo {
+  val Logo = ReactComponentB[Unit]("Paths.js")
+    .render(_ => {
+      val line = Bezier(List(
+        (0, 50),
+        (50, 70),
+        (100, 40),
+        (150, 30),
+        (200, 60),
+        (250, 80),
+        (300, 50)
+      ))
+      val circles = line.path.points.map(p => circle(
+        r := 5,
+        cx := p(0),
+        cy := p(1),
+        stroke := "red",
+        strokeWidth := 2,
+        fill := "white"
+      ))
+
+      div(id := "logo", className := "col-md-12",
+        h1(a(href := "https://github.com/andreaferretti/paths-scala-js", "Paths.scala.js")),
+        h3("Generate SVG paths for geometric shapes"),
+        svg(width := 800, height := 100,
+          g(transform := "translate(100, 0)",
+            path(d := line.path.print, stroke := "red", fill := "none"),
+            circles
+          )
+        )
+      )
+    })
+    .build
+}

src/main/scala/demo/components/panel.scala

@@ -0,0 +1,29 @@
+package demo.components
+
+import scala.scalajs.js
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.all._
+import paths.high.Pie
+
+import demo.colors._
+
+
+object panel {
+  case class PanelContent(id: Option[String], title: String, text: String)
+
+  val Panel = ReactComponentB[PanelContent]("Panel")
+    .render((content, children) => {
+      div(className := "col-md-6", id := content.id,
+        div(className := "panel panel-default",
+          div(className := "panel-heading",
+            h2(className := "panel-title", content.title)
+          ),
+          div(className := "panel-body",
+            p(className := "alert alert-info", content.text),
+            children
+          )
+        )
+      )
+    })
+    .build
+}

src/main/scala/demo/components/toplevel.scala

@@ -4,6 +4,7 @@ import japgolly.scalajs.react._
 import japgolly.scalajs.react.vdom.all._
 
 import panel._
+import logo._
 import piechart._
 
 
@@ -19,11 +20,12 @@ object toplevel {
   val TopLevel = ReactComponentB[Unit]("Top level component")
     .render(_ =>
       div(className := "container",
+        div(className := "row", Logo(())),
         div(className := "row",
           Panel(PanelContent(
             id = Some("pie"),
             title = "Pie Chart",
-            text = "Here is a pie chart example. Sectors are clickable"
+            text = "Here is a pie chart example"
           ), PieChart(countries))
         )
       )