Fixed comment text

components/comments.templ

@@ -7,6 +7,13 @@ import (
 )
 
 templ Comments(comments []hackernews.Item, level int) {
+	<style type="text/css">
+		p {
+			padding-top: 0.25rem;
+			font-size: 0.875rem;
+			line-height: 1.25rem;
+		}
+	</style>
 	for _, comment := range comments {
 		<div
  			if level == 0 {
@@ -23,7 +30,7 @@ templ Comments(comments []hackernews.Item, level int) {
 				</span>
 			</div>
 			<p class="text-sm word-wrap break-words overflow-wrap break-word">
-				{ comment.Text }
+				@UnescapedText(comment.Text)
 			</p>
 			<div class="mt-2">
 				<a href={ templ.URL(fmt.Sprintf("https://news.ycombinator.com/item?id=%v", comment.ID)) } class="underline text-xs text-blue-600">Reply</a>

components/components.go

@@ -1,10 +1,21 @@
 package components
 
 import (
+	"context"
 	"fmt"
+	"io"
 	"time"
+
+	"github.com/a-h/templ"
 )
 
+func UnescapedText(text string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		_, err := io.WriteString(w, text)
+		return err
+	})
+}
+
 func TimeAgo(postTime int64) string {
 	now := time.Now()
 	postTimeUTC := time.Unix(postTime, 0)

pages/item.templ

@@ -23,12 +23,17 @@ templ Item(props ItemProps) {
 						{ props.Item.Title }
 					</a>
 				</div>
-				<div class="mb-4">
+				<div class="mb-2">
 					<span class="text-sm text-gray-600">{ strconv.Itoa(props.Item.Score) } points</span>
 					<span class="text-sm text-gray-600">| by <a href={ templ.URL(fmt.Sprintf("/user?id=%v", props.Item.By)) } class="hover:text-blue-600">{ props.Item.By }</a> </span>
 					<span class="text-sm text-gray-600">| { components.TimeAgo(int64(props.Item.Time)) }</span>
 					<span class="text-sm text-gray-600">| { strconv.Itoa(props.Item.Descendants) } comments</span>
 				</div>
+				if props.Item.Text != "" {
+					<div class="text-sm word-wrap break-words overflow-wrap break-word">
+						@components.UnescapedText(props.Item.Text)
+					</div>
+				}
 				<div class="mt-2">
 					<a href={ templ.URL(fmt.Sprintf("https://news.ycombinator.com/item?id=%v", props.Item.ID)) } class="underline text-xs text-blue-600">Reply</a>
 				</div>