Added basic comments.

components/comments/comment.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="comment">
+		<div class="header">
+			<a
+				:href="`/user/${comment.user.username}`"
+				class="username link"
+			>u/{{ comment.user.username }}</a>
+
+			<span
+				:title="format(comment.createdAt, 'MMM d, yyyy hh:mm:ss')"
+				class="timestamp"
+			>{{ formatDistance(comment.createdAt, now, { includeSeconds: true }) }} ago</span>
+		</div>
+
+		<p class="body">{{ comment.body }}</p>
+	</div>
+</template>
+
+<script setup>
+import { format, formatDistance } from 'date-fns';
+import { usePageContext } from '../../renderer/usePageContext';
+
+const { now } = usePageContext();
+
+defineProps({
+	comment: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.comment {
+	background: var(--background);
+	padding: .5rem;
+	border-radius: .25rem;
+	margin-bottom: .25rem;
+}
+
+.header {
+	font-size: .9rem;
+	margin-bottom: .5rem;
+}
+
+.username {
+	color: inherit;
+	font-weight: bold;
+	margin-right: .5rem;
+}
+
+.timestamp {
+	color: var(--shadow);
+}
+
+.body {
+	margin: 0;
+}
+</style>

components/posts/post.vue

@@ -1,24 +1,36 @@
 <template>
-	<a
-		:href="`/s/shack/posts/${post.id}`"
-		class="post"
-	>
-		<img
-			class="thumbnail"
-			:src="blockedIcon"
+	<div class="post">
+		<a
+			:href="post.link || `/s/${post.shelf.slug}/post/${post.id}`"
+			target="_blank"
+			class="title-link"
 		>
+			<img
+				class="thumbnail"
+				:src="blockedIcon"
+			>
+		</a>
 
 		<div class="body">
-			<h2 class="title">
+			<div class="header">
+				<h2 class="title">
+					<a
+						:href="`/s/${post.shelf.slug}/post/${post.id}`"
+						class="title-link"
+					>{{ post.title }}</a>
+				</h2>
+
 				<a
-					:href="`/s/shack/posts/${post.id}`"
+					v-if="post.link"
+					:href="post.link"
+					target="_blank"
 					class="link"
-				>{{ post.title }}</a>
-			</h2>
+				>{{ post.link }}</a>
+			</div>
 
 			<div class="meta">
 				<a
-					:href="`/user/${post.shelf.slug}`"
+					:href="`/s/${post.shelf.slug}`"
 					class="shelf link"
 				>s/{{ post.shelf.slug }}</a>
 
@@ -30,15 +42,30 @@
 				<span
 					:title="format(post.createdAt, 'MMMM d, yyyy hh:mm:ss')"
 					class="timestamp"
-				>{{ formatDistance(post.createdAt, new Date(), { includeSeconds: true }) }} ago</span>
+				>{{ formatDistance(post.createdAt, now, { includeSeconds: true }) }} ago</span>
+			</div>
+
+			<div class="actions">
+				<a
+					:href="`/s/shack/post/${post.id}`"
+					class="link comments"
+				>{{ post.commentCount }} comments</a>
 			</div>
 		</div>
-	</a>
+
+		<a
+			:href="`/s/shack/post/${post.id}`"
+			class="fill"
+		/>
+	</div>
 </template>
 
 <script setup>
 import { format, formatDistance } from 'date-fns';
-import blockedIcon from '../../assets/icons/blocked.svg?url'; // eslint-ignore import/no-unresolved
+import blockedIcon from '../../assets/icons/blocked.svg?url'; // eslint-disable-line import/no-unresolved
+import { usePageContext } from '../../renderer/usePageContext';
+
+const { now } = usePageContext();
 
 defineProps({
 	post: {
@@ -53,6 +80,7 @@ defineProps({
 	display: flex;
 	color: var(--text);
 	border-radius: .25rem;
+	margin-bottom: .25rem;
 	background: var(--background);
 	text-decoration: none;
 
@@ -69,17 +97,23 @@ defineProps({
 	margin-left: 1rem;
 }
 
-.title {
-	padding: .5rem 0;
-	margin: 0;
-	font-size: 1.25rem;
-	font-weight: normal;
-	color: var(--grey-dark-30);
+.header {
+	display: flex;
+	align-items: center;
+}
 
-	.link {
-		color: inherit;
-		text-decoration: none;
-	}
+.title {
+	display: inline-block;
+	padding: .25rem 0;
+	margin: .25rem 1rem 0 0;
+	font-size: 1rem;
+	font-weight: bold;
+	color: var(--grey-dark-30);
+}
+
+.title-link {
+	color: inherit;
+	text-decoration: none;
 }
 
 .thumbnail {
@@ -96,9 +130,14 @@ defineProps({
 .meta {
 	display: flex;
 	gap: 1rem;
+	margin-bottom: .25rem;
 	font-size: .9rem;
 }
 
+.username {
+	color: inherit;
+}
+
 .shelf {
 	color: inherit;
 	font-weight: bold;
@@ -107,4 +146,13 @@ defineProps({
 .timestamp {
 	color: var(--grey-dark-20);
 }
+
+.comments {
+	color: inherit;
+	font-size: .9rem;
+}
+
+.fill {
+	flex-grow: 1;
+}
 </style>