render thread catalog posts

'

@@ -0,0 +1,130 @@
+body {
+    background: #EEF2FF;
+}
+
+/* INDEX */
+
+#clavis {
+    display: block;
+    width: 300px;
+    margin: 10px auto;
+    margin-bottom: 50px;
+}
+
+
+/* BOARD LIST */
+
+#boardList {
+    font-size: 12px;
+    margin: 5px;
+}
+
+#boardList a {
+    cursor: pointer;
+    color: #575F68;
+}
+
+#boardList a:hover {
+    color: #ff0000;
+}
+
+/* BOARDS */
+
+.board-header {
+    text-align: center;
+    color: #AF0A0F;
+}
+
+.board-header h1 {
+    font-weight: bold;
+    font-size: 1.8rem;
+    margin: 8px;
+    margin-top: 12px;
+}
+
+.board-header p {
+    font-size: .8rem;
+    margin: 4px;
+}
+
+.board-header img {
+    width: 300px;
+}
+
+.new-thread-container {
+    width: max-content;
+    margin: auto;
+}
+
+.thread-catalog-post {
+    border: 2px solid rgba(111, 111, 111, 0.34);
+    min-width: 140px;
+    max-width: 140px;
+    max-height: 192px;
+}
+
+.thread-catalog-post h1 {
+    color: #0F0C5D;
+    font-weight: bold;
+}
+
+.thread-catalog-post p {
+    margin-top: 10px;
+    font-size: 12px;
+}
+
+#newThreadBtn {
+    margin-top: 12px;
+    background: none;
+    border: none;
+    padding: 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: #34345C;
+    cursor: pointer;
+}
+
+#newThreadBtn:hover {
+    color: #ff0000
+}
+
+.new-thread-form-field {}
+
+.new-thread-form-field th {
+    border: 1px solid black;
+    text-align: left;
+    vertical-align: middle;
+    padding: 4px;
+    background: #98E;
+    font-weight: bold;
+    font-size: .8rem;
+}
+
+.new-thread-form-field td {
+    display: block;
+    margin: 2px;
+}
+
+/* GENERAL LAYOUT */
+
+.container {
+    width: 600px;
+    margin: auto;
+}
+
+.box {
+    font-size: 12px;
+    border: 1px solid black;
+    background-color: #eceff6;
+}
+
+.box h2 {
+    padding: 5px;
+    margin: 0;
+    background-color: #00007F;
+    color: #FFF;
+}
+
+.box p {
+    padding: 10px;
+}

internal/database/handlers.go

@@ -32,3 +32,44 @@ func GetBoard(db *sql.DB, slug string) (Board, error) {
 
 	return result, row.Err()
 }
+
+func GetBoardThreads(db *sql.DB, board_id int) ([]Thread, error) {
+	rows, err := db.Query(
+		`SELECT id, board_id, subject, created_at, bumped_at FROM threads WHERE board_id = ?`, board_id)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var result []Thread
+	for rows.Next() {
+		var t Thread
+		err := rows.Scan(&t.Id, &t.BoardId, &t.Subject, &t.CreatedAt, &t.BumpedAt)
+		if err != nil {
+			return nil, err
+		}
+		result = append(result, t)
+	}
+
+	return result, rows.Err()
+}
+
+func GetThreadPosts(db *sql.DB, thread_id int) ([]Post, error) {
+	rows, err := db.Query(`SELECT id, thread_id, author, body, created_at FROM posts where thread_id = ?`, thread_id)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var result []Post
+	for rows.Next() {
+		var p Post
+		err := rows.Scan(&p.Id, &p.ThreadId, &p.Author, &p.Body, &p.CreatedAt)
+		if err != nil {
+			return nil, err
+		}
+		result = append(result, p)
+	}
+
+	return result, rows.Err()
+}

main.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"log"
 	"net/http"
+	"strconv"
 
 	"github.com/dominicf2001/comfychan/internal/database"
 	"github.com/dominicf2001/comfychan/web/views"
@@ -51,13 +52,46 @@ func main() {
 		board, err := database.GetBoard(db, slug)
 		if err != nil {
 			http.NotFound(w, r)
-			log.Printf("board %q not found: %v", slug, err)
+			log.Printf("Board %q not found: %v", slug, err)
 			return
 		}
 
 		views.Board(board).Render(r.Context(), w)
 	})
 
+	r.Get("/hx/{boardId}/posts/grid", func(w http.ResponseWriter, r *http.Request) {
+		boardIdStr := chi.URLParam(r, "boardId")
+		boardId, err := strconv.Atoi(boardIdStr)
+		if err != nil {
+			http.Error(w, "invalid board id", http.StatusBadRequest)
+			return
+		}
+
+		threads, err := database.GetBoardThreads(db, boardId)
+		if err != nil {
+			http.Error(w, "Failed to get board threads", http.StatusInternalServerError)
+			log.Printf("GetBoardThreads: %v", err)
+			return
+		}
+
+		vms := make([]views.ThreadGridBoxViewModel, 0, len(threads))
+		for _, thread := range threads {
+			posts, err := database.GetThreadPosts(db, thread.Id)
+			if err != nil {
+				http.Error(w, "Error getting thread posts", http.StatusBadRequest)
+				log.Printf("GetThreadPosts: %v", err)
+				return
+			}
+
+			vms = append(vms, views.ThreadGridBoxViewModel{
+				Thread: thread,
+				Posts:  posts,
+			})
+		}
+
+		views.PostsGrid(vms).Render(r.Context(), w)
+	})
+
 	fmt.Println("Listening on :8080")
 	http.ListenAndServe(":8080", r)
 }

