adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working django layout

Browse Source
This commit is contained in:
Adrien Bouvais 2024-04-21 14:32:32 +02:00
parent 005b9cd41d
commit 29183bc0e0
10 changed files with 77 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
layouts/chat.html
View File

@ -1,58 +0,0 @@
{{define "user-message"}}
<article class="message user-message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ .Content }}
</div>
</article>
{{end}}
{{define "bot-message"}}
<article class="message bot-message">
<div class="message-header">
<p>Bot</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ .Content }}
</div>
</article>
{{end}}
{{define "chat-input"}}
<form>
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
{{end}}
{{define "chat-messages"}}
<div class="columns is-centered">
<div class="column is-half">
{{range .Messages}}
{{if eq .Role "user"}}
{{template "user-message" .Message}}
{{else}}
{{template "bot-message" .Message}}
{{end}}
{{end}}
</div>
</div>
{{end}}
{{ define "content" }}
<div class="chat-container">
<h1>Chat Page</h1>
{{template "chat-messages" .Messages}}
{{template "chat-input"}}
</div>
{{ end }}

20
main.go
View File

@ -6,7 +6,7 @@ import (
"github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/logger" "github.com/gofiber/fiber/v2/middleware/logger"
"github.com/gofiber/template/html/v2" "github.com/gofiber/template/django/v3"
"go.mongodb.org/mongo-driver/bson" "go.mongodb.org/mongo-driver/bson"
"go.mongodb.org/mongo-driver/bson/primitive" "go.mongodb.org/mongo-driver/bson/primitive"
"go.mongodb.org/mongo-driver/mongo" "go.mongodb.org/mongo-driver/mongo"
@ -15,11 +15,6 @@ import (
var mongoClient *mongo.Client var mongoClient *mongo.Client
type User struct {
Username string
Email string
}
type Message struct { type Message struct {
ID primitive.ObjectID `bson:"_id"` ID primitive.ObjectID `bson:"_id"`
Content string `bson:"message"` Content string `bson:"message"`
@ -47,8 +42,13 @@ func connectToMongoDB(uri string) {
} }
func main() { func main() {
// Import HTML using django engine/template
engine := django.New("./views", ".html")
if engine == nil {
panic("Failed to create django engine")
}
// Create new Fiber instance. Can use any framework. I use fiber for speed and simplicity // Create new Fiber instance. Can use any framework. I use fiber for speed and simplicity
engine := html.New("./layouts", ".html")
app := fiber.New(fiber.Config{ app := fiber.New(fiber.Config{
Views: engine, Views: engine,
AppName: "JADE 2.0", AppName: "JADE 2.0",
@ -77,11 +77,13 @@ func main() {
} }
func indexHandler(c *fiber.Ctx) error { func indexHandler(c *fiber.Ctx) error {
return c.Render("base", fiber.Map{}, "welcome") return c.Render("welcome", fiber.Map{}, "layouts/main")
} }
func chatPageHandler(c *fiber.Ctx) error { func chatPageHandler(c *fiber.Ctx) error {
return c.Render("base", nil, "chat") return c.Render("chat", fiber.Map{
"Messages": []Message{},
}, "layouts/main")
} }
func addMessageHandler(c *fiber.Ctx) error { func addMessageHandler(c *fiber.Ctx) error {

5
views/chat.html Normal file
View File

@ -0,0 +1,5 @@
<div class="chat-container">
<h1>Chat Page</h1>
{% include "partials/chat-messages.html" %}
{% include "partials/chat-input.html" %}
</div>

26
layouts/base.html → views/layouts/main.html
View File

@ -9,9 +9,9 @@
</head> </head>
<body> <body>
{{ template "navbar" . }} {% include "partials/navbar.html" %}
{{template "content" .}} {{embed}}
<script src="https://unpkg.com/htmx.org@1.9.11"></script> <script src="https://unpkg.com/htmx.org@1.9.11"></script>
<style> <style>
@ -37,25 +37,3 @@
</body> </body>
</html> </html>
{{define "navbar"}}
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.bouvai.com">
<img src="/bouvai.png">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">
Home
</a>
<a class="navbar-item" href="/chat">
Chat
</a>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
{{end}}

12
views/partials/bot-message.html Normal file
View File

@ -0,0 +1,12 @@
<article class="message bot-message">
<div class="message-header">
<p>Bot</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ Message.Content }}
</div>
</article>

3
views/partials/chat-input.html Normal file
View File

@ -0,0 +1,3 @@
<form>
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>

11
views/partials/chat-messages.html Normal file
View File

@ -0,0 +1,11 @@
<div class="columns is-centered">
<div class="column is-half">
{% for Message in Messages %}
{% if Message.User == "User" %}
{% include "partials/user-message.html" %}
{% else %}
{% include "partials/bot-message.html" %}
{% endif %}
{% endfor %}
</div>
</div>

19
views/partials/navbar.html Normal file
View File

@ -0,0 +1,19 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.bouvai.com">
<img src="/bouvai.png">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">
Home
</a>
<a class="navbar-item" href="/chat">
Chat
</a>
</div>
<div class="navbar-end">
</div>
</div>
</nav>

12
views/partials/user-message.html Normal file
View File

@ -0,0 +1,12 @@
<article class="message user-message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ Message.Content }}
</div>
</article>

3
layouts/welcome.html → views/welcome.html
View File

@ -1,9 +1,6 @@
{{define "content"}}
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h1>Welcome to JADE 2.0!</h1> <h1>Welcome to JADE 2.0!</h1>
<h1 id="isMongoDBConnected" hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1> <h1 id="isMongoDBConnected" hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
</div> </div>
</div> </div>
{{end}}