Added front page, moved shelf navigation to header.

components/comments/writer.vue

@@ -4,7 +4,7 @@
 		@submit.prevent="addComment"
 	>
 		<textarea
-			ref="input"
+			ref="inputRef"
 			v-model="body"
 			placeholder="Write a new comment"
 			class="input"
@@ -44,7 +44,7 @@ const props = defineProps({
 });
 
 const body = ref('');
-const input = ref(null);
+const inputRef = ref(null);
 
 async function addComment() {
 	await api.post(`/posts/${props.post.id}/comments`, {
@@ -57,7 +57,7 @@ async function addComment() {
 
 onMounted(() => {
 	if (props.comment) {
-		input.value.focus();
+		inputRef.value.focus();
 	}
 });
 </script>

components/posts/post.vue

@@ -22,7 +22,7 @@
 		</div>
 
 		<a
-			:href="post.link || `/s/${post.shelf.slug}/post/${post.id}`"
+			:href="post.link || `/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
 			target="_blank"
 			class="title-link"
 		>
@@ -36,7 +36,7 @@
 			<div class="header">
 				<h2 class="title">
 					<a
-						:href="`/s/${post.shelf.slug}/post/${post.id}`"
+						:href="`/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
 						class="title-link"
 					>{{ post.title }}</a>
 				</h2>
@@ -75,7 +75,7 @@
 		</div>
 
 		<a
-			:href="`/s/${post.shelf.slug}/post/${post.id}`"
+			:href="`/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
 			class="fill"
 		/>
 	</div>
@@ -133,6 +133,7 @@ async function submitVote(value) {
 	margin-bottom: .25rem;
 	background: var(--background);
 	text-decoration: none;
+	overflow: hidden;
 
 	& :hover {
 		cursor: pointer;
@@ -150,6 +151,7 @@ async function submitVote(value) {
 .header {
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
 }
 
 .title {
@@ -223,7 +225,8 @@ async function submitVote(value) {
 
 .meta {
 	display: flex;
-	gap: 1rem;
+	flex-wrap: wrap;
+	gap: 0 1rem;
 	margin-bottom: .25rem;
 	font-size: .9rem;
 }