Work on image rendering

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;
-    grid-template-columns: auto auto auto auto;
-    gap: 1rem;
+    display: flex;
     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>{ posts[0].Body }</p>
-		</section>
+		<p class="post-body">{ posts[0].Body }</p>
 	</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>