web/static/index.css

@@ -56,6 +56,28 @@ body {
     margin: auto;
 }
 
+#threadCatalog {
+    margin: 0 2rem;
+}
+
+.thread-catalog-post {
+    padding: 10px;
+    border: 2px solid rgba(111, 111, 111, 0.34);
+    min-width: 140px;
+    max-width: 140px;
+    max-height: 192px;
+}
+
+.thread-catalog-post h1 {
+    color: #0F0C5D;
+    font-weight: bold;
+}
+
+.thread-catalog-post p {
+    margin-top: 10px;
+    font-size: 12px;
+}
+
 #newThreadBtn {
     margin-top: 12px;
     background: none;

web/views/board.templ

@@ -1,42 +1,43 @@
 package views
 
 import (
-	"fmt"
+"fmt"
-	database "github.com/dominicf2001/comfychan/internal/database"
+database "github.com/dominicf2001/comfychan/internal/database"
-	"github.com/dominicf2001/comfychan/web/views/shared"
+"github.com/dominicf2001/comfychan/web/views/shared"
 )
 
 templ NewThreadForm() {
-	<form style="display: none;" id="newThreadForm" style="display: ;">
+<form style="display: none;" id="newThreadForm" style="display: ;">
-		<div>
+	<div>
-			<table>
+		<table>
-				<tbody>
+			<tbody>
-					<tr class="new-thread-form-field">
+				<tr class="new-thread-form-field">
-						<th>Subject</th>
+					<th>Subject</th>
-						<td><input/></td>
+					<td><input /></td>
-					</tr>
+				</tr>
-					<tr class="new-thread-form-field">
+				<tr class="new-thread-form-field">
-						<th>Comment</th>
+					<th>Comment</th>
-						<td><textarea></textarea></td>
+					<td><textarea></textarea></td>
-					</tr>
+				</tr>
-				</tbody>
+			</tbody>
-			</table>
+		</table>
-		</div>
+	</div>
-	</form>
+</form>
 }
 
 templ Board(board database.Board) {
-	@shared.Layout() {
+@shared.Layout() {
-		<header class="board-header">
+<header class="board-header">
-			<img src="/static/img/banner-comfy.png"/>
+	<img src="/static/img/banner-comfy.png" />
-			<h1>
+	<h1>
-				{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
+		{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
-			</h1>
+	</h1>
-			<p>{ board.Tag }</p>
+	<p>{ board.Tag }</p>
-		</header>
+</header>
-		<div class="new-thread-container">
+<div class="new-thread-container">
-			<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
+	<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
-			@NewThreadForm()
+	@NewThreadForm()
-		</div>
+</div>
-	}
+<div hx-get={ fmt.Sprintf("/hx/%d/posts/grid", board.Id) } hx-trigger="load" id="threadCatalog"></div>
+}
 }

web/views/posts.templ

@@ -0,0 +1,17 @@
+package views
+
+import "github.com/dominicf2001/comfychan/internal/database"
+
+type ThreadGridBoxViewModel struct {
+Thread database.Thread
+Posts []database.Post
+}
+
+templ PostsGrid(vms []ThreadGridBoxViewModel) {
+for _, vm := range vms {
+<div class="thread-catalog-post">
+	<h1>{ vm.Thread.Subject }</h1>
+	<p>{ vm.Posts[0].Body }</p>
+</div>
+}
+}

web/views/shared/layout.templ

@@ -1,33 +1,31 @@
 package shared
 
 templ Layout() {
-<!DOCTYPE html>
+	<!DOCTYPE html>
-<html lang="en">
+	<html lang="en">
-
+		<head>
-<head>
+			<meta charset="UTF-8"/>
-	<meta charset="UTF-8" />
+			<title>Comfychan</title>
-	<title>Comfychan</title>
+			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
-	<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
+			<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
-	<link rel="stylesheet" href="/static/reset.css" />
+			<link rel="stylesheet" href="/static/reset.css"/>
-	<link rel="stylesheet" href="/static/index.css" />
+			<link rel="stylesheet" href="/static/index.css"/>
-</head>
+		</head>
-
+		<body>
-<body>
+			<div id="boardList">
-	<div id="boardList">
+				<span>
-		<span>
+					[
-			[
+					<a href="/">index</a>
-			<a href="/">index</a>
+					]
-			]
+				</span>
-		</span>
+				<span>
-		<span>
+					[
-			[
+					<a href="/comfy">comfy</a> /
-			<a href="/comfy">comfy</a> /
+					<a href="/g">g</a>
-			<a href="/g">g</a>
+					]
-			]
+				</span>
-		</span>
+			</div>
-	</div>
+			{ children... }
-	{ children... }
+		</body>
-</body>
+	</html>
-
-</html>
 }