documentation is out of date or this is a bug

arikivandeput commented 1 month ago

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

0xTim commented 1 month ago

What's the error? Do you get a blank page, any errors in the console?

arikivandeput commented 1 month ago

empty page.

0xTim commented 1 month ago

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

0xTim commented 1 month ago

Also do you get any generated HTML? Even if the page is blank

arikivandeput commented 1 month ago

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>&copy; 2024 #(companyName). All rights reserved.</p>
    </div>
</footer>

0xTim commented 1 month ago

What did you fix? It's hard to tell here. Feel free to submit a PR to the docs!

vapor / leaf-kit