Skip to content

Commit 95c563d

Browse files
cmbsolvercmbsolver
committed
Set up UI rendering with Fiber templates: add layouts, views, and routes for Home and About pages. Configure html/v2 template engine.
1 parent f6d4675 commit 95c563d

File tree

7 files changed

+103
-3
lines changed

7 files changed

+103
-3
lines changed

‎go.mod‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ require (
1111

1212
require (
1313
github.com/andybalholm/brotli v1.1.0 // indirect
14+
github.com/gofiber/template v1.8.3 // indirect
15+
github.com/gofiber/template/html/v2 v2.1.3 // indirect
16+
github.com/gofiber/utils v1.1.0 // indirect
1417
github.com/google/uuid v1.6.0 // indirect
1518
github.com/jackc/pgpassfile v1.0.0 // indirect
1619
github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 // indirect

‎main.go‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,27 @@ package main
22

33
import (
44
"db"
5+
"quantix-math/routes" // Import the new routes package
56

67
"github.com/gofiber/fiber/v2"
8+
"github.com/gofiber/template/html/v2"
79
)
810

911
func main() {
1012
// init database
1113
db.InitDatabase()
1214

13-
app := fiber.New()
15+
// Initialize standard Go html template engine
16+
engine := html.New("./views", ".tmpl")
1417

15-
// Static files
16-
app.Static("/", "./quantix-math-ui/dist")
18+
// Pass the engine to the Fiber app
19+
app := fiber.New(fiber.Config{
20+
Views: engine,
21+
ViewsLayout: "layouts/main",
22+
})
23+
24+
// Setup Routes
25+
routes.SetupUIRoutes(app)
1726

1827
app.Listen(":3000")
1928
}

‎routes/ui_routes.go‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
package routes
2+
3+
import (
4+
"github.com/gofiber/fiber/v2"
5+
)
6+
7+
// SetupUIRoutes initializes the views/UI related routes
8+
func SetupUIRoutes(app *fiber.App) {
9+
// Home Page
10+
app.Get("/", func(c *fiber.Ctx) error {
11+
return c.Render("index", fiber.Map{
12+
"Title": "Home",
13+
})
14+
})
15+
16+
// About Page
17+
app.Get("/about", func(c *fiber.Ctx) error {
18+
return c.Render("about", fiber.Map{
19+
"Title": "About",
20+
})
21+
})
22+
}

‎views/about.tmpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
The Quantix Math Utilities are math utilities.

‎views/index.tmpl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<h1>Welcome</h1>
2+
<p>This content is automatically wrapped by the main layout!</p>

‎views/layouts/main.tmpl‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Quantix Math</title>
6+
<!-- Bootstrap CSS -->
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<!-- Bootstrap Icons -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
10+
11+
<style>
12+
.sidebar-collapsed {
13+
width: 0 !important;
14+
padding: 0 !important;
15+
}
16+
17+
/* Sidebar Link Hover Effect */
18+
#sidebar .nav-link:hover {
19+
background-color: #0b5ed7; /* Darker blue */
20+
color: white !important;
21+
}
22+
</style>
23+
</head>
24+
<body class="d-flex flex-column vh-100">
25+
<!-- Top Navigation Bar -->
26+
<nav class="navbar navbar-dark bg-dark border-bottom border-secondary">
27+
<div class="container-fluid d-flex justify-content-start">
28+
<button class="btn btn-link text-white me-3 text-decoration-none" id="sidebarToggle">
29+
<i class="bi bi-list fs-4"></i>
30+
</button>
31+
<a class="navbar-brand" href="/">Quantix Math - {{.Title}}</a>
32+
</div>
33+
</nav>
34+
35+
<!-- Main Workspace -->
36+
<div class="d-flex flex-grow-1 overflow-hidden">
37+
<!-- Sidebar -->
38+
{{template "partials/sidebar" .}}
39+
40+
<!-- Scrollable Content Area -->
41+
<div class="flex-grow-1 p-4 overflow-auto">
42+
{{embed}}
43+
</div>
44+
</div>
45+
46+
<script>
47+
document.getElementById('sidebarToggle').addEventListener('click', function() {
48+
const sidebar = document.getElementById('sidebar');
49+
sidebar.classList.toggle('sidebar-collapsed');
50+
});
51+
</script>
52+
</body>
53+
</html>

‎views/partials/sidebar.tmpl‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div id="sidebar" class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px; transition: all 0.3s; overflow: hidden;">
2+
<ul class="nav nav-pills flex-column mb-auto">
3+
<li class="nav-item">
4+
<a href="/" class="nav-link text-white">Home</a>
5+
</li>
6+
<li>
7+
<a href="/about" class="nav-link text-white">About</a>
8+
</li>
9+
</ul>
10+
</div>

0 commit comments

Comments
 (0)