Work on image rendering

internal/database/handlers.go

@@ -70,7 +70,7 @@ func GetThread(db *sql.DB, threadId int) (Thread, error) {
 }
 
 func GetPosts(db *sql.DB, threadId int) ([]Post, error) {
-	rows, err := db.Query(`SELECT id, thread_id, author, body, created_at FROM posts where thread_id = ?`, threadId)
+	rows, err := db.Query(`SELECT id, thread_id, author, body, created_at, media_path FROM posts where thread_id = ?`, threadId)
 	if err != nil {
 		return nil, err
 	}
@@ -79,7 +79,7 @@ func GetPosts(db *sql.DB, threadId int) ([]Post, error) {
 	var result []Post
 	for rows.Next() {
 		var p Post
-		err := rows.Scan(&p.Id, &p.ThreadId, &p.Author, &p.Body, &p.CreatedAt)
+		err := rows.Scan(&p.Id, &p.ThreadId, &p.Author, &p.Body, &p.CreatedAt, &p.MediaPath)
 		if err != nil {
 			return nil, err
 		}
@@ -106,7 +106,7 @@ func PutThread(db *sql.DB, boardSlug string, subject string, body string) error
 		return err
 	}
 
-	_, err = tx.Exec(`INSERT INTO posts (thread_id, body) VALUES (?, ?)`, threadId, body)
+	_, err = tx.Exec(`INSERT INTO posts (thread_id, body, media_path) VALUES (?, ?, ?)`, threadId, body, "default.png")
 	if err != nil {
 		return err
 	}

internal/database/models.go

@@ -23,4 +23,5 @@ type Post struct {
 	Author    string
 	Body      string
 	CreatedAt time.Time
+	MediaPath string
 }

internal/database/seed.sql

@@ -26,6 +26,7 @@ CREATE TABLE IF NOT EXISTS posts (
     author TEXT DEFAULT 'Anonymous',
     body TEXT NOT NULL,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    media_path TEXT NOT NULL DEFAULT '',
     FOREIGN KEY (thread_id) REFERENCES threads(id) ON DELETE CASCADE
 );
 
@@ -46,11 +47,8 @@ INSERT INTO boards (slug, name, tag) VALUES
         'comfy',
         'Welcome to /comfy/.' 
     );
-    INSERT INTO posts (thread_id, body) VALUES (
+    INSERT INTO posts (thread_id, body, media_path) VALUES (
         (SELECT id FROM threads WHERE subject LIKE 'Welcome to /comfy/.%'),
-        'Post comfy. Be nice.'
+        'Post comfy. Be nice.',
-    );
+        '1.jpg'
-    INSERT INTO posts (thread_id, body) VALUES (
-        (SELECT id FROM threads WHERE subject LIKE 'Welcome to /comfy/.%'),
-        'Henlo fren.'
     );

web/main.go

@@ -102,9 +102,9 @@ func main() {
 			return
 		}
 
-		if len(posts) == 0 {
+		if len(posts) == 0 || posts[0].MediaPath == "" {
 			http.Error(w, "Malformed thread", http.StatusInternalServerError)
-			log.Printf("Thread %d has no posts", thread.Id)
+			log.Printf("Thread %d has no posts or no OP image", threadId)
 			return
 		}
 
@@ -182,9 +182,9 @@ func main() {
 				return
 			}
 
-			if len(posts) == 0 {
+			if len(posts) == 0 || posts[0].MediaPath == "" {
 				http.Error(w, "Malformed thread", http.StatusInternalServerError)
-				log.Printf("Thread %d has no posts", thread.Id)
+				log.Printf("Thread %d has no posts or no OP image", thread.Id)
 				return
 			}
 
@@ -192,6 +192,7 @@ func main() {
 				Subject:   thread.Subject,
 				Body:      posts[0].Body,
 				ThreadURL: fmt.Sprintf("/%s/threads/%d", slug, thread.Id),
+				MediaPath: posts[0].MediaPath,
 			})
 		}
 
@@ -216,9 +217,9 @@ func main() {
 			return
 		}
 
-		if len(posts) == 0 {
+		if len(posts) == 0 || posts[0].MediaPath == "" {
 			http.Error(w, "Malformed thread", http.StatusInternalServerError)
-			log.Printf("Thread %d has no posts", threadId)
+			log.Printf("Thread %d has no posts or no OP image", threadId)
 			return
 		}
 

web/static/index.css

@@ -53,13 +53,13 @@ body {
 /* THREAD CATALOG */
 
 #catalog {
-    display: grid;
+    display: flex;
-    grid-template-columns: auto auto auto auto;
-    gap: 1rem;
     margin: 2rem;
 }
 
 .catalog-preview {
+    margin: 10px;
+    text-align: center;
     padding: 10px;
     border: 2px solid rgba(111, 111, 111, 0.34);
     min-width: 140px;
@@ -82,6 +82,11 @@ body {
     cursor: pointer;
 }
 
+.catalog-preview-img {
+    max-height: 70%;
+    max-width: 80%;
+    margin-bottom: 10px;
+}
 
 /* NEW THREAD BUTTON/FORM */
 
@@ -153,11 +158,29 @@ body {
     color: #13A82A;
 }
 
+.post-img-container {
+    float: left;
+    margin: 4px 12px 4px 0;
+}
+
+.post-img {
+    height: auto;
+    max-width: 400px;
+    margin-bottom: 10px;
+}
+
+.post-body {
+    overflow-wrap: break-word;
+    line-height: 1.3;
+}
+
 .op-post {
     margin-bottom: 10px;
 }
 
 .post {
+    display: inline-block;
+    margin: 5x;
     padding: 10px;
     background-color: #D6DAF0;
     border: 1px solid #282a2e;

web/views/thread.templ

@@ -20,6 +20,7 @@ for _, post := range (posts) {
 		<p>{ post.Body }</p>
 	</section>
 </article>
+<br />
 }
 }
 
@@ -33,7 +34,7 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 		<table>
 			<tbody>
 				<tr class="new-post-form-field">
-					<th>Comment</th>
+					<th>comment</th>
 					<td><textarea id="newPostBody" name="body" required></textarea></td>
 				</tr>
 			</tbody>
@@ -43,6 +44,11 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 </div>
 <div class="thread">
 	<article class="op-post">
+		if posts[0].MediaPath != "" {
+		<div class="post-img-container">
+			<img src={ fmt.Sprintf("/static/img/posts/%s", posts[0].MediaPath) } class="post-img" />
+		</div>
+		}
 		<header class="post-header">
 			<h1 class="thread-subject">{ thread.Subject } -</h1>
 			<span class="post-author">{ posts[0].Author }</span>
@@ -50,9 +56,7 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 			<span class="post-time">{ posts[0].CreatedAt.Format("15:04") }</span>
 			<span class="post-num">No. { strconv.Itoa(posts[0].Id) }</span>
 		</header>
-		<section>
+		<p class="post-body">{ posts[0].Body }</p>
-			<p>{ posts[0].Body }</p>
-		</section>
 	</article>
 	<div hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) }
 		hx-trigger="load, refreshPosts from:body"></div>

web/views/threads.templ

@@ -1,15 +1,19 @@
 package views
 
+import "fmt"
+
 type CatalogThreadPreview struct {
 Subject string
 Body string
 ThreadURL string
+MediaPath string
 }
 
 templ ThreadsCatalog(previews []CatalogThreadPreview) {
 <div id="catalog">
 	for _, preview := range previews {
 	<div class="catalog-preview">
+		<img class="catalog-preview-img" src={ fmt.Sprintf("/static/img/posts/%s", preview.MediaPath) } />
 		<h1><a href={ templ.SafeURL(preview.ThreadURL) } class="catalog-preview-link">{ preview.Subject }</a></h1>
 		<p>{ preview.Body }</p>
 	</div>