Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

documentation is out of date or this is a bug #132

Open
arikivandeput opened this issue Jul 9, 2024 · 6 comments
Open

documentation is out of date or this is a bug #132

arikivandeput opened this issue Jul 9, 2024 · 6 comments
Labels
bug Something isn't working

Comments

@arikivandeput
Copy link

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
@arikivandeput arikivandeput added the bug Something isn't working label Jul 9, 2024
@0xTim
Copy link
Member

0xTim commented Jul 9, 2024

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

@arikivandeput
Copy link
Author

empty page.

@0xTim
Copy link
Member

0xTim commented Jul 9, 2024

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
Copy link
Member

0xTim commented Jul 9, 2024

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

@arikivandeput
Copy link
Author

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
Copy link
Member

0xTim commented Jul 9, 2024

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@0xTim @arikivandeput