diff --git a/README.md b/README.md index 59f11f4..38027bb 100644 --- a/README.md +++ b/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`: diff --git a/Sources/HtmlKituraSupportExample/main.swift b/Sources/HtmlKituraSupportExample/main.swift index 6c9c8c5..ab54e0c 100644 --- a/Sources/HtmlKituraSupportExample/main.swift +++ b/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()