Open arikivandeput opened 1 month ago
What's the error? Do you get a blank page, any errors in the console?
empty page.
Anything in the console, any logs etc? Have you tried removing parts of the template to see what breaks it? Going to need more to go on here
Also do you get any generated HTML? Even if the page is blank
finally got it working application.leaf
<!DOCTYPE html>
<html lang="en">
<head>
<title>#(title)</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<meta name="csrf-token" content="#(csrfToken)">
</head>
<body>
<main class="container-sm">
#extend("Layouts/header")
#import("content")
</main>
#extend("Layouts/footer")
<script>
document.addEventListener('DOMContentLoaded', function() {
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
document.querySelectorAll('form').forEach(function(form) {
form.addEventListener('submit', function(event) {
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'csrf_token';
input.value = token;
form.appendChild(input);
});
});
});
</script>
</body>
</html>
header.leaf
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<a class="navbar-brand" href="/">LOGO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/privacy">Privacy</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
and index.leaf
#extend("Layouts/application")
<div class="container">
<h1>Hello #(companyName)</h1>
</div>
The documentation is incorrect/incomplete regarding syntax for extend and export and import. for each website a structure with subview is required like header, footer, sidemenu and main content
footer.leaf
<footer class="bg-dark text-white text-center py-3 mt-auto fixed-bottom">
<div class="container">
<p>© 2024 #(companyName). All rights reserved.</p>
</div>
</footer>
What did you fix? It's hard to tell here. Feel free to submit a PR to the docs!
Describe the issue
templates with extend not rendering
Vapor version
4.102.0
Operating system and version
MacOS14.5
Swift version
Swift5.10
Steps to reproduce
/Views/Layouts/base.leaf
/Views/Public/about.leaf
Outcome
No response
Additional notes
Documentation about syntax for extend and export is not up to date imo