diff --git a/README.md b/README.md index 7cb6fd38..5e6dfb2d 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,15 @@ Add the following in your `Package.swift` file 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) +for instance for Vapor 4, you have to add the **HTMLKit** vapor provider like this + +```swift +.package(name: "HTMLKitVaporProvider", url: "https://github.com/MatsMoll/htmlkit-vapor-provider.git", from: "1.0.0-beta.4"), +... +.product(name: "HTMLKit", package: "HTMLKit"), +.product(name: "HTMLKitVaporProvider", package: "HTMLKitVaporProvider"), +``` + ## Usage To create a HTML template, conform to the `HTMLTemplate` protocol. @@ -49,11 +58,31 @@ struct SimpleTemplate: HTMLTemplate { } } +// For Vapor 4, you certainly want to preload the template in configure to optimize rendering. +// in configure.swift +import HTMLKitVaporProvider ... -try SimpleTemplate().render(with: .init(...), for: req) +public func configure(_ app: Application) throws { + ... + try app.htmlkit.add(view: SimpleTemplate()) + ... +} + +// In one of your controllers +import HTMLKit +... +func get(req: Request) throws -> EventLoopFuture { + return Simple.query(on: req.db) + .filter(...) + .first() + .unwrap(or: Abort(.notFound)) + .flatMap { + SimpleTemplate().render(with: TemplateData(name: $0.name, ...), for: req) + } +} ``` -This will render somehing like this +This will render something like this ```html @@ -71,19 +100,19 @@ This will render somehing like this ``` -And to create a HTML component, just comform to the `HTMLComponent` protocol. +And to create a HTML component, just conform to the `HTMLComponent` protocol. ```swift public struct Alert: HTMLComponent { - let isDisimissable: Conditionable // This is a protocol that makes it possible to optimize if's + let isDismissable: Conditionable // This is a protocol that makes it possible to optimize if's let message: HTML public var body: HTML { Div { message - - IF(isDisimissable) { + + IF(isDismissable) { Button { Span { "×" } .aria(for: "hidden", value: true) @@ -95,7 +124,7 @@ public struct Alert: HTMLComponent { } } .class("alert alert-danger bg-danger") - .modify(if: isDisimissable) { + .modify(if: isDismissable) { $0.class("fade show") } .role("alert") @@ -154,7 +183,7 @@ var renderer = HTMLRenderer() try renderer.registerLocalization(atPath: "workDir", defaultLocale: "en") ``` And if the locale changes based on some user input, then you can change the used locale in the template. -This also effects how dates are presentet to the user. +This also effects how dates are presented to the user. ```swift struct LocalizedDateView: HTMLTemplate { diff --git a/Sources/HTMLKit/HTMLRenderer.swift b/Sources/HTMLKit/HTMLRenderer.swift index 4e95f2c3..c58e6d7f 100644 --- a/Sources/HTMLKit/HTMLRenderer.swift +++ b/Sources/HTMLKit/HTMLRenderer.swift @@ -40,7 +40,7 @@ public protocol HTMLRenderable { func render(raw type: T.Type) throws -> String } -/// A struct containing the differnet formulas for the different views. +/// A struct containing the different formulas for the different views. /// /// try renderer.add(template: WelcomeView()) // Builds the formula /// try renderer.render(WelcomeView.self) // Renders the formula @@ -174,11 +174,11 @@ public class HTMLRenderer: HTMLRenderable { lingo = try Lingo(rootPath: path, defaultLocale: defaultLocale) } - /// Manage the differnet contexts + /// Manage the different contexts /// This will remove the generic type in the render call public class ContextManager { - /// The different context varaibles used when rendering + /// The different context variables used when rendering var contexts: [String: Any] /// The lingo object that is needed to use localization