Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

Constructing stylesheets utilizing Leaf – The.Swift.Dev.

[ad_1]

A fast CSS demo mission

The very first step is so as to add Leaf as a dependency to your mission. You must observe that Leaf 4 just isn’t completed but and these model new options are solely accessible from the tau pre-release.


import PackageDescription

let bundle = Bundle(
    identify: "myProject",
    platforms: [
       .macOS(.v10_15)
    ],
    dependencies: [
        
        .package(url: "https://github.com/vapor/vapor", from: "4.32.0"),
        .package(url: "https://github.com/vapor/leaf", .exact("4.0.0-tau.1")),
        .package(url: "https://github.com/vapor/leaf-kit", .exact("1.0.0-tau.1.1")),
    ],
    targets: [
        .target(name: "App", dependencies: [
            .product(name: "Leaf", package: "leaf"),
            .product(name: "Vapor", package: "vapor"),
        ]),
        .goal(identify: "Run", dependencies: ["App"]),
        .testTarget(identify: "AppTests", dependencies: [
            .target(name: "App"),
            .product(name: "XCTVapor", package: "vapor"),
        ])
    ]
)


We’re able to import Leaf in your Swift recordsdata, since there’s a new LeafFileMiddleware accessible as a part of Leaf we will create some publicly accessible template recordsdata and use this middleware to render them. Create a brand new Public listing inside the basis folder of the mission and place an new index.html file there. You too can use a .leaf extension, however for the sake of simplicity (and Xcode syntax highlighting causes) we will use the .html extension this time.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta identify="viewport" content material="width=device-width, initial-scale=1">
    <title>#(title)</title>
    <hyperlink rel="stylesheet" href="/css/fashion.css">
</head>
<physique>
    <header>
        <h1>#(title)</h1>
    </header>
</physique>
</html>

Fairly fundamental HTML5 boilerplate code, besides that we’ll print the title utilizing a Leaf tag. We’ll set a worth for this context variable via some Swift code in a second. Within the head part we additionally import our css/fashion.css stylesheet file. Now you must create a css folder contained in the Public listing and place a fashion.css file within it.

* {
    margin: 0;
    padding: 0;
}
physique {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica", "Segoe UI", Roboto, Ubuntu;
    font-size: 16px;
    line-height: 1.4em;
    background: #(background);
}
h1 {
    padding: #(padding);
}
@media (max-width: 599px) {}
@media (min-width: 600px) {}
@media (min-width: 900px) {}
@media (min-width: 1200px) {}
@media (min-width: 1800px) {}

Since this file is “secretly” a leaf template file we are able to use the #(variable) syntax to print out values. We’re going to go a background coloration key and a padding key with some customized values as context variables.

Now let me present you how one can configure this new LeafFileMiddleware, so we are able to render each our html and css templates.

import Vapor
import Leaf
    
public func configure(_ app: Utility) throws {

    if !app.surroundings.isRelease {
        LeafRenderer.Choice.caching = .bypass
    }

    LeafFileMiddleware.defaultMediaType = .html
    LeafFileMiddleware.processableExtensions = ["leaf", "html", "css", "js"]
    LeafFileMiddleware.contexts = [
        .css: [
            "background": "#eee",
            "padding": "16px",
        ],
        .html: [
            "title": "Hello world!"
        ],
    ]
    
    if let lfm = LeafFileMiddleware(publicDirectory: app.listing.publicDirectory) {
        app.middleware.use(lfm)
    }
    app.views.use(.leaf)
}

First we disable the cache, however that is a fairly apparent chunk of code, subsequent we set the default media kind to html. This will probably be used to set the Content material-Sort header if the file extension within the request is an unknown kind. The processableExtensions property will inform the LeafFileMiddleware to course of and render solely these recordsdata, every little thing else with a distinct extension will probably be streamed similar to once you use an everyday FileMiddleware.

As you possibly can see we are able to set completely different context values for particular media sorts, in our case all of the css recordsdata can use the background and padding properties and each html file can make the most of the title context variable. Additionally it is attainable to set them via a subscript syntax:

LeafFileMiddleware[.css] = [
    "background": "green",
    "padding": "16px",
]

LeafFileMiddleware[.html] = [
    "title": "Hello world!"
]

The final step is to create the precise middleware with a publicDirectory argument. This listing is the situation the place the system will search for publicly accessible recordsdata and if wanted they are often processed as common Leaf templates. You too can setup listing indexing via the LeafFileMiddleware, however that is a distinct matter.

In case you navigate to the http://localhost:8080/index.html tackle you must see your rendered index.html file with the appropriate stylesheet utilized to it. In fact you possibly can register a customized route and render your templates utilizing the standard Assets / Views location if wanted, however I simply needed to indicate you this cool trick, because it allows us to serve public recordsdata utilizing a extra dynamic strategy.

[ad_2]

Leave a Reply