feat(app): add landing page #6

* fix(app): set services placeholder

* fix(query): path column is not exist

* chore(app): gitignore generated db

* feat(app): add ui

.gitignore

@@ -1,3 +1,6 @@
 .env
 assets/css/dist.css
 node_modules
+gen/db/db.go
+gen/db/models.go
+gen/db/users.sql.go

Makefile

@@ -1,7 +1,9 @@
-run: gen build-css
+all: sqlc-gen style-build run
+
+run:
 	go run cmd/app/main.go
 
-gen:
+sqlc-gen:
 	sqlc generate
 
 up: compose-up migrate-up
@@ -18,5 +20,5 @@ migrate-up:
 migrate-down:
 	go run cmd/migrate/main.go -run=down
 
-build-css:
+style-build:
 	npx tailwindcss -i ./assets/css/src.css -o ./assets/css/dist.css

cmd/app/main.go

@@ -11,8 +11,8 @@ func init() {
 }
 
 func main() {
-	pool := database.NewDBPool()
-	defer pool.Close()
+	db := database.NewDBPool()
+	defer db.Close()
 
-	server.Run(pool)
+	server.Run(db)
 }

gen/queries/users.sql

@@ -1,9 +1,5 @@
 -- name: CreateUser :exec
-insert into users (
-	name, path
-) values (
-	$1, $2
-);
+insert into users (name) values ($1);
 
 -- name: ListUsers :many
 select * from users;

internal/handlers/admin/auth.go

@@ -0,0 +1,21 @@
+package admin
+
+import (
+	"os"
+
+	"github.com/gofiber/fiber/v2"
+)
+
+func LoginPage(c *fiber.Ctx) error {
+	return c.Render("login", fiber.Map{
+		"AppName": os.Getenv("APP_NAME"),
+		"Title":   "Login",
+	}, "layouts/auth")
+}
+
+// func RegisterPage(c *fiber.Ctx) error {
+// 	return c.Render("register", fiber.Map{
+// 		"AppName": os.Getenv("APP_NAME"),
+// 		"Title":   "Register",
+// 	}, "layouts/auth")
+// }

internal/handlers/admin/dashboard.go

@@ -0,0 +1,14 @@
+package admin
+
+import (
+	"os"
+
+	"github.com/gofiber/fiber/v2"
+)
+
+func DashboardPage(c *fiber.Ctx) error {
+	return c.Render("dashboard", fiber.Map{
+		"AppName": os.Getenv("APP_NAME"),
+		"Title":   "Hello, Dashboard!",
+	}, "layouts/admin")
+}

internal/handlers/api/ping.go

@@ -0,0 +1,9 @@
+package api
+
+import "github.com/gofiber/fiber/v2"
+
+func Ping(c *fiber.Ctx) error {
+	return c.Status(fiber.StatusOK).JSON(fiber.Map{
+		"message": "PONG",
+	})
+}

internal/handlers/web/home.go

@@ -0,0 +1,14 @@
+package web
+
+import (
+	"os"
+
+	"github.com/gofiber/fiber/v2"
+)
+
+func HomePage(c *fiber.Ctx) error {
+	return c.Render("home", fiber.Map{
+		"AppName": os.Getenv("APP_NAME"),
+		"Title":   "Hello, World!",
+	}, "layouts/web")
+}

internal/routes/routes.go

