vapor
documentation is out of date or this is a bug
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#if(meta):
#(meta)
#endif
<title>#(title)</title>
</head>
<body>
#(body)
</body>
</html>
/Views/Public/about.leaf
#extend("Layouts/base"):
#export("title"):
About Seald CMS
#endexport
#export("meta"):
<meta name="description" content="This is the home page of My Vapor App">
<meta name="keywords" content="vapor, swift, web, app">
#endexport
#export("body"):
<h1>Hello Seald CMS</h1>
#endexport
#endextend
Outcome
No response
Additional notes
Documentation about syntax for extend and export is not up to date imo
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
finally got it working application.leaf
<!DOCTYPE html>
<html lang="en">
<head>
<title>#(title)</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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!