https://github.com/alja7dali/swift-web-page-kitura
☁️ Kitura plugin for type-safe HTML/CSS views.
https://github.com/alja7dali/swift-web-page-kitura
css dsl html kitura server-side-swift swep swftui swift
Last synced: 3 months ago
JSON representation
☁️ Kitura plugin for type-safe HTML/CSS views.
- Host: GitHub
- URL: https://github.com/alja7dali/swift-web-page-kitura
- Owner: Alja7dali
- License: mit
- Created: 2021-08-29T00:02:44.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-29T01:28:06.000Z (almost 4 years ago)
- Last Synced: 2025-01-16T19:51:19.776Z (4 months ago)
- Topics: css, dsl, html, kitura, server-side-swift, swep, swftui, swift
- Language: Swift
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ☁️ swift-web-page-kitura
[Kitura](https://www.kitura.dev) plugin for type-safe HTML/CSS views using [Swep](https://github.com/alja7dali/swift-web-page).
## Motivation
The most popular choice for rendering HTML/CSS in a Kitura web app is to use the Stencil templating language, but it exposes your application to **runtime errors** and **invalid HTML/CSS**. Our plugin prevents these runtime issues at compile-time by embedding HTML/CSS directly into Swift’s powerful type system. It uses the [Swep](https://github.com/alja7dali/swift-web-page) DSL for constructing HTML/CSS documents using plain Swift data structures.
## Usage
To use the plugin all you have to do is return a `Document` or `Stylesheet` value from your router callback:
``` swift
import Swep
import Kitura
import SwepKituraSupport
let router = Router()
defer { Kitura.stop() }
router.get("/") { request, response, next in
response.send(
document {
head {
style {
selector("*") {
margin(.px(5))
backgroundColor(.hex(0xd1d1d1))
}
}
link()
.rel(.stylesheet)
.href("style.min.css")
}
body {
h1("Hello, type-safe HTML/CSS on Kitura!")
.color(.green)
}
}
)
next()
}
router.get("style.min.css") { request, response, next in
response.send(
stylesheet {
selector("body") {
padding(.rem(0.5))
lineHeight(1.35)
fontFamily("SanFranciscoDisplay-Regular")
}
selector("h1") {
marginTop(.rem(2))
marginBottom(.px(0))
}
}
)
next()
}
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 SwepKituraSupportExample`
* Open your browser to `http://localhost:8080`
The HTML/CSS for that page is constructed and rendered with Swep!!
## Installation
### Swift Package Manager (SPM)
If you want to use *swift-web-page-kitura* in a project that uses [SPM](https://swift.org/package-manager/), it's as simple as adding a `dependencies` clause to your `Package.swift`:
``` swift
dependencies: [
.package(url: "https://github.com/alja7dali/swift-web-page-kitura.git", from: "0.0.1")
]
```
From there you can add `SwepKituraSupport` as target dependencies.
``` swift
let SwepKituraSupport: Target.Dependency = .product(name: "SwepKituraSupport", package: "swift-web-page-kitura")
...
targets: [
.target(name: "yourProject", dependencies: [SwepKituraSupport]),
]
```
## License
All modules are released under the MIT license. See [LICENSE](./LICENSE.md) for details.