render thread catalog posts
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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()
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
+33
-32
@@ -1,42 +1,43 @@
|
||||
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: ;">
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="new-thread-form-field">
|
||||
<th>Subject</th>
|
||||
<td><input/></td>
|
||||
</tr>
|
||||
<tr class="new-thread-form-field">
|
||||
<th>Comment</th>
|
||||
<td><textarea></textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
<form style="display: none;" id="newThreadForm" style="display: ;">
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr class="new-thread-form-field">
|
||||
<th>Subject</th>
|
||||
<td><input /></td>
|
||||
</tr>
|
||||
<tr class="new-thread-form-field">
|
||||
<th>Comment</th>
|
||||
<td><textarea></textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
templ Board(board database.Board) {
|
||||
@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">
|
||||
<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
|
||||
@NewThreadForm()
|
||||
</div>
|
||||
}
|
||||
@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">
|
||||
<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
|
||||
@NewThreadForm()
|
||||
</div>
|
||||
<div hx-get={ fmt.Sprintf("/hx/%d/posts/grid", board.Id) } hx-trigger="load" id="threadCatalog"></div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
@@ -1,33 +1,31 @@
|
||||
package shared
|
||||
|
||||
templ Layout() {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Comfychan</title>
|
||||
<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>
|
||||
<div id="boardList">
|
||||
<span>
|
||||
[
|
||||
<a href="/">index</a>
|
||||
]
|
||||
</span>
|
||||
<span>
|
||||
[
|
||||
<a href="/comfy">comfy</a> /
|
||||
<a href="/g">g</a>
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
{ children... }
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!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>
|
||||
<div id="boardList">
|
||||
<span>
|
||||
[
|
||||
<a href="/">index</a>
|
||||
]
|
||||
</span>
|
||||
<span>
|
||||
[
|
||||
<a href="/comfy">comfy</a> /
|
||||
<a href="/g">g</a>
|
||||
]
|
||||
</span>
|
||||
</div>
|
||||
{ children... }
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user