Replies: 1 comment
-
|
You were really close! Here's an example of a page layout. package templates
import "github.com/a-h/ragmark/site"
templ Left(s *site.Site) {
<h2><a href={ templ.SafeURL(s.BaseURL) }>{ s.Title }</a></h2>
<nav>
<ul>
<li><a href="/chat">✨ Chatbot</a></li>
</ul>
@menu(s.Menu())
</nav>
}
templ menu(items []site.MenuItem) {
<ul>
for _, item := range items {
<li>
<a href={ templ.SafeURL(item.URL) }>{ item.Title }</a>
@menu(item.Children)
</li>
}
</ul>
}
templ Right(toc []site.MenuItem) {
<nav>
@menu(toc)
</nav>
}
templ Directory(dir site.Metadata, children []site.Metadata) {
<h1>{ dir.Title }</h1>
<ul>
for _, child := range children {
<li>
<a href={ templ.SafeURL(child.URL) }>{ child.Title }</a>
</li>
}
</ul>
}
templ Page(left, middle, right templ.Component) {
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Content</title>
<link rel="stylesheet" href="/static/modern-normalize.css"/>
<link rel="stylesheet" href="/static/custom.css"/>
<link rel="stylesheet" href="/static/sakura-fragments.css"/>
<script src="/static/htmx.min.js" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ"></script>
<script src="/static/sse.js" integrity="sha384-fw+eTlCc7suMV/1w/7fr2/PmwElUIt5i82bi+qTiLXvjRXZ2/FkiTNA/w0MhXnGI"></script>
</head>
<body>
<div class="layout">
<div class="sidebar-left">
@left
</div>
<div class="content">
<a id="top"></a>
<div class="content-scroll-container">
@middle
</div>
</div>
<div class="sidebar-right">
@right
</div>
</div>
</body>
</html>
}With the pages being constructed in a HTTP handler like this: // Handle Markdown files.
var mdHandler = site.NewMarkdownDirEntryHandler(func(s *site.Site, page site.Metadata, toc []site.MenuItem, outputHTML string, err error) http.Handler {
if err != nil {
s.Log.Error("failed to render markdown", slog.String("url", page.URL), slog.Any("error", err))
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
http.Error(w, "failed to render markdown", http.StatusInternalServerError)
})
}
left := templates.Left(s)
middle := templ.Raw(outputHTML)
right := templates.Right(toc)
return templ.Handler(templates.Page(left, middle, right))
})templ components are turned into function calls, so if you create a component: templ Name() {
<div>Name</div>
}You have to call it. templ Page() {
@Name()
}But, you can compose templates. Note that when a component is passed as an argument, it's just a variable at that point, so it doesn't need parenthesis templ PageContent() {
<div>Hello, world</div>
}
templ Layout(content templ.Component) {
<div>
@content
<div>
{ children... }
}
func Compose() {
content := PageContent()
Layout(content).Render(os.Stdout)
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Is there any way to create a template with multiple slots for children? I searched the documentation but found nothing.
Also, I tried creating a template like
But I found no way to get actually use this method. I tried both:
and
Is there any other way I'm missing to accomplish this. Or would it make sense for any of these ways to work on future versions?
Thanks a lot.
Beta Was this translation helpful? Give feedback.
All reactions