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>