Styled deleted comments

joeychilson · Dec 22, 2023 · 5db9758 · 5db9758
1 parent afe3526
commit 5db9758
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 83 deletions.
diff --git a/components/comments.templ b/components/comments.templ
@@ -10,31 +10,59 @@ templ Comments(comments []hackernews.Item, level int) {
 	for _, comment := range comments {
 		<div
  			if level == 0 {
-				class="border-l-4 border-orange-500 bg-white p-4 mb-2"
+				class={ "border-l-4 bg-white p-4 mb-2", borderColor(comment.Deleted, level) }
 			} else {
-				class={ "border-l-4 border-gray-300 bg-gray-50 p-4 mb-2 " }
+				class={ "border-l-4 bg-gray-50 p-4 mb-2", borderColor(comment.Deleted, level) }
 				style={ margin(level) }
 			}
 		>
-			<div class="mb-2">
-				<span class="text-xs text-gray-600">
-					by <a href={ templ.URL(fmt.Sprintf("/user?id=%v", comment.By)) } class="hover:text-blue-600">{ comment.By }</a>
-					| { TimeAgo(comment.Time) }
-				</span>
-			</div>
-			<p class="text-sm word-wrap break-words overflow-wrap break-word">
-				@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>
-			</div>
+			if comment.Deleted {
+				<span class="text-sm text-red-500">[deleted]</span>
+			} else {
+				<div class="mb-2">
+					<span class="text-xs text-gray-600">
+						by <a href={ templ.URL(fmt.Sprintf("/user?id=%v", comment.By)) } class="hover:text-blue-600">{ comment.By }</a>
+						| { TimeAgo(comment.Time) }
+					</span>
+				</div>
+				<p class="text-sm word-wrap break-words overflow-wrap break-word">
+					@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>
+				</div>
+			}
 		</div>
 		if len(comment.Children) > 0 {
 			@Comments(comment.Children, level+1)
 		}
 	}
 }
 
+func borderColor(deleted bool, level int) string {
+	if deleted {
+		return "border-red-500"
+	}
+	switch level {
+	case 0:
+		return "border-orange-500"
+	case 1:
+		return "border-gray-800"
+	case 2:
+		return "border-gray-700"
+	case 3:
+		return "border-gray-600"
+	case 4:
+		return "border-gray-500"
+	case 5:
+		return "border-gray-400"
+	case 6:
+		return "border-gray-300"
+	default:
+		return "border-gray-200"
+	}
+}
+
 func margin(level int) string {
 	return fmt.Sprintf("margin-left: %vrem;", level)
 }
diff --git a/components/comments_templ.go b/components/comments_templ.go
diff --git a/pages/item.templ b/pages/item.templ
@@ -17,7 +17,7 @@ type ItemProps struct {
 templ Item(props ItemProps) {
 	@layouts.Default(props.Item.Title) {
 		<style type="text/css">
-			p {
+			p, code, pre {
 				padding-top: 0.25rem;
 				font-size: 0.875rem;
 				line-height: 1.25rem;

diff --git a/pages/item_templ.go b/pages/item_templ.go
diff --git a/static/css/app.css b/static/css/app.css
@@ -707,11 +707,41 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+.border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
 .border-orange-500 {
   --tw-border-opacity: 1;
   border-color: rgb(249 115 22 / var(--tw-border-opacity));
 }
 
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -841,6 +871,11 @@ video {
   color: rgb(249 115 22 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));