@@ -3,9 +3,9 @@ package routes
 import (
 	"github.com/gofiber/fiber/v2"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/kobamkode/terigu/internal/admin"
-	"github.com/kobamkode/terigu/internal/api"
-	"github.com/kobamkode/terigu/internal/web"
+	"github.com/kobamkode/terigu/internal/handlers/admin"
+	"github.com/kobamkode/terigu/internal/handlers/api"
+	"github.com/kobamkode/terigu/internal/handlers/web"
 )
 
 type handler struct {
@@ -30,4 +30,6 @@ func (h *handler) API() {
 func (h *handler) Admin() {
 	r := h.app.Group("/admin")
 	r.Get("/", admin.DashboardPage)
+	r.Get("/login", admin.LoginPage)
+	// r.Get("/register", admin.RegisterPage)
 }

internal/server/server.go

@@ -13,19 +13,20 @@ import (
 	"github.com/kobamkode/terigu/internal/routes"
 )
 
-func Run(pool *pgxpool.Pool) {
+func Run(db *pgxpool.Pool) {
 	engine := html.New("./views", ".html")
 
 	app := fiber.New(fiber.Config{
 		Views: engine,
 	})
 	app.Static("/assets", "./assets")
+	app.Static("/admin/assets", "./assets")
 	app.Use(requestid.New())
 	app.Use(logger.New(logger.Config{
 		Format: "${time} ${locals:requestid} ${latency} ${status} - ${method} ${path}\n",
 	}))
 
-	run := routes.NewHandler(app, pool)
+	run := routes.NewHandler(app, db)
 	run.Web()
 	run.API()
 	run.Admin()

internal/web/home.go

@@ -10,5 +10,5 @@ func HomePage(c *fiber.Ctx) error {
 	return c.Render("home", fiber.Map{
 		"AppName": os.Getenv("APP_NAME"),
 		"Title":   "Hello, World!",
-	}, "layouts/main")
+	}, "layouts/web")
 }

package.json

@@ -1,5 +1,7 @@
 {
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "daisyui": "^4.12.10",
     "tailwindcss": "^3.4.10"
   }
 }

tailwind.config.js

@@ -4,6 +4,9 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('daisyui'),
+  ],
 }
 

views/home.html

@@ -1 +1,3 @@
-<h1 class="text-3xl font-bold underline">{{.Title}}</h1>
+<div class="my-4">
+	{{template "partials/hero"}}
+</div>

views/layouts/admin.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>{{.AppName}}</title>
+	<link href="assets/css/dist.css" rel="stylesheet">
+	<script src="assets/js/htmx.min.js"></script>
+</head>
+
+<body>
+	<div class="flex">
+		<div class="flex-none">
+			{{template "partials/drawer"}}
+		</div>
+		<div class="flex-1 bg-slate-200 p-4">{{embed}}</div>
+	</div>
+</body>
+
+</html>

views/layouts/main.html → views/layouts/auth.html

@@ -8,7 +8,7 @@
 </head>
 
 <body>
-	<div class="">
+	<div class="flex min-h-screen justify-center items-center bg-slate-200">
 		{{embed}}
 	</div>
 </body>

views/layouts/web.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>{{.AppName}}</title>
+	<link href="assets/css/dist.css" rel="stylesheet">
+	<script src="assets/js/htmx.min.js"></script>
+</head>
+
+<body class="bg-slate-200">
+	{{template "partials/navbar" .}}
+	<div class="container mx-auto min-h-screen">
+		{{embed}}
+	</div>
+	{{template "partials/footer"}}
+</body>
+
+</html>

views/login.html

@@ -0,0 +1,37 @@
+<div class="card bg-base-100 w-96 shadow-xl">
+	<div class="card-body items-center text-center">
+		<h2 class="card-title">{{.Title}}</h2>
+
+		<form hx-post="/admin/login" hx-target="#form-login" hx-swap="outerHTML">
+			<div class="form-control my-4">
+				<label class="input input-bordered flex items-center gap-2">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
+						class="h-4 w-4 opacity-70">
+						<path
+							d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+					</svg>
+					<input type="text" name="username" class="grow border-none focus:outline-none"
+						placeholder="Username" />
+				</label>
+
+			</div>
+			<div class="form-control my-4">
+				<label class="input input-bordered flex items-center gap-2">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
+						class="h-4 w-4 opacity-70">
+						<path fill-rule="evenodd"
+							d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+							clip-rule="evenodd" />
+					</svg>
+					<input type="password" name="password"
+						class="grow border-none focus:outline-none" value="password" />
+				</label>
+
+			</div>
+
+			<div class="form-control my-4">
+				<button class="btn btn-block" type="submit">Login</button>
+			</div>
+		</form>
+	</div>
+</div>

views/partials/drawer.html

@@ -0,0 +1,14 @@
+<div class="drawer lg:drawer-open bg-slate-200">
+	<input id="my-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-content">
+		<label for="my-drawer" class="btn btn-primary drawer-button lg:hidden">Open drawer</label>
+	</div>
+	<div class="drawer-side">
+		<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+		<ul class="menu bg-base-200 text-base-content min-h-full w-40 p-4">
+			<!-- Sidebar content here -->
+			<li><a>Sidebar Item 1</a></li>
+			<li><a>Sidebar Item 2</a></li>
+		</ul>
+	</div>
+</div>