This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
More Routing Options Needed / Components #2
Comments
|
Hi @stunjiturner, I'm not sure I understand the question here. Can you clarify a bit more? |
|
@stunjiturner I see two parts in the original issue statement. First, the <html>
<head>
<!-- -->
</head>
<body>
<!-- some menu navigation here -->
<!-- ## COMMON HEADER ABOVE HERE ## -->
<!-- PAGE CONTENT: page_a, page_b, page_etc, ... -->
<!-- ## COMMON FOOTER BELOW HERE ## -->
<!-- may include some javascript -->
</body>
</html>Extending/adapting the Second, |
|
Hi @stunjiturner and @marc-medley, sorry for the delay in response. Here's a bit of info on how to accomplish what you want. The nice thing having your HTML as simple swift data structures is that you can combine them in the same ways you might combine arrays and dictionaries. In particular, we could create a function that takes the main body of the page as an argument, and returns a new node that represents the page with the header and footer included: func layout(mainContent: Node) -> Node {
return .html(
.head(
// whatever you want in here
),
.body(
.header(
.ul(
.li(.a(attributes: [.href("/")], "Home")),
.li(.a(attributes: [.href("/contact")], "Contact us")),
.li(.a(attributes: [.href("/about")], "About"))
)
),
.main(
mainContent
)
.footer(
.ul(
.li(.a(attributes: [.href("/")], "Home")),
.li(.a(attributes: [.href("/contact")], "Contact us")),
.li(.a(attributes: [.href("/about")], "About"))
)
)
)
)
}Now all you have to do is pass your main page's content to the |
|
@mbrandonw Maybe an action item before closing this out would be to refactor the example app to have a layout. |
|
Regarding components, I am trying to extend a working SwifthtmlTemplateBlog.swift to inlcude the equivalent of Resources/HtmlParts/base_header.html and Resources/HtmlParts/base_footer.html with-in the The following should be trivial, but the attempts so far only produce errors:
Also, when would one use the dot |
|
@marc-medley Hey Marc, seems like we really need to improve the documentation, both for this repo and
If you go back to the let header = Node.header(
.ul(
.li(.a(attributes: [.href("/")], "Home")),
.li(.a(attributes: [.href("/contact")], "Contact us")),
.li(.a(attributes: [.href("/about")], "About"))
)
)
let footer = Node.footer(
.ul(
.li(.a(attributes: [.href("/")], "Home")),
.li(.a(attributes: [.href("/contact")], "Contact us")),
.li(.a(attributes: [.href("/about")], "About"))
)
)
func layout(mainContent: Node) -> Node {
return .html(
.head(
// whatever you want in here
),
.body(
header
.main(mainContent),
footer
)
)
}So instead of breaking out "partial" or "fragment" views into their own template files, you just create a value that holds the fragment and include it into a bigger document.
The doctype is a special case on the node enum, and can be used like so: let document: Node = [
.doctype,
.html(
.head(),
.body()
)
]By default it uses a plain let document: Node = [
.doctype(#"HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"#),
.html(
.head(),
.body()
)
]
Both the .script(attributes: [
.async(true),
.src("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js")
])
Yeah, sorry about the confusion here, but we recently refactored |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
The ability to add components, like header and footer as separate swift files, the vapor team suggested "that a controller-like class that has methods that return Html.Node (pointfree's type), which your route handler can call, effectively, you're replacing templates with Swift functions
which are needed to be known at compile time"
The text was updated successfully, but these errors were encountered: