render thread catalog posts

This commit is contained in:
Dominic Ferrando
2025-04-18 01:09:49 -04:00
parent 0146a9583d
commit a8e1443f03
7 changed files with 305 additions and 62 deletions
+130
View File
@@ -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;
}
+41
View File
@@ -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()
}
+35 -1
View File
@@ -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)
}
+22
View File
@@ -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;
+14 -13
View File
@@ -1,19 +1,19 @@
package views
import (
"fmt"
database "github.com/dominicf2001/comfychan/internal/database"
"github.com/dominicf2001/comfychan/web/views/shared"
"fmt"
database "github.com/dominicf2001/comfychan/internal/database"
"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>
<table>
<tbody>
<tr class="new-thread-form-field">
<th>Subject</th>
<td><input/></td>
<td><input /></td>
</tr>
<tr class="new-thread-form-field">
<th>Comment</th>
@@ -22,21 +22,22 @@ templ NewThreadForm() {
</tbody>
</table>
</div>
</form>
</form>
}
templ Board(board database.Board) {
@shared.Layout() {
<header class="board-header">
<img src="/static/img/banner-comfy.png"/>
@shared.Layout() {
<header class="board-header">
<img src="/static/img/banner-comfy.png" />
<h1>
{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
</h1>
<p>{ board.Tag }</p>
</header>
<div class="new-thread-container">
</header>
<div class="new-thread-container">
<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
@NewThreadForm()
</div>
}
</div>
<div hx-get={ fmt.Sprintf("/hx/%d/posts/grid", board.Id) } hx-trigger="load" id="threadCatalog"></div>
}
}
+17
View File
@@ -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>
}
}
+11 -13
View File
@@ -1,18 +1,17 @@
package shared
templ Layout() {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<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>
<link rel="stylesheet" href="/static/reset.css" />
<link rel="stylesheet" href="/static/index.css" />
</head>
<body>
<link rel="stylesheet" href="/static/reset.css"/>
<link rel="stylesheet" href="/static/index.css"/>
</head>
<body>
<div id="boardList">
<span>
[
@@ -27,7 +26,6 @@ templ Layout() {
</span>
</div>
{ children... }
</body>
</html>
</body>
</html>
}