Skip to content

Commit

Permalink
[read-me] Updated the read-me and minor changes to the tests
Browse files Browse the repository at this point in the history
  • Loading branch information
MatsMoll committed Dec 29, 2019
1 parent 6f807d4 commit ac88557
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 35 deletions.
50 changes: 36 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,37 @@ By using Swift's powerful language features and a pre-rendering algorithm, HTMLK

Add the following in your `Package.swift` file
```swift
.package(url: "https://github.com/vapor-community/HTMLKit.git", from: "2.0.0-alpha.9"),
.package(url: "https://github.com/vapor-community/HTMLKit.git", from: "2.0.0-beta.2"),
```
And register the provider and the different templates with in `configure.swift`
```swift
try services.register(HTMLKitProvider())

// Or you can do it manually with
let renderer = HTMLRenderer()
try renderer.add(view: MyTemplate())
services.register(renderer)
```
You can use the following providers in order to use HTMLKit with [Vapor 3](https://github.com/MatsMoll/htmlkit-vapor-3-provider) and for [Vapor 4](https://github.com/MatsMoll/htmlkit-vapor-provider)

## Usage

To create a HTML template, conform to the `HTMLTemplate` protocol.

```swift
struct TemplateData {
let name: String
let handle: String
let title: String?
}

struct SimpleTemplate: HTMLTemplate {

@TemplateValue(String?.self)
@TemplateValue(TemplateData.self)
var context

var body: HTML {
Document(type: .html5) {
Head {
Title { context }
Title { context.title }
Author { context.name }
.twitter(handle: context.handle)
}
Body {
Unwrap(context) { string in
P { string }
Unwrap(context.title) { title in
P { title }
}
}
}
Expand All @@ -51,6 +52,23 @@ struct SimpleTemplate: HTMLTemplate {
try SimpleTemplate().render(with: "Some string", for: req)
```

This will render somehing like this
```html
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<meta property='og:title' content='Some Title'>
<meta name='twitter:title' content='Some Title'>
<meta name='author' content='Mats'>
<meta name='twitter:creator' content='@SomeTwitterHandle'>
</head>
<body>
<p>Some Title</p>
</body>
</html>
```

And to create a HTML component, just comform to the `HTMLComponent` protocol.

```swift
Expand Down Expand Up @@ -89,7 +107,7 @@ struct SomePage: HTMLPage {
var body: HTML {
Div {
Alert(isDismissable: false) {
H3("Some Title")
H3 { "Some Title" }
}
}
}
Expand Down Expand Up @@ -164,3 +182,7 @@ struct LocalizedDateView: HTMLTemplate {
* [BootstrapKit](https://github.com/MatsMoll/BootstrapKit) - A higher level library that makes it easier to work with Boostrap 4.
* [Vapor TIL fork](https://github.com/MatsMoll/vapor-til) - Compare Leaf to HTMLKit in this fork of the TIL app.
* Convert pure HTML code to HTMLKit code using this [HTML-to-HTMLKit converter](https://github.com/MatsMoll/HTMLKit-code-converter).

## Known Issues

* Linux compiler can sometimes struggle with compiling the code when a combination of complex use of generics, default values or deeply nested function builders are used.
5 changes: 4 additions & 1 deletion Sources/HTMLKit/HTMLDocument.swift
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ public struct Document: HTMLPage {
}

public var body: HTML {
"<!DOCTYPE \(type.rawValue)>" + content
[
"<!DOCTYPE \(type.rawValue)>",
HTMLNode { content }
]
}
}
9 changes: 2 additions & 7 deletions Tests/HTMLKitTests/HTMLKitTests.swift
Original file line number Diff line number Diff line change
Expand Up @@ -173,11 +173,6 @@ final class HTMLKitTests: XCTestCase {
// }
// }

func testMakeOptional() throws {
let metadataPageDynamic = try renderer.render(raw: MetadataTestDynamic.self, with: .init(name: "Mats", handle: "@MatsMoll"))
XCTAssertEqual(metadataPageDynamic, "<!DOCTYPE html><head><meta name='author' content='Mats'><meta name='twitter:creator' content='@MatsMoll'><title>Some title</title><meta property='og:title' content='Some title'><meta name='twitter:title' content='Some title'><meta name='description' content='Some description'><meta property='og:description' content='Some description'><meta name='twitter:description' content='Some description'></head>")
}

func testHtmlRenderingTests() throws {

let testDate = Date()
Expand Down Expand Up @@ -248,8 +243,8 @@ final class HTMLKitTests: XCTestCase {
// XCTAssertEqual(markdown.replacingOccurrences(of: "\n", with: ""), "<div><h1>Title: Hello</h1><h2>Description here:</h2><p>World</p></div>")
XCTAssertEqual(english, "<div><h1>Hello World!</h1><p>You have 3 unread messages.</p><p>You have 2 unread messages.</p><p>You have an unread message</p></div>")
XCTAssertEqual(norwegian, "<div><h1>Hei Verden!</h1><p>Du har 3 uleste meldinger.</p><p>Du har 2 uleste meldinger.</p><p>Du har en ulest melding</p></div>")
XCTAssertEqual(metadataPage, "<!DOCTYPE html><head><meta name='author' content='Mats'><meta name='twitter:creator' content='@MatsMoll'><title>Some title</title><meta property='og:title' content='Some title'><meta name='twitter:title' content='Some title'><meta name='description' content='Some description'><meta property='og:description' content='Some description'><meta name='twitter:description' content='Some description'></head>")
XCTAssertEqual(metadataPageDynamic, "<!DOCTYPE html><head><meta name='author' content='Mats'><meta name='twitter:creator' content='@MatsMoll'><title>Some title</title><meta property='og:title' content='Some title'><meta name='twitter:title' content='Some title'><meta name='description' content='Some description'><meta property='og:description' content='Some description'><meta name='twitter:description' content='Some description'></head>")
XCTAssertEqual(metadataPage, "<!DOCTYPE html><html><head><meta name='author' content='Mats'><meta name='twitter:creator' content='@MatsMoll'><title>Some title</title><meta property='og:title' content='Some title'><meta name='twitter:title' content='Some title'><meta name='description' content='Some description'><meta property='og:description' content='Some description'><meta name='twitter:description' content='Some description'></head></html>")
XCTAssertEqual(metadataPageDynamic, "<!DOCTYPE html><html><head><meta name='author' content='Mats'><meta name='twitter:creator' content='@MatsMoll'><title>Some title</title><meta property='og:title' content='Some title'><meta name='twitter:title' content='Some title'><meta name='description' content='Some description'><meta property='og:description' content='Some description'><meta name='twitter:description' content='Some description'></head></html>")
XCTAssertEqual(date, "<div><p>\(shortDateFormatter.string(from: testDate))</p><p>\(customDateFormatter.string(from: testDate))</p></div>")
XCTAssertEqual(optionalDateNil, "<div><p></p><p></p></div>")
XCTAssertEqual(optionalDate, "<div><p>\(shortDateFormatter.string(from: testDate))</p><p>\(customDateFormatter.string(from: testDate))</p></div>")
Expand Down
24 changes: 11 additions & 13 deletions Tests/HTMLKitTests/HTMLTestDocuments.swift
Original file line number Diff line number Diff line change
Expand Up @@ -75,19 +75,17 @@ struct BaseView: HTMLComponent {

var body: HTML {
Document(type: .html5) {
HTMLNode {
Head {
Title { context }
.useTwitter(metadata: false)
.useOpenGraph(metadata: false)
Stylesheet(url: "some url")
Meta()
.name(.viewport)
.content("width=device-width, initial-scale=1.0")
}
Body {
content
}
Head {
Title { context }
.useTwitter(metadata: false)
.useOpenGraph(metadata: false)
Stylesheet(url: "some url")
Meta()
.name(.viewport)
.content("width=device-width, initial-scale=1.0")
}
Body {
content
}
}
}
Expand Down

0 comments on commit ac88557

Please sign in to comment.