Update example app and README. (#1)

README.md

@@ -10,7 +10,7 @@
 
 The most popular choice for rendering HTML in a Kitura web app is to use the Stencil templating language, but it exposes your application to **runtime errors** and **invalid HTML**. Our plugin prevents these runtime issues at compile-time by embedding HTML directly into Swift’s powerful type system. It uses the [swift-html](https://github.com/pointfreeco/swift-html) DSL for constructing HTML documents using plain Swift data structures.
 
-## Example
+## Usage
 
 To use the plugin all you have to do is return a `Node` value from your router callback:
 
@@ -31,6 +31,24 @@ Kitura.addHTTPServer(onPort: 8080, with: router)
 Kitura.run()
 ```
 
+## Take it for a spin
+
+We've included a sample Kitura application in this repo to show off its usage. To run the app immediately, simply do:
+
+* `swift run HtmlKituraSupportExample`
+* Open your browser to `http://localhost:8080`
+
+The HTML for that page is constructed and rendered with [swift-html](https://github.com/pointfreeco/swift-html)!
+
+If you want to run the app in Xcode so that you can play around with the HTML, try this:
+
+* `git clone https://github.com/pointfreeco/swift-html-kitura`
+* `cd swift-html-kitura`
+* `make xcodeproj`
+* Select the `HtmlKituraSupportExample` target
+* Build and run `cmd+R`
+* Open your browser to `http://localhost:8080`
+
 ## Installation
 
 If you want to use swift-html-kitura in a project that uses [SwiftPM](https://swift.org/package-manager/), it's as simple as adding a `dependencies` clause to your `Package.swift`:

Sources/HtmlKituraSupportExample/main.swift

@@ -3,11 +3,7 @@ import Kitura
 
 let router = Router()
 
-router.get("/") { request, response, next in
-  response.send(
-    html([
-      head([
-        style("""
+let stylesheet: StaticString = """
 body {
   padding: 0.5rem;
   line-height: 1.35;
@@ -21,23 +17,101 @@ blockquote {
   margin-left: 1rem;
   padding-left: 0.5rem;
 }
-""")
-        ]),
+
+pre {
+  background-color: #f3f3f3;
+  padding: 0.5rem;
+  overflow-x: scroll;
+}
+
+code {
+  background-color: #f3f3f3;
+  padding: 0.25rem;
+}
+
+li:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+
+h2 {
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
+"""
+
+router.get("/") { request, response, next in
+  response.send(
+    html([
+      head([style(stylesheet)]),
+
       body([
-        h1(["swift-html"]),
-        blockquote(["""
-A Swift DSL for constructing and rendering HTML documents.
+        h1(["swift-html-kitura"]),
+        blockquote([
+          "A Kitura plugin for type-safe, transformable HTML views using ",
+          a([href("https://github.com/pointfreeco/swift-html")], ["swift-html"])
+          ]),
+
+        h2(["Motivation"]),
+        p(["""
+The most popular choice for rendering HTML in a Kitura web app is to use the Stencil templating language,
+but it exposes your application to runtime errors and invalid HTML. Our plugin prevents these
+runtime issues at compile-time by embedding HTML directly into Swift’s powerful type system. It uses the
+swift-html DSL for constructing HTML documents using plain Swift data structures.
 """
           ]),
+
+        h2(["Usage"]),
         p(["""
-This library provides a deep embedding of an HTML tree structure into the Swift programming language.
+To use the plugin all you have to do is return a `Node` value from your router callback:
+"""]),
+        pre(["""
+import HtmlKituraSupport
+import Kitura
+
+let router = Router()
+
+router.get("/") { request, response, next in
+  response.send(
+    h1(["Hello, type-safe HTML on Kitura!"])
+  )
+  next()
+}
+
+Kitura.addHTTPServer(onPort: 8080, with: router)
+Kitura.run()
 """
+          ]),
+
+        h2(["Take it for a spin"]),
+        p(["""
+We've included a sample Kitura application in this repo to show off its usage. To run the app
+immediately, simply do:
+"""]),
+        ul([
+          li([code(["swift run HtmlKituraSupportExample"])]),
+          li(["Open your browser to ", code(["http://localhost:8080"])])
+          ]),
+        p(["""
+The HTML for that page is constructed and rendered with swift-html!
+"""]),
+        p(["""
+If you want to run the app in Xcode so that you can play around with the HTML, try this:
+"""]),
+        ul([
+          li([code(["git clone https://github.com/pointfreeco/swift-html-kitura"])]),
+          li([code(["cd swift-html-kitura"])]),
+          li([code(["make xcodeproj"])]),
+          li(["Select the ", code(["HtmlKituraSupportExample"]), " target"]),
+          li(["Build and run ", code(["cmd+R"])]),
+          li(["Open your browser to ", code(["http://localhost:8080`"])])
           ])
         ])
       ])
-  )
-  next()
+    )
+
+    next()
 }
 
+
 Kitura.addHTTPServer(onPort: 8080, with: router)
 Kitura.run()